Change:
<!-- Do Not Delete This! featurerequesttemplate --<!-- Please read our Rules of Conduct: --<!-- Please search existing issues to avoid creating duplicates. --<!-- Describe the feature you'd like. --The next step in resolving . Simirarly to , it aims to replace construction of HTML elements by string concatenation in file. The code contains mainly a table construction by concatenating strings of . The goal is to replace them all with function calls.
I verified by running the monaco editor from source and testing the inspect token hover
To verify, open the hover and verify it looks all proper.

Discussion:
import { Color } from 'vs/base/common/color'; import { KeyCode } from 'vs/base/common/keyCodes'; import { Disposable } from 'vs/base/common/lifecycle'; <del> import { escape } from 'vs/base/common/strings'; </del> import { ContentWidgetPositionPreference, IActiveCodeEditor, ICodeEditor, IContentWidget, IContentWidgetPosition } from 'vs/editor/browser/editorBrowser'; import { EditorAction, ServicesAccessor, registerEditorAction, registerEditorContribution } from 'vs/editor/browser/editorExtensions'; import { Position } from 'vs/editor/common/core/position';

import { IConfigurationService } from 'vs/platform/configuration/common/configuration'; import { SEMANTIC_HIGHLIGHTING_SETTING_ID, IEditorSemanticHighlightingOptions } from 'vs/editor/common/services/modelServiceImpl'; <ins> const $ = dom.$; </ins> class InspectEditorTokensController extends Disposable implements IEditorContribution { public static readonly ID = 'editor.contrib.inspectEditorTokens';

let charCode = tokenText.charCodeAt(charIndex); switch (charCode) { case CharCode.Tab: <del> result += '&rarr;'; </del> <ins> result += 'u2192'; // &rarr; </ins> break; case CharCode.Space: <del> result += '&middot;'; break; case CharCode.LessThan: result += '&lt;'; break; case CharCode.GreaterThan: result += '&gt;'; break; case CharCode.Ampersand: result += '&amp;'; </del> <ins> result += 'u00B7'; // &middot; </ins> break; default:

if (this._isDisposed) { return; } <del> let text = this._compute(grammar, semanticTokens, position); this._domNode.innerHTML = text; </del> <ins> this._compute(grammar, semanticTokens, position); </ins> this._domNode.style.maxWidth = `${Math.max(this._editor.getLayoutInfo().width * 0.66, 500)}px`; this._editor.layoutContentWidget(this); }, (err) => {

return this._themeService.getColorTheme().semanticHighlighting; } <del> private _compute(grammar: IGrammar | null, semanticTokens: SemanticTokensResult | null, position: Position): string { </del> <ins> private _compute(grammar: IGrammar | null, semanticTokens: SemanticTokensResult | null, position: Position) { </ins> const textMateTokenInfo = grammar && this._getTokensAtPosition(grammar, position); const semanticTokenInfo = semanticTokens && this._getSemanticTokenAtPosition(semanticTokens, position); if (!textMateTokenInfo && !semanticTokenInfo) { <del> return 'No grammar or semantic tokens available.'; </del> <ins> dom.reset(this._domNode, 'No grammar or semantic tokens available.'); return; </ins> } let tmMetadata = textMateTokenInfo?.metadata;

const tokenText = semTokenText || tmTokenText || ''; <del> let result = ''; result += `<h2 class="tiw-token">${tokenText}<span class="tiw-token-length">(${tokenText.length} ${tokenText.length === 1 ? 'char' : 'chars'})</span></h2>`; result += `<hr class="tiw-metadata-separator" style="clear:both"/>`; result += `<table class="tiw-metadata-table"><tbody>`; result += `<tr><td class="tiw-metadata-key">language</td><td class="tiw-metadata-value">${escape(tmMetadata?.languageIdentifier.language || '')}</td></tr>`; result += `<tr><td class="tiw-metadata-key">standard token type</td><td class="tiw-metadata-value">${this._tokenTypeToString(tmMetadata?.tokenType || StandardTokenType.Other)}</td></tr>`; result += this._formatMetadata(semMetadata, tmMetadata); result += `</tbody></table>`; </del> <ins> dom.reset(this._domNode, $('h2.tiw-token', undefined, tokenText, $('span.tiw-token-length', undefined, `${tokenText.length} ${tokenText.length === 1 ? 'char' : 'chars'}`))); dom.append(this._domNode, $('hr.tiw-metadata-separator', { 'style': 'clear:both' })); dom.append(this._domNode, $('table.tiw-metadata-table', undefined, $('tbody', undefined, $('tr', undefined, $('td.tiw-metadata-key', undefined, 'language'), $('td.tiw-metadata-value', undefined, tmMetadata?.languageIdentifier.language || '') ), $('tr', undefined, $('td.tiw-metadata-key', undefined, 'standard token type' as string), $('td.tiw-metadata-value', undefined, this._tokenTypeToString(tmMetadata?.tokenType || StandardTokenType.Other)) ), ...this._formatMetadata(semMetadata, tmMetadata) ) )); </ins> if (semanticTokenInfo) { <del> result += `<hr class="tiw-metadata-separator"/>`; result += `<table class="tiw-metadata-table"><tbody>`; result += `<tr><td class="tiw-metadata-key">semantic token type</td><td class="tiw-metadata-value">${semanticTokenInfo.type}</td></tr>`; </del> <ins> dom.append(this._domNode, $('hr.tiw-metadata-separator')); const table = dom.append(this._domNode, $('table.tiw-metadata-table', undefined)); const tbody = dom.append(table, $('tbody', undefined, $('tr', undefined, $('td.tiw-metadata-key', undefined, 'semantic token type' as string), $('td.tiw-metadata-value', undefined, semanticTokenInfo.type) ) )); </ins> if (semanticTokenInfo.modifiers.length) { <del> result += `<tr><td class="tiw-metadata-key">modifiers</td><td class="tiw-metadata-value">${semanticTokenInfo.modifiers.join(' ')}</td></tr>`; </del> <ins> dom.append(tbody, $('tr', undefined, $('td.tiw-metadata-key', undefined, 'modifiers'), $('td.tiw-metadata-value', undefined, semanticTokenInfo.modifiers.join(' ')), )); </ins> } if (semanticTokenInfo.metadata) { const properties: (keyof TokenStyleData)[] = ['foreground', 'bold', 'italic', 'underline']; const propertiesByDefValue: { [rule: string]: string[] } = {}; <del> const allDefValues = []; // remember the order </del> <ins> const allDefValues = new Array<[Array<HTMLElement | string>, string]>(); // remember the order </ins> // first collect to detect when the same rule is used for multiple properties for (let property of properties) { if (semanticTokenInfo.metadata[property] !== undefined) { const definition = semanticTokenInfo.definitions[property]; const defValue = this._renderTokenStyleDefinition(definition, property); <del> let properties = propertiesByDefValue[defValue]; </del> <ins> const defValueStr = defValue.map(el => el instanceof HTMLElement ? el.outerHTML : el).join(); let properties = propertiesByDefValue[defValueStr]; </ins> if (!properties) { <del> propertiesByDefValue[defValue] = properties = []; allDefValues.push(defValue); </del> <ins> propertiesByDefValue[defValueStr] = properties = []; allDefValues.push([defValue, defValueStr]); </ins> } properties.push(property); } } <del> for (let defValue of allDefValues) { result += `<tr><td class="tiw-metadata-key">${propertiesByDefValue[defValue].join(', ')}</td><td class="tiw-metadata-value">${defValue}</td></tr>`; </del> <ins> for (const [defValue, defValueStr] of allDefValues) { dom.append(tbody, $('tr', undefined, $('td.tiw-metadata-key', undefined, propertiesByDefValue[defValueStr].join(', ')), $('td.tiw-metadata-value', undefined, ...defValue) )); </ins> } } <del> result += `</tbody></table>`; </del> } if (textMateTokenInfo) { let theme = this._themeService.getColorTheme(); <del> result += `<hr class="tiw-metadata-separator"/>`; result += `<table class="tiw-metadata-table"><tbody>`; </del> <ins> dom.append(this._domNode, $('hr.tiw-metadata-separator')); const table = dom.append(this._domNode, $('table.tiw-metadata-table')); const tbody = dom.append(table, $('tbody')); </ins> if (tmTokenText && tmTokenText !== tokenText) { <del> result += `<tr><td class="tiw-metadata-key">textmate token</td><td class="tiw-metadata-value">${tmTokenText} (${tmTokenText.length})</td></tr>`; </del> <ins> dom.append(tbody, $('tr', undefined, $('td.tiw-metadata-key', undefined, 'textmate token' as string), $('td.tiw-metadata-value', undefined, `${tmTokenText} (${tmTokenText.length})`) )); </ins> } <del> let scopes = ''; </del> <ins> const scopes = new Array<HTMLElement | string>(); </ins> for (let i = textMateTokenInfo.token.scopes.length - 1; i >= 0; i--) { <del> scopes += escape(textMateTokenInfo.token.scopes[i]); </del> <ins> scopes.push(textMateTokenInfo.token.scopes[i]); </ins> if (i > 0) { <del> scopes += '<br>'; </del> <ins> scopes.push($('br')); </ins> } } <del> result += `<tr><td class="tiw-metadata-key">textmate scopes</td><td class="tiw-metadata-value tiw-metadata-scopes">${scopes}</td></tr>`; </del> <ins> dom.append(tbody, $('tr', undefined, $('td.tiw-metadata-key', undefined, 'textmate scopes' as string), $('td.tiw-metadata-value.tiw-metadata-scopes', undefined, ...scopes), )); </ins> let matchingRule = findMatchingThemeRule(theme, textMateTokenInfo.token.scopes, false); const semForeground = semanticTokenInfo?.metadata?.foreground; if (matchingRule) { <del> let defValue = `<code class="tiw-theme-selector">${matchingRule.rawSelector}n${JSON.stringify(matchingRule.settings, null, 't')}</code>`; </del> if (semForeground !== textMateTokenInfo.metadata.foreground) { <ins> let defValue = $('code.tiw-theme-selector', undefined, matchingRule.rawSelector, $('br'), JSON.stringify(matchingRule.settings, null, 't')); </ins> if (semForeground) { <del> defValue = `
${defValue}
`; </del> <ins> defValue = $('s', undefined, defValue); </ins> } <del> result += `<tr><td class="tiw-metadata-key">foreground</td><td class="tiw-metadata-value">${defValue}</td></tr>`; </del> <ins> dom.append(tbody, $('tr', undefined, $('td.tiw-metadata-key', undefined, 'foreground'), $('td.tiw-metadata-value', undefined, defValue), )); </ins> } } else if (!semForeground) { <del> result += `<tr><td class="tiw-metadata-key">foreground</td><td class="tiw-metadata-value">No theme selector</td></tr>`; </del> <ins> dom.append(tbody, $('tr', undefined, $('td.tiw-metadata-key', undefined, 'foreground'), $('td.tiw-metadata-value', undefined, 'No theme selector' as string), )); </ins> } <del> result += `</tbody></table>`; </del> } <del> return result; </del> } <del> private _formatMetadata(semantic?: IDecodedMetadata, tm?: IDecodedMetadata) { let result = ''; </del> <ins> private _formatMetadata(semantic?: IDecodedMetadata, tm?: IDecodedMetadata): Array<HTMLElement | string> { const elements = new Array<HTMLElement | string>(); </ins> function render(property: 'foreground' | 'background') { let value = semantic?.[property] || tm?.[property]; if (value !== undefined) { const semanticStyle = semantic?.[property] ? 'tiw-metadata-semantic' : ''; <del> result += `<tr><td class="tiw-metadata-key">${property}</td><td class="tiw-metadata-value ${semanticStyle}">${value}</td></tr>`; </del> <ins> elements.push($('tr', undefined, $('td.tiw-metadata-key', undefined, property), $(`td.tiw-metadata-value.${semanticStyle}`, undefined, value) )); </ins> } return value; }

if (foreground && background) { const backgroundColor = Color.fromHex(background), foregroundColor = Color.fromHex(foreground); if (backgroundColor.isOpaque()) { <del> result += `<tr><td class="tiw-metadata-key">contrast ratio</td><td class="tiw-metadata-value">${backgroundColor.getContrastRatio(foregroundColor.makeOpaque(backgroundColor)).toFixed(2)}</td></tr>`; </del> <ins> elements.push($('tr', undefined, $('td.tiw-metadata-key', undefined, 'contrast ratio' as string), $('td.tiw-metadata-value', undefined, backgroundColor.getContrastRatio(foregroundColor.makeOpaque(backgroundColor)).toFixed(2)) )); </ins> } else { <del> result += '<tr><td class="tiw-metadata-key">Contrast ratio cannot be precise for background colors that use transparency</td><td class="tiw-metadata-value"></td></tr>'; </del> <ins> elements.push($('tr', undefined, $('td.tiw-metadata-key', undefined, 'Contrast ratio cannot be precise for background colors that use transparency' as string), $('td.tiw-metadata-value') )); </ins> } } <del> let fontStyleLabels: string[] = []; </del> <ins> const fontStyleLabels = new Array<HTMLElement | string>(); </ins> function addStyle(key: 'bold' | 'italic' | 'underline') { if (semantic && semantic[key]) { <del> fontStyleLabels.push(`<span class='tiw-metadata-semantic'>${key}</span>`); </del> <ins> fontStyleLabels.push($('span.tiw-metadata-semantic', undefined, key)); </ins> } else if (tm && tm[key]) { fontStyleLabels.push(key); }

addStyle('italic'); addStyle('underline'); if (fontStyleLabels.length) { <del> result += `<tr><td class="tiw-metadata-key">font style</td><td class="tiw-metadata-value">${fontStyleLabels.join(' ')}</td></tr>`; </del> <ins> elements.push($('tr', undefined, $('td.tiw-metadata-key', undefined, 'font style' as string), $('td.tiw-metadata-value', undefined, fontStyleLabels.join(' ')) )); </ins> } <del> return result; </del> <ins> return elements; </ins> } private _decodeMetadata(metadata: number): IDecodedMetadata {

return null; } <del> private _renderTokenStyleDefinition(definition: TokenStyleDefinition | undefined, property: keyof TokenStyleData): string { </del> <ins> private _renderTokenStyleDefinition(definition: TokenStyleDefinition | undefined, property: keyof TokenStyleData): Array<HTMLElement | string> { const elements = new Array<HTMLElement | string>(); </ins> if (definition === undefined) { <del> return ''; </del> <ins> return elements; </ins> } const theme = this._themeService.getColorTheme() as ColorThemeData;

const matchingRule = scopesDefinition[property]; if (matchingRule && scopesDefinition.scope) { const strScopes = Array.isArray(matchingRule.scope) ? matchingRule.scope.join(', ') : String(matchingRule.scope); <del> return `${escape(scopesDefinition.scope.join(' '))}<br><code class="tiw-theme-selector">${strScopes}n${JSON.stringify(matchingRule.settings, null, 't')}</code>`; </del> <ins> elements.push( scopesDefinition.scope.join(' '), $('br'), $('code.tiw-theme-selector', undefined, strScopes, $('br'), JSON.stringify(matchingRule.settings, null, 't'))); return elements; </ins> } <del> return ''; </del> <ins> return elements; </ins> } else if (SemanticTokenRule.is(definition)) { const scope = theme.getTokenStylingRuleScope(definition); if (scope === 'setting') { <del> return `User settings: ${definition.selector.id} - ${this._renderStyleProperty(definition.style, property)}`; </del> <ins> elements.push(`User settings: ${definition.selector.id} - ${this._renderStyleProperty(definition.style, property)}`); return elements; </ins> } else if (scope === 'theme') { <del> return `Color theme: ${definition.selector.id} - ${this._renderStyleProperty(definition.style, property)}`; </del> <ins> elements.push(`Color theme: ${definition.selector.id} - ${this._renderStyleProperty(definition.style, property)}`); return elements; </ins> } <del> return ''; </del> <ins> return elements; </ins> } else { const style = theme.resolveTokenStyleValue(definition); <del> return `Default: ${style ? this._renderStyleProperty(style, property) : ''}`; </del> <ins> elements.push(`Default: ${style ? this._renderStyleProperty(style, property) : ''}`); return elements; </ins> } }