chrome-devtools-frontend 1.0.1549484 → 1.0.1553956

package/front_end/panels/elements/ElementsTreeElement.ts

@@ -50,8 +50,8 @@ import * as Adorners from '../../ui/components/adorners/adorners.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
 import * as CodeHighlighter from '../../ui/components/code_highlighter/code_highlighter.js';
 import * as Highlighting from '../../ui/components/highlighting/highlighting.js';
-import * as IconButton from '../../ui/components/icon_button/icon_button.js';
 import * as TextEditor from '../../ui/components/text_editor/text_editor.js';
+import {createIcon, Icon} from '../../ui/kit/kit.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as Lit from '../../ui/lit/lit.js';
@@ -229,6 +229,16 @@ const UIStrings = {
    * the overlay showing CSS scroll snapping for the current element.
    */
   disableScrollSnap: 'Disable scroll-snap overlay',
+  /**
+   * @description Label of an adorner in the Elements panel. When clicked, it enables
+   * the overlay showing the container overlay for the current element.
+   */
+  enableContainer: 'Enable container overlay',
+  /**
+   * @description Label of an adorner in the Elements panel. When clicked, it disables
+   * the overlay showing container for the current element.
+   */
+  disableContainer: 'Disable container overlay',
   /**
    * @description Label of an adorner in the Elements panel. When clicked, it forces
    * the element into applying its starting-style rules.
@@ -357,13 +367,31 @@ export function isOpeningTag(context: TagTypeContext): context is OpeningTagCont
 }
 
 export interface ViewInput {
+  containerAdornerActive: boolean;
+  flexAdornerActive: boolean;
+  gridAdornerActive: boolean;
+  popoverAdornerActive: boolean;
+
   showAdAdorner: boolean;
+  showContainerAdorner: boolean;
+  showFlexAdorner: boolean;
+  showGridAdorner: boolean;
+  showGridLanesAdorner: boolean;
+  showMediaAdorner: boolean;
+  showPopoverAdorner: boolean;
+  isSubgrid: boolean;
+
   adorners?: Set<Adorners.Adorner.Adorner>;
   nodeInfo?: DocumentFragment;
 
   onGutterClick: (e: Event) => void;
   onAdornerAdded: (adorner: Adorners.Adorner.Adorner) => void;
   onAdornerRemoved: (adorner: Adorners.Adorner.Adorner) => void;
+  onContainerAdornerClick: (e: Event) => void;
+  onFlexAdornerClick: (e: Event) => void;
+  onGridAdornerClick: (e: Event) => void;
+  onMediaAdornerClick: (e: Event) => void;
+  onPopoverAdornerClick: (e: Event) => void;
 }
 
 export interface ViewOutput {
@@ -379,7 +407,13 @@ function adornerRef(input: ViewInput): DirectiveResult<typeof Lit.Directives.Ref
       input.onAdornerRemoved(adorner);
     }
     adorner = el as Adorners.Adorner.Adorner;
+
     if (adorner) {
+      if (ElementsPanel.instance().isAdornerEnabled(adorner.name)) {
+        adorner.show();
+      } else {
+        adorner.hide();
+      }
       input.onAdornerAdded(adorner);
     }
   });
@@ -388,7 +422,23 @@ function adornerRef(input: ViewInput): DirectiveResult<typeof Lit.Directives.Ref
 export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLElement): void => {
   const adAdornerConfig =
       ElementsComponents.AdornerManager.getRegisteredAdorner(ElementsComponents.AdornerManager.RegisteredAdorners.AD);
-  const hasAdorners = input.adorners || input.showAdAdorner;
+  const containerAdornerConfig = ElementsComponents.AdornerManager.getRegisteredAdorner(
+      ElementsComponents.AdornerManager.RegisteredAdorners.CONTAINER);
+  const flexAdornerConfig =
+      ElementsComponents.AdornerManager.getRegisteredAdorner(ElementsComponents.AdornerManager.RegisteredAdorners.FLEX);
+  const gridAdornerConfig =
+      ElementsComponents.AdornerManager.getRegisteredAdorner(ElementsComponents.AdornerManager.RegisteredAdorners.GRID);
+  const subgridAdornerConfig = ElementsComponents.AdornerManager.getRegisteredAdorner(
+      ElementsComponents.AdornerManager.RegisteredAdorners.SUBGRID);
+  const gridLanesAdornerConfig = ElementsComponents.AdornerManager.getRegisteredAdorner(
+      ElementsComponents.AdornerManager.RegisteredAdorners.GRID_LANES);
+  const mediaAdornerConfig = ElementsComponents.AdornerManager.getRegisteredAdorner(
+      ElementsComponents.AdornerManager.RegisteredAdorners.MEDIA);
+  const popoverAdornerConfig = ElementsComponents.AdornerManager.getRegisteredAdorner(
+      ElementsComponents.AdornerManager.RegisteredAdorners.POPOVER);
+  const hasAdorners = input.adorners?.size || input.showAdAdorner || input.showContainerAdorner ||
+      input.showFlexAdorner || input.showGridAdorner || input.showGridLanesAdorner || input.showMediaAdorner ||
+      input.showPopoverAdorner;
   // clang-format off
   render(html`
     <div ${ref(el => { output.contentElement = el as HTMLElement; })}>
@@ -397,13 +447,130 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
         <devtools-icon name="dots-horizontal"></devtools-icon>
         <div class="hidden" ${ref(el => { output.decorationsElement = el as HTMLElement; })}></div>
       </div>
-      ${hasAdorners? html`<div class="adorner-container ${!hasAdorners ? 'hidden': ''}">
+      ${hasAdorners ? html`<div class="adorner-container ${!hasAdorners ? 'hidden' : ''}">
         ${input.showAdAdorner ? html`<devtools-adorner
-          .data=${{name: adAdornerConfig.name, jslogContext: adAdornerConfig.name}}
           aria-label=${i18nString(UIStrings.thisFrameWasIdentifiedAsAnAd)}
+          .data=${{name: adAdornerConfig.name, jslogContext: adAdornerConfig.name}}
           ${adornerRef(input)}>
           <span>${adAdornerConfig.name}</span>
         </devtools-adorner>` : nothing}
+        ${input.showContainerAdorner ? html`<devtools-adorner
+          class=clickable
+          role=button
+          toggleable=true
+          tabindex=0
+          .data=${{name: containerAdornerConfig.name, jslogContext: containerAdornerConfig.name}}
+          jslog=${VisualLogging.adorner(containerAdornerConfig.name).track({click: true})}
+          active=${input.containerAdornerActive}
+          aria-label=${input.containerAdornerActive ? i18nString(UIStrings.enableContainer) : i18nString(UIStrings.disableContainer)}
+          @click=${input.onContainerAdornerClick}
+          @keydown=${(event: KeyboardEvent) => {
+            if (event.code === 'Enter' || event.code === 'Space') {
+              input.onContainerAdornerClick(event);
+              event.stopPropagation();
+            }
+          }}
+          ${adornerRef(input)}>
+          <span>${containerAdornerConfig.name}</span>
+        </devtools-adorner>`: nothing}
+        ${input.showFlexAdorner ? html`<devtools-adorner
+          class=clickable
+          role=button
+          toggleable=true
+          tabindex=0
+          .data=${{name: flexAdornerConfig.name, jslogContext: flexAdornerConfig.name}}
+          jslog=${VisualLogging.adorner(flexAdornerConfig.name).track({click: true})}
+          active=${input.flexAdornerActive}
+          aria-label=${input.flexAdornerActive ? i18nString(UIStrings.disableFlexMode) : i18nString(UIStrings.enableFlexMode)}
+          @click=${input.onFlexAdornerClick}
+          @keydown=${(event: KeyboardEvent) => {
+            if (event.code === 'Enter' || event.code === 'Space') {
+              input.onFlexAdornerClick(event);
+              event.stopPropagation();
+            }
+          }}
+          ${adornerRef(input)}>
+          <span>${flexAdornerConfig.name}</span>
+        </devtools-adorner>`: nothing}
+        ${input.showGridAdorner ? html`<devtools-adorner
+          class=clickable
+          role=button
+          toggleable=true
+          tabindex=0
+          .data=${{
+            name: input.isSubgrid ? subgridAdornerConfig.name : gridAdornerConfig.name,
+            jslogContext: input.isSubgrid ? subgridAdornerConfig.name : gridAdornerConfig.name,
+          }}
+          jslog=${VisualLogging.adorner(input.isSubgrid ? subgridAdornerConfig.name : gridAdornerConfig.name).track({click: true})}
+          active=${input.gridAdornerActive}
+          aria-label=${input.gridAdornerActive ? i18nString(UIStrings.disableGridMode) : i18nString(UIStrings.enableGridMode)}
+          @click=${input.onGridAdornerClick}
+          @keydown=${(event: KeyboardEvent) => {
+            if (event.code === 'Enter' || event.code === 'Space') {
+              input.onGridAdornerClick(event);
+              event.stopPropagation();
+            }
+          }}
+          ${adornerRef(input)}>
+          <span>${input.isSubgrid ? subgridAdornerConfig.name : gridAdornerConfig.name}</span>
+        </devtools-adorner>`: nothing}
+        ${input.showGridLanesAdorner ? html`<devtools-adorner
+          class=clickable
+          role=button
+          toggleable=true
+          tabindex=0
+          .data=${{name: gridLanesAdornerConfig.name, jslogContext: gridLanesAdornerConfig.name}}
+          jslog=${VisualLogging.adorner(gridLanesAdornerConfig.name).track({click: true})}
+          active=${input.gridAdornerActive}
+          aria-label=${input.gridAdornerActive ? i18nString(UIStrings.disableGridLanesMode) : i18nString(UIStrings.enableGridLanesMode)}
+          @click=${input.onGridAdornerClick}
+          @keydown=${(event: KeyboardEvent) => {
+            if (event.code === 'Enter' || event.code === 'Space') {
+              input.onGridAdornerClick(event);
+              event.stopPropagation();
+            }
+          }}
+          ${adornerRef(input)}>
+          <span>${gridLanesAdornerConfig.name}</span>
+        </devtools-adorner>`: nothing}
+        ${input.showMediaAdorner ? html`<devtools-adorner
+          class=clickable
+          role=button
+          tabindex=0
+          .data=${{name: mediaAdornerConfig.name, jslogContext: mediaAdornerConfig.name}}
+          jslog=${VisualLogging.adorner(mediaAdornerConfig.name).track({click: true})}
+          aria-label=${i18nString(UIStrings.openMediaPanel)}
+          @click=${input.onMediaAdornerClick}
+          @keydown=${(event: KeyboardEvent) => {
+            if (event.code === 'Enter' || event.code === 'Space') {
+              input.onMediaAdornerClick(event);
+              event.stopPropagation();
+            }
+          }}
+          ${adornerRef(input)}>
+          <span class="adorner-with-icon">
+            ${mediaAdornerConfig.name}<devtools-icon name="select-element"></devtools-icon>
+          </span>
+        </devtools-adorner>`: nothing}
+        ${input.showPopoverAdorner ? html`<devtools-adorner
+          class=clickable
+          role=button
+          toggleable=true
+          tabindex=0
+          .data=${{name: popoverAdornerConfig.name, jslogContext: popoverAdornerConfig.name}}
+          jslog=${VisualLogging.adorner(popoverAdornerConfig.name).track({click: true})}
+          active=${input.popoverAdornerActive}
+          aria-label=${input.popoverAdornerActive ? i18nString(UIStrings.stopForceOpenPopover) : i18nString(UIStrings.forceOpenPopover)}
+          @click=${input.onPopoverAdornerClick}
+          @keydown=${(event: KeyboardEvent) => {
+            if (event.code === 'Enter' || event.code === 'Space') {
+              input.onPopoverAdornerClick(event);
+              event.stopPropagation();
+            }
+          }}
+          ${adornerRef(input)}>
+          <span>${popoverAdornerConfig.name}</span>
+        </devtools-adorner>`: nothing}
         ${repeat(Array.from((input.adorners ?? new Set()).values()).sort(adornerComparator), adorner => {
           return adorner;
         })}
@@ -442,6 +609,11 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
   #adornersThrottler = new Common.Throttler.Throttler(100);
   #adorners = new Set<Adorners.Adorner.Adorner>();
   #nodeInfo?: DocumentFragment;
+  #containerAdornerActive = false;
+  #flexAdornerActive = false;
+  #gridAdornerActive = false;
+  #popoverAdornerActive = false;
+  #layout: SDK.CSSModel.LayoutProperties|null = null;
 
   constructor(node: SDK.DOMModel.DOMNode, isClosingTag?: boolean) {
     // The title will be updated in onattach.
@@ -474,13 +646,14 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
       void this.updateStyleAdorners();
 
       void this.updateScrollAdorner();
+
+      void this.#updateAdorners();
     }
     this.expandAllButtonElement = null;
-
     this.performUpdate();
 
     if (this.nodeInternal.retained && !this.isClosingTag()) {
-      const icon = new IconButton.Icon.Icon();
+      const icon = new Icon();
       icon.name = 'small-status-dot';
       icon.style.color = 'var(--icon-error)';
       icon.classList.add('extra-small');
@@ -494,6 +667,34 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     if (this.nodeInternal.detached && !this.isClosingTag()) {
       this.listItemNode.setAttribute('title', 'Detached Tree Node');
     }
+
+    node.domModel().overlayModel().addEventListener(
+        SDK.OverlayModel.Events.PERSISTENT_CONTAINER_QUERY_OVERLAY_STATE_CHANGED, event => {
+          const {nodeId: eventNodeId, enabled} = event.data;
+          if (eventNodeId !== node.id) {
+            return;
+          }
+          this.#containerAdornerActive = enabled;
+          this.performUpdate();
+        });
+    node.domModel().overlayModel().addEventListener(
+        SDK.OverlayModel.Events.PERSISTENT_FLEX_CONTAINER_OVERLAY_STATE_CHANGED, event => {
+          const {nodeId: eventNodeId, enabled} = event.data;
+          if (eventNodeId !== node.id) {
+            return;
+          }
+          this.#flexAdornerActive = enabled;
+          this.performUpdate();
+        });
+    node.domModel().overlayModel().addEventListener(
+        SDK.OverlayModel.Events.PERSISTENT_GRID_OVERLAY_STATE_CHANGED, event => {
+          const {nodeId: eventNodeId, enabled} = event.data;
+          if (eventNodeId !== node.id) {
+            return;
+          }
+          this.#gridAdornerActive = enabled;
+          this.performUpdate();
+        });
   }
 
   static animateOnDOMUpdate(treeElement: ElementsTreeElement): void {
@@ -556,10 +757,20 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
   performUpdate(): void {
     DEFAULT_VIEW(
         {
+          containerAdornerActive: this.#containerAdornerActive,
           adorners: !this.isClosingTag() ? this.#adorners : undefined,
-          showAdAdorner:
-              ElementsPanel.instance().isAdornerEnabled(ElementsComponents.AdornerManager.RegisteredAdorners.AD) &&
-              this.nodeInternal.isAdFrameNode(),
+          showAdAdorner: this.nodeInternal.isAdFrameNode(),
+          showContainerAdorner: Boolean(this.#layout?.isContainer) && !this.isClosingTag(),
+          showFlexAdorner: Boolean(this.#layout?.isFlex) && !this.isClosingTag(),
+          flexAdornerActive: this.#flexAdornerActive,
+          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) &&
+              Boolean(this.node().attributes().find(attr => attr.name === 'popover')) && !this.isClosingTag(),
+          gridAdornerActive: this.#gridAdornerActive,
+          popoverAdornerActive: this.#popoverAdornerActive,
+          isSubgrid: Boolean(this.#layout?.isSubgrid),
           nodeInfo: this.#nodeInfo,
           onGutterClick: this.showContextMenu.bind(this),
           onAdornerAdded: adorner => {
@@ -568,10 +779,87 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
           onAdornerRemoved: adorner => {
             ElementsPanel.instance().deregisterAdorner(adorner);
           },
+          onContainerAdornerClick: (event: Event) => this.#onContainerAdornerClick(event),
+          onFlexAdornerClick: (event: Event) => this.#onFlexAdornerClick(event),
+          onGridAdornerClick: (event: Event) => this.#onGridAdornerClick(event),
+          onMediaAdornerClick: (event: Event) => this.#onMediaAdornerClick(event),
+          onPopoverAdornerClick: (event: Event) => this.#onPopoverAdornerClick(event),
         },
         this, this.listItemElement);
   }
 
+  #onContainerAdornerClick(event: Event): void {
+    event.stopPropagation();
+    const node = this.node();
+    const nodeId = node.id;
+    if (!nodeId) {
+      return;
+    }
+    const model = node.domModel().overlayModel();
+    if (model.isHighlightedContainerQueryInPersistentOverlay(nodeId)) {
+      model.hideContainerQueryInPersistentOverlay(nodeId);
+      this.#containerAdornerActive = false;
+    } else {
+      model.highlightContainerQueryInPersistentOverlay(nodeId);
+      this.#containerAdornerActive = true;
+      Badges.UserBadges.instance().recordAction(Badges.BadgeAction.MODERN_DOM_BADGE_CLICKED);
+    }
+    void this.updateAdorners();
+  }
+
+  #onFlexAdornerClick(event: Event): void {
+    event.stopPropagation();
+    const node = this.node();
+    const nodeId = node.id;
+    if (!nodeId) {
+      return;
+    }
+    const model = node.domModel().overlayModel();
+    if (model.isHighlightedFlexContainerInPersistentOverlay(nodeId)) {
+      model.hideFlexContainerInPersistentOverlay(nodeId);
+      this.#flexAdornerActive = false;
+    } else {
+      model.highlightFlexContainerInPersistentOverlay(nodeId);
+      this.#flexAdornerActive = true;
+      Badges.UserBadges.instance().recordAction(Badges.BadgeAction.MODERN_DOM_BADGE_CLICKED);
+    }
+    void this.updateAdorners();
+  }
+
+  #onGridAdornerClick(event: Event): void {
+    event.stopPropagation();
+    const node = this.node();
+    const nodeId = node.id;
+    if (!nodeId) {
+      return;
+    }
+    const model = node.domModel().overlayModel();
+    if (model.isHighlightedGridInPersistentOverlay(nodeId)) {
+      model.hideGridInPersistentOverlay(nodeId);
+      this.#gridAdornerActive = false;
+    } else {
+      model.highlightGridInPersistentOverlay(nodeId);
+      this.#gridAdornerActive = true;
+      if (this.#layout?.isSubgrid) {
+        Badges.UserBadges.instance().recordAction(Badges.BadgeAction.MODERN_DOM_BADGE_CLICKED);
+      }
+    }
+    void this.updateAdorners();
+  }
+
+  async #onMediaAdornerClick(event: Event): Promise<void> {
+    event.stopPropagation();
+    await UI.ViewManager.ViewManager.instance().showView('medias');
+    const view = UI.ViewManager.ViewManager.instance().view('medias');
+    if (view) {
+      const widget = await view.widget();
+      if (widget instanceof Media.MainView.MainView) {
+        await widget.waitForInitialPlayers();
+        widget.selectPlayerByDOMNodeId(this.node().backendNodeId());
+      }
+    }
+  }
+
   highlightAttribute(attributeName: string): void {
     // If the attribute is not found, we highlight the tag name instead.
     let animationElement = this.listItemElement.querySelector('.webkit-html-tag-name') ?? this.listItemElement;
@@ -834,6 +1122,13 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     if (this.editing) {
       return false;
     }
+    const handledByFloaty = UI.Floaty.onFloatyClick({
+      type: UI.Floaty.FloatyContextTypes.ELEMENT_NODE_ID,
+      data: {nodeId: this.nodeInternal.id},
+    });
+    if (handledByFloaty) {
+      return false;
+    }
     return super.select(omitFocus, selectedByUser);
   }
 
@@ -1018,7 +1313,7 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     const isEditable = this.hasEditableNode();
     // clang-format off
     if (isEditable && !this.editing) {
-      contextMenu.editSection().appendItem(i18nString(UIStrings.editAsHtml), this.editAsHTML.bind(this), {jslogContext: 'elements.edit-as-html'});
+      contextMenu.editSection().appendItem(i18nString(UIStrings.editAsHtml), this.editAsHTML.bind(this), { jslogContext: 'elements.edit-as-html' });
     }
     // clang-format on
     const isShadowRoot = this.nodeInternal.isShadowRoot();
@@ -1043,164 +1338,138 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
       }
 
       UI.Context.Context.instance().setFlavor(SDK.DOMModel.DOMNode, this.nodeInternal);
-      if (Root.Runtime.hostConfig.devToolsAiSubmenuPrompts?.enabled) {
-        const action = UI.ActionRegistry.ActionRegistry.instance().getAction(openAiAssistanceId);
-        // Register new badge under the `devToolsAiSubmenuPrompts` feature, as the freestyler one is already used in ViewManager.
-        // Additionally register with the PromotionManager. Since we use two features for freeestyler here (submenu or debug with ai),
-        // the back-end will not be able to identify them as one as soon as we launch, and show the new badge
-        // on the 'Debug with Ai' item even if the user was already seeing it during the study if they were in the other study group.
-        const featureName = UI.UIUtils.PromotionManager.instance().maybeShowPromotion(openAiAssistanceId) ?
-            Root.Runtime.hostConfig.devToolsAiSubmenuPrompts?.featureName :
-            undefined;
-        const submenu =
-            contextMenu.footerSection().appendSubMenuItem(action.title(), false, openAiAssistanceId, featureName);
-        submenu.defaultSection().appendAction(openAiAssistanceId, i18nString(UIStrings.startAChat));
-
-        const submenuConfigs = [
-          {
-            condition: (props: SDK.CSSModel.LayoutProperties|null): boolean => Boolean(props?.isFlex),
-            items: [
-              {
-                label: i18nString(UIStrings.wrapTheseItems),
-                prompt: 'How can I make flex items wrap?',
-                jslogContextSuffix: '.flex-wrap',
-              },
-              {
-                label: i18nString(UIStrings.distributeItemsEvenly),
-                prompt: 'How do I distribute flex items evenly?',
-                jslogContextSuffix: '.flex-distribute',
-              },
-              {
-                label: i18nString(UIStrings.explainFlexbox),
-                prompt: 'What is flexbox?',
-                jslogContextSuffix: '.flex-what',
-              },
-            ],
-          },
-          {
-            condition: (props: SDK.CSSModel.LayoutProperties|null): boolean =>
-                Boolean(props?.isGrid && !props?.isSubgrid),
-            items: [
-              {
-                label: i18nString(UIStrings.alignItems),
-                prompt: 'How do I align items in a grid?',
-                jslogContextSuffix: '.grid-align',
-              },
-              {
-                label: i18nString(UIStrings.addPadding),
-                prompt: 'How to add spacing between grid items?',
-                jslogContextSuffix: '.grid-gap',
-              },
-              {
-                label: i18nString(UIStrings.explainGridLayout),
-                prompt: 'How does grid layout work?',
-                jslogContextSuffix: '.grid-how',
-              },
-            ],
-          },
-          {
-            condition: (props: SDK.CSSModel.LayoutProperties|null): boolean => Boolean(props?.isSubgrid),
-            items: [
-              {
-                label: i18nString(UIStrings.findGridDefinition),
-                prompt: 'Where is this grid defined?',
-                jslogContextSuffix: '.subgrid-where',
-              },
-              {
-                label: i18nString(UIStrings.changeParentProperties),
-                prompt: 'How to overwrite parent grid properties?',
-                jslogContextSuffix: '.subgrid-override',
-              },
-              {
-                label: i18nString(UIStrings.explainSubgrids),
-                prompt: 'How do subgrids work?',
-                jslogContextSuffix: '.subgrid-how',
-              },
-            ],
-          },
-          {
-            condition: (props: SDK.CSSModel.LayoutProperties|null): boolean => Boolean(props?.hasScroll),
-            items: [
-              {
-                label: i18nString(UIStrings.removeScrollbars),
-                prompt: 'How do I remove scrollbars for this element?',
-                jslogContextSuffix: '.scroll-remove',
-              },
-              {
-                label: i18nString(UIStrings.styleScrollbars),
-                prompt: 'How can I style a scrollbar?',
-                jslogContextSuffix: '.scroll-style',
-              },
-              {
-                label: i18nString(UIStrings.explainScrollbars),
-                prompt: 'Why does this element scroll?',
-                jslogContextSuffix: '.scroll-why',
-              },
-            ],
-          },
-          {
-            condition: (props: SDK.CSSModel.LayoutProperties|null): boolean => Boolean(props?.isContainer),
-            items: [
-              {
-                label: i18nString(UIStrings.explainContainerQueries),
-                prompt: 'What are container queries?',
-                jslogContextSuffix: '.container-what',
-              },
-              {
-                label: i18nString(UIStrings.explainContainerTypes),
-                prompt: 'How do I use container-type?',
-                jslogContextSuffix: '.container-how',
-              },
-              {
-                label: i18nString(UIStrings.explainContainerContext),
-                prompt: 'What\'s the container context for this element?',
-                jslogContextSuffix: '.container-context',
-              },
-            ],
-          },
-          {
-            // Default items
-            condition: (): boolean => true,
-            items: [
-              {
-                label: i18nString(UIStrings.assessVisibility),
-                prompt: 'Why isn’t this element visible?',
-                jslogContextSuffix: '.visibility',
-              },
-              {
-                label: i18nString(UIStrings.centerElement),
-                prompt: 'How do I center this element?',
-                jslogContextSuffix: '.center',
-              },
-            ],
-          },
-        ];
-
-        const layoutProps =
-            await this.nodeInternal.domModel().cssModel().getLayoutPropertiesFromComputedStyle(this.nodeInternal.id);
-        const config = submenuConfigs.find(c => c.condition(layoutProps));
-        if (config) {
-          for (const item of config.items) {
-            appendSubmenuPromptAction(
-                submenu, action, item.label, item.prompt, openAiAssistanceId + item.jslogContextSuffix);
-          }
-        }
-      } else if (Root.Runtime.hostConfig.devToolsAiDebugWithAi?.enabled) {
-        // Register new badge under the `devToolsAiDebugWithAi` feature, as the freestyler one is already used in ViewManager.
-        // Additionally register with the PromotionManager. Since we use two different features for freeestyler here (submenu or debug with ai),
-        // the back-end will not be able to identify them as one as soon as we launch, and show the new badge
-        // on the 'Debug with Ai' item even if the user was already seeing it during the study if they were in the other study group.
-        const featureName = UI.UIUtils.PromotionManager.instance().maybeShowPromotion(openAiAssistanceId) ?
-            Root.Runtime.hostConfig.devToolsAiDebugWithAi?.featureName :
-            undefined;
-        const action = UI.ActionRegistry.ActionRegistry.instance().getAction(openAiAssistanceId);
-        contextMenu.footerSection().appendItem(action.title(), () => {
-          void action.execute();
-          UI.UIUtils.PromotionManager.instance().recordFeatureInteraction(openAiAssistanceId);
-        }, {jslogContext: openAiAssistanceId, disabled: !action.enabled(), featureName});
+      const action = UI.ActionRegistry.ActionRegistry.instance().getAction(openAiAssistanceId);
+      const submenu = contextMenu.footerSection().appendSubMenuItem(action.title(), false, openAiAssistanceId);
+      submenu.defaultSection().appendAction(openAiAssistanceId, i18nString(UIStrings.startAChat));
 
-      } else {
-        contextMenu.footerSection().appendAction(openAiAssistanceId);
+      const submenuConfigs = [
+        {
+          condition: (props: SDK.CSSModel.LayoutProperties|null): boolean => Boolean(props?.isFlex),
+          items: [
+            {
+              label: i18nString(UIStrings.wrapTheseItems),
+              prompt: 'How can I make flex items wrap?',
+              jslogContextSuffix: '.flex-wrap',
+            },
+            {
+              label: i18nString(UIStrings.distributeItemsEvenly),
+              prompt: 'How do I distribute flex items evenly?',
+              jslogContextSuffix: '.flex-distribute',
+            },
+            {
+              label: i18nString(UIStrings.explainFlexbox),
+              prompt: 'What is flexbox?',
+              jslogContextSuffix: '.flex-what',
+            },
+          ],
+        },
+        {
+          condition: (props: SDK.CSSModel.LayoutProperties|null): boolean =>
+              Boolean(props?.isGrid && !props?.isSubgrid),
+          items: [
+            {
+              label: i18nString(UIStrings.alignItems),
+              prompt: 'How do I align items in a grid?',
+              jslogContextSuffix: '.grid-align',
+            },
+            {
+              label: i18nString(UIStrings.addPadding),
+              prompt: 'How to add spacing between grid items?',
+              jslogContextSuffix: '.grid-gap',
+            },
+            {
+              label: i18nString(UIStrings.explainGridLayout),
+              prompt: 'How does grid layout work?',
+              jslogContextSuffix: '.grid-how',
+            },
+          ],
+        },
+        {
+          condition: (props: SDK.CSSModel.LayoutProperties|null): boolean => Boolean(props?.isSubgrid),
+          items: [
+            {
+              label: i18nString(UIStrings.findGridDefinition),
+              prompt: 'Where is this grid defined?',
+              jslogContextSuffix: '.subgrid-where',
+            },
+            {
+              label: i18nString(UIStrings.changeParentProperties),
+              prompt: 'How to overwrite parent grid properties?',
+              jslogContextSuffix: '.subgrid-override',
+            },
+            {
+              label: i18nString(UIStrings.explainSubgrids),
+              prompt: 'How do subgrids work?',
+              jslogContextSuffix: '.subgrid-how',
+            },
+          ],
+        },
+        {
+          condition: (props: SDK.CSSModel.LayoutProperties|null): boolean => Boolean(props?.hasScroll),
+          items: [
+            {
+              label: i18nString(UIStrings.removeScrollbars),
+              prompt: 'How do I remove scrollbars for this element?',
+              jslogContextSuffix: '.scroll-remove',
+            },
+            {
+              label: i18nString(UIStrings.styleScrollbars),
+              prompt: 'How can I style a scrollbar?',
+              jslogContextSuffix: '.scroll-style',
+            },
+            {
+              label: i18nString(UIStrings.explainScrollbars),
+              prompt: 'Why does this element scroll?',
+              jslogContextSuffix: '.scroll-why',
+            },
+          ],
+        },
+        {
+          condition: (props: SDK.CSSModel.LayoutProperties|null): boolean => Boolean(props?.isContainer),
+          items: [
+            {
+              label: i18nString(UIStrings.explainContainerQueries),
+              prompt: 'What are container queries?',
+              jslogContextSuffix: '.container-what',
+            },
+            {
+              label: i18nString(UIStrings.explainContainerTypes),
+              prompt: 'How do I use container-type?',
+              jslogContextSuffix: '.container-how',
+            },
+            {
+              label: i18nString(UIStrings.explainContainerContext),
+              prompt: 'What\'s the container context for this element?',
+              jslogContextSuffix: '.container-context',
+            },
+          ],
+        },
+        {
+          // Default items
+          condition: (): boolean => true,
+          items: [
+            {
+              label: i18nString(UIStrings.assessVisibility),
+              prompt: 'Why isn’t this element visible?',
+              jslogContextSuffix: '.visibility',
+            },
+            {
+              label: i18nString(UIStrings.centerElement),
+              prompt: 'How do I center this element?',
+              jslogContextSuffix: '.center',
+            },
+          ],
+        },
+      ];
+
+      const layoutProps =
+          await this.nodeInternal.domModel().cssModel().getLayoutPropertiesFromComputedStyle(this.nodeInternal.id);
+      const config = submenuConfigs.find(c => c.condition(layoutProps));
+      if (config) {
+        for (const item of config.items) {
+          appendSubmenuPromptAction(
+              submenu, action, item.label, item.prompt, openAiAssistanceId + item.jslogContextSuffix);
+        }
       }
     }
 
@@ -2537,7 +2806,7 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
   }
 
   adornSlot({name}: {name: string}): Adorners.Adorner.Adorner {
-    const linkIcon = IconButton.Icon.create('select-element');
+    const linkIcon = createIcon('select-element');
     const slotText = document.createElement('span');
     slotText.textContent = name;
     const adornerContent = document.createElement('span');
@@ -2556,29 +2825,6 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     return adorner;
   }
 
-  adornMedia({name}: {name: string}): Adorners.Adorner.Adorner {
-    const adornerContent = document.createElement('span');
-
-    adornerContent.textContent = name;
-    adornerContent.classList.add('adorner-with-icon');
-
-    const linkIcon = IconButton.Icon.create('select-element');
-    adornerContent.append(linkIcon);
-
-    const adorner = new Adorners.Adorner.Adorner();
-    adorner.data = {
-      name,
-      content: adornerContent,
-      jslogContext: 'media',
-    };
-    if (isOpeningTag(this.tagTypeContext)) {
-      this.#adorners.add(adorner);
-      ElementsPanel.instance().registerAdorner(adorner);
-      this.updateAdorners();
-    }
-    return adorner;
-  }
-
   removeAdorner(adornerToRemove: Adorners.Adorner.Adorner): void {
     ElementsPanel.instance().deregisterAdorner(adornerToRemove);
     adornerToRemove.remove();
@@ -2601,17 +2847,28 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     }
   }
 
-  private updateAdorners(): void {
+  updateAdorners(): void {
     // TODO: remove adornersThrottler in favour of throttled updated (requestUpdate/performUpdate).
     void this.#adornersThrottler.schedule(this.#updateAdorners.bind(this));
   }
 
-  #updateAdorners(): Promise<void> {
-    // TODO: remove in favour of throttled updated (requestUpdate/performUpdate).
+  async #updateAdorners(): Promise<void> {
+    if (this.isClosingTag()) {
+      this.performUpdate();
+      return;
+    }
+    const node = this.node();
+    const nodeId = node.id;
+    if (node.nodeType() !== Node.COMMENT_NODE && node.nodeType() !== Node.DOCUMENT_FRAGMENT_NODE &&
+        node.nodeType() !== Node.TEXT_NODE && nodeId !== undefined) {
+      this.#layout = await node.domModel().cssModel().getLayoutPropertiesFromComputedStyle(nodeId);
+    } else {
+      this.#layout = null;
+    }
     this.performUpdate();
-    return Promise.resolve();
   }
 
+  // TODO: remove in favour of updateAdorners.
   async updateStyleAdorners(): Promise<void> {
     if (!isOpeningTag(this.tagTypeContext)) {
       return;
@@ -2623,7 +2880,6 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
         node.nodeType() === Node.TEXT_NODE || nodeId === undefined) {
       return;
     }
-
     const layout = await node.domModel().cssModel().getLayoutPropertiesFromComputedStyle(nodeId);
     // TODO: move this to the template.
     this.removeAdornersByType(ElementsComponents.AdornerManager.RegisteredAdorners.SUBGRID);
@@ -2631,30 +2887,12 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     this.removeAdornersByType(ElementsComponents.AdornerManager.RegisteredAdorners.GRID_LANES);
     this.removeAdornersByType(ElementsComponents.AdornerManager.RegisteredAdorners.FLEX);
     this.removeAdornersByType(ElementsComponents.AdornerManager.RegisteredAdorners.SCROLL_SNAP);
-    this.removeAdornersByType(ElementsComponents.AdornerManager.RegisteredAdorners.CONTAINER);
     this.removeAdornersByType(ElementsComponents.AdornerManager.RegisteredAdorners.MEDIA);
     this.removeAdornersByType(ElementsComponents.AdornerManager.RegisteredAdorners.STARTING_STYLE);
-    this.removeAdornersByType(ElementsComponents.AdornerManager.RegisteredAdorners.POPOVER);
     if (layout) {
-      if (layout.isGrid) {
-        this.pushGridAdorner(layout.isSubgrid);
-      }
-      if (layout.isGridLanes) {
-        this.pushGridLanesAdorner();
-      }
-      if (layout.isFlex) {
-        this.pushFlexAdorner();
-      }
       if (layout.hasScroll) {
         this.pushScrollSnapAdorner();
       }
-      if (layout.isContainer) {
-        this.pushContainerAdorner();
-      }
-    }
-
-    if (node.isMediaNode()) {
-      this.pushMediaAdorner();
     }
 
     if (Root.Runtime.hostConfig.devToolsStartingStyleDebugging?.enabled) {
@@ -2663,132 +2901,21 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
         this.pushStartingStyleAdorner();
       }
     }
-
-    if (node.attributes().find(attr => attr.name === 'popover')) {
-      this.pushPopoverAdorner();
-    }
-  }
-
-  pushPopoverAdorner(): void {
-    if (!Root.Runtime.hostConfig.devToolsAllowPopoverForcing?.enabled) {
-      return;
-    }
-    const node = this.node();
-    const nodeId = node.id;
-
-    const config = ElementsComponents.AdornerManager.getRegisteredAdorner(
-        ElementsComponents.AdornerManager.RegisteredAdorners.POPOVER);
-    const adorner = this.adorn(config);
-    const onClick = async(): Promise<void> => {
-      const {nodeIds} = await node.domModel().agent.invoke_forceShowPopover({nodeId, enable: adorner.isActive()});
-      if (adorner.isActive()) {
-        Badges.UserBadges.instance().recordAction(Badges.BadgeAction.MODERN_DOM_BADGE_CLICKED);
-      }
-      for (const closedPopoverNodeId of nodeIds) {
-        const node = this.node().domModel().nodeForId(closedPopoverNodeId);
-        const treeElement = node && this.treeOutline?.treeElementByNode.get(node);
-        if (!treeElement || !isOpeningTag(treeElement.tagTypeContext)) {
-          return;
-        }
-        const adorner = this.#adorners.values().find(adorner => adorner.name === config.name);
-        adorner?.toggle(false);
-      }
-    };
-    adorner.addInteraction(onClick, {
-      isToggle: true,
-      shouldPropagateOnKeydown: false,
-      ariaLabelDefault: i18nString(UIStrings.forceOpenPopover),
-      ariaLabelActive: i18nString(UIStrings.stopForceOpenPopover),
-    });
-
-    this.#adorners.add(adorner);
-  }
-
-  pushGridAdorner(isSubgrid: boolean): void {
-    const node = this.node();
-    const nodeId = node.id;
-    if (!nodeId) {
-      return;
-    }
-
-    const config = ElementsComponents.AdornerManager.getRegisteredAdorner(
-        isSubgrid ? ElementsComponents.AdornerManager.RegisteredAdorners.SUBGRID :
-                    ElementsComponents.AdornerManager.RegisteredAdorners.GRID);
-    const adorner = this.adorn(config);
-    adorner.classList.add('grid');
-
-    const onClick = ((() => {
-                       if (adorner.isActive()) {
-                         node.domModel().overlayModel().highlightGridInPersistentOverlay(nodeId);
-                         if (isSubgrid) {
-                           Badges.UserBadges.instance().recordAction(Badges.BadgeAction.MODERN_DOM_BADGE_CLICKED);
-                         }
-                       } else {
-                         node.domModel().overlayModel().hideGridInPersistentOverlay(nodeId);
-                       }
-                     }) as EventListener);
-    adorner.addInteraction(onClick, {
-      isToggle: true,
-      shouldPropagateOnKeydown: false,
-      ariaLabelDefault: i18nString(UIStrings.enableGridMode),
-      ariaLabelActive: i18nString(UIStrings.disableGridMode),
-    });
-
-    node.domModel().overlayModel().addEventListener(
-        SDK.OverlayModel.Events.PERSISTENT_GRID_OVERLAY_STATE_CHANGED, event => {
-          const {nodeId: eventNodeId, enabled} = event.data;
-          if (eventNodeId !== nodeId) {
-            return;
-          }
-          adorner.toggle(enabled);
-        });
-
-    this.#adorners.add(adorner);
-    if (node.domModel().overlayModel().isHighlightedGridInPersistentOverlay(nodeId)) {
-      adorner.toggle(true);
-    }
   }
 
-  pushGridLanesAdorner(): void {
+  async #onPopoverAdornerClick(event: Event): Promise<void> {
+    event.stopPropagation();
     const node = this.node();
     const nodeId = node.id;
     if (!nodeId) {
       return;
     }
-
-    const config = ElementsComponents.AdornerManager.getRegisteredAdorner(
-        ElementsComponents.AdornerManager.RegisteredAdorners.GRID_LANES);
-    const adorner = this.adorn(config);
-    adorner.classList.add('grid-lanes');
-
-    const onClick = ((() => {
-                       if (adorner.isActive()) {
-                         node.domModel().overlayModel().highlightGridInPersistentOverlay(nodeId);
-                         Badges.UserBadges.instance().recordAction(Badges.BadgeAction.MODERN_DOM_BADGE_CLICKED);
-                       } else {
-                         node.domModel().overlayModel().hideGridInPersistentOverlay(nodeId);
-                       }
-                     }) as EventListener);
-    adorner.addInteraction(onClick, {
-      isToggle: true,
-      shouldPropagateOnKeydown: false,
-      ariaLabelDefault: i18nString(UIStrings.enableGridLanesMode),
-      ariaLabelActive: i18nString(UIStrings.disableGridLanesMode),
-    });
-
-    node.domModel().overlayModel().addEventListener(
-        SDK.OverlayModel.Events.PERSISTENT_GRID_OVERLAY_STATE_CHANGED, event => {
-          const {nodeId: eventNodeId, enabled} = event.data;
-          if (eventNodeId !== nodeId) {
-            return;
-          }
-          adorner.toggle(enabled);
-        });
-
-    this.#adorners.add(adorner);
-    if (node.domModel().overlayModel().isHighlightedGridInPersistentOverlay(nodeId)) {
-      adorner.toggle(true);
+    await node.domModel().agent.invoke_forceShowPopover({nodeId, enable: !this.#popoverAdornerActive});
+    this.#popoverAdornerActive = !this.#popoverAdornerActive;
+    if (this.#popoverAdornerActive) {
+      Badges.UserBadges.instance().recordAction(Badges.BadgeAction.MODERN_DOM_BADGE_CLICKED);
     }
+    this.performUpdate();
   }
 
   pushScrollSnapAdorner(): void {
@@ -2864,125 +2991,6 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     this.#adorners.add(adorner);
   }
 
-  pushFlexAdorner(): void {
-    const node = this.node();
-    const nodeId = node.id;
-    if (!nodeId) {
-      return;
-    }
-    const config = ElementsComponents.AdornerManager.getRegisteredAdorner(
-        ElementsComponents.AdornerManager.RegisteredAdorners.FLEX);
-    const adorner = this.adorn(config);
-    adorner.classList.add('flex');
-
-    const onClick = ((() => {
-                       const model = node.domModel().overlayModel();
-                       if (adorner.isActive()) {
-                         model.highlightFlexContainerInPersistentOverlay(nodeId);
-                       } else {
-                         model.hideFlexContainerInPersistentOverlay(nodeId);
-                       }
-                     }) as EventListener);
-
-    adorner.addInteraction(onClick, {
-      isToggle: true,
-      shouldPropagateOnKeydown: false,
-      ariaLabelDefault: i18nString(UIStrings.enableFlexMode),
-      ariaLabelActive: i18nString(UIStrings.disableFlexMode),
-    });
-
-    node.domModel().overlayModel().addEventListener(
-        SDK.OverlayModel.Events.PERSISTENT_FLEX_CONTAINER_OVERLAY_STATE_CHANGED, event => {
-          const {nodeId: eventNodeId, enabled} = event.data;
-          if (eventNodeId !== nodeId) {
-            return;
-          }
-
-          adorner.toggle(enabled);
-        });
-
-    this.#adorners.add(adorner);
-
-    if (node.domModel().overlayModel().isHighlightedFlexContainerInPersistentOverlay(nodeId)) {
-      adorner.toggle(true);
-    }
-  }
-
-  pushContainerAdorner(): void {
-    const node = this.node();
-    const nodeId = node.id;
-    if (!nodeId) {
-      return;
-    }
-    const config = ElementsComponents.AdornerManager.getRegisteredAdorner(
-        ElementsComponents.AdornerManager.RegisteredAdorners.CONTAINER);
-    const adorner = this.adorn(config);
-    adorner.classList.add('container');
-
-    const onClick = ((() => {
-                       const model = node.domModel().overlayModel();
-                       if (adorner.isActive()) {
-                         model.highlightContainerQueryInPersistentOverlay(nodeId);
-                         Badges.UserBadges.instance().recordAction(Badges.BadgeAction.MODERN_DOM_BADGE_CLICKED);
-                       } else {
-                         model.hideContainerQueryInPersistentOverlay(nodeId);
-                       }
-                     }) as EventListener);
-
-    adorner.addInteraction(onClick, {
-      isToggle: true,
-      shouldPropagateOnKeydown: false,
-      ariaLabelDefault: i18nString(UIStrings.enableScrollSnap),
-      ariaLabelActive: i18nString(UIStrings.disableScrollSnap),
-    });
-
-    node.domModel().overlayModel().addEventListener(
-        SDK.OverlayModel.Events.PERSISTENT_CONTAINER_QUERY_OVERLAY_STATE_CHANGED, event => {
-          const {nodeId: eventNodeId, enabled} = event.data;
-          if (eventNodeId !== nodeId) {
-            return;
-          }
-          adorner.toggle(enabled);
-        });
-
-    this.#adorners.add(adorner);
-    if (node.domModel().overlayModel().isHighlightedContainerQueryInPersistentOverlay(nodeId)) {
-      adorner.toggle(true);
-    }
-  }
-
-  pushMediaAdorner(): void {
-    const node = this.node();
-    const nodeId = node.id;
-    if (!nodeId) {
-      return;
-    }
-    const config = ElementsComponents.AdornerManager.getRegisteredAdorner(
-        ElementsComponents.AdornerManager.RegisteredAdorners.MEDIA);
-    const adorner = this.adornMedia(config);
-    adorner.classList.add('media');
-    const onClick = (async(): Promise<void> => {
-                      await UI.ViewManager.ViewManager.instance().showView('medias');
-                      const view = UI.ViewManager.ViewManager.instance().view('medias');
-                      if (view) {
-                        const widget = await view.widget();
-                        if (widget instanceof Media.MainView.MainView) {
-                          await widget.waitForInitialPlayers();
-                          widget.selectPlayerByDOMNodeId(node.backendNodeId());
-                        }
-                      }
-                    }) as EventListener;
-
-    adorner.addInteraction(onClick, {
-      isToggle: false,
-      shouldPropagateOnKeydown: false,
-      ariaLabelDefault: i18nString(UIStrings.openMediaPanel),
-      ariaLabelActive: i18nString(UIStrings.openMediaPanel),
-    });
-
-    this.#adorners.add(adorner);
-  }
-
   updateScrollAdorner(): void {
     if (!isOpeningTag(this.tagTypeContext)) {
       return;