chrome-devtools-frontend 1.0.1683520 → 1.0.1689415

package/front_end/panels/network/signedExchangeInfoTree.css

@@ -10,14 +10,14 @@
 
 .tree-outline > ol {
   padding-bottom: 5px;
-  border-bottom: solid 1px var(--sys-color-divider);
+  border-bottom: solid var(--sys-size-1) var(--sys-color-divider);
 }
 
 .tree-outline > .parent {
   user-select: none;
   font-weight: bold;
   color: var(--sys-color-on-surface);
-  margin-top: -1px;
+  margin-top: calc(-1 * var(--sys-size-1));
   display: flex;
   align-items: center;
   height: 26px;
@@ -25,7 +25,7 @@
 
 .tree-outline li {
   padding-left: 5px;
-  line-height: 20px;
+  line-height: var(--sys-size-9);
 }
 
 .tree-outline li:not(.parent) {
@@ -55,7 +55,7 @@
   margin-right: 1em;
   white-space: pre-wrap;
   word-break: break-all;
-  margin-top: 1px;
+  margin-top: var(--sys-size-1);
 }
 
 .tree-outline .header-toggle {
@@ -83,7 +83,7 @@
   display: block;
   word-break: normal;
   overflow-wrap: anywhere;
-  margin-left: 20px;
+  margin-left: var(--sys-size-9);
 }
 
 .tree-outline .error-field {
@@ -91,5 +91,5 @@
 }
 
 .prompt-icon {
-  margin-top: 2px;
+  margin-top: var(--sys-size-2);
 }

package/front_end/panels/profiler/heapProfiler.css

@@ -47,7 +47,7 @@
 }
 
 .heap-snapshot-view .data-grid tr:empty {
-  height: 16px;
+  height: var(--sys-size-8);
   visibility: hidden;
 }
 
@@ -67,7 +67,7 @@
 
 .heap-snapshot-view td.object-column .objects-count {
   margin-left: 10px;
-  font-size: 11px;
+  font-size: var(--sys-typescale-body5-size);
   color: var(--sys-color-token-subtle);
 }
 
@@ -76,8 +76,8 @@
 }
 
 .profile-view .heap-tracking-overview {
-  flex: 0 0 80px;
-  height: 80px;
+  flex: 0 0 var(--sys-size-19);
+  height: var(--sys-size-19);
 }
 
 .heap-snapshot-view .retaining-paths-view {
@@ -91,7 +91,7 @@
 }
 
 .heap-snapshot-view td.object-column > div > span {
-  margin-right: 6px;
+  margin-right: var(--sys-size-4);
 }
 
 .heap-snapshot-view .heap-snapshot-view-resizer .title {
@@ -104,8 +104,8 @@
   display: inline-block;
   padding-top: 3px;
   vertical-align: middle;
-  margin-left: 4px;
-  margin-right: 8px;
+  margin-left: var(--sys-size-3);
+  margin-right: var(--sys-size-5);
 }
 
 .heap-snapshot-view .heap-snapshot-view-resizer * {
@@ -150,8 +150,8 @@
 }
 
 .heap-object-tag {
-  height: 14px;
-  width: 14px;
+  height: var(--sys-size-7);
+  width: var(--sys-size-7);
 }
 
 .heap-snapshot-view tr:not(.selected) td.object-column span.heap-object-tag,
@@ -165,7 +165,7 @@
 }
 
 #heap-recording-view .profile-view {
-  top: 80px;
+  top: var(--sys-size-19);
 }
 
 .heap-overview-container {
@@ -173,7 +173,7 @@
   position: absolute;
   top: 0;
   width: 100%;
-  height: 80px;
+  height: var(--sys-size-19);
 }
 
 #heap-recording-overview-grid .resources-dividers-label-bar {
