feat: Build support for new github pr experience (#152)

Adds support for the new github PR experience. This could have been a
huge refactor, but I decided to do it more surgically so as to not let
this blow out of proportion. Tested the whole matrix of new (new, old),
(unified, split), (chrome, ff). Will test again on main before release.

Closes #151

Author: spalmurray

src/content/github/pr/constants.ts

@@ -1 +1,2 @@
-export const lineSelector = ".js-file-line";
+export const oldLineSelector = ".js-file-line";
+export const newLineSelector = ".diff-line-row";

src/content/github/pr/main.tsx

@@ -9,7 +9,7 @@ import {
   clearAnimation,
   clearAnnotations,
 } from "../common/animation";
-import { lineSelector } from "./constants";
+import { oldLineSelector, newLineSelector } from "./constants";
 import { colors } from "../common/constants";
 import { print } from "src/utils";
 import { getConsent, getPRReport } from "../common/fetchers";
@@ -82,19 +82,41 @@ async function execute() {
   updateContainer(head, patch, change);
 
   globals.coverageReport = transformReport(coverageReport.files);
-  animateAndAnnotateLines(lineSelector, annotateLine);
+
+  annotateLines();
 }
 
-function createContainer() {
-  const parent = document.getElementsByClassName("pr-review-tools").item(0)!;
+function isNewExperience() {
+  const toolbar = document.querySelector(
+    "section[class*=' PullRequestFilesToolbar-module__toolbar']"
+  );
+  return !!toolbar;
+}
 
+function createContainer() {
   const element = (
-    <div className="codecov-flex float-left mr-4" id="coverage-report-data">
-      <div className="my-auto mr-6">Loading coverage report...</div>
+    <div className="ml-auto" id="coverage-report-data">
+      <div className="ml-auto mr-6">Loading coverage report...</div>
     </div>
   );
 
-  parent.prepend(element);
+  if (!isNewExperience()) {
+    // Old experience
+    const parent = document
+      .getElementsByClassName("pr-review-tools")
+      .item(0)?.parentElement;
+
+    parent?.insertBefore(element, parent.lastElementChild);
+
+    return;
+  }
+
+  // New experience code
+  const parent = document.querySelector(
+    "section[class*=' PullRequestFilesToolbar-module__toolbar']"
+  )!;
+
+  parent.insertBefore(element, parent.lastChild!);
 }
 
 function getMetadataFromURL(): { [key: string]: string } | null {
@@ -111,7 +133,7 @@ const handleToggleClick: React.MouseEventHandler = (event) => {
   const button = event.target as HTMLElement;
   const isInactive = button.getAttribute("data-inactive");
   if (isInactive == "true") {
-    animateAndAnnotateLines(lineSelector, annotateLine);
+    annotateLines();
     button.removeAttribute("data-inactive");
     button.innerText = "Hide Coverage";
   } else {
@@ -172,7 +194,38 @@ function transformReport(filesReport: any) {
   return result;
 }
 
-function annotateLine(line: HTMLElement) {
+function annotateLines() {
+  if (!isNewExperience()) {
+    // old selector/annotation logic
+    animateAndAnnotateLines(oldLineSelector, oldAnnotateLine);
+  } else {
+    // new selector/annotation logic
+    animateAndAnnotateLines(newLineSelector, newAnnotateLine);
+  }
+}
+
+function clearAnimationAndAnnotations() {
+  if (!isNewExperience()) {
+    // old selector/annotation logic
+    clearAnimation(oldLineSelector, oldAnnotateLine);
+    clearAnnotations((line: HTMLElement) => (line.style.boxShadow = "inherit"));
+  } else {
+    // new selector/annotation logic
+    clearAnimation(newLineSelector, newAnnotateLine);
+    clearAnnotations((line: HTMLElement) => {
+      if (line.children.length < 3) {
+        return;
+      }
+      let child = line.lastElementChild as HTMLElement;
+      if (child.style.boxShadow !== "inherit") {
+        child.style.boxShadow = "inherit";
+        return;
+      }
+    });
+  }
+}
+
+function oldAnnotateLine(line: HTMLElement) {
   if (line.getAttribute("data-split-side") === "left") {
     // split diff view: ignore deleted line
     return;
@@ -203,9 +256,74 @@ function annotateLine(line: HTMLElement) {
   }
 }
 
-function clearAnimationAndAnnotations() {
-  clearAnimation(lineSelector, annotateLine);
-  clearAnnotations((line: HTMLElement) => (line.style.boxShadow = "inherit"));
+function newAnnotateLine(line: HTMLElement) {
+  const secondChild = line.children[1];
+  const thirdChild = line.children[2];
+
+  if (!secondChild || !thirdChild) {
+    return;
+  }
+
+  // If the second child of the row is a line number cell (possibly empty), we're looking at a unified diff.
+  const isUnifiedDiff = line
+    .querySelectorAll("td[class*=' diff-line-number']")
+    .values()
+    .toArray()
+    .includes(secondChild);
+
+  // New line number cell is in cell 2 in a unified diff and cell 3 in a split diff.
+  const newLineNumberCell = isUnifiedDiff ? secondChild : thirdChild;
+
+  // We want to ignore deleted lines.
+  // If the new line number cell does not contain a line number, then the line was deleted.
+  if (!newLineNumberCell.textContent) {
+    return;
+  }
+
+  // This is not a deleted line, grab the line number and find coverage value.
+  const lineNumber = newLineNumberCell.textContent;
+
+  // Get the file name.
+  // Up to the shared root of the file section then down to the file header
+  //
+  // For some reason the text content here contains three invisible bytes
+  // adding up to one utf-8 character, which we need to remove.
+  //
+  // >> e = new TextEncoder()
+  // >> e.encode(newLineNumberCell.textContent)
+  // Uint8Array(59) [ 226, 128, 142, 97, 112, 112, 115, 47, 119, 111, … ]
+  // >> e.encode("apps/worker/services/test_analytics/ta_process_flakes.py")
+  // Uint8Array(56) [ 97, 112, 112, 115, 47, 119, 111, 114, 107, 101, … ]
+  // >> e.encode(newLineNumberCell.textContent.slice(1))
+  // Uint8Array(56) [ 97, 112, 112, 115, 47, 119, 111, 114, 107, 101, … ]
+  //
+  // Idk why these are here, but we can just remove them.
+
+  const fileNameContainer = line
+    .closest("div[class^='Diff-module__diffTargetable']")
+    ?.querySelector("h3[class^='DiffFileHeader-module__file-name']");
+  const fileName = fileNameContainer?.textContent?.slice(1);
+  if (!fileName) {
+    return;
+  }
+
+  const status =
+    globals.coverageReport?.[fileName]?.lines[lineNumber]?.coverage["head"];
+  if (status == null) {
+    return;
+  }
+
+  const lineContentCell = newLineNumberCell.nextSibling as HTMLElement;
+  const borderStylePrefix = "inset 2px 0 ";
+  if (status === CoverageStatus.COVERED) {
+    lineContentCell.style.boxShadow = `${borderStylePrefix} ${colors.green}`;
+  } else if (status === CoverageStatus.UNCOVERED) {
+    lineContentCell.style.boxShadow = `${borderStylePrefix} ${colors.red}`;
+  } else if (status === CoverageStatus.PARTIAL) {
+    lineContentCell.style.boxShadow = `${borderStylePrefix} ${colors.yellow}`;
+  } else {
+    lineContentCell.style.boxShadow = "inherit";
+  }
 }
 
 await init();