Adopt UI eng vision in the BackForwardCacheView.ts

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

Author: danilsomsikov

front_end/panels/application/BackForwardCacheTreeElement.ts

@@ -6,8 +6,6 @@ import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import type * as Platform from '../../core/platform/platform.js';
 import * as IconButton from '../../ui/components/icon_button/icon_button.js';
-import * as LegacyWrapper from '../../ui/components/legacy_wrapper/legacy_wrapper.js';
-import * as UI from '../../ui/legacy/legacy.js';
 
 import {ApplicationPanelTreeElement} from './ApplicationPanelTreeElement.js';
 import * as ApplicationComponents from './components/components.js';
@@ -23,8 +21,7 @@ const str_ = i18n.i18n.registerUIStrings('panels/application/BackForwardCacheTre
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 export class BackForwardCacheTreeElement extends ApplicationPanelTreeElement {
-  private view?: LegacyWrapper.LegacyWrapper
-      .LegacyWrapper<UI.Widget.Widget, ApplicationComponents.BackForwardCacheView.BackForwardCacheView>;
+  private view?: ApplicationComponents.BackForwardCacheView.BackForwardCacheView;
 
   constructor(resourcesPanel: ResourcesPanel) {
     super(resourcesPanel, i18nString(UIStrings.backForwardCache), false, 'bfcache');
@@ -39,8 +36,7 @@ export class BackForwardCacheTreeElement extends ApplicationPanelTreeElement {
   override onselect(selectedByUser?: boolean): boolean {
     super.onselect(selectedByUser);
     if (!this.view) {
-      this.view = LegacyWrapper.LegacyWrapper.legacyWrapper(
-          UI.Widget.Widget, new ApplicationComponents.BackForwardCacheView.BackForwardCacheView());
+      this.view = new ApplicationComponents.BackForwardCacheView.BackForwardCacheView();
     }
     this.showView(this.view);
     Host.userMetrics.panelShown('back-forward-cache');

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

@@ -12,7 +12,6 @@ import {
 import {createTarget} from '../../../testing/EnvironmentHelpers.js';
 import {describeWithMockConnection} from '../../../testing/MockConnection.js';
 import {getMainFrame, navigate, setMockResourceTree} from '../../../testing/ResourceTreeHelpers.js';
-import * as RenderCoordinator from '../../../ui/components/render_coordinator/render_coordinator.js';
 import * as TreeOutline from '../../../ui/components/tree_outline/tree_outline.js';
 
 import * as ApplicationComponents from './components.js';
@@ -30,9 +29,8 @@ interface Node {
 async function renderBackForwardCacheView(): Promise<ApplicationComponents.BackForwardCacheView.BackForwardCacheView> {
   const component = new ApplicationComponents.BackForwardCacheView.BackForwardCacheView();
   renderElementIntoDOM(component);
-  await component.render();
-  assert.isNotNull(component.shadowRoot);
-  await RenderCoordinator.done();
+  component.requestUpdate();
+  await component.updateComplete;
   return component;
 }
 
@@ -61,15 +59,12 @@ describeWithMockConnection('BackForwardCacheView', () => {
   it('updates BFCacheView on main frame navigation', async () => {
     await renderBackForwardCacheView();
     navigate(getMainFrame(target), {}, Protocol.Page.NavigationType.BackForwardCacheRestore);
-    await RenderCoordinator.done({waitForWork: true});
   });
 
   it('updates BFCacheView on BFCache detail update', async () => {
     await renderBackForwardCacheView();
     resourceTreeModel.dispatchEventToListeners(
         SDK.ResourceTreeModel.Events.BackForwardCacheDetailsUpdated, getMainFrame(target));
-
-    await RenderCoordinator.done({waitForWork: true});
   });
 
   it('renders status if restored from BFCache', async () => {
@@ -81,7 +76,7 @@ describeWithMockConnection('BackForwardCacheView', () => {
       },
     } as unknown as SDK.ResourceTreeModel.ResourceTreeFrame;
     const component = await renderBackForwardCacheView();
-    const renderedStatus = component.shadowRoot!.querySelector('devtools-report-section');
+    const renderedStatus = component.contentElement.querySelector('devtools-report-section');
     assert.strictEqual(renderedStatus?.textContent?.trim(), 'Successfully served from back/forward cache.');
   });
 
@@ -107,11 +102,11 @@ describeWithMockConnection('BackForwardCacheView', () => {
       },
     } as unknown as SDK.ResourceTreeModel.ResourceTreeFrame;
     const component = await renderBackForwardCacheView();
-    const sectionHeaders = component.shadowRoot!.querySelectorAll('devtools-report-section-header');
+    const sectionHeaders = component.contentElement.querySelectorAll('devtools-report-section-header');
     const sectionHeadersText = Array.from(sectionHeaders).map(sectionHeader => sectionHeader.textContent?.trim());
     assert.deepEqual(sectionHeadersText, ['Actionable', 'Pending Support', 'Not Actionable']);
 
-    const sections = component.shadowRoot!.querySelectorAll('devtools-report-section');
+    const sections = component.contentElement.querySelectorAll('devtools-report-section');
     const sectionsText = Array.from(sections).map(section => section.textContent?.trim());
     const expected = [
       'Not served from back/forward cache: to trigger back/forward cache, use Chrome\'s back/forward buttons, or use the test button below to automatically navigate away and back.',
@@ -157,7 +152,7 @@ describeWithMockConnection('BackForwardCacheView', () => {
       },
     } as unknown as SDK.ResourceTreeModel.ResourceTreeFrame;
     const component = await renderBackForwardCacheView();
-    const treeOutline = component.shadowRoot!.querySelector('devtools-tree-outline');
+    const treeOutline = component.contentElement.querySelector('devtools-tree-outline');
     assert.instanceOf(treeOutline, TreeOutline.TreeOutline.TreeOutline);
     assert.isNotNull(treeOutline.shadowRoot);
 
@@ -223,11 +218,11 @@ describeWithMockConnection('BackForwardCacheView', () => {
     } as unknown as SDK.ResourceTreeModel.ResourceTreeFrame;
 
     const component = await renderBackForwardCacheView();
-    const sectionHeaders = component.shadowRoot!.querySelectorAll('devtools-report-section-header');
+    const sectionHeaders = component.contentElement.querySelectorAll('devtools-report-section-header');
     const sectionHeadersText = Array.from(sectionHeaders).map(sectionHeader => sectionHeader.textContent?.trim());
     assert.deepEqual(sectionHeadersText, ['Pending Support']);
 
-    const sections = component.shadowRoot!.querySelectorAll('devtools-report-section');
+    const sections = component.contentElement.querySelectorAll('devtools-report-section');
     const sectionsText = Array.from(sections).map(section => section.textContent?.trim());
     const expected = [
       'Not served from back/forward cache: to trigger back/forward cache, use Chrome\'s back/forward buttons, or use the test button below to automatically navigate away and back.',
@@ -237,7 +232,7 @@ describeWithMockConnection('BackForwardCacheView', () => {
     ];
     assert.deepEqual(sectionsText, expected);
 
-    const details = component.shadowRoot!.querySelector('.details-list devtools-expandable-list');
+    const details = component.contentElement.querySelector('.details-list devtools-expandable-list');
     details!.shadowRoot!.querySelector('button')!.click();
     const items = details!.shadowRoot!.querySelectorAll('.expandable-list-items .devtools-link');
     const detailsText = Array.from(items).map(detail => detail.textContent?.trim());
@@ -287,7 +282,7 @@ describeWithMockConnection('BackForwardCacheView', () => {
       },
     } as unknown as SDK.ResourceTreeModel.ResourceTreeFrame;
     const component = await renderBackForwardCacheView();
-    const button = component.shadowRoot!.querySelector('[aria-label="Test back/forward cache"]');
+    const button = component.contentElement.querySelector('[aria-label="Test back/forward cache"]');
     assert.instanceOf(button, HTMLElement);
     dispatchClickEvent(button);