chrome-devtools-frontend 1.0.936819 → 1.0.938678

package/front_end/generated/protocol.d.ts

@@ -964,6 +964,26 @@ declare namespace Protocol {
       frameId?: Page.FrameId;
     }
 
+    /**
+     * This issue tracks information needed to print a deprecation message.
+     * The formatting is inherited from the old console.log version, see more at:
+     * https://source.chromium.org/chromium/chromium/src/+/main:third_party/blink/renderer/core/frame/deprecation.cc
+     * TODO(crbug.com/1264960): Re-work format to add i18n support per:
+     * https://source.chromium.org/chromium/chromium/src/+/main:third_party/blink/public/devtools_protocol/README.md
+     */
+    export interface DeprecationIssueDetails {
+      affectedFrame?: AffectedFrame;
+      sourceCodeLocation: SourceCodeLocation;
+      /**
+       * The content of the deprecation issue (this won't be translated),
+       * e.g. "window.inefficientLegacyStorageMethod will be removed in M97,
+       * around January 2022. Please use Web Storage or Indexed Database
+       * instead. This standard was abandoned in January, 1970. See
+       * https://www.chromestatus.com/feature/5684870116278272 for more details."
+       */
+      message?: string;
+    }
+
     /**
      * A unique identifier for the type of issue. Each type may use one of the
      * optional fields in InspectorIssueDetails to convey more specific
@@ -984,6 +1004,7 @@ declare namespace Protocol {
       NavigatorUserAgentIssue = 'NavigatorUserAgentIssue',
       WasmCrossOriginModuleSharingIssue = 'WasmCrossOriginModuleSharingIssue',
       GenericIssue = 'GenericIssue',
+      DeprecationIssue = 'DeprecationIssue',
     }
 
     /**
@@ -1006,6 +1027,7 @@ declare namespace Protocol {
       navigatorUserAgentIssueDetails?: NavigatorUserAgentIssueDetails;
       wasmCrossOriginModuleSharingIssue?: WasmCrossOriginModuleSharingIssueDetails;
       genericIssueDetails?: GenericIssueDetails;
+      deprecationIssueDetails?: DeprecationIssueDetails;
     }
 
     /**
@@ -4074,6 +4096,29 @@ declare namespace Protocol {
     }
   }
 
+  /**
+   * EventBreakpoints permits setting breakpoints on particular operations and
+   * events in targets that run JavaScript but do not have a DOM.
+   * JavaScript execution will stop on these operations as if there was a regular
+   * breakpoint set.
+   */
+  export namespace EventBreakpoints {
+
+    export interface SetInstrumentationBreakpointRequest {
+      /**
+       * Instrumentation name to stop on.
+       */
+      eventName: string;
+    }
+
+    export interface RemoveInstrumentationBreakpointRequest {
+      /**
+       * Instrumentation name to stop on.
+       */
+      eventName: string;
+    }
+  }
+
   /**
    * This domain facilitates obtaining document snapshots with DOM, layout, and style information.
    */
