Trusted Types compatibility: use DOM API for creating HTML elements instead of string concatenation in cellRenderer.ts

[annkamsk]

The next step in resolving #103699. It aims to replace construction of HTML elements by string concatenation in all of the simple cases (i.a. when the text content of the element is not rendered in any special way).

For example:
Replace
this._domNode.innerHTML = ‘<span>no commands</span>’;
with

this._domNode.appendChild(createHTMLElement<HTMLSpanElement>(‘span’, ‘no commands’);

This issue is separated from #104643 as it occurs in what appears to be a more sensitive code, covered with more test cases and placed in a separate module. The issue type and fix strategy should be the same though.

Edit: + @koto @engelsdamien

[jrieken]

@roblourens fyi - I have pushed a fix for not using innerHTML tho it does seems the logic of getMarkdownDragImage can be improved:

vscode/src/vs/workbench/contrib/notebook/browser/view/renderers/cellRenderer.ts

Lines 456 to 468 in e6cf885

	private getMarkdownDragImage(templateData: MarkdownCellRenderTemplate): HTMLElement {
	const dragImageContainer = DOM.$('.cell-drag-image.monaco-list-row.focused.markdown-cell-row');
	DOM.reset(dragImageContainer, templateData.container.cloneNode(true));
	// Remove all rendered content nodes after the
	const markdownContent = dragImageContainer.querySelector('.cell.markdown')!;
	const contentNodes = markdownContent.children[0].children;
	for (let i = contentNodes.length - 1; i >= 1; i--) {
	contentNodes.item(i)!.remove();
	}
	return dragImageContainer;
	}

It seems to be only interested in a small subset of nodes of the original element