chrome-devtools-frontend 1.0.1683520 → 1.0.1689415

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;
 }
 

package/front_end/panels/explain/components/consoleInsight.css

@@ -18,7 +18,7 @@
 
   .wrapper {
     background-color: var(--sys-color-cdt-base-container);
-    border-radius: 16px;
+    border-radius: var(--sys-shape-corner-medium);
     container-type: inline-size;
     display: grid;
     animation: expand var(--sys-motion-duration-medium2) var(--sys-motion-easing-emphasized) forwards;
@@ -56,20 +56,20 @@
   }
 
   .wrapper.top {
-    border-radius: 16px 16px 4px 4px;
+    border-radius: var(--sys-shape-corner-medium) var(--sys-shape-corner-medium) var(--sys-shape-corner-extra-small) var(--sys-shape-corner-extra-small);
   }
 
   .wrapper.bottom {
     margin-top: 5px;
-    border-radius: 4px 4px 16px 16px;
+    border-radius: var(--sys-shape-corner-extra-small) var(--sys-shape-corner-extra-small) var(--sys-shape-corner-medium) var(--sys-shape-corner-medium);
   }
 
   header {
     display: flex;
     flex-direction: row;
-    gap: 6px;
+    gap: var(--sys-size-4);
     color: var(--sys-color-on-surface);
-    font-size: 13px;
+    font-size: var(--sys-typescale-body3-size);
     font-style: normal;
     font-weight: 500;
     margin-bottom: var(--sys-size-6);
@@ -112,10 +112,10 @@
     --override-markdown-view-message-color: var(--sys-color-on-surface);
 
     color: var(--sys-color-on-surface);
-    font-size: 12px;
+    font-size: var(--sys-typescale-body4-size);
     font-style: normal;
     font-weight: 400;
-    line-height: 20px;
+    line-height: var(--sys-size-9);
 
     p {
       margin-block: 1em;
@@ -134,7 +134,7 @@
       }
 
       li::marker {
-        font-size: 11px;
+        font-size: var(--sys-typescale-body5-size);
         line-height: 1;
       }
     }
@@ -161,7 +161,7 @@
   }
 
   devtools-markdown-view {
-    margin-bottom: 12px;
+    margin-bottom: var(--sys-size-6);
   }
 
   footer {
@@ -172,13 +172,13 @@
     font-style: normal;
     font-weight: 400;
     line-height: normal;
-    margin-top: 14px;
-    gap: 32px;
+    margin-top: var(--sys-size-7);
+    gap: var(--sys-size-13);
   }
 
   @container (max-width: 600px) {
     footer {
-      gap: 8px;
+      gap: var(--sys-size-5);
     }
   }
 
@@ -189,14 +189,14 @@
   footer .rating {
     display: flex;
     flex-direction: row;
-    gap: 8px;
+    gap: var(--sys-size-5);
   }
 
   textarea {
     height: 84px;
     padding: 10px;
-    border-radius: 8px;
-    border: 1px solid var(--sys-color-neutral-outline);
+    border-radius: var(--sys-shape-corner-small);
+    border: var(--sys-size-1) solid var(--sys-color-neutral-outline);
     width: 100%;
     font-family: var(--default-font-family);
     font-size: inherit;
@@ -214,14 +214,14 @@
   }
 
   main .buttons {
-    margin-top: 12px;
+    margin-top: var(--sys-size-6);
   }
 
   .disclaimer {
     display: flex;
-    gap: 2px;
+    gap: var(--sys-size-2);
     color: var(--sys-color-on-surface-subtle);
-    font-size: 11px;
+    font-size: var(--sys-typescale-body5-size);
     align-items: flex-start;
     flex-direction: column;
   }
@@ -232,8 +232,8 @@
 
     devtools-icon {
       color: var(--sys-color-primary);
-      width: 14px;
-      height: 14px;
+      width: var(--sys-size-7);
+      height: var(--sys-size-7);
     }
   }
 
@@ -266,10 +266,10 @@
   }
 
   summary {
-    font-size: 12px;
+    font-size: var(--sys-typescale-body4-size);
     font-style: normal;
     font-weight: 400;
-    line-height: 20px;
+    line-height: var(--sys-size-9);
   }
 
   details {
@@ -312,8 +312,8 @@
   }
 
   .info {
-    width: 20px;
-    height: 20px;
+    width: var(--sys-size-9);
+    height: var(--sys-size-9);
   }
 
   .badge {
@@ -404,11 +404,11 @@
 
     ul {
       color: var(--sys-color-primary);
-      font-size: 12px;
+      font-size: var(--sys-typescale-body4-size);
       font-style: normal;
       font-weight: 400;
       line-height: 18px;
-      margin-top: 8px;
+      margin-top: var(--sys-size-5);
       padding-left: var(--sys-size-6);
     }
 
@@ -420,13 +420,13 @@
       color: var(--sys-color-primary);
       display: inline-flex !important; /* stylelint-disable-line declaration-no-important */
       align-items: center;
-      gap: 4px;
+      gap: var(--sys-size-3);
       text-decoration-line: underline;
     }
 
     devtools-icon {
-      height: 16px;
-      width: 16px;
+      height: var(--sys-size-8);
+      width: var(--sys-size-8);
       margin-right: var(--sys-size-1);
     }
 

package/front_end/panels/issues/components/elementsPanelLink.css

@@ -6,8 +6,8 @@
 
 .element-reveal-icon {
   display: inline-block;
-  width: 20px;
-  height: 20px;
+  width: var(--sys-size-9);
+  height: var(--sys-size-9);
   mask-image: var(--image-file-select-element);
   background-color: var(--icon-default);
 }

package/front_end/panels/issues/components/hideIssuesMenu.css

@@ -12,7 +12,7 @@
   align-items: center;
   justify-content: center;
   padding: 0;
-  margin: 0 -2px 0 4px;
+  margin: 0 calc(-1 * var(--sys-size-2)) 0 var(--sys-size-3);
   overflow: hidden;
   border-radius: 0;
   border: none;

package/front_end/panels/issues/issuesPane.css

@@ -15,7 +15,7 @@
 
 .issues-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);
 }
 
 .issues-toolbar-left {
@@ -23,5 +23,5 @@
 }
 
 .issues-toolbar-right {
-  padding-right: 6px;
+  padding-right: var(--sys-size-4);
 }