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 . 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.

Discussion:
*--------------------------------------------------------------------------------------------*/ import 'vs/css!./inspectTokens'; <ins> import { $, append, reset } from 'vs/base/browser/dom'; </ins> import { CharCode } from 'vs/base/common/charCode'; 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';

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:

} } <del> let result = ''; </del> let lineContent = this._model.getLineContent(position.lineNumber); let tokenText = ''; if (token1Index < data.tokens1.length) {

let tokenEndIndex = token1Index + 1 < data.tokens1.length ? data.tokens1[token1Index + 1].offset : lineContent.length; tokenText = lineContent.substring(tokenStartIndex, tokenEndIndex); } <del> result += `<h2 class="tm-token">${renderTokenText(tokenText)}<span class="tm-token-length">(${tokenText.length} ${tokenText.length === 1 ? 'char' : 'chars'})</span></h2>`; result += `<hr class="tokens-inspect-separator" style="clear:both"/>`; let metadata = (token2Index << 1) + 1 < data.tokens2.length ? this._decodeMetadata(data.tokens2[(token2Index << 1) + 1]) : null; result += `<table class="tm-metadata-table"><tbody>`; result += `<tr><td class="tm-metadata-key">language</td><td class="tm-metadata-value">${metadata ? escape(metadata.languageIdentifier.language) : '-?-'}</td>`; result += `<tr><td class="tm-metadata-key">token type</td><td class="tm-metadata-value">${metadata ? this._tokenTypeToString(metadata.tokenType) : '-?-'}</td>`; result += `<tr><td class="tm-metadata-key">font style</td><td class="tm-metadata-value">${metadata ? this._fontStyleToString(metadata.fontStyle) : '-?-'}</td>`; result += `<tr><td class="tm-metadata-key">foreground</td><td class="tm-metadata-value">${metadata ? Color.Format.CSS.formatHex(metadata.foreground) : '-?-'}</td>`; result += `<tr><td class="tm-metadata-key">background</td><td class="tm-metadata-value">${metadata ? Color.Format.CSS.formatHex(metadata.background) : '-?-'}</td>`; result += `</tbody></table>`; result += `<hr class="tokens-inspect-separator"/>`; </del> <ins> reset(this._domNode, $('h2.tm-token', undefined, renderTokenText(tokenText), $('span.tm-token-length', undefined, `${tokenText.length} ${tokenText.length === 1 ? 'char' : 'chars'}`))); append(this._domNode, $('hr.tokens-inspect-separator', { 'style': 'clear:both' })); const metadata = (token2Index << 1) + 1 < data.tokens2.length ? this._decodeMetadata(data.tokens2[(token2Index << 1) + 1]) : null; append(this._domNode, $('table.tm-metadata-table', undefined, $('tbody', undefined, $('tr', undefined, $('td.tm-metadata-key', undefined, 'language'), $('td.tm-metadata-value', undefined, `${metadata ? metadata.languageIdentifier.language : '-?-'}`) ), $('tr', undefined, $('td.tm-metadata-key', undefined, 'token type' as string), $('td.tm-metadata-value', undefined, `${metadata ? this._tokenTypeToString(metadata.tokenType) : '-?-'}`) ), $('tr', undefined, $('td.tm-metadata-key', undefined, 'font style' as string), $('td.tm-metadata-value', undefined, `${metadata ? this._fontStyleToString(metadata.fontStyle) : '-?-'}`) ), $('tr', undefined, $('td.tm-metadata-key', undefined, 'foreground'), $('td.tm-metadata-value', undefined, `${metadata ? Color.Format.CSS.formatHex(metadata.foreground) : '-?-'}`) ), $('tr', undefined, $('td.tm-metadata-key', undefined, 'background'), $('td.tm-metadata-value', undefined, `${metadata ? Color.Format.CSS.formatHex(metadata.background) : '-?-'}`) ) ) )); append(this._domNode, $('hr.tokens-inspect-separator')); </ins> if (token1Index < data.tokens1.length) { <del> result += `<span class="tm-token-type">${escape(data.tokens1[token1Index].type)}</span>`; </del> <ins> append(this._domNode, $('span.tm-token-type', undefined, data.tokens1[token1Index].type)); </ins> } <del> this._domNode.innerHTML = result; </del> this._editor.layoutContentWidget(this); }