Reworks & reorganizes the webview code

Splits App into AppBase & AppWithConfigBase for impl of new webviews

.gitignore

@@ -2,7 +2,5 @@
 .cache-loader
 dist
 node_modules
-settings.html
-welcome.html
 images/settings
 gitlens-*.vsix

.vscodeignore

@@ -2,21 +2,23 @@
 .cache-loader/**
 .github/**
 .vscode/**
-dist/ui/**
+dist/webviews/main.js
 emoji/**
 images/docs/**
 images/**/*.pdn
 node_modules/**
 src/**
 test/**
 *.map
+.eslintrc.json
 .gitignore
+.mailmap
 .prettierignore
 .prettierrc
 CODE_OF_CONDUCT.md
 CONTRIBUTING.md
+generateEmojiShortcodeMap.js
 package-lock.json
 tsconfig.json
-tslint.json
-ui.tsconfig.json
-webpack.config.js
+webpack.config.js
+webviews.tsconfig.json

package.json

@@ -4978,8 +4978,8 @@
         "rebuild": "npm run reset && npm run build",
         "reset": "npm run clean && npm install --no-save",
         "watch": "webpack --watch --env.development --info-verbosity verbose",
-        "ui:optimize": "webpack --config-name ui --env.optimizeImages",
-        "ui:watch": "webpack --watch --config-name ui --env.development --info-verbosity verbose",
+        "webviews:optimize": "webpack --config-name webviews --env.optimizeImages",
+        "webviews:watch": "webpack --watch --config-name webviews --env.development --info-verbosity verbose",
         "update:emoji": "pushd emoji && node ./shortcodeToEmoji.js && popd",
         "postinstall": "node ./node_modules/vscode/bin/install",
         "vscode:prepublish": "npm run reset && npm run bundle"
@@ -5004,6 +5004,7 @@
         "eslint-loader": "2.1.2",
         "eslint-plugin-import": "2.16.0",
         "eslint-plugin-prettiest": "0.0.1",
+        "html-webpack-exclude-assets-plugin": "0.0.7",
         "html-webpack-inline-source-plugin": "0.0.10",
         "html-webpack-plugin": "3.2.0",
         "imagemin-webpack-plugin": "2.4.2",

src/annotations/annotations.ts

@@ -21,7 +21,7 @@ import {
     GitUri
 } from '../git/gitService';
 import { Objects, Strings } from '../system';
-import { toRgba } from '../ui/shared/colors';
+import { toRgba } from '../webviews/apps/shared/colors';
 
 export interface ComputedHeatmap {
     cold: boolean;

src/commands/common.ts

@@ -78,6 +78,7 @@ export enum Commands {
     ShowQuickStashList = 'gitlens.showQuickStashList',
     ShowRepositoriesView = 'gitlens.showRepositoriesView',
     ShowSearchView = 'gitlens.showSearchView',
+    ShowHistoryPage = 'gitlens.showHistoryPage',
     ShowSettingsPage = 'gitlens.showSettingsPage',
     ShowWelcomePage = 'gitlens.showWelcomePage',
     StashApply = 'gitlens.stashApply',

src/container.ts

@@ -21,8 +21,8 @@ import { RepositoriesView } from './views/repositoriesView';
 import { SearchView } from './views/searchView';
 import { ViewCommands } from './views/viewCommands';
 import { VslsController } from './vsls/vsls';
-import { SettingsEditor } from './webviews/settingsEditor';
-import { WelcomeEditor } from './webviews/welcomeEditor';
+import { SettingsWebview } from './webviews/settingsWebview';
+import { WelcomeWebview } from './webviews/welcomeWebview';
 
 export class Container {
     private static _configsAffectedByMode: string[] | undefined;
@@ -49,8 +49,8 @@ export class Container {
         context.subscriptions.push((this._statusBarController = new StatusBarController()));
         context.subscriptions.push((this._codeLensController = new GitCodeLensController()));
         context.subscriptions.push((this._keyboard = new Keyboard()));
-        context.subscriptions.push((this._settingsEditor = new SettingsEditor()));
-        context.subscriptions.push((this._welcomeEditor = new WelcomeEditor()));
+        context.subscriptions.push((this._settingsWebview = new SettingsWebview()));
+        context.subscriptions.push((this._welcomeWebview = new WelcomeWebview()));
 
         if (config.views.compare.enabled) {
             context.subscriptions.push((this._compareView = new CompareView()));
@@ -238,9 +238,9 @@ export class Container {
         return this._searchView;
     }
 
-    private static _settingsEditor: SettingsEditor;
-    static get settingsEditor() {
-        return this._settingsEditor;
+    private static _settingsWebview: SettingsWebview;
+    static get settingsWebview() {
+        return this._settingsWebview;
     }
 
     private static _statusBarController: StatusBarController;
@@ -266,9 +266,9 @@ export class Container {
         return this._vsls;
     }
 
-    private static _welcomeEditor: WelcomeEditor;
-    static get welcomeEditor() {
-        return this._welcomeEditor;
+    private static _welcomeWebview: WelcomeWebview;
+    static get welcomeWebview() {
+        return this._welcomeWebview;
     }
 
     private static applyMode(config: Config) {

src/ui/settings/app.ts → src/webviews/apps/settings/index.ts

@@ -1,12 +1,12 @@
 'use strict';
 /*global window document*/
