Marking files as "Viewed" with keyboard shortcut

[dorianmariecom]

Would be nice instead of going up and clicking the checkbox. Also would go nicely with up/down and/or left/right and/or j/k for going between files

[dorianmariecom]

I think you forgot the content of your message, or is it a +1?

[dorianmariecom]

I guess it could be built a browser extension

[nbolton]

For visibility: Surfacing v0.2 of @dvdvdmt's Tampermonkey script.

GitHub PR review keyboard shortcut
Mark file as "viewed" on GitHub PR UI when hovering and pressing 'Escape' key

Greasy Fork: Install
GitHub project: nbolton/github-review-shortcut
Original discussion: 10197#discussioncomment-13595843

[gpuma]

I agree. There is a huge lack of support for proper navigation using a keyboard only. Come on Github, this a programming website.

[JonasNord]

I second this, it'd help ergonomics for the masses and accessibility for those in need

[freeformz]

👍 I'd really like to be able to fully navigate code reviews with only my keyboard, but it's impossible ATM.

[dvdvdmt]

For those who want to use it now, here is a script that gives you the ability.

if (window.disposeMarkAsViewedByEscape) {
  window.disposeMarkAsViewedByEscape()
}

window.disposeMarkAsViewedByEscape = start()

function start() {
  window.addEventListener('keydown', handleKeyDown)
  
  return ()=>{
    window.removeEventListener('keydown', handleKeyDown)
  }

  function markFileAsViewed() {
    const fileElement = document.querySelector(`[data-details-container-group="file"]:hover`)
    if(fileElement){
      const fileViewedCheckbox = fileElement.querySelector(`.js-reviewed-checkbox`)
      fileViewedCheckbox?.click()
    }
  }

  function handleKeyDown() {
    if (event.key === 'Escape') {
      markFileAsViewed()
    }
  }
}

The UX almost the same as in Slack Unreads section where you have an ability to mark chat as read.

Given the mouse cursor is over a "File preview" element.
When Escape button is pressed.
The "Viewed" button inside the hovered "File preview" is clicked programmatically.

The subsequent Escape also clicks the "Viewed" button unmarking it.

You can inject the script to the page in any way that you prefer from Tampermonkey to Keyboard Maestro and others.

[pkerschbaum]

Here's the Tampermonkey script I use:

// ==UserScript==
// @name         Mark file as "viewed" on GitHub PR UI when hovering and pressing 'Escape' key
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @match        https://github.com/*
// ==/UserScript==

(function() {
    'use strict';

    if (window.disposeMarkAsViewedByEscape) {
        window.disposeMarkAsViewedByEscape()
    }

    window.disposeMarkAsViewedByEscape = start()

    function start() {
        window.addEventListener('keydown', handleKeyDown)

        return ()=>{
            window.removeEventListener('keydown', handleKeyDown)
        }

        function markFileAsViewed() {
            const fileElement = document.querySelector(`[data-details-container-group="file"]:hover`)
            if(fileElement){
                const fileViewedCheckbox = fileElement.querySelector(`.js-reviewed-checkbox`)
                fileViewedCheckbox?.click()
            }
        }

        function handleKeyDown() {
            if (event.key === 'Escape') {
                markFileAsViewed()
            }
        }
    }

})();

[jnv]

I needed to do some small fixes to Patrick's script, but otherwise it still works like charm (tested in FireMonkey on Firefox):

// ==UserScript==
// @name         GitHub Mark File Viewed
// @version      0.1
// @description  Mark file as "viewed" on GitHub PR UI when hovering and pressing 'Escape' key
// @match        https://github.com/*/pull/*/files
// ==/UserScript==

(function () {
  "use strict";

  if (window.disposeMarkAsViewedByEscape) {
    window.disposeMarkAsViewedByEscape();
  }

  window.disposeMarkAsViewedByEscape = start();

  function start() {
    window.addEventListener("keydown", handleKeyDown);

    return () => {
      window.removeEventListener("keydown", handleKeyDown);
    };

    function markFileAsViewed() {
      const fileElement = document.querySelector(
        '[data-details-container-group="file"]:hover',
      );
      if (fileElement) {
        // checkbox was renamed to toggle
        const fileViewedCheckbox = fileElement.querySelector(
          '.js-reviewed-toggle',
        );
        fileViewedCheckbox?.click();
      }
    }
    // event parameter was missing
    function handleKeyDown(event) {
      if (event.key === "Escape") {
        markFileAsViewed();
      }
    }
  }
})();

[nbolton]

Looks like GitHub changed their DOM today.

Here's a new Tampermonkey script that works with the new HTML:

Snippet moved to new GitHub project

// ==UserScript==
// @name         GitHub PR review keyboard shortcut
// @version      0.2
// @description  Mark file as "viewed" on GitHub PR UI when hovering and pressing 'Escape' key
// @match        https://github.com/*
// @author       dvdvdmt, nbolton
// @source       https://github.com/orgs/community/discussions/10197
// ==/UserScript==

