chrome-devtools-frontend 1.0.1578729 → 1.0.1581449

package/front_end/panels/elements/ElementsTreeElement.ts

@@ -34,6 +34,7 @@
  */
 
 import '../../ui/components/adorners/adorners.js';
+import '../../ui/components/buttons/buttons.js';
 
 import * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';
@@ -50,7 +51,6 @@ 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 * 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';
@@ -417,11 +417,20 @@ export interface ViewInput {
   showStartingStyleAdorner: boolean;
   startingStyleAdornerActive: boolean;
   onStartingStyleAdornerClick: (e: Event) => void;
+
+  isHovered: boolean;
+  isSelected: boolean;
+  showAiButton: boolean;
+  aiButtonTitle?: string;
+  onAiButtonClick: (e: Event) => void;
+
+  decorations: Decoration[];
+  descendantDecorations: Decoration[];
+  decorationsTooltip: string;
+  indent: number;
 }
 
 export interface ViewOutput {
-  gutterContainer?: HTMLElement;
-  decorationsElement?: HTMLElement;
   contentElement?: HTMLElement;
 }
 
@@ -443,6 +452,11 @@ export function adornerRef(): DirectiveResult<typeof Lit.Directives.RefDirective
   });
 }
 
+export interface Decoration {
+  title: string;
+  color: string;
+}
+
 function handleAdornerKeydown(cb: (event: Event) => void): (event: KeyboardEvent) => void {
   return (event: KeyboardEvent) => {
     if (event.code === 'Enter' || event.code === 'Space') {
@@ -458,13 +472,27 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
       input.showGridAdorner || input.showGridLanesAdorner || input.showMediaAdorner || input.showPopoverAdorner ||
       input.showTopLayerAdorner || input.showViewSourceAdorner || input.showScrollAdorner ||
       input.showScrollSnapAdorner || input.showSlotAdorner || input.showStartingStyleAdorner;
+  const gutterContainerClasses = {
+    'has-decorations': input.decorations.length || input.descendantDecorations.length,
+    'gutter-container': true,
+  };
   // clang-format off
   render(html`
     <div ${ref(el => { output.contentElement = el as HTMLElement; })}>
       ${input.nodeInfo ? html`<span class="highlight">${input.nodeInfo}</span>` : nothing}
-      <div class="gutter-container" @click=${input.onGutterClick} ${ref(el => { output.gutterContainer = el as HTMLElement; })}>
+      ${input.isHovered || input.isSelected ? html`
+        <div class="selection fill" style=${`margin-left: ${-input.indent}px`}></div>
+      ` : nothing}
+      <div class=${Lit.Directives.classMap(gutterContainerClasses)}
+           style="left: ${-input.indent}px"
+           @click=${input.onGutterClick}>
         <devtools-icon name="dots-horizontal"></devtools-icon>
-        <div class="hidden" ${ref(el => { output.decorationsElement = el as HTMLElement; })}></div>
+        ${input.decorations.length || input.descendantDecorations.length ? html`
+        <div class="elements-gutter-decoration-container"
+             title=${input.decorationsTooltip}>
+             ${input.decorations.map(d => html`<div class="elements-gutter-decoration" style="--decoration-color: ${d.color}"></div>`)}
+             ${input.descendantDecorations.map(d => html`<div class="elements-gutter-decoration elements-has-decorated-children" style="--decoration-color: ${d.color}"></div>`)}
+        </div>` : nothing}
       </div>
       ${hasAdorners ? html`<div class="adorner-container ${!hasAdorners ? 'hidden' : ''}">
         ${input.showAdAdorner ? html`<devtools-adorner
@@ -630,6 +658,20 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
           <span>${ElementsComponents.AdornerManager.RegisteredAdorners.SCROLL_SNAP}</span>
         </devtools-adorner>` : nothing}
       </div>`: nothing}
+      ${input.isSelected ? html`
+        <span class="selected-hint" title=${i18nString(UIStrings.useSInTheConsoleToReferToThis, {PH1: '$0'})} aria-hidden="true"></span>
+      ` : nothing}
+      ${input.showAiButton ? html`
+        <span class="ai-button-container">
+          <devtools-floating-button
+            icon-name=${AIAssistance.AiUtils.getIconName()}
+            title=${input.aiButtonTitle || ''}
+            jslogcontext="ask-ai"
+            @click=${input.onAiButtonClick}
+            @mousedown=${(e: Event) => e.stopPropagation()}>
+          </devtools-floating-button>
+        </span>
+      ` : nothing}
     </div>
   `, target);
   // clang-format on
@@ -640,8 +682,6 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
   override treeOutline: ElementsTreeOutline|null;
 
   // Handled by the view output for now.
-  gutterContainer!: HTMLElement;
-  decorationsElement!: HTMLElement;
   contentElement!: HTMLElement;
 
   private searchQuery: string|null;
@@ -652,9 +692,6 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
   private editing: EditorHandles|null;
   private htmlEditElement?: HTMLElement;
   expandAllButtonElement: UI.TreeOutline.TreeElement|null;
-  selectionElement?: HTMLDivElement;
-  private hintElement?: HTMLElement;
-  private aiButtonContainer?: HTMLElement;
   #elementIssues = new Map<string, IssuesManager.Issue.Issue>();
   #nodeElementToIssue = new Map<Element, IssuesManager.Issue.Issue[]>();
   #highlights: Range[] = [];
@@ -672,6 +709,10 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
   #startingStyleAdornerActive = false;
   #layout: SDK.CSSModel.LayoutProperties|null = null;
 
+  #decorations: Decoration[] = [];
+  #descendantDecorations: Decoration[] = [];
+  #decorationsTooltip = '';
+
   constructor(node: SDK.DOMModel.DOMNode, isClosingTag?: boolean) {
     // The title will be updated in onattach.
     super();
@@ -797,6 +838,10 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
           showScrollAdorner: ((this.node().nodeName() === 'HTML' && this.node().ownerDocument?.isScrollable()) ||
                               (this.node().nodeName() !== '#document' && this.node().isScrollable())) &&
               !this.isClosingTag(),
+          decorations: this.#decorations,
+          descendantDecorations: this.expanded ? [] : this.#descendantDecorations,
+          decorationsTooltip: this.#decorationsTooltip,
+          indent: this.computeLeftIndent(),
           showScrollSnapAdorner: Boolean(this.#layout?.hasScroll) && !this.isClosingTag(),
           scrollSnapAdornerActive: this.#scrollSnapAdornerActive,
           showSlotAdorner: Boolean(this.nodeInternal.assignedSlot) && !this.isClosingTag(),
@@ -827,6 +872,21 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
             }
             this.treeOutline.revealInTopLayer(this.node());
           },
+          isHovered: this.#hovered,
+          isSelected: this.selected,
+          showAiButton: Boolean(this.#hovered || this.selected) && this.node().nodeType() === Node.ELEMENT_NODE &&
+              UI.ActionRegistry.ActionRegistry.instance().hasAction('freestyler.elements-floating-button'),
+          aiButtonTitle: UI.ActionRegistry.ActionRegistry.instance().hasAction('freestyler.elements-floating-button') ?
+              UI.ActionRegistry.ActionRegistry.instance().getAction('freestyler.elements-floating-button').title() :
+              undefined,
+          onAiButtonClick: (ev: Event) => {
+            ev.stopPropagation();
+            this.select(true, false);
+            const action = UI.ActionRegistry.ActionRegistry.instance().getAction('freestyler.elements-floating-button');
+            if (action) {
+              void action.execute();
+            }
+          },
         },
         this, this.listItemElement);
   }
@@ -962,22 +1022,15 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
       return;
     }
 
