Merge pull request #108779 from a5hk/semantic-hl-ui

closes #97890
microsoft · Oct 19, 2020 · db8ff25 · db8ff25
2 parents 845d014 + 177eba7
commit db8ff25
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 4 deletions.
diff --git a/src/vs/workbench/contrib/codeEditor/browser/inspectEditorTokens/inspectEditorTokens.css b/src/vs/workbench/contrib/codeEditor/browser/inspectEditorTokens/inspectEditorTokens.css
@@ -31,10 +31,26 @@
 
 .tiw-metadata-value {
 	font-family: var(--monaco-monospace-font);
-	text-align: right;
 	word-break: break-word;
 }
+
+.tiw-metadata-values {
+	list-style: none;
+	max-height: 300px;
+	overflow-y: auto;
+	margin-right: -10px;
+	padding-left: 0;
+}
+
+.tiw-metadata-values > .tiw-metadata-value {
+	margin-right: 10px;
+}
+
 .tiw-metadata-key {
+	width: 1px;
+	min-width: 150px;
+	padding-right: 10px;
+	white-space: nowrap;
 	vertical-align: top;
 }
 

diff --git a/src/vs/workbench/contrib/codeEditor/browser/inspectEditorTokens/inspectEditorTokens.ts b/src/vs/workbench/contrib/codeEditor/browser/inspectEditorTokens/inspectEditorTokens.ts
@@ -594,11 +594,17 @@ class InspectEditorTokensWidget extends Disposable implements IContentWidget {
 			theme.resolveScopes(definition, scopesDefinition);
 			const matchingRule = scopesDefinition[property];
 			if (matchingRule && scopesDefinition.scope) {
-				const strScopes = Array.isArray(matchingRule.scope) ? matchingRule.scope.join(', ') : String(matchingRule.scope);
+				const scopes = $('ul.tiw-metadata-values');
+				const strScopes = Array.isArray(matchingRule.scope) ? matchingRule.scope : [String(matchingRule.scope)];
+
+				for (let strScope of strScopes) {
+					scopes.appendChild($('li.tiw-metadata-value.tiw-metadata-scopes', undefined, strScope));
+				}
+
 				elements.push(
 					scopesDefinition.scope.join(' '),
-					$('br'),
-					$('code.tiw-theme-selector', undefined, strScopes, $('br'), JSON.stringify(matchingRule.settings, null, '\t')));
+					scopes,
+					$('code.tiw-theme-selector', undefined, JSON.stringify(matchingRule.settings, null, '\t')));
 				return elements;
 			}
 			return elements;