chrome-devtools-frontend 1.0.1683520 → 1.0.1689415

package/front_end/panels/console/consoleView.css

@@ -59,7 +59,7 @@
 
 .console-toolbar-container > devtools-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);
 }
 
 .console-view-fix-select-all {
@@ -72,7 +72,7 @@
   grid-template-columns: 50% 50%;
   flex: none;
   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);
 }
 
 #console-messages {
@@ -88,21 +88,21 @@
 #console-prompt {
   clear: right;
   position: relative;
-  margin: 0 22px 0 20px;
+  margin: 0 var(--sys-size-10) 0 var(--sys-size-9);
 }
 
 .console-prompt-editor-container {
   min-height: 21px;
-  padding-left: 2px;
-  padding-top: 1px;
+  padding-left: var(--sys-size-2);
+  padding-top: var(--sys-size-1);
 }
 
 .console-message,
 .console-user-command {
   clear: right;
   position: relative;
-  padding: 1px 22px 1px 0;
-  margin-left: 24px;
+  padding: var(--sys-size-1) var(--sys-size-10) var(--sys-size-1) 0;
+  margin-left: var(--sys-size-11);
   min-height: 18px;
   flex: auto;
   display: flex;
@@ -124,7 +124,7 @@
 .command-result-icon {
   position: absolute;
   left: -17px;
-  top: 2px;
+  top: var(--sys-size-2);
   user-select: none;
 }
 
@@ -134,7 +134,7 @@
 }
 
 .repeated-message {
-  margin-left: 4px;
+  margin-left: var(--sys-size-3);
 }
 
 .repeated-message .message-level-icon {
@@ -145,7 +145,7 @@
   display: flex;
   flex-direction: row;
   align-items: flex-start;
-  margin-top: -1px;
+  margin-top: calc(-1 * var(--sys-size-1));
 }
 
 .console-error-level .repeated-message,
@@ -158,11 +158,11 @@
 .console-info {
   color: var(--sys-color-token-subtle);
   font-style: italic;
-  padding-bottom: 2px;
+  padding-bottom: var(--sys-size-2);
 }
 
 .console-group .console-group > .console-group-messages {
-  margin-left: 16px;
+  margin-left: var(--sys-size-8);
 }
 
 .console-group-title.console-from-api {
@@ -170,16 +170,16 @@
 }
 
 .console-group-title .console-message {
-  margin-left: 12px;
+  margin-left: var(--sys-size-6);
 }
 
 .expand-group-icon {
   user-select: none;
   flex: none;
   position: relative;
-  left: 8px;
+  left: var(--sys-size-5);
   top: 3px;
-  margin-right: 2px;
+  margin-right: var(--sys-size-2);
 }
 
 .console-group-title .message-level-icon {
@@ -189,7 +189,7 @@
 .console-message-repeat-count .expand-group-icon {
   position: static;
   color: var(--sys-color-cdt-base-container);
-  margin-left: -1px;
+  margin-left: calc(-1 * var(--sys-size-1));
 }
 
 .console-group {
@@ -199,7 +199,7 @@
 .console-message-wrapper {
   display: flex;
   flex-direction: column;
-  margin: 4px;
+  margin: var(--sys-size-3);
   border-radius: 5px;
 
   /* Console ANSI color */
@@ -263,8 +263,8 @@
     content: "";
     display: block;
     position: absolute;
-    top: -2px;
-    border-top: 1px solid var(--sys-color-divider);
+    top: calc(-1 * var(--sys-size-2));
+    border-top: var(--sys-size-1) solid var(--sys-color-divider);
   }
 
   &:first-of-type .console-message::before,
@@ -282,12 +282,12 @@
 }
 
 .console-message-wrapper.console-adjacent-user-command-result:not(.console-error-level, .console-warning-level):focus {
-  border-top-width: 1px;
+  border-top-width: var(--sys-size-1);
 }
 
 .console-message-wrapper.console-adjacent-user-command-result:not(.console-error-level, .console-warning-level):focus .console-message {
-  padding-top: 2px;
-  min-height: 16px;
+  padding-top: var(--sys-size-2);
+  min-height: var(--sys-size-8);
 }
 
 .console-message-wrapper.console-adjacent-user-command-result:not(.console-error-level, .console-warning-level):focus .command-result-icon {
@@ -295,11 +295,11 @@
 }
 
 .console-message-wrapper .nesting-level-marker {
-  width: 14px;
+  width: var(--sys-size-7);
   flex: 0 0 auto;
   position: relative;
-  margin-bottom: -1px;
-  margin-top: -1px;
+  margin-bottom: calc(-1 * var(--sys-size-1));
+  margin-top: calc(-1 * var(--sys-size-1));
   background-color: var(--sys-color-cdt-base-container);
 }
 
@@ -307,7 +307,7 @@
   position: absolute;
   left: -30px;
   top: 0;
-  width: 6px;
+  width: var(--sys-size-4);
   height: 100%;
   box-sizing: border-box;
   background-color: var(--sys-color-surface-yellow);
@@ -381,8 +381,8 @@
 }
 
 #console-messages .resource-links {
