Add button to new GH repo overview

Author: svenefftinge

manifest.json

@@ -1,9 +1,9 @@
 {
   "manifest_version": 2,
-  "name": "Gitpod - Always ready to code",
+  "name": "Gitpod - Always ready-to-code",
   "short_name": "Gitpod",
-  "version": "1.18",
-  "description": "Spin up fresh, automated dev environments for each task, in the cloud, in seconds.",
+  "version": "1.19",
+  "description": "The developer platform for on-demand cloud development environments. Create software faster and more securely.",
   "icons": {
     "16": "icons/gitpod-logo-16.png",
     "48": "icons/gitpod-logo-48.png",

package.json

@@ -6,9 +6,9 @@
   "description": "Browser extension (Chrome/Firefox/Edge) for enhancing GitLab, GitHub and Bitbucket with Gitpod buttons",
   "main": "src/gitpodify.js",
   "scripts": {
-    "build": "yarn clean && npx tsc && yarn webpack",
+    "build": "yarn clean && yarn webpack",
     "build:safari": " xcrun safari-web-extension-converter . --app-name Gitpod --bundle-identifier io.gitpod.Gitpod",
-    "package": "yarn clean:package && zip -rD --exclude='src/*.ts' gitpod.xpi dist/bundles icons src manifest.json",
+    "package": "yarn build && yarn clean:package && zip -rD gitpod.xpi dist icons src manifest.json",
     "clean": "rimraf dist && yarn clean:package",
     "clean:package": "rimraf gitpod.xpi",
     "webpack": "webpack",
@@ -17,18 +17,20 @@
   "dependencies": {
     "@types/events": "^3.0.0",
     "dom-loaded": "^2.0.0",
-    "github-injection": "^1.0.1",
+    "github-injection": "^1.1.0",
     "select-dom": "^5.1.0",
-    "webextension-polyfill": "^0.7.0"
+    "webextension-polyfill": "^0.10.0"
   },
   "devDependencies": {
-    "copy-webpack-plugin": "^7.0.0",
-    "css-loader": "^5.0.2",
-    "rimraf": "^3.0.0",
-    "source-map-loader": "^2.0.1",
-    "style-loader": "^2.0.0",
-    "webextension-polyfill-ts": "^0.25.0",
-    "webpack": "^5.22.0",
-    "webpack-cli": "^4.5.0"
+    "copy-webpack-plugin": "^11.0.0",
+    "css-loader": "^6.8.1",
+    "rimraf": "^5.0.1",
+    "source-map-loader": "^4.0.1",
+    "style-loader": "^3.3.3",
+    "ts-loader": "^9.4.4",
+    "typescript": "^5.1.6",
+    "webextension-polyfill-ts": "^0.26.0",
+    "webpack": "^5.88.2",
+    "webpack-cli": "^5.1.4"
   }
 }

src/injectors/github-injector.ts

@@ -25,9 +25,9 @@ export class GitHubInjector extends InjectorBase {
             new PullInjector(),
             new IssueInjector(),
             new FileInjector(),
-            new EditFileButtonInjector(),
             new NavigationInjector(),
             new EmptyRepositoryInjector(),
+            new NewRepositoryOverviewInjector(),
         ]);
     }
 
