chrome-devtools-frontend 1.0.1556696 → 1.0.1559913

package/front_end/panels/common/AiCodeGenerationTeaser.ts

@@ -5,7 +5,9 @@
 import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as UI from '../../ui/legacy/legacy.js';
-import {html, render} from '../../ui/lit/lit.js';
+import {html, nothing, render} from '../../ui/lit/lit.js';
+
+import styles from './aiCodeGenerationTeaser.css.js';
 
 const UIStringsNotTranslate = {
   /**
@@ -20,23 +22,56 @@ const UIStringsNotTranslate = {
    * Text for teaser when generating suggestion.
    */
   generating: 'Generating... (esc to cancel)',
+  /**
+   * Text for teaser for discoverability.
+   */
+  writeACommentToGenerateCode: 'Write a comment to generate code',
 } as const;
 
 const lockedString = i18n.i18n.lockedString;
+const PROMOTION_ID = 'ai-code-generation';
+
+export enum AiCodeGenerationTeaserDisplayState {
+  TRIGGER = 'trigger',
+  DISCOVERY = 'discovery',
+  LOADING = 'loading',
+}
 
 export interface ViewInput {
-  loading: boolean;
+  displayState: AiCodeGenerationTeaserDisplayState;
 }
 
 export type View = (input: ViewInput, output: object, target: HTMLElement) => void;
 
 export const DEFAULT_VIEW: View = (input, _output, target) => {
-  const toGenerateCode = Host.Platform.isMac() ? lockedString(UIStringsNotTranslate.cmdItoGenerateCode) :
-                                                 lockedString(UIStringsNotTranslate.ctrlItoGenerateCode);
-  const teaserLabel = input.loading ? lockedString(UIStringsNotTranslate.generating) : toGenerateCode;
+  let teaserLabel;
+  switch (input.displayState) {
+    case AiCodeGenerationTeaserDisplayState.DISCOVERY: {
+      const newBadge = UI.UIUtils.maybeCreateNewBadge(PROMOTION_ID);
+      teaserLabel = newBadge ?
+          html`${lockedString(UIStringsNotTranslate.writeACommentToGenerateCode)} ${newBadge}` :
+          nothing;
+      break;
+    }
+
+    case AiCodeGenerationTeaserDisplayState.LOADING: {
+      teaserLabel = html`${lockedString(UIStringsNotTranslate.generating)}`;
+      break;
+    }
+
+    case AiCodeGenerationTeaserDisplayState.TRIGGER: {
+      const toGenerateCode = Host.Platform.isMac() ? lockedString(UIStringsNotTranslate.cmdItoGenerateCode) :
+                                                     lockedString(UIStringsNotTranslate.ctrlItoGenerateCode);
+      teaserLabel = html`${toGenerateCode}`;
+      break;
+    }
+  }
+
   // clang-format off
   render(
         html`
+          <style>${styles}</style>
+          <style>@scope to (devtools-widget > *) { ${UI.inspectorCommonStyles} }</style>
           <div class="ai-code-generation-teaser">
             &nbsp;${teaserLabel}
           </div>
@@ -45,10 +80,11 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
   // clang-format on
 };
 
+// TODO(b/448063927): Add "Dont show again" for discovery teaser.
 export class AiCodeGenerationTeaser extends UI.Widget.Widget {
   readonly #view: View;
 
-  #loading = false;
+  #displayState = AiCodeGenerationTeaserDisplayState.TRIGGER;
 
   constructor(view?: View) {
     super();
@@ -61,20 +97,20 @@ export class AiCodeGenerationTeaser extends UI.Widget.Widget {
     const output = {};
     this.#view(
         {
-          loading: this.#loading,
+          displayState: this.#displayState,
         },
         output, this.contentElement);
   }
 
-  get loading(): boolean {
-    return this.#loading;
+  get displayState(): AiCodeGenerationTeaserDisplayState {
+    return this.#displayState;
   }
 
-  set loading(loading: boolean) {
-    if (loading === this.#loading) {
+  set displayState(displayState: AiCodeGenerationTeaserDisplayState) {
+    if (displayState === this.#displayState) {
       return;
     }
-    this.#loading = loading;
+    this.#displayState = displayState;
     this.requestUpdate();
   }
 }

package/front_end/panels/common/aiCodeGenerationTeaser.css

@@ -0,0 +1,14 @@
+/*
+ * Copyright 2025 The Chromium Authors
+ * Use of this source code is governed by a BSD-style license that can be
+ * found in the LICENSE file.
+ */
+
+@scope to (devtools-widget > *) {
+    .ai-code-generation-teaser {
+        .new-badge {
+            font-style: normal;
+            display: inline-block;
+        }
+    }
+}

package/front_end/panels/common/common.ts

@@ -95,7 +95,7 @@ export class TypeToAllowDialog {
 }
 
 export {AiCodeCompletionTeaser} from './AiCodeCompletionTeaser.js';
-export {AiCodeGenerationTeaser} from './AiCodeGenerationTeaser.js';
+export * as AiCodeGenerationTeaser from './AiCodeGenerationTeaser.js';
 export {AnnotationManager} from './AnnotationManager.js';
 export {FreDialog} from './FreDialog.js';
 export {GdpSignUpDialog} from './GdpSignUpDialog.js';

package/front_end/panels/console/ConsoleViewMessage.ts

@@ -982,10 +982,11 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
       const renderResult = await UI.UIUtils.Renderer.render(node);
       if (renderResult) {
         this.selectableChildren.push(renderResult);
-        const resizeObserver = new ResizeObserver(() => {
+        // FIXME: this should not be needed once ConsoleViewMessage is rendering
+        // declaratively and the tree outline auto-resizes itself.
+        renderResult.element.addEventListener('dimensionschanged', () => {
           this.messageResized({data: renderResult.element});
         });
-        resizeObserver.observe(renderResult.element);
         result.appendChild(renderResult.element);
       } else {
         result.appendChild(this.formatParameterAsObject(remoteObject, false));
@@ -1185,7 +1186,7 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
   }
 
   matchesFilterText(filter: string): boolean {
-    const text = this.contentElement().deepTextContent();
+    const text = this.contentElement().deepTextContent() + this.message.messageText;
     return text.toLowerCase().includes(filter.toLowerCase());
   }
 

package/front_end/panels/console/consoleView.css

@@ -221,7 +221,7 @@
   --console-color-white: #fff;
 
   &:focus {
-    background-color: var(--sys-color-state-focus-highlight);
+    background-image: linear-gradient(to bottom, var(--sys-color-state-focus-highlight), var(--sys-color-state-focus-highlight));
   }
 }
 

package/front_end/panels/elements/CSSRuleValidator.ts

@@ -85,6 +85,20 @@ const UIStrings = {
    */
   flexGridContainerPropertyRuleFix:
       'Try setting the {PROPERTY_NAME} on the container element or use {ALTERNATIVE_PROPERTY_NAME} instead.',
+  /**
+   * @description The messages shown in the Style pane when the user hovers over a position-anchor declaration that has no affect on a non-anchor-positioned element.
+   * @example {relative} POSITION
+   */
+  invalidAnchorPositioning:
+      'An anchor was defined but the element was not anchor-positioned but positioned "{POSITION}".',
+  /**
+   * @description The messages shown in the Style pane when the user hovers over a position-anchor declaration that has no affect on a non-anchor-positioned element.
+   */
+  invalidAnchorPositioningFix: 'Set position to either "fixed" or "absolute".',
+  /**
+   * @description The messages shown in the Style pane when the user hovers over a position-anchor declaration that has no affect on hidden element.
+   */
+  unusedAnchorPositioning: 'An anchor was defined but the element is hidden.',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/elements/CSSRuleValidator.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -547,6 +561,29 @@ export class ZIndexValidator extends CSSRuleValidator {
   }
 }
 
+export class PositionAnchorValidator extends CSSRuleValidator {
+  constructor() {
+    super(['position-anchor']);
+  }
+
+  override getHint(propertyName: string, computedStyles?: Map<string, string>): Hint|undefined {
+    const position = computedStyles?.get('position') ?? 'static';
+    const display = computedStyles?.get('display');
+
+    if (position !== 'absolute' && position !== 'fixed') {
+      return new Hint(
+          i18nString(UIStrings.invalidAnchorPositioning, {POSITION: position}),
+          i18nString(UIStrings.invalidAnchorPositioningFix));
+    }
+
+    if (display === 'none') {
+      return new Hint(i18nString(UIStrings.unusedAnchorPositioning, {POSITION: position}), null);
+    }
+
+    return undefined;
+  }
+}
+
 /**
  * Validates if CSS width/height are having an effect on an element.
  * See "Applies to" in https://www.w3.org/TR/css-sizing-3/#propdef-width.
@@ -659,6 +696,7 @@ const CSS_RULE_VALIDATORS = [
   MulticolFlexGridValidator,
   PaddingValidator,
   PositionValidator,
+  PositionAnchorValidator,
   SizingValidator,
   ZIndexValidator,
 ];

package/front_end/panels/elements/ElementsTreeElement.ts

@@ -44,6 +44,7 @@ import * as Badges from '../../models/badges/badges.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 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';
@@ -275,6 +276,10 @@ const UIStrings = {
    */
   startAChat: 'Start a chat',
   /**
+   * @description Label of an adorner next to the html node in the Elements panel.
+   */
+  viewSourceCode: 'View source code',
+  /**
    * @description Context menu item in Elements panel to assess visibility of an element via AI.
    */
   assessVisibility: 'Assess visibility',
@@ -378,6 +383,7 @@ export interface ViewInput {
 
   showAdAdorner: boolean;
   showContainerAdorner: boolean;
+  containerType?: string;
   showFlexAdorner: boolean;
   showGridAdorner: boolean;
   showGridLanesAdorner: boolean;
@@ -386,6 +392,8 @@ export interface ViewInput {
   showTopLayerAdorner: boolean;
   isSubgrid: boolean;
 
+  showViewSourceAdorner: boolean;
+  showScrollAdorner: boolean;
   adorners?: Set<Adorners.Adorner.Adorner>;
   nodeInfo?: DocumentFragment;
   topLayerIndex: number;
@@ -399,6 +407,7 @@ export interface ViewInput {
   onMediaAdornerClick: (e: Event) => void;
   onPopoverAdornerClick: (e: Event) => void;
   onTopLayerAdornerClick: (e: Event) => void;
+  onViewSourceAdornerClick: () => void;
 }
 
 export interface ViewOutput {
@@ -429,6 +438,8 @@ 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 viewSourceAdornerConfig = ElementsComponents.AdornerManager.getRegisteredAdorner(
+      ElementsComponents.AdornerManager.RegisteredAdorners.VIEW_SOURCE);
   const containerAdornerConfig = ElementsComponents.AdornerManager.getRegisteredAdorner(
       ElementsComponents.AdornerManager.RegisteredAdorners.CONTAINER);
   const flexAdornerConfig =
@@ -445,9 +456,11 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
       ElementsComponents.AdornerManager.RegisteredAdorners.POPOVER);
   const topLayerAdornerConfig = ElementsComponents.AdornerManager.getRegisteredAdorner(
       ElementsComponents.AdornerManager.RegisteredAdorners.TOP_LAYER);
+  const scrollAdornerConfig = ElementsComponents.AdornerManager.getRegisteredAdorner(
+      ElementsComponents.AdornerManager.RegisteredAdorners.SCROLL);
   const hasAdorners = input.adorners?.size || input.showAdAdorner || input.showContainerAdorner ||
       input.showFlexAdorner || input.showGridAdorner || input.showGridLanesAdorner || input.showMediaAdorner ||
-      input.showPopoverAdorner || input.showTopLayerAdorner;
+      input.showPopoverAdorner || input.showTopLayerAdorner || input.showViewSourceAdorner || input.showScrollAdorner;
   // clang-format off
   render(html`
     <div ${ref(el => { output.contentElement = el as HTMLElement; })}>
@@ -463,6 +476,13 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
           ${adornerRef(input)}>
           <span>${adAdornerConfig.name}</span>
         </devtools-adorner>` : nothing}
+        ${input.showViewSourceAdorner ? html`<devtools-adorner
+          .data=${{name: viewSourceAdornerConfig.name, jslogContext: viewSourceAdornerConfig.name}}
+          aria-label=${i18nString(UIStrings.viewSourceCode)}
+          @click=${input.onViewSourceAdornerClick}
+          ${adornerRef(input)}>
+          <span>${viewSourceAdornerConfig.name}</span>
+        </devtools-adorner>` : nothing}
         ${input.showContainerAdorner ? html`<devtools-adorner
           class=clickable
           role=button
@@ -480,7 +500,10 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
             }
           }}
           ${adornerRef(input)}>