-  margin-top: -1px;
-  margin-bottom: -2px;
+  margin-top: calc(-1 * var(--sys-size-1));
+  margin-bottom: calc(-1 * var(--sys-size-2));
 }
 
 .console-object-preview,
@@ -490,7 +490,7 @@
   float: right;
   text-align: right;
   max-width: 100%;
-  margin-left: 4px;
+  margin-left: var(--sys-size-3);
 }
 
 .console-message-nowrap-below,
@@ -507,7 +507,7 @@
   text-align: center;
   border-radius: 3px;
   line-height: 13px;
-  margin: 0 6px;
+  margin: 0 var(--sys-size-4);
   font-size: 9px;
 }
 
@@ -521,7 +521,7 @@
 }
 
 .console-message-expand-icon {
-  margin-bottom: -4px;
+  margin-bottom: calc(-1 * var(--sys-size-3));
 }
 
 .console-searchable-view {
@@ -541,11 +541,11 @@
 }
 
 .devtools-console-insight {
-  margin: 9px 22px 11px 24px;
+  margin: 9px var(--sys-size-10) 11px var(--sys-size-11);
 }
 
 .hover-button {
-  --width: 24px;
+  --width: var(--sys-size-11);
 
   align-items: center;
   border-radius: 50%;
@@ -566,13 +566,13 @@
   overflow: hidden;
   padding: var(--sys-size-3) var(--sys-size-4);
   position: absolute;
-  right: 6px;
+  right: var(--sys-size-4);
   display: none;
   width: var(--width);
   z-index: 1;
 
   .theme-with-dark-background & {
-    border: 1px solid var(--sys-color-neutral-outline);
+    border: var(--sys-size-1) solid var(--sys-color-neutral-outline);
     background-color: var(--sys-color-primary);
     color: var(--sys-color-on-primary);
   }
@@ -595,7 +595,7 @@
 
 .hover-button:focus,
 .hover-button:hover {
-  border-radius: 4px;
+  border-radius: var(--sys-shape-corner-extra-small);
   max-width: 200px;
   transition:
     max-width var(--sys-motion-duration-short4) var(--sys-motion-easing-emphasized),
@@ -605,8 +605,8 @@
 }
 
 .hover-button:focus-visible {
-  outline: 2px solid var(--sys-color-primary);
-  outline-offset: 2px;
+  outline: var(--sys-size-2) solid var(--sys-color-primary);
+  outline-offset: var(--sys-size-2);
 }
 
 .button-label {
@@ -616,7 +616,7 @@
 
   & div {
     display: inline-block;
-    vertical-align: -1px;
+    vertical-align: calc(-1 * var(--sys-size-1));
 
     &::after {
       content: attr(data-text);

package/front_end/panels/coverage/coverageListView.css

@@ -30,8 +30,8 @@
 
   .data-grid td .bar {
     display: inline-block;
-    height: 8px;
-    border: 1px solid transparent;
+    height: var(--sys-size-5);
+    border: var(--sys-size-1) solid transparent;
   }
 
   .data-grid td .bar-unused-size {

package/front_end/panels/css_overview/cssOverviewCompletedView.css

@@ -8,8 +8,8 @@
   .overview-completed-view {
     overflow: auto;
 
-    --overview-default-padding: 28px;
-    --overview-icon-padding: 32px;
+    --overview-default-padding: var(--sys-size-12);
+    --overview-icon-padding: var(--sys-size-13);
   }
 
   .overview-completed-view .summary ul,
@@ -24,13 +24,13 @@
   .overview-completed-view .summary ul {
     display: grid;
     grid-template-columns: repeat(auto-fill, 140px);
-    gap: 16px;
+    gap: var(--sys-size-8);
   }
 
   .overview-completed-view .colors ul li {
     display: inline-block;
-    margin: 0 0 16px;
-    padding: 0 8px 0 0;
+    margin: 0 0 var(--sys-size-8);
+    padding: 0 var(--sys-size-5) 0 0;
   }
 
   .overview-completed-view .summary ul li {
@@ -40,8 +40,8 @@
   }
 
   .overview-completed-view li .label {
-    font-size: 12px;
-    padding-bottom: 2px;
+    font-size: var(--sys-typescale-body4-size);
+    padding-bottom: var(--sys-size-2);
   }
 
   .overview-completed-view li .value {
@@ -85,17 +85,17 @@
     width: 65px;
     height: 25px;
     border-radius: 3px;
-    margin-right: 16px;
+    margin-right: var(--sys-size-8);
 
     &: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);
     }
   }
 
   .block-title {
-    padding-top: 4px;
-    font-size: 12px;
+    padding-top: var(--sys-size-3);
+    font-size: var(--sys-typescale-body4-size);
     color: var(--sys-color-on-surface);
     letter-spacing: 0;
     text-transform: uppercase;
@@ -113,7 +113,7 @@
 
   .results-section {
     flex-shrink: 0;
-    border-bottom: 1px solid var(--sys-color-divider);
+    border-bottom: var(--sys-size-1) solid var(--sys-color-divider);
     padding: var(--overview-default-padding) 0 var(--overview-default-padding) 0;
   }
 
@@ -126,7 +126,7 @@
     font-size: 15px;
     font-weight: normal;
     padding: 0;
-    margin: 0 0 20px;
+    margin: 0 0 var(--sys-size-9);
     padding-left: calc(var(--overview-default-padding) + var(--overview-icon-padding));
     position: relative;
     height: 26px;
@@ -179,8 +179,8 @@
   }
 
   .results-section.colors h2 {
-    margin-top: 20px;
-    font-size: 13px;
+    margin-top: var(--sys-size-9);
+    font-size: var(--sys-typescale-body3-size);
     font-weight: normal;
   }
 
@@ -198,8 +198,8 @@
   .overview-completed-view .unused-declarations ul li {
     display: grid;
     grid-template-columns: 2fr 3fr;
-    gap: 12px;
-    margin-bottom: 4px;
+    gap: var(--sys-size-6);
+    margin-bottom: var(--sys-size-3);
     align-items: center;
   }
 
@@ -208,7 +208,7 @@
   .overview-completed-view .unused-declarations button .details {
     min-width: 100px;
     text-align: right;
-    margin-right: 8px;
+    margin-right: var(--sys-size-5);
     color: var(--sys-color-primary);
     pointer-events: none;
   }
@@ -223,10 +223,10 @@
   .overview-completed-view .font-info button .bar,
   .overview-completed-view .media-queries button .bar,
   .overview-completed-view .unused-declarations button .bar {
-    height: 8px;
+    height: var(--sys-size-5);
     background: var(--sys-color-primary-bright);
-    border-radius: 2px;
-    min-width: 2px;
+    border-radius: var(--sys-size-2);
+    min-width: var(--sys-size-2);
   }
 
   .overview-completed-view .font-info button,
@@ -238,17 +238,17 @@
     margin: 0;
     display: flex;
     align-items: center;
-    border-radius: 2px;
+    border-radius: var(--sys-size-2);
     cursor: pointer;
-    height: 28px;
+    height: var(--sys-size-12);
     background: none;
 
     &:focus-visible {
-      outline: 2px solid var(--sys-color-state-focus-ring);
+      outline: var(--sys-size-2) solid var(--sys-color-state-focus-ring);
     }
 
     &:hover {
-      border-radius: 12px;
+      border-radius: var(--sys-shape-corner-medium-small);
       background: var(--sys-color-state-hover-on-subtle);
     }
 
@@ -267,7 +267,7 @@
   .overview-completed-view .font-info .font-metric {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
-    gap: 12px;
+    gap: var(--sys-size-6);
   }
 
   .overview-completed-view .font-info ul {
@@ -279,13 +279,13 @@
   }
 
   .overview-completed-view .font-info h2 {
-    font-size: 14px;
+    font-size: var(--sys-typescale-body2-size);
     font-weight: bold;
     margin: 0 0 1em;
   }
 
   .overview-completed-view .font-info h3 {
-    font-size: 13px;
+    font-size: var(--sys-typescale-body3-size);
     font-weight: normal;
     font-style: italic;
     margin: 0 0 0.5em;
@@ -310,7 +310,7 @@
   .contrast-warning {
     display: flex;
     align-items: center;
-    margin-top: 2px;
+    margin-top: var(--sys-size-2);
   }
 
   .contrast-warning .threshold-label {
@@ -319,7 +319,7 @@
   }
 
   .contrast-warning devtools-icon {
-    margin-left: 2px;
+    margin-left: var(--sys-size-2);
   }
 
   .contrast-preview {
@@ -338,7 +338,7 @@
 
   ::part(node-id-column) {
     align-items: center;
-    height: 20px;
+    height: var(--sys-size-9);
 
     --show-element-display: none;
   }
@@ -350,8 +350,8 @@
 
   ::part(show-element) {
     display: var(--show-element-display);
-    height: 16px;
-    width: 16px;
+    height: var(--sys-size-8);
+    width: var(--sys-size-8);
   }
 
   .results-section.colors {

package/front_end/panels/css_overview/cssOverviewProcessingView.css

@@ -6,24 +6,24 @@
 
 .overview-processing-view {
   overflow: hidden;
-  padding: 16px;
+  padding: var(--sys-size-8);
   justify-content: center;
   align-items: center;
   height: 100%;
 }
 
 .overview-processing-view h1 {
-  font-size: 16px;
+  font-size: var(--sys-typescale-body1-size);
   text-align: center;
   font-weight: normal;
   margin: 0;
-  padding: 8px;
+  padding: var(--sys-size-5);
 }
 
 .overview-processing-view h2 {
-  font-size: 12px;
+  font-size: var(--sys-typescale-body4-size);
   text-align: center;
   font-weight: normal;
   margin: 0;
-  padding-top: 32px;
+  padding-top: var(--sys-size-13);
 }

package/front_end/panels/css_overview/cssOverviewSidebarPanel.css

@@ -34,7 +34,7 @@
   }
 
   .overview-toolbar {
-    border-bottom: 1px solid var(--sys-color-divider);
+    border-bottom: var(--sys-size-1) solid var(--sys-color-divider);
     flex: 0 0 auto;
   }
 

package/front_end/panels/css_overview/cssOverviewStartView.css

@@ -10,7 +10,7 @@
   }
 
   .css-overview-start-view {
-    padding: 24px;
+    padding: var(--sys-size-11);
     display: flex;
     flex-direction: column;
     background-color: var(--sys-color-cdt-base-container);
@@ -22,22 +22,22 @@
   }
 
   .preview-feature {
-    padding: 12px 16px;
-    border: 1px solid var(--sys-color-neutral-outline);
+    padding: var(--sys-size-6) var(--sys-size-8);
+    border: var(--sys-size-1) solid var(--sys-color-neutral-outline);
     color: var(--sys-color-on-surface);
-    font-size: 13px;
-    line-height: 20px;
-    border-radius: 12px;
+    font-size: var(--sys-typescale-body3-size);
+    line-height: var(--sys-typescale-body3-line-height);
+    border-radius: var(--sys-shape-corner-medium-small);
     margin: 42px 0;
     letter-spacing: 0.01em;
   }
 
   .preview-header {
     color: var(--sys-color-primary);
-    font-size: 13px;
-    line-height: 20px;
+    font-size: var(--sys-typescale-body3-size);
+    line-height: var(--sys-typescale-body3-line-height);
     letter-spacing: 0.01em;
-    margin: 9px 0 14px;
+    margin: 9px 0 var(--sys-size-7);
   }
 
   .preview-icon {
@@ -45,7 +45,7 @@
   }
 
   .feedback-prompt {
-    margin-bottom: 24px;
+    margin-bottom: var(--sys-size-11);
   }
 
   .feedback-prompt .devtools-link {
@@ -60,17 +60,17 @@
   }
 
   .thumbnail-wrapper {
-    width: 144px;
+    width: var(--sys-size-22);
     height: 92px;
-    margin-right: 20px;
+    margin-right: var(--sys-size-9);
   }
 
   .video-doc-header {
-    font-size: 13px;
-    line-height: 20px;
+    font-size: var(--sys-typescale-body3-size);
+    line-height: var(--sys-typescale-body3-line-height);
     letter-spacing: 0.04em;
     color: var(--sys-color-on-surface);
-    margin-bottom: 2px;
+    margin-bottom: var(--sys-size-2);
   }
 
   devtools-feedback-button {
@@ -78,8 +78,8 @@
   }
 
   .resources .devtools-link {
-    font-size: 14px;
-    line-height: 22px;
+    font-size: var(--sys-typescale-body2-size);
+    line-height: var(--sys-size-10);
     letter-spacing: 0.04em;
     text-decoration-line: underline;
     color: var(--sys-color-primary);