GitLab MR Viewed File Counter

Displays viewed/total file count on GitLab merge request pages
Ask a question, post a review, or report the script.
Wrap lines
// ==UserScript==
// @name         GitLab MR Viewed File Counter
// @namespace    http://tampermonkey.net/
// @version      1.0.1
// @description  Displays viewed/total file count on GitLab merge request pages
// @match        https://gitlab.com/*/-/merge_requests/*
// @grant        none
// @run-at       document-idle
// @author       bzly
// @license      GPL-3.0-or-later
// ==/UserScript==

(function () {
  'use strict';

  const badge = document.querySelector('.js-changes-tab-count');
  let total = badge.textContent.trim();
  const mrPath = window.location.pathname.match(/.*\/merge_requests\/\d+/)?.[0];
  const mrKey = `code-review-${mrPath}`;
  const pill = document.querySelector('.diffs-tab .gl-badge');

  function getViewedCount() {
    try {
      const viewed = JSON.parse(localStorage.getItem(mrKey));
      return Array.isArray(viewed) ? viewed.length : 0;
    } catch {
      return 0;
    }
  }

  function updateBadge() {
    const viewed = getViewedCount();
    const pct = total > 0 ? Math.round((viewed / total) * 100) : 0;
    badge.textContent = `${viewed}/${total}`;
    if (viewed > 0) {
        // when any files are marked as viewed, gradually turn from the GitLab 'closed' colour to the 'merged' colour.
        pill.style.backgroundColor = `color-mix(in srgb, var(--gl-badge-success-background-color-default) ${pct}%, var(--gl-badge-danger-background-color-default))`;
    } else {
       pill.style.backgroundColor = 'var(--gl-badge-neutral-background-color-default)';
    }
  }

  // update count when GitLab changes the element back at random times
  new MutationObserver(() => {
    if (!badge.textContent.includes('/')) {
      total = badge.textContent.trim();
      updateBadge();
    }
  }).observe(badge, { childList: true, characterData: true, subtree: true });

  // update count on same-tab changes
  const _setItem = localStorage.setItem.bind(localStorage);
  localStorage.setItem = function (key, value) {
    _setItem(key, value);
    if (key === mrKey) updateBadge();
  };

  // update count when going back to 0 viewed
  const _removeItem = localStorage.removeItem.bind(localStorage);
  localStorage.removeItem = function (key) {
    _removeItem(key);
    if (key === mrKey) updateBadge();
  };

  // update count on different-tab change (i.e. you are working across multiple tabs)
  window.addEventListener('storage', (e) => {
    if (e.key === mrKey) updateBadge();
  });
  
  updateBadge();
})();