new theming API fixes (fixes #22361)

src/vs/platform/theme/common/themingRegistry.ts

@@ -9,7 +9,6 @@ import { IJSONSchema } from 'vs/base/common/jsonSchema';
 import { Color } from 'vs/base/common/color';
 import { ITheme } from 'vs/platform/theme/common/themeService';
 
-
 import nls = require('vs/nls');
 
 export const Extensions = {
@@ -27,12 +26,13 @@ export interface DerivedColor {
 }
 
 export interface ColorDefaults {
-	light: ColorDescription;
-	dark: ColorDescription;
-	hc: ColorDescription;
+	light: ColorValue;
+	dark: ColorValue;
+	hc: ColorValue;
 }
 
-export type ColorDescription = string | IColorContribution | DerivedColor;
+// either a hex color literal (#RRGGBB or #RRBBGGAA) or a refence to other color or a derived color
+export type ColorValue = string | IColorContribution | DerivedColor;
 
 
 export interface IThemingRegistry {
@@ -59,9 +59,9 @@ export interface IThemingRegistry {
 
 }
 
-export function darken(colorDesc: ColorDescription, factor: number): DerivedColor {
+export function darken(colorValue: ColorValue, factor: number): DerivedColor {
 	return (theme) => {
-		let color = resolveDescription(theme, colorDesc);
+		let color = resolveColorValue(colorValue, theme);
 		if (color) {
 			return color.darken(factor);
 		}
@@ -78,7 +78,7 @@ class ThemingRegistry implements IThemingRegistry {
 		this.colorsById = {};
 	}
 
-	public registerColor(id: string, description: string, defaults: ColorDefaults) {
+	public registerColor(id: string, description: string, defaults: ColorDefaults): IColorContribution {
 		let colorContribution: IColorContribution = { id, description, defaults };
 		this.colorsById[id] = colorContribution;
 		this.colorSchema.properties[id] = { type: 'string', description };
@@ -99,30 +99,22 @@ class ThemingRegistry implements IThemingRegistry {
 
 }
 
-function resolveDescription(theme: ITheme, colorDesc: ColorDescription): Color {
-	if (typeof colorDesc === 'string') {
-		return Color.fromHex(colorDesc);
-	} else if (typeof colorDesc === 'object' && colorDesc !== null) {
-		let defaults = colorDesc.defaults;
-		if (!defaults) {
-			return null;
-		}
-		if (theme.isDarkTheme()) {
-			return resolveDescription(theme, defaults.dark);
-		} else if (theme.isLightTheme()) {
-			return resolveDescription(theme, defaults.light);
-		} else {
-			return resolveDescription(theme, defaults.hc);
-		}
-	} else if (typeof colorDesc === 'function') {
-		return colorDesc(theme);
-	} else {
+/**
+ * @param colorValue Resolve a color value in the context of a theme
+ */
+export function resolveColorValue(colorValue: ColorValue, theme: ITheme): Color {
+	if (colorValue === null) {
 		return null;
+	} else if (typeof colorValue === 'string') {
+		return Color.fromHex(colorValue);
+	} else if (typeof colorValue === 'object' && colorValue.id) {
+		return theme.getColor(colorValue.id);
+	} else if (typeof colorValue === 'function') {
+		return colorValue(theme);
 	}
+	return null;
 }
 
 
-
-
 const themingRegistry = new ThemingRegistry();
 platform.Registry.add(Extensions.ThemingContribution, themingRegistry);
\ No newline at end of file

src/vs/workbench/services/themes/electron-browser/colorThemeData.ts

@@ -11,11 +11,16 @@ import { convertSettings } from 'vs/workbench/services/themes/electron-browser/s
 import { TPromise } from 'vs/base/common/winjs.base';
 import { getBaseThemeId, getSyntaxThemeId, isDarkTheme, isLightTheme } from 'vs/platform/theme/common/themes';
 import nls = require('vs/nls');
-import { IThemeService } from 'vs/platform/theme/common/themeService';
+import * as types from 'vs/base/common/types';
 
 import * as plist from 'fast-plist';
 import pfs = require('vs/base/node/pfs');
 
+import { Extensions, IThemingRegistry, resolveColorValue } from 'vs/platform/theme/common/themingRegistry';
+import { Registry } from 'vs/platform/platform';
+
+let themingRegistry = <IThemingRegistry>Registry.as(Extensions.ThemingContribution);
+
 export class ColorThemeData implements IColorTheme {
 
 	id: string;
@@ -26,27 +31,39 @@ export class ColorThemeData implements IColorTheme {
 	tokenColors?: ITokenColorizationRule[];
 	isLoaded: boolean;
 	path?: string;
-	styleSheetContent?: string;
 	extensionData: ExtensionData;
 	colorMap?: IColorMap;
 
 	public getColor(colorId: string): Color {
-		if (this.colorMap) {
-			return this.colorMap[colorId];
+		if (!this.colorMap) {
+			// not yet initialized
+			return null;
+		}
+
+		let color = this.colorMap[colorId];
+		if (types.isUndefined(color)) {
+			color = null;
+			let colorDesc = themingRegistry.getColor(colorId);
+			if (colorDesc && colorDesc.defaults) {
+				let defaults = colorDesc.defaults;
+				if (this.isLightTheme()) {
+					color = resolveColorValue(defaults.light, this);
+				} else if (this.isDarkTheme()) {
+					color = resolveColorValue(defaults.dark, this);
+				} else {
+					color = resolveColorValue(defaults.hc, this);
+				}
+			}
+			this.colorMap[colorId] = color;
 		}
-		return null;
+		return color;
 	}
 
-	public ensureLoaded(themeService: IThemeService): TPromise<void> {
+	public ensureLoaded(): TPromise<void> {
 		if (!this.isLoaded) {
 			let tokenColors = [];
 			let colorMap = {};
 			return _loadThemeDocument(this.getBaseThemeId(), this.path, tokenColors, colorMap).then(_ => {
-				let cssRules = [];
-				themeService.getThemingParticipants().forEach(p => {
-					p(this, cssRules);
-				});
-				this.styleSheetContent = cssRules.join('\n');
 				this.tokenColors = tokenColors;
 				this.colorMap = colorMap;
 				this.isLoaded = true;

src/vs/workbench/services/themes/electron-browser/stylesContributions.ts

@@ -86,7 +86,7 @@ addSettingMapping('hoverHighlight', editorHoverHighlight);
 
 
 const editorActiveLinkForeground = 'editorActiveLinkForeground';
-themingRegistry.registerColor(editorActiveLinkForeground, nls.localize('activeLinkForeground', 'Color of active links'));
+themingRegistry.registerColor(editorActiveLinkForeground, nls.localize('activeLinkForeground', 'Color of active links'), { dark: '#4E94CE', light: '#0000FF', hc: '#00FFFF' });
 addSettingMapping('hoverHighlight', editorHoverHighlight);
 
 const editorLinkForeground = 'editorLinkForeground';

src/vs/workbench/services/themes/electron-browser/themeService.ts

@@ -27,7 +27,6 @@ import { IEnvironmentService } from 'vs/platform/environment/common/environment'
 import { IMessageService } from 'vs/platform/message/common/message';
 import Severity from 'vs/base/common/severity';
 import URI from 'vs/base/common/uri';
-import { Extensions } from 'vs/platform/theme/common/themingRegistry';
 import { ColorThemeData } from './colorThemeData';
 import { ITheme, IThemingParticipant } from 'vs/platform/theme/common/themeService';
 import { registerParticipants } from 'vs/workbench/services/themes/electron-browser/stylesContributions';
@@ -41,6 +40,7 @@ import colorThemeSchema = require('vs/workbench/services/themes/common/colorThem
 import fileIconThemeSchema = require('vs/workbench/services/themes/common/fileIconThemeSchema');
 import { IDisposable } from 'vs/base/common/lifecycle';
 
+
 // implementation
 
 const DEFAULT_THEME_ID = 'vs-dark vscode-theme-defaults-themes-dark_plus-json';
@@ -417,8 +417,10 @@ export class WorkbenchThemeService implements IWorkbenchThemeService {
 
 		return this.findThemeData(themeId, DEFAULT_THEME_ID).then(themeData => {
 			if (themeData) {
-				return themeData.ensureLoaded(this).then(_ => {
-					_applyRules(themeData.styleSheetContent, colorThemeRulesClassName);
+				return themeData.ensureLoaded().then(_ => {
+					let cssRules = [];
+					this.getThemingParticipants().forEach(p => p(themeData, cssRules));
+					_applyRules(cssRules.join('\n'), colorThemeRulesClassName);
 					return onApply(themeData);
 				}, error => {
 					return TPromise.wrapError(nls.localize('error.cannotloadtheme', "Unable to load {0}: {1}", themeData.path, error.message));