chrome-devtools-frontend 1.0.1558690 → 1.0.1561080

package/front_end/panels/elements/ElementsTreeElement.ts

@@ -33,6 +33,8 @@
  * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
 
+import '../../ui/components/adorners/adorners.js';
+
 import * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
@@ -47,12 +49,12 @@ import * as TextUtils from '../../models/text_utils/text_utils.js';
 import * as Workspace from '../../models/workspace/workspace.js';
 import * as CodeMirror from '../../third_party/codemirror.next/codemirror.next.js';
 import type {DirectiveResult} from '../../third_party/lit/lib/directive.js';
-import * as Adorners from '../../ui/components/adorners/adorners.js';
+import type * 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 TextEditor from '../../ui/components/text_editor/text_editor.js';
-import {createIcon, Icon} from '../../ui/kit/kit.js';
+import {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';
@@ -69,7 +71,7 @@ import {type ElementsTreeOutline, MappedCharToEntity} from './ElementsTreeOutlin
 import {ImagePreviewPopover} from './ImagePreviewPopover.js';
 import {getRegisteredDecorators, type MarkerDecorator, type MarkerDecoratorRegistration} from './MarkerDecorator.js';
 
-const {html, nothing, render, Directives: {ref, repeat}} = Lit;
+const {html, nothing, render, Directives: {ref}} = Lit;
 
 const UIStrings = {
   /**
@@ -383,6 +385,7 @@ export interface ViewInput {
 
   showAdAdorner: boolean;
   showContainerAdorner: boolean;
+  containerType?: string;
   showFlexAdorner: boolean;
   showGridAdorner: boolean;
   showGridLanesAdorner: boolean;
@@ -392,20 +395,27 @@ export interface ViewInput {
   isSubgrid: boolean;
 
   showViewSourceAdorner: boolean;
-  adorners?: Set<Adorners.Adorner.Adorner>;
+  showScrollAdorner: boolean;
+  showScrollSnapAdorner: boolean;
   nodeInfo?: DocumentFragment;
   topLayerIndex: number;
+  scrollSnapAdornerActive: boolean;
 
   onGutterClick: (e: Event) => void;
-  onAdornerAdded: (adorner: Adorners.Adorner.Adorner) => void;
-  onAdornerRemoved: (adorner: Adorners.Adorner.Adorner) => void;
   onContainerAdornerClick: (e: Event) => void;
   onFlexAdornerClick: (e: Event) => void;
   onGridAdornerClick: (e: Event) => void;
   onMediaAdornerClick: (e: Event) => void;
   onPopoverAdornerClick: (e: Event) => void;
+  onScrollSnapAdornerClick: (e: Event) => void;
   onTopLayerAdornerClick: (e: Event) => void;
   onViewSourceAdornerClick: () => void;
+  onSlotAdornerClick: (e: Event) => void;
+  showSlotAdorner: boolean;
+  slotName?: string;
+  showStartingStyleAdorner: boolean;
+  startingStyleAdornerActive: boolean;
+  onStartingStyleAdornerClick: (e: Event) => void;
 }
 
 export interface ViewOutput {
@@ -414,49 +424,39 @@ export interface ViewOutput {
   contentElement?: HTMLElement;
 }
 
-function adornerRef(input: ViewInput): DirectiveResult<typeof Lit.Directives.RefDirective> {
+export function adornerRef(): DirectiveResult<typeof Lit.Directives.RefDirective> {
   let adorner: Adorners.Adorner.Adorner|undefined;
   return ref((el?: Element) => {
     if (adorner) {
-      input.onAdornerRemoved(adorner);
+      ElementsPanel.instance().deregisterAdorner(adorner);
     }
     adorner = el as Adorners.Adorner.Adorner;
-
     if (adorner) {
       if (ElementsPanel.instance().isAdornerEnabled(adorner.name)) {
         adorner.show();
       } else {
         adorner.hide();
       }
-      input.onAdornerAdded(adorner);
+      ElementsPanel.instance().registerAdorner(adorner);
     }
   });
 }
 
+function handleAdornerKeydown(cb: (event: Event) => void): (event: KeyboardEvent) => void {
+  return (event: KeyboardEvent) => {
+    if (event.code === 'Enter' || event.code === 'Space') {
+      cb(event);
+      event.preventDefault();
+      event.stopPropagation();
+    }
+  };
+}
+
 export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLElement): void => {
-  const adAdornerConfig =
-      ElementsComponents.AdornerManager.getRegisteredAdorner(ElementsComponents.AdornerManager.RegisteredAdorners.AD);
-  const viewSourceAdornerConfig = ElementsComponents.AdornerManager.getRegisteredAdorner(
-      ElementsComponents.AdornerManager.RegisteredAdorners.VIEW_SOURCE);
-  const containerAdornerConfig = ElementsComponents.AdornerManager.getRegisteredAdorner(
-      ElementsComponents.AdornerManager.RegisteredAdorners.CONTAINER);
-  const flexAdornerConfig =
-      ElementsComponents.AdornerManager.getRegisteredAdorner(ElementsComponents.AdornerManager.RegisteredAdorners.FLEX);
-  const gridAdornerConfig =
-      ElementsComponents.AdornerManager.getRegisteredAdorner(ElementsComponents.AdornerManager.RegisteredAdorners.GRID);
-  const subgridAdornerConfig = ElementsComponents.AdornerManager.getRegisteredAdorner(
-      ElementsComponents.AdornerManager.RegisteredAdorners.SUBGRID);
-  const gridLanesAdornerConfig = ElementsComponents.AdornerManager.getRegisteredAdorner(
-      ElementsComponents.AdornerManager.RegisteredAdorners.GRID_LANES);
-  const mediaAdornerConfig = ElementsComponents.AdornerManager.getRegisteredAdorner(
-      ElementsComponents.AdornerManager.RegisteredAdorners.MEDIA);
-  const popoverAdornerConfig = ElementsComponents.AdornerManager.getRegisteredAdorner(
-      ElementsComponents.AdornerManager.RegisteredAdorners.POPOVER);
-  const topLayerAdornerConfig = ElementsComponents.AdornerManager.getRegisteredAdorner(
-      ElementsComponents.AdornerManager.RegisteredAdorners.TOP_LAYER);
-  const hasAdorners = input.adorners?.size || input.showAdAdorner || input.showContainerAdorner ||
-      input.showFlexAdorner || input.showGridAdorner || input.showGridLanesAdorner || input.showMediaAdorner ||
-      input.showPopoverAdorner || input.showTopLayerAdorner || input.showViewSourceAdorner;
+  const hasAdorners = input.showAdAdorner || input.showContainerAdorner || input.showFlexAdorner ||
+      input.showGridAdorner || input.showGridLanesAdorner || input.showMediaAdorner || input.showPopoverAdorner ||
+      input.showTopLayerAdorner || input.showViewSourceAdorner || input.showScrollAdorner ||
+      input.showScrollSnapAdorner || input.showSlotAdorner || input.showStartingStyleAdorner;
   // clang-format off
   render(html`
     <div ${ref(el => { output.contentElement = el as HTMLElement; })}>
@@ -468,113 +468,90 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
       ${hasAdorners ? html`<div class="adorner-container ${!hasAdorners ? 'hidden' : ''}">
         ${input.showAdAdorner ? html`<devtools-adorner
           aria-label=${i18nString(UIStrings.thisFrameWasIdentifiedAsAnAd)}
-          .data=${{name: adAdornerConfig.name, jslogContext: adAdornerConfig.name}}
-          ${adornerRef(input)}>
-          <span>${adAdornerConfig.name}</span>
+          .name=${ElementsComponents.AdornerManager.RegisteredAdorners.AD}
+          jslog=${VisualLogging.adorner(ElementsComponents.AdornerManager.RegisteredAdorners.AD)}
+          ${adornerRef()}>
+          <span>${ElementsComponents.AdornerManager.RegisteredAdorners.AD}</span>
         </devtools-adorner>` : nothing}
         ${input.showViewSourceAdorner ? html`<devtools-adorner
-          .data=${{name: viewSourceAdornerConfig.name, jslogContext: viewSourceAdornerConfig.name}}
+          .name=${ElementsComponents.AdornerManager.RegisteredAdorners.VIEW_SOURCE}
+          jslog=${VisualLogging.adorner(ElementsComponents.AdornerManager.RegisteredAdorners.VIEW_SOURCE)}
           aria-label=${i18nString(UIStrings.viewSourceCode)}
           @click=${input.onViewSourceAdornerClick}
-          ${adornerRef(input)}>
-          <span>${viewSourceAdornerConfig.name}</span>
+          ${adornerRef()}>
+          <span>${ElementsComponents.AdornerManager.RegisteredAdorners.VIEW_SOURCE}</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})}
+          .name=${ElementsComponents.AdornerManager.RegisteredAdorners.CONTAINER}
+          jslog=${VisualLogging.adorner(ElementsComponents.AdornerManager.RegisteredAdorners.CONTAINER).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>
+          @keydown=${handleAdornerKeydown(input.onContainerAdornerClick)}
+          ${adornerRef()}>
+          <span class="adorner-with-icon">
+            <devtools-icon name="container"></devtools-icon>
+            <span>${input.containerType}</span>
+          </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})}
+          .name=${ElementsComponents.AdornerManager.RegisteredAdorners.FLEX}
+          jslog=${VisualLogging.adorner(ElementsComponents.AdornerManager.RegisteredAdorners.FLEX).track({click: true})}
           active=${input.flexAdornerActive}
           aria-label=${input.flexAdornerActive ? i18nString(UIStrings.disableFlexMode) : i18nString(UIStrings.enableFlexMode)}
           @click=${input.onFlexAdornerClick}
-          @keydown=${(event: KeyboardEvent) => {
-            if (event.code === 'Enter' || event.code === 'Space') {
-              input.onFlexAdornerClick(event);
-              event.stopPropagation();
-            }
-          }}
-          ${adornerRef(input)}>
-          <span>${flexAdornerConfig.name}</span>
+          @keydown=${handleAdornerKeydown(input.onFlexAdornerClick)}
+          ${adornerRef()}>
+          <span>${ElementsComponents.AdornerManager.RegisteredAdorners.FLEX}</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})}
+          .name=${input.isSubgrid ? ElementsComponents.AdornerManager.RegisteredAdorners.SUBGRID : ElementsComponents.AdornerManager.RegisteredAdorners.GRID}
+          jslog=${VisualLogging.adorner(input.isSubgrid ? ElementsComponents.AdornerManager.RegisteredAdorners.SUBGRID : ElementsComponents.AdornerManager.RegisteredAdorners.GRID).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>
+          @keydown=${handleAdornerKeydown(input.onGridAdornerClick)}
+          ${adornerRef()}>
+          <span>${input.isSubgrid ? ElementsComponents.AdornerManager.RegisteredAdorners.SUBGRID : ElementsComponents.AdornerManager.RegisteredAdorners.GRID}</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})}
+          .name=${ElementsComponents.AdornerManager.RegisteredAdorners.GRID_LANES}
+          jslog=${VisualLogging.adorner(ElementsComponents.AdornerManager.RegisteredAdorners.GRID_LANES).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>
+          @keydown=${handleAdornerKeydown(input.onGridAdornerClick)}
+          ${adornerRef()}>
+          <span>${ElementsComponents.AdornerManager.RegisteredAdorners.GRID_LANES}</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})}
+          .name=${ElementsComponents.AdornerManager.RegisteredAdorners.MEDIA}
+          jslog=${VisualLogging.adorner(ElementsComponents.AdornerManager.RegisteredAdorners.MEDIA).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)}>
+          @keydown=${handleAdornerKeydown(input.onMediaAdornerClick)}
+          ${adornerRef()}>
           <span class="adorner-with-icon">
-            ${mediaAdornerConfig.name}<devtools-icon name="select-element"></devtools-icon>
+            ${ElementsComponents.AdornerManager.RegisteredAdorners.MEDIA}<devtools-icon name="select-element"></devtools-icon>
           </span>
         </devtools-adorner>`: nothing}
         ${input.showPopoverAdorner ? html`<devtools-adorner
@@ -582,42 +559,75 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
           role=button
           toggleable=true
           tabindex=0
-          .data=${{name: popoverAdornerConfig.name, jslogContext: popoverAdornerConfig.name}}
-          jslog=${VisualLogging.adorner(popoverAdornerConfig.name).track({click: true})}
+          .name=${ElementsComponents.AdornerManager.RegisteredAdorners.POPOVER}
+          jslog=${VisualLogging.adorner(ElementsComponents.AdornerManager.RegisteredAdorners.POPOVER).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>
+          @keydown=${handleAdornerKeydown(input.onPopoverAdornerClick)}
+          ${adornerRef()}>
+          <span>${ElementsComponents.AdornerManager.RegisteredAdorners.POPOVER}</span>
         </devtools-adorner>`: nothing}
         ${input.showTopLayerAdorner ? html`<devtools-adorner
           class=clickable
           role=button
           tabindex=0
-          .data=${{name: topLayerAdornerConfig.name, jslogContext: topLayerAdornerConfig.name}}
-          jslog=${VisualLogging.adorner(topLayerAdornerConfig.name).track({click: true})}
+          .name=${ElementsComponents.AdornerManager.RegisteredAdorners.TOP_LAYER}
+          jslog=${VisualLogging.adorner(ElementsComponents.AdornerManager.RegisteredAdorners.TOP_LAYER).track({click: true})}
           aria-label=${i18nString(UIStrings.reveal)}
           @click=${input.onTopLayerAdornerClick}
-          @keydown=${(event: KeyboardEvent) => {
-            if (event.code === 'Enter' || event.code === 'Space') {
-              input.onTopLayerAdornerClick(event);
-              event.stopPropagation();
-            }
-          }}
-          ${adornerRef(input)}>
+          @keydown=${handleAdornerKeydown(input.onTopLayerAdornerClick)}
+          ${adornerRef()}>
           <span class="adorner-with-icon">
             ${`top-layer (${input.topLayerIndex})`}<devtools-icon name="select-element"></devtools-icon>
           </span>
         </devtools-adorner>`: nothing}
-        ${repeat(Array.from((input.adorners ?? new Set()).values()).sort(adornerComparator), adorner => {
-          return adorner;
-        })}
+        ${input.showStartingStyleAdorner ? html`<devtools-adorner
+          class="starting-style"
+          .name=${ElementsComponents.AdornerManager.RegisteredAdorners.STARTING_STYLE}
+          jslog=${VisualLogging.adorner(ElementsComponents.AdornerManager.RegisteredAdorners.STARTING_STYLE).track({click: true})}
+          active=${input.startingStyleAdornerActive}
+          toggleable=true
+          aria-label=${input.startingStyleAdornerActive ? i18nString(UIStrings.disableStartingStyle) : i18nString(UIStrings.enableStartingStyle)}
+          @click=${input.onStartingStyleAdornerClick}
+          @keydown=${handleAdornerKeydown(input.onStartingStyleAdornerClick)}
+          ${adornerRef()}>
+          <span>${ElementsComponents.AdornerManager.RegisteredAdorners.STARTING_STYLE}</span>
+        </devtools-adorner>` : nothing}
+        ${input.showScrollAdorner ? html`<devtools-adorner
+          class="scroll"
+          .name=${ElementsComponents.AdornerManager.RegisteredAdorners.SCROLL}
+          jslog=${VisualLogging.adorner(ElementsComponents.AdornerManager.RegisteredAdorners.SCROLL).track({click: true})}
+          aria-label=${i18nString(UIStrings.elementHasScrollableOverflow)}
+          ${adornerRef()}>
+          <span>${ElementsComponents.AdornerManager.RegisteredAdorners.SCROLL}</span>
+        </devtools-adorner>` : nothing}
+        ${input.showSlotAdorner ? html`<devtools-adorner
+          class=clickable
+          role=button
+          tabindex=0
+          .name=${ElementsComponents.AdornerManager.RegisteredAdorners.SLOT}
+          jslog=${VisualLogging.adorner(ElementsComponents.AdornerManager.RegisteredAdorners.SLOT).track({click: true})}
+          @click=${input.onSlotAdornerClick}
+          @mousedown=${(e: Event) => e.stopPropagation()}
+          ${adornerRef()}>
+          <span class="adorner-with-icon">
+            <devtools-icon name="select-element"></devtools-icon>
+            <span>${ElementsComponents.AdornerManager.RegisteredAdorners.SLOT}</span>
+          </span>
+        </devtools-adorner>`: nothing}
+        ${input.showScrollSnapAdorner ? html`<devtools-adorner
+          class="scroll-snap"
+          .name=${ElementsComponents.AdornerManager.RegisteredAdorners.SCROLL_SNAP}
+          jslog=${VisualLogging.adorner(ElementsComponents.AdornerManager.RegisteredAdorners.SCROLL_SNAP).track({click: true})}
+          active=${input.scrollSnapAdornerActive}
+          toggleable=true
+          aria-label=${input.scrollSnapAdornerActive ? i18nString(UIStrings.disableScrollSnap) : i18nString(UIStrings.enableScrollSnap)}
+          @click=${input.onScrollSnapAdornerClick}
+          @keydown=${handleAdornerKeydown(input.onScrollSnapAdornerClick)}
+          ${adornerRef()}>
+          <span>${ElementsComponents.AdornerManager.RegisteredAdorners.SCROLL_SNAP}</span>
+        </devtools-adorner>` : nothing}
       </div>`: nothing}
     </div>
   `, target);
@@ -651,12 +661,14 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
   readonly tagTypeContext: TagTypeContext;
 
   #adornersThrottler = new Common.Throttler.Throttler(100);
-  #adorners = new Set<Adorners.Adorner.Adorner>();
   #nodeInfo?: DocumentFragment;
   #containerAdornerActive = false;
   #flexAdornerActive = false;
   #gridAdornerActive = false;
   #popoverAdornerActive = false;
+
+  #scrollSnapAdornerActive = false;
+  #startingStyleAdornerActive = false;
   #layout: SDK.CSSModel.LayoutProperties|null = null;
 
   constructor(node: SDK.DOMModel.DOMNode, isClosingTag?: boolean) {
@@ -687,10 +699,6 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
         tagType: TagType.OPENING,
         canAddAttributes: this.nodeInternal.nodeType() === Node.ELEMENT_NODE,
       };
-      void this.updateStyleAdorners();
-
-      void this.updateScrollAdorner();
-
       void this.#updateAdorners();
     }
     this.expandAllButtonElement = null;
@@ -711,34 +719,6 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     if (this.nodeInternal.detached && !this.isClosingTag()) {
       this.listItemNode.setAttribute('title', 'Detached Tree Node');
     }
-
-    node.domModel().overlayModel().addEventListener(
-        SDK.OverlayModel.Events.PERSISTENT_CONTAINER_QUERY_OVERLAY_STATE_CHANGED, event => {
-          const {nodeId: eventNodeId, enabled} = event.data;
-          if (eventNodeId !== node.id) {
-            return;
-          }
-          this.#containerAdornerActive = enabled;
-          this.performUpdate();
-        });
-    node.domModel().overlayModel().addEventListener(
-        SDK.OverlayModel.Events.PERSISTENT_FLEX_CONTAINER_OVERLAY_STATE_CHANGED, event => {
-          const {nodeId: eventNodeId, enabled} = event.data;
-          if (eventNodeId !== node.id) {
-            return;
-          }
-          this.#flexAdornerActive = enabled;
-          this.performUpdate();
-        });
-    node.domModel().overlayModel().addEventListener(
-        SDK.OverlayModel.Events.PERSISTENT_GRID_OVERLAY_STATE_CHANGED, event => {
-          const {nodeId: eventNodeId, enabled} = event.data;
-          if (eventNodeId !== node.id) {
-            return;
-          }
-          this.#gridAdornerActive = enabled;
-          this.performUpdate();
-        });
   }
 
   static animateOnDOMUpdate(treeElement: ElementsTreeElement): void {
@@ -794,17 +774,13 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     }
   }
 
-  get adorners(): Adorners.Adorner.Adorner[] {
-    return Array.from(this.#adorners);
-  }
-
   performUpdate(): void {
     DEFAULT_VIEW(
         {
           containerAdornerActive: this.#containerAdornerActive,
-          adorners: !this.isClosingTag() ? this.#adorners : undefined,
           showAdAdorner: this.nodeInternal.isAdFrameNode(),
-          showContainerAdorner: Boolean(this.#layout?.isContainer) && !this.isClosingTag(),
+          showContainerAdorner: Boolean(this.#layout?.containerType) && !this.isClosingTag(),
+          containerType: this.#layout?.containerType,
           showFlexAdorner: Boolean(this.#layout?.isFlex) && !this.isClosingTag(),
           flexAdornerActive: this.#flexAdornerActive,
           showGridAdorner: Boolean(this.#layout?.isGrid) && !this.isClosingTag(),
@@ -817,21 +793,33 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
           popoverAdornerActive: this.#popoverAdornerActive,
           isSubgrid: Boolean(this.#layout?.isSubgrid),
           showViewSourceAdorner: this.nodeInternal.isRootNode() && isOpeningTag(this.tagTypeContext),
+          showScrollAdorner: ((this.node().nodeName() === 'HTML' && this.node().ownerDocument?.isScrollable()) ||
+                              (this.node().nodeName() !== '#document' && this.node().isScrollable())) &&
+              !this.isClosingTag(),
+          showScrollSnapAdorner: Boolean(this.#layout?.hasScroll) && !this.isClosingTag(),
+          scrollSnapAdornerActive: this.#scrollSnapAdornerActive,
+          showSlotAdorner: Boolean(this.nodeInternal.assignedSlot) && !this.isClosingTag(),
+          showStartingStyleAdorner: this.nodeInternal.affectedByStartingStyles() && !this.isClosingTag(),
+          startingStyleAdornerActive: this.#startingStyleAdornerActive,
           nodeInfo: this.#nodeInfo,
+          onStartingStyleAdornerClick: (event: Event) => this.#onStartingStyleAdornerClick(event),
+          onSlotAdornerClick: () => {
+            if (this.nodeInternal.assignedSlot) {
+              const deferredNode = this.nodeInternal.assignedSlot.deferredNode;
+              deferredNode.resolve(node => {
+                void Common.Revealer.reveal(node);
+              });
+            }
+          },
           topLayerIndex: this.node().topLayerIndex(),
           onViewSourceAdornerClick: this.revealHTMLInSources.bind(this),
           onGutterClick: this.showContextMenu.bind(this),
-          onAdornerAdded: adorner => {
-            ElementsPanel.instance().registerAdorner(adorner);
-          },
-          onAdornerRemoved: adorner => {
-            ElementsPanel.instance().deregisterAdorner(adorner);
-          },
           onContainerAdornerClick: (event: Event) => this.#onContainerAdornerClick(event),
           onFlexAdornerClick: (event: Event) => this.#onFlexAdornerClick(event),
           onGridAdornerClick: (event: Event) => this.#onGridAdornerClick(event),
           onMediaAdornerClick: (event: Event) => this.#onMediaAdornerClick(event),
           onPopoverAdornerClick: (event: Event) => this.#onPopoverAdornerClick(event),
+          onScrollSnapAdornerClick: (event: Event) => this.#onScrollSnapAdornerClick(event),
           onTopLayerAdornerClick: () => {
             if (!this.treeOutline) {
               return;
@@ -1054,25 +1042,6 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     this.#expandedChildrenLimit = expandedChildrenLimit;
   }
 
-  createSlotLink(nodeShortcut: SDK.DOMModel.DOMNodeShortcut|null): void {
-    if (!isOpeningTag(this.tagTypeContext)) {
-      return;
-    }
-    if (nodeShortcut) {
-      const config = ElementsComponents.AdornerManager.getRegisteredAdorner(
-          ElementsComponents.AdornerManager.RegisteredAdorners.SLOT);
-      const adorner = this.adornSlot(config);
-      this.#adorners.add(adorner);
-      const deferredNode = nodeShortcut.deferredNode;
-      adorner.addEventListener('click', () => {
-        deferredNode.resolve(node => {
-          void Common.Revealer.reveal(node);
-        });
-      });
-      adorner.addEventListener('mousedown', e => e.consume(), false);
-    }
-  }
-
   private createSelection(): void {
     const contentElement = this.contentElement;
     if (!contentElement) {
@@ -1124,6 +1093,19 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     if (this.treeOutline && !this.isClosingTag()) {
       this.treeOutline.treeElementByNode.set(this.nodeInternal, this);
       this.nodeInternal.addEventListener(SDK.DOMModel.DOMNodeEvents.TOP_LAYER_INDEX_CHANGED, this.performUpdate, this);
+      this.nodeInternal.addEventListener(
+          SDK.DOMModel.DOMNodeEvents.SCROLLABLE_FLAG_UPDATED, this.#onScrollableFlagUpdated, this);
+      this.nodeInternal.addEventListener(
+          SDK.DOMModel.DOMNodeEvents.CONTAINER_QUERY_OVERLAY_STATE_CHANGED,
+          this.#onPersistentContainerQueryOverlayStateChanged, this);
+      this.nodeInternal.addEventListener(
+          SDK.DOMModel.DOMNodeEvents.FLEX_CONTAINER_OVERLAY_STATE_CHANGED,
+          this.#onPersistentFlexContainerOverlayStateChanged, this);
+      this.nodeInternal.addEventListener(
+          SDK.DOMModel.DOMNodeEvents.GRID_OVERLAY_STATE_CHANGED, this.#onPersistentGridOverlayStateChanged, this);
+      this.nodeInternal.addEventListener(
+          SDK.DOMModel.DOMNodeEvents.SCROLL_SNAP_OVERLAY_STATE_CHANGED, this.#onPersistentScrollSnapOverlayStateChanged,
+          this);
     }
   }
 
@@ -1135,6 +1117,58 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
       this.treeOutline.treeElementByNode.delete(this.nodeInternal);
     }
     this.nodeInternal.removeEventListener(SDK.DOMModel.DOMNodeEvents.TOP_LAYER_INDEX_CHANGED, this.performUpdate, this);
+    this.nodeInternal.removeEventListener(
+        SDK.DOMModel.DOMNodeEvents.SCROLLABLE_FLAG_UPDATED, this.#onScrollableFlagUpdated, this);
+    this.nodeInternal.removeEventListener(
+        SDK.DOMModel.DOMNodeEvents.CONTAINER_QUERY_OVERLAY_STATE_CHANGED,
+        this.#onPersistentContainerQueryOverlayStateChanged, this);
+    this.nodeInternal.removeEventListener(
+        SDK.DOMModel.DOMNodeEvents.FLEX_CONTAINER_OVERLAY_STATE_CHANGED,
+        this.#onPersistentFlexContainerOverlayStateChanged, this);
+    this.nodeInternal.removeEventListener(
+        SDK.DOMModel.DOMNodeEvents.GRID_OVERLAY_STATE_CHANGED, this.#onPersistentGridOverlayStateChanged, this);
+    this.nodeInternal.removeEventListener(
+        SDK.DOMModel.DOMNodeEvents.SCROLL_SNAP_OVERLAY_STATE_CHANGED, this.#onPersistentScrollSnapOverlayStateChanged,
+        this);
+  }
+
+  #onScrollableFlagUpdated(): void {
+    void this.#updateAdorners();
+  }
+
+  #onPersistentContainerQueryOverlayStateChanged(event: Common.EventTarget.EventTargetEvent<{enabled: boolean}>): void {
+    this.#containerAdornerActive = event.data.enabled;
+    this.performUpdate();
+  }
+
+  #onPersistentFlexContainerOverlayStateChanged(event: Common.EventTarget.EventTargetEvent<{enabled: boolean}>): void {
+    this.#flexAdornerActive = event.data.enabled;
+    this.performUpdate();
+  }
+
+  #onPersistentGridOverlayStateChanged(event: Common.EventTarget.EventTargetEvent<{enabled: boolean}>): void {
+    this.#gridAdornerActive = event.data.enabled;
+    this.performUpdate();
+  }
+
+  #onPersistentScrollSnapOverlayStateChanged(event: Common.EventTarget.EventTargetEvent<{enabled: boolean}>): void {
+    this.#scrollSnapAdornerActive = event.data.enabled;
+    this.performUpdate();
+  }
+
+  #onScrollSnapAdornerClick(event: Event): void {
+    event.stopPropagation();
+    const node = this.node();
+    const nodeId = node.id;
+    if (!nodeId) {
+      return;
+    }
+    const model = node.domModel().overlayModel();
+    if (this.#scrollSnapAdornerActive) {
+      model.hideScrollSnapInPersistentOverlay(nodeId);
+    } else {
+      model.highlightScrollSnapInPersistentOverlay(nodeId);
+    }
   }
 
   override onattach(): void {
@@ -1492,7 +1526,7 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
           ],
         },
         {
-          condition: (props: SDK.CSSModel.LayoutProperties|null): boolean => Boolean(props?.isContainer),
+          condition: (props: SDK.CSSModel.LayoutProperties|null): boolean => Boolean(props?.containerType),
           items: [
             {
               label: i18nString(UIStrings.explainContainerQueries),
@@ -2851,69 +2885,6 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     });
   }
 
-  // TODO: add unit tests for adorner-related methods after component and TypeScript works are done
-  adorn({name}: {name: string}, content?: HTMLElement): Adorners.Adorner.Adorner {
-    let adornerContent = content;
-    if (!adornerContent) {
-      adornerContent = document.createElement('span');
-      adornerContent.textContent = name;
-    }
-    const adorner = new Adorners.Adorner.Adorner();
-    adorner.data = {
-      name,
-      content: adornerContent,
-      jslogContext: name,
-    };
-    if (isOpeningTag(this.tagTypeContext)) {
-      this.#adorners.add(adorner);
-      ElementsPanel.instance().registerAdorner(adorner);
-      this.updateAdorners();
-    }
-    return adorner;
-  }
-
-  adornSlot({name}: {name: string}): Adorners.Adorner.Adorner {
-    const linkIcon = createIcon('select-element');
-    const slotText = document.createElement('span');
-    slotText.textContent = name;
-    const adornerContent = document.createElement('span');
-    adornerContent.append(linkIcon);
-    adornerContent.append(slotText);
-    adornerContent.classList.add('adorner-with-icon');
-    const adorner = new Adorners.Adorner.Adorner();
-    adorner.data = {
-      name,
-      content: adornerContent,
-      jslogContext: 'slot',
-    };
-    this.#adorners.add(adorner);
-    ElementsPanel.instance().registerAdorner(adorner);
-    this.updateAdorners();
-    return adorner;
-  }
-
-  removeAdorner(adornerToRemove: Adorners.Adorner.Adorner): void {
-    ElementsPanel.instance().deregisterAdorner(adornerToRemove);
-    adornerToRemove.remove();
-    this.#adorners.delete(adornerToRemove);
-    this.updateAdorners();
-  }
-
-  /**
-   * @param adornerType optional type of adorner to remove. If not provided, remove all adorners.
-   */
-  removeAdornersByType(adornerType?: ElementsComponents.AdornerManager.RegisteredAdorners): void {
-    if (!isOpeningTag(this.tagTypeContext)) {
-      return;
-    }
-
-    for (const adorner of this.#adorners) {
-      if (adorner.name === adornerType || !adornerType) {
-        this.removeAdorner(adorner);
-      }
-    }
-  }
-
   updateAdorners(): void {
     // TODO: remove adornersThrottler in favour of throttled updated (requestUpdate/performUpdate).
     void this.#adornersThrottler.schedule(this.#updateAdorners.bind(this));
@@ -2921,7 +2892,6 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
 
   async #updateAdorners(): Promise<void> {
     if (this.isClosingTag()) {
-      this.performUpdate();
       return;
     }
     const node = this.node();
@@ -2935,41 +2905,6 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     this.performUpdate();
   }
 
-  // TODO: remove in favour of updateAdorners.
-  async updateStyleAdorners(): Promise<void> {
-    if (!isOpeningTag(this.tagTypeContext)) {
-      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) {
-      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.GRID_LANES);
-    this.removeAdornersByType(ElementsComponents.AdornerManager.RegisteredAdorners.FLEX);
-    this.removeAdornersByType(ElementsComponents.AdornerManager.RegisteredAdorners.SCROLL_SNAP);
-    this.removeAdornersByType(ElementsComponents.AdornerManager.RegisteredAdorners.MEDIA);
-    this.removeAdornersByType(ElementsComponents.AdornerManager.RegisteredAdorners.STARTING_STYLE);
-    if (layout) {
-      if (layout.hasScroll) {
-        this.pushScrollSnapAdorner();
-      }
-    }
-
-    if (Root.Runtime.hostConfig.devToolsStartingStyleDebugging?.enabled) {
-      const affectedByStartingStyles = node.affectedByStartingStyles();
-      if (affectedByStartingStyles) {
-        this.pushStartingStyleAdorner();
-      }
-    }
-  }
-
   async #onPopoverAdornerClick(event: Event): Promise<void> {
     event.stopPropagation();
     const node = this.node();
@@ -2985,102 +2920,21 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     this.performUpdate();
   }
 
-  pushScrollSnapAdorner(): void {
-    const node = this.node();
-    const nodeId = node.id;
-    if (!nodeId) {
-      return;
-    }
-    const config = ElementsComponents.AdornerManager.getRegisteredAdorner(
-        ElementsComponents.AdornerManager.RegisteredAdorners.SCROLL_SNAP);
-    const adorner = this.adorn(config);
-    adorner.classList.add('scroll-snap');
-
-    const onClick = ((() => {
-                       const model = node.domModel().overlayModel();
-                       if (adorner.isActive()) {
-                         model.highlightScrollSnapInPersistentOverlay(nodeId);
-                       } else {
-                         model.hideScrollSnapInPersistentOverlay(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_SCROLL_SNAP_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().isHighlightedScrollSnapInPersistentOverlay(nodeId)) {
-      adorner.toggle(true);
-    }
-  }
-
-  pushStartingStyleAdorner(): void {
+  #onStartingStyleAdornerClick(event: Event): void {
+    event.stopPropagation();
     const node = this.node();
     const nodeId = node.id;
     if (!nodeId) {
       return;
     }
-    const config = ElementsComponents.AdornerManager.getRegisteredAdorner(
-        ElementsComponents.AdornerManager.RegisteredAdorners.STARTING_STYLE);
-    const adorner = this.adorn(config);
-    adorner.classList.add('starting-style');
-
-    const onClick = ((() => {
-                       const model = node.domModel().cssModel();
-                       if (adorner.isActive()) {
-                         model.forceStartingStyle(node, true);
-                       } else {
-                         model.forceStartingStyle(node, false);
-                       }
-                     }) as EventListener);
-
-    adorner.addInteraction(onClick, {
-      isToggle: true,
-      shouldPropagateOnKeydown: false,
-      ariaLabelDefault: i18nString(UIStrings.enableStartingStyle),
-      ariaLabelActive: i18nString(UIStrings.disableStartingStyle),
-    });
-
-    this.#adorners.add(adorner);
-  }
-
-  updateScrollAdorner(): void {
-    if (!isOpeningTag(this.tagTypeContext)) {
-      return;
-    }
-    const scrollAdorner =
-        this.#adorners.values().find(x => x.name === ElementsComponents.AdornerManager.RegisteredAdorners.SCROLL);
-    // Check if the node is scrollable, or if it's the <html> element and the document is scrollable
-    // because the top-level document (#document) doesn't have a corresponding tree element.
-    const needsAScrollAdorner = (this.node().nodeName() === 'HTML' && this.node().ownerDocument?.isScrollable()) ||
-        (this.node().nodeName() !== '#document' && this.node().isScrollable());
-    if (needsAScrollAdorner && !scrollAdorner) {
-      this.pushScrollAdorner();
-    } else if (!needsAScrollAdorner && scrollAdorner) {
-      this.removeAdorner(scrollAdorner);
+    const model = node.domModel().cssModel();
+    if (this.#startingStyleAdornerActive) {
+      model.forceStartingStyle(node, false);
+    } else {
+      model.forceStartingStyle(node, true);
     }
-  }
-
-  pushScrollAdorner(): void {
-    const config = ElementsComponents.AdornerManager.getRegisteredAdorner(
-        ElementsComponents.AdornerManager.RegisteredAdorners.SCROLL);
-    const adorner = this.adorn(config);
-    UI.Tooltip.Tooltip.install(adorner, i18nString(UIStrings.elementHasScrollableOverflow));
-    adorner.classList.add('scroll');
+    this.#startingStyleAdornerActive = !this.#startingStyleAdornerActive;
+    this.performUpdate();
   }
 }
 
@@ -3098,15 +2952,6 @@ export const ForbiddenClosingTagElements = new Set<string>([
 /** These tags we do not allow editing their tag name. **/
 export const EditTagBlocklist = new Set<string>(['html', 'head', 'body']);
 
-export function adornerComparator(adornerA: Adorners.Adorner.Adorner, adornerB: Adorners.Adorner.Adorner): number {
-  const compareCategories =
-      ElementsComponents.AdornerManager.compareAdornerNamesByCategory(adornerB.name, adornerB.name);
-  if (compareCategories === 0) {
-    return adornerA.name.localeCompare(adornerB.name);
-  }
-  return compareCategories;
-}
-
 export function convertUnicodeCharsToHTMLEntities(text: string): {
   text: string,
   entityRanges: TextUtils.TextRange.SourceRange[],