[theme] theme 'inspect tokens'

src/vs/editor/contrib/inspectTokens/browser/inspectTokens.css

@@ -4,8 +4,6 @@
  *--------------------------------------------------------------------------------------------*/
 
 .monaco-editor .tokens-inspect-widget {
-	background-color: #F3F3F3;
-	border: 1px solid #CCC;
 	z-index: 50;
 	-webkit-user-select: text;
 	-ms-user-select: text;
@@ -16,9 +14,10 @@
 	padding: 10px;
 }
 
-.monaco-editor.vs-dark .tokens-inspect-widget { background-color: #2D2D30; border-color: #555; }
-
-.monaco-editor.hc-black .tokens-inspect-widget { background-color: #0C141F; }
+.tokens-inspect-separator {
+	height: 1px;
+	border: 0;
+}
 
 .monaco-editor .tokens-inspect-widget .tm-token {
 	font-family: monospace;

src/vs/editor/contrib/inspectTokens/browser/inspectTokens.ts

@@ -21,6 +21,9 @@ import { IStandaloneThemeService } from 'vs/editor/common/services/standaloneThe
 import { NULL_STATE, nullTokenize, nullTokenize2 } from 'vs/editor/common/modes/nullMode';
 import { Token } from 'vs/editor/common/core/token';
 import { Color } from 'vs/base/common/color';
+import { registerThemingParticipant, HIGH_CONTRAST } from 'vs/platform/theme/common/themeService';
+import { editorHoverBackground, editorHoverBorder } from 'vs/platform/theme/common/colorRegistry';
+
 
 @editorContribution
 class InspectTokensController extends Disposable implements IEditorContribution {
@@ -230,7 +233,7 @@ class InspectTokensWidget extends Disposable implements IContentWidget {
 		}
 		result += `<h2 class="tm-token">${renderTokenText(tokenText)}<span class="tm-token-length">(${tokenText.length} ${tokenText.length === 1 ? 'char' : 'chars'})</span></h2>`;
 
-		result += `<hr style="clear:both"/>`;
+		result += `<hr class="tokens-inspect-separator" style="clear:both"/>`;
 
 		let metadata = this._decodeMetadata(data.tokens2[(token2Index << 1) + 1]);
 		result += `<table class="tm-metadata-table"><tbody>`;
@@ -241,7 +244,7 @@ class InspectTokensWidget extends Disposable implements IContentWidget {
 		result += `<tr><td class="tm-metadata-key">background</td><td class="tm-metadata-value">${metadata.background.toRGBHex()}</td>`;
 		result += `</tbody></table>`;
 
-		result += `<hr/>`;
+		result += `<hr class="tokens-inspect-separator"/>`;
 
 		if (token1Index < data.tokens1.length) {
 			result += `<span class="tm-token-type">${escape(data.tokens1[token1Index].type)}</span>`;
@@ -330,3 +333,16 @@ class InspectTokensWidget extends Disposable implements IContentWidget {
 		};
 	}
 }
+
+registerThemingParticipant((theme, collector) => {
+	let border = theme.getColor(editorHoverBorder);
+	if (border) {
+		let borderWidth = theme.type === HIGH_CONTRAST ? 2 : 1;
+		collector.addRule(`.monaco-editor .tokens-inspect-widget { border: ${borderWidth}px solid ${border}; }`);
+		collector.addRule(`.monaco-editor .tokens-inspect-widget .tokens-inspect-separator { background-color: ${border}; }`);
+	}
+	let background = theme.getColor(editorHoverBackground);
+	if (background) {
+		collector.addRule(`.monaco-editor .tokens-inspect-widget { background-color: ${background}; }`);
+	}
+});
\ No newline at end of file