-          <span>${containerAdornerConfig.name}</span>
+          <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
@@ -602,6 +625,13 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
         ${repeat(Array.from((input.adorners ?? new Set()).values()).sort(adornerComparator), adorner => {
           return adorner;
         })}
+        ${input.showScrollAdorner ? html`<devtools-adorner
+          class="scroll"
+          .data=${{name: scrollAdornerConfig.name, jslogContext: scrollAdornerConfig.name}}
+          aria-label=${i18nString(UIStrings.elementHasScrollableOverflow)}
+          ${adornerRef(input)}>
+          <span>${scrollAdornerConfig.name}</span>
+        </devtools-adorner>` : nothing}
       </div>`: nothing}
     </div>
   `, target);
@@ -673,8 +703,6 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
       };
       void this.updateStyleAdorners();
 
-      void this.updateScrollAdorner();
-
       void this.#updateAdorners();
     }
     this.expandAllButtonElement = null;
@@ -695,34 +723,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 {
@@ -788,7 +788,8 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
           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(),
@@ -800,8 +801,13 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
           gridAdornerActive: this.#gridAdornerActive,
           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(),
           nodeInfo: this.#nodeInfo,
           topLayerIndex: this.node().topLayerIndex(),
+          onViewSourceAdornerClick: this.revealHTMLInSources.bind(this),
           onGutterClick: this.showContextMenu.bind(this),
           onAdornerAdded: adorner => {
             ElementsPanel.instance().registerAdorner(adorner);
@@ -1106,6 +1112,18 @@ 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);
+      const overlayModel = this.nodeInternal.domModel().overlayModel();
+      overlayModel.addEventListener(
+          SDK.OverlayModel.Events.PERSISTENT_CONTAINER_QUERY_OVERLAY_STATE_CHANGED,
+          this.#onPersistentContainerQueryOverlayStateChanged, this);
+      overlayModel.addEventListener(
+          SDK.OverlayModel.Events.PERSISTENT_FLEX_CONTAINER_OVERLAY_STATE_CHANGED,
+          this.#onPersistentFlexContainerOverlayStateChanged, this);
+      overlayModel.addEventListener(
+          SDK.OverlayModel.Events.PERSISTENT_GRID_OVERLAY_STATE_CHANGED, this.#onPersistentGridOverlayStateChanged,
+          this);
     }
   }
 
@@ -1117,6 +1135,51 @@ 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);
+    const overlayModel = this.nodeInternal.domModel().overlayModel();
+    overlayModel.removeEventListener(
+        SDK.OverlayModel.Events.PERSISTENT_CONTAINER_QUERY_OVERLAY_STATE_CHANGED,
+        this.#onPersistentContainerQueryOverlayStateChanged, this);
+    overlayModel.removeEventListener(
+        SDK.OverlayModel.Events.PERSISTENT_FLEX_CONTAINER_OVERLAY_STATE_CHANGED,
+        this.#onPersistentFlexContainerOverlayStateChanged, this);
+    overlayModel.removeEventListener(
+        SDK.OverlayModel.Events.PERSISTENT_GRID_OVERLAY_STATE_CHANGED, this.#onPersistentGridOverlayStateChanged, this);
+  }
+
+  #onScrollableFlagUpdated(): void {
+    void this.#updateAdorners();
+  }
+
+  #onPersistentContainerQueryOverlayStateChanged(
+      event: Common.EventTarget.EventTargetEvent<SDK.OverlayModel.ChangedNodeId>): void {
+    const {nodeId: eventNodeId, enabled} = event.data;
+    if (eventNodeId !== this.nodeInternal.id) {
+      return;
+    }
+    this.#containerAdornerActive = enabled;
+    this.performUpdate();
+  }
+
+  #onPersistentFlexContainerOverlayStateChanged(
+      event: Common.EventTarget.EventTargetEvent<SDK.OverlayModel.ChangedNodeId>): void {
+    const {nodeId: eventNodeId, enabled} = event.data;
+    if (eventNodeId !== this.nodeInternal.id) {
+      return;
+    }
+    this.#flexAdornerActive = enabled;
+    this.performUpdate();
+  }
+
+  #onPersistentGridOverlayStateChanged(event: Common.EventTarget.EventTargetEvent<SDK.OverlayModel.ChangedNodeId>):
+      void {
+    const {nodeId: eventNodeId, enabled} = event.data;
+    if (eventNodeId !== this.nodeInternal.id) {
+      return;
+    }
+    this.#gridAdornerActive = enabled;
+    this.performUpdate();
   }
 
   override onattach(): void {
@@ -1291,6 +1354,17 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     this.treeOutline && void this.treeOutline.showContextMenu(this, event);
   }
 
