Performance improvements (#89)

Author: filiptronicek

src/button/button-contributions.ts

@@ -6,6 +6,31 @@
 
 export type SupportedApplication = "github" | "gitlab" | "bitbucket-server" | "bitbucket";
 
+const resolveMetaAppName = (head: HTMLHeadElement): string | undefined => {
+  const metaApplication = head.querySelector("meta[name=application-name]");
+  const ogApplication = head.querySelector("meta[property='og:site_name']");
+
+  if (metaApplication) {
+    return metaApplication.getAttribute("content") || undefined;
+  } else if (ogApplication) {
+    return ogApplication.getAttribute("content") || undefined;
+  }
+
+  return undefined;
+}
+
+/**
+ * Provides a fast check to see if the current URL is on a supported site.
+ */
+export const isSiteSuitable = (): boolean => {
+    const appName = resolveMetaAppName(document.head);
+    if (!appName) {
+      return false;
+    }
+    const allowedApps = ["GitHub", "GitLab", "Bitbucket"];
+    return allowedApps.includes(appName);
+}
+
 export interface ButtonContributionParams {
   /**
    * A unique id for the button contribution. Used to identify the button in the UI.

src/contents/button.tsx

@@ -1,6 +1,6 @@
 import type { PlasmoCSConfig, PlasmoGetInlineAnchor } from "plasmo";
 import cssText from "data-text:../button/button.css"
-import { buttonContributions, type ButtonContributionParams } from "../button/button-contributions";
+import { buttonContributions, type ButtonContributionParams, isSiteSuitable } from "../button/button-contributions";
 import { GitpodButton } from "../button/button";
 import { type ReactElement } from "react";
 import React from "react";
@@ -23,7 +23,16 @@ class ButtonContributionManager {
     anchor: HTMLElement,
   }
 
+  _disabled = false;
+
   constructor(private contributions: ButtonContributionParams[]) {
+    if (!this._disabled) {
+      const isSuitable = isSiteSuitable();
+      if (!isSuitable) {
+        this._disabled = true;
+      }
+    }
+
     for (const contribution of this.contributions) {
       const containerId = this.getContainerId(contribution);
       if (!this.buttons.has(containerId)) {
@@ -47,6 +56,10 @@ class ButtonContributionManager {
   }
 
   public getInlineAnchor(): HTMLElement | null {
+    if (this._disabled) {
+      return null;
+    }
+
     for (const contribution of this.contributions) {
       const isActive = this.isActive(contribution);
       if (isActive) {
@@ -84,7 +97,6 @@ class ButtonContributionManager {
     } 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

@@ -6,6 +6,31 @@
 
 export type SupportedApplication = "github" | "gitlab" | "bitbucket-server" | "bitbucket";
 
+const resolveMetaAppName = (head: HTMLHeadElement): string | undefined => {
+  const metaApplication = head.querySelector("meta[name=application-name]");
+  const ogApplication = head.querySelector("meta[property='og:site_name']");
+
+  if (metaApplication) {
+    return metaApplication.getAttribute("content") || undefined;
+  } else if (ogApplication) {
+    return ogApplication.getAttribute("content") || undefined;
+  }
+
+  return undefined;
+}
+
+/**
+ * Provides a fast check to see if the current URL is on a supported site.
+ */
+export const isSiteSuitable = (): boolean => {
+    const appName = resolveMetaAppName(document.head);
+    if (!appName) {
+      return false;
+    }
+    const allowedApps = ["GitHub", "GitLab", "Bitbucket"];
+    return allowedApps.includes(appName);
+}
+
 export interface ButtonContributionParams {
   /**
    * A unique id for the button contribution. Used to identify the button in the UI.

test/src/button-contributions.spec.ts

@@ -3,6 +3,61 @@ import { expect } from "chai";
 import { describe, it, before, after } from 'mocha';
 import { buttonContributions } from "./button-contributions-copy.js";
 
+describe("Query Selector Tests", function () {
+  let browser: Browser;
+  let page: Page;
+
+  before(async function () {
+    browser = await puppeteer.launch({
+      headless: "new",
+    });
+    page = await browser.newPage();
+  });
+
+  after(async function () {
+    await browser.close();
+  });
+
+  async function testHost() {
+    const all = buttonContributions.flatMap((x) => x.exampleUrls);
+    for (const url of all) {
+      it(`should detect the platform for ${url}`, async function () {
+        await page.goto(url);
+
+        const foundMatch = await page.evaluate(() => {
+          const resolveMetaAppName = (head: HTMLHeadElement): string | undefined => {
+            const metaApplication = head.querySelector("meta[name=application-name]");
+            const ogApplication = head.querySelector("meta[property='og:site_name']");
+
+            if (metaApplication) {
+              return metaApplication.getAttribute("content") || undefined;
+            } else if (ogApplication) {
+              return ogApplication.getAttribute("content") || undefined;
+            }
+
+            return undefined;
+          }
+
+          const isSiteSuitable = (): boolean => {
+            const appName = resolveMetaAppName(document.head);
+            if (!appName) {
+              return false;
+            }
+            const allowedApps = ["GitHub", "GitLab", "Bitbucket"];
+            return allowedApps.includes(appName);
+          }
+
+          return isSiteSuitable();
+        });
+        expect(foundMatch, `Expected to find a match for '${url}'`).to.be.true;
+      }).timeout(30_000);
+
+    }
+  }
+
+  testHost();
+});
+
 describe("Query Selector Tests", function () {
   let browser: Browser;
   let page: Page;