chrome-devtools-frontend 1.0.1684555 → 1.0.1689415

package/front_end/panels/network/components/RequestHeadersView.css

@@ -6,14 +6,14 @@
 
 .header {
   background-color: var(--sys-color-surface1);
-  border-bottom: 1px solid var(--sys-color-divider);
-  border-top: 1px solid var(--sys-color-divider);
+  border-bottom: var(--sys-size-1) solid var(--sys-color-divider);
+  border-top: var(--sys-size-1) solid var(--sys-color-divider);
   line-height: 25px;
   padding: 0 5px;
 }
 
 .header::marker {
-  font-size: 11px;
+  font-size: var(--sys-typescale-body5-size);
   line-height: 1;
 }
 
@@ -40,7 +40,7 @@ details summary input {
 .row {
   display: flex;
   line-height: 18px;
-  padding-left: 8px;
+  padding-left: var(--sys-size-5);
   gap: var(--sys-size-6);
   user-select: text;
   margin: var(--sys-size-3) 0;
@@ -62,8 +62,8 @@ div.raw-headers-row {
   color: var(--sys-color-on-surface-subtle);
   font: var(--sys-typescale-body5-medium);
   width: 30%;
-  min-width: 160px;
-  max-width: 240px;
+  min-width: var(--sys-size-23);
+  max-width: var(--sys-size-28);
   flex-shrink: 0;
   text-transform: capitalize;
 }
@@ -72,7 +72,7 @@ div.raw-headers-row {
   word-break: break-all;
   display: flex;
   align-items: center;
-  gap: 2px;
+  gap: var(--sys-size-2);
   font: var(--sys-typescale-body4-regular);
 }
 
@@ -89,11 +89,11 @@ div.raw-headers-row {
 .yellow-circle::before {
   content: '';
   display: inline-block;
-  width: 12px;
-  height: 12px;
-  border-radius: 6px;
+  width: var(--sys-size-6);
+  height: var(--sys-size-6);
+  border-radius: var(--sys-size-4);
   vertical-align: text-top;
-  margin-right: 2px;
+  margin-right: var(--sys-size-2);
 }
 
 .green-circle::before {
@@ -124,7 +124,7 @@ div.raw-headers-row {
   color: var(--sys-color-primary);
   text-decoration: underline;
   cursor: pointer;
-  outline-offset: 2px;
+  outline-offset: var(--sys-size-2);
 }
 
 .inline-icon {
@@ -134,7 +134,7 @@ div.raw-headers-row {
 .header-grid-container {
   display: inline-grid;
   grid-template-columns: 156px 50px 1fr;
-  gap: 4px;
+  gap: var(--sys-size-3);
   /* Make this fit into the same line as the summary marker */
   width: calc(100% - 15px);
 }
@@ -159,10 +159,10 @@ devtools-link .inline-icon {
 .purple.dot::before {
   background-color: var(--sys-color-purple-bright);
   content: var(--image-file-empty);
-  width: 6px;
-  height: 6px;
-  border-radius: 50%;
-  outline: 1px solid var(--icon-gap-toolbar);
+  width: var(--sys-size-4);
+  height: var(--sys-size-4);
+  border-radius: var(--sys-shape-corner-full);
+  outline: var(--sys-size-1) solid var(--icon-gap-toolbar);
   left: 9px;
   position: absolute;
   top: 11px;
@@ -177,5 +177,5 @@ summary label {
 }
 
 summary devtools-checkbox {
-  margin-top: 1px;
+  margin-top: var(--sys-size-1);
 }

package/front_end/panels/network/components/RequestTrustTokensView.css

@@ -18,7 +18,7 @@
   }
 
   .status-icon {
-    margin: 0 0.3em 2px 0;
+    margin: 0 0.3em var(--sys-size-2) 0;
     vertical-align: middle;
 
     &.failure {

package/front_end/panels/network/network-meta.ts

@@ -69,15 +69,15 @@ const UIStrings = {
   /**
    * @description Title of a setting under the Network category.
    */
-  networkRequestBlocking: 'Network request blocking',
+  requestBlockingAndThrottling: 'Request blocking and throttling',
   /**
    * @description Title of a setting under the Network category that can be invoked through the Command Menu.
    */
-  enableNetworkRequestBlocking: 'Enable network request blocking',
+  enableRequestBlockingAndThrottling: 'Enable request blocking and throttling',
   /**
    * @description Title of a setting under the Network category that can be invoked through the Command Menu.
    */
-  disableNetworkRequestBlocking: 'Disable network request blocking',
+  disableRequestBlockingAndThrottling: 'Disable request blocking and throttling',
   /**
    * @description Command for showing the 'Network' tool
    */
@@ -87,7 +87,7 @@ const UIStrings = {
    */
   network: 'Network',
   /**
-   * @description Command for showing the 'Network request blocking' tool
+   * @description Command for showing the 'Request conditions' tool
    */
   showRequestConditions: 'Show request conditions',
   /**
@@ -179,11 +179,11 @@ const UIStrings = {
    */
   clear: 'Clear network log',
   /**
-   * @description Title of an action in the Network request blocking panel to add a new URL pattern to the blocklist.
+   * @description Title of an action in the Request conditions panel to add a new URL pattern to the blocklist.
    */
   addNetworkRequestBlockingOrThrottlingPattern: 'Add network request blocking or throttling pattern',
   /**
-   * @description Title of an action in the Network request blocking panel to clear all URL patterns.
+   * @description Title of an action in the Request conditions panel to clear all URL patterns.
    */
   removeAllNetworkRequestBlockingOrThrottlingPatterns: 'Remove all network request blocking or throttling patterns',
   /**
@@ -493,15 +493,15 @@ Common.Settings.registerSettingExtension({
 
 SettingsUI.SettingUIRegistration.register(SDK.SDKSettings.requestBlockingEnabledSettingDescriptor, {
   category: Common.Settings.SettingCategory.NETWORK,
-  title: i18nLazyString(UIStrings.networkRequestBlocking),
+  title: i18nLazyString(UIStrings.requestBlockingAndThrottling),
   options: [
     {
       value: true,
-      title: i18nLazyString(UIStrings.enableNetworkRequestBlocking),
+      title: i18nLazyString(UIStrings.enableRequestBlockingAndThrottling),
     },
     {
       value: false,
-      title: i18nLazyString(UIStrings.disableNetworkRequestBlocking),
+      title: i18nLazyString(UIStrings.disableRequestBlockingAndThrottling),
     },
   ],
 });

package/front_end/panels/network/networkConfigView.css

@@ -5,7 +5,7 @@
  */
 
 .network-config {
-  padding: 12px;
+  padding: var(--sys-size-6);
   display: block;
 }
 
@@ -18,7 +18,7 @@
 }
 
 .network-config-title {
-  margin-right: 16px;
+  margin-right: var(--sys-size-8);
   width: 130px;
 }
 
@@ -31,14 +31,14 @@
 }
 
 .panel-section-separator {
-  height: 1px;
+  height: var(--sys-size-1);
   margin-bottom: 10px;
   background: var(--sys-color-divider);
 }
 /* Disable cache */
 
 .network-config-disable-cache {
-  line-height: 28px;
+  line-height: var(--sys-size-12);
   border-top: none;
   padding-top: 0;
 }
@@ -65,32 +65,32 @@
   }
 
   & > .network-config-title {
-    line-height: 24px;
+    line-height: var(--sys-size-11);
   }
 }
 /* User agent */
 
 .network-config-ua > .network-config-title {
-  line-height: 20px;
+  line-height: var(--sys-size-9);
 }
 
 .network-config-ua input {
   display: block;
-  width: calc(100% - 20px);
+  width: calc(100% - var(--sys-size-9));
 }
 
 .network-config-ua input[type="text"],
 .network-config-ua select {
-  margin-top: 8px;
+  margin-top: var(--sys-size-5);
 }
 
 .network-config-ua select {
-  width: calc(100% - 20px);
+  width: calc(100% - var(--sys-size-9));
   max-width: 250px;
 }
 
 .network-config-ua-custom {
-  padding-bottom: 8px;
+  padding-bottom: var(--sys-size-5);
 
   input,
   devtools-user-agent-client-hints-form {
@@ -107,7 +107,7 @@
 
 devtools-user-agent-client-hints-form {
   display: block;
-  margin-top: 14px;
+  margin-top: var(--sys-size-7);
   width: min(100%, 400px);
 }
 

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