Expose theme name in webviews (microsoft#98128)

mjbvz · web-flow · commit 210167b95ab6 · 2020-05-20T14:32:27.000-07:00
* Expose theme name in webviews Fixes microsoft#97663 Adds a data attribute to webviews with the theme name. This is lets extensions write theme specific css for webviews * Change name to `vscode-theme-name` and add `vscode-theme-kind` vscode-theme-kind is generic kind: light, dark, high contrast. We already expose this as a classname but for conistency also want to have it as an attribute
diff --git a/src/vs/editor/standalone/test/browser/standaloneLanguages.test.ts b/src/vs/editor/standalone/test/browser/standaloneLanguages.test.ts
@@ -42,6 +42,8 @@ suite('TokenizationSupport2Adapter', () => {
 		}
 		public getColorTheme(): IStandaloneTheme {
 			return {
+				label: 'mock',
+
 				tokenTheme: new MockTokenTheme(),
 
 				themeName: LIGHT,
diff --git a/src/vs/platform/theme/common/themeService.ts b/src/vs/platform/theme/common/themeService.ts
@@ -87,8 +87,11 @@ export interface ITokenStyle {
 }
 
 export interface IColorTheme {
+
 	readonly type: ThemeType;
 
+	readonly label: string;
+
 	/**
 	 * Resolves the color of the given color identifier. If the theme does not
 	 * specify the color, the default color is returned unless <code>useDefault</code> is set to false.
diff --git a/src/vs/platform/theme/test/common/testThemeService.ts b/src/vs/platform/theme/test/common/testThemeService.ts
@@ -9,6 +9,8 @@ import { Color } from 'vs/base/common/color';
 
 export class TestColorTheme implements IColorTheme {
 
+	public readonly label = 'test';
+
 	constructor(private colors: { [id: string]: string; } = {}, public type = DARK) {
 	}
 
diff --git a/src/vs/workbench/contrib/webview/browser/baseWebviewElement.ts b/src/vs/workbench/contrib/webview/browser/baseWebviewElement.ts
@@ -270,8 +270,8 @@ export abstract class BaseWebview<T extends HTMLElement> extends Disposable {
 	}
 
 	protected style(): void {
-		const { styles, activeTheme } = this.webviewThemeDataProvider.getWebviewThemeData();
-		this._send('styles', { styles, activeTheme });
+		const { styles, activeTheme, themeLabel } = this.webviewThemeDataProvider.getWebviewThemeData();
+		this._send('styles', { styles, activeTheme, themeName: themeLabel });
 	}
 
 	protected handleFocusChange(isFocused: boolean): void {
diff --git a/src/vs/workbench/contrib/webview/browser/pre/main.js b/src/vs/workbench/contrib/webview/browser/pre/main.js
@@ -179,7 +179,7 @@
 		let pendingMessages = [];
 
 		const initData = {
-			initialScrollProgress: undefined
+			initialScrollProgress: undefined,
 		};
 
 
@@ -195,6 +195,9 @@
 			if (body) {
 				body.classList.remove('vscode-light', 'vscode-dark', 'vscode-high-contrast');
 				body.classList.add(initData.activeTheme);
+
+				body.dataset.vscodeThemeKind = initData.activeTheme;
+				body.dataset.vscodeThemeName = initData.themeName || '';
 			}
 
 			if (initData.styles) {
@@ -383,6 +386,7 @@
 			host.onMessage('styles', (_event, data) => {
 				initData.styles = data.styles;
 				initData.activeTheme = data.activeTheme;
+				initData.themeName = data.themeName;
 
 				const target = getActiveFrame();
 				if (!target) {
diff --git a/src/vs/workbench/contrib/webview/common/themeing.ts b/src/vs/workbench/contrib/webview/common/themeing.ts
@@ -13,6 +13,7 @@ import { Emitter } from 'vs/base/common/event';
 
 interface WebviewThemeData {
 	readonly activeTheme: string;
+	readonly themeLabel: string;
 	readonly styles: { readonly [key: string]: string | number; };
 }
 
@@ -73,7 +74,7 @@ export class WebviewThemeDataProvider extends Disposable {
 		};
 
 		const activeTheme = ApiThemeClassName.fromTheme(theme);
-		return { styles, activeTheme };
+		return { styles, activeTheme, themeLabel: theme.label, };
 	}
 
 	private reset() {

Original file line number	Diff line number	Diff line change
`@@ -42,6 +42,8 @@ suite('TokenizationSupport2Adapter', () => {`
`42`	`42`	`}`
`43`	`43`	`public getColorTheme(): IStandaloneTheme {`
`44`	`44`	`return {`
	`45`	`+ label: 'mock',`
	`46`	`+`
`45`	`47`	`tokenTheme: new MockTokenTheme(),`
`46`	`48`
`47`	`49`	`themeName: LIGHT,`
Original file line number	Diff line number	Diff line change
`@@ -9,6 +9,8 @@ import { Color } from 'vs/base/common/color';`
`9`	`9`
`10`	`10`	`export class TestColorTheme implements IColorTheme {`
`11`	`11`
	`12`	`+ public readonly label = 'test';`
	`13`	`+`
`12`	`14`	`constructor(private colors: { [id: string]: string; } = {}, public type = DARK) {`
`13`	`15`	`}`
`14`	`16`
Original file line number	Diff line number	Diff line change
`@@ -270,8 +270,8 @@ export abstract class BaseWebview<T extends HTMLElement> extends Disposable {`
`270`	`270`	`}`
`271`	`271`
`272`	`272`	`protected style(): void {`
`273`		`- const { styles, activeTheme } = this.webviewThemeDataProvider.getWebviewThemeData();`
`274`		`- this._send('styles', { styles, activeTheme });`
	`273`	`+ const { styles, activeTheme, themeLabel } = this.webviewThemeDataProvider.getWebviewThemeData();`
	`274`	`+ this._send('styles', { styles, activeTheme, themeName: themeLabel });`
`275`	`275`	`}`
`276`	`276`
`277`	`277`	`protected handleFocusChange(isFocused: boolean): void {`
Original file line number	Diff line number	Diff line change
`@@ -13,6 +13,7 @@ import { Emitter } from 'vs/base/common/event';`
`13`	`13`
`14`	`14`	`interface WebviewThemeData {`
`15`	`15`	`readonly activeTheme: string;`
	`16`	`+ readonly themeLabel: string;`
`16`	`17`	`readonly styles: { readonly [key: string]: string \| number; };`
`17`	`18`	`}`
`18`	`19`
`@@ -73,7 +74,7 @@ export class WebviewThemeDataProvider extends Disposable {`
`73`	`74`	`};`
`74`	`75`
`75`	`76`	`const activeTheme = ApiThemeClassName.fromTheme(theme);`
`76`		`- return { styles, activeTheme };`
	`77`	`+ return { styles, activeTheme, themeLabel: theme.label, };`
`77`	`78`	`}`
`78`	`79`
`79`	`80`	`private reset() {`