chrome-devtools-frontend 1.0.1669021 → 1.0.1672557

package/front_end/panels/application/ApplicationPanelSidebar.ts

@@ -80,13 +80,6 @@ import type {ResourcesPanel} from './ResourcesPanel.js';
 import resourcesSidebarStyles from './resourcesSidebar.css.js';
 import {ServiceWorkerCacheTreeElement} from './ServiceWorkerCacheTreeElement.js';
 import {ServiceWorkersView} from './ServiceWorkersView.js';
-import {SharedStorageListTreeElement} from './SharedStorageListTreeElement.js';
-import {
-  Events as SharedStorageModelEvents,
-  type SharedStorageForOrigin,
-  SharedStorageModel,
-} from './SharedStorageModel.js';
-import {SharedStorageTreeElement} from './SharedStorageTreeElement.js';
 import {StorageBucketsTreeParentElement} from './StorageBucketsTreeElement.js';
 import {StorageView} from './StorageView.js';
 import {TrustTokensTreeElement} from './TrustTokensTreeElement.js';
@@ -322,20 +315,6 @@ function nameForExtensionStorageArea(storageArea: Protocol.Extensions.StorageAre
   }
 }
 
-export namespace SharedStorageTreeElementDispatcher {
-  export const enum Events {
-    SHARED_STORAGE_TREE_ELEMENT_ADDED = 'SharedStorageTreeElementAdded',
-  }
-
-  export interface SharedStorageTreeElementAddedEvent {
-    origin: string;
-  }
-
-  export interface EventTypes {
-    [Events.SHARED_STORAGE_TREE_ELEMENT_ADDED]: SharedStorageTreeElementAddedEvent;
-  }
-}
-
 export class ApplicationPanelSidebar extends UI.Widget.VBox implements SDK.TargetManager.Observer {
   panel: ResourcesPanel;
   private readonly sidebarTree: UI.TreeOutline.TreeOutlineInShadow;
@@ -348,7 +327,6 @@ export class ApplicationPanelSidebar extends UI.Widget.VBox implements SDK.Targe
   cookieListTreeElement: ExpandableApplicationPanelTreeElement;
   trustTokensTreeElement: TrustTokensTreeElement;
   cacheStorageListTreeElement: ServiceWorkerCacheTreeElement;
-  sharedStorageListTreeElement: SharedStorageListTreeElement;
   storageBucketsTreeElement: StorageBucketsTreeParentElement|undefined;
   private backForwardCacheListTreeElement?: BackForwardCacheTreeElement;
   backgroundFetchTreeElement: BackgroundServiceTreeElement;
@@ -369,13 +347,10 @@ export class ApplicationPanelSidebar extends UI.Widget.VBox implements SDK.Targe
   private extensionIdToStorageTreeParentElement: Map<string, ExtensionStorageTreeParentElement>;
   private extensionStorageModels: ExtensionStorageModel[];
   private extensionStorageTreeElements: Map<string, ExtensionStorageTreeElement>;
-  private sharedStorageTreeElements: Map<string, SharedStorageTreeElement>;
   private domains: Record<string, boolean>;
   // Holds main frame target.
   private target?: SDK.Target.Target;
   private previousHoveredElement?: FrameTreeElement;
-  readonly sharedStorageTreeElementDispatcher:
-      Common.ObjectWrapper.ObjectWrapper<SharedStorageTreeElementDispatcher.EventTypes>;
 
   constructor(panel: ResourcesPanel) {
     super();
@@ -481,9 +456,6 @@ export class ApplicationPanelSidebar extends UI.Widget.VBox implements SDK.Targe
     this.trustTokensTreeElement = new TrustTokensTreeElement(panel);
     storageTreeElement.appendChild(this.trustTokensTreeElement);
 
-    this.sharedStorageListTreeElement = new SharedStorageListTreeElement(panel);
-    storageTreeElement.appendChild(this.sharedStorageListTreeElement);
-
     this.cacheStorageListTreeElement = new ServiceWorkerCacheTreeElement(panel);
     storageTreeElement.appendChild(this.cacheStorageListTreeElement);
 
@@ -540,7 +512,6 @@ export class ApplicationPanelSidebar extends UI.Widget.VBox implements SDK.Targe
     this.extensionIdToStorageTreeParentElement = new Map();
     this.extensionStorageTreeElements = new Map();
     this.extensionStorageModels = [];
-    this.sharedStorageTreeElements = new Map();
     this.domains = {};
 
     this.sidebarTree.contentElement.addEventListener('mousemove', this.onmousemove.bind(this), false);
@@ -576,24 +547,12 @@ export class ApplicationPanelSidebar extends UI.Widget.VBox implements SDK.Targe
           modelRemoved: (model: IndexedDBModel) => this.indexedDBModelRemoved(model),
         },
         {scoped: true});