@@ -8528,6 +8573,12 @@ declare namespace Protocol {
        * Request initiator.
        */
       initiator: Initiator;
+      /**
+       * In the case that redirectResponse is populated, this flag indicates whether
+       * requestWillBeSentExtraInfo and responseReceivedExtraInfo events will be or were emitted
+       * for the request which was just redirected.
+       */
+      redirectHasExtraInfo: boolean;
       /**
        * Redirect response data.
        */
@@ -8602,6 +8653,11 @@ declare namespace Protocol {
        * Response data.
        */
       response: Response;
+      /**
+       * Indicates whether requestWillBeSentExtraInfo and responseReceivedExtraInfo events will be
+       * or were emitted for this request.
+       */
+      hasExtraInfo: boolean;
       /**
        * Frame identifier.
        */
@@ -10492,7 +10548,6 @@ declare namespace Protocol {
       ContentWebUSB = 'ContentWebUSB',
       ContentMediaSession = 'ContentMediaSession',
       ContentMediaSessionService = 'ContentMediaSessionService',
-      ContentMediaPlay = 'ContentMediaPlay',
       EmbedderPopupBlockerTabHelper = 'EmbedderPopupBlockerTabHelper',
       EmbedderSafeBrowsingTriggeredPopupBlocker = 'EmbedderSafeBrowsingTriggeredPopupBlocker',
       EmbedderSafeBrowsingThreatDetails = 'EmbedderSafeBrowsingThreatDetails',

package/front_end/legacy_test_runner/test_runner/test_runner.js

@@ -59,15 +59,13 @@ export async function _executeTestScript() {
 
     // Auto-start unit tests
     self.test = async function() {
-      // TODO(crbug.com/1011811): Remove eval when we use TypeScript which does support dynamic imports
-      await eval(`import("${testScriptURL}")`);
+      await import(testScriptURL);
     };
     return;
   }
 
   try {
-    // TODO(crbug.com/1011811): Remove eval when we use TypeScript which does support dynamic imports
-    await eval(`import("${testScriptURL}")`);
+    await import(testScriptURL);
   } catch (err) {
     TestRunner.addResult('TEST ENDED EARLY DUE TO UNCAUGHT ERROR:');
     TestRunner.addResult(err && err.stack || err);

package/front_end/models/issues_manager/DeprecationIssue.ts

@@ -0,0 +1,67 @@
+// Copyright 2021 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 type * as SDK from '../../core/sdk/sdk.js';
+import type * as Protocol from '../../generated/protocol.js';
+
+import {Issue, IssueCategory, IssueKind} from './Issue.js';
+import type {MarkdownIssueDescription} from './MarkdownIssueDescription.js';
+
+export const enum IssueCode {
+  DeprecationIssue = 'DeprecationIssue',
+}
+
+export class DeprecationIssue extends Issue<IssueCode> {
+  private issueDetails: Protocol.Audits.DeprecationIssueDetails;
+
+  constructor(issueDetails: Protocol.Audits.DeprecationIssueDetails, issuesModel: SDK.IssuesModel.IssuesModel) {
+    super(IssueCode.DeprecationIssue, issuesModel);
+    this.issueDetails = issueDetails;
+  }
+
+  getCategory(): IssueCategory {
+    return IssueCategory.Other;
+  }
+
+  details(): Protocol.Audits.DeprecationIssueDetails {
+    return this.issueDetails;
+  }
+
+  getDescription(): MarkdownIssueDescription|null {
+    return {
+      file: 'deprecation.md',
+      substitutions: new Map([
+        // TODO(crbug.com/1264960): Re-work format to add i18n support per:
+        // https://source.chromium.org/chromium/chromium/src/+/main:third_party/blink/public/devtools_protocol/README.md
+        ['PLACEHOLDER_message', String(this.issueDetails.message)],
+      ]),
+      links: [],
+    };
+  }
+
+  sources(): Iterable<Protocol.Audits.SourceCodeLocation> {
+    if (this.issueDetails.sourceCodeLocation) {
+      return [this.issueDetails.sourceCodeLocation];
+    }
+    return [];
+  }
+
+  primaryKey(): string {
+    return JSON.stringify(this.issueDetails);
+  }
+
+  getKind(): IssueKind {
+    return IssueKind.BreakingChange;
+  }
+
+  static fromInspectorIssue(issuesModel: SDK.IssuesModel.IssuesModel, inspectorIssue: Protocol.Audits.InspectorIssue):
+      DeprecationIssue[] {
+    const details = inspectorIssue.details.deprecationIssueDetails;
+    if (!details) {
+      console.warn('Deprecation issue without details received.');
+      return [];
+    }
+    return [new DeprecationIssue(details, issuesModel)];
+  }
+}

package/front_end/models/issues_manager/IssuesManager.ts

@@ -11,6 +11,7 @@ import {AttributionReportingIssue} from './AttributionReportingIssue.js';
 import {ContentSecurityPolicyIssue} from './ContentSecurityPolicyIssue.js';
 import {CorsIssue} from './CorsIssue.js';
 import {CrossOriginEmbedderPolicyIssue, isCrossOriginEmbedderPolicyIssue} from './CrossOriginEmbedderPolicyIssue.js';
+import {DeprecationIssue} from './DeprecationIssue.js';
 import {GenericIssue} from './GenericIssue.js';
 import {HeavyAdIssue} from './HeavyAdIssue.js';
 import type {Issue, IssueKind} from './Issue.js';
@@ -99,6 +100,10 @@ const issueCodeHandlers = new Map<
     Protocol.Audits.InspectorIssueCode.GenericIssue,
     GenericIssue.fromInspectorIssue,
   ],
+  [
+    Protocol.Audits.InspectorIssueCode.DeprecationIssue,
+    DeprecationIssue.fromInspectorIssue,
+  ],
 ]);
 
 /**

package/front_end/models/issues_manager/descriptions/deprecation.md

@@ -0,0 +1,3 @@
+# Deprecated Feature Used
+
+{PLACEHOLDER_message}

package/front_end/models/issues_manager/issues_manager.ts

@@ -7,6 +7,7 @@ import * as ContentSecurityPolicyIssue from './ContentSecurityPolicyIssue.js';
 import * as ContrastCheckTrigger from './ContrastCheckTrigger.js';
 import * as CorsIssue from './CorsIssue.js';
 import * as CrossOriginEmbedderPolicyIssue from './CrossOriginEmbedderPolicyIssue.js';
+import * as DeprecationIssue from './DeprecationIssue.js';
 import * as GenericIssue from './GenericIssue.js';
 import * as HeavyAdIssue from './HeavyAdIssue.js';
 import * as Issue from './Issue.js';
@@ -30,6 +31,7 @@ export {
   ContrastCheckTrigger,
   CorsIssue,
   CrossOriginEmbedderPolicyIssue,
+  DeprecationIssue,
   GenericIssue,
   HeavyAdIssue,
   Issue,

package/front_end/panels/accessibility/AXBreadcrumbsPane.ts

@@ -93,6 +93,9 @@ export class AXBreadcrumbsPane extends AccessibilitySubPane {
     let parent: AXBreadcrumb|null = null;
     this.inspectedNodeBreadcrumb = null;
     for (ancestor of ancestorChain) {
+      if (ancestor !== axNode && ancestor.ignored() && ancestor.parentNode()) {
+        continue;
+      }
       const breadcrumb = new AXBreadcrumb(ancestor, depth, (ancestor === axNode));
       if (parent) {
         parent.appendChild(breadcrumb);
@@ -112,6 +115,10 @@ export class AXBreadcrumbsPane extends AccessibilitySubPane {
 
     function append(
         parentBreadcrumb: AXBreadcrumb, axNode: SDK.AccessibilityModel.AccessibilityNode, localDepth: number): void {
+      if (axNode.ignored()) {
+        axNode.children().map(child => append(parentBreadcrumb, child, localDepth));
+        return;
+      }
       const childBreadcrumb = new AXBreadcrumb(axNode, localDepth, false);
       parentBreadcrumb.appendChild(childBreadcrumb);
 
@@ -121,7 +128,7 @@ export class AXBreadcrumbsPane extends AccessibilitySubPane {
       }
     }
 
-    if (this.inspectedNodeBreadcrumb) {
+    if (this.inspectedNodeBreadcrumb && !axNode.ignored()) {
       for (const child of axNode.children()) {
         append(this.inspectedNodeBreadcrumb, child, depth);
         if (child.backendDOMNodeId() === this.collapsingBreadcrumbId) {

package/front_end/panels/accessibility/accessibility-meta.ts

@@ -3,7 +3,6 @@
 // found in the LICENSE file.
 
 import * as i18n from '../../core/i18n/i18n.js';
-import * as Root from '../../core/root/root.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
 // eslint-disable-next-line rulesdir/es_modules_import
@@ -26,8 +25,6 @@ const i18nLazyString = i18n.i18n.getLazilyComputedLocalizedString.bind(undefined
 
 async function loadAccessibilityModule(): Promise<typeof Accessibility> {
   if (!loadedAccessibilityModule) {
-    // Side-effect import resources in module.json
-    await Root.Runtime.Runtime.instance().loadModulePromise('panels/accessibility');
     loadedAccessibilityModule = await import('./accessibility.js');
   }
   return loadedAccessibilityModule;

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

@@ -5,6 +5,7 @@
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as DataGrid from '../../../ui/components/data_grid/data_grid.js';
 import * as ComponentHelpers from '../../../ui/components/helpers/helpers.js';
+import * as IconButton from '../../../ui/components/icon_button/icon_button.js';
 import * as LitHtml from '../../../ui/lit-html/lit-html.js';
 
 import type * as Protocol from '../../../generated/protocol.js';
@@ -24,6 +25,33 @@ export const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 const {render, html} = LitHtml;
 
+export class ReportsGridStatusHeader extends HTMLElement {
+  static readonly litTagName = LitHtml.literal`devtools-resources-reports-grid-status-header`;
+  private readonly shadow = this.attachShadow({mode: 'open'});
+
+  connectedCallback(): void {
+    this.shadow.adoptedStyleSheets = [reportingApiGridStyles];
+    this.render();
+  }
+
+  private render(): void {
+    // Disabled until https://crbug.com/1079231 is fixed.
+    // clang-format off
+    render(html`
+      ${i18n.i18n.lockedString('Status')}
+      <x-link href="https://web.dev/reporting-api/#report-status">
+        <${IconButton.Icon.Icon.litTagName} class="inline-icon" .data=${{
+          iconName: 'help_outline',
+          color: 'var(--color-primary)',
+          width: '16px',
+          height: '16px',
+          } as IconButton.Icon.IconData}></${IconButton.Icon.Icon.litTagName}>
+      </x-link>
+    `, this.shadow, {host: this});
+    // clang-format on
+  }
+}
+
 export interface ReportsGridData {
   reports: Protocol.Network.ReportingApiReport[];
 }
@@ -59,21 +87,24 @@ export class ReportsGrid extends HTMLElement {
         {
           id: 'type',
           title: i18n.i18n.lockedString('Type'),
-          widthWeighting: 10,
+          widthWeighting: 20,
           hideable: false,
           visible: true,
         },
         {
           id: 'status',
           title: i18n.i18n.lockedString('Status'),
-          widthWeighting: 10,
+          widthWeighting: 20,
           hideable: false,
           visible: true,
+          titleElement: html`
+          <${ReportsGridStatusHeader.litTagName}></${ReportsGridStatusHeader.litTagName}>
+          `,
         },
         {
           id: 'destination',
           title: i18n.i18n.lockedString('Destination'),
-          widthWeighting: 10,
+          widthWeighting: 20,
           hideable: false,
           visible: true,
         },
@@ -116,7 +147,7 @@ export class ReportsGrid extends HTMLElement {
           </div>
         `}
       </div>
-    `, this.shadow);
+    `, this.shadow, {host: this});
     // clang-format on
   }
 
@@ -135,10 +166,13 @@ export class ReportsGrid extends HTMLElement {
   }
 }
 
+ComponentHelpers.CustomElements.defineComponent(
+    'devtools-resources-reports-grid-status-header', ReportsGridStatusHeader);
 ComponentHelpers.CustomElements.defineComponent('devtools-resources-reports-grid', ReportsGrid);
 
 declare global {
   interface HTMLElementTagNameMap {
+    'devtools-resources-reports-grid-status-header': ReportsGridStatusHeader;
     'devtools-resources-reports-grid': ReportsGrid;
   }
 }

package/front_end/panels/application/components/reportingApiGrid.css

@@ -33,3 +33,7 @@
 devtools-data-grid-controller {
   border: 1px solid var(--color-details-hairline);
 }
+
+.inline-icon {
+  vertical-align: text-bottom;
+}

package/front_end/panels/application/module.json

@@ -1,9 +1,7 @@
 {
   "dependencies": [
-    "ui/legacy/components/source_frame",
     "ui/legacy",
     "ui/legacy/components/perf_ui",
-    "panels/network",
-    "panels/sources"
+    "panels/network"
   ]
 }

package/front_end/panels/browser_debugger/browser_debugger-meta.ts

@@ -2,7 +2,6 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
@@ -83,8 +82,6 @@ let loadedBrowserDebuggerModule: (typeof BrowserDebugger|undefined);
 
 async function loadBrowserDebuggerModule(): Promise<typeof BrowserDebugger> {
   if (!loadedBrowserDebuggerModule) {
-    // Side-effect import resources in module.json
-    await Root.Runtime.Runtime.instance().loadModulePromise('panels/browser_debugger');
     loadedBrowserDebuggerModule = await import('./browser_debugger.js');
   }
   return loadedBrowserDebuggerModule;
@@ -99,8 +96,6 @@ let loadedSourcesModule: (typeof Sources|undefined);
 //  collision with node_app as a separate view with the same id is registered in it.
 async function loadSourcesModule(): Promise<typeof Sources> {
   if (!loadedSourcesModule) {
-    // Side-effect import resources in module.json
-    await Root.Runtime.Runtime.instance().loadModulePromise('sources');
     loadedSourcesModule = await import('../sources/sources.js');
   }
   return loadedSourcesModule;

package/front_end/panels/console/console-meta.ts

@@ -3,7 +3,6 @@
 // found in the LICENSE file.
 
 import * as Common from '../../core/common/common.js';
-import * as Root from '../../core/root/root.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
 // eslint-disable-next-line rulesdir/es_modules_import
@@ -118,8 +117,6 @@ let loadedConsoleModule: (typeof Console|undefined);
 
 async function loadConsoleModule(): Promise<typeof Console> {
   if (!loadedConsoleModule) {
-    // Side-effect import resources in module.json
-    await Root.Runtime.Runtime.instance().loadModulePromise('panels/console');
     loadedConsoleModule = await import('./console.js');
   }
   return loadedConsoleModule;
@@ -306,6 +303,7 @@ Common.Settings.registerSettingExtension({
 
 Common.Settings.registerSettingExtension({
   category: Common.Settings.SettingCategory.CONSOLE,
+  storageType: Common.Settings.SettingStorageType.Synced,
   title: i18nLazyString(UIStrings.groupSimilarMessagesInConsole),
   settingName: 'consoleGroupSimilar',
   settingType: Common.Settings.SettingType.BOOLEAN,

package/front_end/panels/coverage/coverage-meta.ts

@@ -3,7 +3,6 @@
 // found in the LICENSE file.
 
 import * as i18n from '../../core/i18n/i18n.js';
-import * as Root from '../../core/root/root.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
 // eslint-disable-next-line rulesdir/es_modules_import
@@ -38,8 +37,6 @@ let loadedCoverageModule: (typeof Coverage|undefined);
 
 async function loadCoverageModule(): Promise<typeof Coverage> {
   if (!loadedCoverageModule) {
-    // Side-effect import resources in module.json
-    await Root.Runtime.Runtime.instance().loadModulePromise('panels/coverage');
     loadedCoverageModule = await import('./coverage.js');
   }
   return loadedCoverageModule;

package/front_end/panels/css_overview/CSSOverviewCompletedView.ts

@@ -11,12 +11,9 @@ import * as TextUtils from '../../models/text_utils/text_utils.js';
 import * as DataGrid from '../../ui/legacy/components/data_grid/data_grid.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
-
-import cssOverviewCompletedViewStyles from './cssOverviewCompletedView.css.js';
-
-import type * as ProtocolProxyApi from '../../generated/protocol-proxy-api.js';
 import type * as Protocol from '../../generated/protocol.js';
 
+import cssOverviewCompletedViewStyles from './cssOverviewCompletedView.css.js';
 import type {OverviewController, PopulateNodesEvent, PopulateNodesEventNodes, PopulateNodesEventNodeTypes} from './CSSOverviewController.js';
 import {Events as CSSOverViewControllerEvents} from './CSSOverviewController.js';
 import {CSSOverviewSidebarPanel, SidebarEvents} from './CSSOverviewSidebarPanel.js';
@@ -227,15 +224,14 @@ export class CSSOverviewCompletedView extends UI.Panel.PanelWithSidebar {
   readonly #resultsContainer: UI.Widget.VBox;
   readonly #elementContainer: DetailsView;
   readonly #sideBar: CSSOverviewSidebarPanel;
-  #cssModel: SDK.CSSModel.CSSModel;
-  #domModel: SDK.DOMModel.DOMModel;
-  readonly #domAgent: ProtocolProxyApi.DOMApi;
+  #cssModel?: SDK.CSSModel.CSSModel;
+  #domModel?: SDK.DOMModel.DOMModel;
   #linkifier: Components.Linkifier.Linkifier;
   #viewMap: Map<string, ElementDetailsView>;
   #data: OverviewData|null;
   #fragment?: UI.Fragment.Fragment;
 
-  constructor(controller: OverviewController, target: SDK.Target.Target) {
+  constructor(controller: OverviewController) {
     super('css_overview_completed_view');
 
     this.#controller = controller;
@@ -264,14 +260,6 @@ export class CSSOverviewCompletedView extends UI.Panel.PanelWithSidebar {
     this.splitWidget().setSidebarWidget(this.#sideBar);
     this.splitWidget().setMainWidget(this.#mainContainer);
 
-    const cssModel = target.model(SDK.CSSModel.CSSModel);
-    const domModel = target.model(SDK.DOMModel.DOMModel);
-    if (!cssModel || !domModel) {
-      throw new Error('Target must provide CSS and DOM models');
-    }
-    this.#cssModel = cssModel;
-    this.#domModel = domModel;
-    this.#domAgent = target.domAgent();
     this.#linkifier = new Components.Linkifier.Linkifier(/* maxLinkLength */ 20, /* useLinkDecorator */ true);
 
     this.#viewMap = new Map();
