chrome-devtools-frontend 1.0.1654411 → 1.0.1656897

package/front_end/panels/common/CPUThrottlingOption.ts

@@ -0,0 +1,142 @@
+// Copyright 2026 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 Common from '../../core/common/common.js';
+import * as i18n from '../../core/i18n/i18n.js';
+
+const UIStrings = {
+  /**
+   * @description Text label for a menu item indicating that no throttling is applied.
+   */
+  noThrottling: 'No throttling',
+  /**
+   * @description Text label for a menu item indicating that a specific slowdown multiplier is applied.
+   * @example {2} PH1
+   */
+  dSlowdown: '{PH1}× slowdown',
+  /**
+   * @description Text label for a menu item indicating an average mobile device.
+   */
+  calibratedMidTierMobile: 'Mid-tier mobile',
+  /**
+   * @description Text label for a menu item indicating a below-average mobile device.
+   */
+  calibratedLowTierMobile: 'Low-tier mobile',
+  /**
+   * @description Text label indicating why an option is not available, because the user's device is not fast enough to emulate a device.
+   */
+  calibrationErrorDeviceTooWeak: 'Device is not powerful enough',
+} as const;
+const str_ = i18n.i18n.registerUIStrings('panels/common/CPUThrottlingOption.ts', UIStrings);
+const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+const i18nLazyString = i18n.i18n.getLazilyComputedLocalizedString.bind(undefined, str_);
+
+export enum CPUThrottlingRates {
+  NO_THROTTLING = 1,
+  MID_TIER_MOBILE = 4,
+  LOW_TIER_MOBILE = 6,
+  EXTRA_SLOW = 20,
+
+  // eslint-disable-next-line @typescript-eslint/naming-convention -- Used by web_tests.
+  MidTierMobile = MID_TIER_MOBILE,
+  // eslint-disable-next-line @typescript-eslint/naming-convention -- Used by web_tests.
+  LowEndMobile = LOW_TIER_MOBILE,
+}
+
+export type CalibratedDeviceType = 'low-tier-mobile'|'mid-tier-mobile';
+
+export interface CPUThrottlingOption {
+  title: () => string;
+  rate: () => number;
+  calibratedDeviceType?: CalibratedDeviceType;
+  jslogContext: string;
+}
+
+function makeFixedPresetThrottlingOption(rate: CPUThrottlingRates): CPUThrottlingOption {
+  return {
+    title: rate === 1 ? i18nLazyString(UIStrings.noThrottling) : i18nLazyString(UIStrings.dSlowdown, {PH1: rate}),
+    rate: () => rate,
+    jslogContext: rate === 1 ? 'cpu-no-throttling' : `cpu-throttled-${rate}`,
+  };
+}
+
+export const NoThrottlingOption = makeFixedPresetThrottlingOption(CPUThrottlingRates.NO_THROTTLING);
+export const MidTierThrottlingOption = makeFixedPresetThrottlingOption(CPUThrottlingRates.MID_TIER_MOBILE);
+export const LowTierThrottlingOption = makeFixedPresetThrottlingOption(CPUThrottlingRates.LOW_TIER_MOBILE);
+export const ExtraSlowThrottlingOption = makeFixedPresetThrottlingOption(CPUThrottlingRates.EXTRA_SLOW);
+
+function makeCalibratedThrottlingOption(calibratedDeviceType: CalibratedDeviceType): CPUThrottlingOption {
+  const getSettingValue = (): number|CalibrationError|null => {
+    const setting = Common.Settings.Settings.instance().createSetting<CalibratedCPUThrottling>(
+        'calibrated-cpu-throttling', {}, Common.Settings.SettingStorageType.GLOBAL);
+    const value = setting.get();
+    if (calibratedDeviceType === 'low-tier-mobile') {
+      return value.low ?? null;
+    }
+    if (calibratedDeviceType === 'mid-tier-mobile') {
+      return value.mid ?? null;
+    }
+    return null;
+  };
+
+  return {
+    title(): string {
+      const typeString = calibratedDeviceType === 'low-tier-mobile' ? i18nString(UIStrings.calibratedLowTierMobile) :
+                                                                      i18nString(UIStrings.calibratedMidTierMobile);
+
+      const value = getSettingValue();
+      if (typeof value === 'number') {
+        return `${typeString} – ${value.toFixed(1)}×`;
+      }
+
+      return typeString;
+    },
+    rate(): number {
+      const value = getSettingValue();
+      if (typeof value === 'number') {
+        return value;
+      }
+      return 0;
+    },
+    calibratedDeviceType,
+    jslogContext: `cpu-throttled-calibrated-${calibratedDeviceType}`,
+  };
+}
+
+export const CalibratedLowTierMobileThrottlingOption = makeCalibratedThrottlingOption('low-tier-mobile');
+export const CalibratedMidTierMobileThrottlingOption = makeCalibratedThrottlingOption('mid-tier-mobile');
+
+export interface CalibratedCPUThrottling {
+  /** Either the CPU multiplier, or an error code for why it could not be determined. */
+  low?: number|CalibrationError;
+  mid?: number|CalibrationError;
+}
+
+export enum CalibrationError {
+  DEVICE_TOO_WEAK = 'DEVICE_TOO_WEAK',
+}
+
+export function calibrationErrorToString(error: CalibrationError): string {
+  if (error === CalibrationError.DEVICE_TOO_WEAK) {
+    return i18nString(UIStrings.calibrationErrorDeviceTooWeak);
+  }
+
+  return error;
+}
+
+export const cpuThrottlingPresets: CPUThrottlingOption[] = [
+  NoThrottlingOption,
+  MidTierThrottlingOption,
+  LowTierThrottlingOption,
+  ExtraSlowThrottlingOption,
+  CalibratedLowTierMobileThrottlingOption,
+  CalibratedMidTierMobileThrottlingOption,
+];
+
+export function determineOptionFromRate(rate: number, currentOption?: CPUThrottlingOption): CPUThrottlingOption {
+  if (currentOption && currentOption.rate() === rate) {
+    return currentOption;
+  }
+  return cpuThrottlingPresets.find(o => o.rate() === rate) || NoThrottlingOption;
+}

