Mark/unmark identical files as “Viewed” in the PR files tab

Periodically I end up reviewing large PRs that have lots of files that have similar identical diffs (e.g. package rename causes imports and dependencies in package.json files to change, etc.).

I realized it would be great to have a way to mark similar identical files as “Viewed” in the PR files tab.

A neat way to invoke this could be by double-clicking a “Viewed” checkbox.

I ended up doing this through a custom search engine in Chrome for now with the below code as its “URL” (I have its keyword defined as gh+~v so that on my Mac all I have to do is mark a few files as “Viewed” and then type Command+L+gh+#v+Enter and then all similar identical diffs get marked as “Viewed” too; I have similar shortcuts like gh+v to mark all files as “Viewed”, ghrd to display rich diffs for all files, etc.).

javascript: markIdenticalFilesAsViewed();

async function markIdenticalFilesAsViewed() {
  const files = document.querySelectorAll(".file");
  const { markedFiles, unmarkedFiles } = groupFiles(files);
  const markedHashes = new Set(markedFiles.map(getFileDiffHash));
  const identicalFiles = unmarkedFiles.filter((file) =>
    markedHashes.has(getFileDiffHash(file))
  );
  const { length: found } = identicalFiles;
  if (found === 0) {
    alert(`All identical files are marked as “Viewed”.`);
  } else if (confirm(`Mark ${found} identical files as “Viewed”?`)) {
    const start = Date.now();
    for await (const file of periodicEventCycling(identicalFiles)) {
      file.querySelector(".js-reviewed-checkbox").click();
    }
    const end = Date.now();
    const elapsed = ((end - start) / 1000).toLocaleString();
    alert(`Marked ${found} identical files as “Viewed” in ${elapsed} seconds.`);
  }
}

function groupFiles(files) {
  const markedFiles = [];
  const unmarkedFiles = [];
  for (const file of files) {
    const group = file.querySelector(".js-reviewed-checkbox[checked]")
      ? markedFiles
      : unmarkedFiles;
    group.push(file);
  }
  return { markedFiles, unmarkedFiles };
}

function getFileDiffHash(file) {
  const deletions = Array.from(
    file.querySelectorAll(".blob-code-deletion .blob-code-inner"),
    (e) => e.innerText
  );
  const additions = Array.from(
    file.querySelectorAll(".blob-code-addition .blob-code-inner"),
    (e) => e.innerText
  );
  return JSON.stringify({ deletions, additions });
}

async function* periodicEventCycling(iterable, delay = 50) {
  let updated = Date.now();
  for (const value of iterable) {
    yield value;
    if (Date.now() - updated > delay) {
      await new Promise((resolve) => setTimeout(resolve, 0));
      updated = Date.now();
    }
  }
}

[fregante]

PR welcome, but it has to start from a clicked file, it shouldn’t just mark “any identical diff” like the snippet in the first comment suggests.

Something simple like:

on "Viewed" click (if it's not triggered by `batch-mark-files-as-viewed`)
	look for identical files
	ask confirmation
	click each identical file 

Notes:

• no need for the suggested periodicEventCycling function

[mfulton26]

no need for the suggested periodicEventCycling function

I have some local code I’m testing out in this extension’s codebase, for large PRs there is no visual progress updating without something like periodicEventCycling and so the UI freezes until all the clicks have taken place (which takes a bit)