chrome-devtools-frontend 1.0.1016605 → 1.0.1017091

package/config/gni/devtools_grd_files.gni

@@ -654,6 +654,7 @@ grd_files_debug_sources = [
   "front_end/core/sdk/ServiceWorkerManager.js",
   "front_end/core/sdk/SourceMap.js",
   "front_end/core/sdk/SourceMapManager.js",
+  "front_end/core/sdk/StorageKeyManager.js",
   "front_end/core/sdk/Target.js",
   "front_end/core/sdk/TargetManager.js",
   "front_end/core/sdk/TracingManager.js",
@@ -961,6 +962,7 @@ grd_files_debug_sources = [
   "front_end/panels/elements/StylePropertyTreeElement.js",
   "front_end/panels/elements/StylePropertyUtils.js",
   "front_end/panels/elements/StylesSidebarPane.js",
+  "front_end/panels/elements/TopLayerContainer.js",
   "front_end/panels/elements/classesPaneWidget.css.js",
   "front_end/panels/elements/components/AccessibilityTreeNode.js",
   "front_end/panels/elements/components/AdornerManager.js",

package/front_end/core/i18n/locales/en-US.json

@@ -5159,6 +5159,9 @@
   "panels/elements/StylesSidebarPane.ts | unknownPropertyName": {
     "message": "Unknown property name"
   },
+  "panels/elements/TopLayerContainer.ts | topLayer": {
+    "message": "top-layer"
+  },
   "panels/emulation/DeviceModeToolbar.ts | addDevicePixelRatio": {
     "message": "Add device pixel ratio"
   },

package/front_end/core/i18n/locales/en-XL.json

@@ -5159,6 +5159,9 @@
   "panels/elements/StylesSidebarPane.ts | unknownPropertyName": {
     "message": "Ûńk̂ńôẃn̂ ṕr̂óp̂ér̂t́ŷ ńâḿê"
   },
+  "panels/elements/TopLayerContainer.ts | topLayer": {
+    "message": "t̂óp̂-ĺâýêŕ"
+  },
   "panels/emulation/DeviceModeToolbar.ts | addDevicePixelRatio": {
     "message": "Âd́d̂ d́êv́îćê ṕîx́êĺ r̂át̂íô"
   },

package/front_end/core/sdk/DOMModel.ts

@@ -1410,6 +1410,10 @@ export class DOMModel extends SDKModel<EventTypes> {
     this.scheduleMutationEvent(node);
   }
 
+  topLayerElementsUpdated(): void {
+    this.dispatchEventToListeners(Events.TopLayerElementsChanged);
+  }
+
   pseudoElementRemoved(parentId: Protocol.DOM.NodeId, pseudoElementId: Protocol.DOM.NodeId): void {
     const parent = this.idToDOMNode.get(parentId);
     if (!parent) {
@@ -1511,6 +1515,10 @@ export class DOMModel extends SDKModel<EventTypes> {
     return this.agent.invoke_querySelectorAll({nodeId, selector}).then(({nodeIds}) => nodeIds);
   }
 
+  getTopLayerElements(): Promise<Protocol.DOM.NodeId[]|null> {
+    return this.agent.invoke_getTopLayerElements().then(({nodeIds}) => nodeIds);
+  }
+
   markUndoableState(minorChange?: boolean): void {
     void DOMModelUndoStack.instance().markUndoableState(this, minorChange || false);
   }
@@ -1574,6 +1582,7 @@ export enum Events {
   ChildNodeCountUpdated = 'ChildNodeCountUpdated',
   DistributedNodesChanged = 'DistributedNodesChanged',
   MarkersChanged = 'MarkersChanged',
+  TopLayerElementsChanged = 'TopLayerElementsChanged',
 }
 
 export type EventTypes = {
@@ -1587,6 +1596,7 @@ export type EventTypes = {
   [Events.ChildNodeCountUpdated]: DOMNode,
   [Events.DistributedNodesChanged]: DOMNode,
   [Events.MarkersChanged]: DOMNode,
+  [Events.TopLayerElementsChanged]: void,
 };
 
 class DOMDispatcher implements ProtocolProxyApi.DOMDispatcher {
@@ -1652,6 +1662,7 @@ class DOMDispatcher implements ProtocolProxyApi.DOMDispatcher {
   }
 
   topLayerElementsUpdated(): void {
+    this.#domModel.topLayerElementsUpdated();
   }
 }
 

package/front_end/core/sdk/ResourceTreeModel.ts

@@ -50,10 +50,13 @@ import {Capability} from './Target.js';
 import {SDKModel} from './SDKModel.js';
 import {TargetManager} from './TargetManager.js';
 import {SecurityOriginManager} from './SecurityOriginManager.js';
+import {StorageKeyManager} from './StorageKeyManager.js';
 
 export class ResourceTreeModel extends SDKModel<EventTypes> {
   readonly agent: ProtocolProxyApi.PageApi;
+  readonly storageAgent: ProtocolProxyApi.StorageApi;
   readonly #securityOriginManager: SecurityOriginManager;
+  readonly #storageKeyManager: StorageKeyManager;
   readonly framesInternal: Map<string, ResourceTreeFrame>;
   #cachedResourcesProcessed: boolean;
   #pendingReloadOptions: {
@@ -75,8 +78,10 @@ export class ResourceTreeModel extends SDKModel<EventTypes> {
       networkManager.addEventListener(NetworkManagerEvents.RequestUpdateDropped, this.onRequestUpdateDropped, this);
     }
     this.agent = target.pageAgent();
+    this.storageAgent = target.storageAgent();
     void this.agent.invoke_enable();
     this.#securityOriginManager = (target.model(SecurityOriginManager) as SecurityOriginManager);
+    this.#storageKeyManager = (target.model(StorageKeyManager) as StorageKeyManager);
     this.#pendingBackForwardCacheNotUsedEvents = new Set<Protocol.Page.BackForwardCacheNotUsedEvent>();
     this.#pendingPrerenderAttemptCompletedEvents = new Set<Protocol.Page.PrerenderAttemptCompletedEvent>();
     target.registerPageDispatcher(new PageDispatcher(this));
@@ -129,6 +134,14 @@ export class ResourceTreeModel extends SDKModel<EventTypes> {
     }
   }
 
+  async storageKeyForFrame(frameId: Protocol.Page.FrameId): Promise<string|null> {
+    const response = await this.storageAgent.invoke_getStorageKeyForFrame({frameId: frameId});
+    if (response.getError() === 'Frame tree node for given frame not found') {
+      return null;
+    }
+    return response.storageKey;
+  }
+
   domModel(): DOMModel {
     return this.target().model(DOMModel) as DOMModel;
   }
@@ -164,6 +177,7 @@ export class ResourceTreeModel extends SDKModel<EventTypes> {
     }
     this.dispatchEventToListeners(Events.FrameAdded, frame);
     this.updateSecurityOrigins();
+    void this.updateStorageKeys();
   }
 
   frameAttached(
@@ -233,6 +247,7 @@ export class ResourceTreeModel extends SDKModel<EventTypes> {
       this.target().setInspectedURL(frame.url);
     }
     this.updateSecurityOrigins();
+    void this.updateStorageKeys();
   }
 
   documentOpened(framePayload: Protocol.Page.Frame): void {
@@ -265,6 +280,7 @@ export class ResourceTreeModel extends SDKModel<EventTypes> {
       frame.remove(isSwap);
     }
     this.updateSecurityOrigins();
+    void this.updateStorageKeys();
   }
 
   private onRequestFinished(event: Common.EventTarget.EventTargetEvent<NetworkRequest>): void {
@@ -520,6 +536,26 @@ export class ResourceTreeModel extends SDKModel<EventTypes> {
     };
   }
 
+  private async getStorageKeyData(): Promise<StorageKeyData> {
+    const storageKeys = new Set<string>();
+    let mainStorageKey: string|null = null;
+
+    for (const {isMainFrame, storageKey} of await Promise.all(
+             [...this.framesInternal.values()].map(async f => f.storageKey.then(k => ({
+                                                                                  isMainFrame: f.isMainFrame(),
+                                                                                  storageKey: k,
+                                                                                }))))) {
+      if (isMainFrame) {
+        mainStorageKey = storageKey;
+      }
+      if (storageKey) {
+        storageKeys.add(storageKey);
+      }
+    }
+
+    return {storageKeys: storageKeys, mainStorageKey: mainStorageKey};
+  }
+
   private updateSecurityOrigins(): void {
     const data = this.getSecurityOriginData();
     this.#securityOriginManager.setMainSecurityOrigin(
@@ -527,6 +563,16 @@ export class ResourceTreeModel extends SDKModel<EventTypes> {
     this.#securityOriginManager.updateSecurityOrigins(data.securityOrigins);
   }
 
+  private async updateStorageKeys(): Promise<void> {
+    const data = await this.getStorageKeyData();
+    this.#storageKeyManager.setMainStorageKey(data.mainStorageKey || '');
+    this.#storageKeyManager.updateStorageKeys(data.storageKeys);
+  }
+
+  async getMainStorageKey(): Promise<string|null> {
+    return this.mainFrame ? this.mainFrame.storageKey : null;
+  }
+
   getMainSecurityOrigin(): string|null {
     const data = this.getSecurityOriginData();
     return data.mainSecurityOrigin || data.unreachableMainSecurityOrigin;
@@ -626,6 +672,7 @@ export class ResourceTreeFrame {
   #urlInternal: Platform.DevToolsPath.UrlString;
   #domainAndRegistryInternal: string;
   #securityOriginInternal: string|null;
+  #storageKeyInternal?: Promise<string|null>;
   #unreachableUrlInternal: Platform.DevToolsPath.UrlString;
   #adFrameStatusInternal?: Protocol.Page.AdFrameStatus;
   #secureContextType: Protocol.Page.SecureContextType|null;
@@ -758,6 +805,13 @@ export class ResourceTreeFrame {
     return this.#securityOriginInternal;
   }
 
+  get storageKey(): Promise<string|null> {
+    if (!this.#storageKeyInternal) {
+      this.#storageKeyInternal = this.#model.storageKeyForFrame(this.#idInternal);
+    }
+    return this.#storageKeyInternal;
+  }
+
   unreachableUrl(): Platform.DevToolsPath.UrlString {
     return this.#unreachableUrlInternal;
   }
@@ -1122,3 +1176,8 @@ export interface SecurityOriginData {
   mainSecurityOrigin: string|null;
   unreachableMainSecurityOrigin: string|null;
 }
+
+export interface StorageKeyData {
+  storageKeys: Set<string>;
+  mainStorageKey: string|null;
+}

package/front_end/core/sdk/Script.ts

@@ -268,7 +268,7 @@ export class Script implements TextUtils.ContentProvider.ContentProvider, FrameA
       return {status: Protocol.Debugger.SetScriptSourceResponseStatus.Ok};
     }
     const response = await this.debuggerModel.target().debuggerAgent().invoke_setScriptSource(
-        {scriptId: this.scriptId, scriptSource: newSource});
+        {scriptId: this.scriptId, scriptSource: newSource, allowTopFrameEditing: true});
     if (response.getError()) {
       // Something went seriously wrong, like the V8 inspector no longer knowing about this script without
       // shutting down the Debugger agent etc.

package/front_end/core/sdk/SecurityOriginManager.ts

@@ -81,5 +81,5 @@ export type EventTypes = {
   [Events.MainSecurityOriginChanged]: MainSecurityOriginChangedEvent,
 };
 
-// TODO(jarhar): this is the only usage of Capability.None. Do something about it!
+// TODO(jarhar): this is the one of the two usages of Capability.None. Do something about it!
 SDKModel.register(SecurityOriginManager, {capabilities: Capability.None, autostart: false});

package/front_end/core/sdk/StorageKeyManager.ts

@@ -0,0 +1,71 @@
+// Copyright 2022 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import type {Target} from './Target.js';
+import {Capability} from './Target.js';
+import {SDKModel} from './SDKModel.js';
+
+export class StorageKeyManager extends SDKModel<EventTypes> {
+  #mainStorageKeyInternal: string;
+  #storageKeysInternal: Set<string>;
+  constructor(target: Target) {
+    super(target);
+
+    this.#mainStorageKeyInternal = '';
+    this.#storageKeysInternal = new Set();
+  }
+
+  updateStorageKeys(storageKeys: Set<string>): void {
+    const oldStorageKeys = this.#storageKeysInternal;
+    this.#storageKeysInternal = storageKeys;
+
+    for (const storageKey of oldStorageKeys) {
+      if (!this.#storageKeysInternal.has(storageKey)) {
+        this.dispatchEventToListeners(Events.StorageKeyRemoved, storageKey);
+      }
+    }
+
+    for (const storageKey of this.#storageKeysInternal) {
+      if (!oldStorageKeys.has(storageKey)) {
+        this.dispatchEventToListeners(Events.StorageKeyAdded, storageKey);
+      }
+    }
+  }
+
+  storageKeys(): string[] {
+    return [...this.#storageKeysInternal];
+  }
+
+  mainStorageKey(): string {
+    return this.#mainStorageKeyInternal;
+  }
+
+  setMainStorageKey(storageKey: string): void {
+    this.#mainStorageKeyInternal = storageKey;
+    this.dispatchEventToListeners(Events.MainStorageKeyChanged, {
+      mainStorageKey: this.#mainStorageKeyInternal,
+    });
+  }
+}
+
+// TODO(crbug.com/1167717): Make this a const enum again
+// eslint-disable-next-line rulesdir/const_enum
+export enum Events {
+  StorageKeyAdded = 'StorageKeyAdded',
+  StorageKeyRemoved = 'StorageKeyRemoved',
+  MainStorageKeyChanged = 'MainStorageKeyChanged',
+}
+
+export interface MainStorageKeyChangedEvent {
+  mainStorageKey: string;
+}
+
+export type EventTypes = {
+  [Events.StorageKeyAdded]: string,
+  [Events.StorageKeyRemoved]: string,
+  [Events.MainStorageKeyChanged]: MainStorageKeyChangedEvent,
+};
+
+// TODO(jarhar): this is the one of the two usages of Capability.None. Do something about it!
+SDKModel.register(StorageKeyManager, {capabilities: Capability.None, autostart: false});

package/front_end/core/sdk/sdk.ts

@@ -72,6 +72,7 @@ import * as ServiceWorkerCacheModel from './ServiceWorkerCacheModel.js';
 import * as ServiceWorkerManager from './ServiceWorkerManager.js';
 import * as SourceMap from './SourceMap.js';
 import * as SourceMapManager from './SourceMapManager.js';
+import * as StorageKeyManager from './StorageKeyManager.js';
 import * as Target from './Target.js';
 import * as TargetManager from './TargetManager.js';
 import * as TracingManager from './TracingManager.js';
@@ -141,6 +142,7 @@ export {
   ServiceWorkerManager,
   SourceMap,
   SourceMapManager,
+  StorageKeyManager,
   Target,
   TargetManager,
   TracingManager,

package/front_end/entrypoints/formatter_worker/ScopeParser.ts

@@ -312,8 +312,9 @@ export class ScopeVariableAnalysis {
         break;
       case 'Property':
         if (node.shorthand) {
-          console.assert(node.value === node.key);
           console.assert(node.value.type === 'Identifier');
+          console.assert(node.key.type === 'Identifier');
+          console.assert((node.value as Acorn.ESTree.Identifier).name === (node.key as Acorn.ESTree.Identifier).name);
           this.#addVariable((node.value as Acorn.ESTree.Identifier).name, node.value.start, DefinitionKind.None, true);
         } else {
           if (node.computed) {
@@ -469,8 +470,9 @@ export class ScopeVariableAnalysis {
       case 'Property':
         // This is AssignmentProperty inside an object pattern.
         if (node.shorthand) {
-          console.assert(node.value === node.key);
           console.assert(node.value.type === 'Identifier');
+          console.assert(node.key.type === 'Identifier');
+          console.assert((node.value as Acorn.ESTree.Identifier).name === (node.key as Acorn.ESTree.Identifier).name);
           this.#addVariable((node.value as Acorn.ESTree.Identifier).name, node.value.start, definitionKind, true);
         } else {
           if (node.computed) {

package/front_end/panels/application/ApplicationPanelSidebar.ts

@@ -603,6 +603,7 @@ export class ApplicationPanelSidebar extends UI.Widget.VBox implements SDK.Targe
 
   private addDOMStorage(domStorage: DOMStorage): void {
     console.assert(!this.domStorageTreeElements.get(domStorage));
+    console.assert(Boolean(domStorage.storageKey) || Boolean(domStorage.securityOrigin));
 
     const domStorageTreeElement = new DOMStorageTreeElement(this.panel, domStorage);
     this.domStorageTreeElements.set(domStorage, domStorageTreeElement);
@@ -1422,7 +1423,10 @@ export class DOMStorageTreeElement extends ApplicationPanelTreeElement {
   private readonly domStorage: DOMStorage;
   constructor(storagePanel: ResourcesPanel, domStorage: DOMStorage) {
     super(
-        storagePanel, domStorage.securityOrigin ? domStorage.securityOrigin : i18nString(UIStrings.localFiles), false);
+        storagePanel,
+        domStorage.securityOrigin ? domStorage.securityOrigin :
+                                    (domStorage.storageKey ? domStorage.storageKey : i18nString(UIStrings.localFiles)),
+        false);
     this.domStorage = domStorage;
     const icon = UI.Icon.Icon.create('mediumicon-table', 'resource-tree-item');
     this.setLeadingIcons([icon]);

package/front_end/panels/application/DOMStorageModel.ts

@@ -38,13 +38,15 @@ import type * as ProtocolProxyApi from '../../generated/protocol-proxy-api.js';
 
 export class DOMStorage extends Common.ObjectWrapper.ObjectWrapper<DOMStorage.EventTypes> {
   private readonly model: DOMStorageModel;
-  private readonly securityOriginInternal: string;
+  private readonly securityOriginInternal: string|null;
+  private readonly storageKeyInternal: string|null;
   private readonly isLocalStorageInternal: boolean;
 
-  constructor(model: DOMStorageModel, securityOrigin: string, isLocalStorage: boolean) {
+  constructor(model: DOMStorageModel, securityOrigin: string, storageKey: string, isLocalStorage: boolean) {
     super();
     this.model = model;
     this.securityOriginInternal = securityOrigin;
+    this.storageKeyInternal = storageKey;
     this.isLocalStorageInternal = isLocalStorage;
   }
 
@@ -52,14 +54,46 @@ export class DOMStorage extends Common.ObjectWrapper.ObjectWrapper<DOMStorage.Ev
     return {securityOrigin: securityOrigin, isLocalStorage: isLocalStorage};
   }
 
+  static storageIdWithSecurityOrigin(securityOrigin: string, isLocalStorage: boolean): Protocol.DOMStorage.StorageId {
+    return {securityOrigin: securityOrigin, isLocalStorage: isLocalStorage};
+  }
+
+  static storageIdWithStorageKey(storageKey: string, isLocalStorage: boolean): Protocol.DOMStorage.StorageId {
+    return {storageKey: storageKey, isLocalStorage: isLocalStorage};
+  }
+
+  get idWithSecurityOrigin(): Protocol.DOMStorage.StorageId {
+    let securityOrigin = '';
+    if (this.securityOriginInternal) {
+      securityOrigin = this.securityOriginInternal;
+    }
+    return DOMStorage.storageIdWithSecurityOrigin(securityOrigin, this.isLocalStorageInternal);
+  }
+
+  get idWithStorageKey(): Protocol.DOMStorage.StorageId {
+    let storageKey = '';
+    if (this.storageKeyInternal) {
+      storageKey = this.storageKeyInternal;
+    }
+    return DOMStorage.storageIdWithStorageKey(storageKey, this.isLocalStorageInternal);
+  }
+
   get id(): Protocol.DOMStorage.StorageId {
-    return DOMStorage.storageId(this.securityOriginInternal, this.isLocalStorageInternal);
+    // TODO(crbug.com/1313434) Prioritize storageKey once everything is ready
+    if (this.securityOriginInternal) {
+      return this.idWithSecurityOrigin;
+    }
+    return this.idWithStorageKey;
   }
 
-  get securityOrigin(): string {
+  get securityOrigin(): string|null {
     return this.securityOriginInternal;
   }
 
+  get storageKey(): string|null {
+    return this.storageKeyInternal;
+  }
+
   get isLocalStorage(): boolean {
     return this.isLocalStorageInternal;
   }
@@ -116,6 +150,7 @@ export namespace DOMStorage {
 
 export class DOMStorageModel extends SDK.SDKModel.SDKModel<EventTypes> {
   private readonly securityOriginManager: SDK.SecurityOriginManager.SecurityOriginManager|null;
+  private readonly storageKeyManagerInternal: SDK.StorageKeyManager.StorageKeyManager|null;
   private storagesInternal: {
     [x: string]: DOMStorage,
   };
@@ -126,10 +161,15 @@ export class DOMStorageModel extends SDK.SDKModel.SDKModel<EventTypes> {
     super(target);
 
     this.securityOriginManager = target.model(SDK.SecurityOriginManager.SecurityOriginManager);
+    this.storageKeyManagerInternal = target.model(SDK.StorageKeyManager.StorageKeyManager);
     this.storagesInternal = {};
     this.agent = target.domstorageAgent();
   }
 
+  get storageKeyManagerForTest(): SDK.StorageKeyManager.StorageKeyManager|null {
+    return this.storageKeyManagerInternal;
+  }
+
   enable(): void {
     if (this.enabled) {
       return;
@@ -146,6 +186,16 @@ export class DOMStorageModel extends SDK.SDKModel.SDKModel<EventTypes> {
         this.addOrigin(securityOrigin);
       }
     }
+    if (this.storageKeyManagerInternal) {
+      this.storageKeyManagerInternal.addEventListener(
+          SDK.StorageKeyManager.Events.StorageKeyAdded, this.storageKeyAdded, this);
+      this.storageKeyManagerInternal.addEventListener(
+          SDK.StorageKeyManager.Events.StorageKeyRemoved, this.storageKeyRemoved, this);
+
+      for (const storageKey of this.storageKeyManagerInternal.storageKeys()) {
+        this.addStorageKey(storageKey);
+      }
+    }
     void this.agent.invoke_enable();
 
     this.enabled = true;
@@ -156,7 +206,7 @@ export class DOMStorageModel extends SDK.SDKModel.SDKModel<EventTypes> {
       return;
     }
     for (const isLocal of [true, false]) {
-      const key = this.storageKey(origin, isLocal);
+      const key = this.keyForSecurityOrigin(origin, isLocal);
       const storage = this.storagesInternal[key];
       if (!storage) {
         return;
@@ -167,10 +217,30 @@ export class DOMStorageModel extends SDK.SDKModel.SDKModel<EventTypes> {
     this.addOrigin(origin);
   }
 
+  clearForStorageKey(storageKey: string): void {
+    if (!this.enabled) {
+      return;
+    }
+    for (const isLocal of [true, false]) {
+      const key = this.keyForStorageKey(storageKey, isLocal);
+      const storage = this.storagesInternal[key];
+      if (!storage) {
+        return;
+      }
+      storage.clear();
+    }
+    this.removeStorageKey(storageKey);
+    this.addStorageKey(storageKey);
+  }
+
   private securityOriginAdded(event: Common.EventTarget.EventTargetEvent<string>): void {
     this.addOrigin(event.data);
   }
 
+  private storageKeyAdded(event: Common.EventTarget.EventTargetEvent<string>): void {
+    this.addStorageKey(event.data);
+  }
+
   private addOrigin(securityOrigin: string): void {
     const parsed = new Common.ParsedURL.ParsedURL(securityOrigin);
     // These are "opaque" origins which are not supposed to support DOM storage.
@@ -179,21 +249,67 @@ export class DOMStorageModel extends SDK.SDKModel.SDKModel<EventTypes> {
     }
 
     for (const isLocal of [true, false]) {
-      const key = this.storageKey(securityOrigin, isLocal);
+      const key = this.keyForSecurityOrigin(securityOrigin, isLocal);
       console.assert(!this.storagesInternal[key]);
-      const storage = new DOMStorage(this, securityOrigin, isLocal);
+      if (this.duplicateExists(key)) {
+        continue;
+      }
+      const storage = new DOMStorage(this, securityOrigin, '', isLocal);
+      this.storagesInternal[key] = storage;
+      this.dispatchEventToListeners(Events.DOMStorageAdded, storage);
+    }
+  }
+
+  private addStorageKey(storageKey: string): void {
+    for (const isLocal of [true, false]) {
+      const key = this.keyForStorageKey(storageKey, isLocal);
+      console.assert(!this.storagesInternal[key]);
+      if (this.duplicateExists(key)) {
+        continue;
+      }
+      const storage = new DOMStorage(this, '', storageKey, isLocal);
       this.storagesInternal[key] = storage;
       this.dispatchEventToListeners(Events.DOMStorageAdded, storage);
     }
   }
 
+  private duplicateExists(key: string): boolean {
+    const parsedKey = JSON.parse(key);
+    for (const storageInternal in this.storagesInternal) {
+      const parsedStorageInternalKey = JSON.parse(storageInternal);
+      if (parsedKey.isLocalStorage === parsedStorageInternalKey.isLocalStorage) {
+        if (parsedKey.storageKey?.slice(0, -1) === parsedStorageInternalKey.securityOrigin ||
+            parsedKey.securityOrigin === parsedStorageInternalKey.storageKey?.slice(0, -1)) {
+          return true;
+        }
+      }
+    }
+    return false;
+  }
+
   private securityOriginRemoved(event: Common.EventTarget.EventTargetEvent<string>): void {
     this.removeOrigin(event.data);
   }
 
+  private storageKeyRemoved(event: Common.EventTarget.EventTargetEvent<string>): void {
+    this.removeStorageKey(event.data);
+  }
+
   private removeOrigin(securityOrigin: string): void {
     for (const isLocal of [true, false]) {
-      const key = this.storageKey(securityOrigin, isLocal);
+      const key = this.keyForSecurityOrigin(securityOrigin, isLocal);
+      const storage = this.storagesInternal[key];
+      if (!storage) {
+        continue;
+      }
+      delete this.storagesInternal[key];
+      this.dispatchEventToListeners(Events.DOMStorageRemoved, storage);
+    }
+  }
+
+  private removeStorageKey(storageKey: string): void {
+    for (const isLocal of [true, false]) {
+      const key = this.keyForStorageKey(storageKey, isLocal);
       const storage = this.storagesInternal[key];
       if (!storage) {
         continue;
@@ -203,8 +319,20 @@ export class DOMStorageModel extends SDK.SDKModel.SDKModel<EventTypes> {
     }
   }
 
-  private storageKey(securityOrigin: string, isLocalStorage: boolean): string {
-    return JSON.stringify(DOMStorage.storageId(securityOrigin, isLocalStorage));
+  private storageKey(securityOrigin: string, storageKey: string, isLocalStorage: boolean): string {
+    // TODO(crbug.com/1313434) Prioritize storageKey once everything is ready
+    if (securityOrigin) {
+      return JSON.stringify(DOMStorage.storageIdWithSecurityOrigin(securityOrigin, isLocalStorage));
+    }
+    return JSON.stringify(DOMStorage.storageIdWithStorageKey(storageKey, isLocalStorage));
+  }
+
+  private keyForSecurityOrigin(securityOrigin: string, isLocalStorage: boolean): string {
+    return this.storageKey(securityOrigin, '', isLocalStorage);
+  }
+
+  private keyForStorageKey(storageKey: string, isLocalStorage: boolean): string {
+    return this.storageKey('', storageKey, isLocalStorage);
   }
 
   domStorageItemsCleared(storageId: Protocol.DOMStorage.StorageId): void {

package/front_end/panels/application/StorageView.ts

@@ -147,6 +147,7 @@ export class StorageView extends UI.ThrottledWidget.ThrottledWidget {
   private reportView: UI.ReportView.ReportView;
   private target: SDK.Target.Target|null;
   private securityOrigin: string|null;
+  private storageKey: string|null;
   private settings: Map<Protocol.Storage.StorageType, Common.Settings.Setting<boolean>>;
   private includeThirdPartyCookiesSetting: Common.Settings.Setting<boolean>;
   private quotaRow: HTMLElement;
@@ -180,6 +181,7 @@ export class StorageView extends UI.ThrottledWidget.ThrottledWidget {
     this.reportView.show(this.contentElement);
     this.target = null;
     this.securityOrigin = null;
+    this.storageKey = null;
 
     this.settings = new Map();
     for (const type of AllStorageTypes) {
@@ -277,6 +279,11 @@ export class StorageView extends UI.ThrottledWidget.ThrottledWidget {
         securityOriginManager.mainSecurityOrigin(), securityOriginManager.unreachableMainSecurityOrigin());
     securityOriginManager.addEventListener(
         SDK.SecurityOriginManager.Events.MainSecurityOriginChanged, this.originChanged, this);
+    const storageKeyManager =
+        target.model(SDK.StorageKeyManager.StorageKeyManager) as SDK.StorageKeyManager.StorageKeyManager;
+    this.updateStorageKey(storageKeyManager.mainStorageKey());
+    storageKeyManager.addEventListener(
+        SDK.StorageKeyManager.Events.MainStorageKeyChanged, this.storageKeyChanged, this);
   }
 
   targetRemoved(target: SDK.Target.Target): void {
@@ -287,6 +294,10 @@ export class StorageView extends UI.ThrottledWidget.ThrottledWidget {
         SDK.SecurityOriginManager.SecurityOriginManager;
     securityOriginManager.removeEventListener(
         SDK.SecurityOriginManager.Events.MainSecurityOriginChanged, this.originChanged, this);
+    const storageKeyManager =
+        target.model(SDK.StorageKeyManager.StorageKeyManager) as SDK.StorageKeyManager.StorageKeyManager;
+    storageKeyManager.removeEventListener(
+        SDK.StorageKeyManager.Events.MainStorageKeyChanged, this.storageKeyChanged, this);
   }
 
   private originChanged(
@@ -295,6 +306,12 @@ export class StorageView extends UI.ThrottledWidget.ThrottledWidget {
     this.updateOrigin(mainSecurityOrigin, unreachableMainSecurityOrigin);
   }
 
+  private storageKeyChanged(
+      event: Common.EventTarget.EventTargetEvent<SDK.StorageKeyManager.MainStorageKeyChangedEvent>): void {
+    const {mainStorageKey} = event.data;
+    this.updateStorageKey(mainStorageKey);
+  }
+
   private updateOrigin(mainOrigin: string, unreachableMainOrigin: string|null): void {
     const oldOrigin = this.securityOrigin;
     if (unreachableMainOrigin) {
@@ -313,6 +330,20 @@ export class StorageView extends UI.ThrottledWidget.ThrottledWidget {
     void this.doUpdate();
   }
 
+  private updateStorageKey(mainStorageKey: string): void {
+    const oldStorageKey = this.storageKey;
+
+    this.storageKey = mainStorageKey;
+    this.reportView.setSubtitle(mainStorageKey);
+
+    if (oldStorageKey !== this.storageKey) {
+      this.quotaOverrideControlRow.classList.add('hidden');
+      this.quotaOverrideCheckbox.checkboxElement.checked = false;
+      this.quotaOverrideErrorMessage.textContent = '';
+    }
+    void this.doUpdate();
+  }
+
   private async applyQuotaOverrideFromInputField(): Promise<void> {
     if (!this.target || !this.securityOrigin) {
       this.quotaOverrideErrorMessage.textContent = i18nString(UIStrings.internalError);
@@ -375,7 +406,12 @@ export class StorageView extends UI.ThrottledWidget.ThrottledWidget {
 
     if (this.target) {
       const includeThirdPartyCookies = this.includeThirdPartyCookiesSetting.get();
-      StorageView.clear(this.target, this.securityOrigin, selectedStorageTypes, includeThirdPartyCookies);
+      // TODO(crbug.com/1313434) Prioritize storageKey once everything is ready
+      if (this.securityOrigin) {
+        StorageView.clear(this.target, this.securityOrigin, selectedStorageTypes, includeThirdPartyCookies);
+      } else if (this.storageKey) {
+        StorageView.clearByStorageKey(this.target, this.storageKey, selectedStorageTypes);
+      }
     }
 
     this.clearButton.disabled = true;
@@ -436,6 +472,20 @@ export class StorageView extends UI.ThrottledWidget.ThrottledWidget {
     }
   }
 
+  static clearByStorageKey(target: SDK.Target.Target, storageKey: string, selectedStorageTypes: string[]): void {
+    // TODO(crbug.com/1313434) Invoke protocol `clear` once it ready for storageKey
+
+    const set = new Set(selectedStorageTypes);
+    const hasAll = set.has(Protocol.Storage.StorageType.All);
+
+    if (set.has(Protocol.Storage.StorageType.Local_storage) || hasAll) {
+      const storageModel = target.model(DOMStorageModel);
+      if (storageModel) {
+        storageModel.clearForStorageKey(storageKey);
+      }
+    }
+  }
+
   async doUpdate(): Promise<void> {
     if (!this.securityOrigin || !this.target) {
       this.quotaRow.textContent = '';
@@ -556,6 +606,14 @@ export class ActionDelegate implements UI.ActionRegistration.ActionDelegate {
     return false;
   }
 
+  private async clear(target: SDK.Target.Target, resourceTreeModel: SDK.ResourceTreeModel.ResourceTreeModel):
+      Promise<void> {
+    const storageKey = await resourceTreeModel.getMainStorageKey();
+    if (storageKey) {
+      StorageView.clearByStorageKey(target, storageKey, AllStorageTypes);
+    }
+  }
+
   private handleClear(includeThirdPartyCookies: boolean): boolean {
     const target = SDK.TargetManager.TargetManager.instance().mainTarget();
     if (!target) {
@@ -566,11 +624,12 @@ export class ActionDelegate implements UI.ActionRegistration.ActionDelegate {
       return false;
     }
     const securityOrigin = resourceTreeModel.getMainSecurityOrigin();
-    if (!securityOrigin) {
-      return false;
+    // TODO(crbug.com/1313434) Prioritize storageKey functionality once everything is ready
+    if (securityOrigin) {
+      StorageView.clear(target, securityOrigin, AllStorageTypes, includeThirdPartyCookies);
+      return true;
     }
-
-    StorageView.clear(target, securityOrigin, AllStorageTypes, includeThirdPartyCookies);
+    void this.clear(target, resourceTreeModel);
     return true;
   }
 }

package/front_end/panels/elements/ElementsTreeElement.ts

@@ -294,7 +294,7 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
       if (node.isAdFrameNode()) {
         const config = ElementsComponents.AdornerManager.getRegisteredAdorner(
             ElementsComponents.AdornerManager.RegisteredAdorners.AD);
-        const adorner = this.adorn(config, this.tagTypeContext);
+        const adorner = this.adorn(config);
         UI.Tooltip.Tooltip.install(adorner, i18nString(UIStrings.thisFrameWasIdentifiedAsAnAd));
       }
     }
@@ -1962,17 +1962,22 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
   }
 
   // TODO: add unit tests for adorner-related methods after component and TypeScript works are done
-  adorn({name}: {name: string}, context: OpeningTagContext): Adorners.Adorner.Adorner {
-    const adornerContent = document.createElement('span');
-    adornerContent.textContent = name;
+  adorn({name}: {name: string}, content?: HTMLElement): Adorners.Adorner.Adorner {
+    let adornerContent = content;
+    if (!adornerContent) {
+      adornerContent = document.createElement('span');
+      adornerContent.textContent = name;
+    }
     const adorner = new Adorners.Adorner.Adorner();
     adorner.data = {
       name,
       content: adornerContent,
     };
-    context.adorners.push(adorner);
-    ElementsPanel.instance().registerAdorner(adorner);
-    this.updateAdorners(context);
+    if (isOpeningTag(this.tagTypeContext)) {
+      this.tagTypeContext.adorners.push(adorner);
+      ElementsPanel.instance().registerAdorner(adorner);
+      this.updateAdorners(this.tagTypeContext);
+    }
     return adorner;
   }
 
@@ -2010,14 +2015,16 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     }
   }
 
-  removeAllAdorners(context: OpeningTagContext): void {
-    for (const adorner of context.adorners) {
-      ElementsPanel.instance().deregisterAdorner(adorner);
-      adorner.remove();
-    }
+  removeAllAdorners(): void {
+    if (isOpeningTag(this.tagTypeContext)) {
+      for (const adorner of this.tagTypeContext.adorners) {
+        ElementsPanel.instance().deregisterAdorner(adorner);
+        adorner.remove();
+      }
 
-    context.adorners = [];
-    this.updateAdorners(context);
+      this.tagTypeContext.adorners = [];
+      this.updateAdorners(this.tagTypeContext);
+    }
   }
 
   private updateAdorners(context: OpeningTagContext): void {
@@ -2098,7 +2105,7 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
 
     const config = ElementsComponents.AdornerManager.getRegisteredAdorner(
         ElementsComponents.AdornerManager.RegisteredAdorners.GRID);
-    const adorner = this.adorn(config, context);
+    const adorner = this.adorn(config);
     adorner.classList.add('grid');
 
     const onClick = (((): void => {
@@ -2135,7 +2142,7 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     }
     const config = ElementsComponents.AdornerManager.getRegisteredAdorner(
         ElementsComponents.AdornerManager.RegisteredAdorners.SCROLL_SNAP);
-    const adorner = this.adorn(config, context);
+    const adorner = this.adorn(config);
     adorner.classList.add('scroll-snap');
 
     const onClick = (((): void => {
@@ -2174,7 +2181,7 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     }
     const config = ElementsComponents.AdornerManager.getRegisteredAdorner(
         ElementsComponents.AdornerManager.RegisteredAdorners.FLEX);
-    const adorner = this.adorn(config, context);
+    const adorner = this.adorn(config);
     adorner.classList.add('flex');
 
     const onClick = (((): void => {
@@ -2213,7 +2220,7 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     }
     const config = ElementsComponents.AdornerManager.getRegisteredAdorner(
         ElementsComponents.AdornerManager.RegisteredAdorners.CONTAINER);
-    const adorner = this.adorn(config, context);
+    const adorner = this.adorn(config);
     adorner.classList.add('container');
 
     const onClick = (((): void => {

package/front_end/panels/elements/ElementsTreeOutline.ts

@@ -43,6 +43,7 @@ import {ElementsPanel} from './ElementsPanel.js';
 import {ElementsTreeElement, InitialChildrenLimit} from './ElementsTreeElement.js';
 import elementsTreeOutlineStyles from './elementsTreeOutline.css.js';
 import {ImagePreviewPopover} from './ImagePreviewPopover.js';
+import {TopLayerContainer} from './TopLayerContainer.js';
 
 import type {MarkerDecoratorRegistration} from './MarkerDecorator.js';
 
@@ -100,6 +101,7 @@ export class ElementsTreeOutline extends
   private treeElementBeingDragged?: ElementsTreeElement;
   private dragOverTreeElement?: ElementsTreeElement;
   private updateModifiedNodesTimeout?: number;
+  private topLayerContainer?: TopLayerContainer;
 
   constructor(omitRootDOMNode?: boolean, selectEnabled?: boolean, hideGutter?: boolean) {
     super();
@@ -1001,6 +1003,7 @@ export class ElementsTreeOutline extends
     domModel.addEventListener(SDK.DOMModel.Events.DocumentUpdated, this.documentUpdated, this);
     domModel.addEventListener(SDK.DOMModel.Events.ChildNodeCountUpdated, this.childNodeCountUpdated, this);
     domModel.addEventListener(SDK.DOMModel.Events.DistributedNodesChanged, this.distributedNodesChanged, this);
+    domModel.addEventListener(SDK.DOMModel.Events.TopLayerElementsChanged, this.topLayerElementsChanged, this);
   }
 
   unwireFromDOMModel(domModel: SDK.DOMModel.DOMModel): void {
@@ -1013,6 +1016,7 @@ export class ElementsTreeOutline extends
     domModel.removeEventListener(SDK.DOMModel.Events.DocumentUpdated, this.documentUpdated, this);
     domModel.removeEventListener(SDK.DOMModel.Events.ChildNodeCountUpdated, this.childNodeCountUpdated, this);
     domModel.removeEventListener(SDK.DOMModel.Events.DistributedNodesChanged, this.distributedNodesChanged, this);
+    domModel.removeEventListener(SDK.DOMModel.Events.TopLayerElementsChanged, this.topLayerElementsChanged, this);
     elementsTreeOutlineByDOMModel.delete(domModel);
   }
 
@@ -1164,13 +1168,41 @@ export class ElementsTreeOutline extends
       return Promise.resolve();
     }
 
-    return new Promise(resolve => {
-      treeElement.node().getChildNodes(() => {
-        populatedTreeElements.add(treeElement);
-        this.updateModifiedParentNode(treeElement.node());
-        resolve();
-      });
-    });
+    return new Promise<void>(resolve => {
+             treeElement.node().getChildNodes(() => {
+               populatedTreeElements.add(treeElement);
+               this.updateModifiedParentNode(treeElement.node());
+               resolve();
+             });
+           })
+        .then(() => {
+          if (treeElement.node().nodeName() === 'BODY') {
+            void this.createTopLayerContainer(treeElement);
+          }
+        });
+  }
+
+  async createTopLayerContainer(bodyElement: ElementsTreeElement): Promise<void> {
+    if (!this.topLayerContainer) {
+      this.topLayerContainer = new TopLayerContainer(bodyElement);
+    }
+    this.topLayerContainer.updateBody(bodyElement);
+    await this.updateTopLayerContainer();
+  }
+
+  async updateTopLayerContainer(): Promise<void> {
+    if (this.topLayerContainer) {
+      const bodyElement = this.topLayerContainer.bodyElement;
+      if (!bodyElement.children().includes(this.topLayerContainer) && !this.topLayerContainer.parent &&
+          !this.topLayerContainer.treeOutline) {
+        bodyElement.insertChild(this.topLayerContainer, bodyElement.childCount() - 1);
+      }
+      this.topLayerContainer.removeChildren();
+      const topLayerElementsExists = await this.topLayerContainer.addTopLayerElementsAsChildren();
+      if (!topLayerElementsExists) {
+        bodyElement.removeChild(this.topLayerContainer);
+      }
+    }
   }
 
   private createElementTreeElement(node: SDK.DOMModel.DOMNode, isClosingTag?: boolean): ElementsTreeElement {
@@ -1318,7 +1350,7 @@ export class ElementsTreeOutline extends
   }
 
   insertChildElement(
-      treeElement: ElementsTreeElement, child: SDK.DOMModel.DOMNode, index: number,
+      treeElement: ElementsTreeElement|TopLayerContainer, child: SDK.DOMModel.DOMNode, index: number,
       isClosingTag?: boolean): ElementsTreeElement {
     const newElement = this.createElementTreeElement(child, isClosingTag);
     treeElement.insertChild(newElement, index);
@@ -1427,6 +1459,10 @@ export class ElementsTreeOutline extends
     }
   }
 
+  private async topLayerElementsChanged(): Promise<void> {
+    await this.updateTopLayerContainer();
+  }
+
   private static treeOutlineSymbol = Symbol('treeOutline');
 }
 

package/front_end/panels/elements/TopLayerContainer.ts

@@ -0,0 +1,97 @@
+// Copyright 2022 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+import * as i18n from '../../core/i18n/i18n.js';
+import * as SDK from '../../core/sdk/sdk.js';
+import * as UI from '../../ui/legacy/legacy.js';
+
+import * as ElementsComponents from './components/components.js';
+import * as ElementsTreeOutline from './ElementsTreeOutline.js';
+
+import type {ElementsTreeElement} from './ElementsTreeElement.js';
+
+const UIStrings = {
+  /**
+   * @description Top layer is rendered closest to the user within a viewport, therefore its elements always appear on top of all other content
+   */
+  topLayer: 'top-layer',
+};
+
+const str_ = i18n.i18n.registerUIStrings('panels/elements/TopLayerContainer.ts', UIStrings);
+const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+
+export class TopLayerContainer extends UI.TreeOutline.TreeElement {
+  treeOutline: ElementsTreeOutline.ElementsTreeOutline|null;
+  domModel: SDK.DOMModel.DOMModel;
+  currentTopLayerElements: Set<ElementsTreeElement>;
+  bodyElement: ElementsTreeElement;
+
+  constructor(bodyElement: ElementsTreeElement) {
+    super('#top-layer');
+    this.bodyElement = bodyElement;
+    this.domModel = bodyElement.node().domModel();
+    this.treeOutline = null;
+    this.currentTopLayerElements = new Set();
+  }
+
+  updateBody(bodyElement: ElementsTreeElement): void {
+    this.bodyElement = bodyElement;
+  }
+
+  async addTopLayerElementsAsChildren(): Promise<boolean> {
+    this.removeCurrentTopLayerElementsAdorners();
+    this.currentTopLayerElements = new Set();
+    const newTopLayerElementsIDs = await this.domModel.getTopLayerElements();
+    if (newTopLayerElementsIDs === null) {
+      return false;
+    }
+    let topLayerElementIndex = 0;
+    if (newTopLayerElementsIDs) {
+      for (const elementID of newTopLayerElementsIDs) {
+        const topLayerDOMNode = this.domModel.idToDOMNode.get(elementID);
+        // Will need to add support for backdrop in the future.
+        if (topLayerDOMNode && topLayerDOMNode.nodeName() !== '::backdrop') {
+          topLayerElementIndex++;
+          const topLayerElementShortcut = new SDK.DOMModel.DOMNodeShortcut(
+              this.domModel.target(), topLayerDOMNode.backendNodeId(), 0, topLayerDOMNode.nodeName());
+          const topLayerTreeElement = this.treeOutline?.treeElementByNode.get(topLayerDOMNode);
+          const topLayerElementRepresentation = new ElementsTreeOutline.ShortcutTreeElement(topLayerElementShortcut);
+          if (topLayerTreeElement && !this.currentTopLayerElements.has(topLayerTreeElement)) {
+            this.appendChild(topLayerElementRepresentation);
+            this.addTopLayerAdorner(topLayerTreeElement, topLayerElementRepresentation, topLayerElementIndex);
+            this.currentTopLayerElements.add(topLayerTreeElement);
+          }
+        }
+      }
+    }
+    return topLayerElementIndex > 0;
+  }
+
+  private removeCurrentTopLayerElementsAdorners(): void {
+    for (const topLayerElement of this.currentTopLayerElements) {
+      topLayerElement.removeAllAdorners();
+    }
+  }
+
+  private addTopLayerAdorner(
+      element: ElementsTreeElement, topLayerElementRepresentation: ElementsTreeOutline.ShortcutTreeElement,
+      topLayerElementIndex: number): void {
+    const config = ElementsComponents.AdornerManager.getRegisteredAdorner(
+        ElementsComponents.AdornerManager.RegisteredAdorners.TOP_LAYER);
+    const adornerContent = document.createElement('span');
+    adornerContent.textContent = ` top-layer (${topLayerElementIndex}) `;
+    const adorner = element?.adorn(config, adornerContent);
+    if (adorner) {
+      const onClick = (((): void => {
+                         topLayerElementRepresentation.revealAndSelect();
+                       }) as EventListener);
+      adorner.addInteraction(onClick, {
+        isToggle: false,
+        shouldPropagateOnKeydown: false,
+        ariaLabelDefault: i18nString(UIStrings.topLayer),
+        ariaLabelActive: i18nString(UIStrings.topLayer),
+      });
+      adorner.addEventListener('mousedown', e => e.consume(), false);
+    }
+  }
+}

package/front_end/panels/elements/components/AdornerManager.ts

@@ -30,6 +30,7 @@ export enum RegisteredAdorners {
   SCROLL_SNAP = 'scroll-snap',
   CONTAINER = 'container',
   SLOT = 'slot',
+  TOP_LAYER = 'top-layer',
 }
 
 // This enum-like const object serves as the authoritative registry for all the
@@ -72,6 +73,12 @@ export function getRegisteredAdorner(which: RegisteredAdorners): RegisteredAdorn
         category: AdornerCategories.LAYOUT,
         enabledByDefault: true,
       };
+    case RegisteredAdorners.TOP_LAYER:
+      return {
+        name: 'top-layer',
+        category: AdornerCategories.LAYOUT,
+        enabledByDefault: true,
+      };
   }
 }
 

package/front_end/panels/elements/elements.ts

@@ -9,6 +9,7 @@ import './DOMLinkifier.js';
 import './DOMPath.js';
 import './ElementsSidebarPane.js';
 import './ElementsTreeElement.js';
+import './TopLayerContainer.js';
 import './ElementsTreeOutline.js';
 import './EventListenersWidget.js';
 import './MarkerDecorator.js';
@@ -25,6 +26,7 @@ import './ElementsPanel.js';
 import './ClassesPaneWidget.js';
 import './ElementStatePaneWidget.js';
 import './ElementsTreeElementHighlighter.js';
+import './TopLayerContainer.js';
 
 import * as ClassesPaneWidget from './ClassesPaneWidget.js';
 import * as ColorSwatchPopoverIcon from './ColorSwatchPopoverIcon.js';
@@ -53,6 +55,7 @@ import * as StylePropertyHighlighter from './StylePropertyHighlighter.js';
 import * as StylePropertyTreeElement from './StylePropertyTreeElement.js';
 import * as StylePropertyUtils from './StylePropertyUtils.js';
 import * as StylesSidebarPane from './StylesSidebarPane.js';
+import * as TopLayerContainer from './TopLayerContainer.js';
 
 export {
   ClassesPaneWidget,
@@ -82,4 +85,5 @@ export {
   StylePropertyTreeElement,
   StylePropertyUtils,
   StylesSidebarPane,
+  TopLayerContainer,
 };

package/front_end/panels/sources/ScopeChainSidebarPane.ts

@@ -319,6 +319,6 @@ export class OpenLinearMemoryInspector extends UI.Widget.VBox implements UI.Cont
   private async openMemoryInspector(obj: SDK.RemoteObject.RemoteObject): Promise<void> {
     const controller = LinearMemoryInspector.LinearMemoryInspectorController.LinearMemoryInspectorController.instance();
     Host.userMetrics.linearMemoryInspectorRevealedFrom(Host.UserMetrics.LinearMemoryInspectorRevealedFrom.ContextMenu);
-    void controller.openInspectorView(obj, 0);
+    void controller.openInspectorView(obj);
   }
 }

package/front_end/ui/components/linear_memory_inspector/LinearMemoryInspectorController.ts

@@ -77,17 +77,16 @@ async function getBufferFromObject(obj: SDK.RemoteObject.RemoteObject): Promise<
   return new SDK.RemoteObject.RemoteArrayBuffer(obj);
 }
 
+export function isDWARFMemoryObject(obj: SDK.RemoteObject.RemoteObject): boolean {
+  return obj instanceof Bindings.DebuggerLanguagePlugins.ValueNode && obj.inspectableAddress !== undefined;
+}
+
 export function isMemoryObjectProperty(obj: SDK.RemoteObject.RemoteObject): boolean {
   const isWasmOrBuffer = obj.type === 'object' && obj.subtype && ACCEPTED_MEMORY_TYPES.includes(obj.subtype);
-  if (isWasmOrBuffer) {
+  if (isWasmOrBuffer || isDWARFMemoryObject(obj)) {
     return true;
   }
 
-  const isWasmDWARF = obj instanceof Bindings.DebuggerLanguagePlugins.ValueNode;
-  if (isWasmDWARF) {
-    return obj.inspectableAddress !== undefined;
-  }
-
   return false;
 }
 

package/front_end/ui/legacy/components/object_ui/ObjectPropertiesSection.ts

@@ -388,11 +388,13 @@ export class ObjectPropertiesSection extends UI.TreeOutline.TreeOutlineInShadow
   }
 
   static appendMemoryIcon(element: Element, obj: SDK.RemoteObject.RemoteObject): void {
-    // We show the memory icon only on ArrayBuffer and WebAssembly.Memory instances.
+    // We show the memory icon only on ArrayBuffer, WebAssembly.Memory and DWARF memory instances.
     // TypedArrays DataViews are also supported, but showing the icon next to their
     // previews is quite a significant visual overhead, and users can easily get to
     // their buffers and open the memory inspector from there.
-    if (!LinearMemoryInspector.LinearMemoryInspectorController.isMemoryObjectProperty(obj)) {
+    const arrayBufferOrWasmMemory =
+        (obj.type === 'object' && (obj.subtype === 'arraybuffer' || obj.subtype === 'webassemblymemory'));
+    if (!arrayBufferOrWasmMemory && !LinearMemoryInspector.LinearMemoryInspectorController.isDWARFMemoryObject(obj)) {
       return;
     }
     const memoryIcon = new IconButton.Icon.Icon();
@@ -408,7 +410,7 @@ export class ObjectPropertiesSection extends UI.TreeOutline.TreeOutlineInShadow
       const controller =
           LinearMemoryInspector.LinearMemoryInspectorController.LinearMemoryInspectorController.instance();
       Host.userMetrics.linearMemoryInspectorRevealedFrom(Host.UserMetrics.LinearMemoryInspectorRevealedFrom.MemoryIcon);
-      void controller.openInspectorView(obj, 0);
+      void controller.openInspectorView(obj);
     };
 
     UI.Tooltip.Tooltip.install(memoryIcon, 'Reveal in Memory Inspector panel');

package/package.json

@@ -55,5 +55,5 @@
     "unittest": "scripts/test/run_unittests.py --no-text-coverage",
     "watch": "vpython third_party/node/node.py --output scripts/watch_build.js"
   },
-  "version": "1.0.1016605"
+  "version": "1.0.1017091"
 }