chrome-devtools-frontend 1.0.1473514 → 1.0.1510180

package/front_end/panels/elements/ElementsTreeElement.ts

@@ -37,8 +37,10 @@ import * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
+import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Protocol from '../../generated/protocol.js';
+import type * as Elements from '../../models/elements/elements.js';
 import type * as IssuesManager from '../../models/issues_manager/issues_manager.js';
 import * as TextUtils from '../../models/text_utils/text_utils.js';
 import * as CodeMirror from '../../third_party/codemirror.next/codemirror.next.js';
@@ -52,176 +54,265 @@ import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 import * as Emulation from '../emulation/emulation.js';
+import * as Media from '../media/media.js';
 
 import * as ElementsComponents from './components/components.js';
 import {canGetJSPath, cssPath, jsPath, xPath} from './DOMPath.js';
 import {getElementIssueDetails} from './ElementIssueUtils.js';
 import {ElementsPanel} from './ElementsPanel.js';
-import {type ElementsTreeOutline, MappedCharToEntity, type UpdateRecord} from './ElementsTreeOutline.js';
+import {type ElementsTreeOutline, MappedCharToEntity} from './ElementsTreeOutline.js';
 import {ImagePreviewPopover} from './ImagePreviewPopover.js';
 import {getRegisteredDecorators, type MarkerDecorator, type MarkerDecoratorRegistration} from './MarkerDecorator.js';
 
 const UIStrings = {
   /**
-   *@description Title for Ad adorner. This iframe is marked as advertisement frame.
+   * @description Title for Ad adorner. This iframe is marked as advertisement frame.
    */
   thisFrameWasIdentifiedAsAnAd: 'This frame was identified as an ad frame',
   /**
-   *@description A context menu item in the Elements panel. Force is used as a verb, indicating intention to make the state change.
+   * @description A context menu item in the Elements panel. Force is used as a verb, indicating intention to make the state change.
    */
   forceState: 'Force state',
   /**
-   *@description Hint element title in Elements Tree Element of the Elements panel
-   *@example {0} PH1
+   * @description Hint element title in Elements Tree Element of the Elements panel
+   * @example {0} PH1
    */
   useSInTheConsoleToReferToThis: 'Use {PH1} in the console to refer to this element.',
   /**
-   *@description A context menu item in the Elements Tree Element of the Elements panel
+   * @description A context menu item in the Elements Tree Element of the Elements panel
    */
   addAttribute: 'Add attribute',
   /**
-   *@description Text to modify the attribute of an item
+   * @description Text to modify the attribute of an item
    */
   editAttribute: 'Edit attribute',
   /**
-   *@description Text to focus on something
+   * @description Text to focus on something
    */
   focus: 'Focus',
   /**
-   *@description Text to scroll the displayed content into view
+   * @description Text to scroll the displayed content into view
    */
   scrollIntoView: 'Scroll into view',
   /**
-   *@description A context menu item in the Elements Tree Element of the Elements panel
+   * @description A context menu item in the Elements Tree Element of the Elements panel
    */
   editText: 'Edit text',
   /**
-   *@description A context menu item in the Elements Tree Element of the Elements panel
+   * @description A context menu item in the Elements Tree Element of the Elements panel
    */
   editAsHtml: 'Edit as HTML',
   /**
-   *@description Text to cut an element, cut should be used as a verb
+   * @description Text to cut an element, cut should be used as a verb
    */
   cut: 'Cut',
   /**
-   *@description Text for copying, copy should be used as a verb
+   * @description Text for copying, copy should be used as a verb
    */
   copy: 'Copy',
   /**
-   *@description Text to paste an element, paste should be used as a verb
+   * @description Text to paste an element, paste should be used as a verb
    */
   paste: 'Paste',
   /**
-   *@description Text in Elements Tree Element of the Elements panel, copy should be used as a verb
+   * @description Text in Elements Tree Element of the Elements panel, copy should be used as a verb
    */
   copyOuterhtml: 'Copy outerHTML',
   /**
-   *@description Text in Elements Tree Element of the Elements panel, copy should be used as a verb
+   * @description Text in Elements Tree Element of the Elements panel, copy should be used as a verb
    */
   copySelector: 'Copy `selector`',
   /**
-   *@description Text in Elements Tree Element of the Elements panel
+   * @description Text in Elements Tree Element of the Elements panel
    */
   copyJsPath: 'Copy JS path',
   /**
-   *@description Text in Elements Tree Element of the Elements panel, copy should be used as a verb
+   * @description Text in Elements Tree Element of the Elements panel, copy should be used as a verb
    */
   copyStyles: 'Copy styles',
   /**
-   *@description Text in Elements Tree Element of the Elements panel, copy should be used as a verb
+   * @description Text in Elements Tree Element of the Elements panel, copy should be used as a verb
    */
   copyXpath: 'Copy XPath',
   /**
-   *@description Text in Elements Tree Element of the Elements panel, copy should be used as a verb
+   * @description Text in Elements Tree Element of the Elements panel, copy should be used as a verb
    */
   copyFullXpath: 'Copy full XPath',
   /**
-   *@description Text in Elements Tree Element of the Elements panel, copy should be used as a verb
+   * @description Text in Elements Tree Element of the Elements panel, copy should be used as a verb
    */
   copyElement: 'Copy element',
   /**
-   *@description A context menu item in the Elements Tree Element of the Elements panel
+   * @description A context menu item in the Elements Tree Element of the Elements panel
    */
   duplicateElement: 'Duplicate element',
   /**
-   *@description Text to hide an element
+   * @description Text to hide an element
    */
   hideElement: 'Hide element',
   /**
-   *@description A context menu item in the Elements Tree Element of the Elements panel
+   * @description A context menu item in the Elements Tree Element of the Elements panel
    */
   deleteElement: 'Delete element',
   /**
-   *@description Text to expand something recursively
+   * @description Text to expand something recursively
    */
   expandRecursively: 'Expand recursively',
   /**
-   *@description Text to collapse children of a parent group
+   * @description Text to collapse children of a parent group
    */
   collapseChildren: 'Collapse children',
   /**
-   *@description Title of an action in the emulation tool to capture node screenshot
+   * @description Title of an action in the emulation tool to capture node screenshot
    */
   captureNodeScreenshot: 'Capture node screenshot',
   /**
-   *@description Title of a context menu item. When clicked DevTools goes to the Application panel and shows this specific iframe's details
+   * @description Title of a context menu item. When clicked DevTools goes to the Application panel and shows this specific iframe's details
    */
   showFrameDetails: 'Show `iframe` details',
   /**
-   *@description Text in Elements Tree Element of the Elements panel
+   * @description Text in Elements Tree Element of the Elements panel
    */
   valueIsTooLargeToEdit: '<value is too large to edit>',
   /**
-   *@description Element text content in Elements Tree Element of the Elements panel
+   * @description Element text content in Elements Tree Element of the Elements panel
    */
   children: 'Children:',
   /**
-   *@description ARIA label for Elements Tree adorners
+   * @description ARIA label for Elements Tree adorners
    */
   enableGridMode: 'Enable grid mode',
   /**
-   *@description ARIA label for Elements Tree adorners
+   * @description ARIA label for Elements Tree adorners
    */
   disableGridMode: 'Disable grid mode',
   /**
-   *@description Label of the adorner for flex elements in the Elements panel
+   * @description ARIA label for Elements Tree adorners
+   */
+  enableMasonryMode: 'Enable masonry mode',
+  /**
+   * @description ARIA label for Elements Tree adorners
+   */
+  disableMasonryMode: 'Disable masonry mode',
+  /**
+   * @description ARIA label for an elements tree adorner
+   */
+  forceOpenPopover: 'Keep this popover open',
+  /**
+   * @description ARIA label for an elements tree adorner
+   */
+  stopForceOpenPopover: 'Stop keeping this popover open',
+  /**
+   * @description Label of the adorner for flex elements in the Elements panel
    */
   enableFlexMode: 'Enable flex mode',
   /**
-   *@description Label of the adorner for flex elements in the Elements panel
+   * @description Label of the adorner for flex elements in the Elements panel
    */
   disableFlexMode: 'Disable flex mode',
   /**
-   *@description Label of an adorner in the Elements panel. When clicked, it enables
+   * @description Label of an adorner in the Elements panel. When clicked, it enables
    * the overlay showing CSS scroll snapping for the current element.
    */
   enableScrollSnap: 'Enable scroll-snap overlay',
   /**
-   *@description Label of an adorner in the Elements panel. When clicked, it disables
+   * @description Label of an adorner in the Elements panel. When clicked, it disables
    * 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 redirects
+   * @description Label of an adorner in the Elements panel. When clicked, it redirects
    * to the Media Panel.
    */
   openMediaPanel: 'Jump to Media panel',
   /**
-   *@description Text of a tooltip to redirect to another element in the Elements panel
+   * @description Text of a tooltip to redirect to another element in the Elements panel
    */
   showPopoverTarget: 'Show element associated with the `popovertarget` attribute',
   /**
-   *@description Text of a tooltip to redirect to another element in the Elements panel
+   * @description Text of a tooltip to redirect to another element in the Elements panel, associated with the `interesttarget` attribute
    */
   showInterestTarget: 'Show element associated with the `interesttarget` attribute',
   /**
-   *@description Text of a tooltip to redirect to another element in the Elements panel
+   * @description Text of a tooltip to redirect to another element in the Elements panel, associated with the `commandfor` attribute
    */
   showCommandForTarget: 'Show element associated with the `commandfor` attribute',
   /**
-   *@description Text of the tooltip for scroll adorner.
+   * @description Text of the tooltip for scroll adorner.
    */
   elementHasScrollableOverflow: 'This element has a scrollable overflow',
+  /**
+   * @description Text of a context menu item to redirect to the AI assistance panel and to start a chat.
+   */
+  startAChat: 'Start a chat',
+  /**
+   * @description Context menu item in Elements panel to assess visibility of an element via AI.
+   */
+  assessVisibility: 'Assess visibility',
+  /**
+   * @description Context menu item in Elements panel to center an element via AI.
+   */
+  centerElement: 'Center element',
+  /**
+   * @description Context menu item in Elements panel to wrap flex items via AI.
+   */
+  wrapTheseItems: 'Wrap these items',
+  /**
+   * @description Context menu item in Elements panel to distribute flex items evenly via AI.
+   */
+  distributeItemsEvenly: 'Distribute items evenly',
+  /**
+   * @description Context menu item in Elements panel to explain flexbox via AI.
+   */
+  explainFlexbox: 'Explain flexbox',
+  /**
+   * @description Context menu item in Elements panel to align grid items via AI.
+   */
+  alignItems: 'Align items',
+  /**
+   * @description Context menu item in Elements panel to add padding/gap to grid via AI.
+   */
+  addPadding: 'Add padding',
+  /**
+   * @description Context menu item in Elements panel to explain grid layout via AI.
+   */
+  explainGridLayout: 'Explain grid layout',
+  /**
+   * @description Context menu item in Elements panel to find grid definition for a subgrid item via AI.
+   */
+  findGridDefinition: 'Find grid definition',
+  /**
+   * @description Context menu item in Elements panel to change parent grid properties for a subgrid item via AI.
+   */
+  changeParentProperties: 'Change parent properties',
+  /**
+   * @description Context menu item in Elements panel to explain subgrids via AI.
+   */
+  explainSubgrids: 'Explain subgrids',
+  /**
+   * @description Context menu item in Elements panel to remove scrollbars via AI.
+   */
+  removeScrollbars: 'Remove scrollbars',
+  /**
+   * @description Context menu item in Elements panel to style scrollbars via AI.
+   */
+  styleScrollbars: 'Style scrollbars',
+  /**
+   * @description Context menu item in Elements panel to explain scrollbars via AI.
+   */
+  explainScrollbars: 'Explain scrollbars',
+  /**
+   * @description Context menu item in Elements panel to explain container queries via AI.
+   */
+  explainContainerQueries: 'Explain container queries',
+  /**
+   * @description Context menu item in Elements panel to explain container types via AI.
+   */
+  explainContainerTypes: 'Explain container types',
+  /**
+   * @description Context menu item in Elements panel to explain container context via AI.
+   */
+  explainContainerContext: 'Explain container context',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/elements/ElementsTreeElement.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -325,6 +416,22 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
       void this.updateScrollAdorner();
     }
     this.expandAllButtonElement = null;
