Adopt UI eng vision in the FrameDetailsView

Bug: 407750239
Change-Id: I70e6848a124e9b95a1510c896fd1b4dfce244229
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/7158008
Auto-Submit: Danil Somsikov <[email protected]>
Reviewed-by: Wolfgang Beyer <[email protected]>
Commit-Queue: Danil Somsikov <[email protected]>

Author: danilsomsikov

front_end/panels/application/ApplicationPanelSidebar.ts

@@ -2149,8 +2149,7 @@ export class FrameTreeElement extends ApplicationPanelTreeElement {
   private readonly treeElementForResource: Map<string, FrameResourceTreeElement>;
   private treeElementForWindow: Map<Protocol.Target.TargetID, FrameWindowTreeElement>;
   private treeElementForWorker: Map<Protocol.Target.TargetID, WorkerTreeElement>;
-  private view: LegacyWrapper.LegacyWrapper
-      .LegacyWrapper<UI.Widget.Widget, ApplicationComponents.FrameDetailsView.FrameDetailsReportView>|null;
+  private view: ApplicationComponents.FrameDetailsView.FrameDetailsReportView|null;
 
   constructor(section: ResourcesSection, frame: SDK.ResourceTreeModel.ResourceTreeFrame) {
     super(section.panel, '', false, 'frame');
@@ -2195,8 +2194,8 @@ export class FrameTreeElement extends ApplicationPanelTreeElement {
     this.treeElementForWorker.clear();
 
     if (this.selected) {
-      this.view = LegacyWrapper.LegacyWrapper.legacyWrapper(
-          UI.Widget.Widget, new ApplicationComponents.FrameDetailsView.FrameDetailsReportView(this.frame));
+      this.view = new ApplicationComponents.FrameDetailsView.FrameDetailsReportView();
+      this.view.frame = this.frame;
       this.showView(this.view);
     } else {
       this.view = null;
@@ -2233,8 +2232,8 @@ export class FrameTreeElement extends ApplicationPanelTreeElement {
   override onselect(selectedByUser?: boolean): boolean {
     super.onselect(selectedByUser);
     if (!this.view) {
-      this.view = LegacyWrapper.LegacyWrapper.legacyWrapper(
-          UI.Widget.Widget, new ApplicationComponents.FrameDetailsView.FrameDetailsReportView(this.frame));
+      this.view = new ApplicationComponents.FrameDetailsView.FrameDetailsReportView();
+      this.view.frame = this.frame;
     }
     Host.userMetrics.panelShown('frame-details');
     this.showView(this.view);

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

@@ -19,8 +19,7 @@ import {
   dispatchEvent,
 } from '../../../testing/MockConnection.js';
 import * as ExpandableList from '../../../ui/components/expandable_list/expandable_list.js';
-import * as RenderCoordinator from '../../../ui/components/render_coordinator/render_coordinator.js';
-import * as ReportView from '../../../ui/components/report_view/report_view.js';
+import type * as ReportView from '../../../ui/components/report_view/report_view.js';
 
 import * as ApplicationComponents from './components.js';
 
@@ -89,13 +88,13 @@ const makeFrame = (target: SDK.Target.Target) => {
 describeWithMockConnection('FrameDetailsView', () => {
   it('renders with a title', async () => {
     const frame = makeFrame(createTarget());
-    const component = new ApplicationComponents.FrameDetailsView.FrameDetailsReportView(frame);
+    const component = new ApplicationComponents.FrameDetailsView.FrameDetailsReportView();
+    component.frame = frame;
     renderElementIntoDOM(component);
 
-    assert.isNotNull(component.shadowRoot);
-    void component.render();
-    await RenderCoordinator.done({waitForWork: true});
-    const report = getElementWithinComponent(component, 'devtools-report', ReportView.ReportView.Report);
+    await component.updateComplete;
+
+    const report = component.contentElement.querySelector('devtools-report') as ReportView.ReportView.Report;
 
     const titleElement = report.shadowRoot!.querySelector('.report-title');
     assert.strictEqual(titleElement?.textContent, frame.displayName());
@@ -180,14 +179,15 @@ describeWithMockConnection('FrameDetailsView', () => {
       }],
     });
 
-    const component = new ApplicationComponents.FrameDetailsView.FrameDetailsReportView(frame);
+    const component = new ApplicationComponents.FrameDetailsView.FrameDetailsReportView();
+    component.frame = frame;
     renderElementIntoDOM(component);
 
-    assert.isNotNull(component.shadowRoot);
-    await component.render();
-    await RenderCoordinator.done({waitForWork: true});
+    await component.updateComplete;
+
+    await raf();
 
-    const keys = getCleanTextContentFromElements(component.shadowRoot, 'devtools-report-key');
+    const keys = [...component.contentElement.querySelectorAll('devtools-report-key')].map(k => k.deepInnerText());
     assert.deepEqual(keys, [
       'URL',
       'Origin',
@@ -205,7 +205,7 @@ describeWithMockConnection('FrameDetailsView', () => {
       'Measure Memory',
     ]);
 
-    const values = [...component.shadowRoot.querySelectorAll('devtools-report-value')].map(v => v.deepInnerText());
+    const values = [...component.contentElement.querySelectorAll('devtools-report-value')].map(v => v.deepInnerText());
     assert.deepEqual(values, [
       'https://www.example.com/path/page.html',
       'https://www.example.com',
@@ -227,8 +227,8 @@ report-uri: https://www.example.com/csp`,
       'available\nLearn more',
     ]);
 
-    const stackTrace = getElementWithinComponent(
-        component, 'devtools-resources-stack-trace', ApplicationComponents.StackTrace.StackTrace);
+    const stackTrace = component.contentElement.querySelector('devtools-resources-stack-trace') as
+        ApplicationComponents.StackTrace.StackTrace;
     assert.isNotNull(stackTrace.shadowRoot);
     const expandableList =
         getElementWithinComponent(stackTrace, 'devtools-expandable-list', ExpandableList.ExpandableList.ExpandableList);
@@ -246,15 +246,15 @@ report-uri: https://www.example.com/csp`,
     assert.deepEqual(stackTraceText[0], 'function1\n\xA0@\xA0www.example.com/script.js:16');
 
     const adStatusList =
-        component.shadowRoot.querySelector('devtools-report-value.ad-status-list devtools-expandable-list');
+        component.contentElement.querySelector('devtools-report-value.ad-status-list devtools-expandable-list');
     assert.exists(adStatusList);
     const adStatusExpandableButton = adStatusList.shadowRoot!.querySelector('button');
     assert.notExists(adStatusExpandableButton);
     const adStatusItem = adStatusList.shadowRoot!.querySelector('.expandable-list-items');
     assert.exists(adStatusItem);
     assert.strictEqual(adStatusItem.textContent?.trim(), 'root');
 
-    const adScriptAncestryList = component.shadowRoot.querySelector(
+    const adScriptAncestryList = component.contentElement.querySelector(
         'devtools-report-value.creator-ad-script-ancestry-list devtools-expandable-list');
     assert.exists(adScriptAncestryList);
     const adScriptAncestryExpandableButton = adScriptAncestryList.shadowRoot!.querySelector('button');

front_end/panels/application/components/FrameDetailsView.ts

@@ -1,7 +1,6 @@
 // Copyright 2021 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 */
 
 import '../../../ui/components/expandable_list/expandable_list.js';
 import '../../../ui/components/report_view/report_view.js';
@@ -20,8 +19,6 @@ import * as NetworkForward from '../../../panels/network/forward/forward.js';
 import * as CspEvaluator from '../../../third_party/csp_evaluator/csp_evaluator.js';
 import * as Buttons from '../../../ui/components/buttons/buttons.js';
 import type * as ExpandableList from '../../../ui/components/expandable_list/expandable_list.js';
-import * as LegacyWrapper from '../../../ui/components/legacy_wrapper/legacy_wrapper.js';
-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';
@@ -288,7 +285,9 @@ interface FrameDetailsViewInput {
   onRevealInSources: () => void;
 }
 
-function renderFrameDetailsView(input: FrameDetailsViewInput, target: ShadowRoot): void {
+type View = (input: FrameDetailsViewInput, output: undefined, target: HTMLElement) => void;
+
+const DEFAULT_VIEW: View = (input, _output, target) => {
   if (!input.frame) {
     return;
   }
@@ -310,7 +309,7 @@ function renderFrameDetailsView(input: FrameDetailsViewInput, target: ShadowRoot
     </devtools-report>
   `, target);
   // clang-format on
-}
+};
 
 function renderOriginTrial(trials: Protocol.Page.OriginTrial[]|null): LitTemplate {
   if (!trials) {
@@ -848,27 +847,31 @@ function renderAdditionalInfoSection(frame: SDK.ResourceTreeModel.ResourceTreeFr
     `;
 }
 
-export class FrameDetailsReportView extends LegacyWrapper.LegacyWrapper.WrappableComponent {
-  readonly #shadow = this.attachShadow({mode: 'open'});
+export class FrameDetailsReportView extends UI.Widget.Widget {
   #frame?: SDK.ResourceTreeModel.ResourceTreeFrame;
   #target: SDK.Target.Target|null = null;
   #protocolMonitorExperimentEnabled = false;
   #permissionsPolicies: Promise<Protocol.Page.PermissionsPolicyFeatureState[]|null>|null = null;
   #linkifier = new Components.Linkifier.Linkifier();
   #adScriptAncestry: Protocol.Page.AdScriptAncestry|null = null;
+  #view: View;
 
-  constructor(frame: SDK.ResourceTreeModel.ResourceTreeFrame) {
-    super();
+  constructor(element?: HTMLElement, view = DEFAULT_VIEW) {
+    super(element, {useShadowDom: true});
+    this.#protocolMonitorExperimentEnabled = Root.Runtime.experiments.isEnabled('protocol-monitor');
+    this.#view = view;
+  }
+
+  set frame(frame: SDK.ResourceTreeModel.ResourceTreeFrame) {
     this.#frame = frame;
-    void this.render();
+    this.requestUpdate();
   }
 
-  connectedCallback(): void {
-    this.parentElement?.classList.add('overflow-auto');
-    this.#protocolMonitorExperimentEnabled = Root.Runtime.experiments.isEnabled('protocol-monitor');
+  get frame(): SDK.ResourceTreeModel.ResourceTreeFrame|undefined {
+    return this.#frame;
   }
 
-  override async render(): Promise<void> {
+  override async performUpdate(): Promise<void> {
     const result = await this.#frame?.parentFrame()?.getAdScriptAncestry(this.#frame?.id);
     if (result && result.ancestryChain.length > 0) {
       this.#adScriptAncestry = result;
@@ -887,41 +890,39 @@ export class FrameDetailsReportView extends LegacyWrapper.LegacyWrapper.Wrappabl
     if (!this.#permissionsPolicies && this.#frame) {
       this.#permissionsPolicies = this.#frame.getPermissionsPolicyState();
     }
-    await RenderCoordinator.write('FrameDetailsView render', async () => {
-      const frame = this.#frame;
-      if (!frame) {
-        return;
-      }
-      const networkManager = frame.resourceTreeModel().target().model(SDK.NetworkManager.NetworkManager);
-      const securityIsolationInfo = networkManager?.getSecurityIsolationStatus(frame.id);
-      const linkTargetDOMNode = frame.getOwnerDOMNodeOrDocument();
-      const frameRequest = frame.resourceForURL(frame.url)?.request;
-      const input = {
-        frame,
-        target: this.#target,
-        protocolMonitorExperimentEnabled: this.#protocolMonitorExperimentEnabled,
-        permissionsPolicies: this.#permissionsPolicies,
-        adScriptAncestry: this.#adScriptAncestry,
-        linkifier: this.#linkifier,
-        linkTargetDOMNode,
-        trials: await frame.getOriginTrials(),
-        securityIsolationInfo,
-        onRevealInNetwork: frameRequest ?
-            () => {
-              const requestLocation = NetworkForward.UIRequestLocation.UIRequestLocation.tab(
-                  frameRequest, NetworkForward.UIRequestLocation.UIRequestTabs.HEADERS_COMPONENT);
-              return Common.Revealer.reveal(requestLocation);
-            } :
-            undefined,
-        onRevealInSources: async () => {
-          const sourceCode = this.#uiSourceCodeForFrame(frame);
-          if (sourceCode) {
-            await Common.Revealer.reveal(sourceCode);
-          }
-        },
-      };
-      renderFrameDetailsView(input, this.#shadow);
-    });
+    const frame = this.#frame;
+    if (!frame) {
+      return;
+    }
+    const networkManager = frame.resourceTreeModel().target().model(SDK.NetworkManager.NetworkManager);
+    const securityIsolationInfo = networkManager?.getSecurityIsolationStatus(frame.id);
+    const linkTargetDOMNode = frame.getOwnerDOMNodeOrDocument();
+    const frameRequest = frame.resourceForURL(frame.url)?.request;
+    const input = {
+      frame,
+      target: this.#target,
+      protocolMonitorExperimentEnabled: this.#protocolMonitorExperimentEnabled,
+      permissionsPolicies: this.#permissionsPolicies,
+      adScriptAncestry: this.#adScriptAncestry,
+      linkifier: this.#linkifier,
+      linkTargetDOMNode,
+      trials: await frame.getOriginTrials(),
+      securityIsolationInfo,
+      onRevealInNetwork: frameRequest ?
+          () => {
+            const requestLocation = NetworkForward.UIRequestLocation.UIRequestLocation.tab(
+                frameRequest, NetworkForward.UIRequestLocation.UIRequestTabs.HEADERS_COMPONENT);
+            return Common.Revealer.reveal(requestLocation);
+          } :
+          undefined,
+      onRevealInSources: async () => {
+        const sourceCode = this.#uiSourceCodeForFrame(frame);
+        if (sourceCode) {
+          await Common.Revealer.reveal(sourceCode);
+        }
+      },
+    };
+    this.#view(input, undefined, this.contentElement);
   }
 
   #uiSourceCodeForFrame(frame: SDK.ResourceTreeModel.ResourceTreeFrame): Workspace.UISourceCode.UISourceCode|null {
@@ -937,11 +938,3 @@ export class FrameDetailsReportView extends LegacyWrapper.LegacyWrapper.Wrappabl
     return null;
   }
 }
-
-customElements.define('devtools-resources-frame-details-view', FrameDetailsReportView);
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'devtools-resources-frame-details-view': FrameDetailsReportView;
-  }
-}

front_end/panels/application/components/frameDetailsReportView.css

@@ -4,6 +4,10 @@
  * found in the LICENSE file.
  */
 
+:host {
+  overflow: auto;
+}
+
 .text-ellipsis {
   overflow: hidden;
   text-overflow: ellipsis;