chrome-devtools-frontend 1.0.1548980 → 1.0.1550444

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';
@@ -195,11 +195,14 @@ const UIStrings = {
   /**
    * @description ARIA label for Elements Tree adorners
    */
-  enableMasonryMode: 'Enable masonry mode',
   /**
    * @description ARIA label for Elements Tree adorners
    */
-  disableMasonryMode: 'Disable masonry mode',
+  enableGridLanesMode: 'Enable grid-lanes mode',
+  /**
+   * @description ARIA label for Elements Tree adorners
+   */
+  disableGridLanesMode: 'Disable grid-lanes mode',
   /**
    * @description ARIA label for an elements tree adorner
    */
@@ -226,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.
@@ -354,13 +367,21 @@ export function isOpeningTag(context: TagTypeContext): context is OpeningTagCont
 }
 
 export interface ViewInput {
+  containerAdornerActive: boolean;
+  flexAdornerActive: boolean;
+
   showAdAdorner: boolean;
+  showContainerAdorner: boolean;
+  showFlexAdorner: 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;
 }
 
 export interface ViewOutput {
@@ -385,7 +406,12 @@ 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 hasAdorners =
+      input.adorners?.size || input.showAdAdorner || input.showContainerAdorner || input.showFlexAdorner;
   // clang-format off
   render(html`
     <div ${ref(el => { output.contentElement = el as HTMLElement; })}>
@@ -394,13 +420,51 @@ 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.enableFlexMode) : i18nString(UIStrings.disableFlexMode)}
+          @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}
         ${repeat(Array.from((input.adorners ?? new Set()).values()).sort(adornerComparator), adorner => {
           return adorner;
         })}
@@ -439,6 +503,9 @@ 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;
+  #layout: SDK.CSSModel.LayoutProperties|null = null;
 
   constructor(node: SDK.DOMModel.DOMNode, isClosingTag?: boolean) {
     // The title will be updated in onattach.
@@ -471,13 +538,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');
@@ -491,6 +559,25 @@ 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();
+        });
   }
 
   static animateOnDOMUpdate(treeElement: ElementsTreeElement): void {
@@ -553,10 +640,18 @@ 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(),
+          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(),
+          flexAdornerActive: this.#flexAdornerActive,
           nodeInfo: this.#nodeInfo,
           onGutterClick: this.showContextMenu.bind(this),
           onAdornerAdded: adorner => {
@@ -565,10 +660,50 @@ 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),
         },
         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();
+  }
+
   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;
@@ -1015,7 +1150,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();
@@ -2003,7 +2138,7 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
         ++highlightIndex;
       }
       element.setTextContentTruncatedIfNeeded(value);
-      UI.UIUtils.highlightRangesWithStyleClass(element, result.entityRanges, 'webkit-html-entity-value');
+      Highlighting.highlightRangesWithStyleClass(element, result.entityRanges, 'webkit-html-entity-value');
     }
 
     const hasText = (forceValue || value.length > 0);
@@ -2271,7 +2406,7 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
           }
           const result = convertUnicodeCharsToHTMLEntities(firstChild.nodeValue());
           textNodeElement.textContent = Platform.StringUtilities.collapseWhitespace(result.text);
-          UI.UIUtils.highlightRangesWithStyleClass(textNodeElement, result.entityRanges, 'webkit-html-entity-value');
+          Highlighting.highlightRangesWithStyleClass(textNodeElement, result.entityRanges, 'webkit-html-entity-value');
           UI.UIUtils.createTextChild(titleDOM, '\u200B');
           this.buildTagDOM(titleDOM, tagName, true, false, updateRecord);
           if (updateRecord?.hasChangedChildren()) {
@@ -2311,7 +2446,7 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
               'jslog', `${VisualLogging.value('text-node').track({change: true, dblclick: true})}`);
           const result = convertUnicodeCharsToHTMLEntities(node.nodeValue());
           textNodeElement.textContent = Platform.StringUtilities.collapseWhitespace(result.text);
-          UI.UIUtils.highlightRangesWithStyleClass(textNodeElement, result.entityRanges, 'webkit-html-entity-value');
+          Highlighting.highlightRangesWithStyleClass(textNodeElement, result.entityRanges, 'webkit-html-entity-value');
           UI.UIUtils.createTextChild(titleDOM, '"');
           if (updateRecord?.isCharDataModified()) {
             UI.UIUtils.runCSSAnimationOnce(textNodeElement, 'dom-update-highlight');
@@ -2534,7 +2669,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');
@@ -2559,7 +2694,7 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     adornerContent.textContent = name;
     adornerContent.classList.add('adorner-with-icon');
 
-    const linkIcon = IconButton.Icon.create('select-element');
+    const linkIcon = createIcon('select-element');
     adornerContent.append(linkIcon);
 
     const adorner = new Adorners.Adorner.Adorner();
@@ -2598,17 +2733,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;
@@ -2620,15 +2766,13 @@ 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);
     this.removeAdornersByType(ElementsComponents.AdornerManager.RegisteredAdorners.GRID);
-    this.removeAdornersByType(ElementsComponents.AdornerManager.RegisteredAdorners.MASONRY);
+    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);
@@ -2636,18 +2780,12 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
       if (layout.isGrid) {
         this.pushGridAdorner(layout.isSubgrid);
       }
-      if (layout.isMasonry) {
-        this.pushMasonryAdorner();
-      }
-      if (layout.isFlex) {
-        this.pushFlexAdorner();
+      if (layout.isGridLanes) {
+        this.pushGridLanesAdorner();
       }
       if (layout.hasScroll) {
         this.pushScrollSnapAdorner();
       }
-      if (layout.isContainer) {
-        this.pushContainerAdorner();
-      }
     }
 
     if (node.isMediaNode()) {
@@ -2746,7 +2884,7 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     }
   }
 
-  pushMasonryAdorner(): void {
+  pushGridLanesAdorner(): void {
     const node = this.node();
     const nodeId = node.id;
     if (!nodeId) {
@@ -2754,9 +2892,9 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     }
 
     const config = ElementsComponents.AdornerManager.getRegisteredAdorner(
-        ElementsComponents.AdornerManager.RegisteredAdorners.MASONRY);
+        ElementsComponents.AdornerManager.RegisteredAdorners.GRID_LANES);
     const adorner = this.adorn(config);
-    adorner.classList.add('masonry');
+    adorner.classList.add('grid-lanes');
 
     const onClick = ((() => {
                        if (adorner.isActive()) {
@@ -2769,8 +2907,8 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     adorner.addInteraction(onClick, {
       isToggle: true,
       shouldPropagateOnKeydown: false,
-      ariaLabelDefault: i18nString(UIStrings.enableMasonryMode),
-      ariaLabelActive: i18nString(UIStrings.disableMasonryMode),
+      ariaLabelDefault: i18nString(UIStrings.enableGridLanesMode),
+      ariaLabelActive: i18nString(UIStrings.disableGridLanesMode),
     });
 
     node.domModel().overlayModel().addEventListener(
@@ -2861,93 +2999,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;

package/front_end/panels/elements/ElementsTreeOutline.ts

@@ -41,6 +41,7 @@ import * as Badges from '../../models/badges/badges.js';
 import * as Elements from '../../models/elements/elements.js';
 import * as IssuesManager from '../../models/issues_manager/issues_manager.js';
 import * as CodeHighlighter from '../../ui/components/code_highlighter/code_highlighter.js';
+import * as Highlighting from '../../ui/components/highlighting/highlighting.js';
 import * as IssueCounter from '../../ui/components/issue_counter/issue_counter.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import {html, nothing, render} from '../../ui/lit/lit.js';
@@ -262,7 +263,7 @@ export class DOMTreeWidget extends UI.Widget.Widget {
       return;
     }
     this.#currentHighlightedNode = null;
-    this.requestUpdate();
+    this.performUpdate();
   }
 
   selectDOMNode(node: SDK.DOMModel.DOMNode|null, focus?: boolean): void {
@@ -298,6 +299,10 @@ export class DOMTreeWidget extends UI.Widget.Widget {
     return this.#viewOutput.elementsTreeOutline;
   }
 
+  treeElementForNode(node: SDK.DOMModel.DOMNode): ElementsTreeElement|null {
+    return this.#viewOutput.elementsTreeOutline?.findTreeElement(node) || null;
+  }
+
   override performUpdate(): void {
     this.#view(
         {
@@ -357,7 +362,9 @@ export class DOMTreeWidget extends UI.Widget.Widget {
    * FIXME: adorners should be part of the view input.
    */
   updateNodeAdorners(node: SDK.DOMModel.DOMNode): void {
-    void this.#viewOutput.elementsTreeOutline?.findTreeElement(node)?.updateStyleAdorners();
+    const element = this.#viewOutput.elementsTreeOutline?.findTreeElement(node);
+    void element?.updateStyleAdorners();
+    void element?.updateAdorners();
   }
 
   highlightMatch(node: SDK.DOMModel.DOMNode, query?: string): void {
@@ -369,7 +376,7 @@ export class DOMTreeWidget extends UI.Widget.Widget {
       treeElement.highlightSearchResults(query);
     }
     treeElement.reveal();
-    const matches = treeElement.listItemElement.getElementsByClassName(UI.UIUtils.highlightedSearchResultClassName);
+    const matches = treeElement.listItemElement.getElementsByClassName(Highlighting.highlightedSearchResultClassName);
     if (matches.length) {
       matches[0].scrollIntoViewIfNeeded(false);
     }
@@ -2006,6 +2013,7 @@ export class ElementsTreeOutline extends
     const treeElement = this.treeElementByNode.get(node);
     if (treeElement && isOpeningTag(treeElement.tagTypeContext)) {
       void treeElement.updateStyleAdorners();
+      void treeElement.updateAdorners();
     }
   }
 }

package/front_end/panels/elements/LayoutPane.ts

@@ -25,9 +25,9 @@ const UIStrings = {
    */
   showElementInTheElementsPanel: 'Show element in the Elements panel',
   /**
-   * @description Title of a section on CSS Grid/Masonry tooling
+   * @description Title of a section on CSS Grid/Grid Lanes tooling
    */
-  gridOrMasonry: 'Grid / Masonry',
+  gridOrGridLanes: 'Grid / Grid Lanes',
   /**
    * @description Title of a section in the Layout Sidebar pane of the Elements panel
    */
@@ -35,11 +35,11 @@ const UIStrings = {
   /**
    * @description Title of a section in Layout sidebar pane
    */
-  gridOrMasonryOverlays: 'Grid / Masonry overlays',
+  gridOrGridLanesOverlays: 'Grid / Grid Lanes overlays',
   /**
-   * @description Message in the Layout panel informing users that no CSS Grid/Masonry layouts were found on the page
+   * @description Message in the Layout panel informing users that no CSS Grid/Grid Lanes layouts were found on the page
    */
-  noGridOrMasonryLayoutsFoundOnThisPage: 'No grid or masonry layouts found on this page',
+  noGridOrGridLanesLayoutsFoundOnThisPage: 'No grid or grid lanes layouts found on this page',
   /**
    * @description Title of the Flexbox section in the Layout panel
    */
@@ -289,7 +289,7 @@ const DEFAULT_VIEW: View = (input, output, target) => {
           <summary class="header"
             @keydown=${input.onSummaryKeyDown}
             jslog=${VisualLogging.sectionHeader('grid-settings').track({click: true})}>
-            ${i18nString(UIStrings.gridOrMasonry)}
+            ${i18nString(UIStrings.gridOrGridLanes)}
           </summary>
           <div class="content-section" jslog=${VisualLogging.section('grid-settings')}>
             <h3 class="content-section-title">${i18nString(UIStrings.overlayDisplaySettings)}</h3>
@@ -327,8 +327,8 @@ const DEFAULT_VIEW: View = (input, output, target) => {
             html`<div class="content-section" jslog=${VisualLogging.section('grid-overlays')}>
               <h3 class="content-section-title">
                 ${input.gridElements.length ?
-                    i18nString(UIStrings.gridOrMasonryOverlays) :
-                    i18nString(UIStrings.noGridOrMasonryLayoutsFoundOnThisPage)}
+                    i18nString(UIStrings.gridOrGridLanesOverlays) :
+                    i18nString(UIStrings.noGridOrGridLanesLayoutsFoundOnThisPage)}
               </h3>
               ${input.gridElements.length ?
                   html`<div class="elements">${input.gridElements.map(renderElement)}</div>` :
@@ -431,8 +431,10 @@ export class LayoutPane extends UI.Widget.Widget {
 
   async #fetchGridNodes(): Promise<SDK.DOMModel.DOMNode[]> {
     return await this.#fetchNodesByStyle([
-      {name: 'display', value: 'grid'}, {name: 'display', value: 'inline-grid'}, {name: 'display', value: 'masonry'},
-      {name: 'display', value: 'inline-masonry'}
+      {name: 'display', value: 'grid'},
+      {name: 'display', value: 'inline-grid'},
+      {name: 'display', value: 'grid-lanes'},
+      {name: 'display', value: 'inline-grid-lanes'},
     ]);
   }
 

