chrome-devtools-frontend 1.0.1684555 → 1.0.1689415

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

package/front_end/panels/recorder/recordingView.css

@@ -35,14 +35,14 @@
 
   .section {
     display: flex;
-    padding: 0 16px;
-    gap: 8px;
+    padding: 0 var(--sys-size-8);
+    gap: var(--sys-size-5);
     position: relative;
   }
 
   .section::after {
     content: '';
-    border-bottom: 1px solid var(--sys-color-divider);
+    border-bottom: var(--sys-size-1) solid var(--sys-color-divider);
     position: absolute;
     left: 0;
     right: 0;
@@ -55,8 +55,8 @@
   }
 
   .screenshot-wrapper {
-    flex: 0 0 80px;
-    padding-top: 32px;
+    flex: 0 0 var(--sys-size-19);
+    padding-top: var(--sys-size-13);
     /* We want this to be on top of `.step-overlay` */
     z-index: 2;
   }
@@ -73,7 +73,7 @@
     max-width: 100%;
     width: 200px;
     height: auto;
-    border: 1px solid var(--sys-color-divider);
+    border: var(--sys-size-1) solid var(--sys-color-divider);
     border-radius: 1px;
   }
 
@@ -91,55 +91,55 @@
 
   .step {
     position: relative;
-    padding-left: 40px;
-    margin: 16px 0;
+    padding-left: var(--sys-size-14);
+    margin: var(--sys-size-8) 0;
   }
 
   .step .action {
-    font-size: 13px;
-    line-height: 16px;
+    font-size: var(--sys-typescale-body3-size);
+    line-height: var(--sys-typescale-body4-line-height);
     letter-spacing: 0.03em;
   }
 
   .recording {
     color: var(--sys-color-primary);
     font-style: italic;
-    margin-top: 8px;
+    margin-top: var(--sys-size-5);
     margin-bottom: 0;
   }
 
   .add-assertion-button {
-    margin-top: 8px;
+    margin-top: var(--sys-size-5);
   }
 
   .details {
-    max-width: 240px;
+    max-width: var(--sys-size-28);
     display: flex;
     flex-direction: column;
     align-items: flex-end;
   }
 
   .url {
-    font-size: 12px;
-    line-height: 16px;
+    font-size: var(--sys-typescale-body4-size);
+    line-height: var(--sys-typescale-body4-line-height);
     letter-spacing: 0.03em;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
     color: var(--sys-color-secondary);
     max-width: 100%;
-    margin-bottom: 16px;
+    margin-bottom: var(--sys-size-8);
   }
 
   .header {
     flex-shrink: 0;
     align-items: center;
-    border-bottom: 1px solid var(--sys-color-divider);
+    border-bottom: var(--sys-size-1) solid var(--sys-color-divider);
     display: flex;
     flex-wrap: wrap;
     gap: 10px;
     justify-content: space-between;
-    padding: 16px;
+    padding: var(--sys-size-8);
   }
 
   .header-title-wrapper {
@@ -155,8 +155,8 @@
 
   .header-title::before {
     content: '';
-    min-width: 12px;
-    height: 12px;
+    min-width: var(--sys-size-6);
+    height: var(--sys-size-6);
     display: inline-block;
     background: var(--sys-color-primary);
     border-radius: 50%;
@@ -166,11 +166,11 @@
   #title-input {
     font-family: inherit;
     field-sizing: content;
-    font-size: 18px;
+    font-size: var(--sys-typescale-headline3-size);
     line-height: 22px;
     letter-spacing: 0.02em;
-    padding: 1px 4px;
-    border: 1px solid transparent;
+    padding: var(--sys-size-1) var(--sys-size-3);
+    border: var(--sys-size-1) solid transparent;
     border-radius: 1px;
     word-break: break-all;
   }
@@ -189,14 +189,14 @@
   }
 
   .title-input-error-text {
-    margin-top: 4px;
+    margin-top: var(--sys-size-3);
     margin-left: 19px;
     color: var(--sys-color-error);
   }
 
   .title-button-bar {
     flex-shrink: 0;
-    padding-left: 2px;
+    padding-left: var(--sys-size-2);
     display: flex;
   }
 