+
+    if (this.nodeInternal.retained && !this.isClosingTag()) {
+      const icon = new IconButton.Icon.Icon();
+      icon.name = 'small-status-dot';
+      icon.style.color = 'var(--icon-error)';
+      icon.classList.add('extra-small');
+      icon.style.setProperty('vertical-align', 'middle');
+      this.setLeadingIcons([icon]);
+      this.listItemNode.classList.add('detached-elements-detached-node');
+      this.listItemNode.style.setProperty('display', '-webkit-box');
+      this.listItemNode.setAttribute('title', 'Retained Node');
+    }
+
+    if (this.nodeInternal.detached && !this.isClosingTag()) {
+      this.listItemNode.setAttribute('title', 'Detached Tree Node');
+    }
   }
 
   static animateOnDOMUpdate(treeElement: ElementsTreeElement): void {
@@ -554,7 +661,7 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     const action = UI.ActionRegistry.ActionRegistry.instance().getAction('freestyler.elements-floating-button');
     if (this.contentElement && !this.aiButtonContainer) {
       this.aiButtonContainer = this.contentElement.createChild('span', 'ai-button-container');
-      const floatingButton = Buttons.FloatingButton.create('smart-assistant', action.title());
+      const floatingButton = Buttons.FloatingButton.create('smart-assistant', action.title(), 'ask-ai');
       floatingButton.addEventListener('click', ev => {
         ev.stopPropagation();
         this.select(true, false);
@@ -744,10 +851,10 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
   }
 
   private showContextMenu(event: Event): void {
-    this.treeOutline && this.treeOutline.showContextMenu(this, event);
+    this.treeOutline && void this.treeOutline.showContextMenu(this, event);
   }
 
-  populateTagContextMenu(contextMenu: UI.ContextMenu.ContextMenu, event: Event): void {
+  async populateTagContextMenu(contextMenu: UI.ContextMenu.ContextMenu, event: Event): Promise<void> {
     // Add attribute-related actions.
     const treeElement =
         this.isClosingTag() && this.treeOutline ? this.treeOutline.findTreeElement(this.nodeInternal) : this;
@@ -766,7 +873,7 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
           i18nString(UIStrings.editAttribute), this.startEditingAttribute.bind(this, attribute, target),
           {jslogContext: 'edit-attribute'});
     }
-    this.populateNodeContextMenu(contextMenu);
+    await this.populateNodeContextMenu(contextMenu);
     ElementsTreeElement.populateForcedPseudoStateItems(contextMenu, treeElement.node());
     this.populateScrollIntoView(contextMenu);
     contextMenu.viewSection().appendItem(i18nString(UIStrings.focus), async () => {
@@ -794,15 +901,15 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
         {jslogContext: 'scroll-into-view'});
   }
 
-  populateTextContextMenu(contextMenu: UI.ContextMenu.ContextMenu, textNode: Element): void {
+  async populateTextContextMenu(contextMenu: UI.ContextMenu.ContextMenu, textNode: Element): Promise<void> {
     if (!this.editing) {
       contextMenu.editSection().appendItem(
           i18nString(UIStrings.editText), this.startEditingTextNode.bind(this, textNode), {jslogContext: 'edit-text'});
     }
-    this.populateNodeContextMenu(contextMenu);
+    return await this.populateNodeContextMenu(contextMenu);
   }
 
-  populateNodeContextMenu(contextMenu: UI.ContextMenu.ContextMenu): void {
+  async populateNodeContextMenu(contextMenu: UI.ContextMenu.ContextMenu): Promise<void> {
     // Add free-form node-related actions.
     const isEditable = this.hasEditableNode();
     // clang-format off
@@ -820,10 +927,177 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     }
     let menuItem;
 
-    if (UI.ActionRegistry.ActionRegistry.instance().hasAction('freestyler.element-panel-context')) {
-      contextMenu.footerSection().appendAction(
-          'freestyler.element-panel-context',
-      );
+    const openAiAssistanceId = 'freestyler.element-panel-context';
+    if (UI.ActionRegistry.ActionRegistry.instance().hasAction(openAiAssistanceId)) {
+      function appendSubmenuPromptAction(
+          submenu: UI.ContextMenu.SubMenu, action: UI.ActionRegistration.Action, label: Common.UIString.LocalizedString,
+          prompt: string, jslogContext: string): void {
+        submenu.defaultSection().appendItem(label, () => {
+          void action.execute({prompt});
+          UI.UIUtils.PromotionManager.instance().recordFeatureInteraction(openAiAssistanceId);
+        }, {disabled: !action.enabled(), jslogContext});
+      }
+
+      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});
+
+      } else {
+        contextMenu.footerSection().appendAction(openAiAssistanceId);
+      }
     }
 
     menuItem = contextMenu.clipboardSection().appendItem(
@@ -855,12 +1129,12 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
           i18nString(UIStrings.copyFullXpath), this.copyFullXPath.bind(this), {jslogContext: 'copy-full-xpath'});
     }
 
-    if (!isShadowRoot) {
-      menuItem = copyMenu.clipboardSection().appendItem(
-          i18nString(UIStrings.copyElement), treeOutline.performCopyOrCut.bind(treeOutline, false, this.nodeInternal),
-          {jslogContext: 'copy-element'});
-      menuItem.setShortcut(createShortcut('C', modifier));
+    menuItem = copyMenu.clipboardSection().appendItem(
+        i18nString(UIStrings.copyElement),
+        treeOutline.performCopyOrCut.bind(treeOutline, false, this.nodeInternal, true), {jslogContext: 'copy-element'});
+    menuItem.setShortcut(createShortcut('C', modifier));
 
+    if (!isShadowRoot) {
       // Duplicate element, disabled on root element and ShadowDOM.
       const isRootElement = !this.nodeInternal.parentNode || this.nodeInternal.parentNode.nodeName() === '#document';
       menuItem = contextMenu.editSection().appendItem(
@@ -1026,7 +1300,7 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     this.updateEditorHandles(attribute, config);
 
     const componentSelection = this.listItemElement.getComponentSelection();
-    componentSelection && componentSelection.selectAllChildren(elementForSelection);
+    componentSelection?.selectAllChildren(elementForSelection);
 
     return true;
   }
@@ -1051,7 +1325,7 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
         this.textNodeEditingCommitted.bind(this, textNode), this.editingCancelled.bind(this), null);
     this.updateEditorHandles(textNodeElement, config);
     const componentSelection = this.listItemElement.getComponentSelection();
-    componentSelection && componentSelection.selectAllChildren(textNodeElement);
+    componentSelection?.selectAllChildren(textNodeElement);
 
     return true;
   }
@@ -1085,7 +1359,7 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
       if ((event as KeyboardEvent).key !== ' ') {
         return;
       }
-      this.editing && this.editing.commit();
+      this.editing?.commit();
       event.consume(true);
     };
 
@@ -1121,7 +1395,7 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
         new UI.InplaceEditor.Config<string|null>(editingCommitted.bind(this), editingCancelled.bind(this), tagName);
     this.updateEditorHandles(tagNameElement, config);
     const componentSelection = this.listItemElement.getComponentSelection();
-    componentSelection && componentSelection.selectAllChildren(tagNameElement);
+    componentSelection?.selectAllChildren(tagNameElement);
     return true;
   }
 