package/front_end/panels/elements/ShortcutTreeElement.ts

@@ -37,7 +37,7 @@ import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import type * as SDK from '../../core/sdk/sdk.js';
 import * as Adorners from '../../ui/components/adorners/adorners.js';
-import * as IconButton from '../../ui/components/icon_button/icon_button.js';
+import {createIcon} from '../../ui/kit/kit.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
 import * as ElementsComponents from './components/components.js';
@@ -77,7 +77,7 @@ export class ShortcutTreeElement extends UI.TreeOutline.TreeElement {
         ElementsComponents.AdornerManager.RegisteredAdorners.REVEAL);
     const name = config.name;
     const adornerContent = document.createElement('span');
-    const linkIcon = IconButton.Icon.create('select-element');
+    const linkIcon = createIcon('select-element');
     const slotText = document.createElement('span');
     slotText.textContent = name;
     adornerContent.append(linkIcon);

package/front_end/panels/elements/StyleEditorWidget.ts

@@ -3,7 +3,7 @@
 // found in the LICENSE file.
 /* eslint-disable @devtools/no-imperative-dom-api */
 
-import * as IconButton from '../../ui/components/icon_button/icon_button.js';
+import {createIcon} from '../../ui/kit/kit.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
 import type * as ElementsComponents from './components/components.js';
@@ -120,7 +120,7 @@ export class StyleEditorWidget extends UI.Widget.VBox {
   static createTriggerButton(
       pane: StylesSidebarPane, section: StylePropertiesSection, editorClass: {new(): Editor}, buttonTitle: string,
       triggerKey: string): HTMLElement {
-    const triggerButton = IconButton.Icon.create('flex-wrap', 'styles-pane-button');
+    const triggerButton = createIcon('flex-wrap', 'styles-pane-button');
     triggerButton.title = buttonTitle;
     triggerButton.role = 'button';