chrome-devtools-frontend 1.0.922782 → 1.0.923788

package/front_end/third_party/wasmparser/package/src/WasmDis.ts

@@ -771,6 +771,13 @@ export class WasmDisassembler {
         this.appendBuffer(" ");
         this.appendBuffer(this.useLabel(operator.brDepth));
         break;
+      case OperatorCode.br_on_cast_static:
+      case OperatorCode.br_on_cast_static_fail: {
+        const label = this.useLabel(operator.brDepth);
+        const refType = this._nameResolver.getTypeName(operator.refType, true);
+        this.appendBuffer(` ${label} ${refType}`);
+        break;
+      }
       case OperatorCode.br_table:
         for (var i = 0; i < operator.brTable.length; i++) {
           this.appendBuffer(" ");
@@ -1051,9 +1058,15 @@ export class WasmDisassembler {
       case OperatorCode.rtt_canon:
       case OperatorCode.rtt_sub:
       case OperatorCode.rtt_fresh_sub:
+      case OperatorCode.ref_test_static:
+      case OperatorCode.ref_cast_static:
+      case OperatorCode.struct_new_default:
       case OperatorCode.struct_new_default_with_rtt:
+      case OperatorCode.struct_new:
       case OperatorCode.struct_new_with_rtt:
+      case OperatorCode.array_new_default:
       case OperatorCode.array_new_default_with_rtt:
+      case OperatorCode.array_new:
       case OperatorCode.array_new_with_rtt:
       case OperatorCode.array_get:
       case OperatorCode.array_get_s:
@@ -1068,6 +1081,14 @@ export class WasmDisassembler {
         const dstType = this._nameResolver.getTypeName(operator.refType, true);
         const srcType = this._nameResolver.getTypeName(operator.srcType, true);
         this.appendBuffer(` ${dstType} ${srcType}`);
+        break;
+      }
+      case OperatorCode.array_init:
+      case OperatorCode.array_init_static: {
+        const refType = this._nameResolver.getTypeName(operator.refType, true);
+        const length = operator.brDepth; // Overloaded field.
+        this.appendBuffer(` ${refType} ${length}`);
+        break;
       }
     }
   }
@@ -1209,7 +1230,7 @@ export class WasmDisassembler {
             for (const exportName of this._exportMetadata.getMemoryExportNames(
               memoryIndex
             )) {
-              this.appendBuffer(` (export "${exportName}")`);
+              this.appendBuffer(` (export ${JSON.stringify(exportName)})`);
             }
           }
           this.appendBuffer(` ${limitsToString(memoryInfo.limits)}`);
@@ -1228,7 +1249,7 @@ export class WasmDisassembler {
             for (const exportName of this._exportMetadata.getEventExportNames(
               eventIndex
             )) {
-              this.appendBuffer(` (export "${exportName}")`);
+              this.appendBuffer(` (export ${JSON.stringify(exportName)})`);
             }
           }
           this.printFuncType(eventInfo.typeIndex);
@@ -1244,7 +1265,7 @@ export class WasmDisassembler {
             for (const exportName of this._exportMetadata.getTableExportNames(
               tableIndex
             )) {
-              this.appendBuffer(` (export "${exportName}")`);
+              this.appendBuffer(` (export ${JSON.stringify(exportName)})`);
             }
           }
           this.appendBuffer(
@@ -1322,7 +1343,7 @@ export class WasmDisassembler {
                 for (const exportName of this._exportMetadata.getFunctionExportNames(
                   funcIndex
                 )) {
-                  this.appendBuffer(` (export "${exportName}")`);
+                  this.appendBuffer(` (export ${JSON.stringify(exportName)})`);
                 }
               }
               this.appendBuffer(` (import `);
@@ -1343,7 +1364,7 @@ export class WasmDisassembler {
                 for (const exportName of this._exportMetadata.getGlobalExportNames(
                   globalIndex
                 )) {
-                  this.appendBuffer(` (export "${exportName}")`);
+                  this.appendBuffer(` (export ${JSON.stringify(exportName)})`);
                 }
               }
               this.appendBuffer(` (import `);
@@ -1364,7 +1385,7 @@ export class WasmDisassembler {
                 for (const exportName of this._exportMetadata.getMemoryExportNames(
                   memoryIndex
                 )) {
-                  this.appendBuffer(` (export "${exportName}")`);
+                  this.appendBuffer(` (export ${JSON.stringify(exportName)})`);
                 }
               }
               this.appendBuffer(` (import `);
@@ -1387,7 +1408,7 @@ export class WasmDisassembler {
                 for (const exportName of this._exportMetadata.getTableExportNames(
                   tableIndex
                 )) {
-                  this.appendBuffer(` (export "${exportName}")`);
+                  this.appendBuffer(` (export ${JSON.stringify(exportName)})`);
                 }
               }
               this.appendBuffer(` (import `);
@@ -1410,7 +1431,7 @@ export class WasmDisassembler {
                 for (const exportName of this._exportMetadata.getEventExportNames(
                   eventIndex
                 )) {
-                  this.appendBuffer(` (export "${exportName}")`);
+                  this.appendBuffer(` (export ${JSON.stringify(exportName)})`);
                 }
               }
               this.appendBuffer(` (import `);
@@ -1468,7 +1489,7 @@ export class WasmDisassembler {
             for (const exportName of this._exportMetadata.getGlobalExportNames(
               globalIndex
             )) {
-              this.appendBuffer(` (export "${exportName}")`);
+              this.appendBuffer(` (export ${JSON.stringify(exportName)})`);
             }
           }
           this.appendBuffer(` ${this.globalTypeToString(globalInfo.type)}`);
@@ -1483,18 +1504,34 @@ export class WasmDisassembler {
           this._types.push(typeEntry);
           if (!this._skipTypes) {
             var typeName = this._nameResolver.getTypeName(typeIndex, false);
+            var superTypeName = undefined;
+            if (typeEntry.supertype !== undefined) {
+              superTypeName = this.typeIndexToString(typeEntry.supertype);
+            }
             if (typeEntry.form === TypeKind.func) {
               this.appendBuffer(`  (type ${typeName} (func`);
               this.printFuncType(typeIndex);
               this.appendBuffer("))");
+            } else if (typeEntry.form === TypeKind.func_subtype) {
+              this.appendBuffer(`  (type ${typeName} (func_subtype`);
+              this.printFuncType(typeIndex);
+              this.appendBuffer(` (supertype ${superTypeName})))`);
             } else if (typeEntry.form === TypeKind.struct) {
               this.appendBuffer(`  (type ${typeName} (struct`);
               this.printStructType(typeIndex);
               this.appendBuffer("))");
+            } else if (typeEntry.form === TypeKind.struct_subtype) {
+              this.appendBuffer(`  (type ${typeName} (struct_subtype`);
+              this.printStructType(typeIndex);
+              this.appendBuffer(` (supertype ${superTypeName})))`);
             } else if (typeEntry.form === TypeKind.array) {
               this.appendBuffer(`  (type ${typeName} (array`);
               this.printArrayType(typeIndex);
               this.appendBuffer("))");
+            } else if (typeEntry.form === TypeKind.array_subtype) {
+              this.appendBuffer(`  (type ${typeName} (array_subtype`);
+              this.printArrayType(typeIndex);
+              this.appendBuffer(`) (supertype ${superTypeName})))`);
             } else {
               throw new Error(`Unknown type form: ${typeEntry.form}`);
             }
@@ -1575,7 +1612,7 @@ export class WasmDisassembler {
             for (const exportName of this._exportMetadata.getFunctionExportNames(
               this._funcIndex
             )) {
-              this.appendBuffer(` (export "${exportName}")`);
+              this.appendBuffer(` (export ${JSON.stringify(exportName)})`);
             }
           }
           for (var i = 0; i < type.params.length; i++) {

package/front_end/third_party/wasmparser/package/src/WasmParser.ts

@@ -434,10 +434,10 @@ export const enum OperatorCode {
   i8x16_bitmask = 0xfd64,
   i8x16_narrow_i16x8_s = 0xfd65,
   i8x16_narrow_i16x8_u = 0xfd66,
-  f32x4_ceil = 0x67,
-  f32x4_floor = 0x68,
-  f32x4_trunc = 0x69,
-  f32x4_nearest = 0x6a,
+  f32x4_ceil = 0xfd67,
+  f32x4_floor = 0xfd68,
+  f32x4_trunc = 0xfd69,
+  f32x4_nearest = 0xfd6a,
   i8x16_shl = 0xfd6b,
   i8x16_shr_s = 0xfd6c,
   i8x16_shr_u = 0xfd6d,
@@ -575,6 +575,8 @@ export const enum OperatorCode {
   struct_get_s = 0xfb04,
   struct_get_u = 0xfb05,
   struct_set = 0xfb06,
+  struct_new = 0xfb07,
+  struct_new_default = 0xfb08,
   array_new_with_rtt = 0xfb11,
   array_new_default_with_rtt = 0xfb12,
   array_get = 0xfb13,
@@ -583,6 +585,10 @@ export const enum OperatorCode {
   array_set = 0xfb16,
   array_len = 0xfb17,
   array_copy = 0xfb18, // Non-standard experiment in V8.
+  array_init = 0xfb19,
+  array_init_static = 0xfb1a,
+  array_new = 0xfb1b,
+  array_new_default = 0xfb1c,
   i31_new = 0xfb20,
   i31_get_s = 0xfb21,
   i31_get_u = 0xfb22,
@@ -590,9 +596,13 @@ export const enum OperatorCode {
   rtt_sub = 0xfb31,
   rtt_fresh_sub = 0xfb32, // Non-standard experiment in V8.
   ref_test = 0xfb40,
+  ref_test_static = 0xfb44,
   ref_cast = 0xfb41,
+  ref_cast_static = 0xfb45,
   br_on_cast = 0xfb42,
+  br_on_cast_static = 0xfb46,
   br_on_cast_fail = 0xfb43,
+  br_on_cast_static_fail = 0xfb47,
   ref_is_func = 0xfb50,
   ref_is_data = 0xfb51,
   ref_is_i31 = 0xfb52,
@@ -1240,6 +1250,8 @@ OperatorCodeNames[0xfb03] = "struct.get";
 OperatorCodeNames[0xfb04] = "struct.get_s";
 OperatorCodeNames[0xfb05] = "struct.get_u";
 OperatorCodeNames[0xfb06] = "struct.set";
+OperatorCodeNames[0xfb07] = "struct.new";
+OperatorCodeNames[0xfb08] = "struct.new_default";
 OperatorCodeNames[0xfb11] = "array.new_with_rtt";
 OperatorCodeNames[0xfb12] = "array.new_default_with_rtt";
 OperatorCodeNames[0xfb13] = "array.get";
@@ -1248,6 +1260,10 @@ OperatorCodeNames[0xfb15] = "array.get_u";
 OperatorCodeNames[0xfb16] = "array.set";
 OperatorCodeNames[0xfb17] = "array.len";
 OperatorCodeNames[0xfb18] = "array.copy";
+OperatorCodeNames[0xfb19] = "array.init";
+OperatorCodeNames[0xfb1a] = "array.init_static";
+OperatorCodeNames[0xfb1b] = "array.new";
+OperatorCodeNames[0xfb1c] = "array.new_default";
 OperatorCodeNames[0xfb20] = "i31.new";
 OperatorCodeNames[0xfb21] = "i31.get_s";
 OperatorCodeNames[0xfb22] = "i31.get_u";
@@ -1258,6 +1274,10 @@ OperatorCodeNames[0xfb40] = "ref.test";
 OperatorCodeNames[0xfb41] = "ref.cast";
 OperatorCodeNames[0xfb42] = "br_on_cast";
 OperatorCodeNames[0xfb43] = "br_on_cast_fail";
+OperatorCodeNames[0xfb44] = "ref.test_static";
+OperatorCodeNames[0xfb45] = "ref.cast_static";
+OperatorCodeNames[0xfb46] = "br_on_cast_static";
+OperatorCodeNames[0xfb47] = "br_on_cast_static_fail";
 OperatorCodeNames[0xfb50] = "ref.is_func";
 OperatorCodeNames[0xfb51] = "ref.is_data";
 OperatorCodeNames[0xfb52] = "ref.is_i31";
@@ -1300,6 +1320,9 @@ export const enum TypeKind {
   func = -0x20,
   struct = -0x21,
   array = -0x22,
+  func_subtype = -0x23,
+  struct_subtype = -0x24,
+  array_subtype = -0x25,
   empty_block_type = -0x40,
 }
 export class Type {
@@ -1610,13 +1633,15 @@ export interface IFunctionEntry {
   typeIndex: number;
 }
 export interface ITypeEntry {
-  form: number; // func | struct | array
+  // func | struct | array | func_subtype | struct_subtype | array_subtype
+  form: number;
   params?: Type[]; // For function types.
   returns?: Type[]; // For function types.
   fields?: Type[]; // For struct types.
   mutabilities?: boolean[]; // For struct types.
   elementType?: Type; // For array types.
   mutability?: boolean; // For array types.
+  supertype?: number; // For *_subtype types.
 }
 export interface ISectionInformation {
   id: SectionCode;
@@ -1961,6 +1986,12 @@ export class BinaryReader {
       returns: returnTypes,
     };
   }
+  private readFuncSubtype(): ITypeEntry {
+    var result = this.readFuncType();
+    result.form = TypeKind.func_subtype;
+    result.supertype = this.readHeapType();
+    return result;
+  }
   private readStructType(): ITypeEntry {
     var fieldCount = this.readVarUint32() >>> 0;
     var fieldTypes = new Array(fieldCount);
@@ -1975,6 +2006,12 @@ export class BinaryReader {
       mutabilities: fieldMutabilities,
     };
   }
+  private readStructSubtype(): ITypeEntry {
+    var result = this.readStructType();
+    result.form = TypeKind.struct_subtype;
+    result.supertype = this.readHeapType();
+    return result;
+  }
   private readArrayType(): ITypeEntry {
     var elementType = this.readType();
     var mutability = !!this.readVarUint1();
@@ -1984,6 +2021,12 @@ export class BinaryReader {
       mutability: mutability,
     };
   }
+  private readArraySubtype(): ITypeEntry {
+    var result = this.readArrayType();
+    result.form = TypeKind.array_subtype;
+    result.supertype = this.readHeapType();
+    return result;
+  }
   private readResizableLimits(maxPresent: boolean): IResizableLimits {
     var initial = this.readVarUint32() >>> 0;
     var maximum;
@@ -2038,12 +2081,21 @@ export class BinaryReader {
       case TypeKind.func:
         this.result = this.readFuncType();
         break;
+      case TypeKind.func_subtype:
+        this.result = this.readFuncSubtype();
+        break;
       case TypeKind.struct:
         this.result = this.readStructType();
         break;
+      case TypeKind.struct_subtype:
+        this.result = this.readStructSubtype();
+        break;
       case TypeKind.array:
         this.result = this.readArrayType();
         break;
+      case TypeKind.array_subtype:
+        this.result = this.readArraySubtype();
+        break;
       default:
         throw new Error(`Unknown type kind: ${form}`);
     }
@@ -2520,18 +2572,29 @@ export class BinaryReader {
       case OperatorCode.br_on_non_i31:
         brDepth = this.readVarUint32() >>> 0;
         break;
+      case OperatorCode.br_on_cast_static:
+      case OperatorCode.br_on_cast_static_fail:
+        brDepth = this.readVarUint32() >>> 0;
+        refType = this.readHeapType();
+        break;
       case OperatorCode.array_get:
       case OperatorCode.array_get_s:
       case OperatorCode.array_get_u:
       case OperatorCode.array_len:
       case OperatorCode.array_set:
+      case OperatorCode.array_new:
       case OperatorCode.array_new_with_rtt:
+      case OperatorCode.array_new_default:
       case OperatorCode.array_new_default_with_rtt:
+      case OperatorCode.struct_new:
       case OperatorCode.struct_new_with_rtt:
+      case OperatorCode.struct_new_default:
       case OperatorCode.struct_new_default_with_rtt:
       case OperatorCode.rtt_canon:
       case OperatorCode.rtt_sub:
       case OperatorCode.rtt_fresh_sub:
+      case OperatorCode.ref_test_static:
+      case OperatorCode.ref_cast_static:
         refType = this.readHeapType();
         break;
       case OperatorCode.array_copy:
@@ -2545,6 +2608,13 @@ export class BinaryReader {
         refType = this.readHeapType();
         fieldIndex = this.readVarUint32();
         break;
+      case OperatorCode.array_init:
+      case OperatorCode.array_init_static:
+        refType = this.readHeapType();
+        // This really is the "length" value. Overload "brDepth" to keep the
+        // IOperatorInformation interface a little leaner.
+        brDepth = this.readVarUint32() >>> 0;
+        break;
       case OperatorCode.ref_is_func:
       case OperatorCode.ref_is_data:
       case OperatorCode.ref_is_i31:

package/front_end/ui/components/icon_button/iconButton.css

@@ -30,6 +30,10 @@
   background-color: var(--legacy-toolbar-hover-bg-color);
 }
 
+.icon-button.icon-button.with-click-handler:active {
+  background-color: var(--color-background-elevation-1);
+}
+
 .icon-button:focus-visible {
   background-color: var(--legacy-toolbar-hover-bg-color);
   border: 1px solid var(--color-details-hairline);

package/front_end/ui/legacy/Context.ts

@@ -17,7 +17,7 @@ interface ConstructorFn<T> {
 
 export class Context {
   private readonly flavorsInternal: Map<ConstructorFn<unknown>, Object>;
-  private readonly eventDispatchers: Map<ConstructorFn<unknown>, Common.ObjectWrapper.ObjectWrapper>;
+  private readonly eventDispatchers: Map<ConstructorFn<unknown>, Common.ObjectWrapper.ObjectWrapper<EventTypes>>;
 
   private constructor() {
     this.flavorsInternal = new Map();
@@ -63,18 +63,18 @@ export class Context {
   }
 
   addFlavorChangeListener<T>(
-      flavorType: ConstructorFn<T>, listener: (arg0: Common.EventTarget.EventTargetEvent) => void,
+      flavorType: ConstructorFn<T>, listener: (arg0: Common.EventTarget.EventTargetEvent<T>) => void,
       thisObject?: Object): void {
     let dispatcher = this.eventDispatchers.get(flavorType);
     if (!dispatcher) {
-      dispatcher = new Common.ObjectWrapper.ObjectWrapper();
+      dispatcher = new Common.ObjectWrapper.ObjectWrapper<EventTypes>();
       this.eventDispatchers.set(flavorType, dispatcher);
     }
     dispatcher.addEventListener(Events.FlavorChanged, listener, thisObject);
   }
 
   removeFlavorChangeListener<T>(
-      flavorType: ConstructorFn<T>, listener: (arg0: Common.EventTarget.EventTargetEvent) => void,
+      flavorType: ConstructorFn<T>, listener: (arg0: Common.EventTarget.EventTargetEvent<T>) => void,
       thisObject?: Object): void {
     const dispatcher = this.eventDispatchers.get(flavorType);
     if (!dispatcher) {
@@ -101,6 +101,11 @@ enum Events {
   FlavorChanged = 'FlavorChanged',
 }
 
+export type EventTypes = {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  [Events.FlavorChanged]: any,
+};
+
 const registeredListeners: ContextFlavorListenerRegistration[] = [];
 
 export function registerListener(registration: ContextFlavorListenerRegistration): void {

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/GlassPane.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 Common from '../../core/common/common.js';
 import * as Platform from '../../core/platform/platform.js';
 import * as Utils from './utils/utils.js';
 
@@ -12,7 +11,7 @@ import {deepElementFromEvent} from './UIUtils.js';
 import type {WidgetElement} from './Widget.js';
 import {Widget} from './Widget.js';
 
-export class GlassPane extends Common.ObjectWrapper.ObjectWrapper {
+export class GlassPane {
   private readonly widgetInternal: Widget;
   element: WidgetElement;
   contentElement: HTMLDivElement;
@@ -28,7 +27,6 @@ export class GlassPane extends Common.ObjectWrapper.ObjectWrapper {
   private marginBehavior: MarginBehavior;
 
   constructor() {
-    super();
     this.widgetInternal = new Widget(true);
     this.widgetInternal.markAsRoot();
     this.element = this.widgetInternal.element;

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

@@ -33,7 +33,7 @@
  * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
 
-import * as Common from '../../core/common/common.js';
+import type * as Common from '../../core/common/common.js';
 import * as DOMExtension from '../../core/dom_extension/dom_extension.js';
 import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
@@ -949,7 +949,7 @@ export function animateFunction(
   return (): void => window.cancelAnimationFrame(raf);
 }
 
-export class LongClickController extends Common.ObjectWrapper.ObjectWrapper {
+export class LongClickController {
   private readonly element: Element;
   private readonly callback: (arg0: Event) => void;
   private readonly editKey: (arg0: Event) => boolean;
@@ -963,7 +963,6 @@ export class LongClickController extends Common.ObjectWrapper.ObjectWrapper {
   constructor(
       element: Element, callback: (arg0: Event) => void,
       isEditKeyFunc: (arg0: Event) => boolean = (event): boolean => isEnterOrSpaceKey(event)) {
-    super();
     this.element = element;
     this.callback = callback;
     this.editKey = isEditKeyFunc;

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);