-    if (isHovered && !this.aiButtonContainer) {
-      this.createAiButton();
-    } else if (!isHovered && this.aiButtonContainer) {
-      this.aiButtonContainer.remove();
-      delete this.aiButtonContainer;
-    }
-
     this.#hovered = isHovered;
 
     if (this.listItemElement) {
       if (isHovered) {
-        this.createSelection();
         this.listItemElement.classList.add('hovered');
       } else {
         this.listItemElement.classList.remove('hovered');
       }
+      this.performUpdate();
     }
   }
 
@@ -1043,54 +1096,6 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     this.#expandedChildrenLimit = expandedChildrenLimit;
   }
 
-  private createSelection(): void {
-    const contentElement = this.contentElement;
-    if (!contentElement) {
-      return;
-    }
-
-    if (!this.selectionElement) {
-      this.selectionElement = document.createElement('div');
-      this.selectionElement.className = 'selection fill';
-      this.selectionElement.style.setProperty('margin-left', (-this.computeLeftIndent()) + 'px');
-      contentElement.prepend(this.selectionElement);
-    }
-  }
-
-  private createHint(): void {
-    if (this.contentElement && !this.hintElement) {
-      this.hintElement = this.contentElement.createChild('span', 'selected-hint');
-      const selectedElementCommand = '$0';
-      UI.Tooltip.Tooltip.install(
-          this.hintElement, i18nString(UIStrings.useSInTheConsoleToReferToThis, {PH1: selectedElementCommand}));
-      UI.ARIAUtils.setHidden(this.hintElement, true);
-    }
-  }
-
-  private createAiButton(): void {
-    const isElementNode = this.node().nodeType() === Node.ELEMENT_NODE;
-    if (!isElementNode ||
-        !UI.ActionRegistry.ActionRegistry.instance().hasAction('freestyler.elements-floating-button')) {
-      return;
-    }
-
-    const action = UI.ActionRegistry.ActionRegistry.instance().getAction('freestyler.elements-floating-button');
-    if (this.contentElement && !this.aiButtonContainer) {
-      this.aiButtonContainer = this.contentElement.createChild('span', 'ai-button-container');
-      const floatingButton =
-          Buttons.FloatingButton.create(AIAssistance.AiUtils.getIconName(), action.title(), 'ask-ai');
-      floatingButton.addEventListener('click', ev => {
-        ev.stopPropagation();
-        this.select(true, false);
-        void action.execute();
-      }, {capture: true});
-      floatingButton.addEventListener('mousedown', ev => {
-        ev.stopPropagation();
-      }, {capture: true});
-      this.aiButtonContainer.appendChild(floatingButton);
-    }
-  }
-
   override onbind(): void {
     this.performUpdate();
     if (this.treeOutline && !this.isClosingTag()) {
@@ -1156,6 +1161,14 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
           onPopoverAdornerClick: () => {},
           onScrollSnapAdornerClick: () => {},
           onTopLayerAdornerClick: () => {},
+          isHovered: false,
+          isSelected: false,
+          showAiButton: false,
+          onAiButtonClick: () => {},
+          decorations: [],
+          descendantDecorations: [],
+          decorationsTooltip: '',
+          indent: 0,
         },
         this, this.listItemElement);
 