@@ -182,7 +182,7 @@
 
 .heap-recording-overview-canvas {
   position: absolute;
-  inset: 20px 0 0;
+  inset: var(--sys-size-9) 0 0;
 }
 
 .heap-snapshot-statistics-view {
@@ -190,15 +190,15 @@
 }
 
 .heap-snapshot-stats-pie-chart {
-  margin: 12px 30px;
+  margin: var(--sys-size-6) 30px;
   flex-shrink: 0;
 }
 
 .heap-allocation-stack .stack-frame {
   display: flex;
   justify-content: space-between;
-  border-bottom: 1px solid var(--sys-color-divider);
-  padding: 2px;
+  border-bottom: var(--sys-size-1) solid var(--sys-color-divider);
+  padding: var(--sys-size-2);
 }
 
 .heap-allocation-stack .stack-frame:focus {

package/front_end/panels/profiler/profileLauncherView.css

@@ -9,12 +9,12 @@
 }
 
 .profile-launcher-view-content {
-  margin: 10px 16px;
+  margin: 10px var(--sys-size-8);
   flex: auto 1 0;
 
   & h1 {
     font: var(--sys-typescale-headline4);
-    margin: 6px 0 10px;
+    margin: var(--sys-size-4) 0 10px;
   }
 
   & label {
@@ -47,8 +47,8 @@
 }
 
 .profile-launcher-target-list {
-  margin-bottom: 6px;
-  border: 1px solid var(--sys-color-divider);
+  margin-bottom: var(--sys-size-4);
+  border: var(--sys-size-1) solid var(--sys-color-divider);
   flex: 150px 1 0;
 }
 
@@ -59,13 +59,13 @@
 .profile-memory-usage-item {
   min-width: 100%;
   width: max-content;
-  padding: 4px;
-  line-height: 16px;
+  padding: var(--sys-size-3);
+  line-height: var(--sys-size-8);
 }
 
 .profile-isolate-selector-block > .profile-memory-usage-item {
-  margin-left: 1px;
-  margin-bottom: 4px;
+  margin-left: var(--sys-size-1);
+  margin-bottom: var(--sys-size-3);
   font-weight: bolder;
 }
 
@@ -92,7 +92,7 @@
 
 .profile-memory-usage-item > div {
   flex-shrink: 0;
-  margin-right: 12px;
+  margin-right: var(--sys-size-6);
 }
 
 .profile-memory-usage-item-size {
@@ -111,7 +111,7 @@
 
 .profile-launcher-buttons {
   flex-wrap: wrap;
-  column-gap: 8px;
+  column-gap: var(--sys-size-5);
 }
 
 @media (forced-colors: active) {

package/front_end/panels/recorder/RecordingView.ts

@@ -882,7 +882,7 @@ export class RecordingView extends UI.Widget.Widget {
   settings?: Models.RecordingSettings.RecordingSettings;
   lastReplayResult?: Models.RecordingPlayer.ReplayResult;
   replayAllowed = false;
-  breakpointIndexes = new Set<number>();
+  breakpointIndexes: Set<number> = new Set<number>();
   extensionConverters: readonly Converters.Converter.Converter[] = [];
   replayExtensions?: Extensions.ExtensionManager.Extension[];
   extensionDescriptor?: PublicExtensions.RecorderPluginManager.ViewDescriptor;

package/front_end/panels/recorder/StepEditor.ts

@@ -38,16 +38,20 @@ type Attribute = Keys<Models.Schema.Step>;
 
 type DataType<A extends Attribute> = ReturnType<typeof typeConverters[typeof dataTypeByAttribute[A]]>;
 
-const typeConverters = Object.freeze({
-  string: (value: string) => value.trim(),
-  number: (value: string) => {
+const typeConverters: Readonly<{
+  string: (value: string) => string,
+  number: (value: string) => number,
+  boolean: (value: string) => boolean,
+}> = Object.freeze({
+  string: (value: string): string => value.trim(),
+  number: (value: string): number => {
     const number = parseFloat(value);
     if (Number.isNaN(number)) {
       return 0;
     }
     return number;
   },
-  boolean: (value: string) => {
+  boolean: (value: string): boolean => {
     if (value.toLowerCase() === 'true') {
       return true;
     }
@@ -55,7 +59,41 @@ const typeConverters = Object.freeze({
   },
 });
 
-const dataTypeByAttribute = Object.freeze({
+const dataTypeByAttribute: Readonly<{
+    readonly selectors: 'string',
+    readonly offsetX: 'number',
+    readonly offsetY: 'number',
+    readonly target: 'string',
+    readonly frame: 'number',
+    readonly assertedEvents: 'string',
+    readonly value: 'string',
+    readonly key: 'string',
+    readonly operator: 'string',
+    readonly count: 'number',
+    readonly expression: 'string',
+    readonly x: 'number',
+    readonly y: 'number',
+    readonly url: 'string',
+    readonly type: 'string',
+    readonly timeout: 'number',
+    readonly duration: 'number',
+    readonly button: 'string',
+    readonly deviceType: 'string',
+    readonly width: 'number',
+    readonly height: 'number',
+    readonly deviceScaleFactor: 'number',
+    readonly isMobile: 'boolean',
+    readonly hasTouch: 'boolean',
+    readonly isLandscape: 'boolean',
+    readonly download: 'number',
+    readonly upload: 'number',
+    readonly latency: 'number',
+    readonly name: 'string',
+    readonly parameters: 'string',
+    readonly visible: 'boolean',
+    readonly properties: 'string',
+    readonly attributes: 'string',
+}> = Object.freeze({
   selectors: 'string',
   offsetX: 'number',
   offsetY: 'number',
@@ -91,7 +129,48 @@ const dataTypeByAttribute = Object.freeze({
   attributes: 'string',
 } as const);
 
-const defaultValuesByAttribute = deepFreeze({
+const defaultValuesByAttribute: DeepImmutable<{
+  selectors: string[][],
+  offsetX: number,
+  offsetY: number,
+  target: string,
+  frame: number[],
+  assertedEvents: Array<{
+    type: string,
+    url: string,
+    title: string,
+  }>,
+  value: string,
+  key: string,
+  operator: string,
+  count: number,
+  expression: string,
+  x: number,
+  y: number,
+  url: string,
+  timeout: number,
+  duration: number,
+  deviceType: string,
+  button: string,
+  type: string,
+  width: number,
+  height: number,
+  deviceScaleFactor: number,
+  isMobile: boolean,
+  hasTouch: boolean,
+  isLandscape: boolean,
+  download: number,
+  upload: number,
+  latency: number,
+  name: string,
+  parameters: string,
+  properties: string,
+  attributes: Array<{
+    name: string,
+    value: string,
+  }>,
+  visible: boolean,
+}> = deepFreeze({
   selectors: [['.cls']],
   offsetX: 1,
   offsetY: 1,
@@ -998,7 +1077,7 @@ export class StepEditor extends UI.Widget.Widget {
   onStepEdited?: (step: Models.Schema.Step) => void;
   onAttributeRequested?: (send: (attribute?: string) => void) => void;
 
-  constructor(element?: HTMLElement, view = DEFAULT_VIEW) {
+  constructor(element?: HTMLElement, view: View = DEFAULT_VIEW) {
     super(element, {useShadowDom: true});
     this.#state = {type: Models.Schema.StepType.WaitForElement};
     this.#view = view;

package/front_end/panels/recorder/TimelineSection.ts

@@ -56,7 +56,8 @@ export class TimelineSection extends UI.Widget.Widget {
   #isSelected = false;
   #view: typeof DEFAULT_VIEW;
 
-  constructor(element?: HTMLElement, view = DEFAULT_VIEW) {
+  constructor(element?: HTMLElement,
+              view: (input: ViewInput, _output: ViewOutput, target: HTMLElement) => void = DEFAULT_VIEW) {
     super(element, {useShadowDom: true});
     this.#view = view;
   }

package/front_end/panels/recorder/createRecordingView.css

@@ -13,13 +13,13 @@
 }
 
 .wrapper {
-  padding: 24px;
+  padding: var(--sys-size-11);
   flex: 1;
 }
 
 h1 {
-  font-size: 18px;
-  line-height: 24px;
+  font-size: var(--sys-typescale-headline3-size);
+  line-height: var(--sys-typescale-headline3-line-height);
   letter-spacing: 0.02em;
   color: var(--sys-color-on-surface);
   margin: 0;
@@ -28,13 +28,13 @@ h1 {
 
 .row-label {
   font-weight: 500;
-  font-size: 11px;
-  line-height: 16px;
+  font-size: var(--sys-typescale-body5-size);
+  line-height: var(--sys-typescale-body5-line-height);
   letter-spacing: 0.8px;
   text-transform: uppercase;
   color: var(--sys-color-secondary);
-  margin-bottom: 8px;
-  margin-top: 32px;
+  margin-bottom: var(--sys-size-5);
+  margin-top: var(--sys-size-13);
   display: flex;
   align-items: center;
   gap: 3px;
@@ -43,8 +43,8 @@ h1 {
 .footer {
   display: flex;
   justify-content: center;
-  border-top: 1px solid var(--sys-color-divider);
-  padding: 12px;
+  border-top: var(--sys-size-1) solid var(--sys-color-divider);
+  padding: var(--sys-size-6);
   background: var(--sys-color-cdt-base-container);
 }
 
@@ -53,14 +53,14 @@ h1 {
 }
 
 .error {
-  margin: 16px 0 0;
-  padding: 8px;
+  margin: var(--sys-size-8) 0 0;
+  padding: var(--sys-size-5);
   background: var(--sys-color-error-container);
   color: var(--sys-color-error);
 }
 
 .row-label .link:focus-visible {
-  outline: var(--sys-color-state-focus-ring) auto 1px;
+  outline: var(--sys-color-state-focus-ring) auto var(--sys-size-1);
 }
 
 .header-wrapper {
@@ -74,9 +74,9 @@ h1 {
   align-items: center;
   overflow: hidden;
   text-overflow: ellipsis;
-  gap: 4px;
+  gap: var(--sys-size-3);
   line-height: 1.1;
-  padding: 4px;
+  padding: var(--sys-size-3);
 }
 
 .checkbox-container {
@@ -86,10 +86,10 @@ h1 {
 }
 
 input[type="checkbox"]:focus-visible {
-  outline: var(--sys-color-state-focus-ring) auto 1px;
+  outline: var(--sys-color-state-focus-ring) auto var(--sys-size-1);
 }
 
 devtools-icon[name="help"] {
-  width: 16px;
-  height: 16px;
+  width: var(--sys-size-8);
+  height: var(--sys-size-8);
 }

package/front_end/panels/recorder/extensionView.css

@@ -30,9 +30,9 @@ iframe {
 
 header {
   display: flex;
-  padding: 3px 8px;
+  padding: 3px var(--sys-size-5);
   justify-content: space-between;
-  border-bottom: 1px solid var(--sys-color-divider);
+  border-bottom: var(--sys-size-1) solid var(--sys-color-divider);
 }
 
 header > div {
@@ -41,15 +41,15 @@ header > div {
 
 .icon {
   display: block;
-  width: 16px;
-  height: 16px;
+  width: var(--sys-size-8);
+  height: var(--sys-size-8);
   color: var(--sys-color-secondary);
 }
 
 .title {
   display: flex;
   flex-direction: row;
-  gap: 6px;
+  gap: var(--sys-size-4);
   color: var(--sys-color-secondary);
   align-items: center;
   font-weight: 500;

package/front_end/panels/recorder/injected/RecordingClient.ts

@@ -93,7 +93,7 @@ class RecordingClient {
 
   constructor(
       bindings: AccessibilityBindings,
-      options = RecordingClient.defaultSetupOptions,
+      options: Readonly<RecordingClientOptions> = RecordingClient.defaultSetupOptions,
   ) {
     this.#logger = new Logger(options.debug ? 'debug' : 'silent');
     this.#logger.log('creating a RecordingClient');

package/front_end/panels/recorder/models/SchemaUtils.ts

@@ -49,5 +49,5 @@ export function areSelectorsEqual(stepA: Step, stepB: Step): boolean {
 
 export const minTimeout = 1;
 export const maxTimeout = 30000;
-export const parse = PuppeteerReplay.parse;
-export const parseStep = PuppeteerReplay.parseStep;
+export const parse: typeof PuppeteerReplay.parse = PuppeteerReplay.parse;
+export const parseStep: typeof PuppeteerReplay.parseStep = PuppeteerReplay.parseStep;

package/front_end/panels/recorder/models/ScreenshotStorage.ts

@@ -28,7 +28,7 @@ export class ScreenshotStorage {
   #screenshots: Map<string, ScreenshotMetaData>;
   #maxStorageSize: number;
 
-  constructor(maxStorageSize = DEFAULT_MAX_STORAGE_SIZE) {
+  constructor(maxStorageSize: number = DEFAULT_MAX_STORAGE_SIZE) {
     this.#screenshotSettings = Common.Settings.Settings.instance().createSetting(
         'recorder-screenshots',
         [],

package/front_end/panels/recorder/recorderPanel.css

@@ -39,7 +39,7 @@ devtools-create-recording-view {
   display: flex;
   flex-flow: row wrap;
   align-items: center;
-  border-bottom: 1px solid var(--sys-color-divider);
+  border-bottom: var(--sys-size-1) solid var(--sys-color-divider);
   padding: 0 5px;
   gap: 3px;
   flex-shrink: 0;
@@ -47,7 +47,7 @@ devtools-create-recording-view {
 
 .separator {
   background-color: var(--sys-color-divider);
-  width: 1px;
+  width: var(--sys-size-1);
   height: 17px;
   margin: 0;
 }
@@ -119,28 +119,28 @@ devtools-recording-list-view {
 
 .error {
   color: var(--sys-color-error);
-  border: 1px solid var(--sys-color-error);
+  border: var(--sys-size-1) solid var(--sys-color-error);
   background-color: var(--sys-color-error-container);
-  padding: 4px;
+  padding: var(--sys-size-3);
 }
 
 .feedback {
   margin-left: auto;
-  margin-right: 4px;
+  margin-right: var(--sys-size-3);
 }
 
 .feedback .devtools-link {
   letter-spacing: 0.03em;
   text-decoration-line: underline;
   font-size: var(--sys-typescale-body4-size);
-  line-height: 16px;
+  line-height: var(--sys-typescale-body4-line-height);
   color: var(--sys-color-primary);
   outline-offset: 3px;
 }
 
 .feedback .devtools-link:focus-visible,
 .empty-state-description .devtools-link:focus-visible {
-  outline: -webkit-focus-ring-color auto 1px;
+  outline: -webkit-focus-ring-color auto var(--sys-size-1);
 }
 
 .empty-state {

package/front_end/panels/recorder/recordingListView.css

@@ -17,7 +17,7 @@
   }
 
   .wrapper {
-    padding: 24px;
+    padding: var(--sys-size-11);
   }
 
   .header {
@@ -29,7 +29,7 @@
   }
 
   h1 {
-    font-size: 16px;
+    font-size: var(--sys-typescale-body1-size);
     line-height: 19px;
     color: var(--sys-color-on-surface);
     font-weight: normal;
@@ -37,8 +37,8 @@
 
   .icon,
   .icon devtools-icon {
-    width: 20px;
-    height: 20px;
+    width: var(--sys-size-9);
+    height: var(--sys-size-9);
     color: var(--sys-color-primary);
   }
 
@@ -47,7 +47,7 @@
   }
 
   .title {
-    font-size: 13px;
+    font-size: var(--sys-typescale-body3-size);
     color: var(--sys-color-on-surface);
     margin-left: 10px;
     flex: 1;
@@ -60,8 +60,8 @@
     display: flex;
     align-items: center;
     padding-right: 5px;
-    height: 28px;
-    border-bottom: 1px solid var(--sys-color-divider);
+    height: var(--sys-size-12);
+    border-bottom: var(--sys-size-1) solid var(--sys-color-divider);
   }
 
   .row:focus-within,
@@ -81,15 +81,15 @@
   .actions button {
     border: none;
     background-color: transparent;
-    width: 24px;
-    height: 24px;
-    border-radius: 50%;
+    width: var(--sys-size-11);
+    height: var(--sys-size-11);
+    border-radius: var(--sys-shape-corner-full);
   }
 
   .actions .divider {
-    width: 1px;
+    width: var(--sys-size-1);
     height: 17px;
     background-color: var(--sys-color-divider);
-    margin: 0 6px;
+    margin: 0 var(--sys-size-4);
   }
 }