[styles-widget] Only render sections that are not hidden

The StylesSidebarPane usually renders all sections, even though they
are hidden. This is entirely managed by the StylesPropertySections.
However, if we do the same in the StandaloneStylesContainer, we get
many nodes that are rendered into the DOM, that are however not shown.
This causes a performance bottleneck, as for visual loggign we crawl
through dom nodes (and in this case, unnecessarily) on e.g. resizes.

Therefore, only render the sections that are actually showing.

Drive-by: Also remove the `updateFilter` from the `performUpdate`
path, which is called often.

Fixed: 492111118
Change-Id: I55a8df84a1da908bb52b8352ea9eee96626ea21c
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/7660901
Commit-Queue: Jack Franklin <jacktfranklin@chromium.org>
Commit-Queue: Kim-Anh Tran <kimanh@chromium.org>
Auto-Submit: Kim-Anh Tran <kimanh@chromium.org>
Reviewed-by: Jack Franklin <jacktfranklin@chromium.org>

Author: ktran

front_end/panels/elements/StandaloneStylesContainer.test.ts

@@ -18,7 +18,9 @@ import {
   setMockConnectionResponseHandler,
 } from '../../testing/MockConnection.js';
 import {
+  getMatchedStyles,
   getMatchedStylesWithProperties,
+  ruleMatch,
 } from '../../testing/StyleHelpers.js';
 
 import * as Elements from './elements.js';
@@ -157,4 +159,64 @@ describeWithMockConnection('StandaloneStylesContainer', () => {
     await container.updateComplete;
     sinon.assert.calledOnce(repositionSpy);
   });
+
+  it('should render only matching sections from the DOM when a filter is applied', async () => {
+    const matchedStyles = await getMatchedStyles({
+      cssModel,
+      node,
+      matchedPayload: [
+        ruleMatch('.match', {color: 'red'}),
+        ruleMatch('.no-match', {color: 'blue'}),
+      ],
+    });
+    sinon.stub(cssModel, 'cachedMatchedCascadeForNode').resolves(matchedStyles);
+    const container = new Elements.StandaloneStylesContainer.StandaloneStylesContainer();
+    renderElementIntoDOM(container);
+
+    const updatePromise = new Promise<void>(resolve => {
+      container.addEventListener(
+          Elements.StandaloneStylesContainer.Events.STYLES_UPDATE_COMPLETED, () => resolve(), {once: true});
+    });
+    container.domNode = node;
+    await updatePromise;
+
+    assert.lengthOf(container.contentElement.querySelectorAll('.styles-section'), 2);
+
+    container.filter = /\.match/;
+    await container.updateComplete;
+
+    const sections = container.contentElement.querySelectorAll('.styles-section');
+    assert.lengthOf(sections, 1);
+    assert.include(sections[0].textContent, '.match');
+    assert.notInclude(sections[0].textContent, '.no-match');
+  });
+
+  it('should restore sections to the DOM when the filter is cleared', async () => {
+    const matchedStyles = await getMatchedStyles({
+      cssModel,
+      node,
+      matchedPayload: [
+        ruleMatch('.match', {color: 'red'}),
+        ruleMatch('.no-match', {color: 'blue'}),
+      ],
+    });
+    sinon.stub(cssModel, 'cachedMatchedCascadeForNode').resolves(matchedStyles);
+    const container = new Elements.StandaloneStylesContainer.StandaloneStylesContainer();
+    renderElementIntoDOM(container);
+
+    const updatePromise = new Promise<void>(resolve => {
+      container.addEventListener(
+          Elements.StandaloneStylesContainer.Events.STYLES_UPDATE_COMPLETED, () => resolve(), {once: true});
+    });
+    container.domNode = node;
+    await updatePromise;
+
+    container.filter = /\.match/;
+    await container.updateComplete;
+    assert.lengthOf(container.contentElement.querySelectorAll('.styles-section'), 1);
+
+    container.filter = null;
+    await container.updateComplete;
+    assert.lengthOf(container.contentElement.querySelectorAll('.styles-section'), 2);
+  });
 });

front_end/panels/elements/StandaloneStylesContainer.ts

@@ -130,16 +130,15 @@ export class StandaloneStylesContainer extends Common.ObjectWrapper.eventMixin<E
       this.sectionByElement.set(section.element, section);
     }
     this.#sections = newSections;
+    this.#updateFilter();
     this.swatchPopoverHelper().reposition();
   }
 
   override async performUpdate(): Promise<void> {
     this.hideAllPopovers();
 
-    this.#updateFilter();
-
     const viewInput: ViewInput = {
-      sections: this.#sections,
+      sections: this.#sections.filter(section => !section.isHidden()),
     };
     this.#view(viewInput, undefined, this.contentElement);
     this.#onUpdateFinished();
@@ -170,6 +169,7 @@ export class StandaloneStylesContainer extends Common.ObjectWrapper.eventMixin<E
   set filter(regex: RegExp|null) {
     this.#filter = regex;
     this.#updateFilter();
+    this.requestUpdate();
   }
 
   node(): SDK.DOMModel.DOMNode|null {