chrome-devtools-frontend 1.0.1578729 → 1.0.1581449

package/front_end/panels/application/DeviceBoundSessionsView.ts

@@ -582,27 +582,25 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: ViewOutput, target: HTML
         <devtools-report>
           <devtools-report-section-header role="heading" aria-level="2">${
         i18nString(UIStrings.sessionConfig)}</devtools-report-section-header>
-          ${renderKeyValue(i18nString(UIStrings.keySite), key.site, 'dbsc-site')}
-          ${renderKeyValue(i18nString(UIStrings.keyId), key.id, 'dbsc-id')}
-          ${renderKeyValue(i18nString(UIStrings.refreshUrl), sessionAndEvents.session.refreshUrl, 'dbsc-refresh-url')}
-          ${
-        renderKeyValue(
-            i18nString(UIStrings.expiryDate), new Date(sessionAndEvents.session.expiryDate * 1000).toLocaleString(),
-            'dbsc-expiry-date')}
-          ${
-        renderKeyValue(
-            i18nString(UIStrings.cachedChallenge), sessionAndEvents.session.cachedChallenge || '',
-            'dbsc-cached-challenge')}
-          ${
-        renderKeyValue(
-            i18nString(UIStrings.allowedRefreshInitiators),
-            sessionAndEvents.session.allowedRefreshInitiators.join(', '), 'dbsc-allowed-refresh-initiators')}
+          <devtools-report-key>${i18nString(UIStrings.keySite)}</devtools-report-key>
+          <devtools-report-value>${key.site}</devtools-report-value>
+          <devtools-report-key>${i18nString(UIStrings.keyId)}</devtools-report-key>
+          <devtools-report-value>${key.id}</devtools-report-value>
+          <devtools-report-key>${i18nString(UIStrings.refreshUrl)}</devtools-report-key>
+          <devtools-report-value>${sessionAndEvents.session.refreshUrl}</devtools-report-value>
+          <devtools-report-key>${i18nString(UIStrings.expiryDate)}</devtools-report-key>
+          <devtools-report-value>${
+        new Date(sessionAndEvents.session.expiryDate * 1000).toLocaleString()}</devtools-report-value>
+          <devtools-report-key>${i18nString(UIStrings.cachedChallenge)}</devtools-report-key>
+          <devtools-report-value>${sessionAndEvents.session.cachedChallenge || ''}</devtools-report-value>
+          <devtools-report-key>${i18nString(UIStrings.allowedRefreshInitiators)}</devtools-report-key>
+          <devtools-report-value>${sessionAndEvents.session.allowedRefreshInitiators.join(', ')}</devtools-report-value>
           <devtools-report-section-header role="heading" aria-level="2">${
         i18nString(UIStrings.scope)}</devtools-report-section-header>
