chrome-devtools-frontend 1.0.1684555 → 1.0.1689415

package/front_end/panels/elements/stylePropertiesTreeOutline.css

@@ -17,8 +17,8 @@
 }
 
 .tree-outline li {
-  margin-left: 12px;
-  padding-left: 22px;
+  margin-left: var(--sys-size-6);
+  padding-left: var(--sys-size-10);
   white-space: normal;
   text-overflow: ellipsis;
   overflow-wrap: break-word;
@@ -30,7 +30,7 @@
   }
 
   .webkit-css-property {
-    margin-left: -22px; /* outdent the first line of longhand properties (in an expanded shorthand) to compensate for the "padding-left" shift in .tree-outline li */
+    margin-left: calc(-1 * var(--sys-size-10)); /* outdent the first line of longhand properties (in an expanded shorthand) to compensate for the "padding-left" shift in .tree-outline li */
   }
 
   &.not-parsed-ok {
@@ -42,12 +42,12 @@
       width: 11px;
       height: 10px;
       margin: 0 7px 0 0;
-      top: 1px;
+      top: var(--sys-size-1);
       left: -36px; /* outdent to compensate for the top-level property indent */
       user-select: none;
       cursor: default;
       z-index: 1;
-      mask: var(--image-file-warning-filled) center / 14px no-repeat;
+      mask: var(--image-file-warning-filled) center / var(--sys-size-7) no-repeat;
       background-color: var(--icon-warning);
     }
 
@@ -66,8 +66,8 @@
   }
 
   &.editing-sub-part {
-    padding: 3px 6px 8px 18px;
-    margin: -1px -6px -8px;
+    padding: 3px var(--sys-size-4) var(--sys-size-5) 18px;
+    margin: calc(-1 * var(--sys-size-1)) calc(-1 * var(--sys-size-4)) calc(-1 * var(--sys-size-5));
     text-overflow: clip;
   }
 
@@ -84,7 +84,7 @@
   }
 
   .info {
-    padding-top: 4px;
+    padding-top: var(--sys-size-3);
     padding-bottom: 3px;
   }
 