@@ -205,16 +205,16 @@
   }
 
   .settings-row {
-    padding: 16px 28px;
-    border-bottom: 1px solid var(--sys-color-divider);
+    padding: var(--sys-size-8) var(--sys-size-12);
+    border-bottom: var(--sys-size-1) solid var(--sys-color-divider);
     display: flex;
     flex-flow: row wrap;
     justify-content: space-between;
   }
 
   .settings-title {
-    font-size: 14px;
-    line-height: 24px;
+    font-size: var(--sys-typescale-body2-size);
+    line-height: var(--sys-typescale-body1-line-height);
     letter-spacing: 0.03em;
     color: var(--sys-color-on-surface);
     display: flex;
@@ -225,16 +225,16 @@
   }
 
   .settings-title:focus-visible {
-    outline: 2px solid var(--sys-color-state-focus-ring);
-    outline-offset: 2px;
+    outline: var(--sys-size-2) solid var(--sys-color-state-focus-ring);
+    outline-offset: var(--sys-size-2);
   }
 
   .settings {
-    margin-top: 4px;
+    margin-top: var(--sys-size-3);
     display: flex;
     flex-wrap: wrap;
-    font-size: 12px;
-    line-height: 20px;
+    font-size: var(--sys-typescale-body4-size);
+    line-height: var(--sys-typescale-body2-line-height);
     letter-spacing: 0.03em;
     color: var(--sys-color-on-surface-subtle);
   }
@@ -244,8 +244,8 @@
   }
 
   .settings .separator {
-    width: 1px;
-    height: 20px;
+    width: var(--sys-size-1);
+    height: var(--sys-size-9);
     background-color: var(--sys-color-divider);
     margin: 0 5px;
   }
@@ -254,12 +254,12 @@
     display: flex;
     align-items: center;
     flex-wrap: wrap;
-    gap: 12px;
+    gap: var(--sys-size-6);
   }
 
   .actions .separator {
-    width: 1px;
-    height: 24px;
+    width: var(--sys-size-1);
+    height: var(--sys-size-11);
     background-color: var(--sys-color-divider);
   }
 
@@ -270,8 +270,8 @@
   .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);
     z-index: 1;
   }
@@ -285,8 +285,8 @@
   }
 
   .chevron {
-    width: 14px;
-    height: 14px;
+    width: var(--sys-size-7);
+    height: var(--sys-size-7);
     transform: rotate(-90deg);
     color: var(--sys-color-on-surface);
   }
@@ -298,7 +298,7 @@
   .editable-setting {
     display: flex;
     flex-direction: row;
-    gap: 12px;
+    gap: var(--sys-size-6);
     align-items: center;
   }
 
@@ -310,7 +310,7 @@
   .wrapping-label {
     display: inline-flex;
     align-items: center;
-    gap: 12px;
+    gap: var(--sys-size-6);
   }
 
   .text-editor {
@@ -327,7 +327,7 @@
   }
 
   .section-toolbar > devtools-select-menu {
-    height: 24px;
+    height: var(--sys-size-11);
     min-width: 50px;
   }
 
@@ -353,7 +353,7 @@
   }
 
   [slot='sidebar'] .section-toolbar {
-    border-bottom: 1px solid var(--sys-color-divider);
+    border-bottom: var(--sys-size-1) solid var(--sys-color-divider);
   }
 
   .recorder-extension-view {

package/front_end/panels/recorder/stepEditor.css

@@ -85,8 +85,8 @@
 }
 
 .error {
-  margin: 3px 0 6px;
-  padding: 8px 12px;
+  margin: 3px 0 var(--sys-size-4);
+  padding: var(--sys-size-5) var(--sys-size-6);
   background: var(--sys-color-error-container);
   color: var(--sys-color-error);
 }

package/front_end/panels/recorder/stepView.css

@@ -52,17 +52,17 @@
 .circle-icon {
   fill: var(--sys-color-primary);
   stroke: var(--sys-color-cdt-base-container);
-  stroke-width: 4px;
+  stroke-width: var(--sys-size-3);
   r: 5px;
-  cx: 8px;
-  cy: 8px;
+  cx: var(--sys-size-5);
+  cy: var(--sys-size-5);
 }
 
 .is-start-of-group:not(:first-of-type) .circle-icon {
   r: 7px;
   fill: var(--sys-color-cdt-base-container);
   stroke: var(--sys-color-primary);
-  stroke-width: 2px;
+  stroke-width: var(--sys-size-2);
 }
 
 .step.is-success .circle-icon {
@@ -75,12 +75,12 @@
   animation: rotate 1s linear infinite;
   fill: var(--sys-color-cdt-base-container);
   stroke: var(--sys-color-primary);
-  stroke-width: 2px;
+  stroke-width: var(--sys-size-2);
 }
 
 .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);
   position: relative;