-    SDK.TargetManager.TargetManager.instance().observeModels(
-        SharedStorageModel, {
-          modelAdded: (model: SharedStorageModel) => this.sharedStorageModelAdded(model).catch(err => {
-            console.error(err);
-          }),
-          modelRemoved: (model: SharedStorageModel) => this.sharedStorageModelRemoved(model),
-        },
-        {scoped: true});
     SDK.TargetManager.TargetManager.instance().observeModels(
         SDK.StorageBucketsModel.StorageBucketsModel, {
           modelAdded: (model: SDK.StorageBucketsModel.StorageBucketsModel) => this.storageBucketsModelAdded(model),
           modelRemoved: (model: SDK.StorageBucketsModel.StorageBucketsModel) => this.storageBucketsModelRemoved(model),
         },
         {scoped: true});
-
-    this.sharedStorageTreeElementDispatcher =
-        new Common.ObjectWrapper.ObjectWrapper<SharedStorageTreeElementDispatcher.EventTypes>();
-
     this.contentElement.style.contain = 'layout style';
   }
 
@@ -708,27 +667,6 @@ export class ApplicationPanelSidebar extends UI.Widget.VBox implements SDK.Targe
   private indexedDBModelRemoved(model: IndexedDBModel): void {
     this.indexedDBListTreeElement.removeIndexedDBForModel(model);
   }
-
-  private async sharedStorageModelAdded(model: SharedStorageModel): Promise<void> {
-    await model.enable();
-    for (const storage of model.storages()) {
-      await this.addSharedStorage(storage);
-    }
-    model.addEventListener(SharedStorageModelEvents.SHARED_STORAGE_ADDED, this.sharedStorageAdded, this);
-    model.addEventListener(SharedStorageModelEvents.SHARED_STORAGE_REMOVED, this.sharedStorageRemoved, this);
-    model.addEventListener(SharedStorageModelEvents.SHARED_STORAGE_ACCESS, this.sharedStorageAccess, this);
-  }
-
-  private sharedStorageModelRemoved(model: SharedStorageModel): void {
-    model.disable();
-    for (const storage of model.storages()) {
-      this.removeSharedStorage(storage);
-    }
-    model.removeEventListener(SharedStorageModelEvents.SHARED_STORAGE_ADDED, this.sharedStorageAdded, this);
-    model.removeEventListener(SharedStorageModelEvents.SHARED_STORAGE_REMOVED, this.sharedStorageRemoved, this);
-    model.removeEventListener(SharedStorageModelEvents.SHARED_STORAGE_ACCESS, this.sharedStorageAccess, this);
-  }
-
   private storageBucketsModelAdded(model: SDK.StorageBucketsModel.StorageBucketsModel): void {
     model.enable();
   }
@@ -787,6 +725,15 @@ export class ApplicationPanelSidebar extends UI.Widget.VBox implements SDK.Targe
 
     if (frame.isOutermostFrame()) {
       this.reset();
+      const selectedElement = this.sidebarTree.selectedTreeElement;
+      if (selectedElement instanceof ExpandableApplicationPanelTreeElement) {
+        // Only update AI Assistance storage context for expandable category headers,
+        // as all other tree elements are re-rendered on reset.
+        const item = selectedElement.createGenericStorageAiContext();
+        if (item) {
+          UI.Context.Context.instance().setFlavor(AiAssistance.StorageItem.StorageItem, item);
+        }
+      }
     }
     this.addCookieDocument(frame);
   }
@@ -962,50 +909,6 @@ export class ApplicationPanelSidebar extends UI.Widget.VBox implements SDK.Targe
     this.extensionStorageTreeElements.delete(extensionStorage.key);
   }
 
