chrome-devtools-frontend 1.0.1579812 → 1.0.1581708

package/front_end/panels/application/ResourcesPanel.ts

@@ -37,9 +37,13 @@ export class ResourcesPanel extends UI.Panel.PanelWithSidebar {
   private cookieView: CookieItemsView|null;
   private deviceBoundSessionsView: DeviceBoundSessionsView|null;
   private readonly sidebar: ApplicationPanelSidebar;
+  mode: 'default'|'node' = 'default';
 
-  private constructor() {
+  private constructor(
+      mode: 'default'|'node' = 'default',
+  ) {
     super('resources');
+    this.mode = mode;
     this.registerRequiredCSS(resourcesPanelStyles);
 
     this.resourcesLastSelectedItemSetting =
@@ -68,11 +72,12 @@ export class ResourcesPanel extends UI.Panel.PanelWithSidebar {
   }
 
   static instance(opts: {
-    forceNew: boolean|null,
-  } = {forceNew: null}): ResourcesPanel {
-    const {forceNew} = opts;
+    forceNew?: boolean|null,
+    mode?: 'default'|'node',
+  } = {forceNew: null, mode: 'default'}): ResourcesPanel {
+    const {forceNew, mode} = opts;
     if (!resourcesPanelInstance || forceNew) {
-      resourcesPanelInstance = new ResourcesPanel();
+      resourcesPanelInstance = new ResourcesPanel(mode);
     }
 
     return resourcesPanelInstance;

package/front_end/panels/application/ServiceWorkerUpdateCycleView.ts

@@ -180,7 +180,6 @@ export class ServiceWorkerUpdateCycleView {
       const tr = this.tableElement.createChild('tr', 'service-worker-update-timeline');
       tr.setAttribute('jslog', `${VisualLogging.treeItem('update-timeline').track({
                         click: true,
-                        resize: true,
                         keydown: 'ArrowLeft|ArrowRight|ArrowUp|ArrowDown|Enter|Space',
                       })}`);
       this.rows.push(tr);

package/front_end/panels/application/components/BackForwardCacheView.ts

@@ -353,7 +353,7 @@ function renderFramesPerReason(frames: string[]|undefined): LitTemplate {
   }
   const rows = [html`<div>${i18nString(UIStrings.framesPerIssue, {n: frames.length})}</div>`];
   rows.push(...frames.map(url => html`<div class="text-ellipsis" title=${url}
-    jslog=${VisualLogging.treeItem().track({resize: true})}>${url}</div>`));
+    jslog=${VisualLogging.treeItem()}>${url}</div>`));
   return html`
       <div class="details-list"
       jslog=${VisualLogging.tree('frames-per-issue')}>
@@ -361,9 +361,7 @@ function renderFramesPerReason(frames: string[]|undefined): LitTemplate {
     rows,
     title: i18nString(UIStrings.framesPerIssue, {n: frames.length}),
   } as ExpandableList.ExpandableList.ExpandableListData}
-        jslog=${VisualLogging.treeItem().track({
-    resize: true
-  })}></devtools-expandable-list>
+        jslog=${VisualLogging.treeItem()}></devtools-expandable-list>
       </div>
     `;
 }

package/front_end/panels/autofill/AutofillView.ts

@@ -144,7 +144,7 @@ const DEFAULT_VIEW: View = (input: ViewInput, _output: ViewOutput, target: HTMLE
       // clang-format off
       return html`
         <span class=${spanClasses}
-              jslog=${VisualLogging.item('matched-address-item').track({hover: true, resize: true})}
+              jslog=${VisualLogging.item('matched-address-item').track({hover: true})}
               @mouseenter=${() => input.onHighlightMatchesInAddress(startIndex)}
               @mouseleave=${input.onClearHighlightedMatches}>
           ${templateLines}

package/front_end/panels/browser_debugger/XHRBreakpointsSidebarPane.ts

@@ -238,7 +238,6 @@ export class XHRBreakpointsSidebarPane extends UI.Widget.VBox implements UI.Cont
     listItemElement.setAttribute('jslog', `${VisualLogging.item().track({
                                    click: true,
                                    dblclick: true,
-                                   resize: true,
                                    keydown: 'ArrowUp|ArrowDown|PageUp|PageDown|Enter|Space',
                                  })}`);
     return listItemElement;

package/front_end/panels/changes/changesSidebar.css

@@ -14,6 +14,11 @@ devtools-icon {
   margin-right: var(--sys-size-4);
 }
 
+.tree-element-title > div {
+  display: flex;
+  align-items: center;
+}
+
 .navigator-sm-script-tree-item devtools-icon,
 .navigator-script-tree-item devtools-icon,
 .navigator-snippet-tree-item devtools-icon {

package/front_end/panels/common/AiCodeCompletionTeaser.ts

@@ -73,12 +73,12 @@ const UIStringsNotTranslate = {
    * @description Code generation disclaimer item text for the fre dialog.
    */
   freDisclaimerDescribeCodeInComment:
-      'In Console or Sources, describe the code you need in a comment, then press Ctrl+I to generate it.',
+      'In Console or Sources, describe the code you need in a comment, then press ctrl+i to generate it.',
   /**
    * @description Code generation disclaimer item text for the fre dialog.
    */
   freDisclaimerDescribeCodeInCommentForMacOs:
-      'In Console or Sources, describe the code you need in a comment, then press Cmd+I to generate it.',
+      'In Console or Sources, describe the code you need in a comment, then press cmd+i to generate it.',
   /**
    * @description Privacy disclaimer item text for the fre dialog.
    */
@@ -140,7 +140,17 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
               <span>${lockedString(UIStringsNotTranslate.i)}</span>
             </span>
             </span>&nbsp;${lockedString(UIStringsNotTranslate.toTurnOnCodeSuggestions)}&nbsp;
-            <span role="button" class="ai-code-completion-teaser-dismiss" @click=${input.onDismiss}
+            <span role="button" class="ai-code-completion-teaser-dismiss"
+              tabindex="0"
+              @click=${input.onDismiss}
+              @keydown=${(e: KeyboardEvent) => {
+                // Handle Enter and Space events to make dismiss button accessible for only keyboard users.
+                if (e.key === 'Enter' || e.key === ' ') {
+                  input.onDismiss(e);
+                  e.stopPropagation();
+                  e.preventDefault();
+                }
+              }}
               jslog=${VisualLogging.action('ai-code-completion-teaser.dismiss').track({click: true})}>
                 ${lockedString(UIStringsNotTranslate.dontShowAgain)}
             </span>

package/front_end/panels/common/ExtensionPanel.ts

@@ -52,6 +52,10 @@ export class ExtensionPanel extends UI.Panel.Panel implements UI.SearchableView.
         this.id, Extensions.ExtensionAPI.PrivateAPI.Panels.SearchAction.PerformSearch, query);
   }
 
+  supportsMatchCounts(): boolean {
+    return false;
+  }
+
   jumpToNextSearchResult(): void {
     this.server.notifySearchAction(this.id, Extensions.ExtensionAPI.PrivateAPI.Panels.SearchAction.NextSearchResult);
   }

package/front_end/panels/common/FreDialog.ts

@@ -54,6 +54,7 @@ export class FreDialog {
     if (ariaLabel) {
       dialog.setAriaLabel(ariaLabel);
     }
+    dialog.contentElement.tabIndex = -1;
     const result = Promise.withResolvers<boolean>();
     // clang-format off
     Lit.render(html`
@@ -131,6 +132,9 @@ export class FreDialog {
     dialog.setSizeBehavior(UI.GlassPane.SizeBehavior.MEASURE_CONTENT);
     dialog.setDimmed(true);
     dialog.show();
+    // Explicitly calling focus as `dialog.show()` does not put the FRE
+    // dialog in focus.
+    dialog.contentElement.focus();
 
     return result.promise;
   }

package/front_end/panels/common/aiCodeCompletionTeaser.css

@@ -26,6 +26,12 @@
         .ai-code-completion-teaser-dismiss {
             text-decoration: underline;
             cursor: pointer;
+
+            &:focus-visible {
+                border-radius: var(--sys-shape-corner-extra-small);
+                outline: var(--sys-size-2) solid var(--sys-color-state-focus-ring);
+                outline-offset: 0;
+            }
         }
 
         .ai-code-completion-teaser-action {

package/front_end/panels/console/ConsoleViewMessage.ts

@@ -1425,7 +1425,6 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
     this.elementInternal.className = 'console-message-wrapper';
     this.elementInternal.setAttribute('jslog', `${VisualLogging.item('console-message').track({
                                         click: true,
-                                        resize: true,
                                         keydown: 'ArrowUp|ArrowDown|ArrowLeft|ArrowRight|Enter|Space|Home|End',
                                       })}`);
     this.elementInternal.removeChildren();

package/front_end/panels/console_counters/WarningErrorCounter.ts

@@ -12,9 +12,11 @@ import * as IssuesManager from '../../models/issues_manager/issues_manager.js';
 import type * as IconButton from '../../ui/components/icon_button/icon_button.js';
 import * as IssueCounter from '../../ui/components/issue_counter/issue_counter.js';
 import * as UI from '../../ui/legacy/legacy.js';
-import {html, nothing, render} from '../../ui/lit/lit.js';
+import * as Lit from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
+const {html, nothing, render} = Lit;
+
 const UIStrings = {
   /**
    * @description The console error count in the Warning Error Counter shown in the main toolbar (top-left in DevTools). The error count refers to the number of errors currently present in the JavaScript console.
@@ -95,21 +97,25 @@ const DEFAULT_VIEW: View = (input, _output, target) => {
 
   render(
       html`<div class="status-buttons"
-         ><icon-button
+         >${
+          errors + warnings ? html`<icon-button
             .data=${iconData}
             title=${consoleTitle}
-            class=${'small' + warnings || errors ? nothing as unknown as string : 'hidden'}
+            class=${'small'}
             jslog=${VisualLogging.counter('console').track({
-        click: true
-      })}
-         ></icon-button><devtools-issue-counter
-            class=${'main-toolbar' + (issues ? '' : ' hidden')}
+            click: true
+          })}
+         ></icon-button>` :
+                              nothing}${
+          issues ? html`<devtools-issue-counter
+            class=${'main-toolbar'}
             title=${issuesTitle}
             .data=${issueCounterData}
             jslog=${VisualLogging.counter('issue').track({
-        click: true
-      })}
-         ></devtools-issue-counter></div>`,
+            click: true
+          })}
+         ></devtools-issue-counter>` :
+                   nothing}</div>`,
       target);
 };
 

package/front_end/panels/coverage/CoverageListView.ts

@@ -3,18 +3,20 @@
 // found in the LICENSE file.
 
 import '../../ui/components/highlighting/highlighting.js';
-import '../../ui/legacy/components/data_grid/data_grid.js';
 
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import type * as Platform from '../../core/platform/platform.js';
 import * as Workspace from '../../models/workspace/workspace.js';
+import * as DataGrid from '../../ui/legacy/components/data_grid/data_grid.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import {Directives, html, nothing, render, type TemplateResult} from '../../ui/lit/lit.js';
 
 import coverageListViewStyles from './coverageListView.css.js';
 import {CoverageType} from './CoverageModel.js';
 
+const {ifExpanded} = DataGrid;
+
 export interface CoverageListItem {
   url: Platform.DevToolsPath.UrlString;
   type: CoverageType;
@@ -143,7 +145,10 @@ interface ViewInput {
   selectedUrl: Platform.DevToolsPath.UrlString|null;
   maxSize: number;
   onOpen: (url: Platform.DevToolsPath.UrlString) => void;
+  onExpand: () => void;
+  onCollapse: () => void;
   highlightRegExp: RegExp|null;
+  expandedUrls: Set<Platform.DevToolsPath.UrlString>;
 }
 
 type View = (input: ViewInput, output: object, target: HTMLElement) => void;
@@ -181,6 +186,7 @@ export class CoverageListView extends UI.Widget.VBox {
   #coverageInfo: CoverageListItem[] = [];
   #selectedUrl: Platform.DevToolsPath.UrlString|null = null;
   #maxSize = 0;
+  #expandedUrls = new Set<Platform.DevToolsPath.UrlString>();
   #view: View;
 
   constructor(element?: HTMLElement, view = DEFAULT_VIEW) {
@@ -213,9 +219,16 @@ export class CoverageListView extends UI.Widget.VBox {
       items: this.#coverageInfo,
       selectedUrl: this.#selectedUrl,
       maxSize: this.#maxSize,
+      expandedUrls: this.#expandedUrls,
       onOpen: (url: Platform.DevToolsPath.UrlString) => {
         this.selectedUrl = url;
       },
+      onExpand: () => {
+        this.requestUpdate();
+      },
+      onCollapse: () => {
+        this.requestUpdate();
+      },
       highlightRegExp: this.#highlightRegExp,
     };
     this.#view(input, {}, this.contentElement);
@@ -281,7 +294,9 @@ function renderItem(info: CoverageListItem, input: ViewInput): TemplateResult {
   return html`
     <style>${coverageListViewStyles}</style>
     <tr data-url=${info.url} selected=${info.url === input.selectedUrl}
-        @open=${() => input.onOpen(info.url)}>
+        @open=${() => input.onOpen(info.url)}
+        @expand=${() => input.onExpand()}
+        @collapse=${() => input.onCollapse()}>
       <td data-value=${info.url} title=${info.url} aria-label=${info.url}>
         <devtools-highlight ranges=${highlightRange(info.url)} class="url-outer" aria-hidden="true">
           <div class="url-prefix">${splitURL ? splitURL[1] : info.url}</div>
@@ -325,7 +340,7 @@ function renderItem(info: CoverageListItem, input: ViewInput): TemplateResult {
       </td>
       ${info.sources.length > 0 ? html`
         <td><table>
-          ${repeat(info.sources, source => source.url, source => renderItem(source, input))}
+          ${ifExpanded(() => html`${repeat(info.sources, source => source.url, source => renderItem(source, input))}`)}
         </table></td>` : nothing}
     </tr>`;
   // clang-format on

package/front_end/panels/elements/AdoptedStyleSheetTreeElement.ts

@@ -13,6 +13,17 @@ import {PanelUtils} from '../utils/utils.js';
 
 import type {EditorHandles} from './ElementsTreeElement.js';
 
+export class AdoptedStyleSheetSetTreeElement extends UI.TreeOutline.TreeElement {
+  constructor(readonly adoptedStyleSheets: SDK.DOMModel.AdoptedStyleSheet[]) {
+    super('');
+    const documentElement = this.listItemElement.createChild('span');
+    UI.UIUtils.createTextChild(documentElement, '#adopted-style-sheets');
+    for (const adoptedStyleSheet of adoptedStyleSheets) {
+      this.appendChild(new AdoptedStyleSheetTreeElement(adoptedStyleSheet));
+    }
+  }
+}
+
 export class AdoptedStyleSheetTreeElement extends UI.TreeOutline.TreeElement {
   private eventListener: Common.EventTarget.EventDescriptor|null = null;
 

package/front_end/panels/elements/ComputedStyleWidget.ts

@@ -38,6 +38,7 @@ import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
+import * as ComputedStyleModule from '../../models/computed_style/computed_style.js';
 import * as TreeOutline from '../../ui/components/tree_outline/tree_outline.js';
 import * as InlineEditor from '../../ui/legacy/components/inline_editor/inline_editor.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
@@ -45,7 +46,6 @@ import * as UI from '../../ui/legacy/legacy.js';
 import * as Lit from '../../ui/lit/lit.js';
 
 import * as ElementsComponents from './components/components.js';
-import {type ComputedStyle, type ComputedStyleModel, Events} from './ComputedStyleModel.js';
 import computedStyleSidebarPaneStyles from './computedStyleSidebarPane.css.js';
 import {ImagePreviewPopover} from './ImagePreviewPopover.js';
 import {PlatformFontsWidget} from './PlatformFontsWidget.js';
@@ -53,7 +53,7 @@ import {categorizePropertyName, type Category, DefaultCategoryOrder} from './Pro
 import {Renderer, rendererBase, type RenderingContext, StringRenderer, URLRenderer} from './PropertyRenderer.js';
 import {StylePropertiesSection} from './StylePropertiesSection.js';
 
-const {html} = Lit;
+const {html, render} = Lit;
 
 const UIStrings = {
   /**
@@ -197,7 +197,7 @@ const createTraceElement =
       return trace;
     };
 
-/** clang-format off **/
+// clang-format off
 class ColorRenderer extends rendererBase(SDK.CSSPropertyParserMatchers.ColorMatch) {
   // clang-format on
   override render(match: SDK.CSSPropertyParserMatchers.ColorMatch, context: RenderingContext): Node[] {
@@ -261,28 +261,56 @@ type ComputedStyleData = {
   name: string,
 };
 
+interface ComputedStyleWidgetInput {
+  computedStylesTree: TreeOutline.TreeOutline.TreeOutline<ComputedStyleData>;
+  toolbar: HTMLElement;
+  hasMatches: boolean;
+  computedStyleModel: ComputedStyleModule.ComputedStyleModel.ComputedStyleModel;
+}
+
+type View = (input: ComputedStyleWidgetInput, output: null, target: HTMLElement) => void;
+
+export const DEFAULT_VIEW: View = (input, _output, target) => {
+  // clang-format off
+  render(html`
+    <div class="styles-sidebar-pane-toolbar">${input.toolbar}</div>
+    <div class="computed-style-tree-outline-container">
+      ${input.computedStylesTree}
+    </div>
+    ${!input.hasMatches ? html`<div class="gray-info-message">${i18nString(UIStrings.noMatchingProperty)}</div>` : ''}
+    <div class="platform-fonts-widget-container">
+      <devtools-widget .widgetConfig=${UI.Widget.widgetConfig(PlatformFontsWidget, { sharedModel: input.computedStyleModel})}></devtools-widget>
+    </div>
+  `, target);
+  // clang-format on
+};
+
 export class ComputedStyleWidget extends UI.Widget.VBox {
-  private computedStyleModel: ComputedStyleModel;
+  private computedStyleModel: ComputedStyleModule.ComputedStyleModel.ComputedStyleModel;
   private readonly showInheritedComputedStylePropertiesSetting: Common.Settings.Setting<boolean>;
   private readonly groupComputedStylesSetting: Common.Settings.Setting<boolean>;
   input: UI.Toolbar.ToolbarInput;
   private filterRegex: RegExp|null;
-  private readonly noMatchesElement: HTMLElement;
   private readonly linkifier: Components.Linkifier.Linkifier;
   private readonly imagePreviewPopover: ImagePreviewPopover;
 
   #computedStylesTree = new TreeOutline.TreeOutline.TreeOutline<ComputedStyleData>();
   #treeData?: TreeOutline.TreeOutline.TreeOutlineData<ComputedStyleData>;
+  readonly #view: View;
+  private readonly toolbarElement: HTMLElement;
 
-  constructor(computedStyleModel: ComputedStyleModel) {
+  constructor(computedStyleModel: ComputedStyleModule.ComputedStyleModel.ComputedStyleModel) {
     super({useShadowDom: true});
+    this.#view = DEFAULT_VIEW;
     this.registerRequiredCSS(computedStyleSidebarPaneStyles);
 
     this.contentElement.classList.add('styles-sidebar-computed-style-widget');
 
     this.computedStyleModel = computedStyleModel;
-    this.computedStyleModel.addEventListener(Events.CSS_MODEL_CHANGED, this.requestUpdate, this);
-    this.computedStyleModel.addEventListener(Events.COMPUTED_STYLE_CHANGED, this.requestUpdate, this);
+    this.computedStyleModel.addEventListener(
+        ComputedStyleModule.ComputedStyleModel.Events.CSS_MODEL_CHANGED, this.requestUpdate, this);
+    this.computedStyleModel.addEventListener(
+        ComputedStyleModule.ComputedStyleModel.Events.COMPUTED_STYLE_CHANGED, this.requestUpdate, this);
 
     this.showInheritedComputedStylePropertiesSetting =
         Common.Settings.Settings.instance().createSetting('show-inherited-computed-style-properties', false);
@@ -293,8 +321,12 @@ export class ComputedStyleWidget extends UI.Widget.VBox {
       this.requestUpdate();
     });
 
-    const hbox = this.contentElement.createChild('div', 'hbox styles-sidebar-pane-toolbar');
-    const toolbar = hbox.createChild('devtools-toolbar', 'styles-pane-toolbar');
+    this.toolbarElement = document.createElement('div');
+    this.toolbarElement.classList.add('hbox', 'styles-sidebar-pane-toolbar');
+    const toolbar = document.createElement('devtools-toolbar');
+    toolbar.classList.add('styles-pane-toolbar');
+    this.toolbarElement.appendChild(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);
@@ -306,11 +338,6 @@ export class ComputedStyleWidget extends UI.Widget.VBox {
     toolbar.appendToolbarItem(
         new UI.Toolbar.ToolbarSettingCheckbox(this.groupComputedStylesSetting, undefined, i18nString(UIStrings.group)));
 
-    this.noMatchesElement = this.contentElement.createChild('div', 'gray-info-message');
-    this.noMatchesElement.textContent = i18nString(UIStrings.noMatchingProperty);
-
-    this.contentElement.appendChild(this.#computedStylesTree);
-
     this.linkifier = new Components.Linkifier.Linkifier(maxLinkLength);
 
     this.imagePreviewPopover = new ImagePreviewPopover(this.contentElement, event => {
@@ -321,8 +348,7 @@ export class ComputedStyleWidget extends UI.Widget.VBox {
       return null;
     }, () => this.computedStyleModel.node);
 
-    const fontsWidget = new PlatformFontsWidget(this.computedStyleModel);
-    fontsWidget.show(this.contentElement);
+    this.#updateView({hasMatches: true});
   }
 
   override onResize(): void {
@@ -340,11 +366,24 @@ export class ComputedStyleWidget extends UI.Widget.VBox {
     UI.Context.Context.instance().setFlavor(ComputedStyleWidget, null);
   }
 
+  /**
+   * @param input.hasMatches Whether any properties matched the current filter (or if any properties exist at all).
+   */
+  #updateView({hasMatches}: {hasMatches: boolean}): void {
+    this.#view(
+        {
+          computedStylesTree: this.#computedStylesTree,
+          toolbar: this.toolbarElement,
+          hasMatches,
+          computedStyleModel: this.computedStyleModel,
+        },
+        null, this.contentElement);
+  }
+
   override async performUpdate(): Promise<void> {
-    const [nodeStyles, matchedStyles] =
-        await Promise.all([this.computedStyleModel.fetchComputedStyle(), this.fetchMatchedCascade()]);
+    const {computedStyle: nodeStyles, matchedStyles} = await this.computedStyleModel.fetchAllComputedStyleInfo();
     if (!nodeStyles || !matchedStyles) {
-      this.noMatchesElement.classList.remove('hidden');
+      this.#updateView({hasMatches: false});
       return;
     }
     const shouldGroupComputedStyles = this.groupComputedStylesSetting.get();
@@ -355,27 +394,9 @@ export class ComputedStyleWidget extends UI.Widget.VBox {
     }
   }
 
-  private async fetchMatchedCascade(): Promise<SDK.CSSMatchedStyles.CSSMatchedStyles|null> {
-    const node = this.computedStyleModel.node;
-    if (!node || !this.computedStyleModel.cssModel()) {
-      return null;
-    }
-
-    const cssModel = this.computedStyleModel.cssModel();
-    if (!cssModel) {
-      return null;
-    }
-
-    return await cssModel.cachedMatchedCascadeForNode(node).then(validateStyles.bind(this));
-
-    function validateStyles(this: ComputedStyleWidget, matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles|null):
-        SDK.CSSMatchedStyles.CSSMatchedStyles|null {
-      return matchedStyles && matchedStyles.node() === this.computedStyleModel.node ? matchedStyles : null;
-    }
-  }
-
-  private async rebuildAlphabeticalList(nodeStyle: ComputedStyle, matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles):
-      Promise<void> {
+  private async rebuildAlphabeticalList(
+      nodeStyle: ComputedStyleModule.ComputedStyleModel.ComputedStyle,
+      matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles): Promise<void> {
     this.imagePreviewPopover.hide();
     this.linkifier.reset();
     const cssModel = this.computedStyleModel.cssModel();
@@ -417,12 +438,13 @@ export class ComputedStyleWidget extends UI.Widget.VBox {
   }
 
   private async rebuildGroupedList(
-      nodeStyle: ComputedStyle|null, matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles|null): Promise<void> {
+      nodeStyle: ComputedStyleModule.ComputedStyleModel.ComputedStyle|null,
+      matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles|null): Promise<void> {
     this.imagePreviewPopover.hide();
     this.linkifier.reset();
     const cssModel = this.computedStyleModel.cssModel();
     if (!nodeStyle || !matchedStyles || !cssModel) {
-      this.noMatchesElement.classList.remove('hidden');
+      this.#updateView({hasMatches: false});
       return;
     }
 
@@ -644,7 +666,7 @@ export class ComputedStyleWidget extends UI.Widget.VBox {
       defaultRenderer: this.#treeData.defaultRenderer,
       compact: this.#treeData.compact,
     };
-    this.noMatchesElement.classList.toggle('hidden', Boolean(tree.length));
+    this.#updateView({hasMatches: Boolean(tree.length)});
   }
 
   private async filterGroupLists(): Promise<void> {
@@ -671,7 +693,7 @@ export class ComputedStyleWidget extends UI.Widget.VBox {
       compact: this.#treeData.compact,
     };
     await this.#computedStylesTree.expandRecursively(0);
-    this.noMatchesElement.classList.toggle('hidden', Boolean(tree.length));
+    this.#updateView({hasMatches: Boolean(tree.length)});
   }
 }
 

package/front_end/panels/elements/ElementsPanel.ts

@@ -41,6 +41,7 @@ import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import type * as Protocol from '../../generated/protocol.js';
 import * as Annotations from '../../models/annotations/annotations.js';
+import * as ComputedStyle from '../../models/computed_style/computed_style.js';
 import * as PanelCommon from '../../panels/common/common.js';
 import type * as Adorners from '../../ui/components/adorners/adorners.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
@@ -52,7 +53,6 @@ import type {AXTreeNodeData} from './AccessibilityTreeUtils.js';
 import {AccessibilityTreeView} from './AccessibilityTreeView.js';
 import {ColorSwatchPopoverIcon} from './ColorSwatchPopoverIcon.js';
 import * as ElementsComponents from './components/components.js';
-import {ComputedStyleModel} from './ComputedStyleModel.js';
 import {ComputedStyleWidget} from './ComputedStyleWidget.js';
 import elementsPanelStyles from './elementsPanel.css.js';
 import {DOMTreeWidget, type ElementsTreeOutline} from './ElementsTreeOutline.js';
@@ -242,7 +242,7 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
 
   private cssStyleTrackerByCSSModel: Map<SDK.CSSModel.CSSModel, SDK.CSSModel.CSSPropertyTracker>;
   #domTreeWidget: DOMTreeWidget;
-  #computedStyleModel: ComputedStyleModel;
+  #computedStyleModel: ComputedStyle.ComputedStyleModel.ComputedStyleModel;
 
   getTreeOutlineForTesting(): ElementsTreeOutline|undefined {
     return this.#domTreeWidget.getTreeOutlineForTesting();
@@ -302,7 +302,8 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
 
     crumbsContainer.appendChild(this.breadcrumbs);
 
-    this.#computedStyleModel = new ComputedStyleModel(UI.Context.Context.instance().flavor(SDK.DOMModel.DOMNode));
+    this.#computedStyleModel = new ComputedStyle.ComputedStyleModel.ComputedStyleModel(
+        UI.Context.Context.instance().flavor(SDK.DOMModel.DOMNode));
     UI.Context.Context.instance().addFlavorChangeListener(SDK.DOMModel.DOMNode, event => {
       this.#computedStyleModel.node = event.data;
       this.evaluateTrackingComputedStyleUpdatesForNode();

package/front_end/panels/elements/ElementsSidebarPane.ts

@@ -4,20 +4,22 @@
 
 import type * as Common from '../../core/common/common.js';
 import type * as SDK from '../../core/sdk/sdk.js';
+import * as ComputedStyle from '../../models/computed_style/computed_style.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
-import {type ComputedStyleModel, type CSSModelChangedEvent, Events} from './ComputedStyleModel.js';
-
 export class ElementsSidebarPane extends UI.Widget.VBox {
-  protected computedStyleModelInternal: ComputedStyleModel;
-  constructor(computedStyleModel: ComputedStyleModel, options: UI.Widget.WidgetOptions = {}) {
+  protected computedStyleModelInternal: ComputedStyle.ComputedStyleModel.ComputedStyleModel;
+  constructor(
+      computedStyleModel: ComputedStyle.ComputedStyleModel.ComputedStyleModel, options: UI.Widget.WidgetOptions = {}) {
     options.useShadowDom = options.useShadowDom ?? true;
     options.classes = options.classes ?? [];
     options.classes.push('flex-none');
     super(options);
     this.computedStyleModelInternal = computedStyleModel;
-    this.computedStyleModelInternal.addEventListener(Events.CSS_MODEL_CHANGED, this.onCSSModelChanged, this);
-    this.computedStyleModelInternal.addEventListener(Events.COMPUTED_STYLE_CHANGED, this.onComputedStyleChanged, this);
+    this.computedStyleModelInternal.addEventListener(
+        ComputedStyle.ComputedStyleModel.Events.CSS_MODEL_CHANGED, this.onCSSModelChanged, this);
+    this.computedStyleModelInternal.addEventListener(
+        ComputedStyle.ComputedStyleModel.Events.COMPUTED_STYLE_CHANGED, this.onComputedStyleChanged, this);
   }
 
   node(): SDK.DOMModel.DOMNode|null {
@@ -28,7 +30,7 @@ export class ElementsSidebarPane extends UI.Widget.VBox {
     return this.computedStyleModelInternal.cssModel();
   }
 
-  computedStyleModel(): ComputedStyleModel {
+  computedStyleModel(): ComputedStyle.ComputedStyleModel.ComputedStyleModel {
     return this.computedStyleModelInternal;
   }
 
@@ -36,7 +38,8 @@ export class ElementsSidebarPane extends UI.Widget.VBox {
     return;
   }
 
-  onCSSModelChanged(_event: Common.EventTarget.EventTargetEvent<CSSModelChangedEvent|null>): void {
+  onCSSModelChanged(
+      _event: Common.EventTarget.EventTargetEvent<ComputedStyle.ComputedStyleModel.CSSModelChangedEvent|null>): void {
   }
 
   onComputedStyleChanged(): void {

package/front_end/panels/elements/ElementsTreeElement.ts

@@ -721,7 +721,6 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     this.listItemElement.setAttribute(
         'jslog', `${VisualLogging.treeItem().parent('elementsTreeOutline').track({
           keydown: 'ArrowUp|ArrowDown|ArrowLeft|ArrowRight|Backspace|Delete|Enter|Space|Home|End',
-          resize: true,
           drag: true,
           click: true,
         })}`);