Adopt UI eng vision in the OriginTrialTreeView class.

The rest of the file will be migrated in the subsequent CLs

Bug: 407750554
Change-Id: I1ecc286b1ebc76aadaa620d0cf5d9db252359b3e
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/7096385
Reviewed-by: Jack Franklin <[email protected]>
Auto-Submit: Danil Somsikov <[email protected]>
Commit-Queue: Jack Franklin <[email protected]>

Author: danilsomsikov

front_end/panels/application/components/FrameDetailsView.ts

@@ -23,6 +23,7 @@ import * as LegacyWrapper from '../../../ui/components/legacy_wrapper/legacy_wra
 import * as RenderCoordinator from '../../../ui/components/render_coordinator/render_coordinator.js';
 import type * as ReportView from '../../../ui/components/report_view/report_view.js';
 import * as Components from '../../../ui/legacy/components/utils/utils.js';
+import * as UI from '../../../ui/legacy/legacy.js';
 import * as Lit from '../../../ui/lit/lit.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 
@@ -35,6 +36,7 @@ import {
 import type {StackTraceData} from './StackTrace.js';
 
 const {html} = Lit;
+const {widgetConfig} = UI.Widget;
 
 const UIStrings = {
   /**
@@ -283,7 +285,6 @@ export class FrameDetailsReportView extends LegacyWrapper.LegacyWrapper.Wrappabl
   #protocolMonitorExperimentEnabled = false;
   #permissionsPolicies: Promise<Protocol.Page.PermissionsPolicyFeatureState[]|null>|null = null;
   #permissionsPolicySectionData: PermissionsPolicySectionData = {policies: [], showDetails: false};
-  #originTrialTreeView: OriginTrialTreeView = new OriginTrialTreeView();
   #linkifier = new Components.Linkifier.Linkifier();
   #adScriptAncestry: Protocol.Page.AdScriptAncestry|null = null;
 
@@ -317,7 +318,7 @@ export class FrameDetailsReportView extends LegacyWrapper.LegacyWrapper.Wrappabl
     if (!this.#permissionsPolicies && this.#frame) {
       this.#permissionsPolicies = this.#frame.getPermissionsPolicyState();
     }
-    await RenderCoordinator.write('FrameDetailsView render', () => {
+    await RenderCoordinator.write('FrameDetailsView render', async () => {
       if (!this.#frame) {
         return;
       }
@@ -331,7 +332,7 @@ export class FrameDetailsReportView extends LegacyWrapper.LegacyWrapper.Wrappabl
           ${this.#renderDocumentSection()}
           ${this.#renderIsolationSection()}
           ${this.#renderApiAvailabilitySection()}
-          ${this.#renderOriginTrial()}
+          ${await this.#renderOriginTrial()}
           ${Lit.Directives.until(this.#permissionsPolicies?.then(policies => {
             this.#permissionsPolicySectionData.policies = policies || [];
             return html`
@@ -348,17 +349,12 @@ export class FrameDetailsReportView extends LegacyWrapper.LegacyWrapper.Wrappabl
     });
   }
 
-  #renderOriginTrial(): Lit.LitTemplate {
+  async #renderOriginTrial(): Promise<Lit.LitTemplate> {
     if (!this.#frame) {
       return Lit.nothing;
     }
 
-    this.#originTrialTreeView.classList.add('span-cols');
-
-    void this.#frame.getOriginTrials().then(trials => {
-      this.#originTrialTreeView.data = {trials};
-    });
-
+    const data = {trials: await this.#frame.getOriginTrials()};
     // clang-format off
     return html`
     <devtools-report-section-header>
@@ -373,7 +369,8 @@ export class FrameDetailsReportView extends LegacyWrapper.LegacyWrapper.Wrappabl
         </x-link>
       </span>
     </devtools-report-section>
-    ${this.#originTrialTreeView}
+    <devtools-widget class="span-cols" .widgetConfig=${widgetConfig(OriginTrialTreeView, {data})}>
+    </devtools-widget>
     <devtools-report-divider></devtools-report-divider>`;
     // clang-format on
   }

front_end/panels/application/components/OriginTrialTreeView.test.ts

@@ -4,31 +4,24 @@
 
 import * as Protocol from '../../../generated/protocol.js';
 import {
-  getElementWithinComponent,
   renderElementIntoDOM,
   stripLitHtmlCommentNodes,
 } from '../../../testing/DOMHelpers.js';
 import {describeWithLocale} from '../../../testing/LocaleHelpers.js';
 import * as RenderCoordinator from '../../../ui/components/render_coordinator/render_coordinator.js';
-import * as TreeOutline from '../../../ui/components/tree_outline/tree_outline.js';
+import type * as TreeOutline from '../../../ui/components/tree_outline/tree_outline.js';
 
 import * as ApplicationComponents from './components.js';
 
 async function renderOriginTrialTreeView(
     data: ApplicationComponents.OriginTrialTreeView.OriginTrialTreeViewData,
-    ): Promise<{
-  component: ApplicationComponents.OriginTrialTreeView.OriginTrialTreeView,
-  shadowRoot: ShadowRoot,
-}> {
+    ): Promise<ApplicationComponents.OriginTrialTreeView.OriginTrialTreeView> {
   const component = new ApplicationComponents.OriginTrialTreeView.OriginTrialTreeView();
   component.data = data;
   renderElementIntoDOM(component);
-  assert.isNotNull(component.shadowRoot);
+  await component.updateComplete;
   await RenderCoordinator.done();
-  return {
-    component,
-    shadowRoot: component.shadowRoot,
-  };
+  return component;
 }
 
 type OriginTrialTreeOutline =
@@ -43,10 +36,9 @@ async function renderOriginTrialTreeViewTreeOutline(
   component: OriginTrialTreeOutline,
   shadowRoot: ShadowRoot,
 }> {
-  const {component} = await renderOriginTrialTreeView(data);
+  const component = await renderOriginTrialTreeView(data);
   const treeOutline: OriginTrialTreeOutline =
-      getElementWithinComponent<ApplicationComponents.OriginTrialTreeView.OriginTrialTreeView, OriginTrialTreeOutline>(
-          component, 'devtools-tree-outline', TreeOutline.TreeOutline.TreeOutline);
+      component.contentElement.querySelector<OriginTrialTreeOutline>('devtools-tree-outline')!;
   assert.isNotNull(treeOutline.shadowRoot);
   return {
     component: treeOutline,
@@ -208,6 +200,7 @@ describeWithLocale('OriginTrialTreeView', () => {
         trialWithUnparsableToken,
       ],
     });
+
     const visibleItems = shadowRoot.querySelectorAll<HTMLLIElement>('li[role="treeitem"]');
     assert.lengthOf(visibleItems, 3);
     assert.include(nodeKeyInnerHTML(visibleItems[0]), trialWithMultipleTokens.trialName);

front_end/panels/application/components/OriginTrialTreeView.ts

@@ -11,6 +11,7 @@ import * as i18n from '../../../core/i18n/i18n.js';
 import * as Protocol from '../../../generated/protocol.js';
 import * as Adorners from '../../../ui/components/adorners/adorners.js';
 import type * as TreeOutline from '../../../ui/components/tree_outline/tree_outline.js';
+import * as UI from '../../../ui/legacy/legacy.js';
 import * as Lit from '../../../ui/lit/lit.js';
 
 import badgeStyles from './badge.css.js';
@@ -118,6 +119,7 @@ function constructOriginTrialTree(originTrial: Protocol.Page.OriginTrial): TreeN
 
       return html`
         ${trial.trialName}
+        <style>${badgeStyles}</style>
         ${createBadge({
         badgeContent: trial.status,
         style: trial.status === Protocol.Page.OriginTrialStatus.Enabled ? 'success' : 'error',
@@ -269,7 +271,9 @@ export class OriginTrialTokenRows extends HTMLElement {
     const tokenDetails: TokenField[] = [
       {
         name: i18nString(UIStrings.status),
-        value: html`${createBadge({
+        value: html`
+          <style>${badgeStyles}</style>
+          ${createBadge({
           badgeContent: this.#tokenWithStatus.status,
           style: this.#tokenWithStatus.status === Protocol.Page.OriginTrialTokenStatus.Success ? 'success' : 'error',
         })}`,
@@ -287,7 +291,6 @@ export class OriginTrialTokenRows extends HTMLElement {
     Lit.render(
         html`
       <style>
-        ${badgeStyles}
         ${originTrialTokenRowsStyles}
       </style>
       <div class="content">
@@ -304,47 +307,56 @@ export interface OriginTrialTreeViewData {
   trials: Protocol.Page.OriginTrial[];
 }
 
-export class OriginTrialTreeView extends HTMLElement {
-  readonly #shadow = this.attachShadow({mode: 'open'});
+type View = (input: OriginTrialTreeViewData, output: undefined, target: HTMLElement) => void;
+
+const DEFAULT_VIEW: View = (input, _output, target) => {
+  if (!input.trials.length) {
+    // clang-format off
+    Lit.render(html`
+      <style>${originTrialTreeViewStyles}</style>
+      <span class="status-badge">
+        <devtools-icon class="medium" name="clear"></devtools-icon>
+        <span>${i18nString(UIStrings.noTrialTokens)}</span>
+      </span>`, target);
+    // clang-format on
+    return;
+  }
 
-  set data(data: OriginTrialTreeViewData) {
-    this.#render(data.trials);
+  // clang-format off
+  Lit.render(html`
+    <style>
+      ${originTrialTreeViewStyles}
+    </style>
+    <devtools-tree-outline .data=${{
+      tree: input.trials.map(constructOriginTrialTree),
+      defaultRenderer,
+    } as TreeOutline.TreeOutline.TreeOutlineData < OriginTrialTreeNodeData >}>
+    </devtools-tree-outline>
+  `, target);
+  // clang-format on
+};
+
+export class OriginTrialTreeView extends UI.Widget.Widget {
+  #data: OriginTrialTreeViewData = {trials: []};
+  #view: View;
+
+  constructor(element?: HTMLElement, view: View = DEFAULT_VIEW) {
+    super(element, {useShadowDom: true});
+    this.#view = view;
   }
 
-  #render(trials: Protocol.Page.OriginTrial[]): void {
-    if (!trials.length) {
-      Lit.render(
-          html`
-    <style>${originTrialTreeViewStyles}</style>
-    <span class="status-badge">
-      <devtools-icon class="medium" name="clear"></devtools-icon>
-      <span>${i18nString(UIStrings.noTrialTokens)}</span>
-    </span>`,
-          this.#shadow, {host: this});
-      return;
-    }
+  set data(data: OriginTrialTreeViewData) {
+    this.#data = data;
+    this.requestUpdate();
+  }
 
-    Lit.render(
-        html`
-      <style>
-        ${badgeStyles}
-        ${originTrialTreeViewStyles}
-      </style>
-      <devtools-tree-outline .data=${{
-          tree: trials.map(constructOriginTrialTree),
-          defaultRenderer,
-        } as TreeOutline.TreeOutline.TreeOutlineData < OriginTrialTreeNodeData >}>
-      </devtools-tree-outline>
-    `,
-        this.#shadow, {host: this});
+  override performUpdate(): void {
+    this.#view(this.#data, undefined, this.contentElement);
   }
 }
 
-customElements.define('devtools-resources-origin-trial-tree-view', OriginTrialTreeView);
-
 declare global {
   interface HTMLElementTagNameMap {
-    'devtools-resources-origin-trial-tree-view': OriginTrialTreeView;
     'devtools-resources-origin-trial-token-rows': OriginTrialTokenRows;
   }
 }

front_end/panels/application/components/badge.css

@@ -20,6 +20,6 @@
 }
 
 /* Use mono-space source code font to assist reading of adorner content */
-:host {
+:host devtools-adorner {
   font-family: var(--source-code-font-family);
 }