Added progressbar and minor changes

Signed-off-by: jbicker <jan.bicker@typefox.io>

.vscode/launch.json

@@ -60,7 +60,8 @@
         "--port=3000",
         "--no-cluster",
         "--app-project-path=${workspaceRoot}/examples/browser",
-        "--plugins=local-dir:plugins"
+        "--plugins=local-dir:plugins",
+        "--hosted-plugin-inspect=9339"
       ],
       "env": {
         "NODE_ENV": "development",

packages/vscode-extensions/package.json

@@ -14,7 +14,7 @@
     "access": "public"
   },
   "keywords": [
-    "theia-vscode-extensions"
+    "theia-extension"
   ],
   "theiaExtensions": [
     {

packages/vscode-extensions/src/browser/style/index.css

@@ -62,19 +62,21 @@
 }
 
 .extensionButton.working {
-    background: none;
-}
-
-.extensionButton.working:hover {
-    background: none;
-    cursor: default;
+    background-color: var(--theia-disabled-color1);
+    color: var(--theia-ui-font-color0);
+    width: auto;
 }
 
 .extensionButton:hover {
     cursor: pointer;
     background-color: var(--theia-success-color0);
 }
 
+.extensionButton.working:hover {
+    background-color: var(--theia-disabled-color1);
+    cursor: default;
+}
+
 .extensionButton.installed {
     background-color: var(--theia-error-color1);
 }

packages/vscode-extensions/src/browser/view/detail/vscode-extension-detail-widget-factory.ts

@@ -18,13 +18,14 @@ import { injectable, inject } from 'inversify';
 import { WidgetFactory } from '@theia/core/lib/browser/widget-manager';
 import { VSCodeExtensionUri } from './vscode-extension-open-handler';
 import { VSCodeExtensionDetailWidget } from './vscode-extensions-detail-widget';
-import { VSCodeExtensionPartResolved } from '../../vscode-extensions-types';
+import { VSCodeExtensionPartResolved, VSCodeExtensionFullResolved } from '../../vscode-extensions-types';
 import { VSCodeExtensionsService } from '../../vscode-extensions-service';
 import { VSCodeExtensionsModel } from '../../vscode-extensions-model';
+import { ProgressLocationService } from '@theia/core/lib/browser/progress-location-service';
+import { ProgressService } from '@theia/core/lib/common';
 
 export interface VSCodeExtensionDetailWidgetOptions {
-    readonly extension: VSCodeExtensionPartResolved;
-    readonly readMe: string;
+    readonly url: string
 }
 
 @injectable()
@@ -34,12 +35,19 @@ export class VSCodeExtensionDetailWidgetFactory implements WidgetFactory {
 
     @inject(VSCodeExtensionsService) protected readonly service: VSCodeExtensionsService;
     @inject(VSCodeExtensionsModel) protected readonly model: VSCodeExtensionsModel;
+    @inject(ProgressLocationService) protected readonly progressLocationService: ProgressLocationService;
+    @inject(ProgressService) protected readonly progressService: ProgressService;
 
     async createWidget(options: VSCodeExtensionDetailWidgetOptions): Promise<VSCodeExtensionDetailWidget> {
-        const widget = new VSCodeExtensionDetailWidget(options, this.service, this.model);
-        widget.id = 'vscode-extension:' + options.extension.name;
+        const extension = await this.service.getExtensionDetail(options.url);
+        const extensionResolved = new VSCodeExtensionPartResolved(extension, this.model) as VSCodeExtensionFullResolved;
+        const readMe = await this.service.compileDocumentation(extension);
+
+        const widget = new VSCodeExtensionDetailWidget(
+            extensionResolved, readMe, this.service, this.model, this.progressService, this.progressLocationService);
+        widget.id = 'vscode-extension:' + extension.name;
         widget.title.closable = true;
-        widget.title.label = options.extension.name;
+        widget.title.label = extension.name;
         widget.title.iconClass = 'fa fa-puzzle-piece';
         return widget;
     }

packages/vscode-extensions/src/browser/view/detail/vscode-extension-open-handler.ts

@@ -21,13 +21,13 @@ import { VSCodeExtensionDetailWidget } from './vscode-extensions-detail-widget';
 import { VSCodeExtensionDetailWidgetOptions } from './vscode-extension-detail-widget-factory';
 
 export namespace VSCodeExtensionUri {
-    export const scheme = 'vscx';
+    export const scheme = 'vscode';
     export function toUri(extensionName: string): URI {
-        return new URI('').withScheme(scheme).withFragment(extensionName);
+        return new URI('').withScheme(scheme).withPath('extension/' + extensionName);
     }
     export function toExtensionName(uri: URI): string {
-        if (uri.scheme === scheme) {
-            return uri.fragment;
+        if (uri.scheme === scheme && uri.path.dir.toString() === 'extension') {
+            return uri.path.base;
         }
         throw new Error('The given uri is not an vscode extension URI, uri: ' + uri);
     }
@@ -50,7 +50,9 @@ export class VSCodeExtensionOpenHandler extends WidgetOpenHandler<VSCodeExtensio
     }
 
     protected createWidgetOptions(uri: URI, options: VSCodeExtensionDetailOpenerOptions): VSCodeExtensionDetailWidgetOptions {
-        return options;
+        return {
+            url: options.url
+        };
     }
 
 }

packages/vscode-extensions/src/browser/view/detail/vscode-extensions-detail-widget.tsx

@@ -16,39 +16,48 @@
 
 import * as React from 'react';
 import { ReactWidget } from '@theia/core/lib/browser';
-import { VSCodeExtensionDetailWidgetOptions } from './vscode-extension-detail-widget-factory';
 import { VSCXDetailHeader } from './vscx-detail-header-component';
 import { VSCodeExtensionsService } from '../../vscode-extensions-service';
 import { VSCodeExtensionsModel } from '../../vscode-extensions-model';
+import { ProgressService } from '@theia/core/lib/common';
+import { ProgressLocationService } from '@theia/core/lib/browser/progress-location-service';
+import { VSCodeExtensionFullResolved } from '../../vscode-extensions-types';
 
 export class VSCodeExtensionDetailWidget extends ReactWidget {
 
     constructor(
-        protected readonly options: VSCodeExtensionDetailWidgetOptions,
+        protected readonly extension: VSCodeExtensionFullResolved,
+        protected readonly readMe: string,
         protected readonly service: VSCodeExtensionsService,
-        protected readonly model: VSCodeExtensionsModel
+        protected readonly model: VSCodeExtensionsModel,
+        protected readonly progressService: ProgressService,
+        protected readonly progressLocationService: ProgressLocationService
     ) {
         super();
         this.addClass('vscode-extension-detail');
+
+        this.id = extension.publisher + '-' + extension.name + '-' + 'detail';
+
         service.onDidUpdateInstalled(() => {
-            this.init();
+            this.update();
         });
-        this.init();
-    }
-
-    protected init(): void {
-        this.options.extension.busy = false;
         this.update();
     }
 
     protected render(): React.ReactNode {
         return <React.Fragment>
-            <VSCXDetailHeader extension={this.options.extension} service={this.service} />
-            <div className='extensionDocContainer flexcontainer'>
-                <div className='extensionDocumentation'>
-                    <span dangerouslySetInnerHTML={{ __html: this.options.readMe }} />
+                <VSCXDetailHeader
+                    toDispose={this.toDispose}
+                    id={this.id}
+                    progressLocationService={this.progressLocationService}
+                    progressService={this.progressService}
+                    extension={this.extension}
+                    service={this.service} />
+                <div className='extensionDocContainer flexcontainer'>
+                    <div className='extensionDocumentation'>
+                        <span dangerouslySetInnerHTML={{ __html: this.readMe }} />
+                    </div>
                 </div>
-            </div>
         </React.Fragment>;
     }
 

packages/vscode-extensions/src/browser/view/detail/vscx-detail-header-component.tsx

@@ -19,64 +19,82 @@ import { VSCodeExtensionPartResolved, VSCodeExtensionFullResolved } from '../../
 import { VSCXStars } from './vscx-stars-component';
 import { VSCXInstallButton } from '../vscx-install-button-component';
 import { VSCodeExtensionsService } from '../../vscode-extensions-service';
+import { ProgressService, DisposableCollection } from '@theia/core/lib/common';
+import { ProgressLocationService } from '@theia/core/lib/browser/progress-location-service';
+import { ProgressBar } from '@theia/core/lib/browser/progress-bar';
 
 export class VSCXDetailHeader extends React.Component<VSCXDetailHeader.Props, VSCXDetailHeader.State> {
 
+    protected detailHeaderRef: (ref: HTMLElement | null) => void;
+    protected progressLocation: string;
+
     constructor(props: VSCXDetailHeader.Props) {
         super(props);
+
+        this.progressLocation = this.props.id;
+
+        this.detailHeaderRef = ref => {
+            if (ref) {
+                const onProgress = this.props.progressLocationService.onProgress(this.progressLocation);
+                this.props.toDispose.push(new ProgressBar({ container: ref, insertMode: 'prepend' }, onProgress));
+            }
+        };
     }
 
     render(): JSX.Element {
         const extension = this.props.extension as VSCodeExtensionFullResolved;
         return <React.Fragment>
-            <div className='extensionHeaderContainer'>
-                {
-                    extension.iconUrl ?
-                        <div className='extensionHeaderImage'>
-                            <div className='icon'>
-                                <img src={extension.iconUrl} />
+            <div ref={this.detailHeaderRef}>
+                <div className='extensionHeaderContainer'>
+                    {
+                        extension.iconUrl ?
+                            <div className='extensionHeaderImage'>
+                                <div className='icon'>
+                                    <img src={extension.iconUrl} />
+                                </div>
+                            </div> : ''
+                    }
+                    <div className='extensionMetaDataContainer'>
+                        <div className='extensionTitleContainer'>
+                            <h1 className='extensionName'>{extension.name}</h1>
+                            <div className='extensionSubtitle'>
+                                <div className='extensionAuthor'>{extension.publisher}</div>
+                                <span className='textDivider' />
+                                <div className='extensionVersion'>{extension.version}</div>
+                                {
+                                    extension.averageRating ?
+                                        <React.Fragment>
+                                            <span className='textDivider' />
+                                            <div className='extensionRatingStars'>
+                                                <VSCXStars number={extension.averageRating} />
+                                            </div>
+                                        </React.Fragment>
+                                        : ''
+                                }
+                                {
+                                    extension.repository ?
+                                        <React.Fragment>
+                                            <span className='textDivider' />
+                                            <a href={extension.repository} target='_blank'>Repository</a>
+                                        </React.Fragment>
+                                        : ''
+                                }
+                                {
+                                    extension.license ?
+                                        <React.Fragment>
+                                            <span className='textDivider' />
+                                            {extension.license}
+                                        </React.Fragment>
+                                        : ''
+                                }
                             </div>
-                        </div> : ''
-                }
-                <div className='extensionMetaDataContainer'>
-                    <div className='extensionTitleContainer'>
-                        <h1 className='extensionName'>{extension.name}</h1>
-                        <div className='extensionSubtitle'>
-                            <div className='extensionAuthor'>{extension.publisher}</div>
-                            <span className='textDivider' />
-                            <div className='extensionVersion'>{extension.version}</div>
-                            {
-                                extension.averageRating ?
-                                    <React.Fragment>
-                                        <span className='textDivider' />
-                                        <div className='extensionRatingStars'>
-                                            <VSCXStars number={extension.averageRating} />
-                                        </div>
-                                    </React.Fragment>
-                                    : ''
-                            }
-                            {
-                                extension.repository ?
-                                    <React.Fragment>
-                                        <span className='textDivider' />
-                                        <a href={extension.repository} target='_blank'>Repository</a>
-                                    </React.Fragment>
-                                    : ''
-                            }
-                            {
-                                extension.license ?
-                                    <React.Fragment>
-                                        <span className='textDivider' />
-                                        {extension.license}
-                                    </React.Fragment>
-                                    : ''
-                            }
                         </div>
+                        <div className='extensionDescription'>{extension.description}</div>
+                        <VSCXInstallButton
+                            extension={extension}
+                            service={this.props.service}
+                            progressService={this.props.progressService} progressLocation={this.progressLocation} />
                     </div>
-                    <div className='extensionDescription'>{extension.description}</div>
-                    <VSCXInstallButton
-                        service={this.props.service}
-                        extension={this.props.extension} />
                 </div>
             </div>
         </React.Fragment>;
@@ -85,8 +103,12 @@ export class VSCXDetailHeader extends React.Component<VSCXDetailHeader.Props, VS
 
 export namespace VSCXDetailHeader {
     export interface Props {
-        extension: VSCodeExtensionPartResolved
-        service: VSCodeExtensionsService
+        id: string;
+        toDispose: DisposableCollection;
+        extension: VSCodeExtensionPartResolved;
+        service: VSCodeExtensionsService;
+        progressService: ProgressService;
+        progressLocationService: ProgressLocationService;
     }
     export interface State {
 

packages/vscode-extensions/src/browser/view/list/vscode-extensions-list-widget.tsx

@@ -22,6 +22,8 @@ import { VSCodeExtensionsService } from '../../vscode-extensions-service';
 import { VSCodeExtensionsModel } from '../../vscode-extensions-model';
 import { VSCXList } from './vscx-list-component';
 import { VSCodeExtensionPart, VSCodeExtensionsLocation } from '../../vscode-extensions-types';
+import { ProgressLocationService } from '@theia/core/lib/browser/progress-location-service';
+import { ProgressService } from '@theia/core/lib/common';
 
 export const VSCodeExtensionsListOptions = Symbol('VSCodeExtensionsListOptions');
 
@@ -50,6 +52,8 @@ export class VSCodeExtensionsListWidget extends ReactWidget {
     @inject(VSCodeExtensionsListOptions) protected readonly options: VSCodeExtensionsListOptions;
     @inject(VSCodeExtensionsService) protected readonly service: VSCodeExtensionsService;
     @inject(VSCodeExtensionsModel) protected readonly model: VSCodeExtensionsModel;
+    @inject(ProgressLocationService) protected readonly progressLocationService: ProgressLocationService;
+    @inject(ProgressService) protected readonly progressService: ProgressService;
 
     @postConstruct()
     protected init(): void {
@@ -64,7 +68,12 @@ export class VSCodeExtensionsListWidget extends ReactWidget {
 
     protected render(): React.ReactNode {
         return <React.Fragment>
-            <VSCXList extensions={this.extensions} model={this.model} service={this.service} />
+            <VSCXList
+                progressLocation='vscode-extensions-list'
+                progressService={this.progressService}
+                extensions={this.extensions}
+                model={this.model}
+                service={this.service} />
         </React.Fragment>;
     }
 

packages/vscode-extensions/src/browser/view/list/vscode-extensions-widget.ts

@@ -20,6 +20,7 @@ import { VSCodeExtensionsSearchbarWidget } from './vscode-extensions-searchbar-w
 import { VSCodeExtensionsListWidget } from './vscode-extensions-list-widget';
 import { VSCodeExtensionsService } from '../../vscode-extensions-service';
 import { VSCodeExtensionsCommands } from '../../vscode-extensions-contribution';
+import { ProgressBar } from '@theia/core/lib/browser/progress-bar';
 
 export const VSCXInstalledList = Symbol('VSCXInstalledList');
 export const VSCXRegistryList = Symbol('VSCXList');
@@ -30,6 +31,8 @@ export class VSCodeExtensionsWidget extends ViewContainer {
     static ID = 'vscode-extensions';
     static LABEL = 'Extensions';
 
+    protected progressLocation: string;
+
     @inject(VSCodeExtensionsSearchbarWidget) protected readonly vscxSearchbar: VSCodeExtensionsSearchbarWidget;
     @inject(VSCodeExtensionsService) protected readonly service: VSCodeExtensionsService;
     @inject(VSCXInstalledList) protected readonly vscxInstalledList: VSCodeExtensionsListWidget;
@@ -77,6 +80,10 @@ export class VSCodeExtensionsWidget extends ViewContainer {
             priority: 1,
             onDidChange
         });
+
+        this.progressLocation = 'vscode-extensions-list';
+        const onProgress = this.progressLocationService.onProgress(this.progressLocation);
+        this.toDispose.push(new ProgressBar({ container: this.node, insertMode: 'prepend' }, onProgress));
     }
 
     getSearchTerm(): string {