-import { SettingsBootstrap } from '../ipc';
-import { App } from '../shared/app-base';
+import { SettingsBootstrap } from '../../protocol';
+import { AppWithConfig } from '../shared/appWithConfigBase';
 import { DOM } from '../shared/dom';
 
 const bootstrap: SettingsBootstrap = (window as any).bootstrap;
 
-export class SettingsApp extends App<SettingsBootstrap> {
+export class SettingsApp extends AppWithConfig<SettingsBootstrap> {
     private _scopes: HTMLSelectElement | null = null;
 
     constructor() {
@@ -32,8 +32,8 @@ export class SettingsApp extends App<SettingsBootstrap> {
         }
     }
 
-    protected onBind() {
-        const me = this;
+    protected onBind(me: this) {
+        super.onBind(me);
 
         DOM.listenAll('.section__header', 'click', function(this: HTMLInputElement, e: Event) {
             return me.onSectionHeaderClicked(this, e as MouseEvent);
@@ -91,3 +91,5 @@ export class SettingsApp extends App<SettingsBootstrap> {
         element.classList.toggle('collapsed');
     }
 }
+
+new SettingsApp();

src/webviews/apps/shared/appBase.ts

@@ -0,0 +1,74 @@
+'use strict';
+/*global window document*/
+import { AppBootstrap, IpcCommandParamsOf, IpcCommandType, IpcMessage } from '../../protocol';
+import { initializeAndWatchThemeColors } from './theme';
+
+interface VsCodeApi {
+    postMessage(msg: {}): void;
+    setState(state: {}): void;
+    getState(): {};
+}
+
+declare function acquireVsCodeApi(): VsCodeApi;
+
+let ipcSequence = 0;
+
+export abstract class App<TBootstrap extends AppBootstrap> {
+    private readonly _api: VsCodeApi;
+
+    constructor(protected readonly appName: string, protected readonly bootstrap: TBootstrap) {
+        this.log(`${this.appName}.ctor`);
+
+        this._api = acquireVsCodeApi();
+        initializeAndWatchThemeColors();
+
+        this.log(`${this.appName}.initializing`);
+
+        this.onInitialize();
+        this.onBind(this);
+
+        window.addEventListener('message', this.onMessageReceived.bind(this));
+
+        this.onInitialized();
+
+        setTimeout(() => {
+            document.body.classList.remove('preload');
+        }, 500);
+    }
+
+    protected onInitialize() {
+        // virtual
+    }
+    protected onInitialized() {
+        // virtual
+    }
+    protected onBind(me: this) {
+        // virtual
+    }
+    protected onMessageReceived(e: MessageEvent) {
+        // virtual
+    }
+
+    protected log(message: string) {
+        console.log(message);
+    }
+
+    protected sendCommand<CT extends IpcCommandType>(type: CT, params: IpcCommandParamsOf<CT>): void {
+        return this.postMessage({ id: this.nextIpcId(), method: type.method, params: params });
+    }
+
+    private nextIpcId() {
+        if (ipcSequence === Number.MAX_SAFE_INTEGER) {
+            ipcSequence = 1;
+        }
+        else {
+            ipcSequence++;
+        }
+
+        return `webview:${ipcSequence}`;
+    }
+
+    private postMessage(e: IpcMessage) {
+        this._api.postMessage(e);
+    }
+}