Enable . keybind to open repositories in Gitpod (#54)

Co-authored-by: Victor Nogueira <[email protected]>
Co-authored-by: George Tsiolis <[email protected]>

Author: 3 people

src/config.ts

@@ -4,11 +4,13 @@ import { EventEmitter } from "events";
 export interface Config {
     gitpodURL: string;
     openAsPopup: boolean;
+    rewritePeriodKeybind: boolean;
 }
 
 export const DEFAULT_CONFIG: Config = {
     gitpodURL: "https://gitpod.io",
-    openAsPopup: false
+    openAsPopup: false,
+    rewritePeriodKeybind: false
 };
 
 export interface ConfigListener {

src/injectors/github-injector.ts

@@ -1,7 +1,7 @@
 import * as select from 'select-dom';
 import * as ghInjection from 'github-injection';
 import { ConfigProvider } from '../config';
-import { ButtonInjector, InjectorBase, checkIsBtnUpToDate } from './injector';
+import { ButtonInjector, InjectorBase, checkIsBtnUpToDate, rewritePeriodKeybindGitHub } from './injector';
 import { renderGitpodUrl, makeOpenInPopup } from '../utils';
 
 namespace Gitpodify {
@@ -52,6 +52,10 @@ export class GitHubInjector extends InjectorBase {
             if (!this.checkIsInjected()) {
                 this.injectButtons();
             }
+            
+            (async () => {
+               await rewritePeriodKeybindGitHub();
+            })();
         });
     }
 

src/injectors/gitlab-injector.ts

@@ -1,7 +1,7 @@
 import * as domloaded from 'dom-loaded';
 import * as select from 'select-dom';
 import { ConfigProvider } from '../config';
-import { ButtonInjector, InjectorBase, checkIsBtnUpToDate } from './injector';
+import { ButtonInjector, InjectorBase, checkIsBtnUpToDate, rewritePeriodKeybindGitLab } from './injector';
 import { renderGitpodUrl, makeOpenInPopup } from '../utils';
 
 namespace Gitpodify {
@@ -36,8 +36,10 @@ export class GitlabInjector extends InjectorBase {
 
     async inject(): Promise<void> {
         await domloaded;    // TODO(geropl) This is dead slow, improve.
-
         this.injectButtons(false);
+        if (this.canHandleCurrentPage() && this.checkIsInjected()) {
+            await rewritePeriodKeybindGitLab();
+        }
     }
 
     async update(): Promise<void> {

src/injectors/injector.ts

@@ -1,5 +1,6 @@
 import { ConfigProvider } from "../config";
 import { renderGitpodUrl } from "../utils";
+import { isVisible } from "../utils";
 
 export interface Injector {
 
@@ -67,6 +68,48 @@ export abstract class InjectorBase implements Injector {
     }
 }
 
+function openInGitpod(e: MouseEvent | KeyboardEvent, inNewTab: boolean) {
+    const currentUrl = window.location.href;
+    window.open(`https://gitpod.io/#${currentUrl}`, inNewTab ? '_blank' : '_self');
+    e.preventDefault();
+    e.stopPropagation();
+}
+
+export async function rewritePeriodKeybindGitHub() {
+    const configProvider = await ConfigProvider.create();
+    const config = configProvider.getConfig();
+
+    if (config.rewritePeriodKeybind) {
+        document.querySelectorAll('.js-github-dev-shortcut, .js-github-dev-new-tab-shortcut').forEach((elem) => {
+            const new_element = elem.cloneNode(true) as HTMLElement;
+            elem.parentNode?.replaceChild(new_element, elem);
+            new_element.addEventListener('click', (e) => {
+                if (new_element && isVisible(new_element) && !confirm('Are you sure you want to open gitpod.io?')) {
+                    return;
+                }
+                openInGitpod(e, elem.classList.contains('js-github-dev-new-tab-shortcut') || config.openAsPopup);
+            });
+        });
+    }
+}
+
+export async function rewritePeriodKeybindGitLab() {
+    const configProvider = await ConfigProvider.create();
+    const config = configProvider.getConfig();
+
+    if (config.rewritePeriodKeybind) {
+        const unbindMousetrapScript = document.createElement('script');
+        unbindMousetrapScript.innerHTML='window.Mousetrap.unbind(".");';
+        document.head.appendChild(unbindMousetrapScript);
+
+        document.onkeydown = (e: KeyboardEvent) => {
+            if (e.code === 'Period') {
+                openInGitpod(e, e.shiftKey || config.openAsPopup);
+            }
+        };
+    }
+}
+
 export const checkIsBtnUpToDate = (button: HTMLElement | null, currentUrl: string): boolean => {
     return !!button && button instanceof HTMLAnchorElement && button.href === currentUrl;
 };

src/options/options.html

@@ -14,6 +14,10 @@
                 <label>Open as popup:</label>
                 <input id="gitpod-open-as-popup" type="checkbox"/>
             </div>
+            <div class="row">
+                <label>Enable <kbd>.</kbd> keybind to open repositories in Gitpod</label>
+                <input id="gitpod-replace-keybind" type="checkbox"/>
+            </div>
             <div class="row">
                 <div style="min-width: 5em;"></div>
                 <div><a href="https://www.gitpod.io/docs/browser-extension/">https://www.gitpod.io/docs/browser-extension/</a></div>

src/options/options.ts

@@ -1,6 +1,7 @@
 import { ConfigProvider } from "../config";
 
 const gitpodUrlInput = document.getElementById("gitpod-url-input")! as HTMLInputElement;
+const gitpodRewriteKeybind = document.getElementById("gitpod-replace-keybind")! as HTMLInputElement;
 const gitpodPopupInput = document.getElementById("gitpod-open-as-popup")! as HTMLInputElement;
 const messageElement = document.getElementById("message")! as HTMLDivElement;
 
@@ -12,6 +13,7 @@ const init = async () => {
     const initialConfig = configProvider.getConfig();
     gitpodUrlInput.value = initialConfig.gitpodURL;
     gitpodPopupInput.checked = initialConfig.openAsPopup;
+    gitpodRewriteKeybind.checked = initialConfig.rewritePeriodKeybind;
 
     let timeout: number | undefined = undefined;
 
@@ -20,7 +22,8 @@ const init = async () => {
         // Update config (propagated internally)
         configProvider.setConfig({
             gitpodURL: gitpodUrlInput.value || undefined,
-            openAsPopup: gitpodPopupInput.checked
+            openAsPopup: gitpodPopupInput.checked,
+            rewritePeriodKeybind: gitpodRewriteKeybind.checked
         });
         if (timeout) {
             window.clearTimeout(timeout);
@@ -35,7 +38,7 @@ const init = async () => {
         }
         save() 
     });
-    gitpodPopupInput.addEventListener('change', save);
+    [gitpodPopupInput, gitpodRewriteKeybind].forEach((el) => el.addEventListener('change', save))
 };
 
 init().catch(err => console.error(err));

src/utils.ts

@@ -3,6 +3,19 @@ export function renderGitpodUrl(gitpodURL: string): string {
     return `${gitpodURL}/#${baseURL}` + window.location.pathname + window.location.search;
 }
 
+export function isVisible(el: HTMLElement) {
+    try {
+      const rect = el.getBoundingClientRect();
+      if (rect.height === 0 && rect.width === 0) {
+        return false;
+      }
+      if (el.style.opacity === '0' || el.style.visibility === 'hidden') {
+        return false;
+      }
+    } catch {}
+    return true;
+}
+
 export function makeOpenInPopup(a: HTMLAnchorElement): void {
     a.onclick = () => !window.open(a.href, a.target, 'menubar=no,toolbar=no,location=no,dependent');
 }