initial webview implementation

Signed-off-by: Yevhen Vydolob <[email protected]>

add theme styles into webview

Signed-off-by: Oleksii Orel <[email protected]>

add keyboard events into webview

Signed-off-by: Oleksii Orel <[email protected]>

implement setOptions for webview

Signed-off-by: Oleksii Orel <[email protected]>

implement setIconPath for webview

Signed-off-by: Oleksii Orel <[email protected]>

add an implementation for acquireTheiaApi

Signed-off-by: Oleksii Orel <[email protected]>

Author: evidolob

dev-packages/application-manager/package.json

@@ -35,6 +35,7 @@
     "circular-dependency-plugin": "^5.0.0",
     "copy-webpack-plugin": "^4.5.0",
     "css-loader": "^0.28.1",
+    "style-loader": "^0.23.1",
     "electron": "1.8.2-beta.5",
     "electron-rebuild": "^1.5.11",
     "file-loader": "^1.1.11",

dev-packages/application-manager/src/generator/webpack-generator.ts

@@ -83,7 +83,16 @@ module.exports = {
             },
             {
                 test: /\\.useable\\.css$/,
-                loader: 'style-loader/useable!css-loader'
+                use: [
+                  {
+                    loader: 'style-loader/useable',
+                    options: {
+                      singleton: true,
+                      attrs: { id: 'theia-theme' },
+                    }
+                  },
+                  'css-loader'
+                ]
             },
             {
                 test: /\\.(ttf|eot|svg)(\\?v=\\d+\\.\\d+\\.\\d+)?$/,

packages/plugin-ext-vscode/src/node/plugin-vscode-init.ts

@@ -43,11 +43,32 @@ export const doInitialization: BackendInitializationFn = (apiFactory: PluginAPIF
     }
 
     // replace command API as it will send only the ID as a string parameter
-    vscode.commands.registerCommand = function registerCommand(command: any, handler?: <T>(...args: any[]) => T | Thenable<T>): any {
+    const registerCommand = vscode.commands.registerCommand;
+    vscode.commands.registerCommand = function (command: any, handler?: <T>(...args: any[]) => T | Thenable<T>): any {
         // use of the ID when registering commands
         if (typeof command === 'string' && handler) {
             return vscode.commands.registerHandler(command, handler);
         }
+        return registerCommand(command, handler);
+    };
+
+    // replace createWebviewPanel API for override html setter
+    const createWebviewPanel = vscode.window.createWebviewPanel;
+    vscode.window.createWebviewPanel = function (viewType: string, title: string, showOptions: any, options: any | undefined): any {
+        const panel = createWebviewPanel(viewType, title, showOptions, options);
+        // redefine property
+        Object.defineProperty(panel.webview, 'html', {
+            set: function (html: string) {
+                const newHtml = html.replace('vscode-resource:/', '/webview/');
+                this.checkIsDisposed();
+                if (this._html !== newHtml) {
+                    this._html = newHtml;
+                    this.proxy.$setHtml(this.viewId, newHtml);
+                }
+            }
+        });
+
+        return panel;
     };
 
     // use Theia plugin api instead vscode extensions

packages/plugin-ext/src/api/plugin-api.ts

@@ -820,6 +820,48 @@ export interface LanguagesMain {
     $registerOutlineSupport(handle: number, selector: SerializedDocumentFilter[]): void;
 }
 
+export interface WebviewPanelViewState {
+    readonly active: boolean;
+    readonly visible: boolean;
+    readonly position: number;
+}
+
+export interface WebviewPanelShowOptions {
+    readonly viewColumn?: number;
+    readonly preserveFocus?: boolean;
+}
+
+export interface WebviewsExt {
+    $onMessage(handle: string, message: any): void;
+    $onDidChangeWebviewPanelViewState(handle: string, newState: WebviewPanelViewState): void;
+    $onDidDisposeWebviewPanel(handle: string): PromiseLike<void>;
+    $deserializeWebviewPanel(newWebviewHandle: string,
+        viewType: string,
+        title: string,
+        state: any,
+        position: number,
+        options: theia.WebviewOptions & theia.WebviewPanelOptions): PromiseLike<void>;
+}
+
+export interface WebviewsMain {
+    $createWebviewPanel(handle: string,
+        viewType: string,
+        title: string,
+        showOptions: WebviewPanelShowOptions,
+        options: theia.WebviewPanelOptions & theia.WebviewOptions | undefined,
+        pluginLocation: UriComponents): void;
+    $disposeWebview(handle: string): void;
+    $reveal(handle: string, showOptions: WebviewPanelShowOptions): void;
+    $setTitle(handle: string, value: string): void;
+    $setIconPath(handle: string, value: { light: string, dark: string } | string | undefined): void;
+    $setHtml(handle: string, value: string): void;
+    $setOptions(handle: string, options: theia.WebviewOptions): void;
+    $postMessage(handle: string, value: any): Thenable<boolean>;
+
+    $registerSerializer(viewType: string): void;
+    $unregisterSerializer(viewType: string): void;
+}
+
 export const PLUGIN_RPC_CONTEXT = {
     COMMAND_REGISTRY_MAIN: <ProxyIdentifier<CommandRegistryMain>>createProxyIdentifier<CommandRegistryMain>('CommandRegistryMain'),
     QUICK_OPEN_MAIN: createProxyIdentifier<QuickOpenMain>('QuickOpenMain'),
@@ -837,6 +879,7 @@ export const PLUGIN_RPC_CONTEXT = {
     OUTPUT_CHANNEL_REGISTRY_MAIN: <ProxyIdentifier<OutputChannelRegistryMain>>createProxyIdentifier<OutputChannelRegistryMain>('OutputChannelRegistryMain'),
     LANGUAGES_MAIN: createProxyIdentifier<LanguagesMain>('LanguagesMain'),
     CONNECTION_MAIN: createProxyIdentifier<ConnectionMain>('ConnectionMain'),
+    WEBVIEWS_MAIN: createProxyIdentifier<WebviewsMain>('WebviewsMain'),
 };
 
 export const MAIN_RPC_CONTEXT = {
@@ -854,4 +897,5 @@ export const MAIN_RPC_CONTEXT = {
     PREFERENCE_REGISTRY_EXT: createProxyIdentifier<PreferenceRegistryExt>('PreferenceRegistryExt'),
     LANGUAGES_EXT: createProxyIdentifier<LanguagesExt>('LanguagesExt'),
     CONNECTION_EXT: createProxyIdentifier<ConnectionExt>('ConnectionExt'),
+    WEBVIEWS_EXT: createProxyIdentifier<WebviewsExt>('WebviewsExt'),
 };

packages/plugin-ext/src/main/browser/main-context.ts

@@ -32,6 +32,7 @@ import { DialogsMainImpl } from './dialogs-main';
 import { TreeViewsMainImpl } from './view/tree-views-main';
 import { NotificationMainImpl } from './notification-main';
 import { ConnectionMainImpl } from './connection-main';
+import { WebviewsMainImpl } from './webviews-main';
 
 export function setUpPluginApi(rpc: RPCProtocol, container: interfaces.Container): void {
     const commandRegistryMain = new CommandRegistryMainImpl(rpc, container);
@@ -78,6 +79,9 @@ export function setUpPluginApi(rpc: RPCProtocol, container: interfaces.Container
     const languagesMain = new LanguagesMainImpl(rpc);
     rpc.set(PLUGIN_RPC_CONTEXT.LANGUAGES_MAIN, languagesMain);
 
+    const webviewsMain = new WebviewsMainImpl(rpc, container);
+    rpc.set(PLUGIN_RPC_CONTEXT.WEBVIEWS_MAIN, webviewsMain);
+
     const pluginConnection = new ConnectionMainImpl(rpc);
     rpc.set(PLUGIN_RPC_CONTEXT.CONNECTION_MAIN, pluginConnection);
 }

packages/plugin-ext/src/main/browser/style/index.css

@@ -52,4 +52,5 @@
 
 @import './plugin-sidebar.css';
 @import './view-registry.css';
+@import './webview.css';
 @import './tree.css';

packages/plugin-ext/src/main/browser/style/webview.css

@@ -0,0 +1,26 @@
+/********************************************************************************
+ * Copyright (C) 2018 Red Hat, Inc. and others.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License v. 2.0 which is available at
+ * http://www.eclipse.org/legal/epl-2.0.
+ *
+ * This Source Code may also be made available under the following Secondary
+ * Licenses when the conditions for such availability set forth in the Eclipse
+ * Public License v. 2.0 are satisfied: GNU General Public License, version 2
+ * with the GNU Classpath Exception which is available at
+ * https://www.gnu.org/software/classpath/license.html.
+ *
+ * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
+ ********************************************************************************/
+
+.theia-webview {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+}
+
+.theia-webview iframe {
+    flex-grow: 1;
+    border: none; margin: 0; padding: 0;
+}

packages/plugin-ext/src/main/browser/webview/theme-rules-service.ts

@@ -0,0 +1,148 @@
+/********************************************************************************
+ * Copyright (C) 2018 Red Hat, Inc. and others.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Eclipse Public License v. 2.0 which is available at
+ * http://www.eclipse.org/legal/epl-2.0.
+ *
+ * This Source Code may also be made available under the following Secondary
+ * Licenses when the conditions for such availability set forth in the Eclipse
+ * Public License v. 2.0 are satisfied: GNU General Public License, version 2
+ * with the GNU Classpath Exception which is available at
+ * https://www.gnu.org/software/classpath/license.html.
+ *
+ * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
+ ********************************************************************************/
+
+import { ThemeService } from '@theia/core/lib/browser/theming';
+
+export const ThemeRulesServiceSymbol = Symbol('ThemeRulesService');
+
+interface IconPath {
+    light: string,
+    dark: string
+}
+
+export class ThemeRulesService {
+    private styleElement?: HTMLStyleElement;
+    private icons = new Map<string, IconPath | string>();
+    protected readonly themeService = ThemeService.get();
+    protected readonly themeRules = new Map<string, string[]>();
+
+    static get(): ThemeRulesService {
+        const global = window as any; // tslint:disable-line
+        return global[ThemeRulesServiceSymbol] || new ThemeRulesService();
+    }
+
+    protected constructor() {
+        const global = window as any; // tslint:disable-line
+        global[ThemeRulesServiceSymbol] = this;
+
+        this.themeService.onThemeChange(() => {
+            this.updateIconStyleElement();
+        });
+    }
+
+    createStyleSheet(container: HTMLElement = document.getElementsByTagName('head')[0]): HTMLStyleElement {
+        const style = document.createElement('style');
+        style.type = 'text/css';
+        style.media = 'screen';
+        container.appendChild(style);
+        return style;
+    }
+
+    getCurrentThemeRules(): string[] {
+        const cssText: string[] = [];
+        const themeId = this.themeService.getCurrentTheme().id;
+        if (this.themeRules.has(themeId)) {
+            return <string[]>this.themeRules.get(themeId);
+        }
+        const styleElement = document.getElementById('theia-theme') as any;
+        if (!styleElement) {
+            return cssText;
+        }
+
+        const sheet: {
+            insertRule: (rule: string, index: number) => void,
+            removeRule: (index: number) => void,
+            rules: CSSRuleList
+        } | undefined = (<any>styleElement).sheet;
+        if (!sheet || !sheet.rules || !sheet.rules.length) {
+            return cssText;
+        }
+
+        const ruleList = sheet.rules;
+        for (let index = 0; index < ruleList.length; index++) {
+            if (ruleList[index] && ruleList[index].cssText) {
+                cssText.push(ruleList[index].cssText.toString());
+            }
+        }
+
+        return cssText;
+    }
+
+    setRules(styleSheet: HTMLElement, newRules: string[]): boolean {
+        const sheet: {
+            insertRule: (rule: string, index: number) => void;
+            removeRule: (index: number) => void;
+            rules: CSSRuleList;
+        } | undefined = (<any>styleSheet).sheet;
+
+        if (!sheet) {
+            return false;
+        }
+        for (let index = sheet.rules!.length; index > 0; index--) {
+            sheet.removeRule(0);
+        }
+        newRules.forEach((rule: string, index: number) => {
+            sheet.insertRule(rule, index);
+        });
+        return true;
+    }
+
+    setIconPath(webviewId: string, iconPath: IconPath | string | undefined) {
+        if (!iconPath) {
+            this.icons.delete(webviewId);
+        } else {
+            this.icons.set(webviewId, <IconPath | string>iconPath);
+        }
+        if (!this.styleElement) {
+            this.styleElement = this.createStyleSheet();
+            this.styleElement.id = 'webview-icons';
+        }
+        this.updateIconStyleElement();
+    }
+
+    private updateIconStyleElement() {
+        if (!this.styleElement) {
+            return;
+        }
+        const cssRules: string[] = [`.webview-icon::before {
+            background-repeat: no-repeat;
+            vertical-align: middle;
+            display: inline-block;
+            text-align: center;
+            height: 11px;
+            width: 11px;
+            content: "";
+        }`];
+        this.icons.forEach((value, key) => {
+            let path: string;
+            if (typeof value === 'string') {
+                path = value;
+            } else {
+                path = this.isDark() ? value.dark : value.light;
+            }
+            if (path.startsWith('/')) {
+                path = `/webview${path}`;
+            }
+            cssRules.push(`.webview-icon.${key}-file-icon::before { background-image: url(${path}); }`);
+        });
+        this.setRules(this.styleElement, cssRules);
+    }
+
+    private isDark(): boolean {
+        const currentThemeId: string = this.themeService.getCurrentTheme().id;
+        return !currentThemeId.includes('light');
+    }
+}