Update GitHub.com selector (#88)

Author: filiptronicek

src/button/button-contributions.ts

@@ -48,9 +48,9 @@ export interface ButtonContributionParams {
   },
 
   /**
-   * A regular expression that is used to match the current URL. This is making the selection faster and also can help to disambiguate.
+   * Either a regular expression that is used to match the current URL or a function expected to return a boolean. This is making the selection faster and also can help to disambiguate.
    */
-  match?: RegExp,
+  match?: RegExp | (() => boolean),
 
   /**
    * The application that is supported by this button contribution.
@@ -167,24 +167,27 @@ export const buttonContributions: ButtonContributionParams[] = [
     // GitHub
     {
       id: "new-repo",
-      match: /^https?:\/\/([^/]+)\/([^/]+)\/([^/]+)(\/(tree\/.*)?)?$/,
       exampleUrls: [
-        // disabled testing, becuase the new layout doesn't show as an anonymous user
+        // disabled testing, because the new layout doesn't show as an anonymous user
         // "https://github.com/svenefftinge/browser-extension-test",
         // "https://github.com/svenefftinge/browser-extension-test/tree/my-branch",
       ],
-      selector: "#repository-details-container > ul > li:nth-child(6)",
-      containerElement: createElement("div", {
+      selector: "#repository-details-container > ul",
+      containerElement: createElement("li", {
       }),
       application: "github",
       manipulations: [
         {
           // make the code button secondary 
-          element: "#repository-details-container > ul > li:nth-child(5) > get-repo > details > summary",
+          element: "#repository-details-container > ul > li > get-repo > details > summary",
           remove: "Button--primary",
           add: "Button--secondary"
         }
       ],
+      match: () => {
+        const regex = /^https?:\/\/([^/]+)\/([^/]+)\/([^/]+)(\/(tree\/.*)?)?$/;
+        return document.querySelector("div.file-navigation") === null && regex.test(window.location.href);
+      }
     },
     {
       id: "commit",

src/contents/button.tsx

@@ -51,7 +51,7 @@ class ButtonContributionManager {
       const isActive = this.isActive(contribution);
       if (isActive) {
         if (this.active?.contribution.id === contribution.id &&
-            this.active?.anchor?.isConnected) {
+          this.active?.anchor?.isConnected) {
           // do nothing
           return null;
         } else {
@@ -79,9 +79,12 @@ class ButtonContributionManager {
   }
 
   private isActive(contrib: ButtonContributionParams) {
-    if (contrib.match && !contrib.match.test(window.location.href)) {
+    if (typeof contrib.match === "function" && !contrib.match()) {
+      return false;
+    } else if (typeof contrib.match === "object" && !contrib.match.test(window.location.href)) {
       return false;
     }
+
     const parent = this.lookupElement(contrib.selector);
     if (parent === null) {
       return false;

test/src/button-contributions-copy.ts

@@ -48,9 +48,9 @@ export interface ButtonContributionParams {
   },
 
   /**
-   * A regular expression that is used to match the current URL. This is making the selection faster and also can help to disambiguate.
+   * Either a regular expression that is used to match the current URL or a function expected to return a boolean. This is making the selection faster and also can help to disambiguate.
    */
-  match?: RegExp,
+  match?: RegExp | (() => boolean),
 
   /**
    * The application that is supported by this button contribution.
@@ -167,24 +167,27 @@ export const buttonContributions: ButtonContributionParams[] = [
     // GitHub
     {
       id: "new-repo",
-      match: /^https?:\/\/([^/]+)\/([^/]+)\/([^/]+)(\/(tree\/.*)?)?$/,
       exampleUrls: [
-        // disabled testing, becuase the new layout doesn't show as an anonymous user
+        // disabled testing, because the new layout doesn't show as an anonymous user
         // "https://github.com/svenefftinge/browser-extension-test",
         // "https://github.com/svenefftinge/browser-extension-test/tree/my-branch",
       ],
-      selector: "#repository-details-container > ul > li:nth-child(6)",
-      containerElement: createElement("div", {
+      selector: "#repository-details-container > ul",
+      containerElement: createElement("li", {
       }),
       application: "github",
       manipulations: [
         {
           // make the code button secondary 
-          element: "#repository-details-container > ul > li:nth-child(5) > get-repo > details > summary",
+          element: "#repository-details-container > ul > li > get-repo > details > summary",
           remove: "Button--primary",
           add: "Button--secondary"
         }
       ],
+      match: () => {
+        const regex = /^https?:\/\/([^/]+)\/([^/]+)\/([^/]+)(\/(tree\/.*)?)?$/;
+        return document.querySelector("div.file-navigation") === null && regex.test(window.location.href);
+      }
     },
     {
       id: "commit",

test/src/button-contributions.spec.ts

@@ -3,18 +3,18 @@ import { expect } from "chai";
 import { describe, it, before, after } from 'mocha';
 import { buttonContributions } from "./button-contributions-copy.js";
 
-describe("Query Selector Tests", function() {
+describe("Query Selector Tests", function () {
   let browser: Browser;
   let page: Page;
 
-  before(async function() {
+  before(async function () {
     browser = await puppeteer.launch({
       headless: "new",
     });
     page = await browser.newPage();
   });
 
-  after(async function() {
+  after(async function () {
     await browser.close();
   });
 
@@ -30,14 +30,15 @@ describe("Query Selector Tests", function() {
     await page.goto(url);
     let foundMatch = false;
     for (const contr of buttonContributions) {
-      if (contr.match && !contr.match.test(url)) {
+      if (typeof contr.match === "object" && !contr.match.test(url)) {
         continue;
       }
       const element = await resolveSelector(page, contr.selector);
       if (contr.id === id) {
         expect(element, `Expected '${id}' to match on ${url}`).to.not.be.null;
         foundMatch = true;
       } else {
+        if (contr.exampleUrls.length === 0) return true;
         expect(element, `Did not expect '${contr.id}' to match on ${url}`).to.be.null;
       }
     }
@@ -46,7 +47,7 @@ describe("Query Selector Tests", function() {
 
   for (const contribs of buttonContributions) {
     for (const url of contribs.exampleUrls) {
-      it("url ("+url+") should only match '" + contribs.id +"'" , async function() {
+      it(`url (${url}) should only match '${contribs.id}'`, async function () {
         await testContribution(url, contribs.id);
       }).timeout(5000);
     }