chrome-devtools-frontend 1.0.1553956 → 1.0.1555430

package/front_end/models/stack_trace/StackTraceModel.ts

@@ -7,7 +7,14 @@ import type * as Protocol from '../../generated/protocol.js';
 
 // eslint-disable-next-line @devtools/es-modules-import
 import * as StackTrace from './stack_trace.js';
-import {AsyncFragmentImpl, FragmentImpl, FrameImpl, StackTraceImpl} from './StackTraceImpl.js';
+import {
+  type AnyStackTraceImpl,
+  AsyncFragmentImpl,
+  DebuggableFragmentImpl,
+  FragmentImpl,
+  FrameImpl,
+  StackTraceImpl
+} from './StackTraceImpl.js';
 import {type FrameNode, type RawFrame, Trie} from './Trie.js';
 
 /**
@@ -45,10 +52,21 @@ export class StackTraceModel extends SDK.SDKModel.SDKModel<unknown> {
     return new StackTraceImpl(syncFragment, asyncFragments);
   }
 
+  async createFromDebuggerPaused(
+      pausedDetails: SDK.DebuggerModel.DebuggerPausedDetails,
+      rawFramesToUIFrames: TranslateRawFrames): Promise<StackTrace.StackTrace.DebuggableStackTrace> {
+    const [syncFragment, asyncFragments] = await Promise.all([
+      this.#createDebuggableFragment(pausedDetails, rawFramesToUIFrames),
+      this.#createAsyncFragments(pausedDetails, rawFramesToUIFrames),
+    ]);
+
+    return new StackTraceImpl(syncFragment, asyncFragments);
+  }
+
   /** Trigger re-translation of all fragments with the provide script in their call stack */
   async scriptInfoChanged(script: SDK.Script.Script, translateRawFrames: TranslateRawFrames): Promise<void> {
     const translatePromises: Array<Promise<unknown>> = [];
-    let stackTracesToUpdate = new Set<StackTraceImpl>();
+    let stackTracesToUpdate = new Set<AnyStackTraceImpl>();
 
     for (const fragment of this.#affectedFragments(script)) {
       // We trigger re-translation only for fragments of leaf-nodes. Any fragment along the ancestor-chain
@@ -75,8 +93,22 @@ export class StackTraceModel extends SDK.SDKModel.SDKModel<unknown> {
     return fragment;
   }
 
+  async #createDebuggableFragment(
+      pausedDetails: SDK.DebuggerModel.DebuggerPausedDetails,
+      rawFramesToUIFrames: TranslateRawFrames): Promise<DebuggableFragmentImpl> {
+    const fragment = this.#createFragment(pausedDetails.callFrames.map(frame => ({
+                                                                         scriptId: frame.script.scriptId,
+                                                                         url: frame.script.sourceURL,
+                                                                         functionName: frame.functionName,
+                                                                         lineNumber: frame.location().lineNumber,
+                                                                         columnNumber: frame.location().columnNumber,
+                                                                       })));
+    await this.#translateFragment(fragment, rawFramesToUIFrames);
+    return new DebuggableFragmentImpl(fragment, pausedDetails.callFrames);
+  }
+
   async #createAsyncFragments(