@@ -100,14 +100,14 @@
 
   &.ghost-row {
     /* As there is no checkbox to the left of the ghost rows, explicitly set padding-left */
-    padding-left: 56px;
+    padding-left: var(--sys-size-17);
   }
 }
 
 .tree-outline > li {
   padding-left: 38px;
   clear: both;
-  min-height: 14px;
+  min-height: var(--sys-size-7);
 
   .webkit-css-property {
     margin-left: -38px; /* outdent the first line of the top-level properties to compensate for the "padding-left" shift in .tree-outline > li */
@@ -131,7 +131,7 @@ ol:not(.tree-outline) {
 }
 
 .tree-outline > ol {
-  padding-inline-start: 16px;
+  padding-inline-start: var(--sys-size-8);
 
   ol {
     padding-left: 0;
@@ -151,7 +151,7 @@ ol.expanded {
   position: relative;
   z-index: 1;
   width: 18px;
-  left: -40px; /* original -2px + (-38px) to compensate for the first line outdent */
+  left: calc(-1 * var(--sys-size-14)); /* original -2px + (-38px) to compensate for the first line outdent */
   top: 0.5px;
   height: 13px;
 }
@@ -228,7 +228,7 @@ devtools-icon.icon-link {
 
 .styles-name-value-separator {
   display: inline-block;
-  width: 14px;
+  width: var(--sys-size-7);
   text-decoration: inherit;
   white-space: pre;
 }
@@ -263,9 +263,9 @@ devtools-icon.icon-link {
 
 .expand-icon {
   user-select: none;
-  margin-left: -6px;
-  margin-right: 2px;
-  margin-bottom: -4px;
+  margin-left: calc(-1 * var(--sys-size-4));
+  margin-right: var(--sys-size-2);
+  margin-bottom: calc(-1 * var(--sys-size-3));
 
   .tree-outline li:not(.parent) & {
     display: none;
@@ -279,7 +279,7 @@ devtools-icon.icon-link {
 
 :host-context(.matched-styles) {
   ol.expanded {
-    margin-left: 16px;
+    margin-left: var(--sys-size-8);
   }
 
   :focus-visible {
@@ -303,13 +303,13 @@ devtools-css-length {
 }
 
 devtools-css-length {
-  margin-left: 1px;
+  margin-left: var(--sys-size-1);
 }
 
 devtools-icon.open-in-animations-panel {
   position: relative;
   transform: scale(0.7);
-  margin: -5px -2px -3px -4px;
+  margin: -5px calc(-1 * var(--sys-size-2)) -3px calc(-1 * var(--sys-size-3));
   user-select: none;
   color: var(--icon-css);
   cursor: default;
@@ -333,7 +333,7 @@ devtools-icon.open-in-animations-panel {
 devtools-icon.bezier-swatch-icon {
   position: relative;
   transform: scale(0.7);
-  margin: -5px -2px -3px -4px;
+  margin: -5px calc(-1 * var(--sys-size-2)) -3px calc(-1 * var(--sys-size-3));
   user-select: none;
   color: var(--icon-css);
   cursor: default;

package/front_end/panels/elements/stylesSidebarPane.css

@@ -8,10 +8,10 @@
   min-height: 18px;
   white-space: nowrap;
   user-select: text;
-  border-bottom: 1px solid var(--sys-color-divider);
+  border-bottom: var(--sys-size-1) solid var(--sys-color-divider);
   position: relative;
   overflow: hidden;
-  padding: 2px 2px 4px 4px;
+  padding: var(--sys-size-2) var(--sys-size-2) var(--sys-size-3) var(--sys-size-3);
 
   &:last-child {
     border-bottom: none;
@@ -26,6 +26,23 @@
     font-style: italic;
   }
 
+  &.styles-section-inactive {
+    opacity: 70%;
+
+    .selector,
+    .style-properties {
+      font-style: italic;
+    }
+
+    .selector {
+      text-decoration: line-through;
+    }
+  }
+
+  devtools-icon[name="warning"] {
+    color: var(--icon-warning);
+  }
+
   &:focus-visible,
   &.read-only:focus-visible {
     background-color: var(--sys-color-state-focus-highlight);
@@ -41,7 +58,7 @@
   }
 
   .styles-section-subtitle devtools-icon {
-    margin-bottom: -4px;
+    margin-bottom: calc(-1 * var(--sys-size-3));
   }
 
   .styles-section-subtitle .devtools-link {
@@ -74,7 +91,7 @@
 
   .style-properties {
     margin: 0;
-    padding: 2px 4px 0 0;
+    padding: var(--sys-size-2) var(--sys-size-3) 0 0;
     list-style: none;
     clear: both;
     display: flex;
@@ -96,10 +113,10 @@
   }
 
   & .section-collapse-icon {
-    width: 12px;
-    height: 12px;
-    margin-right: 2px;
-    margin-left: -2px;
+    width: var(--sys-size-6);
+    height: var(--sys-size-6);
+    margin-right: var(--sys-size-2);
+    margin-left: calc(-1 * var(--sys-size-2));
     vertical-align: middle;
     cursor: pointer;
     display: none;
@@ -140,7 +157,7 @@
   padding: var(--sys-size-2) var(--sys-size-2) 0 var(--sys-size-8);
   max-width: 100%;
   height: 15px;
-  margin-bottom: -1px;
+  margin-bottom: calc(-1 * var(--sys-size-1));
 }
 
 .styles-section-subtitle * {
@@ -210,7 +227,7 @@
 }
 
 .styles-sidebar-pane-toolbar {
-  border-bottom: 1px solid var(--sys-color-divider);
+  border-bottom: var(--sys-size-1) solid var(--sys-color-divider);
 }
 
 .styles-pane-toolbar {
@@ -220,12 +237,12 @@
 .sidebar-separator {
   background-color: var(--sys-color-surface2);
   padding: 0 5px;
-  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);
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
-  line-height: 22px;
+  line-height: var(--sys-size-10);
 
   > span.monospace {
     max-width: 180px;
@@ -233,7 +250,7 @@
     overflow: hidden;
     text-overflow: ellipsis;
     vertical-align: middle;
-    margin-left: 2px;
+    margin-left: var(--sys-size-2);
   }
 
   &.layer-separator {
@@ -249,14 +266,14 @@
 .sidebar-pane-section-toolbar {
   position: absolute;
   right: 0;
-  bottom: -1px;
+  bottom: calc(-1 * var(--sys-size-1));
   z-index: 0;
 
   &.new-rule-toolbar {
     visibility: hidden;
     margin-bottom: 5px;
 
-    --toolbar-height: 16px;
+    --toolbar-height: var(--sys-size-8);
   }
 }
 
@@ -267,8 +284,8 @@
 }
 
 .styles-show-all {
-  padding: 4px;
-  margin-left: 16px;
+  padding: var(--sys-size-3);
+  margin-left: var(--sys-size-8);
   text-overflow: ellipsis;
   overflow: hidden;
   max-width: -webkit-fill-available;
@@ -277,7 +294,7 @@
 @media (forced-colors: active) {
   .sidebar-pane-section-toolbar {
     forced-color-adjust: none;
-    border: 1px solid ButtonText;
+    border: var(--sys-size-1) solid ButtonText;
     background-color: ButtonFace;
   }
 
@@ -317,14 +334,14 @@
 }
 
 .spinner::before {
-  --dimension: 24px;
+  --dimension: var(--sys-size-11);
 
   margin-top: 2em;
   left: calc(50% - var(--dimension) / 2);
 }
 
 .section-block-expand-icon {
-  margin-bottom: -4px;
+  margin-bottom: calc(-1 * var(--sys-size-3));
 }
 
 .selector-specificity-tooltip-summary {

package/front_end/panels/emulation/deviceModeView.css

@@ -14,15 +14,15 @@
 .device-mode-toolbar {
   flex: none;
   background-color: var(--app-color-toolbar-background);
-  border-bottom: 1px solid var(--sys-color-divider);
+  border-bottom: var(--sys-size-1) solid var(--sys-color-divider);
   display: flex;
   flex-direction: row;
   align-items: stretch;
 }
 
 .device-mode-x {
-  margin: 0 1px;
-  font-size: 16px;
+  margin: 0 var(--sys-size-1);
+  font-size: var(--sys-typescale-body1-size);
 }
 
 .device-mode-size-input {
@@ -32,11 +32,11 @@
    * 2 pixels padding between the characters and the
    * step-buttons.
    */
-  width: calc(4ch + 2ch + 2px);
+  width: calc(4ch + 2ch + var(--sys-size-2));
   max-height: 18px;
   border: var(--sys-color-neutral-outline);
-  border-radius: 4px;
-  margin: 0 2px;
+  border-radius: var(--sys-shape-corner-extra-small);
+  margin: 0 var(--sys-size-2);
   text-align: center;
   font-size: inherit;
   font-family: inherit;
@@ -80,15 +80,15 @@ devtools-toolbar.device-mode-toolbar-options {
 .device-mode-media-container {
   flex: none;
   overflow: hidden;
-  box-shadow: inset 0 -1px var(--sys-color-divider);
+  box-shadow: inset 0 calc(-1 * var(--sys-size-1)) var(--sys-color-divider);
 }
 
 .device-mode-content-clip .device-mode-media-container {
-  margin-bottom: 20px;
+  margin-bottom: var(--sys-size-9);
 }
 
 .device-mode-presets-container {
-  flex: 0 0 20px;
+  flex: 0 0 var(--sys-size-9);
   display: flex;
 }
 
@@ -97,7 +97,7 @@ devtools-toolbar.device-mode-toolbar-options {
   justify-content: center;
   position: relative;
   background-color: var(--sys-color-surface1);
-  border-bottom: 1px solid var(--sys-color-divider);
+  border-bottom: var(--sys-size-1) solid var(--sys-color-divider);
 }
 
 .device-mode-presets-container:hover {
@@ -113,8 +113,8 @@ devtools-toolbar.device-mode-toolbar-options {
 }
 
 .device-mode-preset-bar {
-  border-left: 2px solid var(--sys-color-divider);
-  border-right: 2px solid var(--sys-color-divider);
+  border-left: var(--sys-size-2) solid var(--sys-color-divider);
+  border-right: var(--sys-size-2) solid var(--sys-color-divider);
   pointer-events: auto;
   text-align: center;
   flex: none;
@@ -123,7 +123,7 @@ devtools-toolbar.device-mode-toolbar-options {
   align-items: center;
   justify-content: center;
   white-space: nowrap;
-  margin-bottom: 1px;
+  margin-bottom: var(--sys-size-1);
 }
 
 .device-mode-preset-bar:hover {
@@ -158,14 +158,14 @@ devtools-toolbar.device-mode-toolbar-options {
 }
 
 .device-mode-content-clip .device-mode-screen-area {
-  --override-screen-area-box-shadow: hsl(240deg 3% 84%) 0 0 0 0.5px, hsl(0deg 0% 80% / 40%) 0 0 20px;
+  --override-screen-area-box-shadow: hsl(240deg 3% 84%) 0 0 0 0.5px, hsl(0deg 0% 80% / 40%) 0 0 var(--sys-size-9);
 
   box-shadow: var(--override-screen-area-box-shadow);
 }
 
 .theme-with-dark-background .device-mode-content-clip .device-mode-screen-area,
 :host-context(.theme-with-dark-background) .device-mode-content-clip .device-mode-screen-area {
-  --override-screen-area-box-shadow: rgb(40 40 42) 0 0 0 0.5px, rgb(51 51 51 / 40%) 0 0 20px;
+  --override-screen-area-box-shadow: rgb(40 40 42) 0 0 0 0.5px, rgb(51 51 51 / 40%) 0 0 var(--sys-size-9);
 }
 
 .device-mode-resizer {
@@ -188,56 +188,56 @@ devtools-toolbar.device-mode-toolbar-options {
 
 .device-mode-right-resizer {
   top: 0;
-  bottom: -1px;
-  right: -20px;
-  width: 20px;
+  bottom: calc(-1 * var(--sys-size-1));
+  right: calc(-1 * var(--sys-size-9));
+  width: var(--sys-size-9);
 }
 
 .device-mode-left-resizer {
   top: 0;
-  bottom: -1px;
-  left: -20px;
-  width: 20px;
+  bottom: calc(-1 * var(--sys-size-1));
+  left: calc(-1 * var(--sys-size-9));
+  width: var(--sys-size-9);
   opacity: 0%;
 }
 
 .device-mode-bottom-resizer {
   left: 0;
-  right: -1px;
-  bottom: -20px;
-  height: 20px;
+  right: calc(-1 * var(--sys-size-1));
+  bottom: calc(-1 * var(--sys-size-9));
+  height: var(--sys-size-9);
 }
 
 .device-mode-bottom-right-resizer {
-  inset: 0 -20px -20px 0;
+  inset: 0 calc(-1 * var(--sys-size-9)) calc(-1 * var(--sys-size-9)) 0;
   background-color: var(--sys-color-surface1);
 }
 
 .device-mode-bottom-left-resizer {
-  inset: 0 0 -20px -20px;
+  inset: 0 0 calc(-1 * var(--sys-size-9)) calc(-1 * var(--sys-size-9));
   opacity: 0%;
 }
 
 .device-mode-right-resizer > div {
   /* stylelint-disable-next-line custom-property-pattern */
   content: var(--image-file-resizeHorizontal);
-  width: 6px;
+  width: var(--sys-size-4);
   height: 26px;
 }
 
 .device-mode-left-resizer > div {
   /* stylelint-disable-next-line custom-property-pattern */
   content: var(--image-file-resizeHorizontal);
-  width: 6px;
+  width: var(--sys-size-4);
   height: 26px;
 }
 
 .device-mode-bottom-resizer > div {
   /* stylelint-disable-next-line custom-property-pattern */
   content: var(--image-file-resizeVertical);
-  margin-bottom: -2px;
+  margin-bottom: calc(-1 * var(--sys-size-2));
   width: 26px;
-  height: 6px;
+  height: var(--sys-size-4);
 }
 
 .device-mode-bottom-right-resizer > div {
@@ -278,33 +278,33 @@ devtools-toolbar.device-mode-toolbar-options {
 }
 
 .device-mode-ruler-top {
-  height: 20px;
+  height: var(--sys-size-9);
   right: 0;
 }
 
 .device-mode-ruler-left {
-  width: 20px;
+  width: var(--sys-size-9);
   bottom: 0;
 }
 
 .device-mode-ruler-content {
   pointer-events: none;
   position: absolute;
-  left: -20px;
-  top: -20px;
+  left: calc(-1 * var(--sys-size-9));
+  top: calc(-1 * var(--sys-size-9));
 }
 
 .device-mode-ruler-top .device-mode-ruler-content {
-  border-top: 1px solid transparent;
+  border-top: var(--sys-size-1) solid transparent;
   right: 0;
-  bottom: 20px;
+  bottom: var(--sys-size-9);
   background-color: var(--sys-color-cdt-base-container);
 }
 
 .device-mode-ruler-left .device-mode-ruler-content {
-  border-left: 1px solid transparent;
-  border-top: 1px solid transparent;
-  right: 20px;
+  border-left: var(--sys-size-1) solid transparent;
+  border-top: var(--sys-size-1) solid transparent;
+  right: var(--sys-size-9);
   bottom: 0;
 }
 
@@ -313,13 +313,13 @@ devtools-toolbar.device-mode-toolbar-options {
 }
 
 .device-mode-ruler-top .device-mode-ruler-inner {
-  inset: 0 0 0 20px;
-  border-bottom: 1px solid var(--sys-color-token-subtle);
+  inset: 0 0 0 var(--sys-size-9);
+  border-bottom: var(--sys-size-1) solid var(--sys-color-token-subtle);
 }
 
 .device-mode-ruler-left .device-mode-ruler-inner {
   inset: 19px 0 0;
-  border-right: 1px solid var(--sys-color-token-subtle);
+  border-right: var(--sys-size-1) solid var(--sys-color-token-subtle);
   background-color: var(--sys-color-cdt-base-container);
 }
 
@@ -331,8 +331,8 @@ devtools-toolbar.device-mode-toolbar-options {
   width: 0;
   height: 5px;
   bottom: 0;
-  border-right: 1px solid var(--sys-color-token-subtle);
-  margin-right: -1px;
+  border-right: var(--sys-size-1) solid var(--sys-color-token-subtle);
+  margin-right: calc(-1 * var(--sys-size-1));
 }
 
 .device-mode-ruler-top .device-mode-ruler-marker.device-mode-ruler-marker-medium {
@@ -347,8 +347,8 @@ devtools-toolbar.device-mode-toolbar-options {
   height: 0;
   width: 5px;
   right: 0;
-  border-bottom: 1px solid var(--sys-color-token-subtle);
-  margin-bottom: -1px;
+  border-bottom: var(--sys-size-1) solid var(--sys-color-token-subtle);
+  margin-bottom: calc(-1 * var(--sys-size-1));
 }
 
 .device-mode-ruler-left .device-mode-ruler-marker.device-mode-ruler-marker-medium {
@@ -370,12 +370,12 @@ devtools-toolbar.device-mode-toolbar-options {
 }
 
 .device-mode-ruler-top .device-mode-ruler-text {
-  left: 2px;
-  top: -2px;
+  left: var(--sys-size-2);
+  top: calc(-1 * var(--sys-size-2));
 }
 
 .device-mode-ruler-left .device-mode-ruler-text {
-  left: -4px;
+  left: calc(-1 * var(--sys-size-3));
   top: -15px;
   transform: rotate(270deg);
 }

package/front_end/panels/emulation/mediaQueryInspector.css

@@ -10,8 +10,8 @@
 }
 
 .media-inspector-marker-container {
-  height: 14px;
-  margin: 2px 0;
+  height: var(--sys-size-7);
+  margin: var(--sys-size-2) 0;
   position: relative;
 }
 
@@ -27,7 +27,7 @@
 .media-inspector-marker {
   flex: none;
   pointer-events: auto;
-  margin: 1px 0;
+  margin: var(--sys-size-1) 0;
   white-space: nowrap;
   z-index: auto;
   position: relative;
@@ -38,15 +38,15 @@
 }
 
 .media-inspector-marker:hover {
-  margin: -1px 0;
+  margin: calc(-1 * var(--sys-size-1)) 0;
   opacity: 100%;
 }
 
 .media-inspector-marker-min-width {
   flex: auto;
   background-color: var(--sys-color-yellow-container);
-  border-right: 2px solid var(--sys-color-yellow-bright);
-  border-left: 2px solid var(--sys-color-yellow-bright);
+  border-right: var(--sys-size-2) solid var(--sys-color-yellow-bright);
+  border-left: var(--sys-size-2) solid var(--sys-color-yellow-bright);
 
   &:hover {
     background-color: color-mix(in srgb, var(--sys-color-yellow-container), var(--sys-color-yellow-bright) 30%);
@@ -54,17 +54,17 @@
 }
 
 .media-inspector-marker-min-width-right {
-  border-left: 2px solid var(--sys-color-yellow-bright);
+  border-left: var(--sys-size-2) solid var(--sys-color-yellow-bright);
 }
 
 .media-inspector-marker-min-width-left {
-  border-right: 2px solid var(--sys-color-yellow-bright);
+  border-right: var(--sys-size-2) solid var(--sys-color-yellow-bright);
 }
 
 .media-inspector-marker-min-max-width {
   background-color: var(--sys-color-tertiary-container);
-  border-left: 2px solid var(--sys-color-tertiary);
-  border-right: 2px solid var(--sys-color-tertiary);
+  border-left: var(--sys-size-2) solid var(--sys-color-tertiary);
+  border-right: var(--sys-size-2) solid var(--sys-color-tertiary);
 }
 
 .media-inspector-marker-min-max-width:hover {
@@ -73,8 +73,8 @@
 
 .media-inspector-marker-max-width {
   background-color: var(--sys-color-inverse-primary);
-  border-right: 2px solid var(--sys-color-primary-bright);
-  border-left: 2px solid var(--sys-color-primary-bright);
+  border-right: var(--sys-size-2) solid var(--sys-color-primary-bright);
+  border-left: var(--sys-size-2) solid var(--sys-color-primary-bright);
 }
 
 /* Clear background colors when query is not active and not hovering */
@@ -103,26 +103,26 @@
 }
 
 .media-inspector-marker-label-container-left {
-  left: -2px;
+  left: calc(-1 * var(--sys-size-2));
 }
 
 .media-inspector-marker-label-container-right {
-  right: -2px;
+  right: calc(-1 * var(--sys-size-2));
 }
 
 .media-inspector-marker-label {
   color: var(--sys-color-on-surface);
   position: absolute;
-  top: 1px;
+  top: var(--sys-size-1);
   bottom: 0;
-  font-size: 12px;
+  font-size: var(--sys-typescale-body4-size);
   pointer-events: none;
 }
 
 .media-inspector-label-right {
-  right: 4px;
+  right: var(--sys-size-3);
 }
 
 .media-inspector-label-left {
-  left: 4px;
+  left: var(--sys-size-3);
 }

package/front_end/panels/event_listeners/eventListenersView.css

@@ -78,7 +78,7 @@
   justify-content: center;
 }
 
-.sources.panel .empty-view-scroller {
+.sources.panel .placeholder > .empty-widget-container {
   display: none;
 }