chrome-devtools-frontend 1.0.1625079 → 1.0.1625854

package/front_end/models/issues_manager/RelatedIssue.ts

@@ -5,7 +5,6 @@
 import * as Common from '../../core/common/common.js';
 import * as SDK from '../../core/sdk/sdk.js';
 
-import {CookieIssue, CookieIssueSubCategory} from './CookieIssue.js';
 import type {Issue, IssueCategory} from './Issue.js';
 import {IssuesManager} from './IssuesManager.js';
 
@@ -56,19 +55,6 @@ export function hasIssueOfCategory(obj: IssuesAssociatable, category: IssueCateg
   return issuesAssociatedWith(issues, obj).some(issue => issue.getCategory() === category);
 }
 
-export function hasThirdPartyPhaseoutCookieIssue(obj: IssuesAssociatable): boolean {
-  const issues = Array.from(IssuesManager.instance().issues());
-  return issuesAssociatedWith(issues, obj)
-      .some(issue => CookieIssue.getSubCategory(issue.code()) === CookieIssueSubCategory.THIRD_PARTY_PHASEOUT_COOKIE);
-}
-
-export function hasThirdPartyPhaseoutCookieIssueForDomain(domain: string): boolean {
-  const issues = Array.from(IssuesManager.instance().issues());
-  const issuesForDomain = issues.filter(issue => Array.from(issue.cookies()).some(cookie => cookie.domain === domain));
-  return issuesForDomain.some(
-      issue => CookieIssue.getSubCategory(issue.code()) === CookieIssueSubCategory.THIRD_PARTY_PHASEOUT_COOKIE);
-}
-
 export async function reveal(obj: IssuesAssociatable, category?: IssueCategory): Promise<void|undefined> {
   if (typeof obj === 'string') {
     const issue = IssuesManager.instance().getIssueById(obj);

package/front_end/models/workspace/IgnoreListManager.ts

@@ -419,7 +419,7 @@ export class IgnoreListManager extends Common.ObjectWrapper.ObjectWrapper<EventT
     }
 
     let regexPatterns = this.getSkipStackFramesPatternSetting().getAsArray();
-    const regexValue = IgnoreListManager.instance().urlToRegExpString(url);
+    const regexValue = this.urlToRegExpString(url);
     if (!regexValue) {
       return;
     }

package/front_end/models/workspace/UISourceCode.ts

@@ -214,7 +214,7 @@ export class UISourceCode extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
     if (!content) {
       return null;
     }
-    return content.isEncoded && content.content ? window.atob(content.content) : content.content;
+    return content.isEncoded && content.content ? atob(content.content) : content.content;
   }
 
   /** Only used to compare whether content changed */
@@ -222,7 +222,7 @@ export class UISourceCode extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
     if (!content || TextUtils.ContentData.ContentData.isError(content)) {
       return null;
     }
