chrome-devtools-frontend 1.0.1683520 → 1.0.1689415

package/front_end/panels/timeline/components/liveMetricsView.css

@@ -25,7 +25,7 @@
 
 .live-metrics,
 .next-steps {
-  padding: 16px;
+  padding: var(--sys-size-8);
   height: 100%;
   overflow-y: auto;
   box-sizing: border-box;
@@ -45,7 +45,7 @@
   flex: 0 0 336px;
   box-sizing: border-box;
   border: none;
-  border-left: 1px solid var(--sys-color-divider);
+  border-left: var(--sys-size-1) solid var(--sys-color-divider);
 }
 
 @container (max-width: 650px) {
@@ -56,13 +56,13 @@
   .next-steps {
     flex-basis: 40%;
     border: none;
-    border-top: 1px solid var(--sys-color-divider);
+    border-top: var(--sys-size-1) solid var(--sys-color-divider);
   }
 }
 
 .metric-cards {
   display: grid;
-  gap: 16px;
+  gap: var(--sys-size-8);
   grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
   width: 100%;
 }
@@ -77,16 +77,16 @@
 
 .settings-card {
   border-radius: var(--sys-shape-corner-small);
-  padding: 14px 16px 16px;
+  padding: var(--sys-size-7) var(--sys-size-8) var(--sys-size-8);
   background-color: var(--sys-color-surface3);
-  margin-bottom: 16px;
+  margin-bottom: var(--sys-size-8);
 }
 
 .record-action-card {
   border-radius: var(--sys-shape-corner-small);
-  padding: 12px 16px 12px 12px;
+  padding: var(--sys-size-6) var(--sys-size-8) var(--sys-size-6) var(--sys-size-6);
   background-color: var(--sys-color-surface3);
-  margin-bottom: 16px;
+  margin-bottom: var(--sys-size-8);
 }
 
 .card-title {
@@ -97,11 +97,11 @@
 }
 
 .settings-card .card-title {
-  margin-bottom: 4px;
+  margin-bottom: var(--sys-size-3);
 }
 
 .device-toolbar-description {
-  margin-bottom: 12px;
+  margin-bottom: var(--sys-size-6);
   display: flex;
 }
 
@@ -116,30 +116,30 @@
 
 .related-info {
   text-wrap: nowrap;
-  margin-top: 8px;
+  margin-top: var(--sys-size-5);
   display: flex;
 }
 
 .related-info-label {
   font-weight: var(--ref-typeface-weight-medium);
-  margin-right: 4px;
+  margin-right: var(--sys-size-3);
 }
 
 .related-info-link {
   background-color: var(--sys-color-cdt-base-container);
-  border-radius: 2px;
-  padding: 0 2px;
+  border-radius: var(--sys-size-2);
+  padding: 0 var(--sys-size-2);
   min-width: 0;
 }
 
 .local-field-link {
   display: inline-block;
   width: fit-content;
-  margin-top: 8px;
+  margin-top: var(--sys-size-5);
 }
 
 .logs-section {
-  margin-top: 24px;
+  margin-top: var(--sys-size-11);
   display: flex;
   flex-direction: column;
   flex: 1 0 300px;
@@ -155,7 +155,7 @@
 }
 
 .interactions-clear {
-  margin-left: 4px;
+  margin-left: var(--sys-size-3);
   vertical-align: sub;
 }
 
