chrome-devtools-frontend 1.0.1550444 → 1.0.1555174

package/front_end/panels/elements/ElementsTreeElement.ts

@@ -369,10 +369,17 @@ 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;
@@ -382,6 +389,9 @@ export interface ViewInput {
   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 {
@@ -397,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);
     }
   });
@@ -410,8 +426,19 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
       ElementsComponents.AdornerManager.RegisteredAdorners.CONTAINER);
   const flexAdornerConfig =
       ElementsComponents.AdornerManager.getRegisteredAdorner(ElementsComponents.AdornerManager.RegisteredAdorners.FLEX);
-  const hasAdorners =
-      input.adorners?.size || input.showAdAdorner || input.showContainerAdorner || input.showFlexAdorner;
+  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; })}>
@@ -454,7 +481,7 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
           .data=${{name: flexAdornerConfig.name, jslogContext: flexAdornerConfig.name}}
           jslog=${VisualLogging.adorner(flexAdornerConfig.name).track({click: true})}
           active=${input.flexAdornerActive}
-          aria-label=${input.flexAdornerActive ? i18nString(UIStrings.enableFlexMode) : i18nString(UIStrings.disableFlexMode)}
+          aria-label=${input.flexAdornerActive ? i18nString(UIStrings.disableFlexMode) : i18nString(UIStrings.enableFlexMode)}
           @click=${input.onFlexAdornerClick}
           @keydown=${(event: KeyboardEvent) => {
             if (event.code === 'Enter' || event.code === 'Space') {
@@ -465,6 +492,85 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
           ${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;
         })}
@@ -505,6 +611,8 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
   #nodeInfo?: DocumentFragment;
   #containerAdornerActive = false;
   #flexAdornerActive = false;
+  #gridAdornerActive = false;
+  #popoverAdornerActive = false;
   #layout: SDK.CSSModel.LayoutProperties|null = null;
 
   constructor(node: SDK.DOMModel.DOMNode, isClosingTag?: boolean) {
@@ -578,6 +686,15 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
           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 {
@@ -642,16 +759,18 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
         {
           containerAdornerActive: this.#containerAdornerActive,
           adorners: !this.isClosingTag() ? this.#adorners : undefined,
-          showAdAdorner:
-              ElementsPanel.instance().isAdornerEnabled(ElementsComponents.AdornerManager.RegisteredAdorners.AD) &&
-              this.nodeInternal.isAdFrameNode(),
-          showContainerAdorner: ElementsPanel.instance().isAdornerEnabled(
-                                    ElementsComponents.AdornerManager.RegisteredAdorners.CONTAINER) &&
-              Boolean(this.#layout?.isContainer) && !this.isClosingTag(),
-          showFlexAdorner:
-              ElementsPanel.instance().isAdornerEnabled(ElementsComponents.AdornerManager.RegisteredAdorners.FLEX) &&
-              Boolean(this.#layout?.isFlex) && !this.isClosingTag(),
+          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 => {
@@ -662,6 +781,9 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
           },
           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);
   }
@@ -704,6 +826,40 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     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;
@@ -966,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);
   }
 
@@ -1175,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);
+        }
       }
     }
 
@@ -2688,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 = createIcon('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();
@@ -2775,155 +2889,33 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     this.removeAdornersByType(ElementsComponents.AdornerManager.RegisteredAdorners.SCROLL_SNAP);
     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.hasScroll) {
         this.pushScrollSnapAdorner();
       }
     }
 
-    if (node.isMediaNode()) {
-      this.pushMediaAdorner();
-    }
-
     if (Root.Runtime.hostConfig.devToolsStartingStyleDebugging?.enabled) {
       const affectedByStartingStyles = node.affectedByStartingStyles();
       if (affectedByStartingStyles) {
         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 {
@@ -2999,38 +2991,6 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     this.#adorners.add(adorner);
   }
 
-  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;