Remove the last of Fragment

Bug: none
Change-Id: Iee6f8040612b5eb64591db75cb21bb2da88afb02
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/7647112
Commit-Queue: Nikolay Vitkov <nvitkov@chromium.org>
Reviewed-by: Danil Somsikov <dsv@chromium.org>

Author: Lightning00Blade

front_end/panels/elements/StylePropertyTreeElement.ts

@@ -1575,11 +1575,17 @@ export class GridTemplateRenderer extends rendererBase(SDK.CSSPropertyParserMatc
 
     const indent = Common.Settings.Settings.instance().moduleSetting('text-editor-indent').get();
     const container = document.createDocumentFragment();
-    for (const line of match.lines) {
-      const value = Renderer.render(line, context);
-      const lineBreak = UI.Fragment.html`<br /><span class='styles-clipboard-only'>${indent.repeat(2)}</span>`;
-      container.append(lineBreak, ...value.nodes);
-    }
+
+    const template = html`
+      ${match.lines.map(line => {
+      const lines = Renderer.render(line, context).nodes;
+      return html`
+        <span class='styles-clipboard-only'>${indent.repeat(2)}</span>
+        ${lines}`;
+    })}
+    `;
+
+    render(template, container);
     return [container];
   }
 }

front_end/panels/issues/AffectedPermissionElementsView.ts

@@ -5,7 +5,7 @@
 import * as i18n from '../../core/i18n/i18n.js';
 import type * as Platform from '../../core/platform/platform.js';
 import type * as IssuesManager from '../../models/issues_manager/issues_manager.js';
-import * as UI from '../../ui/legacy/legacy.js';
+import {html, render} from '../../ui/lit/lit.js';
 
 import {AffectedElementsView} from './AffectedElementsView.js';
 
@@ -31,16 +31,19 @@ export class AffectedPermissionElementsView extends AffectedElementsView {
   async #appendAffectedElements(issues: Iterable<IssuesManager.PermissionElementIssue.PermissionElementIssue>):
       Promise<void> {
     let count = 0;
+    // clang-format off
+    const templates = [];
     for (const issue of issues) {
       for (const element of issue.elements()) {
-        const rowElement = UI.Fragment.html`
-    <tr>
-      ${await this.createElementCell(element, this.issue.getCategory())}
-    </tr>`;
-        this.affectedResources.appendChild(rowElement);
         count++;
+        templates.push(html`<tr>
+          ${await this.createElementCell(element, this.issue.getCategory())}
+        </tr>`);
       }
     }
+    // clang-format on
+    // eslint-disable-next-line @devtools/no-lit-render-outside-of-view
+    render(html`${templates}`, this.affectedResources);
     this.updateAffectedResourceCount(count);
   }
 }

front_end/panels/profiler/HeapSnapshotGridNodes.ts

@@ -906,8 +906,15 @@ export class HeapSnapshotObjectNode extends HeapSnapshotGenericObjectNode {
     if (this.cycledWithAncestorGridNode) {
       div.classList.add('cycled-ancestor-node');
     }
-    div.prepend(UI.Fragment.html`<span class="property-name ${nameClass}">${name}</span>
-  <span class="grayed">${this.edgeNodeSeparator()}</span>`);
+    const property = document.createElement('span');
+    property.classList.add('property-name', nameClass);
+    property.textContent = name;
+
+    const separator = document.createElement('span');
+    separator.classList.add('grayed');
+    separator.textContent = this.edgeNodeSeparator();
+
+    div.prepend(property, separator);
   }
 
   edgeNodeSeparator(): string {
@@ -1170,7 +1177,8 @@ export class HeapSnapshotConstructorNode extends HeapSnapshotGridNode {
   override createCell(columnId: string): HTMLElement {
     const cell = columnId === 'object' ? super.createCell(columnId) : this.createValueCell(columnId);
     if (columnId === 'object' && this.count > 1) {
-      cell.appendChild(UI.Fragment.html`<span class="objects-count">×${this.data.count}</span>`);
+      const template = html`<span class="objects-count">×${this.data.count}</span>`;
+      render(template, cell);
     }
     return cell;
   }

front_end/panels/timeline/TimelineUIUtils.ts

@@ -34,6 +34,8 @@
  * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
 
+import '../../ui/kit/kit.js';
+
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
@@ -50,13 +52,13 @@ import * as CodeHighlighter from '../../ui/components/code_highlighter/code_high
 // eslint-disable-next-line @devtools/es-modules-import
 import codeHighlighterStyles from '../../ui/components/code_highlighter/codeHighlighter.css.js';
 import * as uiI18n from '../../ui/i18n/i18n.js';
-import {Link} from '../../ui/kit/kit.js';
 import * as PerfUI from '../../ui/legacy/components/perf_ui/perf_ui.js';
 // eslint-disable-next-line @devtools/es-modules-import
 import imagePreviewStyles from '../../ui/legacy/components/utils/imagePreview.css.js';
 import * as LegacyComponents from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as ThemeSupport from '../../ui/legacy/theme_support/theme_support.js';
+import {html, render} from '../../ui/lit/lit.js';
 import * as PanelsCommon from '../common/common.js';
 
 import {getDurationString} from './AppenderUtils.js';
@@ -833,9 +835,10 @@ export class TimelineUIUtils {
         break;
     }
 
-    const html = UI.Fragment.html`<div>${
-        Link.create(link, i18nString(UIStrings.learnMore), undefined, 'learn-more')} about ${name}.</div>`;
-    return html as HTMLElement;
+    const div = document.createElement('div');
+    // eslint-disable-next-line @devtools/no-lit-render-outside-of-view
+    render(html`<devtools-link href=${link}>${i18nString(UIStrings.learnMore)}</devtools-link> about ${name}.`, div);
+    return div;
   }
 
   static buildConsumeCacheDetails(

front_end/ui/legacy/components/object_ui/ObjectPropertiesSection.ts

@@ -636,18 +636,25 @@ export class ObjectPropertiesSection extends UI.TreeOutline.TreeOutlineInShadow
   }
 
   static createNameElement(name: string|null, isPrivate?: boolean): Element {
+    const element = document.createElement('span');
+    element.classList.add('name');
     if (name === null) {
-      return UI.Fragment.html`<span class="name"></span>`;
+      return element;
     }
     if (/^\s|\s$|^$|\n/.test(name)) {
-      return UI.Fragment.html`<span class="name">"${name.replace(/\n/g, '\u21B5')}"</span>`;
+      element.textContent = `"${name.replace(/\n/g, '\u21B5')}"`;
+      return element;
     }
     if (isPrivate) {
-      return UI.Fragment.html`<span class="name">
-  <span class="private-property-hash">${name[0]}</span>${name.substring(1)}
-  </span>`;
-    }
-    return UI.Fragment.html`<span class="name">${name}</span>`;
+      const privatePropertyHash = document.createElement('span');
+      privatePropertyHash.classList.add('private-property-hash');
+      privatePropertyHash.textContent = name[0];
+      element.appendChild(privatePropertyHash);
+      element.appendChild(document.createTextNode(name.substring(1)));
+      return element;
+    }
+    element.textContent = name;
+    return element;
   }
 
   static valueElementForFunctionDescription(