-      stackTraceOrPausedEvent: Protocol.Runtime.StackTrace|Protocol.Debugger.PausedEvent,
+      stackTraceOrPausedEvent: Protocol.Runtime.StackTrace|SDK.DebuggerModel.DebuggerPausedDetails,
       rawFramesToUIFrames: TranslateRawFrames): Promise<AsyncFragmentImpl[]> {
     const asyncFragments: AsyncFragmentImpl[] = [];
     const translatePromises: Array<Promise<unknown>> = [];

package/front_end/panels/ai_assistance/AiAssistancePanel.ts

@@ -12,10 +12,10 @@ import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Protocol from '../../generated/protocol.js';
 import * as AiAssistanceModel from '../../models/ai_assistance/ai_assistance.js';
+import * as Annotations from '../../models/annotations/annotations.js';
 import * as Badges from '../../models/badges/badges.js';
 import * as TextUtils from '../../models/text_utils/text_utils.js';
 import * as Workspace from '../../models/workspace/workspace.js';
-import * as Annotations from '../../ui/components/annotations/annotations.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
 import * as Snackbars from '../../ui/components/snackbars/snackbars.js';
 import * as UIHelpers from '../../ui/helpers/helpers.js';
@@ -27,6 +27,7 @@ import * as NetworkPanel from '../network/network.js';
 import * as TimelinePanel from '../timeline/timeline.js';
 
 import aiAssistancePanelStyles from './aiAssistancePanel.css.js';
+import {ArtifactsViewer} from './components/ArtifactsViewer.js';
 import {
   type AnswerPart,
   type ChatMessage,
@@ -294,6 +295,8 @@ interface ToolbarViewInput {
   onExportConversationClick: () => void;
   onHelpClick: () => void;
   onSettingsClick: () => void;
+  onArtifactsSidebarToggle: () => void;
+  artifactsSidebarVisible: boolean;
   isLoading: boolean;
   showChatActions: boolean;
   showActiveConversationActions: boolean;
@@ -386,6 +389,13 @@ function toolbarView(input: ToolbarViewInput): Lit.LitTemplate {
           .jslogContext=${'freestyler.settings'}
           .variant=${Buttons.Button.Variant.TOOLBAR}
           @click=${input.onSettingsClick}></devtools-button>
+        <!-- If the green experiment is enabled, render the artifacts sidebar toggle button -->
+        ${Root.Runtime.hostConfig.devToolsGreenDevUi?.enabled ? html`<devtools-button
+          title=${i18nString(UIStrings.settings)}
+          aria-label=${i18nString(UIStrings.settings)}
+          .iconName=${input.artifactsSidebarVisible ? 'left-panel-open' : 'left-panel-close'}
+          .variant=${Buttons.Button.Variant.TOOLBAR}
+          @click=${input.onArtifactsSidebarToggle}></devtools-button>` : Lit.nothing}
       </devtools-toolbar>
     </div>
   `;
@@ -396,8 +406,9 @@ function defaultView(input: ViewInput, output: PanelViewOutput, target: HTMLElem
   // clang-format off
   function renderState(): Lit.TemplateResult {
     switch (input.state) {
-      case ViewState.CHAT_VIEW:
-        return html`<devtools-ai-chat-view
+      case ViewState.CHAT_VIEW: {
+      const aiChatView = html`
+        <devtools-ai-chat-view
           .props=${input.props}
           ${Lit.Directives.ref((el: Element | undefined) => {
             if (!el || !(el instanceof ChatView)) {
@@ -407,6 +418,30 @@ function defaultView(input: ViewInput, output: PanelViewOutput, target: HTMLElem
             output.chatView = el;
           })}
         ></devtools-ai-chat-view>`;
+        // If the green experiment is enabled, render the chat view inside
+        // a split view to also have an artifacts viewer sidebar.
+        if(Root.Runtime.hostConfig.devToolsGreenDevUi?.enabled) {
+            return html`
+            <devtools-split-view
+            direction="column"
+            sidebar-visibility=${input.props.isArtifactsSidebarOpen ? 'visible' : 'hidden'}
+            sidebar-position="second"
+            style="width: 100%;"
+          >
+            <div slot="main">
+              ${aiChatView}
+            </div>
+            <div slot="sidebar">
+              <devtools-widget
+              class="fill-panel"
+              .widgetConfig=${UI.Widget.widgetConfig(ArtifactsViewer)}
+              ></devtools-widget>
+            </div>
+          </devtools-split-view>`;
+        }
+
+        return aiChatView;
+      }
       case ViewState.EXPLORE_VIEW:
         return html`<devtools-widget
           class="fill-panel"
@@ -482,7 +517,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
   #selectedElement: AiAssistanceModel.StylingAgent.NodeContext|null = null;
   #selectedPerformanceTrace: AiAssistanceModel.PerformanceAgent.PerformanceTraceContext|null = null;
   #selectedRequest: AiAssistanceModel.NetworkAgent.RequestContext|null = null;
-
+  #isArtifactsSidebarOpen = false;
   // Messages displayed in the `ChatView` component.
   #messages: ChatMessage[] = [];
 
@@ -574,6 +609,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
           uploadImageInputEnabled: isAiAssistanceMultimodalUploadInputEnabled() &&
               this.#conversation.type === AiAssistanceModel.AiHistoryStorage.ConversationType.STYLING,
           markdownRenderer,
+          isArtifactsSidebarOpen: this.#isArtifactsSidebarOpen,
           onTextSubmit: async (
               text: string, imageInput?: Host.AidaClient.Part,
               multimodalInputType?: AiAssistanceModel.AiAgent.MultimodalInputType) => {
@@ -927,6 +963,11 @@ export class AiAssistancePanel extends UI.Panel.Panel {
       onSettingsClick: () => {
         void UI.ViewManager.ViewManager.instance().showView('chrome-ai');
       },
+      onArtifactsSidebarToggle: () => {
+        this.#isArtifactsSidebarOpen = !this.#isArtifactsSidebarOpen;
+        this.requestUpdate();
+      },
+      artifactsSidebarVisible: this.#isArtifactsSidebarOpen,
     };
   }
 

package/front_end/panels/ai_assistance/components/ArtifactsViewer.ts

@@ -0,0 +1,57 @@
+// Copyright 2025 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import * as UI from '../../../ui/legacy/legacy.js';
+import * as Lit from '../../../ui/lit/lit.js';
+
+import artifactsViewerStyles from './artifactsViewer.css.js';
+
+const {html, render} = Lit;
+
+export interface ViewInput {
+  artifacts: [];
+}
+
+export const DEFAULT_VIEW = (
+    _input: ViewInput,
+    _output: Record<string, unknown>,
+    target: HTMLElement,
+    ): void => {
+  // clang-format off
+  render(
+    html`
+      <style>${artifactsViewerStyles}</style>
+      <div>
+        Artifacts Viewer
+      </div>
+    `,
+    target
+  );
+  // clang-format on
+};
+
+export type View = typeof DEFAULT_VIEW;
+
+export class ArtifactsViewer extends UI.Widget.Widget {
+  #view: View;
+  constructor(element?: HTMLElement, view = DEFAULT_VIEW) {
+    super(element);
+    this.#view = view;
+  }
+
+  override wasShown(): void {
+    super.wasShown();
+    void this.requestUpdate();
+  }
+
+  override performUpdate(): Promise<void>|void {
+    this.#view(
+        {
+          artifacts: [],
+        },
+        {},
+        this.contentElement,
+    );
+  }
+}

package/front_end/panels/ai_assistance/components/ChatView.ts

@@ -265,6 +265,7 @@ export interface Props {
   inputPlaceholder: Platform.UIString.LocalizedString;
   disclaimerText: Platform.UIString.LocalizedString;
   isTextInputEmpty: boolean;
+  isArtifactsSidebarOpen: boolean;
   uploadImageInputEnabled?: boolean;
   markdownRenderer: MarkdownLitRenderer;
   additionalFloatyContext: UI.Floaty.FloatyContextSelection[];

package/front_end/panels/ai_assistance/components/artifactsViewer.css

@@ -0,0 +1,10 @@
+/*
+ * Copyright 2025 The Chromium Authors
+ * Use of this source code is governed by a BSD-style license that can be
+ * found in the LICENSE file.
+ */
+
+:host {
+  display: flex;
+  height: 100%;
+}

package/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');

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

@@ -1,7 +1,6 @@
 // Copyright 2023 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/report_view/report_view.js';
 import '../../../ui/legacy/components/data_grid/data_grid.js';
@@ -9,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';
 
@@ -58,7 +57,8 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/application/components/BounceTrackingMitigationsView.ts', UIStrings);
 export const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
-const enum ScreenStatusType {
+export const enum ScreenStatusType {
+  INITIALIZING = 'Initializing',
   RUNNING = 'Running',
   RESULT = 'Result',
   DISABLED = 'Disabled',
@@ -68,119 +68,155 @@ export interface BounceTrackingMitigationsViewData {
   trackingSites: string[];
 }
 
-export class BounceTrackingMitigationsView extends LegacyWrapper.LegacyWrapper.WrappableComponent {
-  readonly #shadow = this.attachShadow({mode: 'open'});
-  #trackingSites: string[] = [];
-  #screenStatus = ScreenStatusType.RESULT;
-  #checkedFeature = false;
-  #seenButtonClick = false;
-
-  connectedCallback(): void {
-    void this.#render();
-    this.parentElement?.classList.add('overflow-auto');
-  }
+export interface ViewInput {
+  screenStatus: ScreenStatusType;
+  trackingSites: string[];
+  seenButtonClick: boolean;
+  runMitigations: () => Promise<void>;
+}
 
-  async #render(): Promise<void> {
-    // clang-format off
-    Lit.render(html`
-      <style>${bounceTrackingMitigationsViewStyles}</style>
-      <devtools-report .data=${{reportTitle: i18nString(UIStrings.bounceTrackingMitigationsTitle)}}
-                       jslog=${VisualLogging.pane('bounce-tracking-mitigations')}>
-        ${await this.#renderMainFrameInformation()}
-      </devtools-report>
-    `, this.#shadow, {host: this});
-    // clang-format on
+const renderForceRunButton = (input: ViewInput): Lit.TemplateResult => {
+  const isMitigationRunning = (input.screenStatus === ScreenStatusType.RUNNING);
+
+  // clang-format off
+  return html`
+    <devtools-button
+      aria-label=${i18nString(UIStrings.forceRun)}
+      .disabled=${isMitigationRunning}
+      .spinner=${isMitigationRunning}
+      .variant=${Buttons.Button.Variant.PRIMARY}
+      @click=${input.runMitigations}
+      jslog=${VisualLogging.action('force-run').track({click: true})}>
+      ${isMitigationRunning ? html`
+        ${i18nString(UIStrings.runningMitigations)}`:`
+        ${i18nString(UIStrings.forceRun)}
+      `}
+    </devtools-button>
+  `;
+  // clang-format on
+};
+
+const renderDeletedSitesOrNoSitesMessage = (input: ViewInput): Lit.LitTemplate => {
+  if (!input.seenButtonClick) {
+    return Lit.nothing;
   }
 
-  async #renderMainFrameInformation(): Promise<Lit.TemplateResult> {
-    if (!this.#checkedFeature) {
-      await this.#checkFeatureState();
-    }
-
-    if (this.#screenStatus === ScreenStatusType.DISABLED) {
-      // clang-format off
-      return html`
-        <devtools-report-section>
-          ${i18nString(UIStrings.featureDisabled)}
-        </devtools-report-section>
-      `;
-      // clang-format on
-    }
-
+  if (input.trackingSites.length === 0) {
     // clang-format off
     return html`
       <devtools-report-section>
-        ${this.#renderForceRunButton()}
-      </devtools-report-section>
-      ${this.#renderDeletedSitesOrNoSitesMessage()}
-      <devtools-report-divider>
-      </devtools-report-divider>
-      <devtools-report-section>
-        <x-link href="https://privacycg.github.io/nav-tracking-mitigations/#bounce-tracking-mitigations" class="link"
-        jslog=${VisualLogging.link('learn-more').track({click: true})}>
-          ${i18nString(UIStrings.learnMore)}
-        </x-link>
+      ${(input.screenStatus === ScreenStatusType.RUNNING) ? html`
+        ${i18nString(UIStrings.checkingPotentialTrackers)}`:`
+        ${i18nString(UIStrings.noPotentialBounceTrackersIdentified)}
+      `}
       </devtools-report-section>
     `;
     // clang-format on
   }
 
-  #renderForceRunButton(): Lit.TemplateResult {
-    const isMitigationRunning = (this.#screenStatus === ScreenStatusType.RUNNING);
+  // clang-format off
+  return html`
+    <devtools-report-section>
+      <devtools-data-grid striped inline>
+        <table>
+          <tr>
+            <th id="sites" weight="10" sortable>
+              ${i18nString(UIStrings.stateDeletedFor)}
+            </th>
+          </tr>
+          ${input.trackingSites.map(site => html`
+            <tr><td>${site}</td></tr>`)}
+        </table>
+      </devtools-data-grid>
+    </devtools-report-section>
+  `;
+  // clang-format on
+};
+
+const renderMainFrameInformation = (input: ViewInput): Lit.LitTemplate => {
+  if (input.screenStatus === ScreenStatusType.INITIALIZING) {
+    return Lit.nothing;
+  }
 
+  if (input.screenStatus === ScreenStatusType.DISABLED) {
     // clang-format off
     return html`
-      <devtools-button
-        aria-label=${i18nString(UIStrings.forceRun)}
-        .disabled=${isMitigationRunning}
-        .spinner=${isMitigationRunning}
-        .variant=${Buttons.Button.Variant.PRIMARY}
-        @click=${this.#runMitigations}
-        jslog=${VisualLogging.action('force-run').track({click: true})}>
-        ${isMitigationRunning ? html`
-          ${i18nString(UIStrings.runningMitigations)}`:`
-          ${i18nString(UIStrings.forceRun)}
-        `}
-      </devtools-button>
+      <devtools-report-section>
+        ${i18nString(UIStrings.featureDisabled)}
+      </devtools-report-section>
     `;
     // clang-format on
   }
 
-  #renderDeletedSitesOrNoSitesMessage(): Lit.LitTemplate {
-    if (!this.#seenButtonClick) {
-      return Lit.nothing;
-    }
+  // clang-format off
+  return html`
+    <devtools-report-section>
+      ${renderForceRunButton(input)}
+    </devtools-report-section>
+    ${renderDeletedSitesOrNoSitesMessage(input)}
+    <devtools-report-divider>
+    </devtools-report-divider>
+    <devtools-report-section>
+      <x-link href="https://privacycg.github.io/nav-tracking-mitigations/#bounce-tracking-mitigations" class="link"
+      jslog=${VisualLogging.link('learn-more').track({click: true})}>
+        ${i18nString(UIStrings.learnMore)}
+      </x-link>
+    </devtools-report-section>
+  `;
+  // clang-format on
+};
+
+export const DEFAULT_VIEW = (input: ViewInput, _output: undefined, target: HTMLElement): void => {
+  // clang-format off
+  Lit.render(html`
+    <style>${bounceTrackingMitigationsViewStyles}</style>
+    <style>${UI.inspectorCommonStyles}</style>
+    <devtools-report .data=${{reportTitle: i18nString(UIStrings.bounceTrackingMitigationsTitle)}}
+                      jslog=${VisualLogging.pane('bounce-tracking-mitigations')}>
+      ${renderMainFrameInformation(input)}
+    </devtools-report>
+  `, target);
+  // clang-format on
+};
+
+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']});
 
-    if (this.#trackingSites.length === 0) {
-      // clang-format off
-      return html`
-        <devtools-report-section>
-        ${(this.#screenStatus === ScreenStatusType.RUNNING) ? html`
-          ${i18nString(UIStrings.checkingPotentialTrackers)}`:`
-          ${i18nString(UIStrings.noPotentialBounceTrackersIdentified)}
-        `}
-        </devtools-report-section>
-      `;
-      // clang-format on
+    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;
+        this.requestUpdate();
+      });
     }
+  }
 
-    // clang-format off
-    return html`
-      <devtools-report-section>
-        <devtools-data-grid striped inline>
-          <table>
-            <tr>
-              <th id="sites" weight="10" sortable>
-                ${i18nString(UIStrings.stateDeletedFor)}
-              </th>
-            </tr>
-            ${this.#trackingSites.map(site => html`
-              <tr><td>${site}</td></tr>`)}
-          </table>
-        </devtools-data-grid>
-      </devtools-report-section>
-    `;
-    // clang-format on
+  override wasShown(): void {
+    super.wasShown();
+    this.requestUpdate();
+  }
+
+  override performUpdate(): void {
+    this.#view(
+        {
+          screenStatus: this.#screenStatus,
+          trackingSites: this.#trackingSites,
+          seenButtonClick: this.#seenButtonClick,
+          runMitigations: this.#runMitigations.bind(this),
+        },
+        undefined, this.contentElement);
   }
 
   async #runMitigations(): Promise<void> {
@@ -192,7 +228,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 = [];
@@ -205,27 +241,6 @@ export class BounceTrackingMitigationsView extends LegacyWrapper.LegacyWrapper.W
 
   #renderMitigationsResult(): void {
     this.#screenStatus = ScreenStatusType.RESULT;
-    void this.#render();
-  }
-
-  async #checkFeatureState(): Promise<void> {
-    this.#checkedFeature = true;
-
-    const mainTarget = SDK.TargetManager.TargetManager.instance().primaryPageTarget();
-    if (!mainTarget) {
-      return;
-    }
-
-    if (!(await mainTarget.systemInfo().invoke_getFeatureState({featureState: 'DIPS'})).featureEnabled) {
-      this.#screenStatus = ScreenStatusType.DISABLED;
-    }
-  }
-}
-
-customElements.define('devtools-bounce-tracking-mitigations-view', BounceTrackingMitigationsView);
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'devtools-bounce-tracking-mitigations-view': BounceTrackingMitigationsView;
+    this.requestUpdate();
   }
 }