@@ -146,7 +146,7 @@ abstract class ButtonInjectorBase implements ButtonInjector {
         if (openAsPopup) {
             makeOpenInPopup(a);
         }
-        a.className = "btn btn-sm btn-primary";
+        a.className = "btn btn-sm";
 
         this.adjustButton(a);
 
@@ -174,7 +174,11 @@ abstract class ButtonInjectorBase implements ButtonInjector {
 
 class PullInjector extends ButtonInjectorBase {
     constructor() {
-        super(".gh-header-actions", "");
+        super(".gh-header-actions", "flex-md-order-2");
+    }
+
+    protected adjustButton(a: HTMLAnchorElement): void {
+        a.className = "btn btn-sm btn-primary";
     }
 
     isApplicableToCurrentPage(): boolean {
@@ -192,41 +196,53 @@ class IssueInjector extends ButtonInjectorBase {
     }
 }
 
-class EditFileButtonInjector extends ButtonInjectorBase {
+class FileInjector extends ButtonInjectorBase {
     constructor() {
-        super("", "gitpod-file-edit-btn");
+        super("#StickyHeader > div > div > div:nth-child(2)", "gitpod-file-btn");
+    }
+
+    protected adjustButton(a: HTMLAnchorElement): void {
+        a.style.marginLeft = "8px";
+        a.className = "btn btn-primary";
     }
 
     isApplicableToCurrentPage(): boolean {
         return window.location.pathname.includes("/blob/");
     }
 }
 
-class FileInjector extends ButtonInjectorBase {
+class NavigationInjector extends ButtonInjectorBase {
     constructor() {
-        super(".repository-content > div > div > div", "gitpod-file-btn");
+        super(".file-navigation", "empty-icon position-relative");
     }
 
     protected adjustButton(a: HTMLAnchorElement): void {
         a.className = "btn btn-primary";
     }
 
     isApplicableToCurrentPage(): boolean {
-        return window.location.pathname.includes("/blob/");
+        return !!select.exists(".file-navigation");
     }
 }
 
-class NavigationInjector extends ButtonInjectorBase {
+class NewRepositoryOverviewInjector extends ButtonInjectorBase {
     constructor() {
-        super(".file-navigation", "empty-icon position-relative");
+        super(".pagehead-actions", "empty-icon position-relative");
     }
 
     protected adjustButton(a: HTMLAnchorElement): void {
-        a.className = "btn btn-primary";
+        a.className = "btn btn-sm btn-primary";
     }
 
     isApplicableToCurrentPage(): boolean {
-        return !!select.exists(".file-navigation");
+        return !!select.exists(".pagehead-actions");
+    }
+
+    protected renderButton(url: string, openAsPopup: boolean): HTMLElement {
+        const button = super.renderButton(url, openAsPopup);
+        const container = document.createElement('li');
+        container.appendChild(button);
+        return container;
     }
 }
 

tsconfig.json

@@ -11,15 +11,15 @@
         "downlevelIteration": true,
         "module": "commonjs",
         "moduleResolution": "node",
-        "target": "es5",
+        "target": "es6",
         "jsx": "react",
         "lib": [
             "es6",
             "dom"
         ],
-        "sourceMap": false,
-        "declaration": false,
-        "declarationMap": false,
+        "sourceMap": true,
+        "declaration": true,
+        "declarationMap": true,
         "skipLibCheck": true
     },
     "include": [

webpack.config.js

@@ -1,19 +1,29 @@
-'use strict';
 const path = require('path');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
 
 module.exports = {
     mode: 'production',
     entry: {
-        gitpodify: './dist/gitpodify.js',
-        options: './dist/options/options.js',
-        background: './dist/background.js'
-    },
-    output: {
-        filename: 'bundles/[name].bundle.js',
-        path: path.resolve(__dirname, 'dist')
+        gitpodify: './src/gitpodify.ts',
+        options: './src/options/options.ts',
+        background: './src/background.ts'
     },
     module: {
         rules: [
+            {
+                test: /\.tsx?$/,
+                use: [{
+                    loader: 'ts-loader',
+                    options: {
+                        // This will make sure ts-loader compiles in a way that works well with source maps
+                        compilerOptions: {
+                            sourceMap: true,
+                            inlineSourceMap: false,
+                        }
+                    },
+                }],
+                exclude: /node_modules/,
+            },
             {
                 test: /\.css$/,
                 use: ['style-loader', 'css-loader'],
@@ -23,5 +33,13 @@ module.exports = {
                 exclude: /node_modules/,
             }
         ]
-    }
+    },
+    resolve: {
+        extensions: ['.tsx', '.ts', '.js'],
+    },
+    output: {
+        filename: 'bundles/[name].bundle.js',
+        path: path.resolve(__dirname, 'dist')
+    },
+    devtool: 'inline-source-map',
 };