Build support for new github pr experience

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();