chrome-devtools-frontend 1.0.1016605 → 1.0.1017938

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/application/components/FrameDetailsView.ts

@@ -10,7 +10,7 @@ import * as Bindings from '../../../models/bindings/bindings.js';
 import * as Common from '../../../core/common/common.js';
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as NetworkForward from '../../../panels/network/forward/forward.js';
-import type * as Platform from '../../../core/platform/platform.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 LitHtml from '../../../ui/lit-html/lit-html.js';
@@ -248,6 +248,10 @@ const UIStrings = {
   *@description Label for subtitle of frame details view
   */
   prerenderingStatus: 'Prerendering Status',
+  /**
+  *@description Label for a link to an ad script, which created the current iframe.
+  */
+  creatorAdScript: 'Creator Ad Script',
 };
 const str_ = i18n.i18n.registerUIStrings('panels/application/components/FrameDetailsView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -266,7 +270,10 @@ export class FrameDetailsView extends UI.ThrottledWidget.ThrottledWidget {
   }
 
   async doUpdate(): Promise<void> {
-    this.#reportView.data = {frame: this.#frame};
+    const debuggerId = this.#frame?.getDebuggerId();
+    const debuggerModel = debuggerId ? await SDK.DebuggerModel.DebuggerModel.modelForDebuggerId(debuggerId) : null;
+    const target = debuggerModel?.target();
+    this.#reportView.data = {frame: this.#frame, target};
   }
 }
 
@@ -274,16 +281,19 @@ const coordinator = Coordinator.RenderCoordinator.RenderCoordinator.instance();
 
 export interface FrameDetailsReportViewData {
   frame: SDK.ResourceTreeModel.ResourceTreeFrame;
+  target?: SDK.Target.Target;
 }
 
 export class FrameDetailsReportView extends HTMLElement {
   static readonly litTagName = LitHtml.literal`devtools-resources-frame-details-view`;
   readonly #shadow = this.attachShadow({mode: 'open'});
   #frame?: SDK.ResourceTreeModel.ResourceTreeFrame;
+  #target?: SDK.Target.Target;
   #protocolMonitorExperimentEnabled = false;
   #permissionsPolicies: Promise<Protocol.Page.PermissionsPolicyFeatureState[]|null>|null = null;
   #permissionsPolicySectionData: PermissionsPolicySectionData = {policies: [], showDetails: false};
   #originTrialTreeView: OriginTrialTreeView = new OriginTrialTreeView();
+  #linkifier = new Components.Linkifier.Linkifier();
 
   connectedCallback(): void {
     this.#protocolMonitorExperimentEnabled = Root.Runtime.experiments.isEnabled('protocolMonitor');
@@ -292,6 +302,7 @@ export class FrameDetailsReportView extends HTMLElement {
 
   set data(data: FrameDetailsReportViewData) {
     this.#frame = data.frame;
+    this.#target = data.target;
     if (!this.#permissionsPolicies && this.#frame) {
       this.#permissionsPolicies = this.#frame.getPermissionsPolicyState();
     }
@@ -573,14 +584,29 @@ export class FrameDetailsReportView extends HTMLElement {
     for (const explanation of this.#frame.adFrameStatus()?.explanations || []) {
       rows.push(LitHtml.html`<div>${this.#getAdFrameExplanationString(explanation)}</div>`);
     }
+
+    const adScriptLinkElement = this.#target ?
+        this.#linkifier.linkifyScriptLocation(
+            this.#target, this.#frame.getAdScriptId(), Platform.DevToolsPath.EmptyUrlString, undefined, undefined) :
+        null;
+
+    // Disabled until https://crbug.com/1079231 is fixed.
+    // clang-format off
     return LitHtml.html`
       <${ReportView.ReportView.ReportKey.litTagName}>${i18nString(UIStrings.adStatus)}</${
         ReportView.ReportView.ReportKey.litTagName}>
       <${ReportView.ReportView.ReportValue.litTagName}>
-         <${ExpandableList.ExpandableList.ExpandableList.litTagName} .data=${
-        {rows} as ExpandableList.ExpandableList.ExpandableListData}></${
+        <${ExpandableList.ExpandableList.ExpandableList.litTagName} .data=${
+          {rows} as ExpandableList.ExpandableList.ExpandableListData}></${
         ExpandableList.ExpandableList.ExpandableList.litTagName}></${ReportView.ReportView.ReportValue.litTagName}>
-      `;
+      ${this.#target ? LitHtml.html`
+        <${ReportView.ReportView.ReportKey.litTagName}>${i18nString(UIStrings.creatorAdScript)}</${
+          ReportView.ReportView.ReportKey.litTagName}>
+        <${ReportView.ReportView.ReportValue.litTagName} class="ad-script-link">${adScriptLinkElement}</${
+          ReportView.ReportView.ReportValue.litTagName}>
+      ` : LitHtml.nothing}
+    `;
+    // clang-format on
   }
 
   #renderIsolationSection(): LitHtml.LitTemplate {

package/front_end/panels/elements/ElementsTreeElement.ts

@@ -88,14 +88,6 @@ const UIStrings = {
   */
   scrollIntoView: 'Scroll into view',
   /**
-  *@description Text to enter Isolation Mode, a mode with focus on a single element and interactive resizing
-  */
-  enterIsolationMode: 'Enter Isolation Mode',
-  /**
-  *@description Text to exit Isolation Mode, a mode with focus on a single element and interactive resizing
-  */
-  exitIsolationMode: 'Exit Isolation Mode',
-  /**
   *@description A context menu item in the Elements Tree Element of the Elements panel
   */
   editText: 'Edit text',
@@ -294,7 +286,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));
       }
     }
@@ -682,17 +674,6 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     contextMenu.viewSection().appendItem(i18nString(UIStrings.focus), async () => {
       await this.nodeInternal.focus();
     });
-
-    const overlayModel = this.nodeInternal.domModel().overlayModel();
-    if (overlayModel.isHighlightedIsolatedElementInPersistentOverlay(this.nodeInternal.id)) {
-      contextMenu.viewSection().appendItem(i18nString(UIStrings.exitIsolationMode), () => {
-        overlayModel.hideIsolatedElementInPersistentOverlay(this.nodeInternal.id);
-      });
-    } else {
-      contextMenu.viewSection().appendItem(i18nString(UIStrings.enterIsolationMode), () => {
-        overlayModel.highlightIsolatedElementInPersistentOverlay(this.nodeInternal.id);
-      });
-    }
   }
 
   populateScrollIntoView(contextMenu: UI.ContextMenu.ContextMenu): void {
@@ -1962,17 +1943,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 +1996,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 +2086,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 +2123,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 +2162,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 +2201,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 => {