[Masonry] Adding support for masonry adorners in the Elements tree

This CL adds [masonry] adorners to the Elements DOM tree, similar to
the implementation we previously did for Grid.

Screenshots: https://imgur.com/a/Nqy6J9F

Bug: 343257585, 40159741
Change-Id: I660bd38c3b22fdbaea1ccaa47881f8050e7ce512
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6833016
Reviewed-by: Simon Zünd <[email protected]>
Reviewed-by: Changhao Han <[email protected]>
Commit-Queue: Yanling Wang <[email protected]>

Author: yanlingwang23

front_end/core/sdk/CSSModel.ts

@@ -67,6 +67,7 @@ export interface LayoutProperties {
   isFlex: boolean;
   isGrid: boolean;
   isSubgrid: boolean;
+  isMasonry: boolean;
   isContainer: boolean;
   hasScroll: boolean;
 }
@@ -421,6 +422,7 @@ export class CSSModel extends SDKModel<EventTypes> {
                        (styles.get('grid-template-columns')?.startsWith('subgrid') ||
                         styles.get('grid-template-rows')?.startsWith('subgrid'))) ??
         false;
+    const isMasonry = display === 'masonry' || display === 'inline-masonry';
     const containerType = styles.get('container-type');
     const isContainer = Boolean(containerType) && containerType !== '' && containerType !== 'normal';
     const hasScroll = Boolean(styles.get('scroll-snap-type')) && styles.get('scroll-snap-type') !== 'none';
@@ -429,6 +431,7 @@ export class CSSModel extends SDKModel<EventTypes> {
       isFlex,
       isGrid,
       isSubgrid,
+      isMasonry,
       isContainer,
       hasScroll,
     };

front_end/panels/elements/ElementsTreeElement.test.ts

@@ -125,6 +125,7 @@ describeWithMockConnection('ElementsTreeElement ', () => {
     isFlex: false,
     isGrid: false,
     isSubgrid: false,
+    isMasonry: false,
     isContainer: false,
     hasScroll: false,
   };

front_end/panels/elements/ElementsTreeElement.ts

@@ -185,6 +185,14 @@ const UIStrings = {
    * @description ARIA label for Elements Tree adorners
    */
   disableGridMode: 'Disable grid mode',
+  /**
+   * @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
    */
@@ -2504,6 +2512,9 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
       if (layout.isGrid) {
         this.pushGridAdorner(this.tagTypeContext, layout.isSubgrid);
       }
+      if (layout.isMasonry) {
+        this.pushMasonryAdorner(this.tagTypeContext);
+      }
       if (layout.isFlex) {
         this.pushFlexAdorner(this.tagTypeContext);
       }
@@ -2598,6 +2609,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;

front_end/panels/elements/components/AdornerManager.ts

@@ -24,6 +24,7 @@ export interface RegisteredAdorner {
 export enum RegisteredAdorners {
   GRID = 'grid',
   SUBGRID = 'subgrid',
+  MASONRY = 'masonry',
   FLEX = 'flex',
   AD = 'ad',
   SCROLL_SNAP = 'scroll-snap',
@@ -52,6 +53,12 @@ export function getRegisteredAdorner(which: RegisteredAdorners): RegisteredAdorn
         category: AdornerCategories.LAYOUT,
         enabledByDefault: true,
       };
+    case RegisteredAdorners.MASONRY:
+      return {
+        name: 'masonry',
+        category: AdornerCategories.LAYOUT,
+        enabledByDefault: true,
+      };
     case RegisteredAdorners.FLEX:
       return {
         name: 'flex',

test/e2e/resources/elements/BUILD.gn

@@ -9,6 +9,7 @@ copy_to_gen("elements") {
     "accessibility-iframe-page.html",
     "accessibility-simple-page.html",
     "adornment-container-query.html",
+    "adornment-masonry.html",
     "adornment-media.html",
     "adornment-scroll-snap.html",
     "adornment-scroll.html",

test/e2e/resources/elements/adornment-masonry.html

@@ -0,0 +1,16 @@
+<!--
+  Copyright 2025 The Chromium Authors. All rights reserved.
+  Use of this source code is governed by a BSD-style license that can be
+  found in the LICENSE file.
+-->
+<!DOCTYPE html>
+<style>
+  .masonry {
+    display: masonry;
+  }
+  .inline-masonry {
+    display: inline-masonry;
+  }
+</style>
+<div class="masonry"></div>
+<div class="inline-masonry"></div>

test/e2e_non_hosted/elements/adornment_test.ts

@@ -45,6 +45,18 @@ describe('Adornment in the Elements Tab', function() {
         devToolsPage);
   });
 
+  it('displays masonry adorners', async ({devToolsPage, inspectedPage}) => {
+    await inspectedPage.goToResource('elements/adornment-masonry.html');
+    await prepareElementsTab(devToolsPage);
+
+    await waitForAdorners(
+        [
+          {textContent: 'masonry', isActive: false},
+          {textContent: 'masonry', isActive: false},
+        ],
+        devToolsPage);
+  });
+
   it('displays scroll-snap adorners', async ({devToolsPage, inspectedPage}) => {
     await inspectedPage.goToResource('elements/adornment-scroll-snap.html');
     await prepareElementsTab(devToolsPage);