[UI] Migrate Checklist to UI eng vision

Fixed: 407941156
Change-Id: I0c63538178e4b235b91f9812a772578b3da433ad
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/7218150
Auto-Submit: Connor Clark <[email protected]>
Reviewed-by: Danil Somsikov <[email protected]>
Commit-Queue: Connor Clark <[email protected]>

Author: Connor Clark

front_end/panels/timeline/components/insights/Checklist.ts

@@ -1,7 +1,6 @@
 // Copyright 2024 The Chromium Authors
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
-/* eslint-disable @devtools/no-lit-render-outside-of-view */
 
 /**
  * @file A list of pass/fail conditions for an insight.
@@ -11,11 +10,13 @@ import '../../../../ui/kit/kit.js';
 
 import * as i18n from '../../../../core/i18n/i18n.js';
 import type * as Trace from '../../../../models/trace/trace.js';
-import * as ComponentHelpers from '../../../../ui/components/helpers/helpers.js';
+import * as UI from '../../../../ui/legacy/legacy.js';
 import * as Lit from '../../../../ui/lit/lit.js';
 
 import checklistStyles from './checklist.css.js';
 
+const {html} = Lit;
+
 const UIStrings = {
   /**
    * @description Text for a screen-reader label to tell the user that the icon represents a successful insight check
@@ -32,7 +33,43 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/timeline/components/insights/Checklist.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
-const {html} = Lit;
+interface ViewInput {
+  checklist: GenericChecklist;
+}
+
+type View = (input: ViewInput, output: undefined, target: HTMLElement) => void;
+
+export const DEFAULT_VIEW: View = (input, output, target) => {
+  const {
+    checklist,
+  } = input;
+
+  function getIcon(check: GenericChecklist['']): Lit.TemplateResult {
+    const icon = check.value ? 'check-circle' : 'clear';
+
+    const ariaLabel = check.value ? i18nString(UIStrings.successAriaLabel, {PH1: check.label}) :
+                                    i18nString(UIStrings.failedAriaLabel, {PH1: check.label});
+    return html`
+        <devtools-icon
+          aria-label=${ariaLabel}
+          name=${icon}
+          class=${check.value ? 'check-passed' : 'check-failed'}
+        ></devtools-icon>
+      `;
+  }
+
+  // clang-format off
+  Lit.render(html`
+    <style>${checklistStyles}</style>
+    <ul>
+      ${Object.values(checklist).map(check => html`<li>
+          ${getIcon(check)}
+          <span data-checklist-label>${check.label}</span>
+      </li>`)}
+    </ul>
+  `, target);
+  // clang-format on
+};
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 type GenericChecklist = Trace.Insights.Types.Checklist<any>;
@@ -46,55 +83,28 @@ export interface TableDataRow {
   overlays?: Trace.Types.Overlays.Overlay[];
 }
 
-export class Checklist extends HTMLElement {
-  readonly #shadow = this.attachShadow({mode: 'open'});
+export class Checklist extends UI.Widget.Widget {
+  #view: View;
   #checklist?: GenericChecklist;
 
-  set checklist(checklist: GenericChecklist) {
-    this.#checklist = checklist;
-    void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#render);
-  }
-
-  connectedCallback(): void {
-    void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#render);
+  constructor(element?: HTMLElement, view: View = DEFAULT_VIEW) {
+    super(element, {useShadowDom: true});
+    this.#view = view;
   }
 
-  #getIcon(check: GenericChecklist['']): Lit.TemplateResult {
-    const icon = check.value ? 'check-circle' : 'clear';
-
-    const ariaLabel = check.value ? i18nString(UIStrings.successAriaLabel, {PH1: check.label}) :
-                                    i18nString(UIStrings.failedAriaLabel, {PH1: check.label});
-    return html`
-        <devtools-icon
-          aria-label=${ariaLabel}
-          name=${icon}
-          class=${check.value ? 'check-passed' : 'check-failed'}
-        ></devtools-icon>
-      `;
+  set checklist(checklist: GenericChecklist) {
+    this.#checklist = checklist;
+    this.requestUpdate();
   }
 
-  async #render(): Promise<void> {
+  override performUpdate(): void {
     if (!this.#checklist) {
       return;
     }
 
-    Lit.render(
-        html`
-          <style>${checklistStyles}</style>
-          <ul>
-            ${Object.values(this.#checklist).map(check => html`<li>
-                ${this.#getIcon(check)}
-                <span data-checklist-label>${check.label}</span>
-            </li>`)}
-          </ul>`,
-        this.#shadow, {host: this});
+    const input: ViewInput = {
+      checklist: this.#checklist,
+    };
+    this.#view(input, undefined, this.contentElement);
   }
 }
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'devtools-performance-checklist': Checklist;
-  }
-}
-
-customElements.define('devtools-performance-checklist', Checklist);

front_end/panels/timeline/components/insights/DocumentLatency.ts

@@ -2,15 +2,16 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import './Checklist.js';
-
 import type {DocumentLatencyInsightModel} from '../../../../models/trace/insights/DocumentLatency.js';
 import type * as Trace from '../../../../models/trace/trace.js';
+import * as UI from '../../../../ui/legacy/legacy.js';
 import * as Lit from '../../../../ui/lit/lit.js';
 
 import {BaseInsightComponent} from './BaseInsightComponent.js';
+import {Checklist} from './Checklist.js';
 
 const {html} = Lit;
+const {widgetConfig} = UI.Widget;
 
 export class DocumentLatency extends BaseInsightComponent<DocumentLatencyInsightModel> {
   override internalName = 'document-latency';
@@ -29,7 +30,9 @@ export class DocumentLatency extends BaseInsightComponent<DocumentLatencyInsight
     }
 
     // clang-format off
-    return html`<devtools-performance-checklist .checklist=${this.model.data.checklist}></devtools-performance-checklist>`;
+    return html`<devtools-widget .widgetConfig=${widgetConfig(Checklist, {
+      checklist: this.model.data.checklist,
+    })}></devtools-widget>`;
     // clang-format on
   }
 }

front_end/panels/timeline/components/insights/LCPDiscovery.ts

@@ -2,17 +2,19 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import './Checklist.js';
-
 import * as i18n from '../../../../core/i18n/i18n.js';
 import type {LCPDiscoveryInsightModel} from '../../../../models/trace/insights/LCPDiscovery.js';
 import * as Trace from '../../../../models/trace/trace.js';
 import * as uiI18n from '../../../../ui/i18n/i18n.js';
+import * as UI from '../../../../ui/legacy/legacy.js';
 import * as Lit from '../../../../ui/lit/lit.js';
 
 import {BaseInsightComponent} from './BaseInsightComponent.js';
+import {Checklist} from './Checklist.js';
 import {imageRef} from './ImageRef.js';
 
+const {widgetConfig} = UI.Widget;
+
 const {UIStrings, i18nString, getImageData} = Trace.Insights.Models.LCPDiscovery;
 
 const {html} = Lit;
@@ -89,7 +91,9 @@ export class LCPDiscovery extends BaseInsightComponent<LCPDiscoveryInsightModel>
     // clang-format off
     return html`
       <div class="insight-section">
-        <devtools-performance-checklist class="insight-section" .checklist=${imageData.checklist}></devtools-performance-checklist>
+        <devtools-widget .widgetConfig=${widgetConfig(Checklist, {
+          checklist: imageData.checklist,
+        })}></devtools-widget>
         <div class="insight-section">${imageRef(imageData.request)}${delayEl}</div>
       </div>`;
     // clang-format on