chrome-devtools-frontend 1.0.1402249 → 1.0.1418433

package/front_end/panels/elements/ElementsTreeElement.ts

@@ -221,19 +221,19 @@ const enum TagType {
   CLOSING = 'CLOSING_TAG',
 }
 
-type OpeningTagContext = {
-    tagType: TagType.OPENING,
-    readonly adornerContainer: HTMLElement,
-    adorners: Adorners.Adorner.Adorner[],
-    styleAdorners: Adorners.Adorner.Adorner[],
-    readonly adornersThrottler: Common.Throttler.Throttler,
-    canAddAttributes: boolean,
-    slot?: Adorners.Adorner.Adorner,
-};
+interface OpeningTagContext {
+  tagType: TagType.OPENING;
+  readonly adornerContainer: HTMLElement;
+  adorners: Adorners.Adorner.Adorner[];
+  styleAdorners: Adorners.Adorner.Adorner[];
+  readonly adornersThrottler: Common.Throttler.Throttler;
+  canAddAttributes: boolean;
+  slot?: Adorners.Adorner.Adorner;
+}
 
-type ClosingTagContext = {
-  tagType: TagType.CLOSING,
-};
+interface ClosingTagContext {
+  tagType: TagType.CLOSING;
+}
 
 export type TagTypeContext = OpeningTagContext|ClosingTagContext;
 
