Adopt UI eng vision in panels/utils

Bug: 407751425
Change-Id: I7a3d289904c1661b75dacf0fb1c9d4047f000083
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6520599
Auto-Submit: Danil Somsikov <dsv@chromium.org>
Commit-Queue: Alex Rudenko <alexrudenko@chromium.org>
Reviewed-by: Alex Rudenko <alexrudenko@chromium.org>

Author: danilsomsikov

front_end/models/ai_assistance/agents/AiAgent.test.ts

@@ -7,6 +7,7 @@ import {mockAidaClient} from '../../../testing/AiAssistanceHelpers.js';
 import {
   describeWithEnvironment,
 } from '../../../testing/EnvironmentHelpers.js';
+import {html, type TemplateResult} from '../../../ui/lit/lit.js';
 import * as AiAssistance from '../ai_assistance.js';
 
 const {AiAgent, ResponseType, ConversationContext, ErrorType} = AiAssistance;
@@ -21,8 +22,8 @@ function mockConversationContext(): AiAssistance.ConversationContext<unknown> {
       return null;
     }
 
-    override getIcon(): HTMLElement {
-      return document.createElement('span');
+    override getIcon(): TemplateResult {
+      return html`<span></span>`;
     }
 
     override getTitle(): string {
@@ -359,7 +360,7 @@ describeWithEnvironment('AiAgent', () => {
   describe('ConversationContext', () => {
     function getTestContext(origin: string) {
       class TestContext extends ConversationContext<undefined> {
-        override getIcon(): HTMLElement {
+        override getIcon(): TemplateResult {
           throw new Error('Method not implemented.');
         }
         override getTitle(): string {

front_end/models/ai_assistance/agents/AiAgent.ts

@@ -151,7 +151,7 @@ export interface ConversationSuggestion {
 export abstract class ConversationContext<T> {
   abstract getOrigin(): string;
   abstract getItem(): T;
-  abstract getIcon(): HTMLElement|undefined;
+  abstract getIcon(): Lit.TemplateResult|undefined;
   abstract getTitle(opts?: {disabled: boolean}): string|ReturnType<typeof Lit.Directives.until>;
 
   isOriginAllowed(agentOrigin: string|undefined): boolean {

front_end/models/ai_assistance/agents/FileAgent.ts

@@ -6,6 +6,7 @@ import * as Host from '../../../core/host/host.js';
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as Root from '../../../core/root/root.js';
 import * as PanelUtils from '../../../panels/utils/utils.js';
+import type {TemplateResult} from '../../../ui/lit/lit.js';
 import type * as Workspace from '../../workspace/workspace.js';
 import {FileFormatter} from '../data_formatters/FileFormatter.js';
 
@@ -91,7 +92,7 @@ export class FileContext extends ConversationContext<Workspace.UISourceCode.UISo
     return this.#file;
   }
 
-  override getIcon(): HTMLElement {
+  override getIcon(): TemplateResult {
     return PanelUtils.PanelUtils.getIconForSourceFile(this.#file);
   }
 

front_end/models/ai_assistance/agents/NetworkAgent.ts

@@ -7,6 +7,7 @@ import * as i18n from '../../../core/i18n/i18n.js';
 import * as Root from '../../../core/root/root.js';
 import type * as SDK from '../../../core/sdk/sdk.js';
 import * as PanelUtils from '../../../panels/utils/utils.js';
+import type {TemplateResult} from '../../../ui/lit/lit.js';
 import {NetworkRequestFormatter} from '../data_formatters/NetworkRequestFormatter.js';
 
 import {
@@ -108,7 +109,7 @@ export class RequestContext extends ConversationContext<SDK.NetworkRequest.Netwo
     return this.#request;
   }
 
-  override getIcon(): HTMLElement {
+  override getIcon(): TemplateResult {
     return PanelUtils.PanelUtils.getIconForNetworkRequest(this.#request);
   }
 

front_end/models/ai_assistance/agents/PerformanceAgent.ts

@@ -2,12 +2,14 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import '../../../ui/components/icon_button/icon_button.js';
+
 import * as Common from '../../../core/common/common.js';
 import * as Host from '../../../core/host/host.js';
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as Root from '../../../core/root/root.js';
 import * as TimelineUtils from '../../../panels/timeline/utils/utils.js';
-import * as IconButton from '../../../ui/components/icon_button/icon_button.js';
+import {html, type TemplateResult} from '../../../ui/lit/lit.js';
 import * as Trace from '../../trace/trace.js';
 
 import {
@@ -173,11 +175,9 @@ export class CallTreeContext extends ConversationContext<TimelineUtils.AICallTre
     return this.#callTree;
   }
 
-  override getIcon(): HTMLElement {
-    const icon = IconButton.Icon.create('performance', 'icon');
-    icon.style.color = 'var(--sys-color-on-surface-subtle)';
-    icon.title = 'Performance';
-    return icon;
+  override getIcon(): TemplateResult {
+    return html`<devtools-icon name="performance" title="Performance"
+        style="color: var(--sys-color-on-surface-subtle);"></devtools-icon>`;
   }
 
   override getTitle(): string {

front_end/models/ai_assistance/agents/PerformanceInsightsAgent.ts

@@ -7,7 +7,7 @@ import * as i18n from '../../../core/i18n/i18n.js';
 import * as Platform from '../../../core/platform/platform.js';
 import * as Root from '../../../core/root/root.js';
 import * as TimelineUtils from '../../../panels/timeline/utils/utils.js';
-import * as IconButton from '../../../ui/components/icon_button/icon_button.js';
+import {html, type TemplateResult} from '../../../ui/lit/lit.js';
 import {PerformanceInsightFormatter, TraceEventFormatter} from '../data_formatters/PerformanceInsightFormatter.js';
 import {debugLog} from '../debug.js';
 
@@ -121,11 +121,9 @@ export class InsightContext extends ConversationContext<TimelineUtils.InsightAIC
     return this.#insight;
   }
 
-  override getIcon(): HTMLElement {
-    const icon = IconButton.Icon.create('performance', 'icon');
-    icon.style.color = 'var(--sys-color-on-surface-subtle)';
-    icon.title = 'Performance';
-    return icon;
+  override getIcon(): TemplateResult {
+    return html`<devtools-icon name="performance" title="Performance"
+        style="color: var(--sys-color-on-surface-subtle);"></devtools-icon>`;
   }
 
   override getTitle(): string {

front_end/panels/changes/CombinedDiffView.ts

@@ -42,7 +42,7 @@ interface SingleDiffViewInput {
   fileName: string;
   fileUrl: string;
   mimeType: string;
-  icon: HTMLElement;
+  icon: Lit.TemplateResult;
   diff: Diff.Diff.DiffArray;
   copied: boolean;
   selectedFileUrl?: string;

front_end/panels/network/NetworkDataGridNode.ts

@@ -53,6 +53,7 @@ import * as DataGrid from '../../ui/legacy/components/data_grid/data_grid.js';
 import * as PerfUI from '../../ui/legacy/components/perf_ui/perf_ui.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
+import {render} from '../../ui/lit/lit.js';
 import {PanelUtils} from '../utils/utils.js';
 
 import type {NetworkTimeCalculator} from './NetworkTimeCalculator.js';
@@ -1107,7 +1108,8 @@ export class NetworkRequestNode extends NetworkNode {
 
       // render icons
       const iconElement = PanelUtils.getIconForNetworkRequest(this.requestInternal);
-      cell.appendChild(iconElement);
+      // eslint-disable-next-line rulesdir/no-lit-render-outside-of-view
+      render(iconElement, cell);
 
       // render Ask AI button
       const aiButtonContainer = this.createAiButtonIfAvailable();

front_end/panels/utils/utils.test.ts

@@ -6,8 +6,10 @@ import * as Common from '../../core/common/common.js';
 import * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import type * as Protocol from '../../generated/protocol.js';
+import {renderElementIntoDOM} from '../../testing/DOMHelpers.js';
 import {describeWithEnvironment} from '../../testing/EnvironmentHelpers.js';
 import * as Diff from '../../third_party/diff/diff.js';
+import {render} from '../../ui/lit/lit.js';
 
 import * as PanelUtils from './utils.js';
 
@@ -75,12 +77,20 @@ describeWithEnvironment('panels/utils', () => {
   });
 
   describe('getIconForNetworkRequest', () => {
+    function renderIcon(request: SDK.NetworkRequest.NetworkRequest): HTMLElement {
+      const container = document.createElement('div');
+      renderElementIntoDOM(container);
+      render(PanelUtils.PanelUtils.getIconForNetworkRequest(request), container);
+      assert.instanceOf(container.firstElementChild, HTMLElement);
+      return container.firstElementChild;
+    }
+
     it('creates an error red icon for request with status code 404', async () => {
       const request = SDK.NetworkRequest.NetworkRequest.create(
           'requestId' as Protocol.Network.RequestId, urlString`https://www.example.com`, urlString``, null, null, null);
       request.statusCode = 404;
 
-      const iconElement = PanelUtils.PanelUtils.getIconForNetworkRequest(request);
+      const iconElement = renderIcon(request);
       const iconImage = iconElement.getAttribute('name');
       assert.strictEqual('cross-circle-filled', iconImage);
 
@@ -95,7 +105,7 @@ describeWithEnvironment('panels/utils', () => {
       request.setResourceType(Common.ResourceType.resourceTypes.Document);
       request.mimeType = 'text/html';
 
-      const iconElement = PanelUtils.PanelUtils.getIconForNetworkRequest(request);
+      const iconElement = renderIcon(request);
       const iconImage = iconElement.getAttribute('name');
       assert.strictEqual('file-document', iconImage);
 
@@ -110,7 +120,7 @@ describeWithEnvironment('panels/utils', () => {
       request.setResourceType(Common.ResourceType.resourceTypes.Media);
       request.mimeType = 'audio/mpeg';
 
-      const iconElement = PanelUtils.PanelUtils.getIconForNetworkRequest(request);
+      const iconElement = renderIcon(request);
       const iconImage = iconElement.getAttribute('name');
       assert.strictEqual('file-media', iconImage);
     });
@@ -122,7 +132,7 @@ describeWithEnvironment('panels/utils', () => {
       request.setResourceType(Common.ResourceType.resourceTypes.Wasm);
       request.mimeType = 'application/wasm';
 
-      const iconElement = PanelUtils.PanelUtils.getIconForNetworkRequest(request);
+      const iconElement = renderIcon(request);
       const iconImage = iconElement.getAttribute('name');
       assert.strictEqual('file-wasm', iconImage);
     });
@@ -134,7 +144,7 @@ describeWithEnvironment('panels/utils', () => {
       request.setResourceType(Common.ResourceType.resourceTypes.WebSocket);
       request.mimeType = '';
 
-      const iconElement = PanelUtils.PanelUtils.getIconForNetworkRequest(request);
+      const iconElement = renderIcon(request);
       const iconImage = iconElement.getAttribute('name');
       assert.strictEqual('file-websocket', iconImage);
     });
@@ -146,7 +156,7 @@ describeWithEnvironment('panels/utils', () => {
       request.setResourceType(Common.ResourceType.resourceTypes.Fetch);
       request.mimeType = '';
 
-      const iconElement = PanelUtils.PanelUtils.getIconForNetworkRequest(request);
+      const iconElement = renderIcon(request);
       const iconImage = iconElement.getAttribute('name');
       assert.strictEqual('file-fetch-xhr', iconImage);
     });
@@ -158,7 +168,7 @@ describeWithEnvironment('panels/utils', () => {
       request.setResourceType(Common.ResourceType.resourceTypes.XHR);
       request.mimeType = 'application/octet-stream';
 
-      const iconElement = PanelUtils.PanelUtils.getIconForNetworkRequest(request);
+      const iconElement = renderIcon(request);
       const iconImage = iconElement.getAttribute('name');
       assert.strictEqual('file-fetch-xhr', iconImage);
     });
@@ -170,7 +180,7 @@ describeWithEnvironment('panels/utils', () => {
       request.setResourceType(Common.ResourceType.resourceTypes.XHR);
       request.mimeType = 'image/svg+xml';
 
-      const iconElement = PanelUtils.PanelUtils.getIconForNetworkRequest(request);
+      const iconElement = renderIcon(request);
       const imagePreview = iconElement.querySelector('.image-network-icon-preview') as HTMLImageElement;
 
       assert.instanceOf(iconElement, HTMLDivElement);
@@ -184,7 +194,7 @@ describeWithEnvironment('panels/utils', () => {
       request.setResourceType(Common.ResourceType.resourceTypes.Fetch);
       request.mimeType = 'text/html';
 
-      const iconElement = PanelUtils.PanelUtils.getIconForNetworkRequest(request);
+      const iconElement = renderIcon(request);
       const iconImage = iconElement.getAttribute('name');
       assert.strictEqual('file-document', iconImage);
     });
@@ -196,7 +206,7 @@ describeWithEnvironment('panels/utils', () => {
       request.setResourceType(Common.ResourceType.resourceTypes.Preflight);
       request.mimeType = 'text/plain';
 
-      const iconElement = PanelUtils.PanelUtils.getIconForNetworkRequest(request);
+      const iconElement = renderIcon(request);
       const iconImage = iconElement.getAttribute('name');
       assert.strictEqual('file-generic', iconImage);
     });
@@ -208,7 +218,7 @@ describeWithEnvironment('panels/utils', () => {
       request.setResourceType(Common.ResourceType.resourceTypes.Other);
       request.mimeType = 'application/javascript';
 
-      const iconElement = PanelUtils.PanelUtils.getIconForNetworkRequest(request);
+      const iconElement = renderIcon(request);
       const iconImage = iconElement.getAttribute('name');
       assert.strictEqual('file-script', iconImage);
     });
@@ -220,7 +230,7 @@ describeWithEnvironment('panels/utils', () => {
       request.setResourceType(Common.ResourceType.resourceTypes.Fetch);
       request.mimeType = 'application/json';
 
-      const iconElement = PanelUtils.PanelUtils.getIconForNetworkRequest(request);
+      const iconElement = renderIcon(request);
       const iconImage = iconElement.getAttribute('name');
       assert.strictEqual('file-json', iconImage);
     });