Convert BounceTrackingMitigationsView to Widget

Finish fixing UI Engineering Vision violations in the component itself
by replacing its base class and making adjustments to component creation
in tests and parent component.

Bug: 407749385
Change-Id: Idcc59847100d45c6661c687c40b3b38248a4f4f2
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/7228669
Commit-Queue: Piotr Paulski <[email protected]>
Reviewed-by: Danil Somsikov <[email protected]>

Author: Piotr Paulski

front_end/panels/application/BounceTrackingMitigationsTreeElement.ts

@@ -5,9 +5,7 @@
 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 LegacyWrapper from '../../ui/components/legacy_wrapper/legacy_wrapper.js';
 import {createIcon} from '../../ui/kit/kit.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/BounceTrackingMitig
 export const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 export class BounceTrackingMitigationsTreeElement extends ApplicationPanelTreeElement {
-  private view?: LegacyWrapper.LegacyWrapper.LegacyWrapper<
-      UI.Widget.Widget, ApplicationComponents.BounceTrackingMitigationsView.BounceTrackingMitigationsView>;
+  private view?: ApplicationComponents.BounceTrackingMitigationsView.BounceTrackingMitigationsView;
 
   constructor(resourcesPanel: ResourcesPanel) {
     super(resourcesPanel, i18nString(UIStrings.bounceTrackingMitigations), false, 'bounce-tracking-mitigations');
@@ -39,8 +36,7 @@ export class BounceTrackingMitigationsTreeElement extends ApplicationPanelTreeEl
   override onselect(selectedByUser?: boolean): boolean {
     super.onselect(selectedByUser);
     if (!this.view) {
-      this.view = LegacyWrapper.LegacyWrapper.legacyWrapper(
-          UI.Widget.Widget, new ApplicationComponents.BounceTrackingMitigationsView.BounceTrackingMitigationsView());
+      this.view = new ApplicationComponents.BounceTrackingMitigationsView.BounceTrackingMitigationsView();
     }
     this.showView(this.view);
     Host.userMetrics.panelShown('bounce-tracking-mitigations');

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

@@ -19,12 +19,14 @@ import * as ApplicationComponents from './components.js';
 
 async function renderBounceTrackingMitigationsView():
     Promise<ApplicationComponents.BounceTrackingMitigationsView.BounceTrackingMitigationsView> {
-  const component = new ApplicationComponents.BounceTrackingMitigationsView.BounceTrackingMitigationsView();
-  component.style.display = 'block';
-  component.style.width = '640px';
-  component.style.height = '480px';
+  const element = document.createElement('div');
+  element.style.display = 'block';
+  element.style.width = '640px';
+  element.style.height = '480px';
+  const component = new ApplicationComponents.BounceTrackingMitigationsView.BounceTrackingMitigationsView(element);
   renderElementIntoDOM(component);
 
+  await component.updateComplete;
   // The data-grid's renderer is scheduled, so we need to wait until the coordinator
   // is done before we can test against it.
   await RenderCoordinator.done();
@@ -34,7 +36,7 @@ async function renderBounceTrackingMitigationsView():
 
 function getInternalDataGridShadowRoot(
     component: ApplicationComponents.BounceTrackingMitigationsView.BounceTrackingMitigationsView): ShadowRoot {
-  const dataGrid = component.shadowRoot!.querySelector('devtools-data-grid')!;
+  const dataGrid = component.element.shadowRoot!.querySelector('devtools-data-grid')!;
   assert.isNotNull(dataGrid.shadowRoot);
   return dataGrid.shadowRoot;
 }
@@ -47,14 +49,14 @@ describeWithMockConnection('BounceTrackingMitigationsView', () => {
 
     const component = await renderBounceTrackingMitigationsView();
     await RenderCoordinator.done();
-    await component.wrapper?.updateComplete;
+    await component.updateComplete;
 
-    const nullGridElement = component.shadowRoot!.querySelector('devtools-data-grid');
+    const nullGridElement = component.element.shadowRoot!.querySelector('devtools-data-grid');
     assert.isNull(nullGridElement);
 
     await assertScreenshot('application/bounce-tracking-mitigations-view-initial.png');
 
-    const sections = component.shadowRoot!.querySelectorAll('devtools-report-section');
+    const sections = component.element.shadowRoot!.querySelectorAll('devtools-report-section');
     const sectionsText = Array.from(sections).map(section => section.textContent?.trim());
     const expected = [
       'Force run',
@@ -70,14 +72,14 @@ describeWithMockConnection('BounceTrackingMitigationsView', () => {
 
     const component = await renderBounceTrackingMitigationsView();
     await RenderCoordinator.done();
-    await component.wrapper?.updateComplete;
+    await component.updateComplete;
 
-    const nullGridElement = component.shadowRoot!.querySelector('devtools-data-grid');
+    const nullGridElement = component.element.shadowRoot!.querySelector('devtools-data-grid');
     assert.isNull(nullGridElement);
 
     await assertScreenshot('application/bounce-tracking-mitigations-view-disabled.png');
 
-    const sections = component.shadowRoot!.querySelectorAll('devtools-report-section');
+    const sections = component.element.shadowRoot!.querySelectorAll('devtools-report-section');
     const sectionsText = Array.from(sections).map(section => section.textContent?.trim());
     const expected = [
       'Bounce tracking mitigations are disabled.',
@@ -98,22 +100,22 @@ describeWithMockConnection('BounceTrackingMitigationsView', () => {
 
     const component = await renderBounceTrackingMitigationsView();
     await RenderCoordinator.done();
-    await component.wrapper?.updateComplete;
+    await component.updateComplete;
 
-    const forceRunButton = component.shadowRoot!.querySelector('[aria-label="Force run"]');
+    const forceRunButton = component.element.shadowRoot!.querySelector('[aria-label="Force run"]');
     assert.instanceOf(forceRunButton, HTMLElement);
     dispatchClickEvent(forceRunButton);
     await runBounceTrackingMitigationsPromise;
 
     await RenderCoordinator.done();
-    await component.wrapper?.updateComplete;
+    await component.updateComplete;
 
     await assertScreenshot('application/bounce-tracking-mitigations-view-empty.png');
 
-    const nullGridElement = component.shadowRoot!.querySelector('devtools-data-grid');
+    const nullGridElement = component.element.shadowRoot!.querySelector('devtools-data-grid');
     assert.isNull(nullGridElement);
 
-    const sections = component.shadowRoot!.querySelectorAll('devtools-report-section');
+    const sections = component.element.shadowRoot!.querySelectorAll('devtools-report-section');
     const sectionsText = Array.from(sections).map(section => section.textContent?.trim());
     const expected = [
       'Force run',
@@ -132,14 +134,14 @@ describeWithMockConnection('BounceTrackingMitigationsView', () => {
 
     const component = await renderBounceTrackingMitigationsView();
     await RenderCoordinator.done();
-    await component.wrapper?.updateComplete;
+    await component.updateComplete;
 
-    const forceRunButton = component.shadowRoot!.querySelector('[aria-label="Force run"]');
+    const forceRunButton = component.element.shadowRoot!.querySelector('[aria-label="Force run"]');
     assert.instanceOf(forceRunButton, HTMLElement);
     dispatchClickEvent(forceRunButton);
 
     await RenderCoordinator.done({waitForWork: true});
-    await component.wrapper?.updateComplete;
+    await component.updateComplete;
 
     await assertScreenshot('application/bounce-tracking-mitigations-view-populated.png');
 

front_end/panels/application/components/BounceTrackingMitigationsView.ts

@@ -8,7 +8,7 @@ import '../../../ui/legacy/components/data_grid/data_grid.js';
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as SDK from '../../../core/sdk/sdk.js';
 import * as Buttons from '../../../ui/components/buttons/buttons.js';
-import * as LegacyWrapper from '../../../ui/components/legacy_wrapper/legacy_wrapper.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';
 
@@ -166,7 +166,7 @@ const renderMainFrameInformation = (input: ViewInput): Lit.LitTemplate => {
   // clang-format on
 };
 
-export const DEFAULT_VIEW = (input: ViewInput, _output: undefined, target: HTMLElement|ShadowRoot): void => {
+export const DEFAULT_VIEW = (input: ViewInput, _output: undefined, target: HTMLElement): void => {
   // clang-format off
   Lit.render(html`
     <style>${bounceTrackingMitigationsViewStyles}</style>
@@ -178,42 +178,44 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: undefined, target: HTMLE
   // clang-format on
 };
 
-export class BounceTrackingMitigationsView extends LegacyWrapper.LegacyWrapper.WrappableComponent {
-  readonly #shadow = this.attachShadow({mode: 'open'});
+type ViewFunction = typeof DEFAULT_VIEW;
+
+export class BounceTrackingMitigationsView extends UI.Widget.Widget {
   #trackingSites: string[] = [];
   #screenStatus = ScreenStatusType.INITIALIZING;
   #seenButtonClick = false;
+  #view: ViewFunction;
+
+  constructor(element?: HTMLElement, view: ViewFunction = DEFAULT_VIEW) {
+    super(element, {useShadowDom: true, classes: ['overflow-auto']});
 
-  constructor() {
-    super();
+    this.#view = view;
 
     const mainTarget = SDK.TargetManager.TargetManager.instance().primaryPageTarget();
     if (!mainTarget) {
       this.#screenStatus = ScreenStatusType.RESULT;
     } else {
       void mainTarget.systemInfo().invoke_getFeatureState({featureState: 'DIPS'}).then(state => {
         this.#screenStatus = state.featureEnabled ? ScreenStatusType.RESULT : ScreenStatusType.DISABLED;
-        if (this.isConnected) {
-          this.#render();
-        }
+        this.requestUpdate();
       });
     }
   }
 
-  connectedCallback(): void {
-    void this.#render();
-    this.parentElement?.classList.add('overflow-auto');
+  override wasShown(): void {
+    super.wasShown();
+    this.requestUpdate();
   }
 
-  #render(): void {
-    DEFAULT_VIEW(
+  override performUpdate(): void {
+    this.#view(
         {
           screenStatus: this.#screenStatus,
           trackingSites: this.#trackingSites,
           seenButtonClick: this.#seenButtonClick,
           runMitigations: this.#runMitigations.bind(this),
         },
-        undefined, this.#shadow);
+        undefined, this.contentElement);
   }
 
   async #runMitigations(): Promise<void> {
@@ -225,7 +227,7 @@ export class BounceTrackingMitigationsView extends LegacyWrapper.LegacyWrapper.W
     this.#seenButtonClick = true;
     this.#screenStatus = ScreenStatusType.RUNNING;
 
-    void this.#render();
+    this.requestUpdate();
 
     const response = await mainTarget.storageAgent().invoke_runBounceTrackingMitigations();
     this.#trackingSites = [];
@@ -238,14 +240,6 @@ export class BounceTrackingMitigationsView extends LegacyWrapper.LegacyWrapper.W
 
   #renderMitigationsResult(): void {
     this.#screenStatus = ScreenStatusType.RESULT;
-    void this.#render();
-  }
-}
-
-customElements.define('devtools-bounce-tracking-mitigations-view', BounceTrackingMitigationsView);
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'devtools-bounce-tracking-mitigations-view': BounceTrackingMitigationsView;
+    this.requestUpdate();
   }
 }