-    return content.createdFromBase64 ? window.atob(content.base64) : content.text;
+    return content.createdFromBase64 ? atob(content.base64) : content.text;
   }
 
   async checkContentUpdated(): Promise<void> {
@@ -264,9 +264,14 @@ export class UISourceCode extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
     await Common.Revealer.reveal(this);
 
     // Make sure we are in the next frame before stopping the world with confirm
-    await new Promise(resolve => window.setTimeout(resolve, 0));
-
-    const shouldUpdate = window.confirm(i18nString(UIStrings.thisFileWasChangedExternally));
+    await new Promise(resolve => setTimeout(resolve, 0));
+
+    // FIXME: we should not call confirm() from the models.
+    const shouldUpdate = typeof (globalThis as unknown as {confirm: (msg: string) => boolean}).confirm === 'function' ?
+        (globalThis as unknown as {
+          confirm: (msg: string) => boolean,
+        }).confirm(i18nString(UIStrings.thisFileWasChangedExternally)) :
+        true;
     if (shouldUpdate) {
       this.#contentCommitted(updatedContent.content, false);
     } else {

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

@@ -1974,21 +1974,38 @@ async function makeTimelineRangeSummaryWidget(widgetData: TimelineRangeSummaryAi
     Promise<WidgetMakerResponse|null> {
   const {bounds, parsedTrace, track} = widgetData.data;
   let events: readonly Trace.Types.Events.Event[] = [];
+
+  // Note: right now "main" is the only track we support, but in the future we
+  // can imagine supporting more.
   if (track === 'main') {
-    const flameChartView = Timeline.TimelinePanel.TimelinePanel.instance().getFlameChart();
-    const mainDataProvider = flameChartView.getMainDataProvider();
-    const mainTrack =
-        mainDataProvider.timelineData().groups.find((group: {name: string}) => group.name.startsWith('Main \u2014 '));
-    if (mainTrack) {
-      events = mainDataProvider.groupTreeEvents(mainTrack) ?? [];
+    // To find the main thread, we first find the navigationId that is "active"
+    // for the given bounds. We do this because the "main" thread can change on
+    // navigations, so this is the most accurate way to find the main thread at
+    // the timespan we are interested in.
+    let navigationId: string|undefined;
+    for (const nav of parsedTrace.data.Meta.mainFrameNavigations) {
+      if (nav.ts <= bounds.min) {
+        navigationId = nav.args.data?.navigationId;
+      } else {
+        break;
+      }
     }
+    const mainThread = AiAssistanceModel.AIQueries.AIQueries.findMainThread(navigationId, parsedTrace);
+    if (mainThread) {
+      events = mainThread.entries;
+      AiAssistanceModel.Debug.debugLog(
+          `TimelineRangeSummaryAiWidget found main thread. PID:`, mainThread.pid, 'TID:', mainThread.tid,
+          'Number of entries:', mainThread.entries.length);
+    }
+  }
+  if (!events) {
+    AiAssistanceModel.Debug.debugLog(`Warning: could not find events for TimelineRangeSummaryAiWidget`, widgetData);
+    return null;
   }
-  const eventsArray = Array.from(events);
-  eventsArray.sort((a, b) => a.ts - b.ts);
 
   const thirdPartyTree = new Timeline.ThirdPartyTreeView.ThirdPartyTreeViewWidget();
   const mapper = Trace.EntityMapper.EntityMapper.getOrCreate(parsedTrace);
-  thirdPartyTree.model = {selectedEvents: eventsArray, parsedTrace, entityMapper: mapper};
+  thirdPartyTree.model = {selectedEvents: events as Trace.Types.Events.Event[], parsedTrace, entityMapper: mapper};
   thirdPartyTree.activeSelection = Timeline.TimelineSelection.selectionFromRangeMicroSeconds(bounds.min, bounds.max);
   thirdPartyTree.refreshTree(true);
 

package/front_end/panels/application/ApplicationPanelSidebar.ts

@@ -40,7 +40,6 @@ import * as Platform from '../../core/platform/platform.js';
 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 IssuesManager from '../../models/issues_manager/issues_manager.js';
 import * as LegacyWrapper from '../../ui/components/legacy_wrapper/legacy_wrapper.js';
 import {createIcon} from '../../ui/kit/kit.js';
 import * as SourceFrame from '../../ui/legacy/components/source_frame/source_frame.js';
@@ -54,7 +53,6 @@ import {BackgroundServiceView} from './BackgroundServiceView.js';
 import {BounceTrackingMitigationsTreeElement} from './BounceTrackingMitigationsTreeElement.js';
 import {DeviceBoundSessionsModel} from './DeviceBoundSessionsModel.js';
 import {RootTreeElement as DeviceBoundSessionsRootTreeElement} from './DeviceBoundSessionsTreeElement.js';
-import {type DOMStorage, DOMStorageModel, Events as DOMStorageModelEvents} from './DOMStorageModel.js';
 import {
   Events as ExtensionStorageModelEvents,
   type ExtensionStorage,
@@ -275,11 +273,6 @@ const UIStrings = {
    * @description Application sidebar panel
    */
   applicationSidebarPanel: 'Application panel sidebar',
-  /**
-   * @description Tooltip in Application Panel Sidebar of the Application panel
-   * @example {https://example.com} PH1
-   */
-  thirdPartyPhaseout: 'Cookies from {PH1} may have been blocked due to third-party cookie phaseout.',
   /**
    * @description Description text in the Application Panel describing a frame's resources
    */
@@ -352,7 +345,7 @@ export class ApplicationPanelSidebar extends UI.Widget.VBox implements SDK.Targe
   deviceBoundSessionsModel: DeviceBoundSessionsModel|undefined;
   preloadingSummaryTreeElement: PreloadingSummaryTreeElement|undefined;
   private readonly resourcesSection: ResourcesSection;
-  private domStorageTreeElements: Map<DOMStorage, DOMStorageTreeElement>;
+  private domStorageTreeElements: Map<SDK.DOMStorageModel.DOMStorage, DOMStorageTreeElement>;
   private extensionIdToStorageTreeParentElement: Map<string, ExtensionStorageTreeParentElement>;
   private extensionStorageModels: ExtensionStorageModel[];
   private extensionStorageTreeElements: Map<string, ExtensionStorageTreeElement>;
@@ -524,9 +517,9 @@ export class ApplicationPanelSidebar extends UI.Widget.VBox implements SDK.Targe
     }
 
     SDK.TargetManager.TargetManager.instance().observeModels(
-        DOMStorageModel, {
-          modelAdded: (model: DOMStorageModel) => this.domStorageModelAdded(model),
-          modelRemoved: (model: DOMStorageModel) => this.domStorageModelRemoved(model),
+        SDK.DOMStorageModel.DOMStorageModel, {
+          modelAdded: (model: SDK.DOMStorageModel.DOMStorageModel) => this.domStorageModelAdded(model),
+          modelRemoved: (model: SDK.DOMStorageModel.DOMStorageModel) => this.domStorageModelRemoved(model),
         },
         {scoped: true});
 
@@ -659,17 +652,17 @@ export class ApplicationPanelSidebar extends UI.Widget.VBox implements SDK.Targe
     }
   }
 
-  private domStorageModelAdded(model: DOMStorageModel): void {
+  private domStorageModelAdded(model: SDK.DOMStorageModel.DOMStorageModel): void {
     model.enable();
     model.storages().forEach(this.addDOMStorage.bind(this));
-    model.addEventListener(DOMStorageModelEvents.DOM_STORAGE_ADDED, this.domStorageAdded, this);
-    model.addEventListener(DOMStorageModelEvents.DOM_STORAGE_REMOVED, this.domStorageRemoved, this);
+    model.addEventListener(SDK.DOMStorageModel.Events.DOM_STORAGE_ADDED, this.domStorageAdded, this);
+    model.addEventListener(SDK.DOMStorageModel.Events.DOM_STORAGE_REMOVED, this.domStorageRemoved, this);
   }
 
-  private domStorageModelRemoved(model: DOMStorageModel): void {
+  private domStorageModelRemoved(model: SDK.DOMStorageModel.DOMStorageModel): void {
     model.storages().forEach(this.removeDOMStorage.bind(this));
-    model.removeEventListener(DOMStorageModelEvents.DOM_STORAGE_ADDED, this.domStorageAdded, this);
-    model.removeEventListener(DOMStorageModelEvents.DOM_STORAGE_REMOVED, this.domStorageRemoved, this);
+    model.removeEventListener(SDK.DOMStorageModel.Events.DOM_STORAGE_ADDED, this.domStorageAdded, this);
+    model.removeEventListener(SDK.DOMStorageModel.Events.DOM_STORAGE_REMOVED, this.domStorageRemoved, this);
   }
 
   private extensionStorageModelAdded(model: ExtensionStorageModel): void {
@@ -829,12 +822,12 @@ export class ApplicationPanelSidebar extends UI.Widget.VBox implements SDK.Targe
     }
   }
 
-  private domStorageAdded(event: Common.EventTarget.EventTargetEvent<DOMStorage>): void {
+  private domStorageAdded(event: Common.EventTarget.EventTargetEvent<SDK.DOMStorageModel.DOMStorage>): void {
     const domStorage = (event.data);
     this.addDOMStorage(domStorage);
   }
 
-  private addDOMStorage(domStorage: DOMStorage): void {
+  private addDOMStorage(domStorage: SDK.DOMStorageModel.DOMStorage): void {
     console.assert(!this.domStorageTreeElements.get(domStorage));
     console.assert(Boolean(domStorage.storageKey));
 
@@ -853,12 +846,12 @@ export class ApplicationPanelSidebar extends UI.Widget.VBox implements SDK.Targe
     }
   }
 
-  private domStorageRemoved(event: Common.EventTarget.EventTargetEvent<DOMStorage>): void {
+  private domStorageRemoved(event: Common.EventTarget.EventTargetEvent<SDK.DOMStorageModel.DOMStorage>): void {
     const domStorage = (event.data);
     this.removeDOMStorage(domStorage);
   }
 
-  private removeDOMStorage(domStorage: DOMStorage): void {
+  private removeDOMStorage(domStorage: SDK.DOMStorageModel.DOMStorage): void {
     const treeElement = this.domStorageTreeElements.get(domStorage);
     if (!treeElement) {
       return;
@@ -1150,7 +1143,7 @@ export class BackgroundServiceTreeElement extends ApplicationPanelTreeElement {
     }
     this.showView(this.view);
     UI.Context.Context.instance().setFlavor(BackgroundServiceView, this.view);
-    Host.userMetrics.panelShown('background_service_' + this.serviceName);
+    UI.UIUserMetrics.UIUserMetrics.instance().panelShown('background_service_' + this.serviceName);
     return false;
   }
 }
@@ -1174,7 +1167,7 @@ export class ServiceWorkersTreeElement extends ApplicationPanelTreeElement {
       this.view = new ServiceWorkersView();
     }
     this.showView(this.view);
-    Host.userMetrics.panelShown('service-workers');
+    UI.UIUserMetrics.UIUserMetrics.instance().panelShown('service-workers');
     return false;
   }
 }
@@ -1201,7 +1194,7 @@ export class AppManifestTreeElement extends ApplicationPanelTreeElement {
   override onselect(selectedByUser?: boolean): boolean {
     super.onselect(selectedByUser);
     this.showView(this.view);
-    Host.userMetrics.panelShown('app-manifest');
+    UI.UIUserMetrics.UIUserMetrics.instance().panelShown('app-manifest');
     return false;
   }
 
@@ -1260,7 +1253,8 @@ export class ClearStorageTreeElement extends ApplicationPanelTreeElement {
       this.view = new StorageView();
     }
     this.showView(this.view);
-    Host.userMetrics.panelShown(Host.UserMetrics.PanelCodes[Host.UserMetrics.PanelCodes.storage]);
+    UI.UIUserMetrics.UIUserMetrics.instance().panelShown(
+        Host.UserMetrics.PanelCodes[Host.UserMetrics.PanelCodes.storage]);
     return false;
   }
 }
@@ -1505,7 +1499,7 @@ export class IDBDatabaseTreeElement extends ApplicationPanelTreeElement {
     }
 
     this.showView(this.view);
-    Host.userMetrics.panelShown('indexed-db');
+    UI.UIUserMetrics.UIUserMetrics.instance().panelShown('indexed-db');
     return false;
   }
 
@@ -1641,7 +1635,7 @@ export class IDBObjectStoreTreeElement extends ApplicationPanelTreeElement {
     }
 
     this.showView(this.view);
-    Host.userMetrics.panelShown('indexed-db');
+    UI.UIUserMetrics.UIUserMetrics.instance().panelShown('indexed-db');
     return false;
   }
 
@@ -1732,7 +1726,7 @@ export class IDBIndexTreeElement extends ApplicationPanelTreeElement {
     }
 
     this.showView(this.view);
-    Host.userMetrics.panelShown('indexed-db');
+    UI.UIUserMetrics.UIUserMetrics.instance().panelShown('indexed-db');
     return false;
   }
 
@@ -1744,8 +1738,8 @@ export class IDBIndexTreeElement extends ApplicationPanelTreeElement {
 }
 
 export class DOMStorageTreeElement extends ApplicationPanelTreeElement {
-  private readonly domStorage: DOMStorage;
-  constructor(storagePanel: ResourcesPanel, domStorage: DOMStorage) {
+  private readonly domStorage: SDK.DOMStorageModel.DOMStorage;
+  constructor(storagePanel: ResourcesPanel, domStorage: SDK.DOMStorageModel.DOMStorage) {
     super(
         storagePanel,
         domStorage.storageKey ? SDK.StorageKeyManager.parseStorageKey(domStorage.storageKey).origin :
@@ -1763,7 +1757,7 @@ export class DOMStorageTreeElement extends ApplicationPanelTreeElement {
 
   override onselect(selectedByUser?: boolean): boolean {
     super.onselect(selectedByUser);
-    Host.userMetrics.panelShown('dom-storage');
+    UI.UIUserMetrics.UIUserMetrics.instance().panelShown('dom-storage');
     this.resourcesPanel.showDOMStorage(this.domStorage);
     return false;
   }
@@ -1803,7 +1797,7 @@ export class ExtensionStorageTreeElement extends ApplicationPanelTreeElement {
   override onselect(selectedByUser?: boolean): boolean {
     super.onselect(selectedByUser);
     this.resourcesPanel.showExtensionStorage(this.extensionStorage);
-    Host.userMetrics.panelShown('extension-storage');
+    UI.UIUserMetrics.UIUserMetrics.instance().panelShown('extension-storage');
     return false;
   }
 
@@ -1846,11 +1840,6 @@ export class CookieTreeElement extends ApplicationPanelTreeElement {
     this.#cookieDomain = cookieUrl.securityOrigin();
     this.tooltip = i18nString(UIStrings.cookiesUsedByFramesFromS, {PH1: this.#cookieDomain});
     const icon = createIcon('cookie');
-    // Note that we cannot use `cookieDomainInternal` here since it contains scheme.
-    if (IssuesManager.RelatedIssue.hasThirdPartyPhaseoutCookieIssueForDomain(cookieUrl.domain())) {
-      icon.name = 'warning-filled';
-      this.tooltip = i18nString(UIStrings.thirdPartyPhaseout, {PH1: this.#cookieDomain});
-    }
     this.setLeadingIcons([icon]);
   }
 
@@ -1878,7 +1867,8 @@ export class CookieTreeElement extends ApplicationPanelTreeElement {
   override onselect(selectedByUser?: boolean): boolean {
     super.onselect(selectedByUser);
     this.resourcesPanel.showCookies(this.target, this.#cookieDomain);
-    Host.userMetrics.panelShown(Host.UserMetrics.PanelCodes[Host.UserMetrics.PanelCodes.cookies]);
+    UI.UIUserMetrics.UIUserMetrics.instance().panelShown(
+        Host.UserMetrics.PanelCodes[Host.UserMetrics.PanelCodes.cookies]);
     return false;
   }
 }
@@ -2231,7 +2221,7 @@ export class FrameTreeElement extends ApplicationPanelTreeElement {
       this.view = new FrameDetailsReportView();
       this.view.frame = this.frame;
     }
-    Host.userMetrics.panelShown('frame-details');
+    UI.UIUserMetrics.UIUserMetrics.instance().panelShown('frame-details');
     this.showView(this.view);
 
     this.listItemElement.classList.remove('hovered');
@@ -2405,7 +2395,7 @@ export class FrameResourceTreeElement extends ApplicationPanelTreeElement {
     } else {
       void this.panel.scheduleShowView(this.preparePreview());
     }
-    Host.userMetrics.panelShown('frame-resource');
+    UI.UIUserMetrics.UIUserMetrics.instance().panelShown('frame-resource');
     return false;
   }
 
@@ -2493,7 +2483,7 @@ class FrameWindowTreeElement extends ApplicationPanelTreeElement {
       this.view.requestUpdate();
     }
     this.showView(this.view);
-    Host.userMetrics.panelShown('frame-window');
+    UI.UIUserMetrics.UIUserMetrics.instance().panelShown('frame-window');
     return false;
   }
 
@@ -2522,7 +2512,7 @@ class WorkerTreeElement extends ApplicationPanelTreeElement {
       this.view.requestUpdate();
     }
     this.showView(this.view);
-    Host.userMetrics.panelShown('frame-worker');
+    UI.UIUserMetrics.UIUserMetrics.instance().panelShown('frame-worker');
     return false;
   }
 

package/front_end/panels/application/BackForwardCacheTreeElement.ts

@@ -2,10 +2,10 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-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 {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';
@@ -39,7 +39,7 @@ export class BackForwardCacheTreeElement extends ApplicationPanelTreeElement {
       this.view = new ApplicationComponents.BackForwardCacheView.BackForwardCacheView();
     }
     this.showView(this.view);
-    Host.userMetrics.panelShown('back-forward-cache');
+    UI.UIUserMetrics.UIUserMetrics.instance().panelShown('back-forward-cache');
 
     return false;
   }

package/front_end/panels/application/BounceTrackingMitigationsTreeElement.ts

@@ -2,10 +2,10 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-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 {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';
@@ -39,7 +39,7 @@ export class BounceTrackingMitigationsTreeElement extends ApplicationPanelTreeEl
       this.view = new ApplicationComponents.BounceTrackingMitigationsView.BounceTrackingMitigationsView();
     }
     this.showView(this.view);
-    Host.userMetrics.panelShown('bounce-tracking-mitigations');
+    UI.UIUserMetrics.UIUserMetrics.instance().panelShown('bounce-tracking-mitigations');
     return false;
   }
 }

package/front_end/panels/application/DOMStorageItemsView.ts

@@ -32,12 +32,12 @@
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import type * as Platform from '../../core/platform/platform.js';
+import * as SDK from '../../core/sdk/sdk.js';
 import * as TextUtils from '../../models/text_utils/text_utils.js';
 import * as SourceFrame from '../../ui/legacy/components/source_frame/source_frame.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
-import {DOMStorage} from './DOMStorageModel.js';
 import {KeyValueStorageItemsView} from './KeyValueStorageItemsView.js';
 
 const UIStrings = {
@@ -58,10 +58,10 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/application/DOMStorageItemsView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 export class DOMStorageItemsView extends KeyValueStorageItemsView {
-  private domStorage: DOMStorage;
+  private domStorage: SDK.DOMStorageModel.DOMStorage;
   private eventListeners: Common.EventTarget.EventDescriptor[];
 
-  constructor(domStorage: DOMStorage) {
+  constructor(domStorage: SDK.DOMStorageModel.DOMStorage) {
     super(
         i18nString(UIStrings.domStorageItems), 'dom-storage', true, /* view=*/ undefined, /* metadataView=*/ undefined,
         /* jslog=*/ undefined, ['storage-view', 'table']);
@@ -91,7 +91,7 @@ export class DOMStorageItemsView extends KeyValueStorageItemsView {
     );
   }
 
-  setStorage(domStorage: DOMStorage): void {
+  setStorage(domStorage: SDK.DOMStorageModel.DOMStorage): void {
     Common.EventTarget.removeEventListeners(this.eventListeners);
     this.domStorage = domStorage;
     const storageKind = domStorage.isLocalStorage ? 'local-storage-data' : 'session-storage-data';
@@ -100,10 +100,14 @@ export class DOMStorageItemsView extends KeyValueStorageItemsView {
       this.toolbar?.setStorageKey(domStorage.storageKey);
     }
     this.eventListeners = [
-      this.domStorage.addEventListener(DOMStorage.Events.DOM_STORAGE_ITEMS_CLEARED, this.domStorageItemsCleared, this),
-      this.domStorage.addEventListener(DOMStorage.Events.DOM_STORAGE_ITEM_REMOVED, this.domStorageItemRemoved, this),
-      this.domStorage.addEventListener(DOMStorage.Events.DOM_STORAGE_ITEM_ADDED, this.domStorageItemAdded, this),
-      this.domStorage.addEventListener(DOMStorage.Events.DOM_STORAGE_ITEM_UPDATED, this.domStorageItemUpdated, this),
+      this.domStorage.addEventListener(
+          SDK.DOMStorageModel.DOMStorage.Events.DOM_STORAGE_ITEMS_CLEARED, this.domStorageItemsCleared, this),
+      this.domStorage.addEventListener(
+          SDK.DOMStorageModel.DOMStorage.Events.DOM_STORAGE_ITEM_REMOVED, this.domStorageItemRemoved, this),
+      this.domStorage.addEventListener(
+          SDK.DOMStorageModel.DOMStorage.Events.DOM_STORAGE_ITEM_ADDED, this.domStorageItemAdded, this),
+      this.domStorage.addEventListener(
+          SDK.DOMStorageModel.DOMStorage.Events.DOM_STORAGE_ITEM_UPDATED, this.domStorageItemUpdated, this),
     ];
     this.refreshItems();
   }
@@ -121,8 +125,8 @@ export class DOMStorageItemsView extends KeyValueStorageItemsView {
     UI.ARIAUtils.LiveAnnouncer.alert(i18nString(UIStrings.domStorageItemsCleared));
   }
 
-  private domStorageItemRemoved(event: Common.EventTarget.EventTargetEvent<DOMStorage.DOMStorageItemRemovedEvent>):
-      void {
+  private domStorageItemRemoved(
+      event: Common.EventTarget.EventTargetEvent<SDK.DOMStorageModel.DOMStorage.DOMStorageItemRemovedEvent>): void {
     if (!this.isShowing()) {
       return;
     }
@@ -135,7 +139,8 @@ export class DOMStorageItemsView extends KeyValueStorageItemsView {
     UI.ARIAUtils.LiveAnnouncer.alert(i18nString(UIStrings.domStorageItemDeleted));
   }
 
-  private domStorageItemAdded(event: Common.EventTarget.EventTargetEvent<DOMStorage.DOMStorageItemAddedEvent>): void {
+  private domStorageItemAdded(
+      event: Common.EventTarget.EventTargetEvent<SDK.DOMStorageModel.DOMStorage.DOMStorageItemAddedEvent>): void {
     if (!this.isShowing()) {
       return;
     }
@@ -143,8 +148,8 @@ export class DOMStorageItemsView extends KeyValueStorageItemsView {
     this.itemAdded(event.data.key, event.data.value);
   }
 
-  private domStorageItemUpdated(event: Common.EventTarget.EventTargetEvent<DOMStorage.DOMStorageItemUpdatedEvent>):
-      void {
+  private domStorageItemUpdated(
+      event: Common.EventTarget.EventTargetEvent<SDK.DOMStorageModel.DOMStorage.DOMStorageItemUpdatedEvent>): void {
     if (!this.isShowing()) {
       return;
     }

package/front_end/panels/application/InterestGroupTreeElement.ts

@@ -2,12 +2,12 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-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 SDK from '../../core/sdk/sdk.js';
 import type * as Protocol from '../../generated/protocol.js';
 import {createIcon} from '../../ui/kit/kit.js';
+import * as UI from '../../ui/legacy/legacy.js';
 
 import {ApplicationPanelTreeElement} from './ApplicationPanelTreeElement.js';
 import {InterestGroupStorageView} from './InterestGroupStorageView.js';
@@ -51,7 +51,7 @@ export class InterestGroupTreeElement extends ApplicationPanelTreeElement {
   override onselect(selectedByUser?: boolean): boolean {
     super.onselect(selectedByUser);
     this.showView(this.view);
-    Host.userMetrics.panelShown('interest-groups');
+    UI.UIUserMetrics.UIUserMetrics.instance().panelShown('interest-groups');
     return false;
   }
 

package/front_end/panels/application/ReportingApiTreeElement.ts

@@ -2,10 +2,10 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-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 {createIcon} from '../../ui/kit/kit.js';
+import * as UI from '../../ui/legacy/legacy.js';
 
 import {ApplicationPanelTreeElement} from './ApplicationPanelTreeElement.js';
 import {CrashReportContextView} from './CrashReportContextView.js';
@@ -53,7 +53,7 @@ export class ReportingApiTreeElement extends ApplicationPanelTreeElement {
       this.view = new ReportingApiView();
     }
     this.showView(this.view);
-    Host.userMetrics.panelShown('reporting-api');
+    UI.UIUserMetrics.UIUserMetrics.instance().panelShown('reporting-api');
     return false;
   }
 }
@@ -78,7 +78,7 @@ export class CrashReportContextTreeElement extends ApplicationPanelTreeElement {
     }
     this.view.requestUpdate();
     this.showView(this.view);
-    Host.userMetrics.panelShown('crash-report-context');
+    UI.UIUserMetrics.UIUserMetrics.instance().panelShown('crash-report-context');
     return false;
   }
 }

package/front_end/panels/application/ResourcesPanel.ts

@@ -17,7 +17,6 @@ import {CookieItemsView} from './CookieItemsView.js';
 import type {DeviceBoundSessionsModel} from './DeviceBoundSessionsModel.js';
 import {DeviceBoundSessionsView} from './DeviceBoundSessionsView.js';
 import {DOMStorageItemsView} from './DOMStorageItemsView.js';
-import type {DOMStorage} from './DOMStorageModel.js';
 import {ExtensionStorageItemsView} from './ExtensionStorageItemsView.js';
 import type {ExtensionStorage} from './ExtensionStorageModel.js';
 import type * as PreloadingHelper from './preloading/helper/helper.js';
@@ -166,7 +165,7 @@ export class ResourcesPanel extends UI.Panel.PanelWithSidebar {
     this.showView(this.categoryView);
   }
 
-  showDOMStorage(domStorage: DOMStorage): void {
+  showDOMStorage(domStorage: SDK.DOMStorageModel.DOMStorage): void {
     if (!domStorage) {
       return;
     }

package/front_end/panels/application/ServiceWorkerCacheTreeElement.ts

@@ -3,7 +3,6 @@
 // found in the LICENSE file.
 
 import type * as Common from '../../core/common/common.js';
-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 SDK from '../../core/sdk/sdk.js';
@@ -214,7 +213,7 @@ export class SWCacheTreeElement extends ApplicationPanelTreeElement {
     }
 
     this.showView(this.view);
-    Host.userMetrics.panelShown('service-worker-cache');
+    UI.UIUserMetrics.UIUserMetrics.instance().panelShown('service-worker-cache');
     return false;
   }
 

package/front_end/panels/application/StorageView.ts

@@ -16,7 +16,6 @@ import * as SettingsUI from '../../ui/legacy/components/settings_ui/settings_ui.
 import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
-import {DOMStorageModel} from './DOMStorageModel.js';
 import {IndexedDBModel} from './IndexedDBModel.js';
 import storageViewStyles from './storageView.css.js';
 
@@ -459,7 +458,7 @@ export class StorageView extends UI.Widget.VBox {
     const hasAll = set.has(Protocol.Storage.StorageType.All);
 
     if (set.has(Protocol.Storage.StorageType.Local_storage) || hasAll) {
-      const storageModel = target.model(DOMStorageModel);
+      const storageModel = target.model(SDK.DOMStorageModel.DOMStorageModel);
       if (storageModel) {
         storageModel.clearForStorageKey(storageKey);
       }

package/front_end/panels/application/TrustTokensTreeElement.ts

@@ -2,10 +2,10 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-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 {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';
@@ -40,7 +40,7 @@ export class TrustTokensTreeElement extends ApplicationPanelTreeElement {
       this.view = new ApplicationComponents.TrustTokensView.TrustTokensView();
     }
     this.showView(this.view);
-    Host.userMetrics.panelShown('trust-tokens');
+    UI.UIUserMetrics.UIUserMetrics.instance().panelShown('trust-tokens');
     return false;
   }
 }

package/front_end/panels/application/WebMCPTreeElement.ts

@@ -2,9 +2,9 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import * as Host from '../../core/host/host.js';
 import type * as Platform from '../../core/platform/platform.js';
 import {createIcon} from '../../ui/kit/kit.js';
+import * as UI from '../../ui/legacy/legacy.js';
 
 import {ApplicationPanelTreeElement} from './ApplicationPanelTreeElement.js';
 import type {ResourcesPanel} from './ResourcesPanel.js';
@@ -29,7 +29,7 @@ export class WebMCPTreeElement extends ApplicationPanelTreeElement {
       this.#view = new WebMCPView();
     }
     this.showView(this.#view);
-    Host.userMetrics.panelShown('web-mcp');
+    UI.UIUserMetrics.UIUserMetrics.instance().panelShown('web-mcp');
     return false;
   }
 }