+  private revealHTMLInSources(): void {
+    const frameOwnerId = this.nodeInternal.frameOwnerFrameId();
+    if (frameOwnerId) {
+      const frame = SDK.FrameManager.FrameManager.instance().getFrame(frameOwnerId);
+      if (frame) {
+        const sourceCode = Workspace.Workspace.WorkspaceImpl.instance().uiSourceCodeForURL(frame.url);
+        void Common.Revealer.reveal(sourceCode);
+      }
+    }
+  }
+
   async populateTagContextMenu(contextMenu: UI.ContextMenu.ContextMenu, event: Event): Promise<void> {
     // Add attribute-related actions.
     const treeElement =
@@ -1463,7 +1537,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),
@@ -3029,30 +3103,6 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     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);
-    }
-  }
-
-  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');
-  }
 }
 
 export const InitialChildrenLimit = 500;

package/front_end/panels/elements/ElementsTreeOutline.ts

@@ -1526,7 +1526,6 @@ export class ElementsTreeOutline extends
     domModel.addEventListener(SDK.DOMModel.Events.DocumentUpdated, this.documentUpdated, this);
     domModel.addEventListener(SDK.DOMModel.Events.ChildNodeCountUpdated, this.childNodeCountUpdated, this);
     domModel.addEventListener(SDK.DOMModel.Events.DistributedNodesChanged, this.distributedNodesChanged, this);