@@ -167,7 +167,7 @@
 
 .log-item {
   border: none;
-  border-bottom: 1px solid var(--sys-color-divider);
+  border-bottom: var(--sys-size-1) solid var(--sys-color-divider);
 
   &.highlight {
     animation: highlight-fadeout 2s;
@@ -181,11 +181,11 @@
   summary {
     display: flex;
     align-items: center;
-    padding: 7px 4px;
+    padding: 7px var(--sys-size-3);
 
     &::before {
       content: " ";
-      height: 14px;
+      height: var(--sys-size-7);
       width: var(--details-indicator-width);
       mask-image: var(--image-file-triangle-right);
       background-color: var(--icon-default);
@@ -207,19 +207,19 @@
 .interaction-inp-chip {
   background-color: var(--sys-color-yellow-container);
   color: var(--sys-color-on-yellow-container);
-  padding: 0 2px;
+  padding: 0 var(--sys-size-2);
 }
 
 .interaction-node {
   flex-grow: 1;
-  margin-right: 32px;
+  margin-right: var(--sys-size-13);
   min-width: 0;
 }
 
 .interaction-info {
   width: var(--sys-typescale-body4-line-height);
   height: var(--sys-typescale-body4-line-height);
-  margin-right: 6px;
+  margin-right: var(--sys-size-4);
 }
 
 .interaction-duration {
@@ -235,7 +235,7 @@
 }
 
 .layout-shift-score {
-  margin-right: 16px;
+  margin-right: var(--sys-size-8);
   padding: 7px 0;
   width: 150px;
   box-sizing: border-box;
@@ -247,7 +247,7 @@
 }
 
 .layout-shift-node {
-  border-bottom: 1px solid var(--sys-color-divider);
+  border-bottom: var(--sys-size-1) solid var(--sys-color-divider);
   padding: 7px 0;
 
   &:last-child {
@@ -260,7 +260,7 @@
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
-  gap: 8px;
+  gap: var(--sys-size-5);
 }
 
 .shortcut-label {
@@ -269,20 +269,20 @@
 }
 
 .field-data-option {
-  margin: 8px 0;
+  margin: var(--sys-size-5) 0;
   max-width: 100%;
 }
 
 .field-setup-buttons {
-  margin-top: 14px;
+  margin-top: var(--sys-size-7);
 }
 
 .field-data-message {
-  margin-bottom: 12px;
+  margin-bottom: var(--sys-size-6);
 }
 
 .field-data-warning {
-  margin-top: 4px;
+  margin-top: var(--sys-size-3);
   color: var(--sys-color-error);
   font-size: var(--sys-typescale-body4-size);
   line-height: var(--sys-typescale-body4-line-height);
@@ -295,7 +295,7 @@
     mask-size: var(--sys-typescale-body4-line-height);
     mask-image: var(--image-file-warning);
     background-color: var(--sys-color-error);
-    margin-right: 4px;
+    margin-right: var(--sys-size-3);
     flex-shrink: 0;
   }
 }
@@ -312,7 +312,7 @@ devtools-link {
 .environment-option {
   display: flex;
   align-items: center;
-  margin-top: 8px;
+  margin-top: var(--sys-size-5);
   gap: var(--sys-size-2);
 }
 
@@ -324,7 +324,7 @@ devtools-link {
 
 .environment-recs-list {
   margin: 0;
-  padding-left: 20px;
+  padding-left: var(--sys-size-9);
 }
 
 .environment-rec {
@@ -352,8 +352,8 @@ devtools-link {
 }
 
 .subpart-table {
-  border-top: 1px solid var(--sys-color-divider);
-  padding: 7px 4px;
+  border-top: var(--sys-size-1) solid var(--sys-color-divider);
+  padding: 7px var(--sys-size-3);
   margin-left: var(--subpart-table-margin);
 }
 
@@ -364,7 +364,7 @@ devtools-link {
 
 .subpart-table-header-row {
   font-weight: var(--ref-typeface-weight-medium);
-  margin-bottom: 4px;
+  margin-bottom: var(--sys-size-3);
 }
 
 .log-extra-details-button {
@@ -393,19 +393,19 @@ devtools-link {
     text-align: center;
 
     .section-title {
-      margin-bottom: 4px;
+      margin-bottom: var(--sys-size-3);
     }
   }
 }
 
 .node-description {
-  margin-bottom: 12px;
+  margin-bottom: var(--sys-size-6);
 }
 
 .section-header {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: var(--sys-size-5);
   margin-bottom: 10px;
 }
 

package/front_end/panels/timeline/components/metricCard.css

@@ -6,7 +6,7 @@
 
 .metric-card {
   border-radius: var(--sys-shape-corner-small);
-  padding: 14px 16px;
+  padding: var(--sys-size-7) var(--sys-size-8);
   background-color: var(--sys-color-surface3);
   height: 100%;
   box-sizing: border-box;
@@ -19,23 +19,23 @@
   line-height: var(--sys-typescale-headline5-line-height);
   font-weight: var(--ref-typeface-weight-medium);
   margin: 0;
-  margin-bottom: 6px;
+  margin-bottom: var(--sys-size-4);
 }
 
 .title-help {
   height: var(--sys-typescale-headline5-line-height);
-  margin-left: 4px;
+  margin-left: var(--sys-size-3);
 }
 
 .metric-values-section {
   position: relative;
   display: flex;
-  column-gap: 8px;
-  margin-bottom: 8px;
+  column-gap: var(--sys-size-5);
+  margin-bottom: var(--sys-size-5);
 }
 
 .metric-values-section:focus-visible {
-  outline: 2px solid -webkit-focus-ring-color;
+  outline: var(--sys-size-2) solid -webkit-focus-ring-color;
 }
 
 .metric-source-block {
@@ -43,7 +43,7 @@
 }
 
 .metric-source-value {
-  font-size: 32px;
+  font-size: var(--sys-size-13);
   line-height: 36px;
   font-weight: var(--ref-typeface-weight-regular);
 }
@@ -53,7 +53,7 @@
 }
 
 .warning {
-  margin-top: 4px;
+  margin-top: var(--sys-size-3);
   color: var(--sys-color-error);
   font-size: var(--sys-typescale-body4-size);
   line-height: var(--sys-typescale-body4-line-height);
@@ -66,7 +66,7 @@
     mask-size: var(--sys-typescale-body4-line-height);
     mask-image: var(--image-file-warning);
     background-color: var(--sys-color-error);
-    margin-right: 4px;
+    margin-right: var(--sys-size-3);
     flex-shrink: 0;
   }
 }
@@ -86,17 +86,17 @@
 .divider {
   width: 100%;
   border: 0;
-  border-bottom: 1px solid var(--sys-color-divider);
-  margin: 8px 0;
+  border-bottom: var(--sys-size-1) solid var(--sys-color-divider);
+  margin: var(--sys-size-5) 0;
   box-sizing: border-box;
 }
 
 .compare-text {
-  margin-top: 8px;
+  margin-top: var(--sys-size-5);
 }
 
 .environment-recs-intro {
-  margin-top: 8px;
+  margin-top: var(--sys-size-5);
 }
 
 .environment-recs {
@@ -105,7 +105,7 @@
 
 .environment-recs > summary {
   font-weight: var(--ref-typeface-weight-medium);
-  margin-bottom: 4px;
+  margin-bottom: var(--sys-size-3);
   font-size: var(--sys-typescale-body4-size);
   line-height: var(--sys-typescale-body4-line-height);
   display: flex;
@@ -117,7 +117,7 @@
     mask-size: var(--sys-typescale-body4-line-height);
     mask-image: var(--image-file-triangle-right);
     background-color: var(--icon-default);
-    margin-right: 4px;
+    margin-right: var(--sys-size-3);
     flex-shrink: 0;
   }
 }
@@ -131,19 +131,19 @@ details.environment-recs[open] > summary::before {
 }
 
 .detailed-compare-text {
-  margin-bottom: 8px;
+  margin-bottom: var(--sys-size-5);
 }
 
 .bucket-summaries {
-  margin-top: 8px;
+  margin-top: var(--sys-size-5);
   white-space: nowrap;
 }
 
 .bucket-summaries.histogram {
   display: grid;
-  grid-template-columns: minmax(min-content, auto) minmax(40px, 60px) max-content;
+  grid-template-columns: minmax(min-content, auto) minmax(var(--sys-size-14), 60px) max-content;
   grid-auto-rows: 1fr;
-  column-gap: 8px;
+  column-gap: var(--sys-size-5);
   place-items: center flex-end;
 }
 
@@ -162,7 +162,7 @@ details.environment-recs[open] > summary::before {
 }
 
 .histogram-bar {
-  height: 6px;
+  height: var(--sys-size-4);
 }
 
 .histogram-percent {

package/front_end/panels/timeline/components/networkRequestDetails.css

@@ -6,23 +6,23 @@
 
 @scope to (devtools-widget > *) {
   .network-request-details-title {
-    font-size: 13px;
-    padding: 8px;
+    font-size: var(--sys-typescale-body3-size);
+    padding: var(--sys-size-5);
     display: flex;
     align-items: center;
   }
 
   .network-request-details-title > div {
     box-sizing: border-box;
-    width: 14px;
-    height: 14px;
-    border: 1px solid var(--sys-color-divider);
+    width: var(--sys-size-7);
+    height: var(--sys-size-7);
+    border: var(--sys-size-1) solid var(--sys-color-divider);
     display: inline-block;
-    margin-right: 4px;
+    margin-right: var(--sys-size-3);
   }
 
   .network-request-details-content {
-    border-bottom: 1px solid var(--sys-color-divider);
+    border-bottom: var(--sys-size-1) solid var(--sys-color-divider);
   }
 
   .network-request-details-cols {
@@ -40,7 +40,7 @@
   }
 
   .column-divider {
-    border-left: 1px solid var(--sys-color-divider);
+    border-left: var(--sys-size-1) solid var(--sys-color-divider);
   }
 
   .network-request-details-col.server-timings {
@@ -92,7 +92,7 @@
   .timeline-link {
     color: var(--text-link);
     text-decoration: underline;
-    outline-offset: 2px;
+    outline-offset: var(--sys-size-2);
     padding: 0;
     text-align: left;
 

package/front_end/panels/timeline/components/networkRequestTooltip.css

@@ -31,9 +31,9 @@
     box-sizing: border-box;
     width: 10px;
     height: 10px;
-    border: 1px solid var(--sys-color-divider);
+    border: var(--sys-size-1) solid var(--sys-color-divider);
     display: inline-block;
-    margin-right: 4px;
+    margin-right: var(--sys-size-3);
   }
 
   devtools-icon.priority {
@@ -48,7 +48,7 @@
   }
 
   .divider {
-    border-top: 1px solid var(--sys-color-divider);
+    border-top: var(--sys-size-1) solid var(--sys-color-divider);
     margin: 5px 0;
   }
 
@@ -60,18 +60,18 @@
 
   .indicator {
     display: inline-block;
-    width: 12px;
-    height: 6px;
+    width: var(--sys-size-6);
+    height: var(--sys-size-4);
     margin-right: 5px;
-    border: 1px solid var(--sys-color-on-surface-subtle);
+    border: var(--sys-size-1) solid var(--sys-color-on-surface-subtle);
     box-sizing: border-box;
   }
 
   devtools-icon.indicator {
     vertical-align: middle;
-    height: 12px;
-    width: 12px;
-    margin-right: 4px;
+    height: var(--sys-size-6);
+    width: var(--sys-size-6);
+    margin-right: var(--sys-size-3);
     color: var(--sys-color-yellow);
     border: none;
   }
@@ -81,9 +81,9 @@
     align-self: center;
     display: inline-flex;
     width: 11px;
-    height: 6px;
+    height: var(--sys-size-4);
     margin-right: 5px;
-    border-left: 1px solid var(--sys-color-on-surface-subtle);
+    border-left: var(--sys-size-1) solid var(--sys-color-on-surface-subtle);
     box-sizing: border-box;
   }
 
@@ -91,15 +91,15 @@
     align-self: center;
     display: inline-flex;
     width: 11px;
-    height: 6px;
+    height: var(--sys-size-4);
     margin-right: 5px;
-    border-right: 1px solid var(--sys-color-on-surface-subtle);
+    border-right: var(--sys-size-1) solid var(--sys-color-on-surface-subtle);
     box-sizing: border-box;
   }
 
   .horizontal {
     background-color: var(--sys-color-on-surface-subtle);
-    height: 1px;
+    height: var(--sys-size-1);
     width: 10px;
     align-self: center;
   }

package/front_end/panels/timeline/components/networkTrackWidget.css

@@ -11,8 +11,8 @@
   width: 100%;
   height: 150px;
   background-color: var(--sys-color-cdt-base-container);
-  border-radius: 8px;
-  border: 1px solid var(--sys-color-divider);
+  border-radius: var(--sys-shape-corner-small);
+  border: var(--sys-size-1) solid var(--sys-color-divider);
 }
 
 .container canvas {

package/front_end/panels/timeline/components/originMap.css

@@ -5,9 +5,9 @@
  */
 
 .origin-warning-icon {
-  width: 16px;
-  height: 16px;
-  margin-right: 4px;
+  width: var(--sys-size-8);
+  height: var(--sys-size-8);
+  margin-right: var(--sys-size-3);
   color: var(--icon-warning);
 }
 
@@ -18,7 +18,7 @@
 
 .error-message {
   color: var(--sys-color-error);
-  margin-top: 8px;
+  margin-top: var(--sys-size-5);
   font-weight: var(--ref-typeface-weight-medium);
   white-space: pre-wrap;
 }

package/front_end/panels/timeline/components/relatedInsightChips.css

@@ -7,7 +7,7 @@
 @scope to (devtools-widget > *) {
   :scope {
     display: block;
-    border-bottom: 1px solid var(--sys-color-divider);
+    border-bottom: var(--sys-size-1) solid var(--sys-color-divider);
     flex: none;
   }
 

package/front_end/panels/timeline/components/sidebarAnnotationsTab.css

@@ -50,11 +50,11 @@
     word-break: normal;
     overflow-wrap: anywhere;
     padding: var(--sys-size-8) 0;
-    gap: 6px;
+    gap: var(--sys-size-4);
   }
 
   .annotation-identifier {
-    padding: 4px 8px;
+    padding: var(--sys-size-3) var(--sys-size-5);
     border-radius: 10px;
     font-weight: bold;
 
@@ -67,7 +67,7 @@
   .entries-link {
     display: flex;
     flex-wrap: wrap;
-    row-gap: 2px;
+    row-gap: var(--sys-size-2);
     align-items: center;
   }
 
@@ -86,7 +86,7 @@
     padding: 10px;
     border-radius: var(--sys-shape-corner-extra-small);
     overflow: hidden;
-    border: 1px solid var(--sys-color-divider);
+    border: var(--sys-size-1) solid var(--sys-color-divider);
     background-color: var(--sys-color-base);
   }
 

package/front_end/panels/timeline/components/sidebarInsightsTab.css

@@ -22,14 +22,14 @@
 
     details[open] {
       flex-grow: 1;
-      border-bottom: 1px solid var(--sys-color-divider);
+      border-bottom: var(--sys-size-1) solid var(--sys-color-divider);
     }
 
     summary {
       background-color: var(--sys-color-surface2);
-      border-bottom: 1px solid var(--sys-color-divider);
+      border-bottom: var(--sys-size-1) solid var(--sys-color-divider);
       overflow: hidden;
-      padding: 2px 5px;
+      padding: var(--sys-size-2) 5px;
       text-overflow: ellipsis;
       white-space: nowrap;
       font: var(--sys-typescale-body4-medium);
@@ -42,13 +42,13 @@
 
       &::marker {
         color: var(--sys-color-on-surface-subtle);
-        font-size: 11px;
+        font-size: var(--sys-typescale-body5-size);
         line-height: 1;
       }
 
       /* make sure the first summary has a top border */
       details:first-child & {
-        border-top: 1px solid var(--sys-color-divider);
+        border-top: var(--sys-size-1) solid var(--sys-color-divider);
       }
     }
   }

package/front_end/panels/timeline/components/sidebarSingleInsightSet.css

@@ -6,7 +6,7 @@
 
 :host {
   display: block;
-  padding: 5px 8px;
+  padding: 5px var(--sys-size-5);
 }
 
 .passed-insights-section {

package/front_end/panels/timeline/components/timelineSummary.css

@@ -13,7 +13,7 @@
     padding: 0 var(--sys-size-6) var(--sys-size-4) var(--sys-size-8) ;
     /* The category summary can't be more narrow than this, so we'll force a horizontal scrollbar
     */
-    min-width: 192px;
+    min-width: var(--sys-size-25);
 
     &.is-in-ai-widget {
       padding: 0;
@@ -23,7 +23,7 @@
   .summary-range {
     font-weight: var(--ref-typeface-weight-medium);
     height: 24.5px;
-    line-height: 22px;
+    line-height: var(--sys-size-10);
   }
 
   .category-summary {
@@ -33,8 +33,8 @@
   }
 
   .category-row {
-    min-height: 16px;
-    line-height: 16px;
+    min-height: var(--sys-size-8);
+    line-height: var(--sys-size-8);
   }
 
   .category-swatch {