-  private async sharedStorageAdded(event: Common.EventTarget.EventTargetEvent<SharedStorageForOrigin>): Promise<void> {
-    await this.addSharedStorage(event.data);
-  }
-
-  private async addSharedStorage(sharedStorage: SharedStorageForOrigin): Promise<void> {
-    const sharedStorageTreeElement = await SharedStorageTreeElement.createElement(this.panel, sharedStorage);
-
-    // A tree element for `sharedStorage.securityOrigin` may have been added while we were waiting for `sharedStorageTreeElement` to be created.
-    if (this.sharedStorageTreeElements.has(sharedStorage.securityOrigin)) {
-      return;
-    }
-    this.sharedStorageTreeElements.set(sharedStorage.securityOrigin, sharedStorageTreeElement);
-    this.sharedStorageListTreeElement.appendChild(sharedStorageTreeElement);
-    this.sharedStorageTreeElementDispatcher.dispatchEventToListeners(
-        SharedStorageTreeElementDispatcher.Events.SHARED_STORAGE_TREE_ELEMENT_ADDED,
-        {origin: sharedStorage.securityOrigin});
-  }
-
-  private sharedStorageRemoved(event: Common.EventTarget.EventTargetEvent<SharedStorageForOrigin>): void {
-    this.removeSharedStorage(event.data);
-  }
-
-  private removeSharedStorage(sharedStorage: SharedStorageForOrigin): void {
-    const treeElement = this.sharedStorageTreeElements.get(sharedStorage.securityOrigin);
-    if (!treeElement) {
-      return;
-    }
-    const wasSelected = treeElement.selected;
-    const parentListTreeElement = treeElement.parent;
-    if (parentListTreeElement) {
-      parentListTreeElement.removeChild(treeElement);
-      parentListTreeElement.setExpandable(parentListTreeElement.childCount() > 0);
-      if (wasSelected) {
-        parentListTreeElement.select();
-      }
-    }
-    this.sharedStorageTreeElements.delete(sharedStorage.securityOrigin);
-  }
-
-  private sharedStorageAccess(event: Common.EventTarget.EventTargetEvent<Protocol.Storage.SharedStorageAccessedEvent>):
-      void {
-    this.sharedStorageListTreeElement.addEvent(event.data);
-  }
-
   async showResource(resource: SDK.Resource.Resource, line?: number, column?: number): Promise<void> {
     await this.resourcesSection.revealResource(resource, line, column);
   }

package/front_end/panels/application/ApplicationPanelTreeElement.ts

@@ -133,7 +133,7 @@ export class ExpandableApplicationPanelTreeElement extends ApplicationPanelTreeE
     this.categoryDescription = categoryDescription;
   }
 