-    domModel.addEventListener(SDK.DOMModel.Events.ScrollableFlagUpdated, this.scrollableFlagUpdated, this);
     domModel.addEventListener(
         SDK.DOMModel.Events.AffectedByStartingStylesFlagUpdated, this.affectedByStartingStylesFlagUpdated, this);
     domModel.addEventListener(SDK.DOMModel.Events.AdoptedStyleSheetsModified, this.adoptedStyleSheetsModified, this);
@@ -1542,7 +1541,6 @@ export class ElementsTreeOutline extends
     domModel.removeEventListener(SDK.DOMModel.Events.DocumentUpdated, this.documentUpdated, this);
     domModel.removeEventListener(SDK.DOMModel.Events.ChildNodeCountUpdated, this.childNodeCountUpdated, this);
     domModel.removeEventListener(SDK.DOMModel.Events.DistributedNodesChanged, this.distributedNodesChanged, this);
-    domModel.removeEventListener(SDK.DOMModel.Events.ScrollableFlagUpdated, this.scrollableFlagUpdated, this);
     domModel.removeEventListener(
         SDK.DOMModel.Events.AffectedByStartingStylesFlagUpdated, this.affectedByStartingStylesFlagUpdated, this);
     domModel.removeEventListener(SDK.DOMModel.Events.AdoptedStyleSheetsModified, this.adoptedStyleSheetsModified, this);
