Description
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
of1.0
. - Unchanged lines have an
opacity
of0.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.
After (Proposed): Changed lines have a clear background highlight, making them instantly stand out.
(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:
Lines 20 to 23 in a20f608
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