-  protected createGenericStorageAiContext(): AiAssistance.StorageItem.StorageItem|null {
+  createGenericStorageAiContext(): AiAssistance.StorageItem.StorageItem|null {
     const target = SDK.TargetManager.TargetManager.instance().primaryPageTarget();
     const mainPageOrigin =
         target?.inspectedURL() ? Common.ParsedURL.ParsedURL.extractOrigin(target.inspectedURL()) : '';

package/front_end/panels/application/application.ts

@@ -31,11 +31,6 @@ import * as ServiceWorkerCacheTreeElement from './ServiceWorkerCacheTreeElement.
 import * as ServiceWorkerCacheViews from './ServiceWorkerCacheViews.js';
 import * as ServiceWorkersView from './ServiceWorkersView.js';
 import * as ServiceWorkerUpdateCycleView from './ServiceWorkerUpdateCycleView.js';
-import * as SharedStorageEventsView from './SharedStorageEventsView.js';
-import * as SharedStorageItemsView from './SharedStorageItemsView.js';
-import * as SharedStorageListTreeElement from './SharedStorageListTreeElement.js';
-import * as SharedStorageModel from './SharedStorageModel.js';
-import * as SharedStorageTreeElement from './SharedStorageTreeElement.js';
 import * as StorageBucketsTreeElement from './StorageBucketsTreeElement.js';
 import * as StorageItemsToolbar from './StorageItemsToolbar.js';
 import * as StorageView from './StorageView.js';
@@ -74,11 +69,6 @@ export {
   ServiceWorkerCacheViews,
   ServiceWorkersView,
   ServiceWorkerUpdateCycleView,
-  SharedStorageEventsView,
-  SharedStorageItemsView,
-  SharedStorageListTreeElement,
-  SharedStorageModel,
-  SharedStorageTreeElement,
   StorageBucketsTreeElement,
   StorageItemsToolbar,
   StorageView,

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

@@ -11,8 +11,6 @@ import * as PermissionsPolicySection from './PermissionsPolicySection.js';
 import * as ProtocolHandlersView from './ProtocolHandlersView.js';
 import * as ReportsGrid from './ReportsGrid.js';
 import * as ServiceWorkerRouterView from './ServiceWorkerRouterView.js';
-import * as SharedStorageAccessGrid from './SharedStorageAccessGrid.js';
-import * as SharedStorageMetadataView from './SharedStorageMetadataView.js';
 import * as StorageMetadataView from './StorageMetadataView.js';
 import * as TrustTokensView from './TrustTokensView.js';
 
@@ -26,8 +24,6 @@ export {
   ProtocolHandlersView,
   ReportsGrid,
   ServiceWorkerRouterView,
-  SharedStorageAccessGrid,
-  SharedStorageMetadataView,
   StorageMetadataView,
   TrustTokensView,
 };

package/front_end/panels/browser_debugger/CategorizedBreakpointsSidebarPane.ts

@@ -89,10 +89,6 @@ const UIStrings = {
    * @description Category of event listener breakpoints for script events.
    */
   script: 'Script',
-  /**
-   * @description Category of event listener breakpoints for shared storage worklet events.
-   */
-  sharedStorageWorklet: 'Shared storage worklet',
   /**
    * @description Category of event listener breakpoints for timer events.
    */
@@ -386,7 +382,6 @@ const LOCALIZED_CATEGORIES: Record<SDK.CategorizedBreakpoint.Category, () => Pla
   [SDK.CategorizedBreakpoint.Category.PICTURE_IN_PICTURE]: i18nLazyString(UIStrings.pictureinpicture),
   [SDK.CategorizedBreakpoint.Category.POINTER]: i18nLazyString(UIStrings.pointer),
   [SDK.CategorizedBreakpoint.Category.SCRIPT]: i18nLazyString(UIStrings.script),
-  [SDK.CategorizedBreakpoint.Category.SHARED_STORAGE_WORKLET]: i18nLazyString(UIStrings.sharedStorageWorklet),
   [SDK.CategorizedBreakpoint.Category.TIMER]: i18nLazyString(UIStrings.timer),
   [SDK.CategorizedBreakpoint.Category.TOUCH]: i18nLazyString(UIStrings.touch),
   [SDK.CategorizedBreakpoint.Category.TRUSTED_TYPE_VIOLATION]: i18nLazyString(UIStrings.trustedTypeViolations),

package/front_end/panels/browser_debugger/EventListenerBreakpointsSidebarPane.ts

@@ -7,25 +7,19 @@ import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import {CategorizedBreakpointsSidebarPane} from './CategorizedBreakpointsSidebarPane.js';
 
-let eventListenerBreakpointsSidebarPaneInstance: EventListenerBreakpointsSidebarPane;
-
 export class EventListenerBreakpointsSidebarPane extends CategorizedBreakpointsSidebarPane {
-  private constructor() {
+  readonly #eventBreakpointsManager: SDK.EventBreakpointsModel.EventBreakpointsManager;
+
+  constructor(eventBreakpointsManager: SDK.EventBreakpointsModel.EventBreakpointsManager) {
     let breakpoints: SDK.CategorizedBreakpoint.CategorizedBreakpoint[] =
         SDK.DOMDebuggerModel.DOMDebuggerManager.instance().eventListenerBreakpoints();
-    const nonDomBreakpoints = SDK.EventBreakpointsModel.EventBreakpointsManager.instance().eventListenerBreakpoints();
+    const nonDomBreakpoints = eventBreakpointsManager.eventListenerBreakpoints();
     breakpoints = breakpoints.concat(nonDomBreakpoints);
 
     super(
         breakpoints, `${VisualLogging.section('sources.event-listener-breakpoints')}`,
         'sources.event-listener-breakpoints');
-  }
-
-  static instance(): EventListenerBreakpointsSidebarPane {
-    if (!eventListenerBreakpointsSidebarPaneInstance) {
-      eventListenerBreakpointsSidebarPaneInstance = new EventListenerBreakpointsSidebarPane();
-    }
-    return eventListenerBreakpointsSidebarPaneInstance;
+    this.#eventBreakpointsManager = eventBreakpointsManager;
   }
 
   override getBreakpointFromPausedDetails(details: SDK.DebuggerModel.DebuggerPausedDetails):
@@ -39,6 +33,6 @@ export class EventListenerBreakpointsSidebarPane extends CategorizedBreakpointsS
     if (domBreakpoint) {
       return domBreakpoint;
     }
-    return SDK.EventBreakpointsModel.EventBreakpointsManager.instance().resolveEventListenerBreakpoint(auxData);
+    return this.#eventBreakpointsManager.resolveEventListenerBreakpoint(auxData);
   }
 }

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

@@ -2,6 +2,7 @@
 // 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';
 import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
@@ -116,10 +117,11 @@ async function loadSourcesModule(): Promise<typeof Sources> {
 }
 
 UI.ViewManager.registerViewExtension({
-  async loadView() {
+  loadView: Common.Lazy.lazy(async universe => {
     const BrowserDebugger = await loadBrowserDebuggerModule();
-    return BrowserDebugger.EventListenerBreakpointsSidebarPane.EventListenerBreakpointsSidebarPane.instance();
-  },
+    return new BrowserDebugger.EventListenerBreakpointsSidebarPane.EventListenerBreakpointsSidebarPane(
+        universe.eventBreakpointsManager);
+  }),
   id: 'sources.event-listener-breakpoints',
   location: UI.ViewManager.ViewLocationValues.SOURCES_SIDEBAR_BOTTOM,
   commandPrompt: i18nLazyString(UIStrings.showEventListenerBreakpoints),

package/front_end/panels/console/ConsoleFormat.ts

@@ -2,9 +2,8 @@
 // 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 type * as Platform from '../../core/platform/platform.js';
 import type * as SDK from '../../core/sdk/sdk.js';
+import * as ObjectUI from '../../ui/legacy/components/object_ui/object_ui.js';
 
 // VGA color palette
 const ANSI_COLORS = ['black', 'red', 'green', 'yellow', 'blue', 'magenta', 'cyan', 'gray'];
@@ -199,65 +198,6 @@ export const format = (fmt: string, args: SDK.RemoteObject.RemoteObject[]): {
   return {tokens, args: args.slice(argIndex)};
 };
 
-/**
- * This function converts a string into a partial regex string that
- * case-insensitively matches it in CSS, even if CSS escapes are used.
- *
- * @param cssString the target string.
- * @returns a partial regex matching the string in CSS.
- */
-const cssEscapeRegex = (cssString: string): string => {
-  return [...cssString]
-      .map(char => {
-        const charCodes = new Set([char.toLowerCase(), char.toUpperCase()].map(c => c.charCodeAt(0).toString(16)));
-        const charCodeRegex =
-            [...charCodes].map(charCode => `\\\\0{0,${6 - charCode.length}}${charCode}[ \\n\\t]?`).join('|');
-        return `\\\\?(?:${charCodeRegex}|${char})`;
-      })
-      .join('');
-};
-
 export const updateStyle = (currentStyle: Map<string, {value: string, priority: string}>, styleToAdd: string): void => {
-  const ALLOWED_PROPERTY_PREFIXES = ['background', 'border', 'color', 'font', 'line', 'margin', 'padding', 'text'];
-  // We only allow data URLs with the `url()` CSS function.
-  // The capture group is not intended to grab the whole URL exactly, just enough so we can check the scheme.
-  // The regex also covers CSS hex-escaped variations of `url()`.
-  const URL_REGEX = new RegExp(`(?=${cssEscapeRegex('url')}\\(['"]?([^\\)]*))`, 'gi');
-  // We greedily capture all `image-set()`s to make sure that all of
-  // them properly use `url()`s to enforce the data URL check later.
-  const IMAGESET_REGEX = new RegExp(`(?=(${cssEscapeRegex('image-set')}\\(.*))`, 'gi');
-  const GOOD_IMAGESET_REGEX = /^image-set\((?:(?:(?:url|type)\("[^\\"]*"\)|[\d.]+(?:x|dpi|dpcm|dppx)),?\s*)+\)/i;
-
-  currentStyle.clear();
-  /* eslint-disable-next-line @devtools/no-imperative-dom-api --
-   * We're not mutating the DOM here, but just need a temporary
-   * `<span>` to parse `styleToAdd` into a `CSSStyleDeclaration`.
-   **/
-  const buffer = document.createElement('span');
-  buffer.setAttribute('style', styleToAdd);
-  for (const property of buffer.style) {
-    if (!ALLOWED_PROPERTY_PREFIXES.some(
-            prefix => property.startsWith(prefix) || property.startsWith(`-webkit-${prefix}`))) {
-      continue;
-    }
-
-    const value = buffer.style.getPropertyValue(property);
-    // We make sure every `image-set()` only uses `url()`s for its images.
-    // If any of them seem malformed, we skip the whole property.
-    const imageSets = [...value.matchAll(IMAGESET_REGEX)];
-    if (imageSets.some(match => !GOOD_IMAGESET_REGEX.test(match[1]))) {
-      continue;
-    }
-    // There could be multiple `url()` functions, so we check them all.
-    // If any of them is not a `data` URL, we skip the whole property.
-    const potentialUrls = [...value.matchAll(URL_REGEX)].map(match => match[1]);
-    if (potentialUrls.some(
-            potentialUrl => !Common.ParsedURL.schemeIs(potentialUrl as Platform.DevToolsPath.UrlString, 'data:'))) {
-      continue;
-    }
-    currentStyle.set(property, {
-      value,
-      priority: buffer.style.getPropertyPriority(property),
-    });
-  }
+  ObjectUI.CSSStyleSanitizer.sanitizeStyle(currentStyle, styleToAdd);
 };

package/front_end/panels/console/ConsoleViewMessage.ts

@@ -880,9 +880,13 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
     if (includePreview && obj.preview) {
       renderPreview(true);
     } else if (obj.type === 'function') {
-      const functionElement = titleElement.createChild('span');
-      void ObjectUI.ObjectPropertiesSection.ObjectPropertiesSection.formatObjectAsFunction(obj, functionElement, false);
       titleElement.classList.add('object-value-function');
+      void ObjectUI.ObjectPropertiesSection.formatObjectAsFunction(obj, false).then(t => {
+        const fragment = document.createDocumentFragment();
+
+        render(t, fragment, {host: this});
+        titleElement.insertBefore(fragment, titleElement.firstChild);
+      });
     } else if (obj.subtype === 'trustedtype') {
       titleElement.appendChild(this.formatParameterAsTrustedType(obj));
     } else {
@@ -923,16 +927,19 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
     return result;
 
     function formatTargetFunction(this: ConsoleViewMessage, targetFunction: SDK.RemoteObject.RemoteObject): void {
-      const functionElement = document.createElement('span');
-      const promise = ObjectUI.ObjectPropertiesSection.ObjectPropertiesSection.formatObjectAsFunction(
-          targetFunction, functionElement, true, includePreview);
-      result.appendChild(functionElement);
+      const promise = ObjectUI.ObjectPropertiesSection.formatObjectAsFunction(targetFunction, true, includePreview);
       if (targetFunction !== originalFunction) {
         const note = result.createChild('span', 'object-state-note info-note');
         UI.Tooltip.Tooltip.install(note, i18nString(UIStrings.functionWasResolvedFromBound));
       }
       result.addEventListener('contextmenu', this.contextMenuEventFired.bind(this, originalFunction), false);
-      void promise.then(() => this.formattedParameterAsFunctionForTest());
+      void promise.then(t => {
+        const fragment = document.createDocumentFragment();
+
+        render(t, fragment, {host: this});
+        result.insertBefore(fragment, result.firstChild);
+        this.formattedParameterAsFunctionForTest();
+      });
     }
   }
 

package/front_end/panels/elements/ElementsTreeElement.ts

@@ -40,7 +40,6 @@ import * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
 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 TextUtils from '../../core/text_utils/text_utils.js';
 import * as Protocol from '../../generated/protocol.js';
@@ -1388,7 +1387,7 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
       showGridAdorner: Boolean(this.#layout?.isGrid) && !this.isClosingTag(),
       showGridLanesAdorner: Boolean(this.#layout?.isGridLanes) && !this.isClosingTag(),
       showMediaAdorner: this.node().isMediaNode() && !this.isClosingTag(),
-      showPopoverAdorner: Boolean(Root.Runtime.hostConfig.devToolsAllowPopoverForcing?.enabled) &&
+      showPopoverAdorner:
           Boolean(this.node().attributes().find(attr => attr.name === 'popover')) && !this.isClosingTag(),
       showTopLayerAdorner: this.node().topLayerIndex() !== -1 && !this.isClosingTag(),
       gridAdornerActive: this.#gridAdornerActive,

package/front_end/panels/emulation/AdvancedApp.ts

@@ -58,8 +58,7 @@ export class AdvancedApp implements UI.App.App {
 
     this.inspectedPagePlaceholder = InspectedPagePlaceholder.instance();
     this.inspectedPagePlaceholder.addEventListener(Events.UPDATE, this.onSetInspectedPageBounds.bind(this), this);
-    this.deviceModeView =
-        DeviceModeWrapper.instance({inspectedPagePlaceholder: this.inspectedPagePlaceholder, forceNew: false});
+    this.deviceModeView = new DeviceModeWrapper();
 
     UI.DockController.DockController.instance().addEventListener(
         UI.DockController.Events.BEFORE_DOCK_SIDE_CHANGED, this.onBeforeDockSideChange, this);