chrome-devtools-frontend 1.0.937775 → 1.0.938150

package/config/gni/all_devtools_files.gni

@@ -43,7 +43,6 @@ all_devtools_files = [
   "front_end/legacy_test_runner/elements_test_runner/ElementsTestRunner.js",
   "front_end/legacy_test_runner/elements_test_runner/SetOuterHTMLTestRunner.js",
   "front_end/legacy_test_runner/elements_test_runner/StylesUpdateLinksTestRunner.js",
-  "front_end/panels/elements/module.json",
   "front_end/emulated_devices/module.json",
   "front_end/panels/emulation/deviceModeToolbar.css",
   "front_end/panels/emulation/deviceModeView.css",
@@ -73,7 +72,6 @@ all_devtools_files = [
   "front_end/ui/legacy/components/perf_ui/overviewGrid.css",
   "front_end/ui/legacy/components/perf_ui/timelineGrid.css",
   "front_end/ui/legacy/components/perf_ui/timelineOverviewInfo.css",
-  "front_end/panels/protocol_monitor/module.json",
   "front_end/legacy_test_runner/performance_test_runner/performance_test_runner.js",
   "front_end/legacy_test_runner/performance_test_runner/TimelineDataTestRunner.js",
   "front_end/legacy_test_runner/performance_test_runner/TimelineTestRunner.js",
@@ -136,7 +134,6 @@ all_devtools_files = [
   "front_end/models/issues_manager/descriptions/TwaDigitalAssetLinksFailed.md",
   "front_end/models/issues_manager/descriptions/TwaHttpError.md",
   "front_end/models/issues_manager/descriptions/TwaPageUnavailableOffline.md",
-  "front_end/panels/protocol_monitor/module.json",
   "front_end/panels/application/module.json",
   "front_end/panels/screencast/module.json",
   "front_end/legacy_test_runner/sdk_test_runner/sdk_test_runner.js",
@@ -158,7 +155,6 @@ all_devtools_files = [
   "front_end/legacy_test_runner/sources_test_runner/LiveEditTestRunner.js",
   "front_end/legacy_test_runner/sources_test_runner/SearchTestRunner.js",
   "front_end/legacy_test_runner/sources_test_runner/SourcesTestRunner.js",
-  "front_end/panels/sources/module.json",
   "front_end/ui/legacy/components/text_editor/autocompleteTooltip.css",
   "front_end/ui/legacy/components/text_editor/cmdevtools.css",
   "front_end/ui/legacy/components/text_editor/module.json",

package/config/gni/devtools_grd_files.gni

@@ -302,6 +302,7 @@ grd_files_release_sources = [
   "front_end/models/issues_manager/descriptions/cspTrustedTypesPolicyViolation.md",
   "front_end/models/issues_manager/descriptions/cspTrustedTypesSinkViolation.md",
   "front_end/models/issues_manager/descriptions/cspURLViolation.md",
+  "front_end/models/issues_manager/descriptions/deprecation.md",
   "front_end/models/issues_manager/descriptions/deprecationNavigatorUserAgent.md",
   "front_end/models/issues_manager/descriptions/genericCrossOriginPortalPostMessageError.md",
   "front_end/models/issues_manager/descriptions/heavyAd.md",
@@ -360,7 +361,6 @@ grd_files_release_sources = [
   "front_end/panels/elements/elements-legacy.js",
   "front_end/panels/elements/elements-meta.js",
   "front_end/panels/elements/elements.js",
-  "front_end/panels/elements/elements_module.js",
   "front_end/panels/emulation/components/components.js",
   "front_end/panels/emulation/emulation-legacy.js",
   "front_end/panels/emulation/emulation-meta.js",
@@ -408,7 +408,6 @@ grd_files_release_sources = [
   "front_end/panels/profiler/profiler_module.js",
   "front_end/panels/protocol_monitor/protocol_monitor-meta.js",
   "front_end/panels/protocol_monitor/protocol_monitor.js",
-  "front_end/panels/protocol_monitor/protocol_monitor_module.js",
   "front_end/panels/screencast/screencast-meta.js",
   "front_end/panels/screencast/screencast.js",
   "front_end/panels/search/search-legacy.js",
@@ -432,7 +431,6 @@ grd_files_release_sources = [
   "front_end/panels/sources/sources-legacy.js",
   "front_end/panels/sources/sources-meta.js",
   "front_end/panels/sources/sources.js",
-  "front_end/panels/sources/sources_module.js",
   "front_end/panels/timeline/components/components.js",
   "front_end/panels/timeline/timeline-legacy.js",
   "front_end/panels/timeline/timeline-meta.js",
@@ -719,6 +717,7 @@ grd_files_debug_sources = [
   "front_end/models/issues_manager/ContrastCheckTrigger.js",
   "front_end/models/issues_manager/CorsIssue.js",
   "front_end/models/issues_manager/CrossOriginEmbedderPolicyIssue.js",
+  "front_end/models/issues_manager/DeprecationIssue.js",
   "front_end/models/issues_manager/GenericIssue.js",
   "front_end/models/issues_manager/HeavyAdIssue.js",
   "front_end/models/issues_manager/Issue.js",

package/front_end/Tests.js

@@ -1290,7 +1290,6 @@
 
   TestSuite.prototype.testInspectedElementIs = async function(nodeName) {
     this.takeControl();
-    await self.runtime.loadModulePromise('elements');
     if (!Elements.ElementsPanel.firstInspectElementNodeNameForTest) {
       await new Promise(f => this.addSniffer(Elements.ElementsPanel, 'firstInspectElementCompletedForTest', f));
     }

package/front_end/core/sdk/DOMModel.ts

@@ -159,7 +159,7 @@ export class DOMNode {
       this.childrenInternal = [];
     }
 
-    const frameOwnerTags = new Set(['EMBED', 'IFRAME', 'OBJECT', 'PORTAL']);
+    const frameOwnerTags = new Set(['EMBED', 'IFRAME', 'OBJECT', 'PORTAL', 'FENCEDFRAME']);
     if (payload.contentDocument) {
       this.contentDocumentInternal = new DOMDocument(this.#domModelInternal, payload.contentDocument);
       this.contentDocumentInternal.parentNode = this;

package/front_end/core/sdk/NetworkManager.ts

@@ -552,6 +552,7 @@ export class NetworkDispatcher implements ProtocolProxyApi.NetworkDispatcher {
           timestamp,
           type: type || Protocol.Network.ResourceType.Other,
           response: redirectResponse,
+          hasExtraInfo: false,
           frameId,
         });
       }

package/front_end/entrypoints/devtools_app/devtools_app.json

@@ -4,7 +4,6 @@
 
     { "name": "panels/lighthouse" },
     { "name": "panels/browser_debugger" },
-    { "name": "panels/elements" },
     { "name": "emulated_devices" },
     { "name": "panels/issues" },
     { "name": "panels/layers" },

package/front_end/entrypoints/node_app/node_app-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 loadedSourcesModule: (typeof Sources|undefined);
 
 async function loadHelpModule(): Promise<typeof Sources> {
   if (!loadedSourcesModule) {
-    // Side-effect import resources in module.json
-    await Root.Runtime.Runtime.instance().loadModulePromise('sources');
     loadedSourcesModule = await import('../../panels/sources/sources.js');
   }
   return loadedSourcesModule;

package/front_end/entrypoints/node_app/node_app.js

@@ -7,4 +7,7 @@ import '../node_main/node_main-meta.js';
 import './node_app-meta.js';
 import * as Startup from '../startup/startup.js';  // eslint-disable-line rulesdir/es_modules_import
 
+// Side-effect start the `node_main` module, which implements runnables in
+// the NodeMain class
+await import('../node_main/node_main.js');
 Startup.RuntimeInstantiator.startApplication('node_app');

package/front_end/entrypoints/shell/shell.json

@@ -6,8 +6,6 @@
     { "name": "ui/legacy/components/source_frame", "type": "autostart" },
 
     { "name": "ui/legacy/components/perf_ui" },
-    { "name": "panels/profiler" },
-    { "name": "panels/protocol_monitor"},
-    { "name": "panels/sources" }
+    { "name": "panels/profiler" }
   ]
 }

package/front_end/entrypoints/worker_app/worker_app.json

@@ -1,7 +1,6 @@
 {
   "modules" : [
     { "name": "panels/browser_debugger" },
-    { "name": "panels/elements" },
     { "name": "panels/issues" },
     { "name": "panels/layer_viewer" },
     { "name": "panels/network" },

package/front_end/generated/InspectorBackendCommands.js

@@ -276,7 +276,8 @@ export function registerCommands(inspectorBackend) {
     QuirksModeIssue: 'QuirksModeIssue',
     NavigatorUserAgentIssue: 'NavigatorUserAgentIssue',
     WasmCrossOriginModuleSharingIssue: 'WasmCrossOriginModuleSharingIssue',
-    GenericIssue: 'GenericIssue'
+    GenericIssue: 'GenericIssue',
+    DeprecationIssue: 'DeprecationIssue'
   });
   inspectorBackend.registerEvent('Audits.issueAdded', ['issue']);
   inspectorBackend.registerEnum('Audits.GetEncodedResponseRequestEncoding', {Webp: 'webp', Jpeg: 'jpeg', Png: 'png'});
@@ -890,6 +891,14 @@ export function registerCommands(inspectorBackend) {
   inspectorBackend.registerCommand(
       'DOMDebugger.setXHRBreakpoint', [{'name': 'url', 'type': 'string', 'optional': false}], []);
 
+  // EventBreakpoints.
+  inspectorBackend.registerCommand(
+      'EventBreakpoints.setInstrumentationBreakpoint', [{'name': 'eventName', 'type': 'string', 'optional': false}],
+      []);
+  inspectorBackend.registerCommand(
+      'EventBreakpoints.removeInstrumentationBreakpoint', [{'name': 'eventName', 'type': 'string', 'optional': false}],
+      []);
+
   // DOMSnapshot.
   inspectorBackend.registerCommand('DOMSnapshot.disable', [], []);
   inspectorBackend.registerCommand('DOMSnapshot.enable', [], []);
@@ -1630,13 +1639,14 @@ export function registerCommands(inspectorBackend) {
   ]);
   inspectorBackend.registerEvent('Network.requestServedFromCache', ['requestId']);
   inspectorBackend.registerEvent('Network.requestWillBeSent', [
-    'requestId', 'loaderId', 'documentURL', 'request', 'timestamp', 'wallTime', 'initiator', 'redirectResponse', 'type',
-    'frameId', 'hasUserGesture'
+    'requestId', 'loaderId', 'documentURL', 'request', 'timestamp', 'wallTime', 'initiator', 'redirectHasExtraInfo',
+    'redirectResponse', 'type', 'frameId', 'hasUserGesture'
   ]);
   inspectorBackend.registerEvent('Network.resourceChangedPriority', ['requestId', 'newPriority', 'timestamp']);
   inspectorBackend.registerEvent('Network.signedExchangeReceived', ['requestId', 'info']);
   inspectorBackend.registerEvent(
-      'Network.responseReceived', ['requestId', 'loaderId', 'timestamp', 'type', 'response', 'frameId']);
+      'Network.responseReceived',
+      ['requestId', 'loaderId', 'timestamp', 'type', 'response', 'hasExtraInfo', 'frameId']);
   inspectorBackend.registerEvent('Network.webSocketClosed', ['requestId', 'timestamp']);
   inspectorBackend.registerEvent('Network.webSocketCreated', ['requestId', 'url', 'initiator']);
   inspectorBackend.registerEvent('Network.webSocketFrameError', ['requestId', 'timestamp', 'errorMessage']);
@@ -2176,7 +2186,6 @@ export function registerCommands(inspectorBackend) {
     ContentWebUSB: 'ContentWebUSB',
     ContentMediaSession: 'ContentMediaSession',
     ContentMediaSessionService: 'ContentMediaSessionService',
-    ContentMediaPlay: 'ContentMediaPlay',
     EmbedderPopupBlockerTabHelper: 'EmbedderPopupBlockerTabHelper',
     EmbedderSafeBrowsingTriggeredPopupBlocker: 'EmbedderSafeBrowsingTriggeredPopupBlocker',
     EmbedderSafeBrowsingThreatDetails: 'EmbedderSafeBrowsingThreatDetails',

package/front_end/generated/SupportedCSSProperties.js

@@ -489,7 +489,7 @@ export const generatedProperties = [
   },
   {'name': 'font-variation-settings', 'inherited': true, 'keywords': ['normal']},
   {'name': 'font-weight', 'inherited': true, 'keywords': ['normal', 'bold', 'bolder', 'lighter']},
-  {'name': 'forced-color-adjust', 'inherited': true, 'keywords': ['auto', 'none']},
+  {'name': 'forced-color-adjust', 'inherited': true, 'keywords': ['auto', 'none', 'preserve-parent-color']},
   {'longhands': ['row-gap', 'column-gap'], 'name': 'gap'},
   {
     'longhands': [
@@ -764,7 +764,10 @@ export const generatedProperties = [
     'name': 'text-decoration'
   },
   {'name': 'text-decoration-color', 'keywords': ['currentcolor']},
-  {'name': 'text-decoration-line', 'keywords': ['none', 'underline', 'overline', 'line-through', 'blink']},
+  {
+    'name': 'text-decoration-line',
+    'keywords': ['none', 'underline', 'overline', 'line-through', 'blink', 'spelling-error', 'grammar-error']
+  },
   {'name': 'text-decoration-skip-ink', 'inherited': true, 'keywords': ['none', 'auto']},
   {'name': 'text-decoration-style', 'keywords': ['solid', 'double', 'dotted', 'dashed', 'wavy']},
   {'name': 'text-decoration-thickness', 'inherited': true, 'keywords': ['auto', 'from-font']},
@@ -1041,7 +1044,7 @@ export const generatedPropertyValues = {
   },
   'font-variation-settings': {'values': ['normal']},
   'font-weight': {'values': ['normal', 'bold', 'bolder', 'lighter']},
-  'forced-color-adjust': {'values': ['auto', 'none']},
+  'forced-color-adjust': {'values': ['auto', 'none', 'preserve-parent-color']},
   'grid-auto-columns': {'values': ['auto', 'min-content', 'max-content']},
   'grid-auto-flow': {'values': ['row', 'column']},
   'grid-auto-rows': {'values': ['auto', 'min-content', 'max-content']},
@@ -1152,7 +1155,8 @@ export const generatedPropertyValues = {
   'text-anchor': {'values': ['start', 'middle', 'end']},
   'text-combine-upright': {'values': ['none', 'all']},
   'text-decoration-color': {'values': ['currentcolor']},
-  'text-decoration-line': {'values': ['none', 'underline', 'overline', 'line-through', 'blink']},
+  'text-decoration-line':
+      {'values': ['none', 'underline', 'overline', 'line-through', 'blink', 'spelling-error', 'grammar-error']},
   'text-decoration-skip-ink': {'values': ['none', 'auto']},
   'text-decoration-style': {'values': ['solid', 'double', 'dotted', 'dashed', 'wavy']},
   'text-decoration-thickness': {'values': ['auto', 'from-font']},

package/front_end/generated/protocol-mapping.d.ts

@@ -1361,6 +1361,16 @@ export namespace ProtocolMapping {
      * Sets breakpoint on XMLHttpRequest.
      */
     'DOMDebugger.setXHRBreakpoint': {paramsType: [Protocol.DOMDebugger.SetXHRBreakpointRequest]; returnType: void;};
+    /**
+     * Sets breakpoint on particular native event.
+     */
+    'EventBreakpoints.setInstrumentationBreakpoint':
+        {paramsType: [Protocol.EventBreakpoints.SetInstrumentationBreakpointRequest]; returnType: void;};
+    /**
+     * Removes breakpoint on particular native event.
+     */
+    'EventBreakpoints.removeInstrumentationBreakpoint':
+        {paramsType: [Protocol.EventBreakpoints.RemoveInstrumentationBreakpointRequest]; returnType: void;};
     /**
      * Disables DOM snapshot agent for the given page.
      */

package/front_end/generated/protocol-proxy-api.d.ts

@@ -37,6 +37,8 @@ declare namespace ProtocolProxyApi {
 
     DOMDebugger: DOMDebuggerApi;
 
+    EventBreakpoints: EventBreakpointsApi;
+
     DOMSnapshot: DOMSnapshotApi;
 
     DOMStorage: DOMStorageApi;
@@ -127,6 +129,8 @@ declare namespace ProtocolProxyApi {
 
     DOMDebugger: DOMDebuggerDispatcher;
 
+    EventBreakpoints: EventBreakpointsDispatcher;
+
     DOMSnapshot: DOMSnapshotDispatcher;
 
     DOMStorage: DOMStorageDispatcher;
@@ -1164,6 +1168,21 @@ declare namespace ProtocolProxyApi {
   }
   export interface DOMDebuggerDispatcher {}
 
+  export interface EventBreakpointsApi {
+    /**
+     * Sets breakpoint on particular native event.
+     */
+    invoke_setInstrumentationBreakpoint(params: Protocol.EventBreakpoints.SetInstrumentationBreakpointRequest):
+        Promise<Protocol.ProtocolResponseWithError>;
+
+    /**
+     * Removes breakpoint on particular native event.
+     */
+    invoke_removeInstrumentationBreakpoint(params: Protocol.EventBreakpoints.RemoveInstrumentationBreakpointRequest):
+        Promise<Protocol.ProtocolResponseWithError>;
+  }
+  export interface EventBreakpointsDispatcher {}
+
   export interface DOMSnapshotApi {
     /**
      * Disables DOM snapshot agent for the given page.

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/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/application/module.json

@@ -2,7 +2,6 @@
   "dependencies": [
     "ui/legacy",
     "ui/legacy/components/perf_ui",
-    "panels/network",
-    "panels/sources"
+    "panels/network"
   ]
 }

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

@@ -99,8 +99,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/browser_debugger/module.json

@@ -1,6 +1,3 @@
 {
-  "dependencies": [
-    "panels/elements",
-    "panels/sources"
-  ]
+  "dependencies": []
 }

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 {