Fix selectors for new GitHub issue design (#189)

* Fix selectors for new GitHub issue design

* Fix tests and use puppeteer new headless mode

Author: filiptronicek

src/button/button-contributions.ts

@@ -92,7 +92,7 @@ export interface ButtonContributionParams {
     /**
      * Additional class names that should be added to the elements.
      */
-    additionalClassNames?: ("secondary" | "medium" | "left-align-menu")[];
+    additionalClassNames?: ("secondary" | "medium" | "left-align-menu" | "tall")[];
 
     /**
      * A selector that is used to insert the button before a specific element.
@@ -301,7 +301,7 @@ export const buttonContributions: ButtonContributionParams[] = [
     },
 
     {
-        id: "gh-issues",
+        id: "gh-issue",
         exampleUrls: ["https://github.com/svenefftinge/browser-extension-test/issues/1"],
         selector: "#partial-discussion-header > div.gh-header-show > div > div",
         containerElement: createElement("div", {
@@ -319,7 +319,17 @@ export const buttonContributions: ButtonContributionParams[] = [
         ],
     },
     {
-        id: "gh-pulls",
+        id: "gh-issue-new", // this isn't referring to "new issue", but to new "issue"
+        exampleUrls: ["https://github.com/svenefftinge/browser-extension-test/issues/1"],
+        selector: `xpath://*[@id="js-repo-pjax-container"]/react-app/div/div/div/div/div[1]/div/div/div[3]/div`,
+        containerElement: createElement("div", {}),
+        insertBefore: `xpath://*[@id="js-repo-pjax-container"]/react-app/div/div/div/div/div[1]/div/div/div[3]/div/div`,
+        application: "github",
+        // we need to make the button higher: the buttons here use 2rem instead of 1.75rem
+        additionalClassNames: ["tall"],
+    },
+    {
+        id: "gh-pull",
         exampleUrls: ["https://github.com/svenefftinge/browser-extension-test/pull/2"],
         selector: "#partial-discussion-header > div.gh-header-show > div > div",
         containerElement: createElement("div", {

src/button/button.css

@@ -209,6 +209,10 @@
     --dropdown-box-shadow: var(--shadow-floating-large, var(--color-shadow-large));
 }
 
+.github.tall {
+    --primary-height: var(--control-medium-size, 2rem);
+}
+
 .github .chevron-icon {
     padding: 3px;
 }

test/src/button-contributions-copy.ts

@@ -92,7 +92,7 @@ export interface ButtonContributionParams {
     /**
      * Additional class names that should be added to the elements.
      */
-    additionalClassNames?: ("secondary" | "medium" | "left-align-menu")[];
+    additionalClassNames?: ("secondary" | "medium" | "left-align-menu" | "tall")[];
 
     /**
      * A selector that is used to insert the button before a specific element.
@@ -301,7 +301,7 @@ export const buttonContributions: ButtonContributionParams[] = [
     },
 
     {
-        id: "gh-issues",
+        id: "gh-issue",
         exampleUrls: ["https://github.com/svenefftinge/browser-extension-test/issues/1"],
         selector: "#partial-discussion-header > div.gh-header-show > div > div",
         containerElement: createElement("div", {
@@ -319,7 +319,17 @@ export const buttonContributions: ButtonContributionParams[] = [
         ],
     },
     {
-        id: "gh-pulls",
+        id: "gh-issue-new", // this isn't referring to "new issue", but to new "issue"
+        exampleUrls: ["https://github.com/svenefftinge/browser-extension-test/issues/1"],
+        selector: `xpath://*[@id="js-repo-pjax-container"]/react-app/div/div/div/div/div[1]/div/div/div[3]/div`,
+        containerElement: createElement("div", {}),
+        insertBefore: `xpath://*[@id="js-repo-pjax-container"]/react-app/div/div/div/div/div[1]/div/div/div[3]/div/div`,
+        application: "github",
+        // we need to make the button higher: the buttons here use 2rem instead of 1.75rem
+        additionalClassNames: ["tall"],
+    },
+    {
+        id: "gh-pull",
         exampleUrls: ["https://github.com/svenefftinge/browser-extension-test/pull/2"],
         selector: "#partial-discussion-header > div.gh-header-show > div > div",
         containerElement: createElement("div", {

test/src/button-contributions.spec.ts

@@ -10,8 +10,7 @@ describe("Platform match tests", function () {
 
     before(async function () {
         browser = await puppeteer.launch({
-            headless: true,
-            browser: "chrome",
+            headless: "new",
         });
         page = await browser.newPage();
     });
@@ -66,8 +65,7 @@ describe("Query Selector Tests", function () {
 
     before(async function () {
         browser = await puppeteer.launch({
-            headless: true,
-            browser: "chrome",
+            headless: "new",
         });
         page = await browser.newPage();
     });