chrome-devtools-frontend 1.0.1008562 → 1.0.1009019

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));
   }
 }