@@ -1204,7 +1478,7 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
             // The relatedTarget is null when no element gains focus, e.g. switching windows.
             const relatedTarget = (event.relatedTarget as Node | null);
             if (relatedTarget && !relatedTarget.isSelfOrDescendant(editor)) {
-              this.editing && this.editing.commit();
+              this.editing?.commit();
             }
           },
         }),
@@ -1215,7 +1489,7 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     this.htmlEditElement.appendChild(editor);
     editor.editor.focus();
 
-    this.treeOutline && this.treeOutline.setMultilineEditing(this.editing);
+    this.treeOutline?.setMultilineEditing(this.editing);
 
     function resize(this: ElementsTreeElement): void {
       if (this.treeOutline && this.htmlEditElement) {
@@ -1427,7 +1701,7 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     return tags.length === 1 ? null : tags[tags.length - 1];
   }
 
-  updateTitle(updateRecord?: UpdateRecord|null): void {
+  updateTitle(updateRecord?: Elements.ElementUpdateRecord.ElementUpdateRecord|null): void {
     // If we are editing, return early to prevent canceling the edit.
     // After editing is committed updateTitle will be called.
     if (this.editing) {
@@ -1609,8 +1883,9 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
   }
 
   private buildAttributeDOM(
-      parentElement: Element|DocumentFragment, name: string, value: string, updateRecord: UpdateRecord|null,
-      forceValue?: boolean, node?: SDK.DOMModel.DOMNode): HTMLElement {
+      parentElement: Element|DocumentFragment, name: string, value: string,
+      updateRecord: Elements.ElementUpdateRecord.ElementUpdateRecord|null, forceValue?: boolean,
+      node?: SDK.DOMModel.DOMNode): HTMLElement {
     const closingPunctuationRegex = /[\/;:\)\]\}]/g;
     let highlightIndex = 0;
     let highlightCount = 0;
@@ -1799,7 +2074,7 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
 
   private buildTagDOM(
       parentElement: DocumentFragment, tagName: string, isClosingTag: boolean, isDistinctTreeElement: boolean,
-      updateRecord: UpdateRecord|null): void {
+      updateRecord: Elements.ElementUpdateRecord.ElementUpdateRecord|null): void {
     const node = this.nodeInternal;
     const classes = ['webkit-html-tag'];
     if (isClosingTag && isDistinctTreeElement) {
@@ -1838,7 +2113,7 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     }
   }
 
-  private nodeTitleInfo(updateRecord: UpdateRecord|null): DocumentFragment {
+  private nodeTitleInfo(updateRecord: Elements.ElementUpdateRecord.ElementUpdateRecord|null): DocumentFragment {
     const node = this.nodeInternal;
     const titleDOM = document.createDocumentFragment();
     const updateSearchHighlight = (): void => {
@@ -2267,26 +2542,63 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     for (const styleAdorner of this.tagTypeContext.styleAdorners) {
       this.removeAdorner(styleAdorner, this.tagTypeContext);
     }
-    if (!layout) {
-      return;
+    if (layout) {
+      if (layout.isGrid) {
+        this.pushGridAdorner(this.tagTypeContext, layout.isSubgrid);
+      }
+      if (layout.isMasonry) {
+        this.pushMasonryAdorner(this.tagTypeContext);
+      }
+      if (layout.isFlex) {
+        this.pushFlexAdorner(this.tagTypeContext);
+      }
+      if (layout.hasScroll) {
+        this.pushScrollSnapAdorner(this.tagTypeContext);
+      }
+      if (layout.isContainer) {
+        this.pushContainerAdorner(this.tagTypeContext);
+      }
     }
 
-    if (layout.isGrid) {
-      this.pushGridAdorner(this.tagTypeContext, layout.isSubgrid);
-    }
-    if (layout.isFlex) {
-      this.pushFlexAdorner(this.tagTypeContext);
-    }
-    if (layout.hasScroll) {
-      this.pushScrollSnapAdorner(this.tagTypeContext);
+    if (node.isMediaNode()) {
+      this.pushMediaAdorner(this.tagTypeContext);
     }
-    if (layout.isContainer) {
-      this.pushContainerAdorner(this.tagTypeContext);
+
+    if (node.attributes().find(attr => attr.name === 'popover')) {
+      this.pushPopoverAdorner(this.tagTypeContext);
     }
+  }
 
-    if (node.isMediaNode()) {
-      this.pushMediaAdorner(this.tagTypeContext);
+  pushPopoverAdorner(context: OpeningTagContext): 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()});
+      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 = treeElement.tagTypeContext.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),
+    });
+
+    context.styleAdorners.add(adorner);
   }
 
   pushGridAdorner(context: OpeningTagContext, isSubgrid: boolean): void {
@@ -2331,6 +2643,47 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     }
   }
 