@@ -806,7 +806,7 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     let menuItem;
 
     if (UI.ActionRegistry.ActionRegistry.instance().hasAction('freestyler.element-panel-context')) {
-      contextMenu.headerSection().appendAction(
+      contextMenu.footerSection().appendAction(
           'freestyler.element-panel-context',
       );
     }
@@ -1768,7 +1768,7 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
 
   private buildPseudoElementDOM(parentElement: DocumentFragment, pseudoElementName: string): void {
     const pseudoElement = parentElement.createChild('span', 'webkit-html-pseudo-element');
-    pseudoElement.textContent = '::' + pseudoElementName;
+    pseudoElement.textContent = pseudoElementName;
     UI.UIUtils.createTextChild(parentElement, '\u200B');
   }
 
@@ -1850,8 +1850,8 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
         break;
 
       case Node.ELEMENT_NODE: {
-        let pseudoElementName = node.pseudoType();
-        if (pseudoElementName) {
+        if (node.pseudoType()) {
+          let pseudoElementName = node.nodeName();
           const pseudoIdentifier = node.pseudoIdentifier();
           if (pseudoIdentifier) {
             pseudoElementName += `(${pseudoIdentifier})`;
@@ -2159,8 +2159,7 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
   }
 
   adornSlot({name}: {name: string}, context: OpeningTagContext): Adorners.Adorner.Adorner {
-    const linkIcon = new IconButton.Icon.Icon();
-    linkIcon.name = 'select-element';
+    const linkIcon = IconButton.Icon.create('select-element');
     const slotText = document.createElement('span');
     slotText.textContent = name;
     const adornerContent = document.createElement('span');
@@ -2185,8 +2184,7 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     adornerContent.textContent = name;
     adornerContent.classList.add('adorner-with-icon');
 
-    const linkIcon = new IconButton.Icon.Icon();
-    linkIcon.name = 'select-element';
+    const linkIcon = IconButton.Icon.create('select-element');
     adornerContent.append(linkIcon);
 
     const adorner = new Adorners.Adorner.Adorner();

package/front_end/panels/elements/ElementsTreeOutline.test.ts

@@ -0,0 +1,93 @@
+// Copyright 2025 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.
+
+import * as SDK from '../../core/sdk/sdk.js';
+import * as Protocol from '../../generated/protocol.js';
+import {createTarget} from '../../testing/EnvironmentHelpers.js';
+import {
+  describeWithMockConnection,
+} from '../../testing/MockConnection.js';
+
+import * as Elements from './elements.js';
+
+describeWithMockConnection('ElementsTreeOutline', () => {
+  let target: SDK.Target.Target;
+  let model: SDK.DOMModel.DOMModel;
+  let treeOutline: Elements.ElementsTreeOutline.ElementsTreeOutline;
+
+  beforeEach(() => {
+    target = createTarget();
+
+    treeOutline = new Elements.ElementsTreeOutline.ElementsTreeOutline(/* omitRootDOMNode */ true);
+    treeOutline.wireToDOMModel(target.model(SDK.DOMModel.DOMModel) as SDK.DOMModel.DOMModel);
+
+    const modelBeforeAssertion = target.model(SDK.DOMModel.DOMModel);
+    assert.exists(modelBeforeAssertion);
+    model = modelBeforeAssertion;
+  });
+
+  afterEach(() => {
+    target.dispose('NO_REASON');
+  });
+
+  it('should include the ::checkmark pseudo element', () => {
+    const optionNode = SDK.DOMModel.DOMNode.create(model, null, false, {
+      nodeId: 1 as Protocol.DOM.NodeId,
+      backendNodeId: 1 as Protocol.DOM.BackendNodeId,
+      nodeType: Node.ELEMENT_NODE,
+      nodeName: 'option',
+      localName: 'option',
+      nodeValue: 'An Option',
+      childNodeCount: 1,
+      pseudoElements: [{
+        parentId: 1 as Protocol.DOM.NodeId,
+        nodeId: 2 as Protocol.DOM.NodeId,
+        backendNodeId: 2 as Protocol.DOM.BackendNodeId,
+        nodeType: Node.ELEMENT_NODE,
+        pseudoType: Protocol.DOM.PseudoType.Checkmark,
+        pseudoIdentifier: '::checkmark',
+        nodeName: '::checkmark',
+        localName: '::checkmark',
+        nodeValue: '*',
+      }],
+    });
+    assert.isNotNull(optionNode);
+
+    const checkmarkNode = optionNode.checkmarkPseudoElement();
+    assert.isNotNull(checkmarkNode);
+
+    treeOutline.rootDOMNode = optionNode;
+    assert.isNotNull(treeOutline.findTreeElement(checkmarkNode!));
+  });
+
+  it('should include the ::picker-icon pseudo element', () => {
+    const selectNode = SDK.DOMModel.DOMNode.create(model, null, false, {
+      nodeId: 1 as Protocol.DOM.NodeId,
+      backendNodeId: 1 as Protocol.DOM.BackendNodeId,
+      nodeType: Node.ELEMENT_NODE,
+      nodeName: 'select',
+      localName: 'select',
+      nodeValue: 'A Select',
+      childNodeCount: 1,
+      pseudoElements: [{
+        parentId: 1 as Protocol.DOM.NodeId,
+        nodeId: 2 as Protocol.DOM.NodeId,
+        backendNodeId: 2 as Protocol.DOM.BackendNodeId,
+        nodeType: Node.ELEMENT_NODE,
+        pseudoType: Protocol.DOM.PseudoType.PickerIcon,
+        pseudoIdentifier: '::picker-icon',
+        nodeName: '::picker-icon',
+        localName: '::picker-icon',
+        nodeValue: '^',
+      }],
+    });
+    assert.isNotNull(selectNode);
+
+    const pickerIconNode = selectNode.pickerIconPseudoElement();
+    assert.isNotNull(pickerIconNode);
+
+    treeOutline.rootDOMNode = selectNode;
+    assert.isNotNull(treeOutline.findTreeElement(pickerIconNode!));
+  });
+});

package/front_end/panels/elements/ElementsTreeOutline.ts

@@ -126,7 +126,7 @@ export class ElementsTreeOutline extends
     this.treeElementByNode = new WeakMap();
     const shadowContainer = document.createElement('div');
     this.shadowRoot = UI.UIUtils.createShadowRootWithCoreStyles(
-        shadowContainer, {cssFile: [elementsTreeOutlineStyles, CodeHighlighter.Style.default]});
+        shadowContainer, {cssFile: [elementsTreeOutlineStyles, CodeHighlighter.codeHighlighterStyles]});
     const outlineDisclosureElement = this.shadowRoot.createChild('div', 'elements-disclosure');
 
     this.elementInternal = this.element;
@@ -1382,11 +1382,18 @@ export class ElementsTreeOutline extends
       visibleChildren.push(markerPseudoElement);
     }
 
+    const checkmarkPseudoElement = node.checkmarkPseudoElement();
+    if (checkmarkPseudoElement) {
+      visibleChildren.push(checkmarkPseudoElement);
+    }
+
     const beforePseudoElement = node.beforePseudoElement();
     if (beforePseudoElement) {
       visibleChildren.push(beforePseudoElement);
     }
 
+    visibleChildren.push(...node.carouselPseudoElements());
+
     if (node.childNodeCount()) {
       // Children may be stale when the outline is not wired to receive DOMModel updates.
       let children: SDK.DOMModel.DOMNode[] = node.children() || [];
@@ -1401,6 +1408,11 @@ export class ElementsTreeOutline extends
       visibleChildren.push(afterPseudoElement);
     }
 
+    const pickerIconPseudoElement = node.pickerIconPseudoElement();
+    if (pickerIconPseudoElement) {
+      visibleChildren.push(pickerIconPseudoElement);
+    }
+
     const backdropPseudoElement = node.backdropPseudoElement();
     if (backdropPseudoElement) {
       visibleChildren.push(backdropPseudoElement);
@@ -1625,10 +1637,10 @@ export namespace ElementsTreeOutline {
     /* eslint-enable @typescript-eslint/naming-convention */
   }
 
-  export type EventTypes = {
-    [Events.SelectedNodeChanged]: {node: SDK.DOMModel.DOMNode|null, focus: boolean},
-    [Events.ElementsTreeUpdated]: SDK.DOMModel.DOMNode[],
-  };
+  export interface EventTypes {
+    [Events.SelectedNodeChanged]: {node: SDK.DOMModel.DOMNode|null, focus: boolean};
+    [Events.ElementsTreeUpdated]: SDK.DOMModel.DOMNode[];
+  }
 }
 
 // clang-format off
@@ -1789,8 +1801,7 @@ export class ShortcutTreeElement extends UI.TreeOutline.TreeElement {
         ElementsComponents.AdornerManager.RegisteredAdorners.REVEAL);
     const name = config.name;
     const adornerContent = document.createElement('span');
-    const linkIcon = new IconButton.Icon.Icon();
-    linkIcon.name = 'select-element';
+    const linkIcon = IconButton.Icon.create('select-element');
     const slotText = document.createElement('span');
     slotText.textContent = name;
     adornerContent.append(linkIcon);

package/front_end/panels/elements/EventListenersWidget.ts

@@ -105,7 +105,7 @@ export class EventListenersWidget extends UI.ThrottledWidget.ThrottledWidget imp
     this.eventListenersView.show(this.element);
     this.element.setAttribute('jslog', `${VisualLogging.pane('elements.event-listeners').track({resize: true})}`);
 
-    this.toolbarItemsInternal.push(UI.Toolbar.Toolbar.createActionButtonForId('elements.refresh-event-listeners'));
+    this.toolbarItemsInternal.push(UI.Toolbar.Toolbar.createActionButton('elements.refresh-event-listeners'));
     this.toolbarItemsInternal.push(new UI.Toolbar.ToolbarSettingCheckbox(
         this.showForAncestorsSetting, i18nString(UIStrings.showListenersOnTheAncestors),
         i18nString(UIStrings.ancestors)));

package/front_end/panels/elements/LayersWidget.ts

@@ -35,6 +35,7 @@ export class LayersWidget extends UI.Widget.Widget {
 
   constructor() {
     super(true);
+    this.registerRequiredCSS(layersWidgetStyles);
 
     this.contentElement.className = 'styles-layers-pane';
     this.contentElement.setAttribute('jslog', `${VisualLogging.pane('css-layers')}`);
@@ -58,13 +59,12 @@ export class LayersWidget extends UI.Widget.Widget {
     }
   }
 
-  override async wasShown(): Promise<void> {
+  override wasShown(): Promise<void> {
     super.wasShown();
-    this.registerCSSFiles([layersWidgetStyles]);
     return this.update();
   }
 
-  override async update(): Promise<void> {
+  async update(): Promise<void> {
     if (!this.isShowing()) {
       return;
     }

package/front_end/panels/elements/MetricsSidebarPane.ts

@@ -54,6 +54,7 @@ export class MetricsSidebarPane extends ElementsSidebarPane {
 
   constructor(computedStyleModel: ComputedStyleModel) {
     super(computedStyleModel);
+    this.registerRequiredCSS(metricsSidebarPaneStyles);
 
     this.originalPropertyData = null;
     this.previousPropertyDataCandidate = null;
@@ -534,8 +535,4 @@ export class MetricsSidebarPane extends ElementsSidebarPane {
     this.editingEnded(element, context);
     this.applyUserInput(element, userInput, previousContent, context, true);
   }
-  override wasShown(): void {
-    super.wasShown();
-    this.registerCSSFiles([metricsSidebarPaneStyles]);
-  }
 }

package/front_end/panels/elements/NodeStackTraceWidget.ts

@@ -25,6 +25,7 @@ export class NodeStackTraceWidget extends UI.ThrottledWidget.ThrottledWidget {
 
   constructor() {
     super(true /* isWebComponent */);
+    this.registerRequiredCSS(nodeStackTraceWidgetStyles);
 
     this.noStackTraceElement = this.contentElement.createChild('div', 'gray-info-message');
     this.noStackTraceElement.textContent = i18nString(UIStrings.noStackTraceAvailable);
@@ -36,7 +37,6 @@ export class NodeStackTraceWidget extends UI.ThrottledWidget.ThrottledWidget {
   override wasShown(): void {
     super.wasShown();
     UI.Context.Context.instance().addFlavorChangeListener(SDK.DOMModel.DOMNode, this.update, this);
-    this.registerCSSFiles([nodeStackTraceWidgetStyles]);
     this.update();
   }
 

package/front_end/panels/elements/PlatformFontsWidget.ts

@@ -29,14 +29,12 @@
  */
 
 import * as i18n from '../../core/i18n/i18n.js';
-
-import platformFontsWidgetStyles from './platformFontsWidget.css.js';
-
 import type * as SDK from '../../core/sdk/sdk.js';
-import * as UI from '../../ui/legacy/legacy.js';
 import type * as Protocol from '../../generated/protocol.js';
+import * as UI from '../../ui/legacy/legacy.js';
 
-import {Events, type ComputedStyleModel} from './ComputedStyleModel.js';
+import {type ComputedStyleModel, Events} from './ComputedStyleModel.js';
+import platformFontsWidgetStyles from './platformFontsWidget.css.js';
 
 const UIStrings = {
   /**
@@ -78,6 +76,7 @@ export class PlatformFontsWidget extends UI.ThrottledWidget.ThrottledWidget {
 
   constructor(sharedModel: ComputedStyleModel) {
     super(true);
+    this.registerRequiredCSS(platformFontsWidgetStyles);
 
     this.sharedModel = sharedModel;
     this.sharedModel.addEventListener(Events.CSS_MODEL_CHANGED, this.update, this);
@@ -136,8 +135,4 @@ export class PlatformFontsWidget extends UI.ThrottledWidget.ThrottledWidget {
       fontUsageElement.textContent = i18nString(UIStrings.dGlyphs, {n: usage});
     }
   }
-  override wasShown(): void {
-    super.wasShown();
-    this.registerCSSFiles([platformFontsWidgetStyles]);
-  }
 }

package/front_end/panels/elements/PropertiesWidget.ts

@@ -31,6 +31,8 @@
  * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
 
+import '../../ui/legacy/legacy.js';
+
 import * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
@@ -76,6 +78,7 @@ export class PropertiesWidget extends UI.ThrottledWidget.ThrottledWidget {
   private lastRequestedNode?: SDK.DOMModel.DOMNode;
   constructor(throttlingTimeout?: number) {
     super(true /* isWebComponent */, throttlingTimeout);
+    this.registerRequiredCSS(propertiesWidgetStyles);
 
     this.showAllPropertiesSetting = Common.Settings.Settings.instance().createSetting('show-all-properties', false);
     this.showAllPropertiesSetting.addChangeListener(this.filterList.bind(this));
@@ -92,7 +95,7 @@ export class PropertiesWidget extends UI.ThrottledWidget.ThrottledWidget {
     this.node = UI.Context.Context.instance().flavor(SDK.DOMModel.DOMNode);
 
     const hbox = this.contentElement.createChild('div', 'hbox properties-widget-toolbar');
-    const toolbar = new UI.Toolbar.Toolbar('styles-pane-toolbar', hbox);
+    const toolbar = hbox.createChild('devtools-toolbar', 'styles-pane-toolbar');
     const filterInput = new UI.Toolbar.ToolbarFilter(undefined, 1, 1, undefined, undefined, false);
     filterInput.addEventListener(UI.Toolbar.ToolbarInput.Event.TEXT_CHANGED, this.onFilterChanged, this);
     toolbar.appendToolbarItem(filterInput);
@@ -182,9 +185,4 @@ export class PropertiesWidget extends UI.ThrottledWidget.ThrottledWidget {
     }
     this.update();
   }
-
-  override wasShown(): void {
-    super.wasShown();
-    this.registerCSSFiles([propertiesWidgetStyles]);
-  }
 }

package/front_end/panels/elements/PropertyRenderer.ts

@@ -12,12 +12,6 @@ import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import {ImagePreviewPopover} from './ImagePreviewPopover.js';
-import {
-  type StringMatch,
-  StringMatcher,
-  type URLMatch,
-  URLMatcher,
-} from './PropertyMatchers.js';
 import {unescapeCssString} from './StylesSidebarPane.js';
 
 const UIStrings = {
@@ -45,8 +39,23 @@ function mergeWithSpacing(nodes: Node[], merge: Node[]): Node[] {
 }
 
 export interface MatchRenderer<MatchT extends SDK.CSSPropertyParser.Match> {
-  matcher(): SDK.CSSPropertyParser.Matcher<MatchT>;
+  readonly matchType: SDK.CSSPropertyParser.Constructor<MatchT>;
   render(match: MatchT, context: RenderingContext): Node[];
+  matcher(): SDK.CSSPropertyParser.Matcher<MatchT>;
+}
+
+// A mixin to automatically expose the match type on specific renrerers
+// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+export function rendererBase<MatchT extends SDK.CSSPropertyParser.Match>(
+    matchT: SDK.CSSPropertyParser.Constructor<MatchT>) {
+  abstract class RendererBase implements MatchRenderer<MatchT> {
+    abstract matcher(): SDK.CSSPropertyParser.Matcher<MatchT>;
+    readonly matchType = matchT;
+    render(_match: MatchT, _context: RenderingContext): Node[] {
+      return [];
+    }
+  }
+  return RendererBase;
 }
 
 export class RenderingContext {
@@ -178,7 +187,7 @@ export class Renderer extends SDK.CSSPropertyParser.TreeWalker {
     for (const renderer of renderers) {
       const matcher = renderer.matcher();
       matchers.push(matcher);
-      rendererMap.set(matcher.matchType, renderer);
+      rendererMap.set(renderer.matchType, renderer);
     }
     const matchedResult = SDK.CSSPropertyParser.BottomUpTreeMatching.walk(ast, matchers);
     ast.trailingNodes.forEach(n => matchedResult.matchText(n));
@@ -188,10 +197,14 @@ export class Renderer extends SDK.CSSPropertyParser.TreeWalker {
     return valueElement;
   }
 }
-export class URLRenderer implements MatchRenderer<URLMatch> {
+
+// clang-format off
+export class URLRenderer extends rendererBase(SDK.CSSPropertyParserMatchers.URLMatch) {
+  // clang-format on
   constructor(private readonly rule: SDK.CSSRule.CSSRule|null, private readonly node: SDK.DOMModel.DOMNode|null) {
+    super();
   }
-  render(match: URLMatch): Node[] {
+  override render(match: SDK.CSSPropertyParserMatchers.URLMatch): Node[] {
     const url = unescapeCssString(match.url) as Platform.DevToolsPath.UrlString;
     const container = document.createDocumentFragment();
     UI.UIUtils.createTextChild(container, 'url(');
@@ -219,20 +232,22 @@ export class URLRenderer implements MatchRenderer<URLMatch> {
     return [container];
   }
 
-  matcher(): URLMatcher {
-    return new URLMatcher();
+  matcher(): SDK.CSSPropertyParserMatchers.URLMatcher {
+    return new SDK.CSSPropertyParserMatchers.URLMatcher();
   }
 }
 
-export class StringRenderer implements MatchRenderer<StringMatch> {
-  render(match: StringMatch): Node[] {
+// clang-format off
+export class StringRenderer extends rendererBase(SDK.CSSPropertyParserMatchers.StringMatch) {
+  // clang-format on
+  override render(match: SDK.CSSPropertyParserMatchers.StringMatch): Node[] {
     const element = document.createElement('span');
     element.innerText = match.text;
     UI.Tooltip.Tooltip.install(element, unescapeCssString(match.text));
     return [element];
   }
 
-  matcher(): StringMatcher {
-    return new StringMatcher();
+  matcher(): SDK.CSSPropertyParserMatchers.StringMatcher {
+    return new SDK.CSSPropertyParserMatchers.StringMatcher();
   }
 }

package/front_end/panels/elements/StylePropertiesSection.test.ts

@@ -8,6 +8,7 @@ import * as Protocol from '../../generated/protocol.js';
 import type * as TextUtils from '../../models/text_utils/text_utils.js';
 import {createTarget} from '../../testing/EnvironmentHelpers.js';
 import {describeWithMockConnection} from '../../testing/MockConnection.js';
+import {getMatchedStylesWithStylesheet} from '../../testing/StyleHelpers.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
 
 import * as Elements from './elements.js';
@@ -40,47 +41,6 @@ describe('StylePropertiesSection', () => {
   });
 });
 
-function setUpStyles(
-    cssModel: SDK.CSSModel.CSSModel, origin: Protocol.CSS.StyleSheetOrigin, styleSheetId: Protocol.CSS.StyleSheetId,
-    header: Partial<Protocol.CSS.CSSStyleSheetHeader>,
-    payload: Partial<SDK.CSSMatchedStyles.CSSMatchedStylesPayload>): Promise<SDK.CSSMatchedStyles.CSSMatchedStyles> {
-  cssModel.styleSheetAdded({
-    styleSheetId,
-    frameId: '' as Protocol.Page.FrameId,
-    sourceURL: '',
-    origin,
-    title: '',
-    disabled: false,
-    isInline: false,
-    isMutable: false,
-    isConstructed: false,
-    startLine: 0,
-    startColumn: 0,
-    length: 0,
-    endLine: 0,
-    endColumn: 0,
-    ...header,
-  });
-  return SDK.CSSMatchedStyles.CSSMatchedStyles.create({
-    cssModel,
-    node: sinon.createStubInstance(SDK.DOMModel.DOMNode),
-    inlinePayload: null,
-    attributesPayload: null,
-    matchedPayload: [],
-    pseudoPayload: [],
-    inheritedPayload: [],
-    inheritedPseudoPayload: [],
-    animationsPayload: [],
-    parentLayoutNodeId: undefined,
-    positionTryRules: [],
-    propertyRules: [],
-    cssPropertyRegistrations: [],
-    fontPaletteValuesRule: undefined,
-    activePositionFallbackIndex: -1,
-    ...payload,
-  });
-}
-
 describeWithMockConnection('StylesPropertySection', () => {
   let computedStyleModel: Elements.ComputedStyleModel.ComputedStyleModel;
   beforeEach(() => {
@@ -104,7 +64,8 @@ describeWithMockConnection('StylesPropertySection', () => {
       },
       matchingSelectors: [0],
     }];
-    const matchedStyles = await setUpStyles(cssModel, origin, styleSheetId, header, {matchedPayload});
+    const matchedStyles =
+        await getMatchedStylesWithStylesheet(cssModel, origin, styleSheetId, header, {matchedPayload});
 
     const rule = matchedStyles.nodeStyles()[0].parentRule;
     const linkifier = sinon.createStubInstance(Components.Linkifier.Linkifier);
@@ -142,7 +103,8 @@ describeWithMockConnection('StylesPropertySection', () => {
     sinon.stub(SDK.PageResourceLoader.PageResourceLoader.instance(), 'loadResource').callsFake(url => Promise.resolve({
       content: url === header.sourceMapURL ? '{"sources": []}' : '',
     }));
-    const matchedStyles = await setUpStyles(cssModel, origin, styleSheetId, header, {matchedPayload});
+    const matchedStyles =
+        await getMatchedStylesWithStylesheet(cssModel, origin, styleSheetId, header, {matchedPayload});
 
     const styleSheetHeader = cssModel.styleSheetHeaderForId(styleSheetId);
     assert.exists(styleSheetHeader);
@@ -185,7 +147,8 @@ describeWithMockConnection('StylesPropertySection', () => {
         },
         matchingSelectors: [0],
       }];
-      const matchedStyles = await setUpStyles(cssModel, origin, styleSheetId, {...range}, {matchedPayload});
+      const matchedStyles =
+          await getMatchedStylesWithStylesheet(cssModel, origin, styleSheetId, {...range}, {matchedPayload});
       const declaration = matchedStyles.nodeStyles()[0];
       assert.exists(declaration);
       const section = new Elements.StylePropertiesSection.StylePropertiesSection(
@@ -207,7 +170,8 @@ describeWithMockConnection('StylesPropertySection', () => {
         },
         matchingSelectors: [0],
       }];
-      const matchedStyles = await setUpStyles(cssModel, origin, styleSheetId, {...range}, {matchedPayload});
+      const matchedStyles =
+          await getMatchedStylesWithStylesheet(cssModel, origin, styleSheetId, {...range}, {matchedPayload});
       const declaration = matchedStyles.nodeStyles()[0];
       assert.exists(declaration);
       const section = new Elements.StylePropertiesSection.StylePropertiesSection(
@@ -248,8 +212,8 @@ describeWithMockConnection('StylesPropertySection', () => {
       matchingSelectors: [0],
     }];
 
-    const matchedStyles =
-        await setUpStyles(cssModel, origin, styleSheetId, {...range}, {propertyRules, matchedPayload});
+    const matchedStyles = await getMatchedStylesWithStylesheet(
+        cssModel, origin, styleSheetId, {...range}, {propertyRules, matchedPayload});
 
     function assertIsPropertyRule(rule: SDK.CSSRule.CSSRule|null): asserts rule is SDK.CSSRule.CSSPropertyRule {
       assert.instanceOf(rule, SDK.CSSRule.CSSPropertyRule);
@@ -296,7 +260,8 @@ describeWithMockConnection('StylesPropertySection', () => {
         text: '--palette-name',
       },
     };
-    const matchedStyles = await setUpStyles(cssModel, origin, styleSheetId, {...range}, {fontPaletteValuesRule});
+    const matchedStyles =
+        await getMatchedStylesWithStylesheet(cssModel, origin, styleSheetId, {...range}, {fontPaletteValuesRule});
     const declaration = matchedStyles.fontPaletteValuesRule()?.style;
     assert.exists(declaration);
     const section = new Elements.StylePropertiesSection.FontPaletteValuesRuleSection(
@@ -339,7 +304,8 @@ describeWithMockConnection('StylesPropertySection', () => {
         active: false,
       },
     ];
-    const matchedStyles = await setUpStyles(cssModel, origin, styleSheetId, {...range}, {positionTryRules});
+    const matchedStyles =
+        await getMatchedStylesWithStylesheet(cssModel, origin, styleSheetId, {...range}, {positionTryRules});
     const declaration1 = matchedStyles.positionTryRules()[0].style;
     const declaration2 = matchedStyles.positionTryRules()[1].style;
     assert.exists(declaration1);