chrome-devtools-frontend 1.0.1684555 → 1.0.1689415

package/front_end/panels/network/requestHTMLView.css

@@ -10,6 +10,6 @@
     background: var(--ref-palette-neutral100);
     color-scheme: light;
     flex-grow: 1;
-    margin: 20px;
+    margin: var(--sys-size-9);
   }
 }

package/front_end/panels/network/requestHeadersTree.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;
@@ -26,7 +26,7 @@
 .tree-outline li {
   display: block;
   padding-left: 5px;
-  line-height: 20px;
+  line-height: var(--sys-size-9);
 }
 
 .tree-outline li:not(.parent) {
@@ -38,7 +38,7 @@
 }
 
 .tree-outline .caution {
-  margin-left: 4px;
+  margin-left: var(--sys-size-3);
   display: inline-block;
   font-weight: bold;
 }
@@ -103,8 +103,8 @@
   background-color: var(--sys-color-error);
   color: var(--sys-color-on-error);
   border-radius: 100vh;
-  padding-left: 6px;
-  padding-right: 6px;
+  padding-left: var(--sys-size-4);
+  padding-right: var(--sys-size-4);
 }
 
 .tree-outline .header-value {
@@ -112,27 +112,27 @@
   margin-right: 1em;
   white-space: pre-wrap;
   word-break: break-all;
-  margin-top: 1px;
+  margin-top: var(--sys-size-1);
 }
 
 .tree-outline .call-to-action {
   background-color: var(--sys-color-neutral-container);
-  padding: 8px;
+  padding: var(--sys-size-5);
   border-radius: 5px;
-  margin: 4px;
+  margin: var(--sys-size-3);
 }
 
 .tree-outline .selected .call-to-action {
   background-color: transparent;
-  padding: 8px;
+  padding: var(--sys-size-5);
   border-radius: 5px;
-  margin: 4px;
+  margin: var(--sys-size-3);
 }
 
 .tree-outline .call-to-action-body {
-  padding: 6px 0;
+  padding: var(--sys-size-4) 0;
   margin-left: 9.5px;
-  border-left: 2px solid var(--sys-color-yellow-bright);
+  border-left: var(--sys-size-2) solid var(--sys-color-yellow-bright);
   padding-left: 18px;
 }
 
@@ -156,18 +156,18 @@
   border: none;
   border-radius: 3px;
   display: inline-block;
-  font-size: 12px;
+  font-size: var(--sys-typescale-body4-size);
   font-family: sans-serif;
   cursor: pointer;
-  margin: 0 4px;
-  padding: 2px 4px;
+  margin: 0 var(--sys-size-3);
+  padding: var(--sys-size-2) var(--sys-size-3);
 }
 
 .request-headers-caution {
   display: flex;
-  gap: 6px;
-  margin-right: 20px;
-  padding: 8px;
+  gap: var(--sys-size-4);
+  margin-right: var(--sys-size-9);
+  padding: var(--sys-size-5);
   background-color: var(--sys-color-neutral-container);
   border-radius: 5px;
 }

package/front_end/panels/network/requestInitiatorView.css

@@ -6,5 +6,5 @@
 
 .request-initiator-view {
   display: flex;
-  margin: 6px;
+  margin: var(--sys-size-4);
 }

package/front_end/panels/network/requestInitiatorViewTree.css

@@ -8,18 +8,18 @@
   user-select: text;
 
   & .fill {
-    right: -6px; /* Same as the margin in .request-initiator-view but negative. */
+    right: calc(-1 * var(--sys-size-4)); /* Same as the margin in .request-initiator-view but negative. */
   }
 }
 
 .request-initiator-view-section-title {
   font-weight: bold;
-  padding: 4px;
+  padding: var(--sys-size-3);
 }
 
 .console-origin-label {
   color: var(--sys-color-token-subtle);
-  padding: 2px 4px 2px 20px;
+  padding: var(--sys-size-2) var(--sys-size-3) var(--sys-size-2) var(--sys-size-9);
 }
 
 .request-initiator-view-section-title:focus-visible {

package/front_end/panels/network/requestPayloadTree.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: var(--sys-size-13);
@@ -25,7 +25,7 @@
 
 .tree-outline li {
   padding-left: 5px;
-  line-height: 20px;
+  line-height: var(--sys-size-9);
 }
 
 .tree-outline li:not(.parent) {
@@ -62,7 +62,7 @@
 }
 
 .tree-outline li.expanded .payload-toggle:focus-visible {
-  border: 2px solid var(--sys-color-state-focus-ring);
+  border: var(--sys-size-2) solid var(--sys-color-state-focus-ring);
   border-radius: 5px;
 }
 
@@ -92,7 +92,7 @@
 }
 
 .request-payload-show-more-button {
-  margin: 0 4px;
+  margin: 0 var(--sys-size-3);
 }
 
 @media (forced-colors: active) {

package/front_end/panels/network/requestPayloadView.css

@@ -16,7 +16,7 @@
   min-height: 200px;
   display: flex;
   flex-direction: column;
-  border-top: 1px solid var(--sys-color-divider);
+  border-top: var(--sys-size-1) solid var(--sys-color-divider);
 }
 
 .request-payload-tree {

package/front_end/panels/network/resourceChunkView.css

@@ -26,19 +26,19 @@
   .data-grid .data-container table.data {
     tr.data-grid-data-grid-node {
       td.resource-chunk-view-td {
-        border-bottom: 1px solid var(--sys-color-divider);
+        border-bottom: var(--sys-size-1) solid var(--sys-color-divider);
       }
 
       &.resource-chunk-view-row-send td:first-child::before {
         content: "\2B06";
         color: var(--sys-color-tertiary);
-        padding-right: 4px;
+        padding-right: var(--sys-size-3);
       }
 
       &.resource-chunk-view-row-receive td:first-child::before {
         content: "\2B07";
         color: var(--sys-color-error);
-        padding-right: 4px;
+        padding-right: var(--sys-size-3);
       }
 
       &.resource-chunk-view-row-send {

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