+  pushMasonryAdorner(context: OpeningTagContext): void {
+    const node = this.node();
+    const nodeId = node.id;
+    if (!nodeId) {
+      return;
+    }
+
+    const config = ElementsComponents.AdornerManager.getRegisteredAdorner(
+        ElementsComponents.AdornerManager.RegisteredAdorners.MASONRY);
+    const adorner = this.adorn(config);
+    adorner.classList.add('masonry');
+
+    const onClick = ((() => {
+                       if (adorner.isActive()) {
+                         node.domModel().overlayModel().highlightGridInPersistentOverlay(nodeId);
+                       } else {
+                         node.domModel().overlayModel().hideGridInPersistentOverlay(nodeId);
+                       }
+                     }) as EventListener);
+    adorner.addInteraction(onClick, {
+      isToggle: true,
+      shouldPropagateOnKeydown: false,
+      ariaLabelDefault: i18nString(UIStrings.enableMasonryMode),
+      ariaLabelActive: i18nString(UIStrings.disableMasonryMode),
+    });
+
+    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);
+        });
+
+    context.styleAdorners.add(adorner);
+    if (node.domModel().overlayModel().isHighlightedGridInPersistentOverlay(nodeId)) {
+      adorner.toggle(true);
+    }
+  }
+
   pushScrollSnapAdorner(context: OpeningTagContext): void {
     const node = this.node();
     const nodeId = node.id;
@@ -2470,10 +2823,17 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
         ElementsComponents.AdornerManager.RegisteredAdorners.MEDIA);
     const adorner = this.adornMedia(config);
     adorner.classList.add('media');
-
-    const onClick = ((() => {
-                       void UI.ViewManager.ViewManager.instance().showView('medias');
-                     }) as EventListener);
+    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,