chrome-devtools-frontend 1.0.922849 → 1.0.922924

package/front_end/core/common/Console.ts

@@ -7,7 +7,7 @@ import {reveal} from './Revealer.js';
 
 let consoleInstance: Console;
 
-export class Console extends ObjectWrapper {
+export class Console extends ObjectWrapper<EventTypes> {
   private readonly messagesInternal: Message[];
   /**
    * Instantiable via the instance() factory below.
@@ -64,6 +64,10 @@ export enum Events {
   MessageAdded = 'messageAdded',
 }
 
+export type EventTypes = {
+  [Events.MessageAdded]: Message,
+};
+
 // TODO(crbug.com/1167717): Make this a const enum again
 // eslint-disable-next-line rulesdir/const_enum
 export enum MessageLevel {

package/front_end/core/host/InspectorFrontendHost.ts

@@ -36,7 +36,7 @@ import * as i18n from '../i18n/i18n.js';
 import * as Platform from '../platform/platform.js';
 import * as Root from '../root/root.js';
 
-import type {CanShowSurveyResult, ContextMenuDescriptor, EnumeratedHistogram, ExtensionDescriptor, InspectorFrontendHostAPI, LoadNetworkResourceResult, ShowSurveyResult} from './InspectorFrontendHostAPI.js';
+import type {CanShowSurveyResult, ContextMenuDescriptor, EnumeratedHistogram, EventTypes, ExtensionDescriptor, InspectorFrontendHostAPI, LoadNetworkResourceResult, ShowSurveyResult} from './InspectorFrontendHostAPI.js';
 import {EventDescriptors, Events} from './InspectorFrontendHostAPI.js';
 import {streamWrite as resourceLoaderStreamWrite} from './ResourceLoader.js';
 
@@ -54,8 +54,7 @@ const MAX_RECORDED_HISTOGRAMS_SIZE = 100;
 
 export class InspectorFrontendHostStub implements InspectorFrontendHostAPI {
   private readonly urlsBeingSaved: Map<string, string[]>;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  events!: Common.EventTarget.EventTarget<any>;
+  events!: Common.EventTarget.EventTarget<EventTypes>;
   private windowVisible?: boolean;
 
   recordedEnumeratedHistograms: {actionName: EnumeratedHistogram, actionCode: number}[] = [];
@@ -379,7 +378,8 @@ class InspectorFrontendAPIImpl {
       // Single argument methods get dispatched with the param.
       if (signature.length < 2) {
         try {
-          InspectorFrontendHostInstance.events.dispatchEventToListeners(name, params[0]);
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          InspectorFrontendHostInstance.events.dispatchEventToListeners<any>(name, params[0]);
         } catch (error) {
           console.error(error + ' ' + error.stack);
         }
@@ -392,7 +392,8 @@ class InspectorFrontendAPIImpl {
         data[signature[i]] = params[i];
       }
       try {
-        InspectorFrontendHostInstance.events.dispatchEventToListeners(name, data);
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        InspectorFrontendHostInstance.events.dispatchEventToListeners<any>(name, data);
       } catch (error) {
         console.error(error + ' ' + error.stack);
       }

package/front_end/core/host/InspectorFrontendHostAPI.ts

@@ -68,6 +68,108 @@ export const EventDescriptors = [
   [Events.ShowPanel, 'showPanel', ['panelName']],
 ];
 
+export interface DispatchMessageChunkEvent {
+  messageChunk: string;
+  messageSize: number;
+}
+
+export interface EyeDropperPickedColorEvent {
+  r: number;
+  g: number;
+  b: number;
+  a: number;
+}
+
+export interface DevToolsFileSystem {
+  type: string;
+  fileSystemName: string;
+  rootURL: string;
+  fileSystemPath: string;
+}
+
+export interface FileSystemAddedEvent {
+  errorMessage?: string;
+  fileSystem: DevToolsFileSystem|null;
+}
+
+export interface FilesChangedEvent {
+  changed: string[];
+  added: string[];
+  removed: string[];
+}
+
+export interface IndexingEvent {
+  requestId: number;
+  fileSystemPath: string;
+}
+
+export interface IndexingTotalWorkCalculatedEvent extends IndexingEvent {
+  totalWork: number;
+}
+
+export interface IndexingWorkedEvent extends IndexingEvent {
+  worked: number;
+}
+
+export interface KeyEventUnhandledEvent {
+  type: string;
+  key: string;
+  keyCode: number;
+  modifiers: number;
+}
+
+export interface RevealSourceLineEvent {
+  url: string;
+  lineNumber: number;
+  columnNumber: number;
+}
+
+export interface SavedURLEvent {
+  url: string;
+  fileSystemPath: string;
+}
+
+export interface SearchCompletedEvent {
+  requestId: number;
+  files: string[];
+}
+
+// While `EventDescriptors` are used to dynamically dispatch host binding events,
+// the `EventTypes` "type map" is used for type-checking said events by TypeScript.
+// `EventTypes` is not used at runtime.
+// Please note that the "dispatch" side can't be type-checked as the dispatch is
+// done dynamically.
+export type EventTypes = {
+  [Events.AppendedToURL]: string,
+  [Events.CanceledSaveURL]: string,
+  [Events.ContextMenuCleared]: void,
+  [Events.ContextMenuItemSelected]: number,
+  [Events.DeviceCountUpdated]: number,
+  [Events.DevicesDiscoveryConfigChanged]: Adb.Config,
+  [Events.DevicesPortForwardingStatusChanged]: void,
+  [Events.DevicesUpdated]: void,
+  [Events.DispatchMessage]: string,
+  [Events.DispatchMessageChunk]: DispatchMessageChunkEvent,
+  [Events.EnterInspectElementMode]: void,
+  [Events.EyeDropperPickedColor]: EyeDropperPickedColorEvent,
+  [Events.FileSystemsLoaded]: DevToolsFileSystem[],
+  [Events.FileSystemRemoved]: string,
+  [Events.FileSystemAdded]: FileSystemAddedEvent,
+  [Events.FileSystemFilesChangedAddedRemoved]: FilesChangedEvent,
+  [Events.IndexingTotalWorkCalculated]: IndexingTotalWorkCalculatedEvent,
+  [Events.IndexingWorked]: IndexingWorkedEvent,
+  [Events.IndexingDone]: IndexingEvent,
+  [Events.KeyEventUnhandled]: KeyEventUnhandledEvent,
+  [Events.ReattachMainTarget]: void,
+  [Events.ReloadInspectedPage]: boolean,
+  [Events.RevealSourceLine]: RevealSourceLineEvent,
+  [Events.SavedURL]: SavedURLEvent,
+  [Events.SearchCompleted]: SearchCompletedEvent,
+  [Events.SetInspectedTabId]: string,
+  [Events.SetUseSoftMenu]: boolean,
+  [Events.ShowPanel]: string,
+};
+
 export interface InspectorFrontendHostAPI {
   addFileSystem(type?: string): void;
 

package/front_end/core/sdk/CSSModel.ts

@@ -707,9 +707,9 @@ export class CSSModel extends SDKModel<EventTypes> {
       }
 
       if (this.cssPropertyTracker) {
-        this.cssPropertyTracker.dispatchEventToListeners(CSSPropertyTrackerEvents.TrackedCSSPropertiesUpdated, {
-          domNodes: result.nodeIds.map(nodeId => this.domModelInternal.nodeForId(nodeId)),
-        });
+        this.cssPropertyTracker.dispatchEventToListeners(
+            CSSPropertyTrackerEvents.TrackedCSSPropertiesUpdated,
+            result.nodeIds.map(nodeId => this.domModelInternal.nodeForId(nodeId)));
       }
     }
 
@@ -867,7 +867,7 @@ export class InlineStyleResult {
   }
 }
 
-export class CSSPropertyTracker extends Common.ObjectWrapper.ObjectWrapper {
+export class CSSPropertyTracker extends Common.ObjectWrapper.ObjectWrapper<CSSPropertyTrackerEventTypes> {
   private readonly cssModel: CSSModel;
   private readonly properties: Protocol.CSS.CSSComputedStyleProperty[];
   constructor(cssModel: CSSModel, propertiesToTrack: Protocol.CSS.CSSComputedStyleProperty[]) {
@@ -897,6 +897,10 @@ export enum CSSPropertyTrackerEvents {
   TrackedCSSPropertiesUpdated = 'TrackedCSSPropertiesUpdated',
 }
 
+export type CSSPropertyTrackerEventTypes = {
+  [CSSPropertyTrackerEvents.TrackedCSSPropertiesUpdated]: (DOMNode|null)[],
+};
+
 SDKModel.register(CSSModel, {capabilities: Capability.DOM, autostart: true});
 export interface ContrastInfo {
   backgroundColors: string[]|null;

package/front_end/core/sdk/Connections.ts

@@ -42,15 +42,15 @@ export class MainConnection implements ProtocolClient.InspectorBackend.Connectio
     }
   }
 
-  private dispatchMessage(event: Common.EventTarget.EventTargetEvent): void {
+  private dispatchMessage(event: Common.EventTarget.EventTargetEvent<string>): void {
     if (this.onMessage) {
-      this.onMessage.call(null, (event.data as string));
+      this.onMessage.call(null, event.data);
     }
   }
 
-  private dispatchMessageChunk(event: Common.EventTarget.EventTargetEvent): void {
-    const messageChunk = (event.data['messageChunk'] as string);
-    const messageSize = (event.data['messageSize'] as number);
+  private dispatchMessageChunk(
+      event: Common.EventTarget.EventTargetEvent<Host.InspectorFrontendHostAPI.DispatchMessageChunkEvent>): void {
+    const {messageChunk, messageSize} = event.data;
     if (messageSize) {
       this.messageBuffer = '';
       this.messageSize = messageSize;

package/front_end/core/sdk/DebuggerModel.ts

@@ -135,7 +135,10 @@ export class DebuggerModel extends SDKModel<EventTypes> {
                                           }>>)|null;
   private expandCallFramesCallback: ((arg0: Array<CallFrame>) => Promise<Array<CallFrame>>)|null;
   evaluateOnCallFrameCallback: ((arg0: CallFrame, arg1: EvaluationOptions) => Promise<EvaluationResult|null>)|null;
-  private readonly breakpointResolvedEventTarget: Common.ObjectWrapper.ObjectWrapper;
+  // We need to be able to register listeners for individual breakpoints. As such, we dispatch
+  // on breakpoint ids, which are not statically known. The event payload will always be a `Location`.
+  private readonly breakpointResolvedEventTarget =
+      new Common.ObjectWrapper.ObjectWrapper<{[breakpointId: string]: Location}>();
   private autoStepOver: boolean;
   private isPausingInternal: boolean;
 
@@ -163,8 +166,6 @@ export class DebuggerModel extends SDKModel<EventTypes> {
     this.expandCallFramesCallback = null;
     this.evaluateOnCallFrameCallback = null;
 
-    this.breakpointResolvedEventTarget = new Common.ObjectWrapper.ObjectWrapper();
-
     this.autoStepOver = false;
 
     this.isPausingInternal = false;
@@ -901,12 +902,14 @@ export class DebuggerModel extends SDKModel<EventTypes> {
   }
 
   addBreakpointListener(
-      breakpointId: string, listener: (arg0: Common.EventTarget.EventTargetEvent) => void, thisObject?: Object): void {
+      breakpointId: string, listener: (arg0: Common.EventTarget.EventTargetEvent<Location>) => void,
+      thisObject?: Object): void {
     this.breakpointResolvedEventTarget.addEventListener(breakpointId, listener, thisObject);
   }
 
   removeBreakpointListener(
-      breakpointId: string, listener: (arg0: Common.EventTarget.EventTargetEvent) => void, thisObject?: Object): void {
+      breakpointId: string, listener: (arg0: Common.EventTarget.EventTargetEvent<Location>) => void,
+      thisObject?: Object): void {
     this.breakpointResolvedEventTarget.removeEventListener(breakpointId, listener, thisObject);
   }
 

package/front_end/entrypoints/inspector_main/InspectorMain.ts

@@ -84,8 +84,7 @@ export class InspectorMainImpl implements Common.Runnable.Runnable {
     new MobileThrottling.NetworkPanelIndicator.NetworkPanelIndicator();
 
     Host.InspectorFrontendHost.InspectorFrontendHostInstance.events.addEventListener(
-        Host.InspectorFrontendHostAPI.Events.ReloadInspectedPage, event => {
-          const hard = (event.data as boolean);
+        Host.InspectorFrontendHostAPI.Events.ReloadInspectedPage, ({data: hard}) => {
           SDK.ResourceTreeModel.ResourceTreeModel.reloadAllPages(hard);
         });
   }

package/front_end/entrypoints/main/MainImpl.ts

@@ -576,19 +576,16 @@ export class MainImpl {
   private registerMessageSinkListener(): void {
     Common.Console.Console.instance().addEventListener(Common.Console.Events.MessageAdded, messageAdded);
 
-    function messageAdded(event: Common.EventTarget.EventTargetEvent): void {
-      const message = (event.data as Common.Console.Message);
+    function messageAdded({data: message}: Common.EventTarget.EventTargetEvent<Common.Console.Message>): void {
       if (message.show) {
         Common.Console.Console.instance().show();
       }
     }
   }
 
-  private revealSourceLine(event: Common.EventTarget.EventTargetEvent): void {
-    const url = (event.data['url'] as string);
-    const lineNumber = (event.data['lineNumber'] as number);
-    const columnNumber = (event.data['columnNumber'] as number);
-
+  private revealSourceLine(
+      event: Common.EventTarget.EventTargetEvent<Host.InspectorFrontendHostAPI.RevealSourceLineEvent>): void {
+    const {url, lineNumber, columnNumber} = event.data;
     const uiSourceCode = Workspace.Workspace.WorkspaceImpl.instance().uiSourceCodeForURL(url);
     if (uiSourceCode) {
       Common.Revealer.reveal(uiSourceCode.uiLocation(lineNumber, columnNumber));

package/front_end/entrypoints/node_main/NodeConnectionsPanel.ts

@@ -78,8 +78,8 @@ export class NodeConnectionsPanel extends UI.Panel.Panel {
     return nodeConnectionsPanelInstance;
   }
 
-  private devicesDiscoveryConfigChanged(event: Common.EventTarget.EventTargetEvent): void {
-    this.config = (event.data as Adb.Config);
+  private devicesDiscoveryConfigChanged({data: config}: Common.EventTarget.EventTargetEvent<Adb.Config>): void {
+    this.config = config;
     this.networkDiscoveryView.discoveryConfigChanged(this.config.networkDiscoveryConfig);
   }
   wasShown(): void {

package/front_end/entrypoints/node_main/NodeMain.ts

@@ -70,8 +70,7 @@ export class NodeChildTargetManager extends SDK.SDKModel.SDKModel implements Pro
     Host.InspectorFrontendHost.InspectorFrontendHostInstance.setDevicesUpdatesEnabled(true);
   }
 
-  private devicesDiscoveryConfigChanged(event: Common.EventTarget.EventTargetEvent): void {
-    const config = (event.data as Adb.Config);
+  private devicesDiscoveryConfigChanged({data: config}: Common.EventTarget.EventTargetEvent<Adb.Config>): void {
     const locations = [];
     for (const address of config.networkDiscoveryConfig) {
       const parts = address.split(':');

package/front_end/models/bindings/BreakpointManager.ts

@@ -734,8 +734,9 @@ export class ModelBreakpoint {
     this.breakpointIds = [];
   }
 
-  private async breakpointResolved(event: Common.EventTarget.EventTargetEvent): Promise<void> {
-    await this.addResolvedLocation((event.data as SDK.DebuggerModel.Location));
+  private async breakpointResolved({data: location}: Common.EventTarget.EventTargetEvent<SDK.DebuggerModel.Location>):
+      Promise<void> {
+    await this.addResolvedLocation(location);
   }
 
   private async locationUpdated(liveLocation: LiveLocation): Promise<void> {

package/front_end/models/extensions/ExtensionServer.ts

@@ -817,9 +817,9 @@ export class ExtensionServer extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     });
   }
 
-  private setInspectedTabId(event: Common.EventTarget.EventTargetEvent): void {
+  private setInspectedTabId(event: Common.EventTarget.EventTargetEvent<string>): void {
     const oldId = this.inspectedTabId;
-    this.inspectedTabId = (event.data as string);
+    this.inspectedTabId = event.data;
     if (oldId === null) {
       // Run deferred init
       this.initializeExtensions();

package/front_end/models/issues_manager/DeprecationIssue.ts

@@ -46,7 +46,7 @@ export class DeprecationIssue extends Issue<IssueCode> {
     return {
       file: 'deprecationNavigatorUserAgent.md',
       links: [{
-        link: 'https://blog.chromium.org/2021/05/update-on-user-agent-string-reduction.html',
+        link: 'https://blog.chromium.org/2021/09/user-agent-reduction-origin-trial-and-dates.html',
         linkTitle: i18nString(UIStrings.userAgentReduction),
       }],
     };

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

@@ -1,8 +1,18 @@
 # Specify a Cross-Origin Resource Policy to prevent a resource from being blocked
 
-Because your site has the Cross-Origin Embedder Policy (COEP) enabled, each resource must specify a suitable Cross-Origin Resource Policy (CORP).
-This behavior prevents a document from loading cross-origin resources which don’t explicitly grant permission to be loaded.
+Because your site has the Cross-Origin Embedder Policy (COEP) enabled, each
+resource must specify a suitable Cross-Origin Resource Policy (CORP). This
+behavior prevents a document from loading cross-origin resources which don’t
+explicitly grant permission to be loaded.
 
-To solve this, add the following to the resource’s response header:
-* `Cross-Origin-Resource-Policy: same-site` if the resource and your site are served from the same site.
-* `Cross-Origin-Resource-Policy: cross-origin` if the resource is served from another location than your website. ⚠️If you set this header, any website can embed this resource.
+To solve this, add the following to the resource’ response header:
+* `Cross-Origin-Resource-Policy: same-site` if the resource and your site are
+  served from the same site.
+* `Cross-Origin-Resource-Policy: cross-origin` if the resource is served from
+  another location than your website. ⚠️If you set this header, any website can
+  embed this resource.
+
+Alternatively, the document can use the variant: `Cross-Origin-Embedder-Policy:
+credentialless` instead of `require-corp`. It allows loading the resource,
+despite the missing CORP header, at the cost of requesting it without
+credentials like Cookies.

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

@@ -1,6 +1,10 @@
 # Specify a Cross-Origin Embedder Policy to prevent this frame from being blocked
 
-Because your site has the Cross-Origin Embedder Policy (COEP) enabled, each embedded iframe must also specify this policy.
-This behavior protects private data from being exposed to untrusted third party sites.
+Because your site has the Cross-Origin Embedder Policy (COEP) enabled, each
+embedded iframe must also specify this policy. This behavior protects private
+data from being exposed to untrusted third party sites.
 
-To solve this, add the following to the embedded frame’s HTML response header: `Cross-Origin-Embedder-Policy: require-corp`
+To solve this, add one of following to the embedded frame’s HTML response
+header:
+* `Cross-Origin-Embedder-Policy: require-corp`
+* `Cross-Origin-Embedder-Policy: credentialless` (Chrome > 96)

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

@@ -1,7 +1,7 @@
 # Audit usage of navigator.userAgent, navigator.appVersion, and navigator.platform
 
 A page or script is accessing at least one of `navigator.userAgent`, `navigator.appVersion`, and `navigator.platform`.
-In a future version of Chrome, the amount of information available in the User Agent string will be reduced.
+Starting in Chrome 101, the amount of information available in the User Agent string will be reduced.
 
 To fix this issue, replace the usage of `navigator.userAgent`, `navigator.appVersion`, and `navigator.platform` with feature detection, progressive enhancement, or migrate to `navigator.userAgentData`.
 

package/front_end/models/persistence/IsolatedFileSystemManager.ts

@@ -139,8 +139,10 @@ export class IsolatedFileSystemManager extends Common.ObjectWrapper.ObjectWrappe
     Host.InspectorFrontendHost.InspectorFrontendHostInstance.requestFileSystems();
     return promise;
 
-    function onFileSystemsLoaded(this: IsolatedFileSystemManager, event: Common.EventTarget.EventTargetEvent): void {
-      const fileSystems = event.data as FileSystem[];
+    function onFileSystemsLoaded(
+        this: IsolatedFileSystemManager,
+        event: Common.EventTarget.EventTargetEvent<Host.InspectorFrontendHostAPI.DevToolsFileSystem[]>): void {
+      const fileSystems = event.data;
       const promises = [];
       for (let i = 0; i < fileSystems.length; ++i) {
         promises.push(this.innerAddFileSystem(fileSystems[i], false));
@@ -168,7 +170,8 @@ export class IsolatedFileSystemManager extends Common.ObjectWrapper.ObjectWrappe
     return this.fileSystemsLoadedPromise;
   }
 
-  private innerAddFileSystem(fileSystem: FileSystem, dispatchEvent: boolean): Promise<IsolatedFileSystem|null> {
+  private innerAddFileSystem(fileSystem: Host.InspectorFrontendHostAPI.DevToolsFileSystem, dispatchEvent: boolean):
+      Promise<IsolatedFileSystem|null> {
     const embedderPath = fileSystem.fileSystemPath;
     const fileSystemURL = Common.ParsedURL.ParsedURL.platformPathToURL(fileSystem.fileSystemPath);
     const promise = IsolatedFileSystem.create(
@@ -193,9 +196,9 @@ export class IsolatedFileSystemManager extends Common.ObjectWrapper.ObjectWrappe
     this.dispatchEventToListeners(Events.FileSystemAdded, fileSystem);
   }
 
-  private onFileSystemAdded(event: Common.EventTarget.EventTargetEvent): void {
-    const errorMessage = event.data['errorMessage'] as string;
-    const fileSystem = event.data['fileSystem'] as FileSystem | null;
+  private onFileSystemAdded(
+      event: Common.EventTarget.EventTargetEvent<Host.InspectorFrontendHostAPI.FileSystemAddedEvent>): void {
+    const {errorMessage, fileSystem} = event.data;
     if (errorMessage) {
       if (errorMessage !== '<selection cancelled>') {
         Common.Console.Console.instance().error(i18nString(UIStrings.unableToAddFilesystemS, {PH1: errorMessage}));
@@ -215,8 +218,8 @@ export class IsolatedFileSystemManager extends Common.ObjectWrapper.ObjectWrappe
     }
   }
 
-  private onFileSystemRemoved(event: Common.EventTarget.EventTargetEvent): void {
-    const embedderPath = event.data as string;
+  private onFileSystemRemoved(event: Common.EventTarget.EventTargetEvent<string>): void {
+    const embedderPath = event.data;
     const fileSystemPath = Common.ParsedURL.ParsedURL.platformPathToURL(embedderPath);
     const isolatedFileSystem = this.fileSystemsInternal.get(fileSystemPath);
     if (!isolatedFileSystem) {
@@ -227,7 +230,8 @@ export class IsolatedFileSystemManager extends Common.ObjectWrapper.ObjectWrappe
     this.dispatchEventToListeners(Events.FileSystemRemoved, isolatedFileSystem);
   }
 
-  private onFileSystemFilesChanged(event: Common.EventTarget.EventTargetEvent): void {
+  private onFileSystemFilesChanged(
+      event: Common.EventTarget.EventTargetEvent<Host.InspectorFrontendHostAPI.FilesChangedEvent>): void {
     const urlPaths = {
       changed: groupFilePathsIntoFileSystemPaths.call(this, event.data.changed),
       added: groupFilePathsIntoFileSystemPaths.call(this, event.data.added),
@@ -281,10 +285,10 @@ export class IsolatedFileSystemManager extends Common.ObjectWrapper.ObjectWrappe
     return requestId;
   }
 
-  private onIndexingTotalWorkCalculated(event: Common.EventTarget.EventTargetEvent): void {
-    const requestId = event.data['requestId'] as number;
-    const totalWork = event.data['totalWork'] as number;
-
+  private onIndexingTotalWorkCalculated(
+      event: Common.EventTarget.EventTargetEvent<Host.InspectorFrontendHostAPI.IndexingTotalWorkCalculatedEvent>):
+      void {
+    const {requestId, totalWork} = event.data;
     const progress = this.progresses.get(requestId);
     if (!progress) {
       return;
@@ -292,10 +296,9 @@ export class IsolatedFileSystemManager extends Common.ObjectWrapper.ObjectWrappe
     progress.setTotalWork(totalWork);
   }
 
-  private onIndexingWorked(event: Common.EventTarget.EventTargetEvent): void {
-    const requestId = event.data['requestId'] as number;
-    const worked = event.data['worked'] as number;
-
+  private onIndexingWorked(
+      event: Common.EventTarget.EventTargetEvent<Host.InspectorFrontendHostAPI.IndexingWorkedEvent>): void {
+    const {requestId, worked} = event.data;
     const progress = this.progresses.get(requestId);
     if (!progress) {
       return;
@@ -307,9 +310,9 @@ export class IsolatedFileSystemManager extends Common.ObjectWrapper.ObjectWrappe
     }
   }
 
-  private onIndexingDone(event: Common.EventTarget.EventTargetEvent): void {
-    const requestId = event.data['requestId'] as number;
-
+  private onIndexingDone(event: Common.EventTarget.EventTargetEvent<Host.InspectorFrontendHostAPI.IndexingEvent>):
+      void {
+    const {requestId} = event.data;
     const progress = this.progresses.get(requestId);
     if (!progress) {
       return;
@@ -318,10 +321,9 @@ export class IsolatedFileSystemManager extends Common.ObjectWrapper.ObjectWrappe
     this.progresses.delete(requestId);
   }
 
-  private onSearchCompleted(event: Common.EventTarget.EventTargetEvent): void {
-    const requestId = event.data['requestId'] as number;
-    const files = event.data['files'] as string[];
-
+  private onSearchCompleted(
+      event: Common.EventTarget.EventTargetEvent<Host.InspectorFrontendHostAPI.SearchCompletedEvent>): void {
+    const {requestId, files} = event.data;
     const callback = this.callbacks.get(requestId);
     if (!callback) {
       return;
@@ -350,10 +352,3 @@ export type EventTypes = {
 };
 
 let lastRequestId = 0;
-
-export interface FileSystem {
-  type: string;
-  fileSystemName: string;
-  rootURL: string;
-  fileSystemPath: string;
-}

package/front_end/models/persistence/NetworkPersistenceManager.ts

@@ -14,7 +14,8 @@ import {PersistenceBinding, PersistenceImpl} from './PersistenceImpl.js';
 
 let networkPersistenceManagerInstance: NetworkPersistenceManager|null;
 
-export class NetworkPersistenceManager extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
+export class NetworkPersistenceManager extends Common.ObjectWrapper.ObjectWrapper<EventTypes> implements
+    SDK.TargetManager.Observer {
   private bindings: WeakMap<Workspace.UISourceCode.UISourceCode, PersistenceBinding>;
   private readonly originalResponseContentPromises: WeakMap<Workspace.UISourceCode.UISourceCode, Promise<string|null>>;
   private savingForOverrides: WeakSet<Workspace.UISourceCode.UISourceCode>;
@@ -64,6 +65,15 @@ export class NetworkPersistenceManager extends Common.ObjectWrapper.ObjectWrappe
 
     this.eventDescriptors = [];
     this.enabledChanged();
+
+    SDK.TargetManager.TargetManager.instance().observeTargets(this);
+  }
+
+  targetAdded(): void {
+    this.updateActiveProject();
+  }
+  targetRemoved(): void {
+    this.updateActiveProject();
   }
 
   static instance(opts: {

package/front_end/models/workspace/FileManager.ts

@@ -66,17 +66,16 @@ export class FileManager extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
     return result;
   }
 
-  private savedURL(event: Common.EventTarget.EventTargetEvent): void {
-    const url = event.data.url as string;
+  private savedURL(event: Common.EventTarget.EventTargetEvent<Host.InspectorFrontendHostAPI.SavedURLEvent>): void {
+    const {url, fileSystemPath} = event.data;
     const callback = this.saveCallbacks.get(url);
     this.saveCallbacks.delete(url);
     if (callback) {
-      callback({fileSystemPath: event.data.fileSystemPath as string});
+      callback({fileSystemPath});
     }
   }
 
-  private canceledSavedURL(event: Common.EventTarget.EventTargetEvent): void {
-    const url = event.data as string;
+  private canceledSavedURL({data: url}: Common.EventTarget.EventTargetEvent<string>): void {
     const callback = this.saveCallbacks.get(url);
     this.saveCallbacks.delete(url);
     if (callback) {
@@ -92,8 +91,7 @@ export class FileManager extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
     Host.InspectorFrontendHost.InspectorFrontendHostInstance.close(url);
   }
 
-  private appendedToURL(event: Common.EventTarget.EventTargetEvent): void {
-    const url = event.data as string;
+  private appendedToURL({data: url}: Common.EventTarget.EventTargetEvent<string>): void {
     this.dispatchEventToListeners(Events.AppendedToURL, url);
   }
 }

package/front_end/panels/console/ConsoleView.ts

@@ -620,11 +620,9 @@ export class ConsoleView extends UI.Widget.VBox implements UI.SearchableView.Sea
 
   private registerWithMessageSink(): void {
     Common.Console.Console.instance().messages().forEach(this.addSinkMessage, this);
-    Common.Console.Console.instance().addEventListener(Common.Console.Events.MessageAdded, messageAdded, this);
-
-    function messageAdded(this: ConsoleView, event: Common.EventTarget.EventTargetEvent): void {
-      this.addSinkMessage((event.data as Common.Console.Message));
-    }
+    Common.Console.Console.instance().addEventListener(Common.Console.Events.MessageAdded, ({data: message}) => {
+      this.addSinkMessage(message);
+    }, this);
   }
 
   private addSinkMessage(message: Common.Console.Message): void {

package/front_end/panels/css_overview/CSSOverviewCompletedView.ts

@@ -178,7 +178,7 @@ const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 export type NodeStyleStats = Map<string, Set<number>>;
 
 export interface ContrastIssue {
-  nodeId: number;
+  nodeId: Protocol.DOM.BackendNodeId;
   contrastRatio: number;
   textColor: Common.Color.Color;
   backgroundColor: Common.Color.Color;
@@ -189,18 +189,18 @@ export interface ContrastIssue {
   };
 }
 export interface OverviewData {
-  backgroundColors: Map<string, Set<number>>;
-  textColors: Map<string, Set<number>>;
+  backgroundColors: Map<string, Set<Protocol.DOM.BackendNodeId>>;
+  textColors: Map<string, Set<Protocol.DOM.BackendNodeId>>;
   textColorContrastIssues: Map<string, ContrastIssue[]>;
-  fillColors: Map<string, Set<number>>;
-  borderColors: Map<string, Set<number>>;
+  fillColors: Map<string, Set<Protocol.DOM.BackendNodeId>>;
+  borderColors: Map<string, Set<Protocol.DOM.BackendNodeId>>;
   globalStyleStats: {
     styleRules: number,
     inlineStyles: number,
     externalSheets: number,
     stats: {type: number, class: number, id: number, universal: number, attribute: number, nonSimple: number},
   };
-  fontInfo: Map<string, Map<string, Map<string, number[]>>>;
+  fontInfo: Map<string, Map<string, Map<string, Protocol.DOM.BackendNodeId[]>>>;
   elementCount: number;
   mediaQueries: Map<string, Protocol.CSS.CSSMedia[]>;
   unusedDeclarations: Map<string, UnusedDeclaration[]>;
@@ -435,7 +435,7 @@ export class CSSOverviewCompletedView extends UI.Panel.PanelWithSidebar {
           return;
         }
 
-        const nodesIds = (fontMetricInfo.get(value) as number[]);
+        const nodesIds = fontMetricInfo.get(value);
         if (!nodesIds) {
           return;
         }
@@ -1013,8 +1013,8 @@ export class ElementDetailsView extends UI.Widget.Widget {
     if ('nodeId' in firstItem && visibility.has('nodeId')) {
       // Grab the nodes from the frontend, but only those that have not been
       // retrieved already.
-      const nodeIds = (data as {nodeId: number}[]).reduce((prev, curr) => {
-        const nodeId = curr.nodeId as Protocol.DOM.BackendNodeId;
+      const nodeIds = (data as {nodeId: Protocol.DOM.BackendNodeId}[]).reduce((prev, curr) => {
+        const nodeId = curr.nodeId;
         if (CSSOverviewCompletedView.pushedNodes.has(nodeId)) {
           return prev;
         }
@@ -1030,7 +1030,7 @@ export class ElementDetailsView extends UI.Widget.Widget {
         if (!relatedNodesMap) {
           continue;
         }
-        frontendNode = relatedNodesMap.get(item.nodeId as Protocol.DOM.BackendNodeId);
+        frontendNode = relatedNodesMap.get(item.nodeId);
         if (!frontendNode) {
           continue;
         }

package/front_end/panels/css_overview/CSSOverviewController.ts

@@ -38,7 +38,7 @@ export type PopulateNodesEvent = {
   type: 'color',
   color: string,
   section: string | undefined,
-  nodes: {nodeId: number}[],
+  nodes: {nodeId: Protocol.DOM.BackendNodeId}[],
 }|{
   type: 'unused-declarations',
   declaration: string,
@@ -50,7 +50,7 @@ export type PopulateNodesEvent = {
 }|{
   type: 'font-info',
   name: string,
-  nodes: {nodeId: number}[],
+  nodes: {nodeId: Protocol.DOM.BackendNodeId}[],
 };
 
 export type PopulateNodesEventNodes = PopulateNodesEvent['nodes'];

package/front_end/panels/css_overview/CSSOverviewModel.ts

@@ -15,12 +15,12 @@ import {CSSOverviewUnusedDeclarations} from './CSSOverviewUnusedDeclarations.js'
 
 interface NodeStyleStats {
   elementCount: number;
-  backgroundColors: Map<string, Set<number>>;
-  textColors: Map<string, Set<number>>;
+  backgroundColors: Map<string, Set<Protocol.DOM.BackendNodeId>>;
+  textColors: Map<string, Set<Protocol.DOM.BackendNodeId>>;
   textColorContrastIssues: Map<string, ContrastIssue[]>;
-  fillColors: Map<string, Set<number>>;
-  borderColors: Map<string, Set<number>>;
-  fontInfo: Map<string, Map<string, Map<string, number[]>>>;
+  fillColors: Map<string, Set<Protocol.DOM.BackendNodeId>>;
+  borderColors: Map<string, Set<Protocol.DOM.BackendNodeId>>;
+  fontInfo: Map<string, Map<string, Map<string, Protocol.DOM.BackendNodeId[]>>>;
   unusedDeclarations: Map<string, UnusedDeclaration[]>;
 }
 

package/front_end/panels/css_overview/CSSOverviewPanel.ts

@@ -27,17 +27,17 @@ export class CSSOverviewPanel extends UI.Panel.Panel {
   private readonly startView: CSSOverviewStartView;
   private readonly processingView: CSSOverviewProcessingView;
   private readonly completedView: CSSOverviewCompletedView;
-  private backgroundColors?: Map<string, Set<number>>;
-  private textColors?: Map<string, Set<number>>;
-  private fillColors?: Map<string, Set<number>>;
-  private borderColors?: Map<string, Set<number>>;
-  private fontInfo?: Map<string, Map<string, Map<string, number[]>>>;
-  private mediaQueries?: Map<string, Protocol.CSS.CSSMedia[]>;
-  private unusedDeclarations?: Map<string, UnusedDeclaration[]>;
-  private elementCount?: number;
+  private backgroundColors!: Map<string, Set<Protocol.DOM.BackendNodeId>>;
+  private textColors!: Map<string, Set<Protocol.DOM.BackendNodeId>>;
+  private fillColors!: Map<string, Set<Protocol.DOM.BackendNodeId>>;
+  private borderColors!: Map<string, Set<Protocol.DOM.BackendNodeId>>;
+  private fontInfo!: Map<string, Map<string, Map<string, Protocol.DOM.BackendNodeId[]>>>;
+  private mediaQueries!: Map<string, Protocol.CSS.CSSMedia[]>;
+  private unusedDeclarations!: Map<string, UnusedDeclaration[]>;
+  private elementCount!: number;
   private cancelled?: boolean;
-  private globalStyleStats?: GlobalStyleStats;
-  private textColorContrastIssues?: Map<string, ContrastIssue[]>;
+  private globalStyleStats!: GlobalStyleStats;
+  private textColorContrastIssues!: Map<string, ContrastIssue[]>;
 
   private constructor() {
     super('css_overview');
@@ -97,6 +97,7 @@ export class CSSOverviewPanel extends UI.Panel.Panel {
         nonSimple: 0,
       },
     };
+    this.textColorContrastIssues = new Map();
     this.renderInitialView();
   }
 
@@ -124,16 +125,16 @@ export class CSSOverviewPanel extends UI.Panel.Panel {
 
     this.completedView.show(this.contentElement);
     this.completedView.setOverviewData({
-      backgroundColors: (this.backgroundColors as Map<string, Set<number>>),
-      textColors: (this.textColors as Map<string, Set<number>>),
-      textColorContrastIssues: (this.textColorContrastIssues as Map<string, ContrastIssue[]>),
-      fillColors: (this.fillColors as Map<string, Set<number>>),
-      borderColors: (this.borderColors as Map<string, Set<number>>),
-      globalStyleStats: this.globalStyleStats as GlobalStyleStats,
-      fontInfo: (this.fontInfo as Map<string, Map<string, Map<string, number[]>>>),
-      elementCount: (this.elementCount as number),
-      mediaQueries: (this.mediaQueries as Map<string, Protocol.CSS.CSSMedia[]>),
-      unusedDeclarations: (this.unusedDeclarations as Map<string, UnusedDeclaration[]>),
+      backgroundColors: this.backgroundColors,
+      textColors: this.textColors,
+      textColorContrastIssues: this.textColorContrastIssues,
+      fillColors: this.fillColors,
+      borderColors: this.borderColors,
+      globalStyleStats: this.globalStyleStats,
+      fontInfo: this.fontInfo,
+      elementCount: this.elementCount,
+      mediaQueries: this.mediaQueries,
+      unusedDeclarations: this.unusedDeclarations,
     });
   }
 

package/front_end/panels/css_overview/CSSOverviewUnusedDeclarations.ts

@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 
 import * as i18n from '../../core/i18n/i18n.js';
+import type * as Protocol from '../../generated/protocol.js';
 
 const UIStrings = {
   /**
@@ -38,20 +39,22 @@ const str_ = i18n.i18n.registerUIStrings('panels/css_overview/CSSOverviewUnusedD
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 export interface UnusedDeclaration {
   declaration: string;
-  nodeId: number;
+  nodeId: Protocol.DOM.BackendNodeId;
 }
 
 export class CSSOverviewUnusedDeclarations {
-  private static add(
-      target: Map<string, UnusedDeclaration[]>, key: string, item: {declaration: string, nodeId: number}): void {
+  private static add(target: Map<string, UnusedDeclaration[]>, key: string, item: {
+    declaration: string,
+    nodeId: Protocol.DOM.BackendNodeId,
+  }): void {
     const values = target.get(key) || [];
     values.push(item);
     target.set(key, values);
   }
 
   static checkForUnusedPositionValues(
-      unusedDeclarations: Map<string, UnusedDeclaration[]>, nodeId: number, strings: string[], positionIdx: number,
-      topIdx: number, leftIdx: number, rightIdx: number, bottomIdx: number): void {
+      unusedDeclarations: Map<string, UnusedDeclaration[]>, nodeId: Protocol.DOM.BackendNodeId, strings: string[],
+      positionIdx: number, topIdx: number, leftIdx: number, rightIdx: number, bottomIdx: number): void {
     if (strings[positionIdx] !== 'static') {
       return;
     }
@@ -90,8 +93,8 @@ export class CSSOverviewUnusedDeclarations {
   }
 
   static checkForUnusedWidthAndHeightValues(
-      unusedDeclarations: Map<string, UnusedDeclaration[]>, nodeId: number, strings: string[], displayIdx: number,
-      widthIdx: number, heightIdx: number): void {
+      unusedDeclarations: Map<string, UnusedDeclaration[]>, nodeId: Protocol.DOM.BackendNodeId, strings: string[],
+      displayIdx: number, widthIdx: number, heightIdx: number): void {
     if (strings[displayIdx] !== 'inline') {
       return;
     }
@@ -114,8 +117,8 @@ export class CSSOverviewUnusedDeclarations {
   }
 
   static checkForInvalidVerticalAlignment(
-      unusedDeclarations: Map<string, UnusedDeclaration[]>, nodeId: number, strings: string[], displayIdx: number,
-      verticalAlignIdx: number): void {
+      unusedDeclarations: Map<string, UnusedDeclaration[]>, nodeId: Protocol.DOM.BackendNodeId, strings: string[],
+      displayIdx: number, verticalAlignIdx: number): void {
     if (!strings[displayIdx] || strings[displayIdx] === 'inline' || strings[displayIdx].startsWith('table')) {
       return;
     }

package/front_end/panels/elements/ElementsPanel.ts

@@ -1099,9 +1099,8 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
         SDK.CSSModel.CSSPropertyTrackerEvents.TrackedCSSPropertiesUpdated, this.trackedCSSPropertiesUpdated, this);
   }
 
-  private trackedCSSPropertiesUpdated(event: Common.EventTarget.EventTargetEvent): void {
-    const domNodes = (event.data.domNodes as (SDK.DOMModel.DOMNode | null)[]);
-
+  private trackedCSSPropertiesUpdated({data: domNodes}:
+                                          Common.EventTarget.EventTargetEvent<(SDK.DOMModel.DOMNode | null)[]>): void {
     for (const domNode of domNodes) {
       if (!domNode) {
         continue;

package/front_end/panels/layer_viewer/Layers3DView.ts

@@ -895,7 +895,7 @@ export enum Events {
 
 export type EventTypes = {
   [Events.PaintProfilerRequested]: Selection,
-  [Events.ScaleChanged]: void,
+  [Events.ScaleChanged]: number,
 };
 
 export const enum ChromeTexture {

package/front_end/panels/profiler/CPUProfileFlameChart.ts

@@ -145,7 +145,9 @@ export class ProfileFlameChartDataProvider implements PerfUI.FlameChart.FlameCha
   }
 }
 
-export class CPUProfileFlameChart extends UI.Widget.VBox implements UI.SearchableView.Searchable {
+export class CPUProfileFlameChart extends
+    Common.ObjectWrapper.eventMixin<PerfUI.FlameChart.EventTypes, typeof UI.Widget.VBox>(UI.Widget.VBox)
+        implements UI.SearchableView.Searchable {
   readonly searchableView: UI.SearchableView.SearchableView;
   readonly overviewPane: OverviewPane;
   readonly mainPane: PerfUI.FlameChart.FlameChart;
@@ -307,7 +309,7 @@ export class OverviewCalculator implements PerfUI.TimelineGrid.Calculator {
   }
 }
 
-export class OverviewPane extends Common.ObjectWrapper.eventMixin<OverviewPaneEvents, typeof UI.Widget.VBox>(
+export class OverviewPane extends Common.ObjectWrapper.eventMixin<OverviewPaneEventTypes, typeof UI.Widget.VBox>(
     UI.Widget.VBox) implements PerfUI.FlameChart.FlameChartDelegate {
   overviewContainer: HTMLElement;
   readonly overviewCalculator: OverviewCalculator;
@@ -457,6 +459,6 @@ export interface OverviewPaneWindowChangedEvent {
   windowTimeRight: number;
 }
 
-export type OVerviewPaneEventTypes = {
+export type OverviewPaneEventTypes = {
   [OverviewPaneEvents.WindowChanged]: OverviewPaneWindowChangedEvent,
 };

package/front_end/ui/legacy/ContextMenu.ts

@@ -372,8 +372,8 @@ export class ContextMenu extends SubMenu {
   static initialize(): void {
     Host.InspectorFrontendHost.InspectorFrontendHostInstance.events.addEventListener(
         Host.InspectorFrontendHostAPI.Events.SetUseSoftMenu, setUseSoftMenu);
-    function setUseSoftMenu(event: Common.EventTarget.EventTargetEvent): void {
-      ContextMenu.useSoftMenu = (event.data as boolean);
+    function setUseSoftMenu(event: Common.EventTarget.EventTargetEvent<boolean>): void {
+      ContextMenu.useSoftMenu = event.data;
     }
   }
 
@@ -470,8 +470,8 @@ export class ContextMenu extends SubMenu {
                .subItems as (SoftContextMenuDescriptor | Host.InspectorFrontendHostAPI.ContextMenuDescriptor)[];
   }
 
-  private onItemSelected(event: Common.EventTarget.EventTargetEvent): void {
-    this.itemSelected((event.data as number));
+  private onItemSelected(event: Common.EventTarget.EventTargetEvent<number>): void {
+    this.itemSelected(event.data);
   }
 
   private itemSelected(id: number): void {

package/front_end/ui/legacy/ForwardedInputEventHandler.ts

@@ -15,13 +15,9 @@ export class ForwardedInputEventHandler {
         Host.InspectorFrontendHostAPI.Events.KeyEventUnhandled, this.onKeyEventUnhandled, this);
   }
 
-  private onKeyEventUnhandled(event: Common.EventTarget.EventTargetEvent): void {
-    const data = event.data;
-    const type = (data.type as string);
-    const key = (data.key as string);
-    const keyCode = (data.keyCode as number);
-    const modifiers = (data.modifiers as number);
-
+  private onKeyEventUnhandled(
+      event: Common.EventTarget.EventTargetEvent<Host.InspectorFrontendHostAPI.KeyEventUnhandledEvent>): void {
+    const {type, key, keyCode, modifiers} = event.data;
     if (type !== 'keydown') {
       return;
     }

package/front_end/ui/legacy/InspectorView.ts

@@ -188,8 +188,7 @@ export class InspectorView extends VBox implements ViewLocationResolver {
     Host.InspectorFrontendHost.InspectorFrontendHostInstance.events.addEventListener(
         Host.InspectorFrontendHostAPI.Events.ShowPanel, showPanel.bind(this));
 
-    function showPanel(this: InspectorView, event: Common.EventTarget.EventTargetEvent): void {
-      const panelName = (event.data as string);
+    function showPanel(this: InspectorView, {data: panelName}: Common.EventTarget.EventTargetEvent<string>): void {
       this.showPanel(panelName);
     }
 

package/front_end/ui/legacy/Widget.ts

@@ -28,7 +28,6 @@
  * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
 
-import * as Common from '../../core/common/common.js';
 import * as DOMExtension from '../../core/dom_extension/dom_extension.js';
 import * as Helpers from '../components/helpers/helpers.js';
 
@@ -48,7 +47,7 @@ export class WidgetElement extends HTMLDivElement {
   }
 }
 
-export class Widget extends Common.ObjectWrapper.ObjectWrapper {
+export class Widget {
   element!: WidgetElement;
   contentElement: HTMLDivElement;
   private shadowRoot: ShadowRoot|undefined;
@@ -69,7 +68,6 @@ export class Widget extends Common.ObjectWrapper.ObjectWrapper {
   private invalidationsRequested?: boolean;
   private externallyManaged?: boolean;
   constructor(isWebComponent?: boolean, delegatesFocus?: boolean) {
-    super();
     this.contentElement = document.createElement('div');
     this.contentElement.classList.add('widget');
     if (isWebComponent) {

package/front_end/ui/legacy/components/color_picker/ContrastDetails.ts

@@ -88,7 +88,8 @@ export class ContrastDetails extends Common.ObjectWrapper.ObjectWrapper<EventTyp
   private contrastPassFailAPCA: HTMLElement;
   private readonly chooseBgColor: HTMLElement;
   private bgColorPickerButton: UI.Toolbar.ToolbarToggle;
-  private readonly bgColorPickedBound: (event: Common.EventTarget.EventTargetEvent) => void;
+  private readonly bgColorPickedBound:
+      (event: Common.EventTarget.EventTargetEvent<Host.InspectorFrontendHostAPI.EyeDropperPickedColorEvent>) => void;
   private readonly bgColorSwatch: Swatch;
   constructor(
       contrastInfo: ContrastInfo, contentElement: Element,
@@ -449,13 +450,9 @@ export class ContrastDetails extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     }
   }
 
-  private bgColorPicked(event: Common.EventTarget.EventTargetEvent): void {
-    const rgbColor = event.data as {
-      r: number,
-      g: number,
-      b: number,
-      a: number,
-    };
+  private bgColorPicked({
+    data: rgbColor,
+  }: Common.EventTarget.EventTargetEvent<Host.InspectorFrontendHostAPI.EyeDropperPickedColorEvent>): void {
     const rgba = [rgbColor.r, rgbColor.g, rgbColor.b, (rgbColor.a / 2.55 | 0) / 100];
     const color = Common.Color.Color.fromRGBA(rgba);
     this.contrastInfo.setBgColor(color);

package/front_end/ui/legacy/components/color_picker/Spectrum.ts

@@ -156,7 +156,8 @@ export class Spectrum extends Common.ObjectWrapper.eventMixin<EventTypes, typeof
   private readonly deleteIconToolbar: UI.Toolbar.Toolbar;
   private readonly deleteButton: UI.Toolbar.ToolbarButton;
   private readonly addColorToolbar: UI.Toolbar.Toolbar;
-  private readonly colorPickedBound: (event: Common.EventTarget.EventTargetEvent) => void;
+  private readonly colorPickedBound:
+      (event: Common.EventTarget.EventTargetEvent<Host.InspectorFrontendHostAPI.EyeDropperPickedColorEvent>) => void;
   private hsv!: number[];
   private hueAlphaWidth!: number;
   dragWidth!: number;
@@ -1185,13 +1186,9 @@ export class Spectrum extends Common.ObjectWrapper.eventMixin<EventTypes, typeof
     }
   }
 
-  private colorPicked(event: Common.EventTarget.EventTargetEvent): void {
-    const rgbColor = event.data as {
-      r: number,
-      g: number,
-      b: number,
-      a: number,
-    };
+  private colorPicked({
+    data: rgbColor,
+  }: Common.EventTarget.EventTargetEvent<Host.InspectorFrontendHostAPI.EyeDropperPickedColorEvent>): void {
     const rgba = [rgbColor.r, rgbColor.g, rgbColor.b, (rgbColor.a / 2.55 | 0) / 100];
     const color = Common.Color.Color.fromRGBA(rgba);
     this.innerSetColor(color.hsva(), '', undefined /* colorName */, undefined, ChangeSource.Other);

package/package.json

@@ -55,5 +55,5 @@
     "unittest": "scripts/test/run_unittests.py --no-text-coverage",
     "watch": "third_party/node/node.py --output scripts/watch_build.js"
   },
-  "version": "1.0.922849"
+  "version": "1.0.922924"
 }