chrome-devtools-frontend 1.0.1007846 → 1.0.1008735

package/config/gni/devtools_grd_files.gni

@@ -984,7 +984,6 @@ grd_files_debug_sources = [
   "front_end/panels/elements/components/queryContainer.css.js",
   "front_end/panels/elements/components/stylePropertyEditor.css.js",
   "front_end/panels/elements/computedStyleSidebarPane.css.js",
-  "front_end/panels/elements/computedStyleWidgetTree.css.js",
   "front_end/panels/elements/domLinkifier.css.js",
   "front_end/panels/elements/elementStatePaneWidget.css.js",
   "front_end/panels/elements/elementsPanel.css.js",

package/front_end/core/common/ParsedURL.ts

@@ -470,8 +470,16 @@ export class ParsedURL {
     return ParsedURL.substring(url as Platform.DevToolsPath.UrlString, 0, wasmFunctionIndex);
   }
 
+  private static beginsWithWindowsDriveLetter(url: string): boolean {
+    return /^[A-Za-z]:/.test(url);
+  }
+
+  private static beginsWithScheme(url: string): boolean {
+    return /^[A-Za-z][A-Za-z0-9+.-]*:/.test(url);
+  }
+
   static isRelativeURL(url: string): boolean {
-    return !(/^[A-Za-z][A-Za-z0-9+.-]*:/.test(url));
+    return !this.beginsWithScheme(url) || this.beginsWithWindowsDriveLetter(url);
   }
 
   get displayName(): string {

package/front_end/core/i18n/locales/en-US.json

@@ -1469,9 +1469,6 @@
   "models/issues_manager/DeprecationIssue.ts | rtcpMuxPolicyNegotiate": {
     "message": "The rtcpMuxPolicy option is deprecated and will be removed."
   },
-  "models/issues_manager/DeprecationIssue.ts | rtpDataChannel": {
-    "message": "RTP data channels are no longer supported. The RtpDataChannels constraint is currently ignored, and may cause an error at a later date."
-  },
   "models/issues_manager/DeprecationIssue.ts | sharedArrayBufferConstructedWithoutIsolation": {
     "message": "SharedArrayBuffer will require cross-origin isolation. See https://developer.chrome.com/blog/enabling-shared-array-buffer/ for more details."
   },

package/front_end/core/i18n/locales/en-XL.json

@@ -1469,9 +1469,6 @@
   "models/issues_manager/DeprecationIssue.ts | rtcpMuxPolicyNegotiate": {
     "message": "T̂h́ê rtcpMuxPolicy óp̂t́îón̂ íŝ d́êṕr̂éĉát̂éd̂ án̂d́ ŵíl̂ĺ b̂é r̂ém̂óv̂éd̂."
   },
-  "models/issues_manager/DeprecationIssue.ts | rtpDataChannel": {
-    "message": "RTP data channels âŕê ńô ĺôńĝér̂ śûṕp̂ór̂t́êd́. T̂h́ê RtpDataChannels ćôńŝt́r̂áîńt̂ íŝ ćûŕr̂én̂t́l̂ý îǵn̂ór̂éd̂, án̂d́ m̂áŷ ćâúŝé âń êŕr̂ór̂ át̂ á l̂át̂ér̂ d́ât́ê."
-  },
   "models/issues_manager/DeprecationIssue.ts | sharedArrayBufferConstructedWithoutIsolation": {
     "message": "SharedArrayBuffer ŵíl̂ĺ r̂éq̂úîŕê ćr̂óŝś-ôŕîǵîń îśôĺât́îón̂. Śêé ĥt́t̂ṕŝ://d́êv́êĺôṕêŕ.ĉh́r̂óm̂é.ĉóm̂/b́l̂óĝ/én̂áb̂ĺîńĝ-śĥár̂éd̂-ár̂ŕâý-b̂úf̂f́êŕ/ f̂ór̂ ḿôŕê d́êt́âíl̂ś."
   },

package/front_end/generated/InspectorBackendCommands.js

@@ -315,7 +315,6 @@ export function registerCommands(inspectorBackend) {
         'RTCPeerConnectionComplexPlanBSdpUsingDefaultSdpSemantics',
     RTCPeerConnectionSdpSemanticsPlanB: 'RTCPeerConnectionSdpSemanticsPlanB',
     RtcpMuxPolicyNegotiate: 'RtcpMuxPolicyNegotiate',
-    RTPDataChannel: 'RTPDataChannel',
     SharedArrayBufferConstructedWithoutIsolation: 'SharedArrayBufferConstructedWithoutIsolation',
     TextToSpeech_DisallowedByAutoplay: 'TextToSpeech_DisallowedByAutoplay',
     V8SharedArrayBufferConstructedInExtensionWithoutIsolation:
@@ -2380,7 +2379,8 @@ export function registerCommands(inspectorBackend) {
   inspectorBackend.registerEnum(
       'Page.FileChooserOpenedEventMode', {SelectSingle: 'selectSingle', SelectMultiple: 'selectMultiple'});
   inspectorBackend.registerEvent('Page.fileChooserOpened', ['frameId', 'backendNodeId', 'mode']);
-  inspectorBackend.registerEvent('Page.frameAttached', ['frameId', 'parentFrameId', 'stack']);
+  inspectorBackend.registerEvent(
+      'Page.frameAttached', ['frameId', 'parentFrameId', 'stack', 'adScriptId', 'debuggerId']);
   inspectorBackend.registerEvent('Page.frameClearedScheduledNavigation', ['frameId']);
   inspectorBackend.registerEnum('Page.FrameDetachedEventReason', {Remove: 'remove', Swap: 'swap'});
   inspectorBackend.registerEvent('Page.frameDetached', ['frameId', 'reason']);

package/front_end/generated/protocol.ts

@@ -1062,7 +1062,6 @@ export namespace Audits {
         'RTCPeerConnectionComplexPlanBSdpUsingDefaultSdpSemantics',
     RTCPeerConnectionSdpSemanticsPlanB = 'RTCPeerConnectionSdpSemanticsPlanB',
     RtcpMuxPolicyNegotiate = 'RtcpMuxPolicyNegotiate',
-    RTPDataChannel = 'RTPDataChannel',
     SharedArrayBufferConstructedWithoutIsolation = 'SharedArrayBufferConstructedWithoutIsolation',
     TextToSpeech_DisallowedByAutoplay = 'TextToSpeech_DisallowedByAutoplay',
     V8SharedArrayBufferConstructedInExtensionWithoutIsolation =
@@ -11765,6 +11764,8 @@ export namespace Page {
      * JavaScript stack trace of when frame was attached, only set if frame initiated from script.
      */
     stack?: Runtime.StackTrace;
+    adScriptId?: Runtime.ScriptId;
+    debuggerId?: Runtime.UniqueDebuggerId;
   }
 
   /**

package/front_end/legacy_test_runner/elements_test_runner/ElementsTestRunner.js

@@ -183,20 +183,20 @@ ElementsTestRunner.computedStyleWidget = function() {
 
 ElementsTestRunner.dumpComputedStyle = async function(doNotAutoExpand, printInnerText) {
   const computed = ElementsTestRunner.computedStyleWidget();
-  const treeOutline = computed.propertiesOutline;
-  const children = treeOutline.rootElement().children();
+  const treeOutline = computed.propertiesOutline.querySelector('devtools-tree-outline');
+  const children = treeOutline.shadowRoot.querySelector('[role="treeitem"]');
 
   for (const treeElement of children) {
-    const property = computed.propertyByTreeElement.get(treeElement);
-    if (!property || property.name === 'width' || property.name === 'height') {
+    const property = treeElement.querySelector('devtools-computed-style-property')?.shadowRoot;
+    const propertyName = text(property?.querySelector('.webkit-css-property'));
+    const propertyValue = text(property?.querySelector('.value'));
+    if (!property || propertyName === 'width' || propertyName === 'height') {
       continue;
     }
 
-    const propertyName = text(treeElement.title.querySelector('.webkit-css-property'));
-    const propertyValue = text(treeElement.title.querySelector('.value'));
     TestRunner.addResult(`${propertyName}: ${propertyValue};`);
 
-    if (doNotAutoExpand && !treeElement.expanded) {
+    if (doNotAutoExpand && !treeElement.ariaExpanded) {
       continue;
     }
 
@@ -211,7 +211,7 @@ ElementsTestRunner.dumpComputedStyle = async function(doNotAutoExpand, printInne
       dumpText += text(trace.querySelector('.value'));
       dumpText += ' - ';
       dumpText += text(trace.shadowRoot.querySelector('.trace-selector'));
-      const link = trace.querySelector('[slot="trace-link"]');
+      const link = trace.shadowRoot.querySelector('.trace-link');
 
       if (link) {
         dumpText += ' ' + await extractLinkText(link);

package/front_end/models/issues_manager/DeprecationIssue.ts

@@ -243,16 +243,6 @@ const UIStrings = {
    * `RTCP MUX` policy.
    */
   rtcpMuxPolicyNegotiate: 'The `rtcpMuxPolicy` option is deprecated and will be removed.',
-  /**
-   * @description A deprecation warning shown in the DevTools Issues tab.
-   * It's shown when a video conferencing website attempts to turn on or
-   * off a feature that has been removed, `RTP data channels`.
-   * `RTP data channels` are used to send and receive arbitrary data,
-   * but have been removed in favor of standardized versions of
-   * `data channels`: `SCTP data channels`.
-   */
-  rtpDataChannel:
-      '`RTP data channels` are no longer supported. The `RtpDataChannels` constraint is currently ignored, and may cause an error at a later date.',
   /**
    * @description TODO(crbug.com/1318878): Description needed for translation
    */
@@ -500,10 +490,6 @@ export class DeprecationIssue extends Issue {
         feature = 5654810086866944;
         milestone = 62;
         break;
-      case Protocol.Audits.DeprecationIssueType.RTPDataChannel:
-        messageFunction = i18nLazyString(UIStrings.rtpDataChannel);
-        milestone = 88;
-        break;
       case Protocol.Audits.DeprecationIssueType.SharedArrayBufferConstructedWithoutIsolation:
         messageFunction = i18nLazyString(UIStrings.sharedArrayBufferConstructedWithoutIsolation);
         milestone = 106;

package/front_end/panels/elements/ComputedStyleWidget.ts

@@ -38,9 +38,9 @@ import * as SDK from '../../core/sdk/sdk.js';
 import * as InlineEditor from '../../ui/legacy/components/inline_editor/inline_editor.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
+
 import * as ElementsComponents from './components/components.js';
 import computedStyleSidebarPaneStyles from './computedStyleSidebarPane.css.js';
-import computedStyleWidgetTreeStyles from './computedStyleWidgetTree.css.js';
 
 import type {ComputedStyle} from './ComputedStyleModel.js';
 import {ComputedStyleModel, Events} from './ComputedStyleModel.js';
@@ -49,7 +49,9 @@ import {PlatformFontsWidget} from './PlatformFontsWidget.js';
 import type {Category} from './PropertyNameCategories.js';
 import {categorizePropertyName, DefaultCategoryOrder} from './PropertyNameCategories.js';
 import {StylePropertiesSection} from './StylePropertiesSection.js';
-import {IdleCallbackManager, StylesSidebarPane, StylesSidebarPropertyRenderer} from './StylesSidebarPane.js';
+import {StylesSidebarPane, StylesSidebarPropertyRenderer} from './StylesSidebarPane.js';
+import * as TreeOutline from '../../ui/components/tree_outline/tree_outline.js';
+import * as LitHtml from '../../ui/lit-html/lit-html.js';
 
 const UIStrings = {
   /**
@@ -92,23 +94,24 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/elements/ComputedStyleWidget.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
-const createPropertyElement = (node: SDK.DOMModel.DOMNode, propertyName: string, propertyValue: string):
-                                  ElementsComponents.ComputedStyleProperty.ComputedStyleProperty => {
-  const propertyElement = new ElementsComponents.ComputedStyleProperty.ComputedStyleProperty();
-
-  const renderer = new StylesSidebarPropertyRenderer(null, node, propertyName, propertyValue);
-  renderer.setColorHandler(processColor);
+const createPropertyElement =
+    (node: SDK.DOMModel.DOMNode, propertyName: string, propertyValue: string, traceable: boolean, inherited: boolean,
+     onNavigateToSource: ((event?: Event) => void)): ElementsComponents.ComputedStyleProperty.ComputedStyleProperty => {
+      const propertyElement = new ElementsComponents.ComputedStyleProperty.ComputedStyleProperty();
 
-  const propertyNameElement = renderer.renderName();
-  propertyNameElement.slot = 'property-name';
-  propertyElement.appendChild(propertyNameElement);
+      const renderer = new StylesSidebarPropertyRenderer(null, node, propertyName, propertyValue);
+      renderer.setColorHandler(processColor);
 
-  const propertyValueElement = renderer.renderValue();
-  propertyValueElement.slot = 'property-value';
-  propertyElement.appendChild(propertyValueElement);
+      propertyElement.data = {
+        propertyNameRenderer: renderer.renderName.bind(renderer),
+        propertyValueRenderer: renderer.renderValue.bind(renderer),
+        traceable,
+        inherited,
+        onNavigateToSource,
+      };
 
-  return propertyElement;
-};
+      return propertyElement;
+    };
 
 const createTraceElement =
     (node: SDK.DOMModel.DOMNode, property: SDK.CSSProperty.CSSProperty, isPropertyOverloaded: boolean,
@@ -123,16 +126,15 @@ const createTraceElement =
       trace.appendChild(valueElement);
 
       const rule = (property.ownerStyle.parentRule as SDK.CSSRule.CSSStyleRule | null);
+      let ruleOriginNode;
       if (rule) {
-        const linkSpan = document.createElement('span');
-        linkSpan.appendChild(StylePropertiesSection.createRuleOriginNode(matchedStyles, linkifier, rule));
-        linkSpan.slot = 'trace-link';
-        trace.appendChild(linkSpan);
+        ruleOriginNode = StylePropertiesSection.createRuleOriginNode(matchedStyles, linkifier, rule);
       }
       trace.data = {
         selector: rule ? rule.selectorText() : 'element.style',
         active: !isPropertyOverloaded,
-        onNavigateToSource: (navigateToSource.bind(null, property) as (arg0?: Event|undefined) => void),
+        onNavigateToSource: navigateToSource.bind(null, property),
+        ruleOriginNode,
       };
 
       return trace;
@@ -154,7 +156,10 @@ const processColor = (text: string): Node => {
   return swatch;
 };
 
-const navigateToSource = (cssProperty: SDK.CSSProperty.CSSProperty, event: Event): void => {
+const navigateToSource = (cssProperty: SDK.CSSProperty.CSSProperty, event?: Event): void => {
+  if (!event) {
+    return;
+  }
   void Common.Revealer.reveal(cssProperty);
   event.consume(true);
 };
@@ -171,6 +176,20 @@ const propertySorter = (propA: string, propB: string): number => {
   return Platform.StringUtilities.compare(canonicalA, canonicalB);
 };
 
+type ComputedStyleData = {
+  tag: 'property',
+  propertyName: string,
+  propertyValue: string,
+  inherited: boolean,
+}|{
+  tag: 'traceElement',
+  property: SDK.CSSProperty.CSSProperty,
+  rule: SDK.CSSRule.CSSRule | null,
+}|{
+  tag: 'category',
+  name: string,
+};
+
 export class ComputedStyleWidget extends UI.ThrottledWidget.ThrottledWidget {
   private computedStyleModel: ComputedStyleModel;
   private readonly showInheritedComputedStylePropertiesSetting: Common.Settings.Setting<boolean>;
@@ -178,17 +197,11 @@ export class ComputedStyleWidget extends UI.ThrottledWidget.ThrottledWidget {
   input: Element;
   private filterRegex: RegExp|null;
   private readonly noMatchesElement: HTMLElement;
-  private propertiesOutline: UI.TreeOutline.TreeOutlineInShadow;
-  private readonly propertyByTreeElement: WeakMap<UI.TreeOutline.TreeElement, {
-    name: string,
-    value: string,
-  }>;
-  private readonly categoryByTreeElement: WeakMap<UI.TreeOutline.TreeElement, Category>;
-  private readonly expandedProperties: Set<string>;
-  private readonly expandedGroups: Set<Category>;
   private readonly linkifier: Components.Linkifier.Linkifier;
   private readonly imagePreviewPopover: ImagePreviewPopover;
-  private idleCallbackManager: IdleCallbackManager;
+
+  #computedStylesTree = new TreeOutline.TreeOutline.TreeOutline<ComputedStyleData>();
+  #treeData?: TreeOutline.TreeOutline.TreeOutlineData<ComputedStyleData>;
 
   constructor() {
     super(true);
@@ -223,20 +236,7 @@ export class ComputedStyleWidget extends UI.ThrottledWidget.ThrottledWidget {
     this.noMatchesElement = this.contentElement.createChild('div', 'gray-info-message');
     this.noMatchesElement.textContent = i18nString(UIStrings.noMatchingProperty);
 
-    this.propertiesOutline = new UI.TreeOutline.TreeOutlineInShadow();
-    this.propertiesOutline.hideOverflow();
-    this.propertiesOutline.setShowSelectionOnKeyboardFocus(true);
-    this.propertiesOutline.setFocusable(true);
-    this.propertiesOutline.element.classList.add('monospace', 'computed-properties');
-    this.propertiesOutline.addEventListener(UI.TreeOutline.Events.ElementExpanded, this.onTreeElementToggled, this);
-    this.propertiesOutline.addEventListener(UI.TreeOutline.Events.ElementCollapsed, this.onTreeElementToggled, this);
-    this.contentElement.appendChild(this.propertiesOutline.element);
-
-    this.propertyByTreeElement = new WeakMap();
-    this.categoryByTreeElement = new WeakMap();
-
-    this.expandedProperties = new Set();
-    this.expandedGroups = new Set(DefaultCategoryOrder);
+    this.contentElement.appendChild(this.#computedStylesTree);
 
     this.linkifier = new Components.Linkifier.Linkifier(_maxLinkLength);
 
@@ -251,13 +251,12 @@ export class ComputedStyleWidget extends UI.ThrottledWidget.ThrottledWidget {
     const fontsWidget = new PlatformFontsWidget(this.computedStyleModel);
     fontsWidget.show(this.contentElement);
 
-    this.idleCallbackManager = new IdleCallbackManager();
     Common.Settings.Settings.instance().moduleSetting('colorFormat').addChangeListener(this.update.bind(this));
   }
 
   onResize(): void {
     const isNarrow = this.contentElement.offsetWidth < 260;
-    this.propertiesOutline.contentElement.classList.toggle('computed-narrow', isNarrow);
+    this.#computedStylesTree.classList.toggle('computed-narrow', isNarrow);
   }
 
   private showInheritedComputedStyleChanged(): void {
@@ -265,25 +264,22 @@ export class ComputedStyleWidget extends UI.ThrottledWidget.ThrottledWidget {
   }
 
   update(): void {
-    if (this.idleCallbackManager) {
-      this.idleCallbackManager.discard();
-    }
-    this.idleCallbackManager = new IdleCallbackManager();
     super.update();
   }
 
   wasShown(): void {
     super.wasShown();
     this.registerCSSFiles([computedStyleSidebarPaneStyles]);
-    this.propertiesOutline.registerCSSFiles([computedStyleWidgetTreeStyles]);
   }
 
   async doUpdate(): Promise<void> {
     const [nodeStyles, matchedStyles] =
         await Promise.all([this.computedStyleModel.fetchComputedStyle(), this.fetchMatchedCascade()]);
+    if (!nodeStyles || !matchedStyles) {
+      this.noMatchesElement.classList.remove('hidden');
+      return;
+    }
     const shouldGroupComputedStyles = this.groupComputedStylesSetting.get();
-    this.propertiesOutline.contentElement.classList.toggle('grouped-list', shouldGroupComputedStyles);
-    this.propertiesOutline.contentElement.classList.toggle('alphabetical-list', !shouldGroupComputedStyles);
     if (shouldGroupComputedStyles) {
       await this.rebuildGroupedList(nodeStyles, matchedStyles);
     } else {
@@ -310,15 +306,12 @@ export class ComputedStyleWidget extends UI.ThrottledWidget.ThrottledWidget {
     }
   }
 
-  private async rebuildAlphabeticalList(
-      nodeStyle: ComputedStyle|null, matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles|null): Promise<void> {
-    const hadFocus = this.propertiesOutline.element.hasFocus();
+  private async rebuildAlphabeticalList(nodeStyle: ComputedStyle, matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles):
+      Promise<void> {
     this.imagePreviewPopover.hide();
-    this.propertiesOutline.removeChildren();
     this.linkifier.reset();
     const cssModel = this.computedStyleModel.cssModel();
-    if (!nodeStyle || !matchedStyles || !cssModel) {
-      this.noMatchesElement.classList.remove('hidden');
+    if (!cssModel) {
       return;
     }
 
@@ -329,8 +322,7 @@ export class ComputedStyleWidget extends UI.ThrottledWidget.ThrottledWidget {
     const propertyTraces = this.computePropertyTraces(matchedStyles);
     const nonInheritedProperties = this.computeNonInheritedProperties(matchedStyles);
     const showInherited = this.showInheritedComputedStylePropertiesSetting.get();
-    const computedStyleQueue = [];
-    // filter and preprocess properties to line up in the computed style queue
+    const tree: TreeOutline.TreeOutlineUtils.TreeNode<ComputedStyleData>[] = [];
     for (const propertyName of uniqueProperties) {
       const propertyValue = nodeStyle.computedStyle.get(propertyName) || '';
       const canonicalName = SDK.CSSMetadata.cssMetadata().canonicalPropertyName(propertyName);
@@ -344,45 +336,21 @@ export class ComputedStyleWidget extends UI.ThrottledWidget.ThrottledWidget {
       if (propertyName !== canonicalName && propertyValue === nodeStyle.computedStyle.get(canonicalName)) {
         continue;
       }
-      computedStyleQueue.push({propertyName, propertyValue, isInherited});
+      tree.push(this.buildTreeNode(propertyTraces, propertyName, propertyValue, isInherited));
     }
 
-    this.propertiesOutline.contentElement.classList.add('render-flash');
-
-    // Render computed style properties in batches via idle callbacks to avoid a
-    // very long task. The batchSize and timeoutInterval should be tweaked in
-    // pair. Currently, updating, laying-out, rendering, and painting 20 items
-    // in every 100ms seems to be a good balance between updating too lazy vs.
-    // updating too much in one cycle.
-    const batchSize = 20;
-    const timeoutInterval = 100;
-    let timeout = 100;
-    while (computedStyleQueue.length > 0) {
-      const currentBatch = computedStyleQueue.splice(0, batchSize);
-
-      this.idleCallbackManager.schedule(() => {
-        for (const {propertyName, propertyValue, isInherited} of currentBatch) {
-          const treeElement = this.buildPropertyTreeElement(
-              propertyTraces, node, (matchedStyles as SDK.CSSMatchedStyles.CSSMatchedStyles), propertyName,
-              propertyValue, isInherited, hadFocus);
-          this.propertiesOutline.appendChild(treeElement);
-        }
-
-        this.filterAlphabeticalList();
-      }, timeout);
-
-      timeout += timeoutInterval;
-    }
-
-    await this.idleCallbackManager.awaitDone();
-    this.propertiesOutline.contentElement.classList.remove('render-flash');
+    const defaultRenderer = this.createTreeNodeRenderer(propertyTraces, node, matchedStyles);
+    this.#treeData = {
+      tree,
+      compact: true,
+      defaultRenderer,
+    };
+    this.filterAlphabeticalList();
   }
 
   private async rebuildGroupedList(
       nodeStyle: ComputedStyle|null, matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles|null): Promise<void> {
-    const hadFocus = this.propertiesOutline.element.hasFocus();
     this.imagePreviewPopover.hide();
-    this.propertiesOutline.removeChildren();
     this.linkifier.reset();
     const cssModel = this.computedStyleModel.cssModel();
     if (!nodeStyle || !matchedStyles || !cssModel) {
@@ -395,8 +363,9 @@ export class ComputedStyleWidget extends UI.ThrottledWidget.ThrottledWidget {
     const nonInheritedProperties = this.computeNonInheritedProperties(matchedStyles);
     const showInherited = this.showInheritedComputedStylePropertiesSetting.get();
 
-    const propertiesByCategory = new Map<Category, UI.TreeOutline.TreeElement[]>();
+    const propertiesByCategory = new Map<Category, string[]>();
 
+    const tree: TreeOutline.TreeOutlineUtils.TreeNode<ComputedStyleData>[] = [];
     for (const [propertyName, propertyValue] of nodeStyle.computedStyle) {
       const canonicalName = SDK.CSSMetadata.cssMetadata().canonicalPropertyName(propertyName);
       const isInherited = !nonInheritedProperties.has(canonicalName);
@@ -412,115 +381,109 @@ export class ComputedStyleWidget extends UI.ThrottledWidget.ThrottledWidget {
 
       const categories = categorizePropertyName(propertyName);
       for (const category of categories) {
-        const treeElement = this.buildPropertyTreeElement(
-            propertyTraces, node, matchedStyles, propertyName, propertyValue, isInherited, hadFocus);
         if (!propertiesByCategory.has(category)) {
           propertiesByCategory.set(category, []);
         }
-        // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
-        // @ts-expect-error
-        propertiesByCategory.get(category).push(treeElement);
+        propertiesByCategory.get(category)?.push(propertyName);
       }
     }
 
+    this.#computedStylesTree.removeChildren();
     for (const category of DefaultCategoryOrder) {
       const properties = propertiesByCategory.get(category);
       if (properties && properties.length > 0) {
-        const title = document.createElement('h1');
-        title.textContent = category;
-        const group = new UI.TreeOutline.TreeElement(title);
-        group.listItemElement.classList.add('group-title');
-        group.toggleOnClick = true;
-
-        for (const property of properties) {
-          group.appendChild(property);
+        const propertyNodes: TreeOutline.TreeOutlineUtils.TreeNode<ComputedStyleData>[] = [];
+        for (const propertyName of properties) {
+          const propertyValue = nodeStyle.computedStyle.get(propertyName) || '';
+          const canonicalName = SDK.CSSMetadata.cssMetadata().canonicalPropertyName(propertyName);
+          const isInherited = !nonInheritedProperties.has(canonicalName);
+          propertyNodes.push(this.buildTreeNode(propertyTraces, propertyName, propertyValue, isInherited));
         }
-
-        this.propertiesOutline.appendChild(group);
-        if (this.expandedGroups.has(category)) {
-          group.expand();
-        }
-
-        this.categoryByTreeElement.set(group, category);
+        tree.push({id: category, treeNodeData: {tag: 'category', name: category}, children: async () => propertyNodes});
       }
     }
+    const defaultRenderer = this.createTreeNodeRenderer(propertyTraces, node, matchedStyles);
+    this.#treeData = {
+      tree,
+      compact: true,
+      defaultRenderer,
+    };
+    return this.filterGroupLists();
+  }
 
-    this.filterGroupLists();
+  private buildTraceNode(property: SDK.CSSProperty.CSSProperty):
+      TreeOutline.TreeOutlineUtils.TreeNode<ComputedStyleData> {
+    const rule = property.ownerStyle.parentRule as SDK.CSSRule.CSSStyleRule;
+    return {
+      treeNodeData: {
+        tag: 'traceElement',
+        property,
+        rule,
+      },
+      id: rule.origin + ': ' + rule.styleSheetId + property.range,
+    };
   }
 
-  private onTreeElementToggled(event: Common.EventTarget.EventTargetEvent<UI.TreeOutline.TreeElement>): void {
-    const treeElement = event.data;
-    const property = this.propertyByTreeElement.get(treeElement);
-    if (property) {
-      treeElement.expanded ? this.expandedProperties.add(property.name) : this.expandedProperties.delete(property.name);
-    } else {
-      const category = this.categoryByTreeElement.get(treeElement);
-      if (category) {
-        treeElement.expanded ? this.expandedGroups.add(category) : this.expandedGroups.delete(category);
+  private createTreeNodeRenderer(
+      propertyTraces: Map<string, SDK.CSSProperty.CSSProperty[]>,
+      domNode: SDK.DOMModel.DOMNode,
+      matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles,
+      ):
+      (node: TreeOutline.TreeOutlineUtils.TreeNode<ComputedStyleData>,
+       state: {isExpanded: boolean}) => LitHtml.TemplateResult {
+    return node => {
+      const data = node.treeNodeData;
+      let navigate: (arg0?: Event) => void = () => {};
+      if (data.tag === 'property') {
+        const trace = propertyTraces.get(data.propertyName);
+        const activeProperty = trace?.find(
+            property => matchedStyles.propertyState(property) === SDK.CSSMatchedStyles.PropertyState.Active);
+        if (activeProperty) {
+          navigate = navigateToSource.bind(this, activeProperty);
+        }
+        const propertyElement = createPropertyElement(
+            domNode, data.propertyName, data.propertyValue, propertyTraces.has(data.propertyName), data.inherited,
+            navigate);
+        if (activeProperty) {
+          propertyElement.addEventListener(
+              'contextmenu', this.handleContextMenuEvent.bind(this, matchedStyles, activeProperty));
+        }
+        return LitHtml.html`${propertyElement}`;
       }
-    }
+      if (data.tag === 'traceElement') {
+        const isPropertyOverloaded =
+            matchedStyles.propertyState(data.property) === SDK.CSSMatchedStyles.PropertyState.Overloaded;
+        const traceElement =
+            createTraceElement(domNode, data.property, isPropertyOverloaded, matchedStyles, this.linkifier);
+        traceElement.addEventListener(
+            'contextmenu', this.handleContextMenuEvent.bind(this, matchedStyles, data.property));
+        return LitHtml.html`${traceElement}`;
+      }
+      return LitHtml.html`<span style="cursor: text; color: var(--color-text-secondary);">${data.name}</span>`;
+    };
   }
 
-  private buildPropertyTreeElement(
-      propertyTraces: Map<string, SDK.CSSProperty.CSSProperty[]>, node: SDK.DOMModel.DOMNode,
-      matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles, propertyName: string, propertyValue: string,
-      isInherited: boolean, hadFocus: boolean): UI.TreeOutline.TreeElement {
-    const treeElement = new UI.TreeOutline.TreeElement();
-    const trace = propertyTraces.get(propertyName);
-    let navigate: ((arg0?: Event|undefined) => void)|(() => void) = (): void => {};
-    if (trace) {
-      const activeProperty =
-          this.renderPropertyTrace((matchedStyles as SDK.CSSMatchedStyles.CSSMatchedStyles), node, treeElement, trace);
-      treeElement.setExpandable(true);
-      treeElement.listItemElement.addEventListener('click', event => {
-        treeElement.expanded ? treeElement.collapse() : treeElement.expand();
-        event.consume();
-      }, false);
-      navigate = (navigateToSource.bind(this, activeProperty) as (arg0?: Event|undefined) => void);
-    }
-
-    const propertyElement = createPropertyElement(node, propertyName, propertyValue);
-    propertyElement.data = {
-      traceable: propertyTraces.has(propertyName),
+  private buildTreeNode(
+      propertyTraces: Map<string, SDK.CSSProperty.CSSProperty[]>, propertyName: string, propertyValue: string,
+      isInherited: boolean): TreeOutline.TreeOutlineUtils.TreeNode<ComputedStyleData> {
+    const treeNodeData: ComputedStyleData = {
+      tag: 'property',
+      propertyName,
+      propertyValue,
       inherited: isInherited,
-      onNavigateToSource: navigate,
     };
-
-    treeElement.title = propertyElement;
-    this.propertyByTreeElement.set(treeElement, {name: propertyName, value: propertyValue});
-    if (!this.propertiesOutline.selectedTreeElement) {
-      treeElement.select(!hadFocus);
-    }
-
-    if (this.expandedProperties.has(propertyName)) {
-      treeElement.expand();
-    }
-
-    return treeElement;
-  }
-
-  private renderPropertyTrace(
-      matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles, node: SDK.DOMModel.DOMNode,
-      rootTreeElement: UI.TreeOutline.TreeElement,
-      tracedProperties: SDK.CSSProperty.CSSProperty[]): SDK.CSSProperty.CSSProperty {
-    let activeProperty: SDK.CSSProperty.CSSProperty|null = null;
-    for (const property of tracedProperties) {
-      const isPropertyOverloaded =
-          matchedStyles.propertyState(property) === SDK.CSSMatchedStyles.PropertyState.Overloaded;
-      if (!isPropertyOverloaded) {
-        activeProperty = property;
-        rootTreeElement.listItemElement.addEventListener(
-            'contextmenu', this.handleContextMenuEvent.bind(this, matchedStyles, property));
-      }
-      const trace = createTraceElement(node, property, isPropertyOverloaded, matchedStyles, this.linkifier);
-      const traceTreeElement = new UI.TreeOutline.TreeElement();
-      traceTreeElement.title = trace;
-      traceTreeElement.listItemElement.addEventListener(
-          'contextmenu', this.handleContextMenuEvent.bind(this, matchedStyles, property));
-      rootTreeElement.appendChild(traceTreeElement);
+    const trace = propertyTraces.get(propertyName);
+    if (!trace) {
+      return {
+        treeNodeData,
+        id: propertyName,
+      };
     }
-
-    return activeProperty as SDK.CSSProperty.CSSProperty;
+    return {
+      treeNodeData,
+      id: propertyName,
+      children: async () => trace.map(this.buildTraceNode),
+    };
   }
 
   private handleContextMenuEvent(
@@ -575,56 +538,62 @@ export class ComputedStyleWidget extends UI.ThrottledWidget.ThrottledWidget {
     return result;
   }
 
-  filterComputedStyles(this: ComputedStyleWidget, regex: RegExp|null): void {
+  async filterComputedStyles(this: ComputedStyleWidget, regex: RegExp|null): Promise<void> {
     this.filterRegex = regex;
     if (this.groupComputedStylesSetting.get()) {
-      this.filterGroupLists();
-    } else {
-      this.filterAlphabeticalList();
+      return this.filterGroupLists();
     }
+    return this.filterAlphabeticalList();
   }
 
-  private filterAlphabeticalList(): void {
+  private nodeFilter(node: TreeOutline.TreeOutlineUtils.TreeNode<ComputedStyleData>): boolean {
     const regex = this.filterRegex;
-    const children = this.propertiesOutline.rootElement().children();
-    let hasMatch = false;
-    for (const child of children) {
-      const property = this.propertyByTreeElement.get(child);
-      if (!property) {
-        continue;
-      }
-      const matched = !regex || regex.test(property.name) || regex.test(property.value);
-      child.hidden = !matched;
-      hasMatch = hasMatch || matched;
+    const data = node.treeNodeData;
+    if (data.tag === 'property') {
+      const matched = !regex || regex.test(data.propertyName) || regex.test(data.propertyValue);
+      return matched;
     }
-    this.noMatchesElement.classList.toggle('hidden', Boolean(hasMatch));
+    return true;
   }
 
-  private filterGroupLists(): void {
-    const regex = this.filterRegex;
-    const groups = this.propertiesOutline.rootElement().children();
-    let hasOverallMatch = false;
-    let foundFirstGroup = false;
-    for (const group of groups) {
-      let hasGroupMatch = false;
-      const properties = group.children();
-      for (const propertyTreeElement of properties) {
-        const property = this.propertyByTreeElement.get(propertyTreeElement);
-        if (!property) {
-          continue;
-        }
-        const matched = !regex || regex.test(property.name) || regex.test(property.value);
-        propertyTreeElement.hidden = !matched;
-        hasOverallMatch = hasOverallMatch || matched;
-        hasGroupMatch = hasGroupMatch || matched;
+  private filterAlphabeticalList(): void {
+    if (!this.#treeData) {
+      return;
+    }
+    const tree = this.#treeData.tree.filter(this.nodeFilter.bind(this));
+    this.#computedStylesTree.data = {
+      tree,
+      defaultRenderer: this.#treeData.defaultRenderer,
+      compact: this.#treeData.compact,
+    };
+    this.noMatchesElement.classList.toggle('hidden', Boolean(tree.length));
+  }
+
+  private async filterGroupLists(): Promise<void> {
+    if (!this.#treeData) {
+      return;
+    }
+    const tree: TreeOutline.TreeOutlineUtils.TreeNode<ComputedStyleData>[] = [];
+    for (const group of this.#treeData.tree) {
+      const data = group.treeNodeData;
+      if (data.tag !== 'category' || !group.children) {
+        continue;
+      }
+      const properties = await group.children();
+      const filteredChildren = properties.filter(this.nodeFilter.bind(this));
+      if (filteredChildren.length) {
+        tree.push(
+            {id: data.name, treeNodeData: {tag: 'category', name: data.name}, children: async () => filteredChildren});
       }
-      group.hidden = !hasGroupMatch;
-      // the first visible group won't have a divider before the group title
-      group.listItemElement.classList.toggle('first-group', hasGroupMatch && !foundFirstGroup);
-      foundFirstGroup = foundFirstGroup || hasGroupMatch;
     }
 
-    this.noMatchesElement.classList.toggle('hidden', hasOverallMatch);
+    this.#computedStylesTree.data = {
+      tree,
+      defaultRenderer: this.#treeData.defaultRenderer,
+      compact: this.#treeData.compact,
+    };
+    await this.#computedStylesTree.expandRecursively(0);
+    this.noMatchesElement.classList.toggle('hidden', Boolean(tree.length));
   }
 }
 

package/front_end/panels/elements/StylePropertyTreeElement.ts

@@ -918,7 +918,7 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
       propertyNamePattern = '^' + this.property.name + '$';
     }
     const regex = new RegExp(propertyNamePattern, 'i');
-    computedStyleWidget.filterComputedStyles(regex);
+    await computedStyleWidget.filterComputedStyles(regex);
 
     const filterInput = (computedStyleWidget.input as HTMLInputElement);
     filterInput.value = this.property.name;

package/front_end/panels/elements/components/ComputedStyleProperty.ts

@@ -9,6 +9,8 @@ import computedStylePropertyStyles from './computedStyleProperty.css.js';
 const {render, html} = LitHtml;
 
 export interface ComputedStylePropertyData {
+  propertyNameRenderer: () => Element;
+  propertyValueRenderer: () => Element;
   inherited: boolean;
   traceable: boolean;
   onNavigateToSource: (event?: Event) => void;
@@ -18,6 +20,8 @@ export class ComputedStyleProperty extends HTMLElement {
   static readonly litTagName = LitHtml.literal`devtools-computed-style-property`;
   readonly #shadow = this.attachShadow({mode: 'open'});
 
+  #propertyNameRenderer?: () => Element = undefined;
+  #propertyValueRenderer?: () => Element = undefined;
   #inherited = false;
   #traceable = false;
   #onNavigateToSource: ((event?: Event) => void) = () => {};
@@ -27,6 +31,8 @@ export class ComputedStyleProperty extends HTMLElement {
   }
 
   set data(data: ComputedStylePropertyData) {
+    this.#propertyNameRenderer = data.propertyNameRenderer;
+    this.#propertyValueRenderer = data.propertyValueRenderer;
     this.#inherited = data.inherited;
     this.#traceable = data.traceable;
     this.#onNavigateToSource = data.onNavigateToSource;
@@ -34,16 +40,22 @@ export class ComputedStyleProperty extends HTMLElement {
   }
 
   #render(): void {
+    const propertyNameElement = this.#propertyNameRenderer?.();
+    const propertyValueElement = this.#propertyValueRenderer?.();
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
     render(html`
       <div class="computed-style-property ${this.#inherited ? 'inherited' : ''}">
-        <slot name="property-name"></slot>
+        <div class="property-name">
+          ${propertyNameElement}
+        </div>
         <span class="hidden" aria-hidden="false">: </span>
         ${this.#traceable ?
             html`<span class="goto" @click=${this.#onNavigateToSource}></span>` :
             null}
-        <slot name="property-value"></slot>
+        <div class="property-value">
+          ${propertyValueElement}
+        </div>
         <span class="hidden" aria-hidden="false">;</span>
       </div>
     `, this.#shadow, {

package/front_end/panels/elements/components/ComputedStyleTrace.ts

@@ -12,6 +12,7 @@ export interface ComputedStyleTraceData {
   selector: string;
   active: boolean;
   onNavigateToSource: (event?: Event) => void;
+  ruleOriginNode?: Node;
 }
 
 export class ComputedStyleTrace extends HTMLElement {
@@ -21,6 +22,7 @@ export class ComputedStyleTrace extends HTMLElement {
   #selector = '';
   #active = false;
   #onNavigateToSource: ((event?: Event) => void) = () => {};
+  #ruleOriginNode?: Node;
 
   connectedCallback(): void {
     this.#shadow.adoptedStyleSheets = [computedStyleTraceStyles];
@@ -30,6 +32,7 @@ export class ComputedStyleTrace extends HTMLElement {
     this.#selector = data.selector;
     this.#active = data.active;
     this.#onNavigateToSource = data.onNavigateToSource;
+    this.#ruleOriginNode = data.ruleOriginNode;
     this.#render();
   }
 
@@ -41,7 +44,7 @@ export class ComputedStyleTrace extends HTMLElement {
         <span class="goto" @click=${this.#onNavigateToSource}></span>
         <slot name="trace-value" @click=${this.#onNavigateToSource}></slot>
         <span class="trace-selector">${this.#selector}</span>
-        <slot name="trace-link"></slot>
+        <span class="trace-link">${this.#ruleOriginNode}</span>
       </div>
     `, this.#shadow, {
       host: this,

package/front_end/panels/elements/components/computedStyleProperty.css

@@ -14,31 +14,40 @@
 .computed-style-property {
   --goto-size: 16px;
 
+  font-family: var(--monospace-font-family);
+  font-size: var(--monospace-font-size);
   min-height: 16px;
   box-sizing: border-box;
   padding-top: 2px;
   white-space: nowrap;
 }
 
+.computed-style-property:hover {
+  background-color: var(--legacy-focus-bg-color);
+  cursor: text;
+}
+
 .computed-style-property.inherited {
   opacity: 50%;
 }
 
-slot[name="property-name"],
-slot[name="property-value"] {
+.property-name,
+.property-value {
+  display: contents;
   overflow: hidden;
   text-overflow: ellipsis;
 }
 
-slot[name="property-name"] {
+.property-name {
   width: 16em;
   max-width: 52%;
   margin-right: calc(var(--goto-size) / 2);
   display: inline-block;
   vertical-align: text-top;
+  color: var(--webkit-css-property-color, var(--color-syntax-1)); /* stylelint-disable-line plugin/use_theme_colors */ /* See: crbug.com/1152736 for color variable migration. */
 }
 
-slot[name="property-value"] {
+.property-value {
   margin-left: 2em;
 }
 
@@ -66,8 +75,8 @@ slot[name="property-value"] {
   white-space: normal;
 }
 
-:host-context(.computed-narrow) slot[name="property-name"],
-:host-context(.computed-narrow) slot[name="property-value"] {
+:host-context(.computed-narrow) .property-name,
+:host-context(.computed-narrow) .property-value {
   display: inline-block;
   width: 100%;
   max-width: 100%;

package/front_end/panels/elements/components/computedStyleTrace.css

@@ -12,6 +12,8 @@
 
 .computed-style-trace {
   margin-left: 16px;
+  font-family: var(--monospace-font-family);
+  font-size: var(--monospace-font-size);
 }
 
 .computed-style-trace:hover {
@@ -38,6 +40,15 @@
   display: inline-block;
 }
 
+.devtools-link {
+  --override-text-decoration-color: hsl(0deg 0% 60%);
+
+  color: var(--color-text-primary);
+  text-decoration-color: var(--override-text-decoration-color);
+  text-decoration-line: underline;
+  cursor: pointer;
+}
+
 .trace-value {
   margin-left: 16px;
 }
@@ -53,7 +64,7 @@
   padding-left: 2em;
 }
 
-::slotted([slot="trace-link"]) {
+.trace-link {
   user-select: none;
   float: right;
   padding-left: 1em;

package/front_end/panels/elements/computedStyleSidebarPane.css

@@ -4,11 +4,6 @@
  * found in the LICENSE file.
  */
 
-.computed-properties {
-  user-select: text;
-  flex-shrink: 0;
-}
-
 .styles-sidebar-pane-toolbar {
   border-bottom: 1px solid var(--color-details-hairline-light);
   flex-shrink: 0;

package/front_end/panels/lighthouse/LighthouseController.ts

@@ -523,7 +523,7 @@ export const RuntimeSettings: RuntimeSetting[] = [
   {
     // This setting is disabled, but we keep it around to show in the UI.
     setting: Common.Settings.Settings.instance().createSetting(
-        'lighthouse.throttling', 'simulated', Common.Settings.SettingStorageType.Synced),
+        'lighthouse.throttling', 'simulate', Common.Settings.SettingStorageType.Synced),
     title: i18nLazyString(UIStrings.throttlingMethod),
     // We will disable this when we have a Lantern trace viewer within DevTools.
     learnMore:

package/front_end/ui/components/docs/computed_style_property/basic.ts

@@ -10,18 +10,20 @@ await FrontendHelpers.initializeGlobalVars();
 
 const component = new Elements.ComputedStyleProperty.ComputedStyleProperty();
 
-const propertyName = document.createElement('span');
-propertyName.textContent = 'display';
-propertyName.slot = 'property-name';
-component.appendChild(propertyName);
-
-const propertyValue = document.createElement('span');
-propertyValue.textContent = 'block';
-propertyValue.slot = 'property-value';
-component.appendChild(propertyValue);
-
 document.getElementById('container')?.appendChild(component);
 component.data = {
+  propertyNameRenderer: () => {
+    const propertyName = document.createElement('span');
+    propertyName.textContent = 'display';
+    propertyName.slot = 'property-name';
+    return propertyName;
+  },
+  propertyValueRenderer: () => {
+    const propertyValue = document.createElement('span');
+    propertyValue.textContent = 'block';
+    propertyValue.slot = 'property-value';
+    return propertyValue;
+  },
   inherited: true,
   traceable: false,
   onNavigateToSource: (): void => {},

package/front_end/ui/components/docs/computed_style_property/traceable.ts

@@ -7,16 +7,6 @@ import * as Elements from '../../../../panels/elements/components/components.js'
 
 const component = new Elements.ComputedStyleProperty.ComputedStyleProperty();
 
-const propertyName = document.createElement('span');
-propertyName.textContent = 'display';
-propertyName.slot = 'property-name';
-component.appendChild(propertyName);
-
-const propertyValue = document.createElement('span');
-propertyValue.textContent = 'grid';
-propertyValue.slot = 'property-value';
-component.appendChild(propertyValue);
-
 const trace = document.createElement('pre');
 trace.textContent = 'block    body         (style.css):42';
 trace.slot = 'property-traces';
@@ -24,6 +14,19 @@ component.appendChild(trace);
 
 document.getElementById('container')?.appendChild(component);
 component.data = {
+  propertyNameRenderer: () => {
+    const propertyName = document.createElement('span');
+    propertyName.textContent = 'display';
+    propertyName.slot = 'property-name';
+    return propertyName;
+  },
+  propertyValueRenderer: () => {
+    const propertyValue = document.createElement('span');
+    propertyValue.textContent = 'grid';
+    propertyValue.slot = 'property-value';
+
+    return propertyValue;
+  },
   inherited: false,
   traceable: true,
   onNavigateToSource: (): void => {},

package/front_end/ui/components/tree_outline/TreeOutline.ts

@@ -31,6 +31,7 @@ export interface TreeOutlineData<TreeNodeDataType> {
    */
   tree: readonly TreeNode<TreeNodeDataType>[];
   filter?: (node: TreeNodeDataType) => FilterOption;
+  compact?: boolean;
 }
 
 export function defaultRenderer(node: TreeNode<string>): LitHtml.TemplateResult {
@@ -111,6 +112,7 @@ export class TreeOutline<TreeNodeDataType> extends HTMLElement {
     return LitHtml.html`${String(node.treeNodeData)}`;
   };
   #nodeFilter?: ((node: TreeNodeDataType) => FilterOption);
+  #compact = false;
 
   /**
    * scheduledRender = render() has been called and scheduled a render.
@@ -155,6 +157,7 @@ export class TreeOutline<TreeNodeDataType> extends HTMLElement {
     this.#defaultRenderer = data.defaultRenderer;
     this.#treeData = data.tree;
     this.#nodeFilter = data.filter;
+    this.#compact = data.compact || false;
 
     if (!this.#hasRenderedAtLeastOnce) {
       this.#selectedTreeNode = this.#treeData[0];
@@ -454,6 +457,7 @@ export class TreeOutline<TreeNodeDataType> extends HTMLElement {
       parent: isExpandableNode(node),
       selected: this.#isSelectedNode(node),
       'is-top-level': depth === 0,
+      compact: this.#compact,
     });
     const ariaExpandedAttribute =
         LitHtml.Directives.ifDefined(isExpandableNode(node) ? String(nodeIsExpanded) : undefined);

package/front_end/ui/components/tree_outline/treeOutline.css

@@ -9,15 +9,21 @@
 }
 
 li {
+  border: 2px solid transparent;
   list-style: none;
   text-overflow: ellipsis;
   min-height: 12px;
 }
 
+.compact {
+  border: 0;
+}
+
 .tree-node-key {
   white-space: var(--override-key-whitespace-wrapping);
   /* Override the default |min-width: auto| to avoid overflows of flex items */
   min-width: 0;
+  flex-grow: 1;
 }
 
 .arrow-icon {
@@ -79,7 +85,6 @@ li.is-top-level:last-child {
 }
 
 .arrow-and-key-wrapper {
-  border: 2px solid transparent;
   display: flex;
   align-content: center;
   align-items: center;

package/package.json

@@ -55,5 +55,5 @@
     "unittest": "scripts/test/run_unittests.py --no-text-coverage",
     "watch": "vpython third_party/node/node.py --output scripts/watch_build.js"
   },
-  "version": "1.0.1007846"
+  "version": "1.0.1008735"
 }

package/front_end/panels/elements/computedStyleWidgetTree.css

@@ -1,66 +0,0 @@
-/*
- * Copyright (c) 2017 The Chromium Authors. All rights reserved.
- * Use of this source code is governed by a BSD-style license that can be
- * found in the LICENSE file.
- */
-
-.alphabetical-list.render-flash {
-  min-height: 100vh;
-}
-
-.tree-outline,
-.tree-outline ol {
-  padding-left: 0;
-}
-
-.tree-outline li:hover {
-  background-color: var(--legacy-focus-bg-color);
-  cursor: text;
-}
-
-.tree-outline li::before {
-  margin: 0 -1px 0 4px;
-}
-
-.group-title {
-  /* tree-outline li::before is set to be 16px wide */
-  padding-right: 16px;
-}
-
-.tree-outline li.group-title:hover {
-  background-color: transparent;
-}
-
-.group-title > h1 {
-  margin: 1px 0 0;
-  padding: 1em 0;
-  width: 100%;
-  cursor: text;
-  color: var(--color-text-secondary);
-  font-size: 11px;
-  font-weight: 400;
-}
-
-.group-title:not(.first-group) > h1 {
-  border-top: 1px solid var(--color-details-hairline);
-}
-
-.group-title + ol.children {
-  margin-bottom: 1em;
-}
-
-@media (forced-colors: active) {
-  :host-context(.monospace.computed-properties) .tree-outline li:hover {
-    forced-color-adjust: none;
-    background-color: Highlight;
-  }
-
-  :host-context(.monospace.computed-properties) .tree-outline:not(.hide-selection-when-blurred) li.parent:hover.selected::before,
-  :host-context(.monospace.computed-properties) .tree-outline-disclosure li.parent:hover::before {
-    background-color: HighlightText;
-  }
-
-  :host-context(.monospace.computed-properties) .tree-outline li:hover * {
-    color: HighlightText;
-  }
-}