package/front_end/panels/application/preloading/PreloadingView.ts

@@ -417,7 +417,13 @@ export class PreloadingAttemptView extends UI.Widget.VBox {
     this.ruleSetSelector = new PreloadingRuleSetSelector(() => this.render());
     toolbar.appendToolbarItem(this.ruleSetSelector.item());
 
-    this.preloadingGrid.addEventListener('select', this.onPreloadingGridCellFocused.bind(this));
+    this.preloadingGrid.onSelect = this.onPreloadingGridCellFocused.bind(this);
+
+    const preloadingGridContainer = document.createElement('div');
+    preloadingGridContainer.className = 'preloading-grid-widget-container';
+    preloadingGridContainer.style = 'height: 100%';
+    this.preloadingGrid.show(preloadingGridContainer, null, true);
+
     render(
         html`
         <div class="empty-state">
@@ -433,7 +439,7 @@ export class PreloadingAttemptView extends UI.Widget.VBox {
         </div>
         <devtools-split-view sidebar-position="second">
           <div slot="main" class="overflow-auto" style="height: 100%">
-            ${this.preloadingGrid}
+            ${preloadingGridContainer}
           </div>
           <div slot="sidebar" class="overflow-auto" style="height: 100%">
             ${this.preloadingDetails}
@@ -500,15 +506,15 @@ export class PreloadingAttemptView extends UI.Widget.VBox {
         ruleSets,
       };
     });
-    this.preloadingGrid.update({rows, pageURL: pageURL()});
+    this.preloadingGrid.rows = rows;
+    this.preloadingGrid.pageURL = pageURL();
     this.contentElement.classList.toggle('empty', rows.length === 0);
 
     this.updatePreloadingDetails();
   }
 
-  private onPreloadingGridCellFocused(event: Event): void {
-    const focusedEvent = event as CustomEvent<SDK.PreloadingModel.PreloadingAttemptId>;
-    this.focusedPreloadingAttemptId = focusedEvent.detail;
+  private onPreloadingGridCellFocused({rowId}: {rowId: string}): void {
+    this.focusedPreloadingAttemptId = rowId;
     this.render();
   }