@@ -300,6 +288,16 @@ export class CSSOverviewCompletedView extends UI.Panel.PanelWithSidebar {
     // TODO(paullewis): update the links in the panels in case source has been .
   }
 
+  initializeModels(target: SDK.Target.Target): void {
+    const cssModel = target.model(SDK.CSSModel.CSSModel);
+    const domModel = target.model(SDK.DOMModel.DOMModel);
+    if (!cssModel || !domModel) {
+      throw new Error('Target must provide CSS and DOM models');
+    }
+    this.#cssModel = cssModel;
+    this.#domModel = domModel;
+  }
+
   private sideBarItemSelected(event: Common.EventTarget.EventTargetEvent<string>): void {
     const {data} = event;
     const section = (this.#fragment as UI.Fragment.Fragment).$(data);
@@ -650,6 +648,9 @@ export class CSSOverviewCompletedView extends UI.Panel.PanelWithSidebar {
 
     let view = this.#viewMap.get(id);
     if (!view) {
+      if (!this.#domModel || !this.#cssModel) {
+        throw new Error('Unable to initialize CSS Overview, missing models');
+      }
       view = new ElementDetailsView(this.#controller, this.#domModel, this.#cssModel, this.#linkifier);
       view.populateNodes(payload.nodes);
       this.#viewMap.set(id, view);
@@ -970,7 +971,7 @@ export class ElementDetailsView extends UI.Widget.Widget {
     this.#elementGrid.setStriped(true);
     this.#elementGrid.addEventListener(DataGrid.DataGrid.Events.SortingChanged, this.sortMediaQueryDataGrid.bind(this));
 
-    this.element.appendChild(this.#elementGrid.element);
+    this.#elementGrid.asWidget().show(this.element);
   }
 
   private sortMediaQueryDataGrid(): void {

package/front_end/panels/css_overview/CSSOverviewPanel.ts

@@ -21,12 +21,13 @@ import type {UnusedDeclaration} from './CSSOverviewUnusedDeclarations.js';
 // eslint-disable-next-line @typescript-eslint/naming-convention
 let CSSOverviewPanelInstance: CSSOverviewPanel;
 
-export class CSSOverviewPanel extends UI.Panel.Panel {
-  readonly #model: CSSOverviewModel;
+export class CSSOverviewPanel extends UI.Panel.Panel implements SDK.TargetManager.Observer {
   readonly #controller: OverviewController;
   readonly #startView: CSSOverviewComponents.CSSOverviewStartView.CSSOverviewStartView;
   readonly #processingView: CSSOverviewProcessingView;
   readonly #completedView: CSSOverviewCompletedView;
+  #model?: CSSOverviewModel;
+  #target?: SDK.Target.Target;
   #backgroundColors!: Map<string, Set<Protocol.DOM.BackendNodeId>>;
   #textColors!: Map<string, Set<Protocol.DOM.BackendNodeId>>;
   #fillColors!: Map<string, Set<Protocol.DOM.BackendNodeId>>;
@@ -44,15 +45,14 @@ export class CSSOverviewPanel extends UI.Panel.Panel {
 
     this.element.classList.add('css-overview-panel');
 
-    const [model] = SDK.TargetManager.TargetManager.instance().models(CSSOverviewModel);
-    this.#model = (model as CSSOverviewModel);
-
     this.#controller = new OverviewController();
     this.#startView = new CSSOverviewComponents.CSSOverviewStartView.CSSOverviewStartView();
     this.#startView.addEventListener(
         'overviewstartrequested', () => this.#controller.dispatchEventToListeners(Events.RequestOverviewStart));
     this.#processingView = new CSSOverviewProcessingView(this.#controller);
-    this.#completedView = new CSSOverviewCompletedView(this.#controller, model.target());
+    this.#completedView = new CSSOverviewCompletedView(this.#controller);
+
+    SDK.TargetManager.TargetManager.instance().observeTargets(this);
 
     this.#controller.addEventListener(Events.RequestOverviewStart, _event => {
       Host.userMetrics.actionTaken(Host.UserMetrics.Action.CaptureCssOverviewClicked);
@@ -73,6 +73,26 @@ export class CSSOverviewPanel extends UI.Panel.Panel {
     return CSSOverviewPanelInstance;
   }
 
+  targetAdded(target: SDK.Target.Target): void {
+    if (this.#target) {
+      return;
+    }
+    this.#target = target;
+    this.#completedView.initializeModels(target);
+    const [model] = SDK.TargetManager.TargetManager.instance().models(CSSOverviewModel);
+    this.#model = (model as CSSOverviewModel);
+  }
+
+  targetRemoved(): void {
+  }
+
+  private getModel(): CSSOverviewModel {
+    if (!this.#model) {
+      throw new Error('Did not retrieve model information yet.');
+    }
+    return this.#model;
+  }
+
   private reset(): void {
     this.#backgroundColors = new Map();
     this.#textColors = new Map();
@@ -104,7 +124,7 @@ export class CSSOverviewPanel extends UI.Panel.Panel {
   }
 
   private requestNodeHighlight(evt: Common.EventTarget.EventTargetEvent<number>): void {
-    this.#model.highlightNode((evt.data as Protocol.DOM.BackendNodeId));
+    this.getModel().highlightNode((evt.data as Protocol.DOM.BackendNodeId));
   }
 
   private renderInitialView(): void {
@@ -144,10 +164,11 @@ export class CSSOverviewPanel extends UI.Panel.Panel {
   private async startOverview(): Promise<void> {
     this.renderOverviewStartedView();
 
+    const model = this.getModel();
     const [globalStyleStats, { elementCount, backgroundColors, textColors, textColorContrastIssues, fillColors, borderColors, fontInfo, unusedDeclarations }, mediaQueries] = await Promise.all([
-      this.#model.getGlobalStylesheetStats(),
-      this.#model.getNodeStyleStats(),
-      this.#model.getMediaQueries(),
+      model.getGlobalStylesheetStats(),
+      model.getNodeStyleStats(),
+      model.getMediaQueries(),
     ]);
 
     if (elementCount) {

package/front_end/panels/css_overview/css_overview-meta.ts

@@ -3,7 +3,6 @@
 // found in the LICENSE file.
 
 import * as i18n from '../../core/i18n/i18n.js';
-import * as Root from '../../core/root/root.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
 // eslint-disable-next-line rulesdir/es_modules_import
@@ -27,8 +26,6 @@ let loadedCSSOverviewModule: (typeof CSSOverview|undefined);
 
 async function loadCSSOverviewModule(): Promise<typeof CSSOverview> {
   if (!loadedCSSOverviewModule) {
-    // Side-effect import resources in module.json
-    await Root.Runtime.Runtime.instance().loadModulePromise('panels/css_overview');
     loadedCSSOverviewModule = await import('./css_overview.js');
   }
   return loadedCSSOverviewModule;

package/front_end/panels/elements/StylePropertyTreeElement.ts

@@ -1440,11 +1440,14 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
     const currentNode = this.parentPaneInternal.node();
     this.parentPaneInternal.setUserOperation(true);
 
+    styleText += Platform.StringUtilities.findUnclosedCssQuote(styleText);
+
     // Append a ";" if the new text does not end in ";".
     // FIXME: this does not handle trailing comments.
     if (styleText.length && !/;\s*$/.test(styleText)) {
       styleText += ';';
     }
+
     const overwriteProperty = !this.newProperty || hasBeenEditedIncrementally;
     let success: boolean = await this.property.setText(styleText, majorChange, overwriteProperty);
     // Revert to the original text if applying the new text failed