Add bb issue context & popup option

Author: svenefftinge

manifest.json

@@ -2,7 +2,7 @@
   "manifest_version": 2,
   "name": "Gitpod - Dev Environments in a Browser Tab",
   "short_name": "Gitpod",
-  "version": "1.5",
+  "version": "1.6",
   "description": "Describe your dev environment as code and get fully prebuilt dev environments for any GitLab, GitHub and Bitbucket project.",
   "icons": {
     "16": "icons/gitpod-logo-16.png",

src/config.ts

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

src/injectors/bitbucket-injector.ts

@@ -1,6 +1,6 @@
 import { InjectorBase, ButtonInjector, checkIsBtnUpToDate } from "./injector";
 import { ConfigProvider } from "../config";
-import { renderGitpodUrl } from "../utils";
+import { renderGitpodUrl, makeOpenInPopup } from "../utils";
 import select = require("select-dom");
 
 namespace Gitpodify {
@@ -18,6 +18,7 @@ export class BitbucketInjector extends InjectorBase {
         super(configProvider, [
             new BranchInjector(),
             new PullRequestInjector(),
+            new IssuesInjector(),
             new NewPullRequestInjector(),
             new CommitInjector(),
             new RepositoryInjector()
@@ -59,7 +60,7 @@ abstract class ButtonInjectorBase implements ButtonInjector {
 
     abstract isApplicableToCurrentPage(): boolean;
 
-    inject(currentUrl: string) {
+    inject(currentUrl: string, openAsPopup: boolean) {
         let actionbar = select(this.parent);
         if(actionbar && this.up) {
             for(let i = 0; i < this.up; i++) {
@@ -84,19 +85,19 @@ abstract class ButtonInjectorBase implements ButtonInjector {
             return;
         }
 
-        const btn = this.renderButton(currentUrl);
+        const btn = this.renderButton(currentUrl, openAsPopup);
 
         const btnGroup = actionbar.children;
         if (btnGroup && btnGroup.length > 0){
             actionbar.insertBefore(btn, btnGroup[0]);
         } 
     }
 
-    protected renderButton(url: string, float: boolean = true): HTMLElement {
+    protected renderButton(url: string, openAsPopup: boolean, float: boolean = true): HTMLElement {
         let classes = Gitpodify.NAV_BTN_CLASS;
         if (float) {
             classes = `${classes} ${this.btnClasses} aui-button`;
-        }
+        }   
 
         const container = document.createElement('div');
         container.id = Gitpodify.CSS_REF_BTN_CONTAINER;
@@ -108,6 +109,9 @@ abstract class ButtonInjectorBase implements ButtonInjector {
         a.text = "Gitpod"
         a.href = url;
         a.target = "_blank";
+        if (openAsPopup) {
+            makeOpenInPopup(a);
+        }
         a.className = "btn btn-sm btn-primary";
 
         container.appendChild(a);
@@ -151,6 +155,18 @@ class NewPullRequestInjector extends ButtonInjectorBase {
 
 }
 
+class IssuesInjector extends ButtonInjectorBase {
+
+    constructor() {
+        super('#issue-header .aui-buttons:last-child', '');
+    }
+
+    isApplicableToCurrentPage(): boolean {
+        return select(this.parent) && window.location.pathname.includes("/issues/");
+    }
+
+}
+
 class CommitInjector extends ButtonInjectorBase {
 
     constructor() {

src/injectors/github-injector.ts

@@ -2,7 +2,7 @@ import * as select from 'select-dom';
 import * as ghInjection from 'github-injection';
 import { ConfigProvider } from '../config';
 import { ButtonInjector, InjectorBase, checkIsBtnUpToDate } from './injector';
-import { renderGitpodUrl } from '../utils';
+import { renderGitpodUrl, makeOpenInPopup } from '../utils';
 
 namespace Gitpodify {
 	export const NAV_BTN_ID = "gitpod-btn-nav";
@@ -71,7 +71,7 @@ abstract class ButtonInjectorBase implements ButtonInjector {
 
     abstract isApplicableToCurrentPage(): boolean;
 
-    inject(currentUrl: string) {
+    inject(currentUrl: string, openAsPopup: boolean) {
         const actionbar = select(this.parentSelector);
         if (!actionbar) {
             return;
@@ -87,7 +87,7 @@ abstract class ButtonInjectorBase implements ButtonInjector {
             return;
         }
 
-        const btn = this.renderButton(currentUrl);
+        const btn = this.renderButton(currentUrl, openAsPopup);
 
         const btnGroup = actionbar.getElementsByClassName("BtnGroup");
         if (btnGroup && btnGroup.length > 0 && btnGroup[0].classList.contains('float-right')){
@@ -99,7 +99,7 @@ abstract class ButtonInjectorBase implements ButtonInjector {
         }
     }
 
-    protected renderButton(url: string): HTMLElement {
+    protected renderButton(url: string, openAsPopup: boolean): HTMLElement {
         let classes = this.btnClasses + ` ${Gitpodify.NAV_BTN_CLASS}`;
         if (this.float) {
             classes = classes + ` float-right`;
@@ -115,6 +115,9 @@ abstract class ButtonInjectorBase implements ButtonInjector {
         a.text = "Gitpod"
         a.href = url;
         a.target = "_blank";
+        if (openAsPopup) {
+            makeOpenInPopup(a);
+        }
         a.className = "btn btn-sm btn-primary";
 
         this.adjustButton(a);

src/injectors/gitlab-injector.ts

@@ -2,7 +2,7 @@ import * as domloaded from 'dom-loaded';
 import * as select from 'select-dom';
 import { ConfigProvider } from '../config';
 import { ButtonInjector, InjectorBase, checkIsBtnUpToDate } from './injector';
-import { renderGitpodUrl } from '../utils';
+import { renderGitpodUrl, makeOpenInPopup } from '../utils';
 
 namespace Gitpodify {
 	export const BTN_ID = "gitpod-btn-nav";
@@ -54,7 +54,7 @@ class RepositoryInjector implements ButtonInjector {
         return result;
     }
 
-    inject(currentUrl: string) {
+    inject(currentUrl: string, openAsPopup: boolean) {
         const parent = select(RepositoryInjector.PARENT_SELECTOR);
         if (!parent || !parent.firstElementChild) {
             return;
@@ -67,12 +67,11 @@ class RepositoryInjector implements ButtonInjector {
             return;
         }
 
-        const btn = this.renderButton(currentUrl);
-        console.log(parent.innerHTML);
+        const btn = this.renderButton(currentUrl, openAsPopup);
         parent.firstElementChild.appendChild(btn);
     }
 
-    protected renderButton(url: string): HTMLElement {
+    protected renderButton(url: string, openAsPopup: boolean): HTMLElement {
         const container = document.createElement('div');
         container.className = "project-clone-holder d-none d-md-inline-block";
 
@@ -86,6 +85,10 @@ class RepositoryInjector implements ButtonInjector {
         a.href = url;
         a.target = "_blank";
         a.className = "btn btn-primary";
+        
+        if (openAsPopup) {
+            makeOpenInPopup(a);
+        }
 
         container2ndLevel.appendChild(a);
         container.appendChild(container2ndLevel);

src/injectors/injector.ts

@@ -36,7 +36,7 @@ export interface ButtonInjector {
      * Injects the actual button
      * @param currentUrl The currently configured Gitpod URL
      */
-    inject(currentUrl: string): void;
+    inject(currentUrl: string, openAsPopup: boolean): void;
 }
 
 export abstract class InjectorBase implements Injector {
@@ -54,7 +54,7 @@ export abstract class InjectorBase implements Injector {
         const currentUrl = renderGitpodUrl(this.config.gitpodURL);
         for (const injector of this.buttonInjectors) {
             if (injector.isApplicableToCurrentPage()) {
-                injector.inject(currentUrl);
+                injector.inject(currentUrl, this.config.openAsPopup);
                 if (singleInjector) {
                     break;
                 }

src/options/options.html

@@ -10,6 +10,10 @@
                 <label>Gitpod installation URL:</label>
                 <input id="gitpod-url-input" type="url" value=""/>
             </div>
+            <div class="row">
+                <label>Open as popup:</label>
+                <input id="gitpod-open-as-popup" 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 gitpodPopupInput = document.getElementById("gitpod-open-as-popup")! as HTMLInputElement;
 const messageElement = document.getElementById("message")! as HTMLDivElement;
 
 
@@ -10,18 +11,16 @@ const init = async () => {
     // Initialize UI
     const initialConfig = configProvider.getConfig();
     gitpodUrlInput.value = initialConfig.gitpodURL;
+    gitpodPopupInput.checked = initialConfig.openAsPopup;
 
     let timeout: number | undefined = undefined;
 
     // Save config before close
-    const saveOnType = (event: KeyboardEvent) => {
-        if (event.isComposing || event.keyCode === 229) {
-            return;
-        }
-
+    const save = () => {
         // Update config (propagated internally)
         configProvider.setConfig({
             gitpodURL: gitpodUrlInput.value || undefined,
+            openAsPopup: gitpodPopupInput.checked
         });
         if (timeout) {
             window.clearTimeout(timeout);
@@ -30,7 +29,13 @@ const init = async () => {
         messageElement.innerText = "Saved.";
         timeout = window.setTimeout(() => { messageElement.innerText = ""; timeout = undefined }, 3000);
     };
-    gitpodUrlInput.addEventListener("keyup", saveOnType);
+    gitpodUrlInput.addEventListener("keyup", (event: KeyboardEvent) => {
+        if (event.isComposing || event.keyCode === 229) {
+            return;
+        }
+        save() 
+    });
+    gitpodPopupInput.addEventListener('change', save);
 };
 
 init().catch(err => console.error(err));

src/utils.ts

@@ -2,3 +2,10 @@ export function renderGitpodUrl(gitpodURL: string): string {
     const baseURL = `${window.location.protocol}//${window.location.host}`;
     return `${gitpodURL}/#${baseURL}` + window.location.pathname;
 }
+
+export function makeOpenInPopup(a: HTMLAnchorElement): void {
+    a.onclick = () => {
+        var w = window.open(a.href, a.target, 'menubar=no,toolbar=no,location=no,dependent');
+        return !w;
+    }
+}