Merge branch 'develop'

.babelrc

@@ -1,5 +1,5 @@
 {
   "presets": [
-    "es2015"
+    "env"
   ]
 }

.gitignore

@@ -12,3 +12,4 @@ node_modules/
 /src/icons/svgs/*.svg
 .tmp-output-remote-icons
 _tmp-output-remote-icons
+/ui/

.gulp/index.ts

@@ -7,6 +7,7 @@ export * from './tasks/themes';
 export * from './tasks/watcher';
 export * from './tasks/changelog-title';
 export * from './tasks/get-remote-icons';
+export * from './tasks/copy-ui';
 
 // export default script
 export default ['build:themes'];

.gulp/tasks/copy-ui.ts

@@ -0,0 +1,28 @@
+import * as fs from 'fs';
+import * as path from 'path';
+import * as gulp from 'gulp';
+
+import {PATHS} from '../../extensions/consts/paths';
+import {ensureDir} from '../../extensions/helpers/fs';
+
+/**
+ * For each ThemeIconVariant create a Material-Theme-Icons-{variant}.json
+ * depends on default Material-Theme-Icons.json
+ */
+export default gulp.task('build:copy-ui', callback => {
+  try {
+      ensureDir(path.resolve(PATHS.UI));
+      fs.copyFileSync(
+        path.join(PATHS.SRC, 'webviews', 'ui', 'release-notes', 'release-notes.html'),
+        path.join(PATHS.UI, 'release-notes.html')
+      );
+      fs.copyFileSync(
+        path.join(PATHS.SRC, 'webviews', 'ui', 'release-notes', 'style.css'),
+        path.join(PATHS.UI, 'release-notes.css')
+      );
+  } catch (error) {
+    return callback(error);
+  }
+
+  callback();
+});

.vscode/tasks.json

@@ -84,6 +84,15 @@
       "command": "npm",
       "dependsOn": "clean project",
       "label": "tsc"
+    },
+    {
+      "args": [
+        "run",
+        "build-ui-only"
+      ],
+      "command": "npm",
+      "label": "UI: build UI only",
+      "problemMatcher": []
     }
   ]
 }

README.md

@@ -1,9 +1,9 @@
 
 <p align="center"><img width="980px" src="https://i.imgur.com/qvxc7OA.jpg"></p>
 