-          ${renderKeyValue(i18nString(UIStrings.origin), inclusionRules.origin, 'dbsc-origin')}
-          ${
-        renderKeyValue(
-            i18nString(UIStrings.includeSite), boolToString(inclusionRules.includeSite), 'dbsc-include-site')}
+          <devtools-report-key>${i18nString(UIStrings.origin)}</devtools-report-key>
+          <devtools-report-value>${inclusionRules.origin}</devtools-report-value>
+          <devtools-report-key>${i18nString(UIStrings.includeSite)}</devtools-report-key>
+          <devtools-report-value>${boolToString(inclusionRules.includeSite)}</devtools-report-value>
         </devtools-report>
         ${
         inclusionRules.urlRules.length > 0 ? html`
@@ -710,78 +708,62 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: ViewOutput, target: HTML
   const creationEventDetails =
       selectedEvent?.creationEventDetails &&
       html`
-            ${
-          renderKeyValue(
-              i18nString(UIStrings.fetchResult), fetchResultToString(selectedEvent.creationEventDetails.fetchResult),
-              'dbsc-creation-fetch-result')}
-            ${
-          selectedEvent.creationEventDetails.newSession &&
-          html`
-             ${
-              renderKeyValue(
-                  i18nString(UIStrings.updatedSessionConfig), i18nString(UIStrings.yes),
-                  'dbsc-creation-updated-session-config')}
+          <devtools-report-key>${i18nString(UIStrings.fetchResult)}</devtools-report-key>
+          <devtools-report-value>${
+          fetchResultToString(selectedEvent.creationEventDetails.fetchResult)}</devtools-report-value>
+            ${selectedEvent.creationEventDetails.newSession && html`
+              <devtools-report-key>${i18nString(UIStrings.updatedSessionConfig)}</devtools-report-key>
+              <devtools-report-value>${i18nString(UIStrings.yes)}</devtools-report-value>
             `}
           `;
   const refreshEventDetails =
       selectedEvent?.refreshEventDetails &&
       html`
-          ${
-          renderKeyValue(
-              i18nString(UIStrings.refreshResult),
-              refreshResultToString(selectedEvent.refreshEventDetails.refreshResult), 'dbsc-refresh-result')}
-          ${
-          renderKeyValue(
-              i18nString(UIStrings.causedAnyRequestDeferrals),
-              boolToString(!selectedEvent.refreshEventDetails.wasFullyProactiveRefresh),
-              'dbsc-refresh-was-fully-proactive-refresh')}
+          <devtools-report-key>${i18nString(UIStrings.refreshResult)}</devtools-report-key>
+          <devtools-report-value>${
+          refreshResultToString(selectedEvent.refreshEventDetails.refreshResult)}</devtools-report-value>
+          <devtools-report-key>${i18nString(UIStrings.causedAnyRequestDeferrals)}</devtools-report-key>
+          <devtools-report-value>${
+          boolToString(!selectedEvent.refreshEventDetails.wasFullyProactiveRefresh)}</devtools-report-value>
             ${
           selectedEvent.refreshEventDetails.fetchResult &&
           html`
-              ${
-              renderKeyValue(
-                  i18nString(UIStrings.fetchResult), fetchResultToString(selectedEvent.refreshEventDetails.fetchResult),
-                  'dbsc-refresh-fetch-result')}
+              <devtools-report-key>${i18nString(UIStrings.fetchResult)}</devtools-report-key>
+              <devtools-report-value>${
+              fetchResultToString(selectedEvent.refreshEventDetails.fetchResult)}</devtools-report-value>
             `}
-            ${
-          selectedEvent.refreshEventDetails.newSession &&
-          html`
-              ${
-              renderKeyValue(
-                  i18nString(UIStrings.updatedSessionConfig), i18nString(UIStrings.yes),
-                  'dbsc-refresh-updated-session-config')}
+            ${selectedEvent.refreshEventDetails.newSession && html`
+              <devtools-report-key>${i18nString(UIStrings.updatedSessionConfig)}</devtools-report-key>
+              <devtools-report-value>${i18nString(UIStrings.yes)}</devtools-report-value>
             `}
           `;
   const challengeEventDetails =
       selectedEvent?.challengeEventDetails &&
       html`
-          ${
-          renderKeyValue(
-              i18nString(UIStrings.challengeResult),
-              challengeResultToString(selectedEvent.challengeEventDetails.challengeResult), 'dbsc-challenge-result')}
-          ${
-          renderKeyValue(
-              i18nString(UIStrings.challenge), selectedEvent.challengeEventDetails.challenge, 'dbsc-challenge')}
+          <devtools-report-key>${i18nString(UIStrings.challengeResult)}</devtools-report-key>
+          <devtools-report-value>${
+          challengeResultToString(selectedEvent.challengeEventDetails.challengeResult)}</devtools-report-value>
+          <devtools-report-key>${i18nString(UIStrings.challenge)}</devtools-report-key>
+          <devtools-report-value>${selectedEvent.challengeEventDetails.challenge}</devtools-report-value>
           `;
   const terminationEventDetails =
       selectedEvent?.terminationEventDetails &&
       html`
-          ${
-          renderKeyValue(
-              i18nString(UIStrings.deletionReason),
-              deletionReasonToString(selectedEvent.terminationEventDetails.deletionReason), 'dbsc-termination-reason')}
+          <devtools-report-key>${i18nString(UIStrings.deletionReason)}</devtools-report-key>
+          <devtools-report-value>${
+          deletionReasonToString(selectedEvent.terminationEventDetails.deletionReason)}</devtools-report-value>
           `;
   const eventDetailsContentHtml = selectedEvent ?
       html`
         <devtools-report>
-          ${renderKeyValue(i18nString(UIStrings.keySite), selectedEvent.site, 'dbsc-event-site')}
-          ${
-          selectedEvent.sessionId &&
-          renderKeyValue(i18nString(UIStrings.sessionId), selectedEvent.sessionId, 'dbsc-event-session-id')}
-          ${renderKeyValue(i18nString(UIStrings.type), getEventTypeString(selectedEvent), 'dbsc-event-type')}
-          ${
-          renderKeyValue(
-              i18nString(UIStrings.eventResult), succeededToString(selectedEvent.succeeded), 'dbsc-event-result')}
+          <devtools-report-key>${i18nString(UIStrings.keySite)}</devtools-report-key>
+          <devtools-report-value>${selectedEvent.site}</devtools-report-value>
+          <devtools-report-key>${i18nString(UIStrings.sessionId)}</devtools-report-key>
+          <devtools-report-value>${selectedEvent.sessionId}</devtools-report-value>
+          <devtools-report-key>${i18nString(UIStrings.type)}</devtools-report-key>
+          <devtools-report-value>${getEventTypeString(selectedEvent)}</devtools-report-value>
+          <devtools-report-key>${i18nString(UIStrings.eventResult)}</devtools-report-key>
+          <devtools-report-value>${succeededToString(selectedEvent.succeeded)}</devtools-report-value>
           ${creationEventDetails}
           ${refreshEventDetails}
           ${challengeEventDetails}
@@ -888,13 +870,6 @@ export class DeviceBoundSessionsView extends UI.Widget.VBox {
   }
 }
 
-function renderKeyValue(key: string, value: string, id: string): TemplateResult {
-  return html`
-    <devtools-report-key id=${id}>${key}</devtools-report-key>
-    <devtools-report-value role="text" aria-describedby=${id}>${value}</devtools-report-value>
-  `;
-}
-
 function ruleTypeToString(ruleType: Protocol.Network.DeviceBoundSessionUrlRuleRuleType): string {
   switch (ruleType) {
     case Protocol.Network.DeviceBoundSessionUrlRuleRuleType.Exclude:

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/AiCodeGenerationTeaser.ts

@@ -18,11 +18,11 @@ const UIStringsNotTranslate = {
   /**
    * @description Text for teaser to generate code.
    */
-  ctrlItoGenerateCode: 'Ctrl+I to generate code',
+  ctrlItoGenerateCode: 'ctrl+i to generate code',
   /**
    * @description Text for teaser to generate code in Mac.
    */
-  cmdItoGenerateCode: 'Cmd+I to generate code',
+  cmdItoGenerateCode: 'cmd+i to generate code',
   /**
    * @description Aria label for teaser to generate code.
    */

package/front_end/panels/common/AiCodeGenerationUpgradeDialog.ts

@@ -22,16 +22,16 @@ const UIStringsNotTranslate = {
    * @description First item in the description.
    */
   describeCodeInComment:
-      'Pressing Ctrl+I on a comment in the Console and Sources panels now generates entire code blocks based on the instructions in the comment.',
+      'Pressing ctrl+i on a comment in the Console and Sources panels now generates entire code blocks based on the instructions in the comment',
   /**
    * @description First item in the description.
    */
   describeCodeInCommentForMacOs:
-      'Pressing Cmd+I on a comment in the Console and Sources panels now generates entire code blocks based on the instructions in the comment.',
+      'Pressing cmd+i on a comment in the Console and Sources panels now generates entire code blocks based on the instructions in the comment',
   /**
    * @description Second item in the description.
    */
-  asYouType: 'You will still receive the real-time, as-you-type suggestions to help you code faster.',
+  asYouType: 'You will still receive the real-time, as-you-type suggestions to help you code faster',
   /**
    * @description Third item in the description.
    */
@@ -97,7 +97,7 @@ export class AiCodeGenerationUpgradeDialog {
           <div class="right-buttons">
             <devtools-button
               @click=${() => {
-                  result.resolve(true);
+                  result.resolve(false);
                   void UI.ViewManager.ViewManager.instance().showView('chrome-ai');
                 }}
               jslogcontext="ai-code-generation-upgrade-dialog.manage-in-settings"

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/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

@@ -11,6 +11,19 @@ import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 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;
 
@@ -58,6 +71,8 @@ export class AdoptedStyleSheetTreeElement extends UI.TreeOutline.TreeElement {
 }
 
 export class AdoptedStyleSheetContentsTreeElement extends UI.TreeOutline.TreeElement {
+  private editing: EditorHandles|null = null;
+
   constructor(private readonly styleSheetHeader: SDK.CSSStyleSheetHeader.CSSStyleSheetHeader) {
     super('');
   }
@@ -69,6 +84,9 @@ export class AdoptedStyleSheetContentsTreeElement extends UI.TreeOutline.TreeEle
   }
 
   override onunbind(): void {
+    if (this.editing) {
+      this.editing.cancel();
+    }
     this.styleSheetHeader.cssModel().removeEventListener(
         SDK.CSSModel.Events.StyleSheetChanged, this.onStyleSheetChanged, this);
   }
@@ -91,4 +109,75 @@ export class AdoptedStyleSheetContentsTreeElement extends UI.TreeOutline.TreeEle
       void this.onpopulate();
     }
   }
+
+  override ondblclick(event: Event): boolean {
+    if (this.editing) {
+      return false;
+    }
+    void this.startEditing(event.target as Element);
+    return false;
+  }
+
+  override onenter(): boolean {
+    if (this.editing) {
+      return false;
+    }
+    const target = this.listItemElement.querySelector('.webkit-html-text-node');
+    if (target) {
+      void this.startEditing(target);
+      return true;
+    }
+    return false;
+  }
+
+  private async startEditing(target: Element): Promise<void> {
+    if (this.editing || UI.UIUtils.isBeingEdited(target)) {
+      return;
+    }
+
+    const textNode = target.enclosingNodeOrSelfWithClass('webkit-html-text-node');
+    if (!textNode) {
+      return;
+    }
+
+    const data = await this.styleSheetHeader.requestContentData();
+    textNode.textContent = (TextUtils.ContentData.ContentData.isError(data) || !data.isTextContent) ? '' : data.text;
+
+    const config =
+        new UI.InplaceEditor.Config(this.editingCommitted.bind(this), () => this.editingCancelled(), undefined);
+
+    const editorHandles = UI.InplaceEditor.InplaceEditor.startEditing(textNode, config);
+    if (!editorHandles) {
+      return;
+    }
+
+    this.editing = {
+      commit: editorHandles.commit,
+      cancel: editorHandles.cancel,
+      editor: undefined,
+      resize: () => {},
+    };
+
+    const componentSelection = this.listItemElement.getComponentSelection();
+    componentSelection?.selectAllChildren(textNode);
+  }
+
+  private async editingCommitted(element: Element, newText: string, oldText: string|null): Promise<void> {
+    this.editing = null;
+
+    if (newText !== oldText) {
+      await this.styleSheetHeader.cssModel().setStyleSheetText(this.styleSheetHeader.id, newText, false);
+    }
+
+    this.editingCancelled();
+  }
+
+  private editingCancelled(): void {
+    this.editing = null;
+    void this.onpopulate();
+  }
+
+  isEditing(): boolean {
+    return this.editing !== 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';
@@ -262,7 +262,7 @@ type ComputedStyleData = {
 };
 
 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;
@@ -274,15 +274,17 @@ export class ComputedStyleWidget extends UI.Widget.VBox {
   #computedStylesTree = new TreeOutline.TreeOutline.TreeOutline<ComputedStyleData>();
   #treeData?: TreeOutline.TreeOutline.TreeOutlineData<ComputedStyleData>;
 
-  constructor(computedStyleModel: ComputedStyleModel) {
+  constructor(computedStyleModel: ComputedStyleModule.ComputedStyleModel.ComputedStyleModel) {
     super({useShadowDom: true});
     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);
@@ -374,8 +376,9 @@ export class ComputedStyleWidget extends UI.Widget.VBox {
     }
   }
 
-  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,7 +420,8 @@ 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();

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 {