(function() {
    'use strict';

    if (window.disposeMarkAsViewedByEscape) {
        window.disposeMarkAsViewedByEscape();
    }

    window.disposeMarkAsViewedByEscape = start();

    function start() {
        window.addEventListener('keydown', handleKeyDown)
        return () => window.removeEventListener('keydown', handleKeyDown);
    }

    function markFileAsViewed() {
        console.debug("Marking file as viewed");

        const fileElement = document.querySelector(`[id^="diff-"]:hover`);
        if (!fileElement){
            console.warn("No file element under cursor");
            return;
        }

        console.debug("File element found, finding buttons");
        const buttons = [...fileElement.querySelectorAll('button')];
        if (buttons.length === 0) {
            console.warn("No buttons found in file element");
            return;
        }

        console.debug("Buttons found, finding checkbox");
        const checkbox = buttons.find(btn => btn.textContent.trim() === 'Viewed');
        if (!checkbox) {
            console.warn("No checkbox found for file ement");
            return;
        }

        console.debug("Clicking checkbox");
        checkbox.click();
    }

    function handleKeyDown() {
        if (event.key === 'Escape') {
            markFileAsViewed();
        }
    }

})();

Edit: Moved to https://github.com/nbolton/github-review-shortcut

[levibostian]

I needed to make modifications to the handleKeyDown function because I noticed that copy/paste is disabled inside of the pull request suggestion text area.

// ==UserScript==
// @name         GitHub PR review keyboard shortcut
// @version      0.2
// @description  Mark file as "viewed" on GitHub PR UI when hovering and pressing 'Escape' key
// @match        https://github.com/*
// @author       dvdvdmt, nbolton
// @source       https://github.com/orgs/community/discussions/10197
// ==/UserScript==

(function() {
    'use strict';

    if (window.disposeMarkAsViewedByEscape) {
        window.disposeMarkAsViewedByEscape();
    }

    window.disposeMarkAsViewedByEscape = start();

    function start() {
        window.addEventListener('keydown', handleKeyDown);
        return () => window.removeEventListener('keydown', handleKeyDown);
    }

    function isInEditableArea(el) {
        if (!el) return false;
        // If the target or any ancestor is input/textarea/select
        if (el.closest && el.closest('input, textarea, select')) return true;
        // If the target or ancestor has contentEditable=true (or is contentEditable)
        const editable = el.closest && el.closest('[contenteditable]');
        if (editable) {
            const ce = editable.getAttribute('contenteditable');
            // treat empty string or "true" as editable; also fallback to isContentEditable
            if (ce === '' || ce === 'true' || editable.isContentEditable) return true;
        }
        // Some GitHub editors use role="textbox"
        if (el.closest && el.closest('[role="textbox"]')) return true;
        return false;
    }

    function markFileAsViewed() {
        console.debug("Marking file as viewed");

        const fileElement = document.querySelector(`[id^="diff-"]:hover`);
        if (!fileElement){
            console.debug("No file element under cursor");
            return;
        }

        const buttons = [...fileElement.querySelectorAll('button')];
        if (buttons.length === 0) {
            console.debug("No buttons found in file element");
            return;
        }

        // GitHub sometimes localizes the label; we attempt to match the visible label
        const checkbox = buttons.find(btn => btn.textContent && btn.textContent.trim() === 'Viewed');
        if (!checkbox) {
            console.debug("No 'Viewed' checkbox/button in file element");
            return;
        }

        checkbox.click();
    }

    function handleKeyDown(event) {
        // Only act on plain Escape without modifiers
        if (event.key !== 'Escape' || event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) {
            return;
        }

        // If focus is inside any editable input/textarea/contentEditable, do nothing
        if (isInEditableArea(event.target)) {
            return;
        }

        markFileAsViewed();
    }

})();

[nbolton]

I needed to make modifications to the handleKeyDown function because I noticed that copy/paste is disabled inside of the pull request suggestion text area.

Perhaps you might consider opening a PR: https://github.com/nbolton/github-review-shortcut

[slavagoreev]

Came up with pretty cool tool

// Right-click on a code section to mark a file as viewed
document.addEventListener('contextmenu', function(ev) {
    ev.preventDefault();
    const closestFile = ev.target.closest('.js-details-container');
    if (closestFile) {
        const checkbox = closestFile.querySelector('.js-reviewed-checkbox');
        if (checkbox) {
            checkbox.click();
        }
    }
    return false;
}, false);

Use this to make all "Click to load code" buttons expand

document.querySelectorAll('.load-diff-button').forEach(b => b.click());

[emmadesilva]

Love this! Just pasted it into Chrome DevTools. Which something like this was added by default.

[jnv]

There's also an open suggestion for Refined GitHub extension: refined-github/refined-github#5674

The extension already adds keyboard shortcuts for PR navigation, so it could be extended to mark files as viewed.

[nbolton]

Good pointer.

[Flamefire]

Why is that not part of GitHub proper? At least when you submit your review it could mark all as viewed

[RSAU-se]

Ergonomics are very poor indeed ...
If you put a button, at least put it also at the bottom of the file 😠

[bregenspan]

I've been using this approach in a bookmarklet (but should also work in user script), works with and without the new review experience enabled, and tries to minimize need for mouse use/scrolling: https://gist.github.com/bregenspan/bf0e9706df5b675112a7e954aba6f9ae