-[![Twitter](https://img.shields.io/twitter/url/https/github.com/equinusocio/vsc-material-theme.svg?style=flat-square)](https://twitter.com/intent/tweet?text=This%20is%20the%20most%20epic%20theme:&url=https%3A%2F%2Fgithub.com%2Fequinusocio%2Fvsc-material-theme)
+[![Twitter](https://img.shields.io/twitter/url/https/github.com/equinusocio/vsc-material-theme.svg?style=flat-square)](https://twitter.com/intent/tweet?text=Check%20the%20most%20epic%20theme%20for%20Visual%20Studio%20Code:&url=https%3A%2F%2Fgithub.com%2Fequinusocio%2Fvsc-material-theme)
 [![GitHub tag](https://img.shields.io/github/release/equinusocio/vsc-material-theme.svg?style=flat-square)](https://github.com/equinusocio/vsc-material-theme/releases)
-<a href="https://code.visualstudio.com/updates/v1_19"><img src="https://img.shields.io/badge/VS_Code-v1.19+-373277.svg?style=flat-square"/></a> <a href="https://marketplace.visualstudio.com/items?itemName=Equinusocio.vsc-material-theme"><img src="https://vsmarketplacebadge.apphb.com/installs/Equinusocio.vsc-material-theme.svg?style=flat-square"/></a>
+<a href="https://code.visualstudio.com/updates/v1_25"><img src="https://img.shields.io/badge/VS_Code-v1.25+-373277.svg?style=flat-square"/></a> <a href="https://marketplace.visualstudio.com/items?itemName=Equinusocio.vsc-material-theme"><img src="https://vsmarketplacebadge.apphb.com/installs/Equinusocio.vsc-material-theme.svg?style=flat-square"/></a>
 <a href="https://opencollective.com/vsc-material-theme"><img src="https://img.shields.io/badge/Support%20this%20project-%F0%9F%92%96%EF%B8%8F-green.svg?style=flat-square"/></a>
 
 

extensions/commands/accents-setter/index.ts

@@ -35,37 +35,46 @@ const isValidColour = (colour: string | null | undefined): boolean =>
 /**
  * Sets workbench options
  */
-const setWorkbenchOptions = (accentSelected: string | undefined, config: any): Thenable<string> =>
+const setWorkbenchOptions = (config: any): Thenable<boolean> =>
   vscode.workspace.getConfiguration().update('workbench.colorCustomizations', config, true)
-    .then(() => updateAccent(accentSelected),
+    .then(() => true, reason => vscode.window.showErrorMessage(reason));
-    reason => vscode.window.showErrorMessage(reason));
 
 /**
  * VSCode command
  */
-export default async (): Promise<boolean> => {
+export default async (accent?: string): Promise<boolean> => {
   const themeConfigCommon = getDefaultValues();
   const purgeColourKey: string = 'Remove accents';
-  const options: string[] = Object.keys(themeConfigCommon.accents).concat(purgeColourKey);
+  const shouldUpdateAccent = Boolean(!accent);
+  let accentToSelect = accent;
 
-  // shows the quick pick dropdown and wait response
+  // If called without accent shows the quick pick dropdown and wait response
-  const accentSelected = await vscode.window.showQuickPick(options);
+  if (!accentToSelect) {
+    const options: string[] = Object.keys(themeConfigCommon.accents).concat(purgeColourKey);
+    const accentSelected = await vscode.window.showQuickPick(options);
 
-  if (accentSelected === null || accentSelected === undefined) {
+    if (accentSelected === null || accentSelected === undefined) {
-    return Promise.resolve(null);
+      return Promise.resolve(null);
+    }
+
+    accentToSelect = accentSelected;
   }
 
   const config: any = vscode.workspace.getConfiguration().get('workbench.colorCustomizations');
 
-  switch (accentSelected) {
+  switch (accentToSelect) {
     case purgeColourKey:
       assignColorCustomizations(undefined, config);
-      await setWorkbenchOptions(undefined, config);
+      return setWorkbenchOptions(config)
-      return Promise.resolve(true);
+        .then(() => updateAccent(undefined))
+        .then(() => Promise.resolve(true));
     default:
-      assignColorCustomizations(themeConfigCommon.accents[accentSelected], config);
+      assignColorCustomizations(themeConfigCommon.accents[accentToSelect], config);
-      await setWorkbenchOptions(accentSelected, config);
+      return setWorkbenchOptions(config)
-      return Promise.resolve(true);
+        .then(() =>
+          shouldUpdateAccent ? updateAccent(accentToSelect) : Promise.resolve(accentToSelect)
+        )
+        .then(() => Promise.resolve(true));
   }
 
 };

extensions/commands/index.ts

@@ -1,4 +1,3 @@
 export {default as accentsSetter} from './accents-setter';
 export {default as fixIcons} from './theme-icons';
 export {default as toggleApplyIcons} from './toggle-apply-icons';
-export {default as showChangelog} from './show-changelog';

extensions/commands/show-changelog/index.ts

@@ -1,28 +0,0 @@
-import * as path from 'path';
-import * as vscode from 'vscode';
-
-import {PATHS} from './../../consts/paths';
-
-const previewFile = (): void => {
-  const uri = vscode.Uri.file(path.join(PATHS.VSIX_DIR, './CHANGELOG.md'));
-  vscode.commands.executeCommand('markdown.showPreview', uri);
-};
-
-export default (): void => {
-  const extname: string = 'vscode.markdown';
-  const md = vscode.extensions.getExtension<any>(extname);
-
-  if (md === undefined) {
-    console.warn(`Ext not found ${ extname }`);
-    return;
-  }
-
-  if (md.isActive) {
-    return previewFile();
-  }
-
-  md.activate()
-    .then(() => previewFile(),
-    reason => console.warn(reason)
-  );
-};

extensions/commands/theme-icons/index.ts

@@ -29,8 +29,6 @@ const replaceIconPathWithAccent = (iconPath: string, accentName: string): string
   return iconPath.replace('.svg', `.accent.${ accentName }.svg`);
 };
 
-let fixIconsRunning: boolean = false;
-
 /**
  * Fix icons when flag auto-fix is active and current theme is Material
  */
@@ -41,10 +39,6 @@ export default async () => {
     deferred.reject = reject;
   });
 
-  if (fixIconsRunning) {
-    return deferred.resolve();
-  }
-
   // Current theme id set on VSCode ("label" of the package.json)
   const themeLabel = getCurrentThemeID();
 
@@ -53,8 +47,6 @@ export default async () => {
     return deferred.resolve();
   }
 
-  fixIconsRunning = true;
-
   const DEFAULTS = getDefaultValues();
   const CUSTOM_SETTINGS = getCustomSettings();
 
@@ -96,8 +88,6 @@ export default async () => {
       deferred.reject(err);
       return;
     }
-
-    fixIconsRunning = false;
     deferred.resolve();
   });
 

extensions/consts/paths.ts

@@ -7,6 +7,7 @@ export const PATHS: IPaths = {
   ICONS: './icons',
   SRC: './src',
   THEMES: './themes',
+  UI: './ui',
   VSIX_DIR: path.join(__dirname, '../../'),
 };
 

extensions/defaults.json

@@ -19,6 +19,7 @@
   },
   "accentableIcons": [
     "_folder_open",
+    "_folder_root_open",
     "_folder_open_build",
     "_folder_vscode_open",
     "_folder_gulp_open",
@@ -89,7 +90,7 @@
       "alpha": 100,
       "value": null
     },
-    "settings.modifiedItemForeground": {
+    "settings.modifiedItemIndicator": {
       "alpha": 100,
       "value": null
     },
@@ -108,14 +109,10 @@
     "menubar.selectionForeground": {
       "alpha": 100,
       "value": null
-    },
-    "settings.headerForeground": {
-      "alpha": 100,
-      "value": null
     }
   },
   "changelog": {
-    "lastversion": "2.2.0"
+    "lastversion": "2.3.0"
   },
   "icons": {
     "theme": {
@@ -216,6 +213,12 @@
         "_folder_light": {
           "iconPath": "../icons/folder_light.svg"
         },
+        "_folder_root_dark": {
+          "iconPath": "../icons/folder_root_dark.svg"
+        },
+        "_folder_root_light": {
+          "iconPath": "../icons/folder_root_light.svg"
+        },
         "_file_folder": {
           "iconPath": "../icons/file_folder.svg"
         },
@@ -225,6 +228,9 @@
         "_folder_open": {
           "iconPath": "../icons/folder_open.svg"
         },
+        "_folder_root_open": {
+          "iconPath": "../icons/folder_root_open.svg"
+        },
         "_folder_open_build": {
           "iconPath": "../icons/folder_open_build.svg"
         }
@@ -290,6 +296,8 @@
     "_folder_node",
     "_folder_vscode",
     "_folder_dark",
-    "_folder_light"
+    "_folder_light",
+    "_folder_root_dark",
+    "_folder_root_light"
   ]
 }

extensions/helpers/configuration-change.ts

@@ -1,10 +1,10 @@
 import {
   ConfigurationChangeEvent
 } from 'vscode';
-import {isMaterialThemeIcons, isMaterialTheme} from './settings';
+import {isMaterialThemeIcons, isMaterialTheme, getAccent} from './settings';
 import {getCurrentThemeIconsID, getCurrentThemeID} from './vscode';
-
 import handleAutoapply from './handle-autoapply';
+import {accentsSetter} from '../commands';
 
 const onIconsChanged = () => {
   const currentIconsTheme = getCurrentThemeIconsID();
@@ -16,10 +16,24 @@ const onThemeChanged = () => {
   return handleAutoapply(isMaterialTheme(currentTheme));
 };
 
+const onAccentChanged = () => {
+  const currentTheme = getCurrentThemeID();
+  const currentIconsTheme = getCurrentThemeIconsID();
+  const currentAccent = getAccent();
+  return accentsSetter(currentAccent)
+    .then(() =>
+      handleAutoapply(
+        isMaterialTheme(currentTheme) && isMaterialThemeIcons(currentIconsTheme)
+      )
+    );
+};
+
 export const onChangeConfiguration = (event: ConfigurationChangeEvent) => {
   const isColorTheme = event.affectsConfiguration('workbench.colorTheme');
   const isIconTheme = event.affectsConfiguration('workbench.iconTheme');
+  const isAccent = event.affectsConfiguration('materialTheme.accent');
 
   return isIconTheme ? onIconsChanged() :
-          isColorTheme ? onThemeChanged() : null;
+          isColorTheme ? onThemeChanged() :
+            isAccent ? onAccentChanged() : null;
 };

extensions/helpers/handle-autoapply.ts

@@ -2,13 +2,16 @@ import {isAutoApplyEnable, isReloadNotificationEnable} from './settings';
 import {infoMessage} from './messages';
 import {fixIcons} from '../commands';
 
+let fixIconsRunning: boolean = false;
+
 export default async (doubleCheck: boolean) => {
-  if (!doubleCheck) {
+  if (!doubleCheck || fixIconsRunning) {
     return;
   }
 
   if (isAutoApplyEnable()) {
-    return fixIcons();
+    fixIconsRunning = true;
+    return fixIcons().then(() => fixIconsRunning = false);
   }
 
   if (!isReloadNotificationEnable()) {
@@ -18,6 +21,7 @@ export default async (doubleCheck: boolean) => {
   const result = await infoMessage();
 
   if (result.reload) {
-    return fixIcons();
+    fixIconsRunning = true;
+    return fixIcons().then(() => fixIconsRunning = false);
   }
 };

extensions/helpers/settings.ts

@@ -1,7 +1,7 @@
 import * as vscode from 'vscode';
 
 import {IDefaults} from './../interfaces/idefaults';
-import {IThemeCustomProperties} from './../interfaces/itheme-custom-properties';
+import {IThemeCustomSettings} from './../interfaces/itheme-custom-properties';
 import {getPackageJSON} from './fs';
 
 /**
@@ -14,8 +14,8 @@ export function getAccent(): string | undefined {
 /**
  * Gets custom settings
  */
-export function getCustomSettings(): IThemeCustomProperties {
+export function getCustomSettings(): IThemeCustomSettings {
-  return vscode.workspace.getConfiguration().get<IThemeCustomProperties>('materialTheme', {});
+  return vscode.workspace.getConfiguration().get<IThemeCustomSettings>('materialTheme', {});
 }
 
 /**

extensions/interfaces/ipaths.ts

@@ -19,4 +19,8 @@ export interface IPaths {
    * Extension directory
    */
   VSIX_DIR: string;
+  /**
+   * UI directory
+   */
+  UI: string;
 }

extensions/interfaces/itheme-custom-properties.ts

@@ -1,4 +1,4 @@
-export interface IThemeCustomProperties {
+export interface IThemeCustomSettings {
   accent?: string;
   autoApplyIcons?: boolean;
 }

extensions/material.theme.config.ts

@@ -1,6 +1,7 @@
 import {
   workspace as Workspace,
-  commands as Commands
+  commands as Commands,
+  ExtensionContext
 } from 'vscode';
 
 import * as ThemeCommands from './commands';
@@ -9,11 +10,13 @@ import {onChangeConfiguration} from './helpers/configuration-change';
 import {changelogMessage, installationMessage} from './helpers/messages';
 import checkInstallation from './helpers/check-installation';
 import writeChangelog from './helpers/write-changelog';
+import {ReleaseNotesWebview} from '../src/webviews/ReleaseNotes';
 import handleAutoapply from './helpers/handle-autoapply';
 
-export async function activate() {
+export async function activate(context: ExtensionContext) {
   const config = Workspace.getConfiguration();
   const installationType = checkInstallation();
+  const releaseNotesView = new ReleaseNotesWebview(context);
 
   writeChangelog();
 
@@ -34,7 +37,7 @@ export async function activate() {
 
   const shouldShowChangelog = (installationType.isFirstInstall || installationType.isUpdate) && await changelogMessage();
   if (shouldShowChangelog) {
-    ThemeCommands.showChangelog();
+    releaseNotesView.show();
   }
 
   // Registering commands
@@ -44,5 +47,6 @@ export async function activate() {
   });
   Commands.registerCommand('materialTheme.fixIcons', () => ThemeCommands.fixIcons());
   Commands.registerCommand('materialTheme.toggleApplyIcons', () => ThemeCommands.toggleApplyIcons());
-  Commands.registerCommand('materialTheme.showChangelog', () => ThemeCommands.showChangelog());
+
+  Commands.registerCommand('materialTheme.showReleaseNotes', () => releaseNotesView.show());
 }

package.json

@@ -20,7 +20,7 @@
     "url": "https://github.com/equinusocio/vsc-material-theme/issues"
   },
   "engines": {
-    "vscode": "^1.24.0"
+    "vscode": "^1.25.0"
   },
   "standard-version": {
     "scripts": {
@@ -28,17 +28,22 @@
     }
   },
   "scripts": {
-    "build": "rimraf _tmp-output-remote-icons/ && yarn get-remote-icons && yarn build-icons && yarn build-themes && yarn build-icons-accents && yarn build-icons-variants && yarn build-icons-variants-json",
+    "build": "yarn cleanup && yarn get-remote-icons && yarn build-icons && yarn build-themes && yarn build-icons-accents && yarn build-icons-variants && yarn build-icons-variants-json && yarn build-ui",
+    "build-icons": "yarn remove-icons && yarn minimize-icons && gulp build:icons && yarn minimize-json",
     "minimize-icons": "mkdir icons && svgo -f src/icons/svgs -o icons/",
     "minimize-json": "json-minify themes/.material-theme-icons.tmp > themes/Material-Theme-Icons.json && yarn remove-icons-tmp",
     "remove-icons": "rimraf icons && rimraf themes/Material-Theme-Icons.json",
     "remove-icons-tmp": "rimraf themes/.material-theme-icons.tmp",
-    "get-remote-icons": "yarn gulp build:get-remote-icons",
+    "get-remote-icons": "gulp build:get-remote-icons",
-    "build-icons": "yarn remove-icons && yarn minimize-icons && yarn gulp build:icons && yarn minimize-json",
+    "cleanup": "rimraf _tmp-output-remote-icons/ && rimraf ui",
-    "build-icons-accents": "yarn gulp build:icons.accents",
+    "build-icons-accents": "gulp build:icons.accents",
-    "build-icons-variants": "yarn gulp build:icons.variants",
+    "build-icons-variants": "gulp build:icons.variants",
-    "build-icons-variants-json": "yarn gulp build:icons.variants-json",
+    "build-icons-variants-json": "gulp build:icons.variants-json",
-    "build-themes": "yarn gulp build:themes",
+    "build-themes": "gulp build:themes",
+    "build-ui": "yarn copy-ui && yarn build-ui-release-notes",
+    "copy-ui": "gulp build:copy-ui",
+    "build-ui-release-notes": "browserify src/webviews/ui/release-notes/index.js > ui/release-notes.js",
+    "build-ui-only": "yarn cleanup && yarn build-ts && yarn build-ui",
     "build-ts": "tsc -p ./tsconfig.json",
     "test": "tslint **.ts",
     "release": "standard-version",
@@ -74,8 +79,8 @@
         "category": "🎨 Material Theme"
       },
       {
-        "command": "materialTheme.showChangelog",
+        "command": "materialTheme.showReleaseNotes",
-        "title": "Show changelog",
+        "title": "Release Notes",
         "category": "🎨 Material Theme"
       }
     ],
@@ -214,16 +219,18 @@
     "@types/gulp": "4.0.5",
     "@types/gulp-if": "0.0.33",
     "@types/gulp-util": "3.0.34",
-    "@types/mustache": "0.8.30",
+    "@types/mustache": "0.8.31",
     "@types/ncp": "2.0.1",
     "@types/rimraf": "2.0.2",
     "@types/run-sequence": "0.0.30",
     "@types/through2": "2.0.33",
     "@types/yamljs": "0.2.30",
-    "@types/yargs": "10.0.1",
+    "@types/yargs": "11.0.0",
-    "babel-core": "6.26.0",
+    "babel-core": "6.26.3",
+    "babel-preset-env": "1.7.0",
     "babel-preset-es2015": "6.24.1",
     "babel-root-import": "4.1.8",
+    "browserify": "16.2.2",
     "cpx": "1.5.0",
     "execa": "0.10.0",
     "gulp": "3.9.1",
@@ -237,12 +244,12 @@
     "mustache": "2.3.0",
     "ncp": "2.0.0",
     "run-sequence": "2.2.1",
-    "standard-version": "4.3.0",
+    "standard-version": "4.4.0",
-    "svgo": "1.0.4",
+    "svgo": "1.0.5",
-    "tslint": "5.9.1",
+    "tslint": "5.10.0",
-    "tslint-xo": "0.7.2",
+    "tslint-xo": "0.8.0",
-    "typescript": "2.8.3",
+    "typescript": "2.9.2",
-    "vscode": "1.1.10",
+    "vscode": "1.1.18",
     "yamljs": "0.3.0",
     "yargs": "11.0.0"
   },

src/icons/partials/fileExtensions.js

@@ -1,4 +1,5 @@
 "fileExtensions": {
+  "cabal": "_file_cabal",
   "cfc": "_file_coldfusion",
   "cfm": "_file_coldfusion",
   "mdx": "_file_mdx",

src/icons/partials/fileFolders.js

@@ -1,3 +1,5 @@
 "file": "_file_dark",
 "folder": "_folder_dark",
 "folderExpanded": "_folder_open",
+"rootFolder": "_folder_root_dark",
+"rootFolderExpanded": "_folder_root_open",

src/icons/partials/folderNames.js

@@ -1,6 +1,7 @@
 "folderNames": {
   "ci": "_folder_ci",
   "test": "_folder_test",
+  "tests": "_folder_test",
   "node_modules": "_folder_node",
   "assets": "_folder_assets",
   "bower_components": "_folder_bower",
@@ -23,6 +24,7 @@
 "folderNamesExpanded": {
   "ci": "_folder_ci_open",
   "test": "_folder_test_open",
+  "tests": "_folder_test_open",
   "node_modules": "_folder_node_open",
   "bower_components": "_folder_bower_open",
   "assets": "_folder_assets_open",

src/icons/partials/light.js

@@ -1,6 +1,8 @@
 "light": {
   "folderExpanded": "_folder_open",
   "folder": "_folder_light",
+  "rootFolder": "_folder_root_light",
+  "rootFolderExpanded": "_folder_root_open",
   "folderNames": {
     "test": "_folder_test",
     "node_modules": "_folder_node",

src/themes/theme-template-color-theme.json

@@ -823,14 +823,14 @@
     "gitDecoration.untrackedResourceForeground": "{{variant.scheme.base.green}}90",
     "gitDecoration.ignoredResourceForeground": "{{variant.scheme.sidebarForeground}}90",
     "peekViewResult.selectionBackground": "{{variant.scheme.sidebarForeground}}70",
-    "settings.modifiedItemForeground": "{{commons.accents.Teal}}",
+    "breadcrumb.background": "{{variant.scheme.background}}",
     "breadcrumb.foreground": "{{variant.scheme.sidebarForeground}}",
     "breadcrumb.focusForeground": "{{variant.scheme.foreground}}",
     "breadcrumb.activeSelectionForeground": "{{commons.accents.Teal}}",
     "breadcrumbPicker.background": "{{variant.scheme.backgroundAlt}}",
     "menu.background": "{{variant.scheme.background}}",
     "menu.foreground": "{{variant.scheme.foreground}}",
-    "menu.selectionBackground": "{{variant.scheme.inactiveSelectionBackground}}",
+    "menu.selectionBackground": "{{variant.scheme.lineHighlight}}50",
     "menu.selectionForeground": "{{commons.accents.Teal}}",
     "menu.selectionBorder": "{{variant.scheme.inactiveSelectionBackground}}",
     "menubar.selectionBackground": "{{variant.scheme.inactiveSelectionBackground}}",
@@ -842,6 +842,9 @@
     "settings.numberInputBackground": "{{variant.scheme.backgroundAlt}}",
     "settings.textInputForeground": "{{variant.scheme.foreground}}",
     "settings.textInputBackground": "{{variant.scheme.backgroundAlt}}",
-    "settings.headerForeground": "{{commons.accents.Teal}}"
+    "settings.headerForeground": "{{commons.scheme.foreground}}",
+    "settings.modifiedItemIndicator": "{{commons.accents.Teal}}",
+    "settings.checkboxBackground": "{{variant.scheme.backgroundAlt}}",
+    "settings.checkboxForeground": "{{variant.scheme.foreground}}"
   }
 }

src/webviews/ReleaseNotes.ts

@@ -0,0 +1,33 @@
+import {WebviewController} from './Webview';
+import {
+  ExtensionContext
+} from 'vscode';
+import {ReleaseNotesBootstrap} from './interfaces';
+
+export class ReleaseNotesWebview extends WebviewController<ReleaseNotesBootstrap> {
+  constructor(context: ExtensionContext) {
+    super(context);
+  }
+
+  get filename(): string {
+    return 'release-notes.html';
+  }
+
+  get id(): string {
+    return 'materialTheme.releaseNotes';
+  }
+
+  get title(): string {
+    return 'Material Theme Release Notes';
+  }
+
+  /**
+   * This will be called by the WebviewController when init the view
+   * passing as `window.bootstrap` to the view.
+   */
+  getBootstrap() {
+    return {
+      something: 'something'
+    } as ReleaseNotesBootstrap;
+  }
+}

src/webviews/Settings.ts

@@ -0,0 +1,50 @@
+import {WebviewController} from './Webview';
+import {
+  workspace as Workspace,
+
+  ExtensionContext
+} from 'vscode';
+import {SettingsBootstrap} from './interfaces';
+import {getCustomSettings} from '../../extensions/helpers/settings';
+import {getDefaultValues} from '../../extensions/helpers/fs';
+
+export class SettingsWebview extends WebviewController<SettingsBootstrap> {
+  constructor(context: ExtensionContext) {
+    super(context);
+  }
+
+  get filename(): string {
+    return 'settings.html';
+  }
+
+  get id(): string {
+    return 'materialTheme.settings';
+  }
+
+  get title(): string {
+    return 'Material Theme Settings';
+  }
+
+  private getAvailableScopes(): ['user' | 'workspace', string][] {
+    const scopes: ['user' | 'workspace', string][] = [['user', 'User']];
+    return scopes
+      .concat(
+        Workspace.workspaceFolders !== undefined && Workspace.workspaceFolders.length ?
+          ['workspace', 'Workspace'] :
+          []
+        );
+  }
+
+  /**
+   * This will be called by the WebviewController when init the view
+   * passing as `window.bootstrap` to the view.
+   */
+  getBootstrap() {
+    return {
+      config: getCustomSettings(),
+      defaults: getDefaultValues(),
+      scope: 'user',
+      scopes: this.getAvailableScopes()
+    } as SettingsBootstrap;
+  }
+}

src/webviews/Webview.ts

@@ -0,0 +1,157 @@
+import * as path from 'path';
+
+import {
+  workspace as Workspace,
+
+  Disposable,
+  ExtensionContext,
+  WebviewPanel,
+  ViewColumn,
+  window,
+  WebviewPanelOnDidChangeViewStateEvent,
+  Uri
+} from 'vscode';
+
+import {getCustomSettings} from '../../extensions/helpers/settings';
+import {Invalidates, Message, SettingsChangedMessage} from './interfaces';
+
+export abstract class WebviewController<TBootstrap> extends Disposable {
+  private panel: WebviewPanel | undefined;
+  private disposablePanel: Disposable | undefined;
+  private invalidateOnVisible: Invalidates;
+  private context: ExtensionContext;
+
+  constructor(context: ExtensionContext) {
+    // Applying dispose callback for our disposable function
+    super(() => this.dispose());
+
+    this.context = context;
+  }
+
+  abstract get filename(): string;
+  abstract get id(): string;
+  abstract get title(): string;
+
+  abstract getBootstrap(): TBootstrap;
+
+  dispose() {
+    if (this.disposablePanel) {
+      this.disposablePanel.dispose();
+    }
+  }
+
+  private async getHtml(): Promise<string> {
+    const doc = await Workspace
+      .openTextDocument(this.context.asAbsolutePath(path.join('ui', this.filename)));
+    return doc.getText();
+  }
+
+  private postMessage(message: Message, invalidates: Invalidates = 'all') {
+    if (this.panel === undefined) {
+      return false;
+    }
+
+    const result = this.panel.webview.postMessage(message);
+
+    // If post was ok, update invalidateOnVisible if different than default
+    if (!result && this.invalidateOnVisible !== 'all') {
+      this.invalidateOnVisible = invalidates;
+    }
+
+    return result;
+  }
+
+  private postUpdatedConfiguration() {
+    // Post full raw configuration
+    return this.postMessage({
+      type: 'settingsChanged',
+      config: getCustomSettings()
+    } as SettingsChangedMessage, 'config');
+  }
+
+  private onPanelDisposed() {
+    if (this.disposablePanel) {
+      this.disposablePanel.dispose();
+    }
+
+    this.panel = undefined;
+  }
+
+  private onViewStateChanged(event: WebviewPanelOnDidChangeViewStateEvent) {
+    console.log('WebviewEditor.onViewStateChanged', event.webviewPanel.visible);
+
+    if (!this.invalidateOnVisible || !event.webviewPanel.visible) {
+      return;
+    }
+
+    // Update the view since it can be outdated
+    const invalidContext = this.invalidateOnVisible;
+    this.invalidateOnVisible = undefined;
+
+    switch (invalidContext) {
+      case 'config':
+        // Post the new configuration to the view
+        return this.postUpdatedConfiguration();
+      default:
+        return this.show();
+    }
+  }
+
+  protected async onMessageReceived(event: Message) {
+    if (event === null) {
+      return;
+    }
+
+    console.log(`WebviewEditor.onMessageReceived: type=${event.type}, data=${JSON.stringify(event)}`);
+
+    switch (event.type) {
+      case 'saveSettings':
+        // TODO: update settings
+        return;
+
+      default:
+        return;
+    }
+  }
+
+  async show(): Promise<void> {
+    const html = await this.getHtml();
+
+    const rootPath = Uri
+      .file(this.context.asAbsolutePath('.'))
+      .with({scheme: 'vscode-resource'}).toString();
+
+    // Replace placeholders in html content for assets and adding configurations as `window.bootstrap`
+    const fullHtml = html
+      .replace(/{{root}}/g, rootPath)
+      .replace('\'{{bootstrap}}\'', JSON.stringify(this.getBootstrap()));
+
+    // If panel already opened just reveal
+    if (this.panel !== undefined) {
+      this.panel.webview.html = fullHtml;
+      return this.panel.reveal(ViewColumn.Active);
+    }
+
+    this.panel = window.createWebviewPanel(
+      this.id,
+      this.title,
+      ViewColumn.Active,
+      {
+        retainContextWhenHidden: true,
+        enableFindWidget: true,
+        enableCommandUris: true,
+        enableScripts: true
+      }
+    );
+
+    // Applying listeners
+    this.disposablePanel = Disposable.from(
+      this.panel,
+      this.panel.onDidDispose(this.onPanelDisposed, this),
+      this.panel.onDidChangeViewState(this.onViewStateChanged, this),
+      this.panel.webview.onDidReceiveMessage(this.onMessageReceived, this)
+    );
+
+    this.panel.webview.html = fullHtml;
+  }
+}

src/webviews/interfaces.ts

@@ -0,0 +1,38 @@
+import {IThemeCustomSettings} from '../../extensions/interfaces/itheme-custom-properties';
+import {IDefaults} from '../../extensions/interfaces/idefaults';
+
+export interface SettingsChangedMessage {
+  type: 'settingsChanged';
+  config: IThemeCustomSettings;
+}
+
+export interface SaveSettingsMessage {
+  type: 'saveSettings';
+  changes: {
+      [key: string]: any;
+  };
+  removes: string[];
+  scope: 'user' | 'workspace';
+  uri: string;
+}
+
+export type Message = SaveSettingsMessage | SettingsChangedMessage;
+export type Invalidates = 'all' | 'config' | undefined;
+
+export interface Bootstrap {
+  config: IThemeCustomSettings;
+}
+
+export interface SettingsBootstrap extends Bootstrap {
+  scope: 'user' | 'workspace';
+  scopes: ['user' | 'workspace', string][];
+  defaults: IDefaults;
+}
+
+export interface ReleaseNotesBootstrap extends Bootstrap {
+  something: 'something';
+}
+
+declare global {
+  interface Window { bootstrap: Bootstrap | SettingsBootstrap; }
+}

src/webviews/ui/release-notes/index.ts

@@ -0,0 +1 @@
+console.log('ReleaseNotes');

src/webviews/ui/release-notes/release-notes.html

@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>Material Theme Release Notes</title>
+
+  <link rel="stylesheet" href="{{root}}/ui/release-notes.css">
+</head>
+<body>
+  <main class="Container">
+
+    <section class="Release">
+      <header class="Release__Header">
+        <span class="Release__Number">2.3.0</span>
+        <h2 class="Release__Title">August 2018</h2>
+      </header>
+      <ul class="Release-List">
+        <li data-type="breaking">New file icons auto applying and notifications behaviors</li>
+        <li data-type="fixed">Many UI fixes and small improvements</li>
+        <li data-type="fixed">General colors and contrast</li>
+        <li data-type="fixed">Fix color contrast for hovered custom menu items (Win/Lin)</li>
+        <li data-type="new">New file icons</li>
+        <li data-type="new">Support for custom menus (Windows/Linux)</li>
+        <li data-type="new">Support for the editor breadcrumb</li>
+        <li data-type="new">Support for editor new settings view</li>
+        <li data-type="new">Add new Release Notes command</li>
+        <li data-type="new">Add icons to root folders</li>
+      </ul>
+    </section>
+
+  </main>
+  <script type="text/javascript">
+    window.bootstrap = '{{bootstrap}}';
+  </script>
+  <script type="text/javascript" src="{{root}}/ui/release-notes.js"></script>
+</body>
+</html>

src/webviews/ui/release-notes/style.css

@@ -0,0 +1,137 @@
+body {
+  font-size: 100%;
+  font-family: sans-serif;
+  margin: 0;
+}
+
+
+.Container {
+  max-width: 900px;
+  min-width: 500px;
+  width: 100%;
+  display: block;
+  margin: 0 auto;
+  padding: 0 32px;
+  box-sizing: border-box;
+}
+
+
+.Release {
+  padding: 40px 0;
+  position: relative;
+}
+
+
+.Release:first-of-type::before {
+    background-image: linear-gradient(
+      to bottom,
+      rgba(255,255,255,0),
+      rgba(255,255,255,0.1)
+      50px
+    );
+}
+
+.Release:last-of-type::before,
+.Release:only-of-type::before {
+    background-image: linear-gradient(
+      to bottom,
+      rgba(255,255,255,0.1),
+      rgba(255,255,255,0)
+    );
+}
+
+.Release::before {
+  content: "";
+  background-image: linear-gradient(to bottom, rgba(255,255,255,0.1), rgba(255,255,255,0.1));
+  width: 3px;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: calc(65px / 2);
+  z-index: -1;
+}
+
+
+.Release__Header {
+  display: flex;
+  align-items: center;
+}
+
+
+.Release__Number {
+  background-color: rgba(0, 0, 0, 0.5);
+  color: #FFF;
+  font-weight: 700;
+  text-align: center;
+  padding: 4px;
+  width: 65px;
+  margin-right: 16px;
+  font-size: 0.8rem;
+  line-height: 1.5;
+  border-radius: 4px;
+  cursor: default;
+  -webkit-user-select: none;
+  user-select: none;
+  box-sizing: border-box;
+}
+
+
+.Release__Title {
+  margin-top: 0;
+  line-height: 1;
+  margin-bottom: 0;
+  font-weight: 400;
+  cursor: default;
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+
+.Release-List {
+  list-style: none;
+  padding-left: 80px;
+}
+
+.Release-List li {
+  line-height: 1.5;
+  display: flex;
+  font-size: 14px;
+  margin: 8px 0;
+  -webkit-user-select: none;
+  user-select: none;
+  cursor: default;
+  white
+}
+
+.Release-List li::before {
+  content: attr(data-type);
+  display: inline-block;
+  font-size: 10px;
+  line-height: 1;
+  box-sizing: border-box;
+  width: 64px;
+  height: 16px;
+  border-radius: 3px;
+  margin-right: 8px;
+  padding: 4px 5px;
+  text-transform: uppercase;
+  text-align: center;
+  color: #FFF;
+}
+
+
+[data-type="fixed"]::before {
+  background-color: #4242f4;
+}
+
+[data-type="improved"]::before {
+  background-color: #6f42c1;
+}
+
+[data-type="new"]::before {
+  background-color: #05a87a;
+}
+
+[data-type="breaking"]::before {
+  background-color: #ba0935;
+}

src/webviews/ui/settings/index.ts

@@ -0,0 +1,20 @@
+import {SettingsBootstrap} from '../../interfaces';
+import accentsSelector from './lib/accents-selector';
+
+const run = () => {
+  bind();
+
+  const {config, defaults} = window.bootstrap as SettingsBootstrap;
+  accentsSelector('[data-setting="accentSelector"]', defaults.accents, config.accent);
+
+  console.log(defaults);
+  console.log(config);
+};
+
+const bind = () => {
+  document.querySelector('#fixIconsCTA').addEventListener('click', () => {
+    console.log('Test click');
+  });
+};
+
+run();

src/webviews/ui/settings/lib/accents-selector.ts

@@ -0,0 +1,26 @@
+import {IAccents} from '../../../../../extensions/interfaces/idefaults';
+
+const templateSingleAccent = (accentName: string, accentColor: string): string => {
+  const dashAccentName = accentName.toLowerCase().replace(/ /gi, '-');
+
+  return `
+    <label for="${dashAccentName}" data-color="${accentColor}">${accentName}</label>
+    <input type="radio" name="accents" id="${dashAccentName}" value="${dashAccentName}" />
+  `;
+};
+
+export default (containerSelector: string, accentsObject: IAccents, currentAccent: string) => {
+  const container = document.querySelector(containerSelector);
+
+  for (const accentKey of Object.keys(accentsObject)) {
+    const el = document.createElement('div');
+    el.innerHTML = templateSingleAccent(accentKey, accentsObject[accentKey]);
+
+    if (accentKey === currentAccent) {
+      el.setAttribute('selected', 'true');
+      el.querySelector('input').setAttribute('checked', 'checked');
+    }
+
+    container.appendChild(el);
+  }
+};

tsconfig.json

@@ -1,7 +1,8 @@
 {
   "compilerOptions": {
     "lib": [
-      "es6"
+      "es6",
+      "dom"
     ],
     "module": "commonjs",
     "allowUnreachableCode": false,

tslint.json

@@ -2,6 +2,7 @@
 	"extends": "tslint-xo",
 	"rules": {
 		"comment-format": false,
-		"indent": [true, "spaces"]
+		"indent": [true, "spaces"],
+		"no-inner-html": false
 	}
 }