@@ -2020,21 +2018,6 @@ export class ElementsTreeOutline extends
     }
   }
 
-  private scrollableFlagUpdated(event: Common.EventTarget.EventTargetEvent<{node: SDK.DOMModel.DOMNode}>): void {
-    let {node} = event.data;
-    if (node.nodeName() === '#document') {
-      // We show the scroll badge of the document on the <html> element.
-      if (!node.ownerDocument?.documentElement) {
-        return;
-      }
-      node = node.ownerDocument.documentElement;
-    }
-    const treeElement = this.treeElementByNode.get(node);
-    if (treeElement && isOpeningTag(treeElement.tagTypeContext)) {
-      void treeElement.updateScrollAdorner();
-    }
-  }
-
   private affectedByStartingStylesFlagUpdated(event: Common.EventTarget.EventTargetEvent<{node: SDK.DOMModel.DOMNode}>):
       void {
     const {node} = event.data;

package/front_end/panels/elements/ElementsTreeOutlineRenderer.ts

@@ -33,7 +33,7 @@
  */
 
 import * as SDK from '../../core/sdk/sdk.js';
-import type * as UI from '../../ui/legacy/legacy.js';
+import * as UI from '../../ui/legacy/legacy.js';
 
 import {ElementsTreeOutline} from './ElementsTreeOutline.js';
 
@@ -75,6 +75,12 @@ export class Renderer implements UI.UIUtils.Renderer {
     if (options?.expand) {
       treeOutline.firstChild()?.expand();
     }
+    const dispatchDimensionChange = (): void => {
+      treeOutline.element.dispatchEvent(new CustomEvent('dimensionschanged'));
+    };
+    treeOutline.addEventListener(UI.TreeOutline.Events.ElementAttached, dispatchDimensionChange);
+    treeOutline.addEventListener(UI.TreeOutline.Events.ElementExpanded, dispatchDimensionChange);
+    treeOutline.addEventListener(UI.TreeOutline.Events.ElementCollapsed, dispatchDimensionChange);
     return {
       element: treeOutline.element,
       forceSelect: treeOutline.forceSelect.bind(treeOutline),

package/front_end/panels/elements/StylesSidebarPane.ts

@@ -482,6 +482,10 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
 
   private onFilterChanged(event: Common.EventTarget.EventTargetEvent<string>): void {
     const regex = event.data ? new RegExp(Platform.StringUtilities.escapeForRegExp(event.data), 'i') : null;
+    this.setFilter(regex);
+  }
+
+  setFilter(regex: RegExp|null): void {
     this.lastFilterChange = Date.now();
     this.#filterRegex = regex;
     this.updateFilter();
@@ -1036,6 +1040,7 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
     let sectionIdx = 0;
     let lastParentNode: SDK.DOMModel.DOMNode|null = null;
 
+    let lastLayerParent: SectionBlock|undefined;
     let lastLayers: SDK.CSSLayer.CSSLayer[]|null = null;
     let sawLayers = false;
 
@@ -1046,6 +1051,7 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
         if ((layers.length || lastLayers) && lastLayers !== layers) {
           const block = SectionBlock.createLayerBlock(parentRule);
           blocks.push(block);
+          lastLayerParent?.childBlocks.push(block);
           sawLayers = true;
           lastLayers = layers;
         }
@@ -1055,12 +1061,12 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
     // We disable the layer widget initially. If we see a layer in
     // the matched styles we reenable the button.
     LayersWidget.ButtonProvider.instance().item().setVisible(false);
-
     for (const style of matchedStyles.nodeStyles()) {
       const parentNode = matchedStyles.isInherited(style) ? matchedStyles.nodeForStyle(style) : null;
       if (parentNode && parentNode !== lastParentNode) {
         lastParentNode = parentNode;
         const block = await SectionBlock.createInheritedNodeBlock(lastParentNode);
+        lastLayerParent = block;
         blocks.push(block);
       }
 
@@ -1078,6 +1084,7 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
         });
       }
     }
+    lastLayerParent = undefined;
 
     const customHighlightPseudoRulesets: Array<{
       highlightName: string | null,
@@ -1130,9 +1137,11 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
           if (parentNode) {
             const block =
                 await SectionBlock.createInheritedPseudoTypeBlock(pseudo.pseudoType, pseudo.highlightName, parentNode);
+            lastLayerParent = block;
             blocks.push(block);
           } else {
             const block = SectionBlock.createPseudoTypeBlock(pseudo.pseudoType, pseudo.highlightName);
+            lastLayerParent = block;
             blocks.push(block);
           }
         }
@@ -1503,6 +1512,7 @@ const MAX_LINK_LENGTH = 23;
 export class SectionBlock {
   readonly #titleElement: Element|null;
   sections: StylePropertiesSection[];
+  childBlocks: SectionBlock[] = [];
   #expanded = false;
   #icon: Icon|undefined;
   constructor(titleElement: Element|null, expandable?: boolean, expandedByDefault?: boolean) {
@@ -1634,14 +1644,15 @@ export class SectionBlock {
   }
 
   updateFilter(): number {
-    let hasAnyVisibleSection = false;
     let numVisibleSections = 0;
+    for (const childBlock of this.childBlocks) {
+      numVisibleSections += childBlock.updateFilter();
+    }
     for (const section of this.sections) {
       numVisibleSections += section.updateFilter() ? 1 : 0;
-      hasAnyVisibleSection = section.updateFilter() || hasAnyVisibleSection;
     }
     if (this.#titleElement) {
-      this.#titleElement.classList.toggle('hidden', !hasAnyVisibleSection);
+      this.#titleElement.classList.toggle('hidden', numVisibleSections === 0);
     }
     return numVisibleSections;
   }