chrome-devtools-frontend 1.0.1681091 → 1.0.1682249

package/front_end/models/emulation/EmulatedDevices.ts

@@ -49,42 +49,22 @@ const i18nLazyString = i18n.i18n.getLazilyComputedLocalizedString.bind(undefined
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 export class EmulatedDevice {
-  title: string;
-  type: Type;
+  title = '';
+  type = Type.Unknown;
   order!: number;
-  vertical: Orientation;
-  horizontal: Orientation;
-  deviceScaleFactor: number;
-  capabilities: string[];
-  userAgent: string;
-  userAgentMetadata: Protocol.Emulation.UserAgentMetadata|null;
-  modes: Mode[];
-  isDualScreen: boolean;
-  isFoldableScreen: boolean;
-  verticalSpanned: Orientation;
-  horizontalSpanned: Orientation;
-  #show: Show;
-  #showByDefault: boolean;
-
-  constructor() {
-    this.title = '';
-    this.type = Type.Unknown;
-    this.vertical = {width: 0, height: 0, hinge: null};
-    this.horizontal = {width: 0, height: 0, hinge: null};
-    this.deviceScaleFactor = 1;
-    this.capabilities = [Capability.TOUCH, Capability.MOBILE];
-    this.userAgent = '';
-    this.userAgentMetadata = null;
-    this.modes = [];
-
-    this.isDualScreen = false;
-    this.isFoldableScreen = false;
-    this.verticalSpanned = {width: 0, height: 0, hinge: null};
-    this.horizontalSpanned = {width: 0, height: 0, hinge: null};
-
-    this.#show = Show.Default;
-    this.#showByDefault = true;
-  }
+  vertical: Orientation = {width: 0, height: 0, hinge: null};
+  horizontal: Orientation = {width: 0, height: 0, hinge: null};
+  deviceScaleFactor = 1;
+  capabilities: string[] = [Capability.TOUCH, Capability.MOBILE];
+  userAgent = '';
+  userAgentMetadata: Protocol.Emulation.UserAgentMetadata|null = null;
+  modes: Mode[] = [];
+  isDualScreen = false;
+  isFoldableScreen = false;
+  verticalSpanned: Orientation = {width: 0, height: 0, hinge: null};
+  horizontalSpanned: Orientation = {width: 0, height: 0, hinge: null};
+  #show = Show.Default;
+  #showByDefault = true;
 
   static fromJSONV1(json: any): EmulatedDevice|null {
     try {
@@ -262,15 +242,7 @@ export class EmulatedDevice {
             mode.orientation !== HorizontalSpanned) {
           throw new Error('Emulated device mode has wrong orientation \'' + mode.orientation + '\'');
         }
-        const orientation = result.orientationByName(mode.orientation);
-        mode.insets = parseInsets(parseValue(modes[i], 'insets', 'object', {left: 0, top: 0, right: 0, bottom: 0}));
-        if (mode.insets.top < 0 || mode.insets.left < 0 || mode.insets.right < 0 || mode.insets.bottom < 0 ||
-            mode.insets.top + mode.insets.bottom > orientation.height ||
-            mode.insets.left + mode.insets.right > orientation.width) {
-          throw new Error(
-              'Emulated device mode \'' + mode.title + '\'has wrong mode insets',
-          );
-        }
+
         const safeAreaInsets = parseValue(modes[i], 'safe-area-insets', 'object', null);
         if (safeAreaInsets) {
           mode.safeAreaInsets = parseInsets(safeAreaInsets);
@@ -399,12 +371,6 @@ export class EmulatedDevice {
       const mode: JSONMode = {
         title: this.modes[i].title,
         orientation: this.modes[i].orientation,
-        insets: {
-          left: this.modes[i].insets.left,
-          top: this.modes[i].insets.top,
-          right: this.modes[i].insets.right,
-          bottom: this.modes[i].insets.bottom,
-        },
       };
       const safeAreaInsets = this.modes[i].safeAreaInsets;
       if (safeAreaInsets) {
@@ -651,12 +617,10 @@ export class EmulatedDevicesList extends Common.ObjectWrapper.ObjectWrapper<Even
           device.modes.push({
             title: '',
             orientation: Horizontal,
-            insets: new Insets(0, 0, 0, 0),
           });
           device.modes.push({
             title: '',
             orientation: Vertical,
-            insets: new Insets(0, 0, 0, 0),
           });
         }
       } else {
@@ -736,7 +700,6 @@ export interface EventTypes {
 export interface Mode {
   title: string;
   orientation: string;
-  insets: Insets;
   safeAreaInsets?: Insets;
   cutout?: Cutout;
 }
@@ -763,12 +726,6 @@ export interface Orientation {
 export interface JSONMode {
   title: string;
   orientation: string;
-  insets: {
-    left: number,
-    right: number,
-    top: number,
-    bottom: number,
-  };
   'safe-area-insets'?: {
     left: number,
     right: number,
@@ -845,7 +802,6 @@ const emulatedDevices = [
       {
         'title': 'default',
         'orientation': 'vertical',
-        'insets': {'left': 0, 'top': 0, 'right': 0, 'bottom': 0},
         'safe-area-insets': {'left': 0, 'top': 44, 'right': 0, 'bottom': 34},
         'cutout':
             {'shape': 'notch', 'x': 92, 'y': 0, 'width': 231, 'height': 33, 'upper-radius': 6, 'lower-radius': 25},
@@ -853,7 +809,6 @@ const emulatedDevices = [
       {
         'title': 'default',
         'orientation': 'horizontal',
-        'insets': {'left': 0, 'top': 0, 'right': 0, 'bottom': 0},
         'safe-area-insets': {'left': 44, 'top': 0, 'right': 44, 'bottom': 21},
       },
     ],
@@ -883,7 +838,6 @@ const emulatedDevices = [
       {
         'title': 'default',
         'orientation': 'vertical',
-        'insets': {'left': 0, 'top': 0, 'right': 0, 'bottom': 0},
         'safe-area-insets': {'left': 0, 'top': 47, 'right': 0, 'bottom': 34},
         'cutout':
             {'shape': 'notch', 'x': 90, 'y': 0, 'width': 210, 'height': 32, 'upper-radius': 6, 'lower-radius': 23},
@@ -891,7 +845,6 @@ const emulatedDevices = [
       {
         'title': 'default',
         'orientation': 'horizontal',
-        'insets': {'left': 0, 'top': 0, 'right': 0, 'bottom': 0},
         'safe-area-insets': {'left': 47, 'top': 0, 'right': 47, 'bottom': 21},
       },
     ],
@@ -921,7 +874,6 @@ const emulatedDevices = [
       {
         'title': 'default',
         'orientation': 'vertical',
-        'insets': {'left': 0, 'top': 0, 'right': 0, 'bottom': 0},
         'safe-area-insets': {'left': 0, 'top': 47, 'right': 0, 'bottom': 34},
         'cutout':
             {'shape': 'notch', 'x': 114, 'y': 0, 'width': 162, 'height': 34, 'upper-radius': 5, 'lower-radius': 22},
@@ -929,7 +881,6 @@ const emulatedDevices = [
       {
         'title': 'default',
         'orientation': 'horizontal',
-        'insets': {'left': 0, 'top': 0, 'right': 0, 'bottom': 0},
         'safe-area-insets': {'left': 47, 'top': 0, 'right': 47, 'bottom': 21},
       },
     ],
@@ -959,7 +910,6 @@ const emulatedDevices = [
       {
         'title': 'default',
         'orientation': 'vertical',
-        'insets': {'left': 0, 'top': 0, 'right': 0, 'bottom': 0},
         'safe-area-insets': {'left': 0, 'top': 47, 'right': 0, 'bottom': 34},
         'cutout':
             {'shape': 'notch', 'x': 133, 'y': 0, 'width': 161, 'height': 34, 'upper-radius': 5, 'lower-radius': 22},
@@ -967,7 +917,6 @@ const emulatedDevices = [
       {
         'title': 'default',
         'orientation': 'horizontal',
-        'insets': {'left': 0, 'top': 0, 'right': 0, 'bottom': 0},
         'safe-area-insets': {'left': 47, 'top': 0, 'right': 47, 'bottom': 21},
       },
     ],
@@ -997,14 +946,12 @@ const emulatedDevices = [
       {
         'title': 'default',
         'orientation': 'vertical',
-        'insets': {'left': 0, 'top': 0, 'right': 0, 'bottom': 0},
         'safe-area-insets': {'left': 0, 'top': 59, 'right': 0, 'bottom': 34},
         'cutout': {'shape': 'pill', 'x': 134, 'y': 11, 'width': 125, 'height': 37, 'border-radius': 19},
       },
       {
         'title': 'default',
         'orientation': 'horizontal',
-        'insets': {'left': 0, 'top': 0, 'right': 0, 'bottom': 0},
         'safe-area-insets': {'left': 59, 'top': 0, 'right': 59, 'bottom': 21},
       },
     ],
@@ -1034,14 +981,12 @@ const emulatedDevices = [
       {
         'title': 'default',
         'orientation': 'vertical',
-        'insets': {'left': 0, 'top': 0, 'right': 0, 'bottom': 0},
         'safe-area-insets': {'left': 0, 'top': 59, 'right': 0, 'bottom': 34},
         'cutout': {'shape': 'pill', 'x': 153, 'y': 11, 'width': 125, 'height': 37, 'border-radius': 19},
       },
       {
         'title': 'default',
         'orientation': 'horizontal',
-        'insets': {'left': 0, 'top': 0, 'right': 0, 'bottom': 0},
         'safe-area-insets': {'left': 59, 'top': 0, 'right': 59, 'bottom': 21},
       },
     ],
@@ -1071,14 +1016,12 @@ const emulatedDevices = [
       {
         'title': 'default',
         'orientation': 'vertical',
-        'insets': {'left': 0, 'top': 0, 'right': 0, 'bottom': 0},
         'safe-area-insets': {'left': 0, 'top': 59, 'right': 0, 'bottom': 34},
         'cutout': {'shape': 'pill', 'x': 134, 'y': 11, 'width': 125, 'height': 37, 'border-radius': 19},
       },
       {
         'title': 'default',
         'orientation': 'horizontal',
-        'insets': {'left': 0, 'top': 0, 'right': 0, 'bottom': 0},
         'safe-area-insets': {'left': 59, 'top': 0, 'right': 59, 'bottom': 21},
       },
     ],
@@ -1108,14 +1051,12 @@ const emulatedDevices = [
       {
         'title': 'default',
         'orientation': 'vertical',
-        'insets': {'left': 0, 'top': 0, 'right': 0, 'bottom': 0},
         'safe-area-insets': {'left': 0, 'top': 59, 'right': 0, 'bottom': 34},
         'cutout': {'shape': 'pill', 'x': 153, 'y': 11, 'width': 125, 'height': 37, 'border-radius': 19},
       },
       {
         'title': 'default',
         'orientation': 'horizontal',
-        'insets': {'left': 0, 'top': 0, 'right': 0, 'bottom': 0},
         'safe-area-insets': {'left': 59, 'top': 0, 'right': 59, 'bottom': 21},
       },
     ],
@@ -1145,14 +1086,12 @@ const emulatedDevices = [
       {
         'title': 'default',
         'orientation': 'vertical',
-        'insets': {'left': 0, 'top': 0, 'right': 0, 'bottom': 0},
         'safe-area-insets': {'left': 0, 'top': 59, 'right': 0, 'bottom': 34},
         'cutout': {'shape': 'pill', 'x': 134, 'y': 11, 'width': 125, 'height': 37, 'border-radius': 19},
       },
       {
         'title': 'default',
         'orientation': 'horizontal',
-        'insets': {'left': 0, 'top': 0, 'right': 0, 'bottom': 0},
         'safe-area-insets': {'left': 59, 'top': 0, 'right': 59, 'bottom': 21},
       },
     ],
@@ -1182,14 +1121,12 @@ const emulatedDevices = [
       {
         'title': 'default',
         'orientation': 'vertical',
-        'insets': {'left': 0, 'top': 0, 'right': 0, 'bottom': 0},
         'safe-area-insets': {'left': 0, 'top': 59, 'right': 0, 'bottom': 34},
         'cutout': {'shape': 'pill', 'x': 153, 'y': 11, 'width': 125, 'height': 37, 'border-radius': 19},
       },
       {
         'title': 'default',
         'orientation': 'horizontal',
-        'insets': {'left': 0, 'top': 0, 'right': 0, 'bottom': 0},
         'safe-area-insets': {'left': 59, 'top': 0, 'right': 59, 'bottom': 21},
       },
     ],
@@ -1219,7 +1156,6 @@ const emulatedDevices = [
       {
         'title': 'default',
         'orientation': 'vertical',
-        'insets': {'left': 0, 'top': 0, 'right': 0, 'bottom': 0},
         'safe-area-insets': {'left': 0, 'top': 47, 'right': 0, 'bottom': 34},
         'cutout':
             {'shape': 'notch', 'x': 114, 'y': 0, 'width': 162, 'height': 34, 'upper-radius': 5, 'lower-radius': 22},
@@ -1227,7 +1163,6 @@ const emulatedDevices = [
       {
         'title': 'default',
         'orientation': 'horizontal',
-        'insets': {'left': 0, 'top': 0, 'right': 0, 'bottom': 0},
         'safe-area-insets': {'left': 47, 'top': 0, 'right': 47, 'bottom': 21},
       },
     ],
@@ -1257,14 +1192,12 @@ const emulatedDevices = [
       {
         'title': 'default',
         'orientation': 'vertical',
-        'insets': {'left': 0, 'top': 0, 'right': 0, 'bottom': 0},
         'safe-area-insets': {'left': 0, 'top': 59, 'right': 0, 'bottom': 34},
         'cutout': {'shape': 'pill', 'x': 134, 'y': 11, 'width': 125, 'height': 37, 'border-radius': 19},
       },
       {
         'title': 'default',
         'orientation': 'horizontal',
-        'insets': {'left': 0, 'top': 0, 'right': 0, 'bottom': 0},
         'safe-area-insets': {'left': 59, 'top': 0, 'right': 59, 'bottom': 21},
       },
     ],
@@ -1294,14 +1227,12 @@ const emulatedDevices = [
       {
         'title': 'default',
         'orientation': 'vertical',
-        'insets': {'left': 0, 'top': 0, 'right': 0, 'bottom': 0},
         'safe-area-insets': {'left': 0, 'top': 59, 'right': 0, 'bottom': 34},
         'cutout': {'shape': 'pill', 'x': 153, 'y': 11, 'width': 125, 'height': 37, 'border-radius': 19},
       },
       {
         'title': 'default',
         'orientation': 'horizontal',
-        'insets': {'left': 0, 'top': 0, 'right': 0, 'bottom': 0},
         'safe-area-insets': {'left': 59, 'top': 0, 'right': 59, 'bottom': 21},
       },
     ],
@@ -1331,14 +1262,12 @@ const emulatedDevices = [
       {
         'title': 'default',
         'orientation': 'vertical',
-        'insets': {'left': 0, 'top': 0, 'right': 0, 'bottom': 0},
         'safe-area-insets': {'left': 0, 'top': 62, 'right': 0, 'bottom': 34},
         'cutout': {'shape': 'pill', 'x': 139, 'y': 14, 'width': 125, 'height': 37, 'border-radius': 19},
       },
       {
         'title': 'default',
         'orientation': 'horizontal',
-        'insets': {'left': 0, 'top': 0, 'right': 0, 'bottom': 0},
         'safe-area-insets': {'left': 62, 'top': 0, 'right': 62, 'bottom': 21},
       },
     ],
@@ -1368,14 +1297,12 @@ const emulatedDevices = [
       {
         'title': 'default',
         'orientation': 'vertical',
-        'insets': {'left': 0, 'top': 0, 'right': 0, 'bottom': 0},
         'safe-area-insets': {'left': 0, 'top': 62, 'right': 0, 'bottom': 34},
         'cutout': {'shape': 'pill', 'x': 158, 'y': 14, 'width': 125, 'height': 37, 'border-radius': 19},
       },
       {
         'title': 'default',
         'orientation': 'horizontal',
-        'insets': {'left': 0, 'top': 0, 'right': 0, 'bottom': 0},
         'safe-area-insets': {'left': 62, 'top': 0, 'right': 62, 'bottom': 21},
       },
     ],
@@ -1406,14 +1333,12 @@ const emulatedDevices = [
       {
         'title': 'default',
         'orientation': 'vertical',
-        'insets': {'left': 0, 'top': 0, 'right': 0, 'bottom': 0},
         'safe-area-insets': {'left': 0, 'top': 52, 'right': 0, 'bottom': 0},
         'cutout': {'shape': 'circle', 'x': 183, 'y': 0, 'width': 55, 'height': 52, 'cx': 206, 'cy': 26, 'radius': 13},
       },
       {
         'title': 'default',
         'orientation': 'horizontal',
-        'insets': {'left': 0, 'top': 0, 'right': 0, 'bottom': 0},
         'safe-area-insets': {'left': 0, 'top': 0, 'right': 52, 'bottom': 0},
       },
     ],
@@ -1443,14 +1368,12 @@ const emulatedDevices = [
       {
         'title': 'default',
         'orientation': 'vertical',
-        'insets': {'left': 0, 'top': 0, 'right': 0, 'bottom': 0},
         'safe-area-insets': {'left': 0, 'top': 50, 'right': 0, 'bottom': 0},
         'cutout': {'shape': 'circle', 'x': 182, 'y': 0, 'width': 46, 'height': 50, 'cx': 206, 'cy': 25, 'radius': 14},
       },
       {
         'title': 'default',
         'orientation': 'horizontal',
-        'insets': {'left': 0, 'top': 0, 'right': 0, 'bottom': 0},
         'safe-area-insets': {'left': 0, 'top': 0, 'right': 50, 'bottom': 0},
       },
     ],
@@ -1480,14 +1403,12 @@ const emulatedDevices = [
       {
         'title': 'default',
         'orientation': 'vertical',
-        'insets': {'left': 0, 'top': 0, 'right': 0, 'bottom': 0},
         'safe-area-insets': {'left': 0, 'top': 50, 'right': 0, 'bottom': 0},
         'cutout': {'shape': 'circle', 'x': 205, 'y': 0, 'width': 37, 'height': 50, 'cx': 224, 'cy': 25, 'radius': 14},
       },
       {
         'title': 'default',
         'orientation': 'horizontal',
-        'insets': {'left': 0, 'top': 0, 'right': 0, 'bottom': 0},
         'safe-area-insets': {'left': 0, 'top': 0, 'right': 50, 'bottom': 0},
       },
     ],
@@ -1517,14 +1438,12 @@ const emulatedDevices = [
       {
         'title': 'default',
         'orientation': 'vertical',
-        'insets': {'left': 0, 'top': 0, 'right': 0, 'bottom': 0},
         'safe-area-insets': {'left': 0, 'top': 46, 'right': 0, 'bottom': 0},
         'cutout': {'shape': 'circle', 'x': 185, 'y': 0, 'width': 42, 'height': 46, 'cx': 206, 'cy': 26, 'radius': 13},
       },
       {
         'title': 'default',
         'orientation': 'horizontal',
-        'insets': {'left': 0, 'top': 0, 'right': 0, 'bottom': 0},
         'safe-area-insets': {'left': 0, 'top': 0, 'right': 46, 'bottom': 0},
       },
     ],
@@ -1554,14 +1473,12 @@ const emulatedDevices = [
       {
         'title': 'default',
         'orientation': 'vertical',
-        'insets': {'left': 0, 'top': 0, 'right': 0, 'bottom': 0},
         'safe-area-insets': {'left': 0, 'top': 58, 'right': 0, 'bottom': 0},
         'cutout': {'shape': 'circle', 'x': 188, 'y': 0, 'width': 37, 'height': 58, 'cx': 206, 'cy': 29, 'radius': 14},
       },
       {
         'title': 'default',
         'orientation': 'horizontal',
-        'insets': {'left': 0, 'top': 0, 'right': 0, 'bottom': 0},
         'safe-area-insets': {'left': 0, 'top': 0, 'right': 58, 'bottom': 0},
       },
     ],
@@ -1591,14 +1508,12 @@ const emulatedDevices = [
       {
         'title': 'default',
         'orientation': 'vertical',
-        'insets': {'left': 0, 'top': 0, 'right': 0, 'bottom': 0},
         'safe-area-insets': {'left': 0, 'top': 68, 'right': 0, 'bottom': 0},
         'cutout': {'shape': 'circle', 'x': 195, 'y': 0, 'width': 36, 'height': 68, 'cx': 213, 'cy': 34, 'radius': 16},
       },
       {
         'title': 'default',
         'orientation': 'horizontal',
-        'insets': {'left': 0, 'top': 0, 'right': 0, 'bottom': 0},
         'safe-area-insets': {'left': 0, 'top': 0, 'right': 68, 'bottom': 0},
       },
     ],
@@ -1628,14 +1543,12 @@ const emulatedDevices = [
       {
         'title': 'default',
         'orientation': 'vertical',
-        'insets': {'left': 0, 'top': 0, 'right': 0, 'bottom': 0},
         'safe-area-insets': {'left': 0, 'top': 66, 'right': 0, 'bottom': 0},
         'cutout': {'shape': 'circle', 'x': 205, 'y': 0, 'width': 38, 'height': 66, 'cx': 224, 'cy': 33, 'radius': 16},
       },
       {
         'title': 'default',
         'orientation': 'horizontal',
-        'insets': {'left': 0, 'top': 0, 'right': 0, 'bottom': 0},
         'safe-area-insets': {'left': 0, 'top': 0, 'right': 66, 'bottom': 0},
       },
     ],
@@ -1665,14 +1578,12 @@ const emulatedDevices = [
       {
         'title': 'default',
         'orientation': 'vertical',
-        'insets': {'left': 0, 'top': 0, 'right': 0, 'bottom': 0},
         'safe-area-insets': {'left': 0, 'top': 58, 'right': 0, 'bottom': 0},
         'cutout': {'shape': 'circle', 'x': 188, 'y': 0, 'width': 37, 'height': 58, 'cx': 206, 'cy': 29, 'radius': 14},
       },
       {
         'title': 'default',
         'orientation': 'horizontal',
-        'insets': {'left': 0, 'top': 0, 'right': 0, 'bottom': 0},
         'safe-area-insets': {'left': 0, 'top': 0, 'right': 58, 'bottom': 0},
       },
     ],
@@ -1833,13 +1744,12 @@ const emulatedDevices = [
         {'platform': 'Android', 'platformVersion': '11.0', 'architecture': '', 'model': 'Surface Duo', 'mobile': true},
     'type': 'phone',
     'modes': [
-      {'title': 'default', 'orientation': 'vertical', 'insets': {'left': 0, 'top': 0, 'right': 0, 'bottom': 0}},
-      {'title': 'default', 'orientation': 'horizontal', 'insets': {'left': 0, 'top': 0, 'right': 0, 'bottom': 0}},
-      {'title': 'spanned', 'orientation': 'vertical-spanned', 'insets': {'left': 0, 'top': 0, 'right': 0, 'bottom': 0}},
+      {'title': 'default', 'orientation': 'vertical'},
+      {'title': 'default', 'orientation': 'horizontal'},
+      {'title': 'spanned', 'orientation': 'vertical-spanned'},
       {
         'title': 'spanned',
         'orientation': 'horizontal-spanned',
-        'insets': {'left': 0, 'top': 0, 'right': 0, 'bottom': 0},
       },
     ],
   },
@@ -1905,13 +1815,12 @@ const emulatedDevices = [
     },
     'type': 'phone',
     'modes': [
-      {'title': 'default', 'orientation': 'vertical', 'insets': {'left': 0, 'top': 0, 'right': 0, 'bottom': 0}},
-      {'title': 'default', 'orientation': 'horizontal', 'insets': {'left': 0, 'top': 0, 'right': 0, 'bottom': 0}},
-      {'title': 'spanned', 'orientation': 'vertical-spanned', 'insets': {'left': 0, 'top': 0, 'right': 0, 'bottom': 0}},
+      {'title': 'default', 'orientation': 'vertical'},
+      {'title': 'default', 'orientation': 'horizontal'},
+      {'title': 'spanned', 'orientation': 'vertical-spanned'},
       {
         'title': 'spanned',
         'orientation': 'horizontal-spanned',
-        'insets': {'left': 0, 'top': 0, 'right': 0, 'bottom': 0},
       },
     ],
   },
@@ -1956,13 +1865,12 @@ const emulatedDevices = [
         {'platform': 'Android', 'platformVersion': '14', 'architecture': '', 'model': 'SM-F956U', 'mobile': true},
     'type': 'phone',
     'modes': [
-      {'title': 'default', 'orientation': 'vertical', 'insets': {'left': 0, 'top': 0, 'right': 0, 'bottom': 0}},
-      {'title': 'default', 'orientation': 'horizontal', 'insets': {'left': 0, 'top': 0, 'right': 0, 'bottom': 0}},
-      {'title': 'spanned', 'orientation': 'vertical-spanned', 'insets': {'left': 0, 'top': 0, 'right': 0, 'bottom': 0}},
+      {'title': 'default', 'orientation': 'vertical'},
+      {'title': 'default', 'orientation': 'horizontal'},
+      {'title': 'spanned', 'orientation': 'vertical-spanned'},
       {
         'title': 'spanned',
         'orientation': 'horizontal-spanned',
-        'insets': {'left': 0, 'top': 0, 'right': 0, 'bottom': 0},
       },
     ],
   },
@@ -2007,13 +1915,12 @@ const emulatedDevices = [
         {'platform': 'Android', 'platformVersion': '10.0', 'architecture': '', 'model': 'SM-F946U', 'mobile': true},
     'type': 'phone',
     'modes': [
-      {'title': 'default', 'orientation': 'vertical', 'insets': {'left': 0, 'top': 0, 'right': 0, 'bottom': 0}},
-      {'title': 'default', 'orientation': 'horizontal', 'insets': {'left': 0, 'top': 0, 'right': 0, 'bottom': 0}},
-      {'title': 'spanned', 'orientation': 'vertical-spanned', 'insets': {'left': 0, 'top': 0, 'right': 0, 'bottom': 0}},
+      {'title': 'default', 'orientation': 'vertical'},
+      {'title': 'default', 'orientation': 'horizontal'},
+      {'title': 'spanned', 'orientation': 'vertical-spanned'},
       {
         'title': 'spanned',
         'orientation': 'horizontal-spanned',
-        'insets': {'left': 0, 'top': 0, 'right': 0, 'bottom': 0},
       },
     ],
   },
@@ -2058,17 +1965,15 @@ const emulatedDevices = [
         {'platform': 'Windows', 'platformVersion': '11.0', 'architecture': '', 'model': 'UX9702AA', 'mobile': false},
     'type': 'tablet',
     'modes': [
-      {'title': 'default', 'orientation': 'vertical', 'insets': {'left': 0, 'top': 0, 'right': 0, 'bottom': 0}},
-      {'title': 'default', 'orientation': 'horizontal', 'insets': {'left': 0, 'top': 0, 'right': 0, 'bottom': 0}},
+      {'title': 'default', 'orientation': 'vertical'},
+      {'title': 'default', 'orientation': 'horizontal'},
       {
         'title': 'spanned',
         'orientation': 'vertical-spanned',
-        'insets': {'left': 0, 'top': 0, 'right': 0, 'bottom': 0},
       },
       {
         'title': 'spanned',
         'orientation': 'horizontal-spanned',
-        'insets': {'left': 0, 'top': 0, 'right': 0, 'bottom': 0},
       },
     ],
   },

package/front_end/models/extensions/ExtensionAPI.ts

@@ -247,9 +247,20 @@ export namespace PrivateAPI {
     scriptUrl: string;
     ranges: PublicAPI.Chrome.DevTools.NamedFunctionRange[];
   }
+  export interface ForwardKeyboardEventRequestEntry {
+    eventType: string;
+    ctrlKey: boolean;
+    altKey: boolean;
+    metaKey: boolean;
+    shiftKey: boolean;
+    key: string;
+    code: string;
+    keyCode: number;
+    location: number;
+  }
   interface ForwardKeyboardEventRequest {
     command: Commands.ForwardKeyboardEvent;
-    entries: Array<KeyboardEventInit&{eventType: string}>;
+    entries: ForwardKeyboardEventRequestEntry[];
   }
   interface GetHARRequest {
     command: Commands.GetHAR;
@@ -1553,52 +1564,52 @@ self.injectedExtensionAPI = function(
     return inspectedTabId;
   }
 
-  let keyboardEventRequestQueue: KeyboardEventInit&Array<{eventType: string}> = [];
+  let keyboardEventRequestQueue: PrivateAPI.ForwardKeyboardEventRequestEntry[] = [];
   let forwardTimer: ReturnType<typeof setTimeout>|undefined;
   function forwardKeyboardEvent(event: KeyboardEvent): void {
+    const requestPayload: Readonly<PrivateAPI.ForwardKeyboardEventRequestEntry> = Object.freeze({
+      eventType: event.type,
+      ctrlKey: event.ctrlKey,
+      altKey: event.altKey,
+      metaKey: event.metaKey,
+      shiftKey: event.shiftKey,
+      key: event.key,
+      code: event.code,
+      keyCode: event.keyCode,
+      location: event.location,
+    });
+
     // Check if the event should be forwarded.
     // This is a workaround for crbug.com/923338.
-    const focused = document.activeElement;
+    const targetDocument = targetWindowForTest?.document ?? document;
+    const focused = targetDocument.activeElement;
     if (focused) {
       const isInput =
           focused.nodeName === 'INPUT' || focused.nodeName === 'TEXTAREA' || (focused as HTMLElement).isContentEditable;
-      if (isInput && !(event.ctrlKey || event.altKey || event.metaKey)) {
+      if (isInput && !(requestPayload.ctrlKey || requestPayload.altKey || requestPayload.metaKey)) {
         return;
       }
     }
 
     let modifiers = 0;
-    if (event.shiftKey) {
+    if (requestPayload.shiftKey) {
       modifiers |= 1;
     }
-    if (event.ctrlKey) {
+    if (requestPayload.ctrlKey) {
       modifiers |= 2;
     }
-    if (event.altKey) {
+    if (requestPayload.altKey) {
       modifiers |= 4;
     }
-    if (event.metaKey) {
+    if (requestPayload.metaKey) {
       modifiers |= 8;
     }
-    const num = (event.keyCode & 255) | (modifiers << 8);
+    const num = (requestPayload.keyCode & 255) | (modifiers << 8);
     // We only care about global hotkeys, not about random text
     if (!keysToForwardSet.has(num)) {
       return;
     }
     event.preventDefault();
-    const requestPayload = {
-      eventType: event.type,
-      ctrlKey: event.ctrlKey,
-      altKey: event.altKey,
-      metaKey: event.metaKey,
-      shiftKey: event.shiftKey,
-      // @ts-expect-error keyIdentifier is a deprecated non-standard property that typescript doesn't know about.
-      keyIdentifier: event.keyIdentifier,
-      key: event.key,
-      code: event.code,
-      location: event.location,
-      keyCode: event.keyCode,
-    };
     keyboardEventRequestQueue.push(requestPayload);
     if (!forwardTimer) {
       forwardTimer = globalThis.setTimeout(forwardEventQueue, 0);
@@ -1612,7 +1623,7 @@ self.injectedExtensionAPI = function(
     keyboardEventRequestQueue = [];
   }
 
-  document.addEventListener('keydown', forwardKeyboardEvent, false);
+  (targetWindowForTest?.document ?? document).addEventListener('keydown', forwardKeyboardEvent, false);
 
   function ExtensionServerClient(this: APIImpl.ExtensionServerClient, targetWindow: Window): void {
     this._callbacks = {};

package/front_end/models/formatter/ScriptFormatter.ts

@@ -4,6 +4,7 @@
 
 import type * as Common from '../../core/common/common.js';
 import * as Platform from '../../core/platform/platform.js';
+// eslint-disable-next-line @devtools/es-modules-import
 import type * as FormatterActions from '../../entrypoints/formatter_worker/FormatterActions.js';
 
 import {formatterWorkerPool} from './FormatterWorkerPool.js';