extensions styling improvements

Signed-off-by: Kenneth Marut <kenneth.marut@ericsson.com>
Signed-off-by: Colin Grant <colin.grant@ericsson.com>

packages/vsx-registry/src/browser/style/index.css

@@ -137,18 +137,49 @@
     overflow: hidden;
     display: flex;
     flex-direction: column;
-    padding: var(--theia-ui-padding);
+    padding-top: 0;
+    position: relative;
 }
 
 .theia-vsx-extension-editor .header {
     display: flex;
-    padding: calc(var(--theia-ui-padding)*3) calc(var(--theia-ui-padding)*3) calc(var(--theia-ui-padding)*2);
-    overflow: hidden;
+    padding: calc(var(--theia-ui-padding) * 3) calc(var(--theia-ui-padding) * 3) calc(var(--theia-ui-padding) * 3);
     flex-shrink: 0;
+    border-bottom: 1px solid hsla(0, 0% ,50% ,.5);
+    position: sticky;
+    top: 0;
+    width: 100%;
+    background: var(--theia-editor-background);
+}
+
+.theia-vsx-extension-editor .scroll-container {
+    position: absolute;
+    bottom: 0;
+    padding-top: 0;
+    max-width: 100%;
+    width: 100%;
 }
 
 .theia-vsx-extension-editor .body {
     flex: 1;
+    padding: calc(var(--theia-ui-padding)*2);
+    padding-top: 0;
+    max-width: 1000px;
+    margin: 0 auto;
+}
+
+.theia-vsx-extension-editor .body h2:first-of-type {
+    padding-bottom: var(--theia-ui-padding);
+    border-bottom: 1px solid hsla(0, 0%, 50%, .5);
+    margin-top: calc(var(--theia-ui-padding) * 5);
+}
+
+.theia-vsx-extension-editor .scroll-container .body pre {
+    white-space: normal;
+}
+
+.theia-vsx-extension-editor .body img {
+    max-width: 100%;
 }
 
 .theia-vsx-extension-editor .header .icon-container {

packages/vsx-registry/src/browser/vsx-extension-editor.tsx

@@ -16,9 +16,10 @@
 
 import * as React from 'react';
 import { inject, injectable, postConstruct } from 'inversify';
-import { ReactWidget, Message } from '@theia/core/lib/browser';
-import { VSXExtension } from './vsx-extension';
+import { ReactWidget, Message, Widget } from '@theia/core/lib/browser';
+import { VSXExtension, VSXExtensionEditorComponent } from './vsx-extension';
 import { VSXExtensionsModel } from './vsx-extensions-model';
+import { Deferred } from '@theia/core/lib/common/promise-util';
 
 @injectable()
 export class VSXExtensionEditor extends ReactWidget {
@@ -31,6 +32,8 @@ export class VSXExtensionEditor extends ReactWidget {
     @inject(VSXExtensionsModel)
     protected readonly model: VSXExtensionsModel;
 
+    protected readonly deferredScrollContainer = new Deferred<HTMLElement>();
+
     @postConstruct()
     protected init(): void {
         this.addClass('theia-vsx-extension-editor');
@@ -39,11 +42,14 @@ export class VSXExtensionEditor extends ReactWidget {
         this.updateTitle();
         this.title.iconClass = 'fa fa-puzzle-piece';
         this.node.tabIndex = -1;
-
         this.update();
         this.toDispose.push(this.model.onDidChange(() => this.update()));
     }
 
+    getScrollContainer(): Promise<HTMLElement> {
+        return this.deferredScrollContainer.promise;
+    }
+
     protected onActivateRequest(msg: Message): void {
         super.onActivateRequest(msg);
         this.node.focus();
@@ -54,14 +60,30 @@ export class VSXExtensionEditor extends ReactWidget {
         this.updateTitle();
     }
 
+    protected onAfterShow(msg: Message): void {
+        super.onAfterShow(msg);
+        this.update();
+    }
+
     protected updateTitle(): void {
         const label = 'Extension: ' + (this.extension.displayName || this.extension.name);
         this.title.label = label;
         this.title.caption = label;
     }
 
+    protected onResize(msg: Widget.ResizeMessage): void {
+        super.onResize(msg);
+        this.update();
+    };
+
+    protected resolveScrollContainer = (element: VSXExtensionEditorComponent | null) => {
+        this.deferredScrollContainer.resolve(element?.scrollContainer);
+    };
+
     protected render(): React.ReactNode {
-        return this.extension.renderEditor();
+        return <VSXExtensionEditorComponent
+            ref={this.resolveScrollContainer}
+            extension={this.extension}
+        />;
     }
-
 }

packages/vsx-registry/src/browser/vsx-extension.tsx

@@ -264,11 +264,6 @@ export class VSXExtension implements VSXExtensionData, TreeElement {
     render(): React.ReactNode {
         return <VSXExtensionComponent extension={this} />;
     }
-
-    renderEditor(): React.ReactNode {
-        return <VSXExtensionEditorComponent extension={this} />;
-    }
-
 }
 
 export abstract class AbstractVSXExtensionComponent extends React.Component<AbstractVSXExtensionComponent.Props> {
@@ -315,7 +310,7 @@ export abstract class AbstractVSXExtensionComponent extends React.Component<Abst
 }
 export namespace AbstractVSXExtensionComponent {
     export interface Props {
-        extension: VSXExtension
+        extension: VSXExtension;
     }
 }
 
@@ -351,13 +346,24 @@ export class VSXExtensionComponent extends AbstractVSXExtensionComponent {
 }
 
 export class VSXExtensionEditorComponent extends AbstractVSXExtensionComponent {
+    protected header: HTMLElement | undefined;
+    protected body: HTMLElement | undefined;
+    protected _scrollContainer: HTMLElement | undefined;
+
+    get scrollContainer(): HTMLElement | undefined {
+        return this._scrollContainer;
+    }
+
     render(): React.ReactNode {
         const {
-            builtin, preview, id, iconUrl, publisher, displayName, description,
-            averageRating, downloadCount, repository, license, readme, version
+            builtin, preview, id, iconUrl, publisher, displayName, description, version,
+            averageRating, downloadCount, repository, license, readme
         } = this.props.extension;
+
+        const { baseStyle, scrollStyle } = this.getSubcomponentStyles();
+
         return <React.Fragment>
-            <div className='header'>
+            <div className='header' style={baseStyle} ref={ref => this.header = (ref || undefined)}>
                 {iconUrl ?
                     <img className='icon-container' src={iconUrl} /> :
                     <div className='icon-container placeholder' />}
@@ -384,11 +390,20 @@ export class VSXExtensionEditorComponent extends AbstractVSXExtensionComponent {
                     {this.renderAction()}
                 </div>
             </div>
-            {readme && <div className='body'
-                ref={body => this.body = (body || undefined)}
-                onClick={this.openLink}
-                dangerouslySetInnerHTML={{ __html: readme }} />}
-        </React.Fragment>;
+            {
+                readme &&
+                < div className='scroll-container'
+                    style={scrollStyle}
+                    ref={ref => this._scrollContainer = (ref || undefined)}>
+                    <div className='body'
+                        ref={ref => this.body = (ref || undefined)}
+                        onClick={this.openLink}
+                        style={baseStyle}
+                        dangerouslySetInnerHTML={{ __html: readme }}
+                    />
+                </div>
+            }
+        </React.Fragment >;
     }
 
     protected renderNamespaceAccess(): React.ReactNode {
@@ -421,7 +436,13 @@ export class VSXExtensionEditorComponent extends AbstractVSXExtensionComponent {
         </React.Fragment>;
     }
 
-    protected body: HTMLElement | undefined;
+    protected getSubcomponentStyles(): { baseStyle: React.CSSProperties, scrollStyle: React.CSSProperties; } {
+        const visibility: 'unset' | 'hidden' = this.header ? 'unset' : 'hidden';
+        const baseStyle = { visibility };
+        const scrollStyle = this.header?.clientHeight ? { visibility, height: `calc(100% - (${this.header.clientHeight}px + 1px))` } : baseStyle;
+
+        return { baseStyle, scrollStyle };
+    }
 
     // TODO replace with webview
     readonly openLink = (event: React.MouseEvent) => {