package/front_end/panels/common/ThrottlingUtils.ts

@@ -5,8 +5,14 @@
 import * as SDK from '../../core/sdk/sdk.js';
 import * as CrUXManager from '../../models/crux-manager/crux-manager.js';
 
+import {
+  CalibratedMidTierMobileThrottlingOption,
+  type CPUThrottlingOption,
+  MidTierThrottlingOption,
+} from './CPUThrottlingOption.js';
+
 export interface ThrottlingRecommendations {
-  cpuOption: SDK.CPUThrottlingManager.CPUThrottlingOption|null;
+  cpuOption: CPUThrottlingOption|null;
   networkConditions: SDK.NetworkManager.Conditions|null;
 }
 
@@ -18,10 +24,9 @@ export function getThrottlingRecommendations(): ThrottlingRecommendations {
   const cruxManager = CrUXManager.CrUXManager.instance();
   const roundTripTimeMetricData = cruxManager.getSelectedFieldMetricData('round_trip_time');
 
-  let cpuOption: SDK.CPUThrottlingManager.CPUThrottlingOption =
-      SDK.CPUThrottlingManager.CalibratedMidTierMobileThrottlingOption;
+  let cpuOption: CPUThrottlingOption = CalibratedMidTierMobileThrottlingOption;
   if (cpuOption.rate() === 0) {
-    cpuOption = SDK.CPUThrottlingManager.MidTierThrottlingOption;
+    cpuOption = MidTierThrottlingOption;
   }
 
   const networkConditions = getRecommendedNetworkConditions(roundTripTimeMetricData);

package/front_end/panels/common/common.ts

@@ -97,13 +97,13 @@ export class TypeToAllowDialog {
 export {AiCodeCompletionTeaser} from './AiCodeCompletionTeaser.js';
 export * as AiCodeGenerationTeaser from './AiCodeGenerationTeaser.js';
 export {AiCodeGenerationUpgradeDialog} from './AiCodeGenerationUpgradeDialog.js';
-export {AnnotationManager} from './AnnotationManager.js';
 export {FreDialog} from './FreDialog.js';
 export {GdpSignUpDialog} from './GdpSignUpDialog.js';
 export {GeminiRebrandPromoDialog} from './GeminiRebrandPromoDialog.js';
 export {AiCodeCompletionDisclaimer} from './AiCodeCompletionDisclaimer.js';
 export * as AiCodeCompletionSummaryToolbar from './AiCodeCompletionSummaryToolbar.js';
 export * from './BadgeNotification.js';
+export * as CPUThrottlingOption from './CPUThrottlingOption.js';
 export * as ExtensionPanel from './ExtensionPanel.js';
 export * as ExtensionServer from './ExtensionServer.js';
 export * as ExtensionView from './ExtensionView.js';

package/front_end/panels/console/ConsoleViewMessage.ts

@@ -225,6 +225,18 @@ const UIStrings = {
    * @description Element title in Object Properties Section
    */
   invokePropertyGetter: 'Invoke property getter',
+  /**
+   * @description Context menu item to copy table data
+   */
+  copyTableAs: 'Copy table as',
+  /**
+   * @description Submenu item to copy table as Markdown
+   */
+  copyAsMarkdown: 'Copy as Markdown',
+  /**
+   * @description Submenu item to copy table as CSV
+   */
+  copyAsCsv: 'Copy as CSV',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/console/ConsoleViewMessage.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -2180,6 +2192,7 @@ export class ConsoleTableMessageView extends ConsoleViewMessage {
       if (this.dataGrid) {
         this.dataGrid.setStriped(true);
         this.dataGrid.setFocusable(false);
+        this.dataGrid.setTableContextMenuCallback(this.populateTableContextMenu.bind(this));
 
         const formattedResult = document.createElement('span');
         formattedResult.classList.add('console-message-text');
@@ -2205,6 +2218,38 @@ export class ConsoleTableMessageView extends ConsoleViewMessage {
     }
     return defaultConsoleRowHeight;
   }
+
+  private populateTableContextMenu(contextMenu: UI.ContextMenu.ContextMenu): void {
+    const copySubMenu = contextMenu.clipboardSection().appendSubMenuItem(i18nString(UIStrings.copyTableAs));
+    copySubMenu.defaultSection().appendItem(i18nString(UIStrings.copyAsMarkdown), this.copyTableAsMarkdown.bind(this),
+                                            {jslogContext: 'copy-as-markdown'});
+    copySubMenu.defaultSection().appendItem(i18nString(UIStrings.copyAsCsv), this.copyTableAsCSV.bind(this),
+                                            {jslogContext: 'copy-as-csv'});
+  }
+
+  private copyTableAsMarkdown(): void {
+    if (!this.dataGrid) {
+      return;
+    }
+    const markdown = DataGrid.DataGridExporter.exportToMarkdown(this.dataGrid);
+    UI.UIUtils.copyTextToClipboard(markdown);
+  }
+
+  private copyTableAsCSV(): void {
+    if (!this.dataGrid) {
+      return;
+    }
+    const csv = DataGrid.DataGridExporter.exportToCSV(this.dataGrid);
+    UI.UIUtils.copyTextToClipboard(csv);
+  }
+
+  getDataGridForTest(): DataGrid.SortableDataGrid.SortableDataGrid<unknown>|null {
+    return this.dataGrid;
+  }
+
+  populateTableContextMenuForTest(contextMenu: UI.ContextMenu.ContextMenu): void {
+    this.populateTableContextMenu(contextMenu);
+  }
 }
 
 /**

package/front_end/panels/elements/ElementsPanel.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 type * as Protocol from '../../generated/protocol.js';
-import * as Annotations from '../../models/annotations/annotations.js';
 import * as ComputedStyle from '../../models/computed_style/computed_style.js';
 import * as PanelCommon from '../../panels/common/common.js';
 import type * as Adorners from '../../ui/components/adorners/adorners.js';
@@ -215,13 +214,25 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
   private cssStyleTrackerByCSSModel: Map<SDK.CSSModel.CSSModel, SDK.CSSModel.CSSPropertyTracker>;
   #domTreeWidget: DOMTreeWidget;
   #computedStyleModel: ComputedStyle.ComputedStyleModel.ComputedStyleModel;
+  readonly #targetManager: SDK.TargetManager.TargetManager;
+  readonly #settings: Common.Settings.Settings;
+
+  get settings(): Common.Settings.Settings {
+    return this.#settings;
+  }
+
+  get targetManager(): SDK.TargetManager.TargetManager {
+    return this.#targetManager;
+  }
 
   getTreeOutlineForTesting(): ElementsTreeOutline|undefined {
     return this.#domTreeWidget.getTreeOutlineForTesting();
   }
 
-  constructor() {
+  constructor(targetManager?: SDK.TargetManager.TargetManager, settings?: Common.Settings.Settings) {
     super('elements');
+    this.#targetManager = targetManager ?? SDK.TargetManager.TargetManager.instance();
+    this.#settings = settings ?? Common.Settings.Settings.instance();
     this.registerRequiredCSS(elementsPanelStyles);
 
     this.splitWidget = new UI.SplitWidget.SplitWidget(true, true, 'elements-panel-split-view-state', 325, 325);
@@ -252,12 +263,10 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
     this.domTreeContainer.id = 'elements-content';
     this.domTreeContainer.tabIndex = -1;
     // FIXME: crbug.com/425984
-    if (Common.Settings.Settings.instance().moduleSetting('dom-word-wrap').get()) {
+    if (this.#settings.moduleSetting('dom-word-wrap').get()) {
       this.domTreeContainer.classList.add('elements-wrap');
     }
-    Common.Settings.Settings.instance()
-        .moduleSetting('dom-word-wrap')
-        .addChangeListener(this.domWordWrapSettingChanged.bind(this));
+    this.#settings.moduleSetting('dom-word-wrap').addChangeListener(this.domWordWrapSettingChanged.bind(this));
 
     crumbsContainer.id = 'elements-crumbs';
     this.accessibilityTreeView = new AccessibilityTreeView(new TreeOutline.TreeOutline.TreeOutline<AXTreeNodeData>());
@@ -287,9 +296,7 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
 
     this.metricsWidget = new MetricsSidebarPane(this.#computedStyleModel);
 
-    Common.Settings.Settings.instance()
-        .moduleSetting('sidebar-position')
-        .addChangeListener(this.updateSidebarPosition.bind(this));
+    this.#settings.moduleSetting('sidebar-position').addChangeListener(this.updateSidebarPosition.bind(this));
     this.updateSidebarPosition();
 
     this.cssStyleTrackerByCSSModel = new Map();
@@ -297,8 +304,8 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
 
     this.pendingNodeReveal = false;
 
-    this.adornerManager = new ElementsComponents.AdornerManager.AdornerManager(
-        Common.Settings.Settings.instance().moduleSetting('adorner-settings'));
+    this.adornerManager =
+        new ElementsComponents.AdornerManager.AdornerManager(this.#settings.moduleSetting('adorner-settings'));
     this.adornersByName = new Map();
 
     this.#domTreeWidget = new DOMTreeWidget();
@@ -307,23 +314,14 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
     this.#domTreeWidget.onSelectedNodeChanged = this.selectedNodeChanged.bind(this);
     this.#domTreeWidget.onElementsTreeUpdated = this.updateBreadcrumbIfNeeded.bind(this);
     this.#domTreeWidget.onDocumentUpdated = this.documentUpdated.bind(this);
-    this.#domTreeWidget.onElementExpanded = this.handleElementExpanded.bind(this);
-    this.#domTreeWidget.onElementCollapsed = this.handleElementCollapsed.bind(this);
-    this.#domTreeWidget.setWordWrap(Common.Settings.Settings.instance().moduleSetting('dom-word-wrap').get());
-
-    SDK.TargetManager.TargetManager.instance().observeModels(SDK.DOMModel.DOMModel, this, {scoped: true});
-    SDK.TargetManager.TargetManager.instance().addEventListener(
-        SDK.TargetManager.Events.NAME_CHANGED, event => this.targetNameChanged(event.data));
-    Common.Settings.Settings.instance()
-        .moduleSetting('show-ua-shadow-dom')
-        .addChangeListener(this.showUAShadowDOMChanged.bind(this));
+    this.#domTreeWidget.setWordWrap(this.#settings.moduleSetting('dom-word-wrap').get());
+
+    this.#targetManager.observeModels(SDK.DOMModel.DOMModel, this, {scoped: true});
+    this.#targetManager.addEventListener(SDK.TargetManager.Events.NAME_CHANGED,
+                                         event => this.targetNameChanged(event.data));
+    this.#settings.moduleSetting('show-ua-shadow-dom').addChangeListener(this.showUAShadowDOMChanged.bind(this));
     PanelCommon.ExtensionServer.ExtensionServer.instance().addEventListener(
         PanelCommon.ExtensionServer.Events.SidebarPaneAdded, this.extensionSidebarPaneAdded, this);
-
-    if (Annotations.AnnotationRepository.annotationsEnabled()) {
-      PanelCommon.AnnotationManager.instance().initializePlacementForAnnotationType(
-          Annotations.AnnotationType.ELEMENT_NODE, this.resolveInitialState.bind(this), this.#domTreeWidget.element);
-    }
   }
 
   // This is a debounced method because the user might be navigated from Styles tab to Computed Style tab and vice versa.
@@ -353,18 +351,6 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
     }
   }
 
-  private handleElementExpanded(): void {
-    if (Annotations.AnnotationRepository.annotationsEnabled()) {
-      void PanelCommon.AnnotationManager.instance().resolveAnnotationsOfType(Annotations.AnnotationType.ELEMENT_NODE);
-    }
-  }
-
-  private handleElementCollapsed(): void {
-    if (Annotations.AnnotationRepository.annotationsEnabled()) {
-      void PanelCommon.AnnotationManager.instance().resolveAnnotationsOfType(Annotations.AnnotationType.ELEMENT_NODE);
-    }
-  }
-
   private showAccessibilityTree(): void {
     if (this.accessibilityTreeView) {
       this.splitWidget.setMainWidget(this.accessibilityTreeView);
@@ -398,10 +384,12 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
 
   static instance(opts: {
     forceNew: boolean|null,
+    targetManager?: SDK.TargetManager.TargetManager,
+    settings?: Common.Settings.Settings,
   }|undefined = {forceNew: null}): ElementsPanel {
-    const {forceNew} = opts;
+    const {forceNew, targetManager, settings} = opts || {};
     if (!elementsPanelInstance || forceNew) {
-      elementsPanelInstance = new ElementsPanel();
+      elementsPanelInstance = new ElementsPanel(targetManager, settings);
     }
 
     return elementsPanelInstance;
@@ -511,10 +499,6 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
     UI.Context.Context.instance().setFlavor(ElementsPanel, this);
     this.#domTreeWidget.show(this.domTreeContainer);
     this.evaluateTrackingComputedStyleUpdatesForNode();
-
-    if (Annotations.AnnotationRepository.annotationsEnabled()) {
-      void PanelCommon.AnnotationManager.instance().resolveAnnotationsOfType(Annotations.AnnotationType.ELEMENT_NODE);
-    }
   }
 
   override willHide(): void {
@@ -758,7 +742,7 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
     this.currentSearchResultIndex = -1;
     delete this.searchResults;
 
-    SDK.DOMModel.DOMModel.cancelSearch();
+    SDK.DOMModel.DOMModel.cancelSearch(this.#targetManager);
   }
 
   performSearch(searchConfig: UI.SearchableView.SearchConfig, shouldJump: boolean, jumpBackwards?: boolean): void {
@@ -777,8 +761,8 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
 
     this.searchConfig = searchConfig;
 
-    const showUAShadowDOM = Common.Settings.Settings.instance().moduleSetting('show-ua-shadow-dom').get();
-    const domModels = SDK.TargetManager.TargetManager.instance().models(SDK.DOMModel.DOMModel, {scoped: true});
+    const showUAShadowDOM = this.#settings.moduleSetting('show-ua-shadow-dom').get();
+    const domModels = this.#targetManager.models(SDK.DOMModel.DOMModel, {scoped: true});
     const promises = domModels.map(domModel => domModel.performSearch(whitespaceTrimmedQuery, showUAShadowDOM));
     void Promise.all(promises).then(resultCounts => {
       this.searchResults = [];
@@ -976,9 +960,8 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
     const {showPanel = true, focusNode = false, highlightInOverlay = true} = opts ?? {};
     this.omitDefaultSelection = true;
 
-    const node = Common.Settings.Settings.instance().moduleSetting('show-ua-shadow-dom').get() ?
-        nodeToReveal :
-        this.leaveUserAgentShadowDOM(nodeToReveal);
+    const node = this.#settings.moduleSetting('show-ua-shadow-dom').get() ? nodeToReveal :
+                                                                            this.leaveUserAgentShadowDOM(nodeToReveal);
     if (highlightInOverlay) {
       node.highlightForTwoSeconds();
     }
@@ -1191,7 +1174,7 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
       return;
     }  // We can't reparent extension iframes.
 
-    const position = Common.Settings.Settings.instance().moduleSetting('sidebar-position').get();
+    const position = this.#settings.moduleSetting('sidebar-position').get();
     let splitMode = SplitMode.HORIZONTAL;
     if (position === 'right' || (position === 'auto' && this.splitWidget.element.offsetWidth > 680)) {
       splitMode = SplitMode.VERTICAL;
@@ -1321,56 +1304,6 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
     this.#domTreeWidget.copyStyles(node);
   }
 
-  async resolveInitialState(
-      parentElement: Element, reveal: boolean, lookupId: string,
-      anchor?: SDK.DOMModel.DOMNode|SDK.NetworkRequest.NetworkRequest): Promise<{x: number, y: number}|null> {
-    if (!this.isShowing()) {
-      return null;
-    }
-
-    if (!anchor) {
-      const backendNodeId = Number(lookupId) as Protocol.DOM.BackendNodeId;
-      if (isNaN(backendNodeId)) {
-        return null;
-      }
-      const rootDOMNode = this.#domTreeWidget.rootDOMNode;
-      if (!rootDOMNode) {
-        return null;
-      }
-      const domModel = rootDOMNode.domModel();
-      const nodes = await domModel.pushNodesByBackendIdsToFrontend(new Set([backendNodeId]));
-      if (!nodes) {
-        return null;
-      }
-      const foundNode = nodes.get(backendNodeId);
-      if (!foundNode) {
-        return null;
-      }
-      anchor = foundNode;
-    }
-
-    const element = this.#domTreeWidget.treeElementForNode(anchor as SDK.DOMModel.DOMNode);
-    if (!element) {
-      return null;
-    }
-
-    if (reveal) {
-      // The node must have been revealed in order to calculate its position.
-      await Common.Revealer.reveal(anchor);
-    }
-
-    // The tree element element starts at the top-left of the expand/collapse arrow). We
-    // want to aim for the tagname instead.
-    const offsetToTagName = 22;
-    const yPadding = 5;
-
-    const targetRect = element.listItemElement.getBoundingClientRect();
-    const parentRect = parentElement.getBoundingClientRect();
-    const relativeX = targetRect.x - parentRect.x + offsetToTagName;
-    const relativeY = targetRect.y - parentRect.y + yPadding;
-    return {x: relativeX, y: relativeY};
-  }
-
   protected static firstInspectElementCompletedForTest = function(): void {};
   protected static firstInspectElementNodeNameForTest = '';
 }
@@ -1582,7 +1515,7 @@ export class ElementsActionDelegate implements UI.ActionRegistration.ActionDeleg
         ElementsPanel.instance().toggleAccessibilityTree();
         return true;
       case 'elements.toggle-word-wrap': {
-        const setting = Common.Settings.Settings.instance().moduleSetting<boolean>('dom-word-wrap');
+        const setting = ElementsPanel.instance().settings.moduleSetting<boolean>('dom-word-wrap');
         setting.set(!setting.get());
         return true;
       }

package/front_end/panels/elements/ElementsTreeOutline.ts

@@ -235,8 +235,6 @@ export class DOMTreeWidget extends UI.Widget.Widget {
            Common.EventTarget.EventTargetEvent<{node: SDK.DOMModel.DOMNode | null, focus: boolean}>) => void = () => {};
   onElementsTreeUpdated: (event: Common.EventTarget.EventTargetEvent<SDK.DOMModel.DOMNode[]>) => void = () => {};
   onDocumentUpdated: (domModel: SDK.DOMModel.DOMModel) => void = () => {};
-  onElementExpanded: () => void = () => {};
-  onElementCollapsed: () => void = () => {};
 
   #maxTreeDepth?: number;
   #enableContextMenu = true;
@@ -455,11 +453,9 @@ export class DOMTreeWidget extends UI.Widget.Widget {
           },
           onElementCollapsed: () => {
             this.#clearHighlightedNode();
-            this.onElementCollapsed();
           },
           onElementExpanded: () => {
             this.#clearHighlightedNode();
-            this.onElementExpanded();
           },
         },
         this.#viewOutput, this.contentElement);

package/front_end/panels/elements/elements-meta.ts

@@ -186,9 +186,10 @@ UI.ViewManager.registerViewExtension({
   order: 10,
   persistence: UI.ViewManager.ViewPersistence.PERMANENT,
   hasToolbar: false,
-  async loadView() {
+  async loadView(universe) {
     const Elements = await loadElementsModule();
-    return Elements.ElementsPanel.ElementsPanel.instance();
+    const {targetManager, settings} = universe;
+    return Elements.ElementsPanel.ElementsPanel.instance({forceNew: null, targetManager, settings});
   },
 });