editor token inspect: resolve scopes like the sem highlight code

src/vs/workbench/contrib/codeEditor/browser/inspectEditorTokens/inspectEditorTokens.ts

@@ -26,7 +26,7 @@ import { findMatchingThemeRule } from 'vs/workbench/services/textMate/common/TMH
 import { ITextMateService, IGrammar, IToken, StackElement } from 'vs/workbench/services/textMate/common/textMateService';
 import { IWorkbenchThemeService } from 'vs/workbench/services/themes/common/workbenchThemeService';
 import { CancellationTokenSource } from 'vs/base/common/cancellation';
-import { ColorThemeData, TokenStyleDefinitions, TokenStyleDefinition } from 'vs/workbench/services/themes/common/colorThemeData';
+import { ColorThemeData, TokenStyleDefinitions, TokenStyleDefinition, TextMateThemingRuleDefinitions } from 'vs/workbench/services/themes/common/colorThemeData';
 import { TokenStylingRule, TokenStyleData, TokenStyle } from 'vs/platform/theme/common/tokenClassificationRegistry';
 import { IConfigurationService } from 'vs/platform/configuration/common/configuration';
 
@@ -303,7 +303,7 @@ class InspectEditorTokensWidget extends Disposable implements IContentWidget {
 				const allDefValues = []; // remember the order
 				// first collect to detect when the same rule is used fro multiple properties
 				for (let property of properties) {
-					if (semanticTokenInfo.metadata[property]) {
+					if (semanticTokenInfo.metadata[property] !== undefined) {
 						const definition = semanticTokenInfo.definitions[property];
 						const defValue = this._renderTokenStyleDefinition(definition, property);
 						let properties = propertiesByDefValue[defValue];
@@ -532,11 +532,11 @@ class InspectEditorTokensWidget extends Disposable implements IContentWidget {
 
 		const isTokenStylingRule = (d: any): d is TokenStylingRule => !!d.value;
 		if (Array.isArray(definition)) {
-			for (const d of definition) {
-				const matchingRule = findMatchingThemeRule(theme, d, false);
-				if (matchingRule) {
-					return `${escape(d.join(' '))}<br><code class="tiw-theme-selector">${matchingRule.rawSelector}\n${JSON.stringify(matchingRule.settings, null, '\t')}</code>`;
-				}
+			const scopesDefinition: TextMateThemingRuleDefinitions = {};
+			theme.resolveScopes(definition, scopesDefinition);
+			const matchingRule = scopesDefinition[property];
+			if (matchingRule && scopesDefinition.scope) {
+				return `${escape(scopesDefinition.scope.join(' '))}<br><code class="tiw-theme-selector">${matchingRule.scope}\n${JSON.stringify(matchingRule.settings, null, '\t')}</code>`;
 			}
 			return '';
 		} else if (isTokenStylingRule(definition)) {

src/vs/workbench/services/themes/common/colorThemeData.ts

@@ -44,6 +44,8 @@ const tokenGroupToScopesMap = {
 export type TokenStyleDefinition = TokenStylingRule | ProbeScope[] | TokenStyleValue;
 export type TokenStyleDefinitions = { [P in keyof TokenStyleData]?: TokenStyleDefinition | undefined };
 
+export type TextMateThemingRuleDefinitions = { [P in keyof TokenStyleData]?: ITextMateThemingRule | undefined; } & { scope?: ProbeScope; };
+
 const PERSISTED_THEME_STORAGE_KEY = 'colorThemeData';
 
 export class ColorThemeData implements IWorkbenchColorTheme {
@@ -271,7 +273,8 @@ export class ColorThemeData implements IWorkbenchColorTheme {
 		return colorRegistry.resolveDefaultColor(colorId, this);
 	}
 
-	public resolveScopes(scopes: ProbeScope[]): TokenStyle | undefined {
+
+	public resolveScopes(scopes: ProbeScope[], definitions?: TextMateThemingRuleDefinitions): TokenStyle | undefined {
 
 		if (!this.themeTokenScopeMatchers) {
 			this.themeTokenScopeMatchers = this.themeTokenColors.map(getScopeMatcher);
@@ -285,19 +288,24 @@ export class ColorThemeData implements IWorkbenchColorTheme {
 			let fontStyle: string | undefined = undefined;
 			let foregroundScore = -1;
 			let fontStyleScore = -1;
+			let fontStyleThemingRule: ITextMateThemingRule | undefined = undefined;
+			let foregroundThemingRule: ITextMateThemingRule | undefined = undefined;
 
-			function findTokenStyleForScopeInScopes(scopeMatchers: Matcher<ProbeScope>[], tokenColors: ITextMateThemingRule[]) {
+			function findTokenStyleForScopeInScopes(scopeMatchers: Matcher<ProbeScope>[], themingRules: ITextMateThemingRule[]) {
 				for (let i = 0; i < scopeMatchers.length; i++) {
 					const score = scopeMatchers[i](scope);
 					if (score >= 0) {
-						const settings = tokenColors[i].settings;
+						const themingRule = themingRules[i];
+						const settings = themingRules[i].settings;
 						if (score >= foregroundScore && settings.foreground) {
 							foreground = settings.foreground;
 							foregroundScore = score;
+							foregroundThemingRule = themingRule;
 						}
 						if (score >= fontStyleScore && types.isString(settings.fontStyle)) {
 							fontStyle = settings.fontStyle;
 							fontStyleScore = score;
+							fontStyleThemingRule = themingRule;
 						}
 					}
 				}
@@ -305,6 +313,12 @@ export class ColorThemeData implements IWorkbenchColorTheme {
 			findTokenStyleForScopeInScopes(this.themeTokenScopeMatchers, this.themeTokenColors);
 			findTokenStyleForScopeInScopes(this.customTokenScopeMatchers, this.customTokenColors);
 			if (foreground !== undefined || fontStyle !== undefined) {
+				if (definitions) {
+					definitions.foreground = foregroundThemingRule;
+					definitions.bold = definitions.italic = definitions.underline = fontStyleThemingRule;
+					definitions.scope = scope;
+				}
+
 				return TokenStyle.fromSettings(foreground, fontStyle);
 			}
 		}