@@ -2,13 +2,14 @@ import * as select from 'select-dom';
22import * as ghInjection from 'github-injection' ;
33import { ConfigProvider } from '../config' ;
44import { ButtonInjector , InjectorBase , checkIsBtnUpToDate , rewritePeriodKeybindGitHub } from './injector' ;
5- import { renderGitpodUrl , makeOpenInPopup } from '../utils' ;
5+ import { renderGitpodUrl , ideOptions , createElementFromHTML , UrlInfo } from '../utils' ;
6+ import { IDEOptions } from "@gitpod/gitpod-protocol/lib/ide-protocol" ;
67
78namespace Gitpodify {
8- export const NAV_BTN_ID = "gitpod-btn-nav" ;
9- export const NAV_BTN_CLASS = "gitpod-nav-btn" ;
9+ export const NAV_BTN_ID = "gitpod-btn-nav" ;
10+ export const NAV_BTN_CLASS = "gitpod-nav-btn" ;
1011 export const NAV_BTN_CLASS_SELECTOR = "." + NAV_BTN_CLASS ;
11-
12+
1213 export const CSS_REF_BTN_CONTAINER = "gitpod-btn-container" ;
1314 export const CSS_REF_NO_CONTAINER = "no-container" ;
1415}
@@ -42,19 +43,19 @@ export class GitHubInjector extends InjectorBase {
4243
4344 checkIsInjected ( ) : boolean {
4445 const button = document . getElementById ( `${ Gitpodify . NAV_BTN_ID } ) ;
45- const currentUrl = renderGitpodUrl ( this . config . gitpodURL ) ;
46- return checkIsBtnUpToDate ( button , currentUrl ) ;
46+ const urlInfo = renderGitpodUrl ( this . config . gitpodURL ) ;
47+ return checkIsBtnUpToDate ( button , urlInfo . gitpodUrl ) ;
4748 }
4849
4950 async inject ( ) : Promise < void > {
5051 // ghInjection triggers an event whenever only parts of the GitHub page have been reloaded
51- ghInjection ( ( ) => {
52+ ghInjection ( ( ) => {
5253 if ( ! this . checkIsInjected ( ) ) {
5354 this . injectButtons ( ) ;
5455 }
55-
56+
5657 ( async ( ) => {
57- await rewritePeriodKeybindGitHub ( ) ;
58+ await rewritePeriodKeybindGitHub ( ) ;
5859 } ) ( ) ;
5960 } ) ;
6061 }
@@ -71,27 +72,31 @@ abstract class ButtonInjectorBase implements ButtonInjector {
7172 protected readonly btnClasses : string ,
7273 protected readonly float : boolean = true ,
7374 protected readonly asFirstChild : boolean = false
74- ) { }
75+ ) { }
7576
7677 abstract isApplicableToCurrentPage ( ) : boolean ;
7778
78- inject ( currentUrl : string , openAsPopup : boolean ) {
79+ protected adjustButton ( a : HTMLAnchorElement ) {
80+ // do nothing
81+ }
82+
83+ inject ( urlInfo : UrlInfo , openAsPopup : boolean ) {
7984 const actionbar = select ( this . parentSelector ) ;
8085 if ( ! actionbar ) {
8186 return ;
8287 }
8388
8489 const oldBtn = document . getElementById ( Gitpodify . NAV_BTN_ID ) ;
8590 if ( oldBtn ) {
86- if ( ! checkIsBtnUpToDate ( oldBtn , currentUrl ) ) {
91+ if ( ! checkIsBtnUpToDate ( oldBtn , urlInfo . gitpodUrl ) ) {
8792 // update button
88- ( oldBtn as HTMLAnchorElement ) . href = currentUrl ;
93+ ( oldBtn as HTMLAnchorElement ) . href = urlInfo . gitpodUrl ;
8994 }
9095 // button is there and up-to-date
9196 return ;
9297 }
9398
94- const btn = this . renderButton ( currentUrl , openAsPopup ) ;
99+ const btn = this . genButton ( urlInfo . host , urlInfo . originUrl ) ;
95100
96101 const btnGroup = actionbar . getElementsByClassName ( "BtnGroup" ) ;
97102 const detailsBtn = Array . from ( actionbar . children )
@@ -111,41 +116,64 @@ abstract class ButtonInjectorBase implements ButtonInjector {
111116 }
112117
113118 const primaryButtons = actionbar . getElementsByClassName ( "btn-primary" ) ;
114- if ( primaryButtons && primaryButtons . length > 1 ) {
119+ if ( primaryButtons && primaryButtons . length > 2 ) {
115120 Array . from ( primaryButtons )
116- . slice ( 0 , primaryButtons . length - 1 )
121+ . slice ( 0 , primaryButtons . length - 2 )
117122 . forEach ( primaryButton => primaryButton . classList . replace ( "btn-primary" , "btn-secondary" ) ) ;
118123 }
119124 }
120125
121- protected renderButton ( url : string , openAsPopup : boolean ) : HTMLElement {
126+ genOptionsString ( ideOptions : IDEOptions , host : string , originUrl : string ) {
127+ if ( ! ideOptions . clients ) {
128+ return [ ]
129+ }
130+ return Object . entries ( ideOptions . clients ?? { } ) . reduce ( ( prev , [ key , value ] ) => {
131+ if ( key === "vscode-insiders" || ! value . desktopIDEs ) {
132+ return prev
133+ }
134+ prev . push ( ...value . desktopIDEs ?. map ( e => {
135+ const url = `https://${ host ?? "gitpod.io" } ${ key } ${ e } ${ originUrl }
136+ const ideOption = ideOptions . options [ e ]
137+ const title = ideOption . title + ( ideOption . type === "desktop" ? "" : ideOption . type . toUpperCase ( ) )
138+ return `<a class="select-menu-item" tabindex="0" role="menuitemradio" aria-checked="true" href="${ url }
139+ <img style="margin-top: 3px" aria-hidden="true" height="14" width="14" data-view-component="true" class="octicon octicon-check select-menu-item-icon" src="${ ideOption . logo }
140+ <input type="radio" name="draft" id="draft_off" value="off" >
141+ <div class="select-menu-item-text">
142+ <span class="select-menu-item-heading">${ title }
143+ <span class="description text-normal">
144+ Open in ${ title }
145+ </span>
146+ <span data-menu-button-text="" hidden="">
147+ ${ title }
148+ </span>
149+ </div>
150+ </a>`
151+ } ) )
152+ return prev
153+ } , [ ] as string [ ] )
154+ }
155+
156+ genButton ( host : string , originUrl : string ) {
122157 let classes = this . btnClasses + ` ${ Gitpodify . NAV_BTN_CLASS } ;
123158 if ( this . float ) {
124159 classes = classes + ` float-right` ;
125160 }
126-
127- const container = document . createElement ( 'div' ) ;
128- container . id = Gitpodify . CSS_REF_BTN_CONTAINER ;
129- container . className = classes ;
130-
131- const a = document . createElement ( 'a' ) ;
132- a . id = Gitpodify . NAV_BTN_ID ;
133- a . title = "Gitpod" ;
134- a . text = "Gitpod"
135- a . href = url ;
136- a . target = "_blank" ;
137- if ( openAsPopup ) {
138- makeOpenInPopup ( a ) ;
139- }
140- a . className = "btn btn-sm btn-primary" ;
141-
142- this . adjustButton ( a ) ;
143-
144- container . appendChild ( a ) ;
145- return container ;
146- }
147- protected adjustButton ( a : HTMLAnchorElement ) {
148- // do nothing
161+ return createElementFromHTML ( `<div id="${ Gitpodify . CSS_REF_BTN_CONTAINER } ${ classes }
162+ <a id="${ Gitpodify . NAV_BTN_ID }
163+ href="${ host + "/#" + originUrl }
164+ class="btn-primary btn btn-primary BtnGroup-item flex-auto"> Gitpod
165+ </a>
166+ <details class="details-reset details-overlay select-menu BtnGroup-parent position-relative">
167+ <summary data-disable-invalid="" data-disable-with="" aria-label="Select editor to open a workspace"
168+ data-view-component="true" class="select-menu-button btn-primary btn BtnGroup-item float-none"
169+ aria-haspopup="menu" role="button">
170+ </summary>
171+ <details-menu class="select-menu-modal position-absolute right-0 js-sync-select-menu-text"
172+ style="z-index: 99" role="menu">
173+ ${ this . genOptionsString ( ideOptions , host , originUrl ) . join ( "\n" ) }
174+ </details-menu>
175+ </details>
176+ </div>` )
149177 }
150178}
151179
@@ -155,7 +183,7 @@ class PullInjector extends ButtonInjectorBase {
155183 }
156184
157185 isApplicableToCurrentPage ( ) : boolean {
158- return window . location . pathname . includes ( "/pull/" ) ;
186+ return window . location . pathname . includes ( "/pull/" ) ;
159187 }
160188}
161189
@@ -165,7 +193,7 @@ class IssueInjector extends ButtonInjectorBase {
165193 }
166194
167195 isApplicableToCurrentPage ( ) : boolean {
168- return window . location . pathname . includes ( "/issues/" ) ;
196+ return window . location . pathname . includes ( "/issues/" ) ;
169197 }
170198}
171199
0 commit comments