Fix making github primary code button secondary

Author: filiptronicek

src/button/button-contributions.ts

@@ -105,7 +105,7 @@ export interface ButtonContributionParams {
      * Each manipulation contains a CSS selector (element) that is used to find the element to manipulate and optionally
      * the classnames to remove and add.
      */
-    manipulations?: { element: string; remove?: string; add?: string; style?: Partial<CSSStyleDeclaration> }[];
+    manipulations?: { element: string; removeClassName?: string; addClassName?: string; style?: Partial<CSSStyleDeclaration>, setAttribute?: { name: string, value: string }[] }[];
 
     /**
      * A function that can be used to transform the URL that should be opened when the Gitpod button is clicked.
@@ -140,7 +140,7 @@ export const buttonContributions: ButtonContributionParams[] = [
         manipulations: [
             {
                 element: "div.repos-files-header-commandbar.scroll-hidden",
-                remove: "scroll-hidden",
+                removeClassName: "scroll-hidden",
             },
         ],
         urlTransformer(originalUrl) {
@@ -198,7 +198,7 @@ export const buttonContributions: ButtonContributionParams[] = [
             {
                 // make the clone button secondary
                 element: "#clone-dropdown",
-                remove: "btn-confirm",
+                removeClassName: "btn-confirm",
             },
         ],
     },
@@ -224,7 +224,7 @@ export const buttonContributions: ButtonContributionParams[] = [
                 // make the clone button secondary
                 element:
                     "#fileHolder > div.js-file-title.file-title-flex-parent > div.gl-display-flex.gl-flex-wrap.file-actions > div.gl-sm-ml-3.gl-mr-3 > div > button",
-                remove: "btn-confirm",
+                removeClassName: "btn-confirm",
             },
         ],
     },
@@ -241,7 +241,7 @@ export const buttonContributions: ButtonContributionParams[] = [
                 // make the clone button secondary
                 element:
                     "#content-body > div.merge-request .js-issuable-actions > div.dropdown.gl-dropdown > button",
-                remove: "btn-confirm",
+                removeClassName: "btn-confirm",
             },
         ],
     },
@@ -267,6 +267,16 @@ export const buttonContributions: ButtonContributionParams[] = [
         containerElement: createElement("div", {}),
         additionalClassNames: ["medium"],
         application: "github",
+        manipulations: [
+            {
+                // make the clone button secondary
+                element:
+                    "xpath://button[contains(., 'Code')]",
+                setAttribute: [
+                    { name: "data-variant", value: "default" },
+                ],
+            },
+        ],
         match: () => {
             const regex = /^https?:\/\/([^/]+)\/([^/]+)\/([^/]+)(\/(tree\/.*)?)?$/;
             return document.querySelector("div.file-navigation") === null && regex.test(window.location.href);
@@ -290,20 +300,12 @@ export const buttonContributions: ButtonContributionParams[] = [
     {
         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", {
-            order: "2",
-        }),
+        selector: "[data-component='PH_Actions'] > div", //
+        insertBefore: "[data-component='PH_Actions'] > div > button",
+        containerElement: createElement("div", {}),
         match: /\/issues\//,
         application: "github",
-        manipulations: [
-            {
-                // make the code button secondary
-                element: "#partial-discussion-header > div.gh-header-show > div > div > a",
-                remove: "Button--primary",
-                add: "Button--secondary",
-            },
-        ],
+        additionalClassNames: ["tall"],
     },
     {
         id: "gh-issue-new", // this isn't referring to "new issue", but to new "issue"

src/button/button.tsx

@@ -16,7 +16,7 @@ type Props = {
     additionalClassNames?: string[];
     urlTransformer?: (url: string) => string;
 };
-export const GitpodButton = ({ application, additionalClassNames, urlTransformer }: Props) => {
+export const OnaButton = ({ application, additionalClassNames, urlTransformer }: Props) => {
     const [address] = useStorage<string>(STORAGE_KEY_ADDRESS, DEFAULT_ONA_ENDPOINT);
     const [openInNewTab] = useStorage<boolean>(STORAGE_KEY_NEW_TAB, true);
     const [disableAutostart] = useStorage<boolean>(STORAGE_KEY_ALWAYS_OPTIONS, false);

src/components/forms/TextInputField.tsx

@@ -1,9 +1,3 @@
-/**
- * Copyright (c) 2023 Gitpod GmbH. All rights reserved.
- * Licensed under the GNU Affero General Public License (AGPL).
- * See License.AGPL.txt in the project root for license information.
- */
-
 import classNames from "classnames";
 import React, { memo, useCallback, useId, type PropsWithChildren, type ReactNode } from "react";
 import { FeatureFlags, useFlag } from "~hooks/use-configcat";

src/contents/button.tsx

@@ -3,8 +3,7 @@ import type { PlasmoCSConfig, PlasmoGetInlineAnchor } from "plasmo";
 import React, { type ReactElement } from "react";
 import { EVENT_CURRENT_URL_CHANGED } from "~constants";
 import { ConfigCatProvider, configCatProviderConfig } from "~hooks/use-configcat";
-
-import { GitpodButton } from "../button/button";
+import { OnaButton } from "../button/button";
 import { buttonContributions, isSiteSuitable, type ButtonContributionParams } from "../button/button-contributions";
 
 // keep in sync with DEFAULT_HOSTS in src/button/button-contributions.ts
@@ -43,7 +42,7 @@ class ButtonContributionManager {
                 this.buttons.set(
                     containerId,
                     <ConfigCatProvider {...configCatProviderConfig}>
-                        <GitpodButton
+                        <OnaButton
                             key={containerId}
                             application={contribution.application}
                             additionalClassNames={contribution.additionalClassNames}
@@ -158,11 +157,16 @@ class ButtonContributionManager {
             for (const manipulation of contrib.manipulations) {
                 const element = this.lookupElement(manipulation.element);
                 if (element) {
-                    if (manipulation.remove) {
-                        element.classList.remove(manipulation.remove);
+                    if (manipulation.removeClassName) {
+                        element.classList.remove(manipulation.removeClassName);
+                    }
+                    if (manipulation.addClassName) {
+                        element.classList.add(manipulation.addClassName);
                     }
-                    if (manipulation.add) {
-                        element.classList.add(manipulation.add);
+                    if (manipulation.setAttribute) {
+                        for (const attribute of manipulation.setAttribute) {
+                            element.setAttribute(attribute.name, attribute.value);
+                        }
                     }
                     if (element instanceof HTMLElement && manipulation.style) {
                         for (const key in manipulation.style) {