chrome-devtools-frontend 1.0.1683520 → 1.0.1689415

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;

package/front_end/panels/screencast/screencastView.css

@@ -16,19 +16,19 @@
     display: flex;
     align-items: center;
     position: relative;
-    padding-left: 1px;
-    border-bottom: 1px solid var(--sys-color-divider);
+    padding-left: var(--sys-size-1);
+    border-bottom: var(--sys-size-1) solid var(--sys-color-divider);
     background-origin: padding-box;
     background-clip: padding-box;
   }
 
   .screencast-navigation devtools-button {
-    padding: 2px;
+    padding: var(--sys-size-2);
   }
 
   .screencast-navigation input {
     flex: 1;
-    margin: 2px;
+    margin: var(--sys-size-2);
     max-height: 19px;
   }
 
@@ -44,10 +44,10 @@
 
   .screencast-viewport {
     display: flex;
-    border: 1px solid var(--sys-color-divider);
-    border-radius: 20px;
+    border: var(--sys-size-1) solid var(--sys-color-divider);
+    border-radius: var(--sys-size-9);
     flex: none;
-    padding: 20px;
+    padding: var(--sys-size-9);
     margin: auto;
     background-color: var(--sys-color-surface-variant);
   }
@@ -55,7 +55,7 @@
   .screencast-canvas-container {
     flex: auto;
     display: flex;
-    border: 1px solid var(--sys-color-divider);
+    border: var(--sys-size-1) solid var(--sys-color-divider);
     position: relative;
   }
 
@@ -73,8 +73,8 @@
     position: absolute;
     z-index: 10;
     background-color: var(--sys-color-yellow-container);
-    border: 1px solid var(--sys-color-outline);
-    padding: 2px 4px;
+    border: var(--sys-size-1) solid var(--sys-color-outline);
+    padding: var(--sys-size-2) var(--sys-size-3);
     white-space: nowrap;
   }
 
@@ -82,7 +82,7 @@
     content: "";
     position: absolute;
     bottom: 100%;
-    left: 14px;
+    left: var(--sys-size-7);
     border: 7px solid transparent;
     border-bottom-color: var(--sys-color-yellow-container);
   }
@@ -91,7 +91,7 @@
     content: "";
     position: absolute;
     top: 100%;
-    left: 14px;
+    left: var(--sys-size-7);
     border: 7px solid transparent;
     border-top-color: var(--sys-color-yellow-container);
   }

package/front_end/panels/search/searchResultsPane.css

@@ -19,14 +19,14 @@
 }
 
 .tree-outline li {
-  height: 16px;
+  height: var(--sys-size-8);
 }
 
 li.search-result {
   cursor: pointer;
-  font-size: 12px;
-  margin-top: 8px;
-  padding: 2px 0 2px 4px;
+  font-size: var(--sys-typescale-body4-size);
+  margin-top: var(--sys-size-5);
+  padding: var(--sys-size-2) 0 var(--sys-size-2) var(--sys-size-3);
   overflow-wrap: normal;
   white-space: pre;
 }
@@ -50,7 +50,7 @@ li.search-result .search-result-file-name {
 
 li.search-result .search-result-matches-count {
   color: var(--sys-color-token-subtle);
-  margin: 0 8px;
+  margin: 0 var(--sys-size-5);
 }
 
 li.search-result.expanded .search-result-matches-count {
@@ -60,7 +60,7 @@ li.search-result.expanded .search-result-matches-count {
 li.show-more-matches {
   color: var(--sys-color-on-surface);
   cursor: pointer;
-  margin: 8px 0 0 -4px;
+  margin: var(--sys-size-5) 0 0 calc(-1 * var(--sys-size-3));
 }
 
 li.show-more-matches:hover {
@@ -68,7 +68,7 @@ li.show-more-matches:hover {
 }
 
 li.search-match {
-  margin: 2px 0;
+  margin: var(--sys-size-2) 0;
   overflow-wrap: normal;
   white-space: pre;
 }
@@ -90,7 +90,7 @@ li.search-match .search-match-line-number {
   text-align: right;
   vertical-align: top;
   word-break: normal;
-  padding: 2px 4px 2px 6px;
+  padding: var(--sys-size-2) var(--sys-size-3) var(--sys-size-2) var(--sys-size-4);
   margin-right: 5px;
 }
 
@@ -105,7 +105,7 @@ li.search-match .search-match-content {
 }
 
 ol.children.expanded {
-  padding-bottom: 4px;
+  padding-bottom: var(--sys-size-3);
 }
 
 li.search-match .link-style.search-match-link {
@@ -121,5 +121,5 @@ li.search-match .link-style.search-match-link {
 
 .search-result-dash {
   color: var(--sys-color-surface-variant);
-  margin: 0 4px;
+  margin: 0 var(--sys-size-3);
 }

package/front_end/panels/search/searchView.css

@@ -11,7 +11,7 @@
   min-width: 150px;
 
   .search-container {
-    border-bottom: 1px solid var(--sys-color-divider);
+    border-bottom: var(--sys-size-1) solid var(--sys-color-divider);
     display: flex;
     align-items: center;
     flex-grow: 1;
@@ -19,19 +19,19 @@
 
   .toolbar-item-search {
     flex-grow: 1;
-    box-shadow: inset 0 0 0 2px transparent;
+    box-shadow: inset 0 0 0 var(--sys-size-2) transparent;
     box-sizing: border-box;
     height: var(--sys-size-9);
     margin-left: var(--sys-size-3);
     padding: 0 var(--sys-size-2) 0 var(--sys-size-5);
-    border-radius: 100px;
+    border-radius: var(--sys-shape-corner-full);
     position: relative;
     display: flex;
     align-items: center;
     background-color: var(--sys-color-cdt-base);
 
     &:has(input:focus) {
-      box-shadow: inset 0 0 0 2px var(--sys-color-state-focus-ring);
+      box-shadow: inset 0 0 0 var(--sys-size-2) var(--sys-color-state-focus-ring);
     }
 
     &:has(input:hover)::before {
@@ -40,7 +40,7 @@
       height: 100%;
       width: 100%;
       position: absolute;
-      border-radius: 100px;
+      border-radius: var(--sys-shape-corner-full);
       left: 0;
       background-color: var(--sys-color-state-hover-on-subtle);
     }
@@ -81,24 +81,24 @@
 
 .search-toolbar {
   background-color: var(--sys-color-cdt-base-container);
-  border-bottom: 1px solid var(--sys-color-divider);
+  border-bottom: var(--sys-size-1) solid var(--sys-color-divider);
 }
 
 .search-toolbar-summary {
   background-color: var(--sys-color-cdt-base-container);
-  border-top: 1px solid var(--sys-color-divider);
+  border-top: var(--sys-size-1) solid var(--sys-color-divider);
   padding-left: 5px;
   flex: 0 0 19px;
   display: flex;
   padding-right: 5px;
 }
 
-.search-results:has(.empty-state) + .search-toolbar-summary {
+.search-results:has(.empty-widget-container) + .search-toolbar-summary {
   display: none;
 }
 
 .search-toolbar-summary .search-message {
-  padding-top: 2px;
+  padding-top: var(--sys-size-2);
   padding-left: 1ex;
   text-overflow: ellipsis;
   white-space: nowrap;