chrome-devtools-frontend 1.0.1683520 → 1.0.1689415

package/front_end/ui/legacy/components/source_frame/xmlTree.css

@@ -9,7 +9,7 @@
   list-style: none;
   padding: 0;
   margin: 0;
-  padding-inline-start: 16px;
+  padding-inline-start: var(--sys-size-8);
 }
 
 ol.tree-outline {
@@ -17,11 +17,11 @@ ol.tree-outline {
 }
 
 .tree-outline li {
-  min-height: 12px;
+  min-height: var(--sys-size-6);
 }
 
 ::part(shadow-xml-view-close-tag) {
-  margin-left: -16px;
+  margin-left: calc(-1 * var(--sys-size-8));
 }
 
 ::part(shadow-xml-view-close-tag),::part(shadow-xml-view-tag) {

package/front_end/ui/legacy/components/utils/imagePreview.css

@@ -11,7 +11,7 @@
 }
 
 .image-preview-container img {
-  margin: 6px 0;
+  margin: var(--sys-size-4) 0;
   width: auto;
   max-height: 100px;
   background-image: var(--image-file-checker);

package/front_end/ui/legacy/components/utils/jsUtils.css

@@ -5,7 +5,7 @@
  */
 
 .stack-preview-async-description {
-  padding: 3px 0 1px;
+  padding: 3px 0 var(--sys-size-1);
   font-weight: bold;
 }
 
@@ -25,8 +25,8 @@
     display: var(--override-display-stack-preview-tbody, table-row-group);
 
     & > tr {
-      height: 16px;
-      line-height: 16px;
+      height: var(--sys-size-8);
+      line-height: var(--sys-size-8);
 
       &:has(td.link > .ignore-list-link) {
         opacity: 60%;
@@ -59,7 +59,7 @@
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-    padding-inline: 2px;
+    padding-inline: var(--sys-size-2);
 
     &.link {
       overflow: visible;
@@ -96,20 +96,20 @@
 
   .arrow-icon-button {
     cursor: pointer;
-    padding: 1px 0;
+    padding: var(--sys-size-1) 0;
     border: none;
     background: none;
-    margin-left: -4px;
-    margin-right: -2px;
+    margin-left: calc(-1 * var(--sys-size-3));
+    margin-right: calc(-1 * var(--sys-size-2));
   }
 
   .arrow-icon {
     display: inline-block;
     mask-image: var(--image-file-triangle-right);
     background-color: var(--icon-default);
-    margin-top: 2px;
-    height: 14px;
-    width: 14px;
+    margin-top: var(--sys-size-2);
+    height: var(--sys-size-7);
+    width: var(--sys-size-7);
     transition: transform 200ms;
   }
 

package/front_end/ui/legacy/dropTarget.css

@@ -19,7 +19,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  margin: 20px;
-  border: 4px dashed var(--sys-color-neutral-outline);
+  margin: var(--sys-size-9);
+  border: var(--sys-size-3) dashed var(--sys-color-neutral-outline);
   pointer-events: none;
 }

package/front_end/ui/legacy/emptyWidget.css

@@ -4,6 +4,12 @@
  * found in the LICENSE file.
  */
 
+:host {
+  display: flex;
+  flex-direction: column;
+  flex: auto;
+}
+
 .empty-view-scroller {
   overflow: auto;
 }

package/front_end/ui/legacy/filter.css

@@ -10,7 +10,7 @@
   flex: none;
   flex-wrap: wrap;
   align-items: center;
-  border-bottom: 1px solid var(--sys-color-divider);
+  border-bottom: var(--sys-size-1) solid var(--sys-color-divider);
   color: var(--sys-color-on-surface-subtle);
 }
 
@@ -21,7 +21,7 @@
 }
 
 .filter-bitset-filter {
-  padding: 2px;
+  padding: var(--sys-size-2);
   display: inline-flex;
   overflow: hidden;
   min-height: var(--sys-size-11);
@@ -34,19 +34,19 @@
 
 .filter-bitset-filter span {
   color: var(--sys-color-on-surface);
-  outline: 1px solid var(--sys-color-neutral-outline);
-  outline-offset: -1px;
+  outline: var(--sys-size-1) solid var(--sys-color-neutral-outline);
+  outline-offset: calc(-1 * var(--sys-size-1));
   box-sizing: border-box;
   display: inline-block;
   flex: none;
-  margin: auto 2px;
-  padding: 3px 6px;
+  margin: auto var(--sys-size-2);
+  padding: 3px var(--sys-size-4);
   background: transparent;
-  border-radius: 6px;
+  border-radius: var(--sys-size-4);
   overflow: hidden;
   cursor: pointer;
   font-weight: 500;
-  font-size: 11px;
+  font-size: var(--sys-typescale-body5-size);
 }
 
 .filter-bitset-filter span:focus-visible {
@@ -74,21 +74,21 @@
 
 .filter-bitset-filter-divider {
   background-color: var(--sys-color-divider);
-  height: 16px;
-  width: 1px;
-  margin: auto 2px;
+  height: var(--sys-size-8);
+  width: var(--sys-size-1);
+  margin: auto var(--sys-size-2);
   display: inline-block;
 }
 
 .filter-checkbox-filter {
-  padding-left: 1px;
+  padding-left: var(--sys-size-1);
   padding-right: 7px;
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
   display: inline-flex;
   vertical-align: middle;
-  height: 24px;
+  height: var(--sys-size-11);
   position: relative;
 }
 
@@ -103,15 +103,15 @@
 
 .filter-divider {
   background-color: var(--sys-color-divider);
-  width: 1px;
-  margin: 5px 4px;
-  height: 16px;
+  width: var(--sys-size-1);
+  margin: 5px var(--sys-size-3);
+  height: var(--sys-size-8);
 }
 
 .toolbar-button {
   white-space: nowrap;
   overflow: hidden;
-  min-width: 28px;
+  min-width: var(--sys-size-12);
   background: transparent;
   border-radius: 0;
 }
@@ -128,7 +128,7 @@
 }
 
 .toolbar-text {
-  margin: 0 4px 0 0;
+  margin: 0 var(--sys-size-3) 0 0;
   text-overflow: ellipsis;
   flex: auto;
   overflow: hidden;
@@ -165,7 +165,7 @@
   }
 
   &:focus-visible {
-    outline: 2px solid var(--sys-color-state-focus-ring);
+    outline: var(--sys-size-2) solid var(--sys-color-state-focus-ring);
   }
 }
 

package/front_end/ui/legacy/infobar.css

@@ -43,8 +43,8 @@
 }
 
 .infobar:focus {
-  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: calc(-1 * var(--sys-size-2));
 }
 
 .infobar-warning {

package/front_end/ui/legacy/inspectorCommon.css

@@ -27,7 +27,7 @@ body {
   margin: 0;
   cursor: default;
   font-family: var(--default-font-family);
-  font-size: 12px;
+  font-size: var(--sys-typescale-body4-size);
   tab-size: 4;
   user-select: none;
   color: var(--sys-color-on-surface);
@@ -107,7 +107,7 @@ iframe.fill {
 }
 
 .view-container > devtools-toolbar {
-  border-bottom: 1px solid var(--sys-color-divider);
+  border-bottom: var(--sys-size-1) solid var(--sys-color-divider);
 }
 
 .flex-auto {
@@ -143,17 +143,17 @@ iframe.widget {
 
 .highlighted-search-result,
 :host::highlight(highlighted-search-result) {
-  border-radius: 1px;
+  border-radius: var(--sys-size-1);
   background-color: var(--sys-color-yellow-container);
   color: var(--sys-color-on-yellow-container);
-  outline: 1px solid var(--sys-color-yellow-container);
+  outline: var(--sys-size-1) solid var(--sys-color-yellow-container);
 }
 
 .link {
   cursor: pointer;
   text-decoration: underline;
   color: var(--text-link);
-  outline-offset: 2px;
+  outline-offset: var(--sys-size-2);
 }
 
 button,
@@ -177,8 +177,8 @@ input {
     &:hover::after,
     &:active::before {
       content: '';
-      height: 24px;
-      width: 24px;
+      height: var(--sys-size-11);
+      width: var(--sys-size-11);
       border-radius: var(--sys-shape-corner-full);
       position: absolute;
     }
@@ -202,14 +202,14 @@ input {
       width: 15px;
       border-radius: 5px;
       position: absolute;
-      border: 2px solid var(--sys-color-state-focus-ring);
+      border: var(--sys-size-2) solid var(--sys-color-state-focus-ring);
     }
 
     &.small:hover::after,
     &.small:active::before {
-      height: 12px;
-      width: 12px;
-      border-radius: 2px;
+      height: var(--sys-size-6);
+      width: var(--sys-size-6);
+      border-radius: var(--sys-size-2);
     }
   }
 }
@@ -228,10 +228,10 @@ input::placeholder {
 .harmony-input:not([type]),
 .harmony-input[type='number'],
 .harmony-input[type='text'] {
-  padding: 3px 6px;
-  height: 24px;
-  border: 1px solid var(--sys-color-neutral-outline);
-  border-radius: 4px;
+  padding: 3px var(--sys-size-4);
+  height: var(--sys-size-11);
+  border: var(--sys-size-1) solid var(--sys-color-neutral-outline);
+  border-radius: var(--sys-shape-corner-extra-small);
 
   &.error-input,
   &:invalid {
@@ -252,7 +252,7 @@ input[type='radio'] {
   height: 17px;
   width: 17px;
   min-width: 17px;
-  border-radius: 8px;
+  border-radius: var(--sys-shape-corner-small);
   vertical-align: sub;
   margin: 0 5px 5px 0;
   accent-color: var(--sys-color-primary-bright);
@@ -292,8 +292,8 @@ input[type='range']::-webkit-slider-thumb,
   margin: 0;
   padding: 0;
   border: 0;
-  width: 12px;
-  height: 12px;
+  width: var(--sys-size-6);
+  height: var(--sys-size-6);
   margin-top: -5px;
   border-radius: 50%;
   background-color: var(--sys-color-primary);
@@ -304,12 +304,12 @@ input[type='range']::-webkit-slider-runnable-track {
   margin: 0;
   padding: 0;
   width: 100%;
-  height: 2px;
+  height: var(--sys-size-2);
   background-color: var(--sys-color-surface-variant);
 }
 
 input[type='range']:focus::-webkit-slider-thumb {
-  box-shadow: 0 0 0 2px var(--sys-color-inverse-primary);
+  box-shadow: 0 0 0 var(--sys-size-2) var(--sys-color-inverse-primary);
 }
 
 input[type='range']:disabled::-webkit-slider-thumb {
@@ -327,10 +327,10 @@ input[type='range']:disabled::-webkit-slider-thumb {
   /* Note: this value is used in light & dark mode */
   --override-current-search-result-background-color: rgb(255 127 0 / 80%);
 
-  outline: 1px solid var(--sys-color-yellow-container);
-  border-radius: 1px;
-  padding: 1px;
-  margin: -1px;
+  outline: var(--sys-size-1) solid var(--sys-color-yellow-container);
+  border-radius: var(--sys-size-1);
+  padding: var(--sys-size-1);
+  margin: calc(-1 * var(--sys-size-1));
   background-color: var(--override-current-search-result-background-color);
   color: var(--sys-color-on-surface);
 }
@@ -343,12 +343,12 @@ input[type='range']:disabled::-webkit-slider-thumb {
   box-shadow: var(--drop-shadow);
   background-color: var(--sys-color-cdt-base-container);
   text-overflow: clip !important; /* stylelint-disable-line declaration-no-important */
-  padding-left: 2px;
-  margin-left: -2px;
-  padding-right: 2px;
-  margin-right: -2px;
-  margin-bottom: -1px;
-  padding-bottom: 1px;
+  padding-left: var(--sys-size-2);
+  margin-left: calc(-1 * var(--sys-size-2));
+  padding-right: var(--sys-size-2);
+  margin-right: calc(-1 * var(--sys-size-2));
+  margin-bottom: calc(-1 * var(--sys-size-1));
+  padding-bottom: var(--sys-size-1);
   opacity: 100% !important; /* stylelint-disable-line declaration-no-important */
 }
 
@@ -412,7 +412,7 @@ select {
 
     &:focus {
       outline: var(--sys-size-2) solid var(--sys-color-state-focus-ring);
-      outline-offset: -1px;
+      outline-offset: calc(-1 * var(--sys-size-1));
     }
   }
 }
@@ -462,7 +462,7 @@ select option {
 .gray-info-message {
   text-align: center;
   font-style: italic;
-  padding: 6px;
+  padding: var(--sys-size-4);
   color: var(--sys-color-token-subtle);
   white-space: nowrap;
 }
@@ -509,10 +509,10 @@ dt-icon-label {
 
 .dot::before {
   content: var(--image-file-empty);
-  width: 6px;
-  height: 6px;
+  width: var(--sys-size-4);
+  height: var(--sys-size-4);
   border-radius: 50%;
-  outline: 1px solid var(--icon-gap-default);
+  outline: var(--sys-size-1) solid var(--icon-gap-default);
   left: 9px;
   position: absolute;
   top: 9px;
@@ -555,9 +555,9 @@ dt-icon-label {
 .undisplayable-text,
 .expandable-inline-button {
   border: none;
-  padding: 1px 3px;
-  margin: 0 2px;
-  font-size: 11px;
+  padding: var(--sys-size-1) 3px;
+  margin: 0 var(--sys-size-2);
+  font-size: var(--sys-typescale-body5-size);
   font-family: inherit;
   white-space: nowrap;
   display: inline-block;
@@ -594,8 +594,8 @@ button.link {
 }
 
 button.link: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);
   border-radius: var(--sys-shape-corner-full);
 }
 
@@ -614,19 +614,19 @@ button.link:focus-visible {
   .harmony-input:not([type]),
   .harmony-input[type='number'],
   .harmony-input[type='text'] {
-    border: 1px solid ButtonText;
+    border: var(--sys-size-1) solid ButtonText;
   }
 
   .harmony-input:not([type]):focus,
   .harmony-input[type='number']:focus,
   .harmony-input[type='text']:focus {
-    border: 1px solid Highlight;
+    border: var(--sys-size-1) solid Highlight;
   }
 }
 /* search input with customized styling */
 input.custom-search-input::-webkit-search-cancel-button {
   appearance: none;
-  width: 16px;
+  width: var(--sys-size-8);
   height: 15px;
   margin-right: 0;
   opacity: 70%;
@@ -643,11 +643,11 @@ input.custom-search-input::-webkit-search-cancel-button:hover {
 /* loading spinner */
 .spinner::before {
   display: block;
-  width: var(--dimension, 24px);
-  height: var(--dimension, 24px);
+  width: var(--dimension, var(--sys-size-11));
+  height: var(--dimension, var(--sys-size-11));
   border: var(--override-spinner-size, 3px) solid
     var(--override-spinner-color, var(--sys-color-token-subtle));
-  border-radius: 12px;
+  border-radius: var(--sys-shape-corner-medium-small);
   clip-path: rect(0, var(--clip-size, 15px), var(--clip-size, 15px), 0);
   content: '';
   position: absolute;
@@ -762,8 +762,8 @@ devtools-toolbar {
   }
 
   & > devtools-issue-counter {
-    margin-top: -4px;
-    padding: 0 1px;
+    margin-top: calc(-1 * var(--sys-size-3));
+    padding: 0 var(--sys-size-1);
   }
 
   devtools-adorner.fix-perf-icon {
@@ -773,8 +773,8 @@ devtools-toolbar {
   }
 
   devtools-issue-counter.main-toolbar {
-    margin-left: 1px;
-    margin-right: 1px;
+    margin-left: var(--sys-size-1);
+    margin-right: var(--sys-size-1);
   }
 
   .toolbar-dropdown-arrow {
@@ -792,7 +792,7 @@ devtools-toolbar {
   .toolbar-button {
     white-space: nowrap;
     overflow: hidden;
-    min-width: 28px;
+    min-width: var(--sys-size-12);
     background: transparent;
     border-radius: 0;
 
@@ -871,9 +871,9 @@ devtools-toolbar {
 
   .toolbar-button:not(.toolbar-has-dropdown):focus-visible::before {
     position: absolute;
-    inset: 2px;
+    inset: var(--sys-size-2);
     background-color: var(--sys-color-state-focus-highlight);
-    border-radius: 2px;
+    border-radius: var(--sys-size-2);
     content: '';
     /* This ::before rule serves as a background for an element.
     Setting z-index to make sure it's always below the content. */
@@ -898,7 +898,7 @@ devtools-toolbar {
     background: var(--sys-color-cdt-base-container);
     animation: 2s fade-out;
     font-weight: normal;
-    border: 1px solid var(--sys-color-divider);
+    border: var(--sys-size-1) solid var(--sys-color-divider);
     border-radius: 3px;
   }
 
@@ -909,11 +909,11 @@ devtools-toolbar {
   .toolbar-state-on.toolbar-toggle-with-dot .toolbar-text::after {
     content: '';
     position: absolute;
-    bottom: 2px;
+    bottom: var(--sys-size-2);
     background-color: var(--sys-color-primary-bright);
     width: 4.5px;
     height: 4.5px;
-    border: 2px solid
+    border: var(--sys-size-2) solid
       var(--override-toolbar-background-color, --sys-color-cdt-base-container);
     border-radius: 50%;
     right: 0;
@@ -983,18 +983,18 @@ devtools-toolbar {
   /* Input */
 
   .toolbar-input {
-    box-shadow: inset 0 0 0 2px transparent;
+    box-shadow: inset 0 0 0 var(--sys-size-2) transparent;
     box-sizing: border-box;
     width: 120px;
     height: var(--sys-size-9);
     padding: 0 var(--sys-size-2) 0 var(--sys-size-5);
-    margin: 1px 3px;
-    border-radius: 100px;
+    margin: var(--sys-size-1) 3px;
+    border-radius: var(--sys-shape-corner-full);
     min-width: 35px;
     position: relative;
 
     &.focused {
-      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);
     }
 
     &:not(:has(devtools-button:hover), .disabled):hover {
@@ -1047,9 +1047,9 @@ devtools-toolbar {
 
   .toolbar-divider {
     background-color: var(--sys-color-divider);
-    width: 1px;
-    margin: 5px 4px;
-    height: 16px;
+    width: var(--sys-size-1);
+    margin: 5px var(--sys-size-3);
+    height: var(--sys-size-8);
   }
 
   .toolbar-spacer {
@@ -1067,14 +1067,14 @@ devtools-toolbar {
 
   &:not([floating]) > .toolbar-button:last-child:not(:first-child, select) {
     justify-content: left;
-    margin-right: 2px;
+    margin-right: var(--sys-size-2);
   }
 
   & > .highlight::before {
     content: '';
     position: absolute;
-    inset: 2px;
-    border-radius: 2px;
+    inset: var(--sys-size-2);
+    border-radius: var(--sys-size-2);
     background: var(--sys-color-neutral-container);
     z-index: -1;
   }
@@ -1259,7 +1259,7 @@ devtools-toolbar {
 .devtools-link {
   color: var(--text-link);
   text-decoration: underline;
-  outline-offset: 2px;
+  outline-offset: var(--sys-size-2);
 
   .elements-disclosure & {
     color: var(--text-link);

package/front_end/ui/legacy/inspectorDrawerTabbedPane.css

@@ -46,7 +46,7 @@ devtools-toolbar.collapsed-vertical-drawer-toolbar-content {
 devtools-toolbar.collapsed-vertical-drawer-toolbar-content .toolbar-button {
   margin: 0 auto;
   padding: 0;
-  padding-right: 1px;
+  padding-right: var(--sys-size-1);
   width: 27px;
   height: 26px;
   display: flex;

package/front_end/ui/legacy/listWidget.css

@@ -23,7 +23,7 @@
 
 .list-separator {
   background: var(--sys-color-divider);
-  height: 1px;
+  height: var(--sys-size-1);
 }
 
 .list-item {
@@ -123,16 +123,16 @@
 }
 
 .text-prompt-container {
-  padding: 3px 6px;
-  height: 24px;
+  padding: 3px var(--sys-size-4);
+  height: var(--sys-size-11);
   border: none;
   box-shadow: var(--legacy-focus-ring-inactive-shadow);
-  border-radius: 2px;
+  border-radius: var(--sys-size-2);
   width: 100%;
   background-color: var(--sys-color-cdt-base-container);
 
   &:focus {
-    border: 1px solid var(--sys-color-state-focus-ring);
+    border: var(--sys-size-1) solid var(--sys-color-state-focus-ring);
   }
 
   & .text-prompt {

package/front_end/ui/legacy/progressIndicator.css

@@ -8,8 +8,8 @@
   background-color: var(--sys-color-error-bright);
   border: 0;
   width: 10px;
-  height: 12px;
-  border-radius: 2px;
+  height: var(--sys-size-6);
+  border-radius: var(--sys-size-2);
 }
 
 .progress-indicator-shadow-container {
@@ -22,12 +22,12 @@
   text-overflow: ellipsis;
   overflow: hidden;
   max-width: 150px;
-  margin-right: 2px;
+  margin-right: var(--sys-size-2);
   color: var(--sys-color-token-subtle);
 }
 
 .progress-indicator-shadow-container progress {
   flex: auto;
-  margin: 0 2px;
+  margin: 0 var(--sys-size-2);
   width: 100px;
 }