diff --git a/DisplayRepoInfo.os.js b/DisplayRepoInfo.os.js index d755899..821047e 100644 --- a/DisplayRepoInfo.os.js +++ b/DisplayRepoInfo.os.js @@ -1,15 +1,36 @@ // ==UserScript== // @name Display Repo Info and File Sizes for GitHub -// @version 1.0.0 +// @version 1.1.0 // @description Displays repository disk usage, age, and individual file sizes on GitHub. // @match https://github.com/*/* // ==/UserScript== const ROW_ID = 'openscript-repo-info-about'; +const STYLE_ID = 'openscript-repo-info-style'; const SIZE_CLASS = 'openscript-file-size'; +const RECENT_CLASS = 'openscript-recent-commit'; const TABLE_SELECTOR = 'table[aria-labelledby="folders-and-files"]'; +const RECENT_MS = 30 * 864e5; const SIZE_LOADS = new WeakMap(); +const ensureStyles = () => { + if (document.getElementById(STYLE_ID)) return; + const style = document.createElement('style'); + style.id = STYLE_ID; + style.textContent = ` + #${ROW_ID} { + display: grid; + gap: var(--base-size-8, 8px); + margin: var(--base-size-12, 12px) 0 var(--base-size-16, 16px); + } + #${ROW_ID} > div { min-height: 20px; } + .${RECENT_CLASS} { + color: var(--fgColor-severe, var(--color-severe-fg, #bc4c00)) !important; + } + `; + document.head.append(style); +}; + const formatBytes = b => { const u = ['B', 'KB', 'MB', 'GB']; let i = 0; @@ -125,13 +146,13 @@ const updateAboutInfo = async () => { container.id = ROW_ID; container.dataset.repo = key; container.innerHTML = ` -
+
calculating... repo size
-
+
@@ -211,12 +232,21 @@ const updateFileSizes = async () => { } }; +const updateCommitAges = () => { + const now = Date.now(); + document.querySelectorAll(`${TABLE_SELECTOR} relative-time[datetime]`).forEach(time => { + const age = now - Date.parse(time.getAttribute('datetime')); + time.classList.toggle(RECENT_CLASS, age >= 0 && age <= RECENT_MS); + }); +}; + let scheduled; const run = () => { clearTimeout(scheduled); scheduled = setTimeout(() => { updateAboutInfo(); updateFileSizes(); + updateCommitAges(); }, 50); }; @@ -225,6 +255,7 @@ const run = () => { ); const start = () => { + ensureStyles(); new MutationObserver(run).observe(document.documentElement, { childList: true, subtree: true }); run(); };