@@ -88,11 +88,11 @@
 
 @keyframes rotate {
   0% {
-    transform: translate(8px, 8px) rotate(0) translate(-8px, -8px);
+    transform: translate(var(--sys-size-5), var(--sys-size-5)) rotate(0) translate(calc(-1 * var(--sys-size-5)), calc(-1 * var(--sys-size-5)));
   }
 
   100% {
-    transform: translate(8px, 8px) rotate(360deg) translate(-8px, -8px);
+    transform: translate(var(--sys-size-5), var(--sys-size-5)) rotate(360deg) translate(calc(-1 * var(--sys-size-5)), calc(-1 * var(--sys-size-5)));
   }
 }
 
@@ -103,7 +103,7 @@
 
 .step.is-error .error-icon {
   display: block;
-  transform: translate(4px, 4px);
+  transform: translate(var(--sys-size-3), var(--sys-size-3));
 }
 
 :host-context(.was-successful) .circle-icon {
@@ -139,12 +139,12 @@
 }
 
 .chevron {
-  width: 14px;
-  height: 14px;
+  width: var(--sys-size-7);
+  height: var(--sys-size-7);
   transition: 200ms;
   position: absolute;
-  top: 14px;
-  left: 24px;
+  top: var(--sys-size-7);
+  left: var(--sys-size-11);
   transform: rotate(-90deg);
   color: var(--sys-color-on-surface);
 }
@@ -159,7 +159,7 @@
 
 .details {
   display: none;
-  margin-top: 8px;
+  margin-top: var(--sys-size-5);
   position: relative;
 }
 
@@ -172,14 +172,14 @@
 }
 
 devtools-recorder-step-editor {
-  border: 1px solid var(--sys-color-neutral-outline);
+  border: var(--sys-size-1) solid var(--sys-color-neutral-outline);
   padding: 3px 6px 6px;
-  margin-left: -6px;
+  margin-left: calc(-1 * var(--sys-size-4));
   border-radius: 3px;
 }
 
 devtools-recorder-step-editor:hover {
-  border: 1px solid var(--sys-color-neutral-outline);
+  border: var(--sys-size-1) solid var(--sys-color-neutral-outline);
 }
 
 devtools-recorder-step-editor.is-selected {
@@ -188,7 +188,7 @@ devtools-recorder-step-editor.is-selected {
     var(--sys-color-tonal-container),
     var(--sys-color-cdt-base-container) 50%
   );
-  border: 1px solid var(--sys-color-tonal-outline);
+  border: var(--sys-size-1) solid var(--sys-color-tonal-outline);
 }
 
 .summary {
@@ -215,7 +215,7 @@ devtools-recorder-step-editor.is-selected {
 .step-actions {
   border: none;
   border-radius: 0;
-  height: 24px;
+  height: var(--sys-size-11);
 
   --override-select-menu-show-button-border-radius: 0;
   --override-select-menu-show-button-outline: none;

package/front_end/panels/recorder/timelineSection.css

@@ -13,8 +13,8 @@
 
 .timeline-section {
   position: relative;
-  padding: 8px 0 8px 40px;
-  margin-left: 8px;
+  padding: var(--sys-size-5) 0 var(--sys-size-5) var(--sys-size-14);
+  margin-left: var(--sys-size-5);
 
   --override-color-recording-successful-text: #36a854;
   --override-color-recording-successful-background: #e6f4ea;
@@ -25,7 +25,7 @@
   width: 100vw;
   height: 100%;
   /* Offset of 32px for spacing and 80px for screenshot */
-  left: calc(-32px - 80px);
+  left: calc(-1 * var(--sys-size-13) - var(--sys-size-19));
   top: 0;
   z-index: -1;
   pointer-events: none;
@@ -34,7 +34,7 @@
 @container (max-width: 400px) {
   .overlay {
     /* Offset of 32px for spacing */
-    left: -32px;
+    left: calc(-1 * var(--sys-size-13));
   }
 }
 
@@ -48,28 +48,28 @@
 
 :host-context(.is-stopped) .overlay {
   background: var(--sys-color-state-ripple-primary);
-  outline: 1px solid var(--sys-color-state-focus-ring);
+  outline: var(--sys-size-1) solid var(--sys-color-state-focus-ring);
   z-index: 4;
 }
 
 .is-start-of-group:not(:first-of-type) {
-  padding-top: 16px;
+  padding-top: var(--sys-size-8);
 }
 
 .is-end-of-group {
-  padding-bottom: 16px;
+  padding-bottom: var(--sys-size-8);
 }
 
 .icon {
   position: absolute;
-  left: 4px;
+  left: var(--sys-size-3);
   transform: translateX(-50%);
   z-index: 2;
 }
 
 .bar {
   position: absolute;
-  left: 4px;
+  left: var(--sys-size-3);
   display: block;
   transform: translateX(-50%);
   top: 18px;