mark all files in PR as 'viewed'

[jpalmieri]

(or toggle such behavior).

Use case:

I often review large PRs by just scrolling through them, without checking the "viewed" checkbox after I review. It's an extra click for each file, which adds up. I often approve the PR without marking any files as "viewed".

The problem comes when the author adds new commits after my approval, so I have to come back and re-review. If I were to have checked all of the boxes, only the files which I hadn't reviewed would be expanded when I went to the Files tab. But I was lazy and didn't check any of them, so all of the files are expanded; it's the entire diff.

My solution is a userscript that checks all of the unchecked boxes; I trigger it when I approve the PR. It's really simple:

document.querySelectorAll(".js-reviewed-checkbox").forEach(checkbox => !checkbox.checked && checkbox.click());

I tie it to a key combo, so I can easily mark them all as reviewed.

Let me know if this is something that you think would add value to this project.

[Mottie]

Hi @jpalmieri!

LOL sorry, I thought I responded last week. I like this idea. It might be nice to add a toggle button near the top of the page, and allow Shift + Click on a view checkbox to toggle all the checkboxes to match the selected one. I'll see what I can do this weekend.

[Mottie]

Hi @jpalmieri!

Please test this userscript out and let me know what you think.

// ==UserScript==
// @name        GitHub Diff File Toggle
// @version     0.1.1
// @description A userscript that adds global diff file toggles
// @license     MIT
// @author      Rob Garrison
// @namespace   https://github.com/Mottie
// @include     https://github.com/*
// @run-at      document-idle
// @grant       none
// @require     https://greasyfork.org/scripts/28721-mutations/code/mutations.js?version=882023
// @require     https://greasyfork.org/scripts/398877-utils-js/code/utilsjs.js?version=785415
// @icon        https://github.githubassets.com/pinned-octocat.svg
// ==/UserScript==
/* global $ $$ on debounce make */
(() => {
	"use strict";

	let timer;
	let busy = false;

	const buildButton = () => {
		if (!$(".ghdt-toggle")) {
			const button = make({
				el: "button",
				className: "btn btn-sm ghdt-toggle tooltipped tooltipped-s float-right",
				text: "Toggle viewed",
				attrs: {
					"aria-label": "Toggle all viewed files"
				}
			});
			on(button, "click", event => {
				toggle(document, !event.target.classList.contains("selected"));
			});
			$("#files.diff-view")?.prepend(button);
		}
		// Update toggle button state after initialized; timer for progressive
		// loading
		clearTimeout(timer);
		timer = setTimeout(() => {
			if ($$(".js-reviewed-checkbox").every(el => el.checked)) {
				$(".ghdt-toggle")?.classList.add("selected");
			}
		}, 1000);
	};

	const toggle = (target, state) => {
		$$(".js-reviewed-checkbox").forEach(checkbox => {
			if (target !== checkbox && checkbox.checked !== state) {
				checkbox.click();
			}
		});
		$(".ghdt-toggle").classList.toggle("selected", state);
	};

	const handleChange = event => {
		const { target } = event;
		if (!busy && event.shiftKey && target.matches(".js-reviewed-checkbox")) {
			busy = true;
			toggle(target, target.checked);
			setTimeout(() => {
				busy = false;
			});
		}
	};

	const init = () => {
		if ($("#files.diff-view") || $(".pr-toolbar")) {
			buildButton();
		}
	};

	on(document, "ghmo:container ghmo:diff", init);
	on(document, "click", debounce(handleChange));
	on(document, "keydown", debounce(handleChange));
	init();
})();

[yakov116]

Refined github added it refined-github/refined-github#4016

[Mottie]

I went ahead and added this userscript - https://github.com/Mottie/GitHub-userscripts/wiki/GitHub-diff-file-toggle - because I like the button at the top 😺