Skip to content

Feat: Improve visibility of changed lines with background highlighting #221

Open
@eevmanu

Description

@eevmanu

What is the current behavior?

Currently, the tool uses opacity to differentiate between changed and unchanged lines when navigating through a file's commit history.

  • Changed lines have an opacity of 1.0.
  • Unchanged lines have an opacity of 0.6.

While functional, this difference is quite subtle and can be difficult for users to notice at a glance, especially on different monitors or in varying lighting conditions. This can reduce the effectiveness of the tool's primary goal: to clearly show changes over time.

What is the new proposed behavior?

I propose making the visual distinction more obvious and invasive by applying a background color to the changed lines, in addition to the full opacity. This is a very common and intuitive pattern found in most diff viewers and IDEs.

This would make it immediately clear which lines were added or modified in a specific commit.

Why is this an improvement?

  • Improved Accessibility & Clarity: A background color is a much stronger visual cue than a subtle change in opacity, making the tool easier to use for everyone.
  • Faster Comprehension: Users can instantly identify the "diff" for a commit without having to consciously look for subtle transparency changes.
  • Intuitive UX: Aligns with the standard visual language for code diffs that developers are already familiar with from tools like git diff, GitHub, and VS Code.

Conceptual Mockup

Here is a comparison to illustrate the proposed improvement.

URL example: https://githistory.xyz/alacritty/alacritty/blob/master/Makefile

Before (Current): Only a subtle opacity difference.

Image

After (Proposed): Changed lines have a clear background highlight, making them instantly stand out.

Image

(Note: The screenshots above are conceptual mockups to demonstrate the idea).

Implementation Details (Optional)

From my analysis of the code, this can be implemented with a minimal change in src/slide.js. The logic can be added inside the getLine function to conditionally apply a backgroundColor to the style object for lines where !line.left && line.middle is true.

Here:

git-history/src/slide.js

Lines 20 to 23 in a20f608

function getLine(line, i, { styles }) {
const style = styles[i];
return (
<div

The change

function getLine(line, i, { styles }) {
  const style = styles[i];
  
+  const isChanged = !line.left && line.middle;
+  if (isChanged) {
+    style.backgroundColor = "rgba(63, 185, 80, 0.15)";
+  }

  return (

This approach integrates cleanly with the existing animation system without requiring any major refactoring.

I also created the next IIFE (Immediately Invoked Function Expression), which is AI-enhanced, to test it via Chrome DevTools Console:

javascript code snippet
(() => {
  'use strict';

  // --- 1. Configuration ---
  const CONFIG = {
    STYLE_ID: 'git-history-highlight-patch',
    TARGET_CONTAINER_SELECTOR: '.scroller',
    HIGHLIGHT_COLOR: 'rgba(63, 185, 80, 0.15)', // GitHub-like green
    UNFOCUSED_OPACITY: '0.4', // Further dim unchanged lines
  };

  // --- 2. Idempotency & Pre-flight Checks ---
  if (document.getElementById(CONFIG.STYLE_ID)) {
    console.log('Git History Patcher: Already active.');
    return;
  }

  const targetContainer = document.querySelector(CONFIG.TARGET_CONTAINER_SELECTOR);
  if (!targetContainer) {
    console.error(`Git History Patcher: Target container "${CONFIG.TARGET_CONTAINER_SELECTOR}" not found. Aborting.`);
    return;
  }

  // --- 3. Define CSS Rules using CSS Custom Properties for flexibility ---
  // This is the most performant method. We let the browser's native engine handle all styling.
  const cssRules = `
    /* Define variables on the container for better scoping and dynamic changes if needed */
    ${CONFIG.TARGET_CONTAINER_SELECTOR} {
      --ghp-highlight-color: ${CONFIG.HIGHLIGHT_COLOR};
      --ghp-unfocused-opacity: ${CONFIG.UNFOCUSED_OPACITY};
    }

    /*
     * TARGET CHANGED LINES:
     * We combine Version 1's specific selector with Version 2's resilient format checks.
     * The comma acts as a logical OR, applying the style if ANY of these selectors match.
     * This is far more performant than any JS-based observation.
    */
    ${CONFIG.TARGET_CONTAINER_SELECTOR} code > div[style*="opacity:1"],
    ${CONFIG.TARGET_CONTAINER_SELECTOR} code > div[style*="opacity: 1"],
    ${CONFIG.TARGET_CONTAINER_SELECTOR} code > div[style*="opacity:1.0"],
    ${CONFIG.TARGET_CONTAINER_SELECTOR} code > div[style*="opacity: 1.0"] {
      background-color: var(--ghp-highlight-color) !important;
      transition: background-color 0.2s ease-in-out;
    }

    /*
     * ENHANCE FOCUS ON CHANGED LINES:
     * Further diminish the unchanged lines to make the highlighted lines stand out more.
    */
    ${CONFIG.TARGET_CONTAINER_SELECTOR} code > div[style*="opacity: 0.6"] {
       opacity: var(--ghp-unfocused-opacity) !important;
    }
  `;

  // --- 4. Inject the Style Element ---
  const styleElement = document.createElement('style');
  styleElement.id = CONFIG.STYLE_ID;
  styleElement.textContent = cssRules;
  document.head.appendChild(styleElement);

  // --- 5. Create a Robust Cleanup Function ---
  // A well-behaved script should be easy to remove without a page refresh.
  window.removeGitHistoryPatcher = () => {
    const styleTag = document.getElementById(CONFIG.STYLE_ID);
    if (styleTag) {
      styleTag.remove();
      console.log('Git History Patcher: Styles removed.');
    }
    // Clean up the global namespace
    delete window.removeGitHistoryPatcher;
  };

  // --- 6. Final Log ---
  console.log('Git History Patcher: Activated! Changed lines are now highlighted.');
  console.log('To disable, run `window.removeGitHistoryPatcher()` in the console.');

})();

p.d.: could be related to #216

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions