chrome-devtools-frontend 1.0.1683520 → 1.0.1689415

package/front_end/panels/network/networkLogView.css

@@ -18,7 +18,7 @@
 }
 
 #network-container.grid-focused.no-node-selected:focus-within {
-  border: 1px solid var(--sys-color-state-focus-ring);
+  border: var(--sys-size-1) solid var(--sys-color-state-focus-ring);
 }
 
 .network-summary-bar {
@@ -26,7 +26,7 @@
   line-height: 27px;
   padding-left: 5px;
   background-color: var(--sys-color-cdt-base-container);
-  border-top: 1px solid var(--sys-color-divider);
+  border-top: var(--sys-size-1) solid var(--sys-color-divider);
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
@@ -38,7 +38,7 @@
 }
 
 .network-summary-bar dt-icon-label {
-  margin-right: 6px;
+  margin-right: var(--sys-size-4);
 }
 
 .network-summary-bar > * {
@@ -51,7 +51,7 @@
 
 .network-log-grid.data-grid td {
   height: 41px;
-  border-left: 1px solid var(--sys-color-divider);
+  border-left: var(--sys-size-1) solid var(--sys-color-divider);
   vertical-align: middle;
 }
 
@@ -69,8 +69,8 @@
 
 .network-waterfall-header,
 .network-log-grid.data-grid thead th {
-  border-bottom: 1px solid var(--sys-color-divider);
-  border-left: 1px solid var(--sys-color-divider);
+  border-bottom: var(--sys-size-1) solid var(--sys-color-divider);
+  border-left: var(--sys-size-1) solid var(--sys-color-divider);
 }
 
 .network-waterfall-header,
@@ -92,7 +92,7 @@
 }
 
 .network-log-grid.data-grid .waterfall-column {
-  padding: 1px 0;
+  padding: var(--sys-size-1) 0;
 }
 
 .network-log-grid.data-grid .waterfall-column .sort-order-icon-container {
@@ -110,7 +110,7 @@
 }
 
 .network-badge {
-  margin-right: 4px;
+  margin-right: var(--sys-size-3);
 }
 
 .status-column .devtools-link {
@@ -122,7 +122,7 @@
   color: inherit;
   background-color: transparent;
   outline-offset: 0;
-  max-height: 16px;
+  max-height: var(--sys-size-8);
 }
 
 .network-error-row,
@@ -193,7 +193,7 @@
 
 .network-log-grid.data-grid.small .network-cell-subtitle.always-visible {
   display: inline;
-  margin-left: 4px;
+  margin-left: var(--sys-size-3);
 }
 
 .network-log-grid tr.highlighted-row {
@@ -218,9 +218,9 @@
 
 .network-log-grid.data-grid .icon {
   float: left;
-  width: 32px;
-  height: 32px;
-  margin-top: 1px;
+  width: var(--sys-size-13);
+  height: var(--sys-size-13);
+  margin-top: var(--sys-size-1);
   margin-right: 3px;
 }
 
@@ -238,8 +238,8 @@
   devtools-icon {
     color: var(--sys-color-yellow);
     vertical-align: middle;
-    width: 16px;
-    height: 16px;
+    width: var(--sys-size-8);
+    height: var(--sys-size-8);
   }
 
   .image.icon::before,
@@ -264,8 +264,8 @@ td.time-column {
 .data-grid-data-grid-node devtools-icon[name="arrow-up-down-circle"],
 .data-grid-data-grid-node devtools-icon.network-console-icon,
 .network-log-grid.data-grid.small .icon {
-  width: 16px;
-  height: 16px;
+  width: var(--sys-size-8);
+  height: var(--sys-size-8);
   vertical-align: sub;
 }
 
@@ -283,15 +283,15 @@ td.time-column {
   position: absolute;
   max-width: 18px;
   max-height: 21px;
-  min-width: 1px;
-  min-height: 1px;
+  min-width: var(--sys-size-1);
+  min-height: var(--sys-size-1);
 }
 
 .network-log-grid.data-grid.small .image-network-icon-preview {
-  left: 2px;
-  right: 2px;
+  left: var(--sys-size-2);
+  right: var(--sys-size-2);
   max-width: 10px;
-  max-height: 12px;
+  max-height: var(--sys-size-6);
 }
 
 .network-log-grid.data-grid .trailing-link-icon {
@@ -305,7 +305,7 @@ td.time-column {
 }
 
 .network-frame-divider {
-  width: 2px;
+  width: var(--sys-size-2);
   background-color: var(--network-frame-divider-color); /* stylelint-disable-line plugin/use_theme_colors */
   z-index: 10;
   visibility: hidden;
@@ -364,38 +364,38 @@ td.time-column {
 
 .network-waterfall-header div {
   display: table-cell;
-  line-height: 14px;
+  line-height: var(--sys-size-7);
   margin: auto 0;
   vertical-align: middle;
   text-align: left;
   font-weight: normal;
-  padding: 0 4px;
+  padding: 0 var(--sys-size-3);
 }
 
 /* All network-waterfall-header rules are defined here instead of above */
 .network-waterfall-header .sort-order-icon-container {
   position: absolute;
-  top: 1px;
+  top: var(--sys-size-1);
   right: 0;
-  bottom: 1px;
+  bottom: var(--sys-size-1);
   display: flex;
   align-items: center;
 }
 
 .network-waterfall-header .sort-order-icon {
   align-items: center;
-  margin-right: 4px;
-  margin-bottom: -2px;
+  margin-right: var(--sys-size-3);
+  margin-bottom: calc(-1 * var(--sys-size-2));
 }
 
 .network-frame-group-icon {
   display: inline-block;
-  margin: -7px 1px;
+  margin: -7px var(--sys-size-1);
   vertical-align: baseline;
 }
 
 .network-frame-group-badge {
-  margin-right: 4px;
+  margin-right: var(--sys-size-3);
 }
 
 .network-override-marker {
@@ -406,11 +406,11 @@ td.time-column {
 .network-override-marker::before {
   background-color: var(--sys-color-purple-bright);
   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-toolbar);
-  left: 8px;
+  outline: var(--sys-size-1) solid var(--icon-gap-toolbar);
+  left: var(--sys-size-5);
   position: absolute;
   top: 10px;
   z-index: 1;

package/front_end/panels/network/networkManageCustomHeadersView.css

@@ -18,7 +18,7 @@
 }
 
 .custom-headers-header {
-  padding: 2px;
+  padding: var(--sys-size-2);
 }
 
 .custom-headers-list-item {

package/front_end/panels/network/networkPanel.css

@@ -65,7 +65,7 @@
 }
 
 .network-details-view-tall-header {
-  border-top: 4px solid var(--app-color-toolbar-background);
+  border-top: var(--sys-size-3) solid var(--app-color-toolbar-background);
 }
 
 .network-item-view {
@@ -74,13 +74,13 @@
 }
 
 .network-item-preview-toolbar {
-  border-top: 1px solid var(--sys-color-divider);
+  border-top: var(--sys-size-1) solid var(--sys-color-divider);
   background-color: var(--sys-color-surface1);
 }
 
 .resource-timing-view {
   display: block;
-  margin: 6px;
+  margin: var(--sys-size-4);
   color: var(--sys-color-on-surface);
   overflow: auto;
   background-color: var(--sys-color-cdt-base-container);
@@ -101,7 +101,7 @@
   display: flex;
   flex-direction: column;
   position: relative;
-  border-bottom: 1px solid var(--sys-color-divider);
+  border-bottom: var(--sys-size-1) solid var(--sys-color-divider);
 }
 
 #network-overview-container canvas {
@@ -136,7 +136,7 @@
 }
 
 .network-film-strip {
-  border-bottom: solid 1px var(--sys-color-divider);
+  border-bottom: solid var(--sys-size-1) var(--sys-color-divider);
   flex: none !important; /* stylelint-disable-line declaration-no-important */
 }
 
@@ -153,7 +153,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);
 }
 
 .network-toolbar-container {
@@ -161,7 +161,7 @@
   align-items: flex-start;
   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);
 
   & > :first-child {
     flex: 1 1 auto;

package/front_end/panels/network/networkTimingTable.css

@@ -18,8 +18,8 @@
 }
 
 .network-timing-start th span.network-timing-hidden-header {
-  height: 1px;
-  width: 1px;
+  height: var(--sys-size-1);
+  width: var(--sys-size-1);
   position: absolute;
   overflow: hidden;
 }
@@ -34,7 +34,7 @@
 }
 
 .network-timing-table td {
-  padding: 4px 0;
+  padding: var(--sys-size-3) 0;
 }
 
 .network-timing-table-header td:last-child {
@@ -47,7 +47,7 @@
 }
 
 table.network-timing-table > tr:not(.network-timing-table-header, .network-timing-footer) > td:first-child {
-  padding-left: 12px;
+  padding-left: var(--sys-size-6);
 }
 
 .network-timing-table col.labels {
@@ -55,19 +55,19 @@ table.network-timing-table > tr:not(.network-timing-table-header, .network-timin
 }
 
 .network-timing-table col.duration {
-  width: 80px;
+  width: var(--sys-size-19);
 }
 
 .network-timing-table td.caution {
   font-weight: bold;
   color: var(--issue-color-yellow);
-  padding: 2px 0;
+  padding: var(--sys-size-2) 0;
 }
 
 .network-timing-table hr.break {
   background-color: var(--sys-color-divider);
   border: none;
-  height: 1px;
+  height: var(--sys-size-1);
 }
 
 .network-timing-row {
@@ -77,7 +77,7 @@ table.network-timing-table > tr:not(.network-timing-table-header, .network-timin
 
 .network-timing-bar {
   position: absolute;
-  min-width: 1px;
+  min-width: var(--sys-size-1);
   inset: 0 attr(data-right %) 0 attr(data-left %);
 }
 
@@ -89,7 +89,7 @@ table.network-timing-table > tr:not(.network-timing-table-header, .network-timin
 
 .network-timing-bar.queueing,
 .network-timing-bar.total {
-  border: 1px solid var(--sys-color-token-subtle);
+  border: var(--sys-size-1) solid var(--sys-color-token-subtle);
 }
 
 .network-timing-bar.blocking,
@@ -130,9 +130,9 @@ table.network-timing-table > tr:not(.network-timing-table-header, .network-timin
   user-select: none;
   mask-image: var(--image-file-triangle-right);
   float: left;
-  width: 14px;
-  height: 14px;
-  margin-right: 2px;
+  width: var(--sys-size-7);
+  height: var(--sys-size-7);
+  margin-right: var(--sys-size-2);
   content: "";
   position: relative;
   background-color: var(--icon-default);
@@ -141,7 +141,7 @@ table.network-timing-table > tr:not(.network-timing-table-header, .network-timin
 
 .network-fetch-timing-bar-clickable {
   position: relative;
-  left: -12px;
+  left: calc(-1 * var(--sys-size-6));
 }
 
 tr:has([aria-expanded="false"].network-fetch-timing-bar-clickable) ~ .router-evaluation-timing-bar-details,

package/front_end/panels/network/requestConditionsDrawer.css

@@ -6,7 +6,7 @@
 
 .list {
   border: none !important; /* stylelint-disable-line declaration-no-important */
-  border-top: 1px solid var(--sys-color-divider) !important; /* stylelint-disable-line declaration-no-important */
+  border-top: var(--sys-size-1) solid var(--sys-color-divider) !important; /* stylelint-disable-line declaration-no-important */
   display: flex;
   height: 100%;
 }
@@ -16,7 +16,7 @@
 }
 
 .editor-container {
-  padding: 0 4px;
+  padding: 0 var(--sys-size-3);
 }
 
 .blocked-urls {
@@ -44,7 +44,7 @@
 }
 
 .blocked-url-checkbox {
-  margin-left: 8px;
+  margin-left: var(--sys-size-5);
   flex: none;
 }
 
@@ -79,7 +79,7 @@
 .blocked-url-edit-row input {
   width: 100%;
   text-align: inherit;
-  height: 22px;
+  height: var(--sys-size-10);
 }
 
 .conditions-selector {

package/front_end/panels/network/requestCookiesView.css

@@ -7,26 +7,26 @@
 @scope to (devtools-widget > *) {
   .request-cookies-view {
     overflow: auto;
-    padding: 12px;
+    padding: var(--sys-size-6);
     height: 100%;
     background-color: var(--sys-color-cdt-base-container);
   }
 
   .request-cookies-view .request-cookies-title {
-    font-size: 12px;
+    font-size: var(--sys-typescale-body4-size);
     font-weight: bold;
     margin-right: 30px;
     color: var(--sys-color-on-surface);
   }
 
   .request-cookies-view .cookie-line {
-    margin-top: 6px;
+    margin-top: var(--sys-size-4);
     display: flex;
   }
 
   .request-cookies-view .cookies-panel-item {
-    margin-top: 6px;
-    margin-bottom: 16px;
+    margin-top: var(--sys-size-4);
+    margin-bottom: var(--sys-size-8);
     flex: none;
   }
 }

package/front_end/panels/network/requestDeviceBoundSessionsView.css

@@ -4,7 +4,7 @@
  * found in the LICENSE file.
  */
 .request-device-bound-sessions-view {
-  margin: 20px;
+  margin: var(--sys-size-9);
   overflow-y: auto;
   scroll-behavior: smooth;
 }

package/front_end/panels/network/requestHTMLView.css

@@ -10,6 +10,6 @@
     background: var(--ref-palette-neutral100);
     color-scheme: light;
     flex-grow: 1;
-    margin: 20px;
+    margin: var(--sys-size-9);
   }
 }

package/front_end/panels/network/requestHeadersTree.css

@@ -10,14 +10,14 @@
 
 .tree-outline > ol {
   padding-bottom: 5px;
-  border-bottom: solid 1px var(--sys-color-divider);
+  border-bottom: solid var(--sys-size-1) var(--sys-color-divider);
 }
 
 .tree-outline > .parent {
   user-select: none;
   font-weight: bold;
   color: var(--sys-color-on-surface);
-  margin-top: -1px;
+  margin-top: calc(-1 * var(--sys-size-1));
   display: flex;
   align-items: center;
   height: 26px;
@@ -26,7 +26,7 @@
 .tree-outline li {
   display: block;
   padding-left: 5px;
-  line-height: 20px;
+  line-height: var(--sys-size-9);
 }
 
 .tree-outline li:not(.parent) {
@@ -38,7 +38,7 @@
 }
 
 .tree-outline .caution {
-  margin-left: 4px;
+  margin-left: var(--sys-size-3);
   display: inline-block;
   font-weight: bold;
 }
@@ -103,8 +103,8 @@
   background-color: var(--sys-color-error);
   color: var(--sys-color-on-error);
   border-radius: 100vh;
-  padding-left: 6px;
-  padding-right: 6px;
+  padding-left: var(--sys-size-4);
+  padding-right: var(--sys-size-4);
 }
 
 .tree-outline .header-value {
@@ -112,27 +112,27 @@
   margin-right: 1em;
   white-space: pre-wrap;
   word-break: break-all;
-  margin-top: 1px;
+  margin-top: var(--sys-size-1);
 }
 
 .tree-outline .call-to-action {
   background-color: var(--sys-color-neutral-container);
-  padding: 8px;
+  padding: var(--sys-size-5);
   border-radius: 5px;
-  margin: 4px;
+  margin: var(--sys-size-3);
 }
 
 .tree-outline .selected .call-to-action {
   background-color: transparent;
-  padding: 8px;
+  padding: var(--sys-size-5);
   border-radius: 5px;
-  margin: 4px;
+  margin: var(--sys-size-3);
 }
 
 .tree-outline .call-to-action-body {
-  padding: 6px 0;
+  padding: var(--sys-size-4) 0;
   margin-left: 9.5px;
-  border-left: 2px solid var(--sys-color-yellow-bright);
+  border-left: var(--sys-size-2) solid var(--sys-color-yellow-bright);
   padding-left: 18px;
 }
 
@@ -156,18 +156,18 @@
   border: none;
   border-radius: 3px;
   display: inline-block;
-  font-size: 12px;
+  font-size: var(--sys-typescale-body4-size);
   font-family: sans-serif;
   cursor: pointer;
-  margin: 0 4px;
-  padding: 2px 4px;
+  margin: 0 var(--sys-size-3);
+  padding: var(--sys-size-2) var(--sys-size-3);
 }
 
 .request-headers-caution {
   display: flex;
-  gap: 6px;
-  margin-right: 20px;
-  padding: 8px;
+  gap: var(--sys-size-4);
+  margin-right: var(--sys-size-9);
+  padding: var(--sys-size-5);
   background-color: var(--sys-color-neutral-container);
   border-radius: 5px;
 }

package/front_end/panels/network/requestInitiatorView.css

@@ -6,5 +6,5 @@
 
 .request-initiator-view {
   display: flex;
-  margin: 6px;
+  margin: var(--sys-size-4);
 }

package/front_end/panels/network/requestInitiatorViewTree.css

@@ -8,18 +8,18 @@
   user-select: text;
 
   & .fill {
-    right: -6px; /* Same as the margin in .request-initiator-view but negative. */
+    right: calc(-1 * var(--sys-size-4)); /* Same as the margin in .request-initiator-view but negative. */
   }
 }
 
 .request-initiator-view-section-title {
   font-weight: bold;
-  padding: 4px;
+  padding: var(--sys-size-3);
 }
 
 .console-origin-label {
   color: var(--sys-color-token-subtle);
-  padding: 2px 4px 2px 20px;
+  padding: var(--sys-size-2) var(--sys-size-3) var(--sys-size-2) var(--sys-size-9);
 }
 
 .request-initiator-view-section-title:focus-visible {

package/front_end/panels/network/requestPayloadTree.css

@@ -10,14 +10,14 @@
 
 .tree-outline > ol {
   padding-bottom: 5px;
-  border-bottom: solid 1px var(--sys-color-divider);
+  border-bottom: solid var(--sys-size-1) var(--sys-color-divider);
 }
 
 .tree-outline > .parent {
   user-select: none;
   font-weight: bold;
   color: var(--sys-color-on-surface);
-  margin-top: -1px;
+  margin-top: calc(-1 * var(--sys-size-1));
   display: flex;
   align-items: center;
   height: var(--sys-size-13);
@@ -25,7 +25,7 @@
 
 .tree-outline li {
   padding-left: 5px;
-  line-height: 20px;
+  line-height: var(--sys-size-9);
 }
 
 .tree-outline li:not(.parent) {
@@ -62,7 +62,7 @@
 }
 
 .tree-outline li.expanded .payload-toggle:focus-visible {
-  border: 2px solid var(--sys-color-state-focus-ring);
+  border: var(--sys-size-2) solid var(--sys-color-state-focus-ring);
   border-radius: 5px;
 }
 
@@ -92,7 +92,7 @@
 }
 
 .request-payload-show-more-button {
-  margin: 0 4px;
+  margin: 0 var(--sys-size-3);
 }
 
 @media (forced-colors: active) {

package/front_end/panels/network/requestPayloadView.css

@@ -16,7 +16,7 @@
   min-height: 200px;
   display: flex;
   flex-direction: column;
-  border-top: 1px solid var(--sys-color-divider);
+  border-top: var(--sys-size-1) solid var(--sys-color-divider);
 }
 
 .request-payload-tree {

package/front_end/panels/network/resourceChunkView.css

@@ -26,19 +26,19 @@
   .data-grid .data-container table.data {
     tr.data-grid-data-grid-node {
       td.resource-chunk-view-td {
-        border-bottom: 1px solid var(--sys-color-divider);
+        border-bottom: var(--sys-size-1) solid var(--sys-color-divider);
       }
 
       &.resource-chunk-view-row-send td:first-child::before {
         content: "\2B06";
         color: var(--sys-color-tertiary);
-        padding-right: 4px;
+        padding-right: var(--sys-size-3);
       }
 
       &.resource-chunk-view-row-receive td:first-child::before {
         content: "\2B07";
         color: var(--sys-color-error);
-        padding-right: 4px;
+        padding-right: var(--sys-size-3);
       }
 
       &.resource-chunk-view-row-send {