@@ -1219,8 +1232,8 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
 
   override onattach(): void {
     if (this.#hovered) {
-      this.createSelection();
       this.listItemElement.classList.add('hovered');
+      this.performUpdate();
     }
 
     this.updateTitle();
@@ -1278,8 +1291,7 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
       this.nodeInternal.highlight();
       Host.userMetrics.actionTaken(Host.UserMetrics.Action.ChangeInspectedNodeInElementsPanel);
     }
-    this.createSelection();
-    this.createHint();
+    this.performUpdate();
     this.treeOutline.suppressRevealAndSelect = false;
     return true;
   }
@@ -2252,10 +2264,6 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     // fixme: make it clear that `this.title = x` is a setter with significant side effects
     this.title = this.contentElement;
     this.updateDecorations();
-    if (this.selected) {
-      this.createSelection();
-      this.createHint();
-    }
 
     // If there is an issue with this node, make sure to update it.
     for (const issue of this.#elementIssues.values()) {
@@ -2278,10 +2286,6 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
   }
 
   updateDecorations(): void {
-    const indent = this.computeLeftIndent();
-    this.gutterContainer.style.left = (-indent) + 'px';
-    this.listItemElement.style.setProperty('--indent', indent + 'px');
-
     if (this.isClosingTag()) {
       return;
     }
@@ -2339,60 +2343,27 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     return Promise.all(promises).then(updateDecorationsUI.bind(this));
 
     function updateDecorationsUI(this: ElementsTreeElement): void {
-      this.decorationsElement.removeChildren();
-      this.decorationsElement.classList.add('hidden');
-      this.gutterContainer.classList.toggle(
-          'has-decorations', Boolean(decorations.length || descendantDecorations.length));
-      UI.ARIAUtils.setLabel(this.decorationsElement, '');
+      this.#decorations = decorations;
+      this.#descendantDecorations = descendantDecorations;
 
       if (!decorations.length && !descendantDecorations.length) {
+        this.#decorationsTooltip = '';
+        this.performUpdate();
         return;
       }
 
-      const colors = new Set<string>();
-      const titles = document.createElement('div');
-
+      const tooltip: string[] = [];
       for (const decoration of decorations) {
-        const titleElement = titles.createChild('div');
-        titleElement.textContent = decoration.title;
-        colors.add(decoration.color);
+        tooltip.push(decoration.title);
       }
-      if (this.expanded && !decorations.length) {
-        return;
-      }
-
-      const descendantColors = new Set<string>();
-      if (descendantDecorations.length) {
-        let element = titles.createChild('div');
-        element.textContent = i18nString(UIStrings.children);
+      if (!this.expanded && descendantDecorations.length) {
+        tooltip.push(i18nString(UIStrings.children));
         for (const decoration of descendantDecorations) {
-          element = titles.createChild('div');
-          element.style.marginLeft = '15px';
-          element.textContent = decoration.title;
-          descendantColors.add(decoration.color);
-        }
-      }
-
-      let offset = 0;
-      processColors.call(this, colors, 'elements-gutter-decoration');
-      if (!this.expanded) {
-        processColors.call(this, descendantColors, 'elements-gutter-decoration elements-has-decorated-children');
-      }
-      UI.Tooltip.Tooltip.install(this.decorationsElement, titles.textContent);
-      UI.ARIAUtils.setLabel(this.decorationsElement, titles.textContent || '');
-
-      function processColors(this: ElementsTreeElement, colors: Set<string>, className: string): void {
-        for (const color of colors) {
-          const child = this.decorationsElement.createChild('div', className);
-          this.decorationsElement.classList.remove('hidden');
-          child.style.backgroundColor = color;
-          child.style.borderColor = color;
-          if (offset) {
-            child.style.marginLeft = offset + 'px';
-          }
-          offset += 3;
+          tooltip.push(decoration.title);
         }
       }
+      this.#decorationsTooltip = tooltip.join('\n');
+      this.performUpdate();
     }
   }
 

package/front_end/panels/elements/ElementsTreeOutline.ts

@@ -47,7 +47,7 @@ import * as UI from '../../ui/legacy/legacy.js';
 import {html, nothing, render} from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
-import {AdoptedStyleSheetTreeElement} from './AdoptedStyleSheetTreeElement.js';
+import {AdoptedStyleSheetSetTreeElement, AdoptedStyleSheetTreeElement} from './AdoptedStyleSheetTreeElement.js';
 import {getElementIssueDetails} from './ElementIssueUtils.js';
 import {ElementsPanel} from './ElementsPanel.js';
 import {ElementsTreeElement, InitialChildrenLimit, isOpeningTag} from './ElementsTreeElement.js';
@@ -83,6 +83,7 @@ const elementsTreeOutlineByDOMModel = new WeakMap<SDK.DOMModel.DOMModel, Element
 const populatedTreeElements = new WeakSet<ElementsTreeElement>();
 
 export type View = typeof DEFAULT_VIEW;
+export {elementsTreeOutlineStyles};
 
 interface ViewInput {
   omitRootDOMNode: boolean;
@@ -916,15 +917,21 @@ export class ElementsTreeOutline extends
   }
 
   highlightAdoptedStyleSheet(adoptedStyleSheet: SDK.DOMModel.AdoptedStyleSheet): void {
-    const parentNode = !this.includeRootDOMNode && adoptedStyleSheet.parent === this.rootDOMNode && this.rootDOMNode ?
+    const parentDOMNode =
+        !this.includeRootDOMNode && adoptedStyleSheet.parent === this.rootDOMNode && this.rootDOMNode ?
         this.rootElement() :
         this.createTreeElementFor(adoptedStyleSheet.parent);
-    if (!parentNode) {
+    if (!parentDOMNode) {
+      return;
+    }
+    const parentNode = parentDOMNode.firstChild();
+    if (!(parentNode && parentNode instanceof AdoptedStyleSheetSetTreeElement)) {
       return;
     }
 
     for (const child of parentNode.children()) {
       if (child instanceof AdoptedStyleSheetTreeElement && child.adoptedStyleSheet === adoptedStyleSheet) {
+        parentNode.expand();
         child.highlight();
         return;
       }
@@ -979,8 +986,8 @@ export class ElementsTreeOutline extends
     this.dispatchEventToListeners(ElementsTreeOutline.Events.ElementsTreeUpdated, nodes);
   }
 
-  findTreeElement(node: SDK.DOMModel.DOMNode|SDK.DOMModel.AdoptedStyleSheet): ElementsTreeElement|null {
-    if (node instanceof SDK.DOMModel.AdoptedStyleSheet) {
+  findTreeElement(node: SDK.DOMModel.DOMNode|SDK.DOMModel.AdoptedStyleSheet[]): ElementsTreeElement|null {
+    if (node instanceof Array) {
       return null;
     }
     let treeElement = this.lookUpTreeElement(node);
@@ -1767,10 +1774,10 @@ export class ElementsTreeOutline extends
     }
   }
 
-  private createElementTreeElement(node: SDK.DOMModel.DOMNode|SDK.DOMModel.AdoptedStyleSheet, isClosingTag?: boolean):
+  private createElementTreeElement(node: SDK.DOMModel.DOMNode|SDK.DOMModel.AdoptedStyleSheet[], isClosingTag?: boolean):
       UI.TreeOutline.TreeElement {
-    if (node instanceof SDK.DOMModel.AdoptedStyleSheet) {
-      return new AdoptedStyleSheetTreeElement(node);
+    if (node instanceof Array) {
+      return new AdoptedStyleSheetSetTreeElement(node);
     }
     const treeElement = new ElementsTreeElement(node, isClosingTag);
     treeElement.setExpandable(!isClosingTag && this.hasVisibleChildren(node));
@@ -1799,8 +1806,12 @@ export class ElementsTreeOutline extends
     return treeElement.childAt(index) as ElementsTreeElement;
   }
 
-  private visibleChildren(node: SDK.DOMModel.DOMNode): Array<SDK.DOMModel.DOMNode|SDK.DOMModel.AdoptedStyleSheet> {
-    let visibleChildren = [...node.adoptedStyleSheetsForNode, ...ElementsTreeElement.visibleShadowRoots(node)];
+  private visibleChildren(node: SDK.DOMModel.DOMNode): Array<SDK.DOMModel.DOMNode|SDK.DOMModel.AdoptedStyleSheet[]> {
+    const visibleChildren: Array<SDK.DOMModel.DOMNode|SDK.DOMModel.AdoptedStyleSheet[]> = [];
+    if (node.adoptedStyleSheetsForNode.length) {
+      visibleChildren.push(node.adoptedStyleSheetsForNode);
+    }
+    visibleChildren.push(...ElementsTreeElement.visibleShadowRoots(node));
 
     const contentDocument = node.contentDocument();
     if (contentDocument) {
@@ -1837,7 +1848,7 @@ export class ElementsTreeOutline extends
       if (!this.showHTMLCommentsSetting.get()) {
         children = children.filter(n => n.nodeType() !== Node.COMMENT_NODE);
       }
-      visibleChildren = visibleChildren.concat(children);
+      visibleChildren.push(...children);
     }
 
     const afterPseudoElement = node.afterPseudoElement();
@@ -1926,7 +1937,7 @@ export class ElementsTreeOutline extends
   }
 
   insertChildElement(
-      treeElement: ElementsTreeElement|TopLayerContainer, child: SDK.DOMModel.DOMNode|SDK.DOMModel.AdoptedStyleSheet,
+      treeElement: ElementsTreeElement|TopLayerContainer, child: SDK.DOMModel.DOMNode|SDK.DOMModel.AdoptedStyleSheet[],
       index: number, isClosingTag?: boolean): UI.TreeOutline.TreeElement {
     const newElement = this.createElementTreeElement(child, isClosingTag);
     treeElement.insertChild(newElement, index);
@@ -1956,12 +1967,12 @@ export class ElementsTreeOutline extends
 
     const node = treeElement.node();
     const visibleChildren = this.visibleChildren(node);
-    const visibleChildrenSet = new Set<SDK.DOMModel.DOMNode|SDK.DOMModel.AdoptedStyleSheet>(visibleChildren);
+    const visibleChildrenSet = new Set<SDK.DOMModel.DOMNode|SDK.DOMModel.AdoptedStyleSheet[]>(visibleChildren);
 
     // Remove any tree elements that no longer have this node as their parent and save
     // all existing elements that could be reused. This also removes closing tag element.
-    const existingTreeElements =
-        new Map<SDK.DOMModel.DOMNode|SDK.DOMModel.AdoptedStyleSheet, UI.TreeOutline.TreeElement&ElementsTreeElement>();
+    const existingTreeElements = new Map<
+        SDK.DOMModel.DOMNode|SDK.DOMModel.AdoptedStyleSheet[], UI.TreeOutline.TreeElement&ElementsTreeElement>();
     for (let i = treeElement.childCount() - 1; i >= 0; --i) {
       const existingTreeElement = treeElement.childAt(i);
       if (!(existingTreeElement instanceof ElementsTreeElement)) {

package/front_end/panels/elements/MetricsSidebarPane.ts

@@ -33,11 +33,11 @@
 import * as Common from '../../core/common/common.js';
 import * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
+import type * as ComputedStyle from '../../models/computed_style/computed_style.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import {Directives, html, type LitTemplate, nothing, render} from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
-import type {ComputedStyleModel} from './ComputedStyleModel.js';
 import {ElementsSidebarPane} from './ElementsSidebarPane.js';
 import metricsSidebarPaneStyles from './metricsSidebarPane.css.js';
 
@@ -190,7 +190,7 @@ export class MetricsSidebarPane extends ElementsSidebarPane {
   private isEditingMetrics?: boolean;
   private view: View;
 
-  constructor(computedStyleModel: ComputedStyleModel, view = DEFAULT_VIEW) {
+  constructor(computedStyleModel: ComputedStyle.ComputedStyleModel.ComputedStyleModel, view = DEFAULT_VIEW) {
     super(computedStyleModel, {jslog: `${VisualLogging.pane('styles-metrics')}`});
     this.registerRequiredCSS(metricsSidebarPaneStyles);
 

package/front_end/panels/elements/PlatformFontsWidget.ts

@@ -4,10 +4,10 @@
 
 import * as i18n from '../../core/i18n/i18n.js';
 import type * as Protocol from '../../generated/protocol.js';
+import * as ComputedStyle from '../../models/computed_style/computed_style.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import {html, render} from '../../ui/lit/lit.js';
 
-import {type ComputedStyleModel, Events as ComputedStyleModelEvents} from './ComputedStyleModel.js';
 import platformFontsWidgetStyles from './platformFontsWidget.css.js';
 
 const UIStrings = {
@@ -78,17 +78,19 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
 };
 
 export class PlatformFontsWidget extends UI.Widget.VBox {
-  private readonly sharedModel: ComputedStyleModel;
+  private readonly sharedModel: ComputedStyle.ComputedStyleModel.ComputedStyleModel;
   readonly #view: View;
 
-  constructor(sharedModel: ComputedStyleModel, view: View = DEFAULT_VIEW) {
+  constructor(sharedModel: ComputedStyle.ComputedStyleModel.ComputedStyleModel, view: View = DEFAULT_VIEW) {
     super({useShadowDom: true});
     this.#view = view;
     this.registerRequiredCSS(platformFontsWidgetStyles);
 
     this.sharedModel = sharedModel;
-    this.sharedModel.addEventListener(ComputedStyleModelEvents.CSS_MODEL_CHANGED, this.requestUpdate, this);
-    this.sharedModel.addEventListener(ComputedStyleModelEvents.COMPUTED_STYLE_CHANGED, this.requestUpdate, this);
+    this.sharedModel.addEventListener(
+        ComputedStyle.ComputedStyleModel.Events.CSS_MODEL_CHANGED, this.requestUpdate, this);
+    this.sharedModel.addEventListener(
+        ComputedStyle.ComputedStyleModel.Events.COMPUTED_STYLE_CHANGED, this.requestUpdate, this);
   }
 
   override async performUpdate(): Promise<void> {

package/front_end/panels/elements/PropertiesWidget.ts

@@ -189,14 +189,11 @@ export class PropertiesWidget extends UI.Widget.VBox {
       }
 
       const treeElement = this.treeOutline.rootElement();
-      let {properties} = await SDK.RemoteObject.RemoteObject.loadFromObjectPerProto(object, true /* generatePreview */);
       treeElement.removeChildren();
-      if (properties === null) {
-        properties = [];
-      }
+      const root = new ObjectUI.ObjectPropertiesSection.ObjectTree(
+          object, ObjectUI.ObjectPropertiesSection.ObjectPropertiesMode.OWN_AND_INTERNAL_AND_INHERITED);
       ObjectUI.ObjectPropertiesSection.ObjectPropertyTreeElement.populateWithProperties(
-          treeElement, {properties: properties.map(p => new ObjectUI.ObjectPropertiesSection.ObjectTreeNode(p))},
-          true /* skipProto */, true /* skipGettersAndSetters */);
+          treeElement, await root.populateChildrenIfNeeded(), true /* skipProto */, true /* skipGettersAndSetters */);
       this.internalFilterProperties();
     }
     this.#view(

package/front_end/panels/elements/StylesSidebarPane.ts

@@ -43,6 +43,7 @@ import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Protocol from '../../generated/protocol.js';
 import * as Bindings from '../../models/bindings/bindings.js';
+import type * as ComputedStyle from '../../models/computed_style/computed_style.js';
 import * as TextUtils from '../../models/text_utils/text_utils.js';
 import {createIcon, Icon} from '../../ui/kit/kit.js';
 import * as InlineEditor from '../../ui/legacy/components/inline_editor/inline_editor.js';
@@ -52,7 +53,6 @@ import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 import * as PanelsCommon from '../common/common.js';
 
 import * as ElementsComponents from './components/components.js';
-import type {ComputedStyleModel, CSSModelChangedEvent} from './ComputedStyleModel.js';
 import {ElementsPanel} from './ElementsPanel.js';
 import {ElementsSidebarPane} from './ElementsSidebarPane.js';
 import {ImagePreviewPopover} from './ImagePreviewPopover.js';
@@ -204,7 +204,7 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
   #updateAbortController?: AbortController;
   #updateComputedStylesAbortController?: AbortController;
 
-  constructor(computedStyleModel: ComputedStyleModel) {
+  constructor(computedStyleModel: ComputedStyle.ComputedStyleModel.ComputedStyleModel) {
     super(computedStyleModel, {delegatesFocus: true});
     this.setMinimumSize(96, 26);
     this.registerRequiredCSS(stylesSidebarPaneStyles);
@@ -729,7 +729,8 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
     }
   }
 
-  override onCSSModelChanged(event: Common.EventTarget.EventTargetEvent<CSSModelChangedEvent>): void {
+  override onCSSModelChanged(
+      event: Common.EventTarget.EventTargetEvent<ComputedStyle.ComputedStyleModel.CSSModelChangedEvent>): void {
     const edit = event?.data && 'edit' in event.data ? event.data.edit : null;
     if (edit) {
       for (const section of this.allSections()) {

package/front_end/panels/elements/elements.ts

@@ -4,10 +4,11 @@
 
 import './InspectElementModeController.js';
 import './ColorSwatchPopoverIcon.js';
-import './ComputedStyleModel.js';
+
 import './DOMPath.js';
 import './ElementsSidebarPane.js';
 import './ElementsTreeElement.js';
+import './AdoptedStyleSheetTreeElement.js';
 import './TopLayerContainer.js';
 import './ElementsTreeOutline.js';
 import './EventListenersWidget.js';
@@ -30,9 +31,9 @@ import './AccessibilityTreeView.js';
 
 import * as AccessibilityTreeUtils from './AccessibilityTreeUtils.js';
 import * as AccessibilityTreeView from './AccessibilityTreeView.js';
+import * as AdoptedStyleSheetTreeElement from './AdoptedStyleSheetTreeElement.js';
 import * as ClassesPaneWidget from './ClassesPaneWidget.js';
 import * as ColorSwatchPopoverIcon from './ColorSwatchPopoverIcon.js';
-import * as ComputedStyleModel from './ComputedStyleModel.js';
 import * as ComputedStyleWidget from './ComputedStyleWidget.js';
 import * as CSSRuleValidator from './CSSRuleValidator.js';
 import * as CSSValueTraceView from './CSSValueTraceView.js';
@@ -65,9 +66,9 @@ import * as WebCustomData from './WebCustomData.js';
 export {
   AccessibilityTreeUtils,
   AccessibilityTreeView,
+  AdoptedStyleSheetTreeElement,
   ClassesPaneWidget,
   ColorSwatchPopoverIcon,
-  ComputedStyleModel,
   ComputedStyleWidget,
   CSSRuleValidator,
   CSSValueTraceView,

package/front_end/panels/elements/elementsTreeOutline.css

@@ -217,14 +217,25 @@ select {
 }
 
 .elements-gutter-decoration {
-  position: absolute;
-  top: 3px;
-  left: 2px;
   height: 9px;
   width: 9px;
   border-radius: 5px;
-  border: 1px solid var(--sys-color-orange-bright);
-  background-color: var(--sys-color-orange-bright);
+  border: 1px solid var(--decoration-color); /* stylelint-disable-line plugin/use_theme_colors */
+  background-color: var(--decoration-color); /* stylelint-disable-line plugin/use_theme_colors */
+}
+
+.elements-gutter-decoration-container {
+  display: flex;
+  position: absolute;
+  top: 0;
+  left: 1px;
+  width: 15px;
+  height: 15px;
+  align-items: center;
+}
+
+.elements-gutter-decoration + .elements-gutter-decoration {
+  margin-left: -6px;
 }
 
 .elements-gutter-decoration.elements-has-decorated-children {