chrome-devtools-frontend 1.0.1684555 → 1.0.1689415

package/front_end/panels/application/frameDetailsReportView.css

@@ -15,7 +15,7 @@
 }
 
 button ~ .text-ellipsis {
-  padding-left: 2px;
+  padding-left: var(--sys-size-2);
 }
 
 .link,
@@ -23,7 +23,7 @@ button ~ .text-ellipsis {
   color: var(--sys-color-primary);
   text-decoration: underline;
   cursor: pointer;
-  outline-offset: 2px;
+  outline-offset: var(--sys-size-2);
   padding: 0;
   margin-left: var(--sys-size-3);
   white-space: nowrap;;
@@ -34,7 +34,7 @@ button.link {
   background: none;
   font-family: inherit;
   font-size: inherit;
-  height: 16px;
+  height: var(--sys-size-8);
 }
 
 button.link:has(devtools-icon) {
@@ -42,12 +42,12 @@ button.link:has(devtools-icon) {
 }
 
 devtools-button.help-button {
-  top: 4px;
+  top: var(--sys-size-3);
   position: relative;
 }
 
 button.text-link {
-  padding-left: 2px;
+  padding-left: var(--sys-size-2);
   height: 26px;
 }
 
@@ -70,7 +70,7 @@ button.text-link {
 
 .inline-name {
   color: var(--sys-color-token-subtle);
-  padding-inline: 4px;
+  padding-inline: var(--sys-size-3);
   user-select: none;
   white-space: pre-line;
 }
@@ -80,21 +80,21 @@ button.text-link {
 }
 
 .inline-items devtools-button {
-  flex: 0 0 20px;
-  width: 20px;
-  height: 20px;
+  flex: 0 0 var(--sys-size-9);
+  width: var(--sys-size-9);
+  height: var(--sys-size-9);
 }
 
 .inline-items .text-ellipsis {
   flex: 0 1 auto;
   min-width: 0;
-  padding-left: 2px;
+  padding-left: var(--sys-size-2);
 }
 
 .span-cols {
   grid-column-start: span 2;
   margin-left: var(--sys-size-9);
-  line-height: 28px;
+  line-height: var(--sys-size-12);
 }
 
 .report-section:has(.link) {

package/front_end/panels/application/indexedDBViews.css

@@ -7,7 +7,7 @@
 .indexed-db-data-view .data-view-toolbar {
   position: relative;
   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);
 }
 
 .indexed-db-data-view devtools-data-grid {
@@ -24,7 +24,7 @@
 }
 
 :host-context(.indexed-db-data-view) .data-grid .data-container tr:nth-last-child(2) td {
-  border-bottom: 1px solid var(--sys-color-divider);
+  border-bottom: var(--sys-size-1) solid var(--sys-color-divider);
 }
 
 :host-context(.indexed-db-data-view) .data-grid:focus .data-container tr.selected {
@@ -75,7 +75,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;
@@ -92,15 +92,15 @@
 .stale-data-warning {
   display: flex;
   align-items: center;
-  gap: 4px;
-  padding: 0 4px;
+  gap: var(--sys-size-3);
+  padding: 0 var(--sys-size-3);
 }
 
 .stale-data-warning .warning-icon {
   --icon-color: var(--icon-warning);
 
-  width: 20px;
-  height: 20px;
+  width: var(--sys-size-9);
+  height: var(--sys-size-9);
 }
 
 .data-grid-container {

package/front_end/panels/application/originTrialTokenRows.css

@@ -11,7 +11,7 @@
 
 .key {
   color: var(--sys-color-token-subtle);
-  padding: 0 6px;
+  padding: 0 var(--sys-size-4);
   text-align: right;
   white-space: pre;
 }
@@ -19,7 +19,7 @@
 .value {
   color: var(--sys-color-token-subtle);
   margin-inline-start: 0;
-  padding: 0 6px;
+  padding: 0 var(--sys-size-4);
 }
 
 .error-text {

package/front_end/panels/application/originTrialTreeView.css

@@ -6,8 +6,8 @@
 
 :host {
   .status-badge {
-    border-radius: 4px;
-    padding: 4px;
+    border-radius: var(--sys-shape-corner-extra-small);
+    padding: var(--sys-size-3);
     background: var(--sys-color-neutral-container);
 
     & > devtools-icon {
@@ -42,4 +42,4 @@
   [aria-expanded='false'] .token-status-badge {
     display: inline-flex;
   }
-}
+}

package/front_end/panels/application/preloading/components/RuleSetDetailsView.css

@@ -18,11 +18,11 @@
 }
 
 .ruleset-header {
-  padding: 4px 8px;
+  padding: var(--sys-size-3) var(--sys-size-5);
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  border-bottom: 1px solid var(--sys-color-divider);
+  border-bottom: var(--sys-size-1) solid var(--sys-color-divider);
 }
 
 .ruleset-header devtools-icon {

package/front_end/panels/application/preloading/components/preloadingDetailsReportView.css

@@ -16,7 +16,7 @@
       background: none;
       font-family: inherit;
       font-size: inherit;
-      height: 16px;
+      height: var(--sys-size-8);
     }
 
     button.link devtools-icon {

package/front_end/panels/application/preloading/components/preloadingDisabledInfobar.css

@@ -5,8 +5,8 @@
  */
 
 #container {
-  padding: 6px 12px;
-  border-bottom: 1px solid var(--sys-color-divider);
+  padding: var(--sys-size-4) var(--sys-size-6);
+  border-bottom: var(--sys-size-1) solid var(--sys-color-divider);
   align-items: center;
   display: flex;
 }

package/front_end/panels/application/preloading/components/preloadingGrid.css

@@ -22,7 +22,7 @@
   .preloading-header {
     font-size: 15px;
     background-color: var(--sys-color-cdt-base-container);
-    padding: 1px 4px;
+    padding: var(--sys-size-1) var(--sys-size-3);
   }
 
   .preloading-placeholder {
@@ -30,7 +30,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    font-size: 13px;
+    font-size: var(--sys-typescale-body3-size);
     color: var(--sys-color-token-subtle);
   }
 }

package/front_end/panels/application/preloading/components/usedPreloadingView.css

@@ -40,26 +40,26 @@ devtools-report-divider {
   color: var(--sys-color-primary);
   text-decoration: underline;
   cursor: pointer;
-  outline-offset: 2px;
+  outline-offset: var(--sys-size-2);
   padding: 0;
 }
 
 .status-badge-container {
   white-space: nowrap;
-  margin: 8px 0 24px;
+  margin: var(--sys-size-5) 0 var(--sys-size-11);
 }
 
 .status-badge-container span {
-  margin-right: 2px;
+  margin-right: var(--sys-size-2);
 }
 
 .status-badge {
-  border-radius: 4px;
-  padding: 4px;
+  border-radius: var(--sys-shape-corner-extra-small);
+  padding: var(--sys-size-3);
 
   devtools-icon {
-    width: 16px;
-    height: 16px;
+    width: var(--sys-size-8);
+    height: var(--sys-size-8);
   }
 }
 

package/front_end/panels/application/preloading/preloadingView.css

@@ -20,7 +20,7 @@
 
 .preloading-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);
 
   button.toolbar-has-dropdown {
     margin: var(--sys-size-2) 0;

package/front_end/panels/application/preloading/preloadingViewDropDown.css

@@ -5,13 +5,13 @@
  */
 
 :host {
-  padding: 2px 1px 2px 2px;
+  padding: var(--sys-size-2) var(--sys-size-1) var(--sys-size-2) var(--sys-size-2);
 }
 
 .title {
-  padding-left: 8px;
+  padding-left: var(--sys-size-5);
 }
 
 .subtitle {
-  padding-left: 8px;
+  padding-left: var(--sys-size-5);
 }

package/front_end/panels/application/serviceWorkerCacheViews.css

@@ -7,7 +7,7 @@
 .service-worker-cache-data-view .data-view-toolbar {
   position: relative;
   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);
   padding-right: 10px;
 }
 
@@ -20,7 +20,7 @@
 }
 
 .service-worker-cache-data-view .data-grid .data-container tr:nth-last-child(2) td {
-  border-bottom: 1px solid var(--sys-color-divider);
+  border-bottom: var(--sys-size-1) solid var(--sys-color-divider);
 }
 
 .service-worker-cache-data-view .data-grid .data-container tr.selected {
@@ -49,8 +49,8 @@
 
 .cache-preview-panel-resizer {
   background-color: var(--sys-color-surface1);
-  height: 4px;
-  border-bottom: 1px solid var(--sys-color-divider);
+  height: var(--sys-size-3);
+  border-bottom: var(--sys-size-1) solid var(--sys-color-divider);
 }
 
 .cache-storage-summary-bar {
@@ -58,7 +58,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;

package/front_end/panels/application/serviceWorkerUpdateCycleView.css

@@ -7,13 +7,13 @@
 @scope to (devtools-widget > *) {
   .resource-service-worker-update-view {
     display: block;
-    margin: 6px;
+    margin: var(--sys-size-4);
     color: var(--sys-color-on-surface-subtle);
     overflow: auto;
   }
 
   .service-worker-update-timing-table {
-    border: 1px solid var(--sys-color-divider);
+    border: var(--sys-size-1) solid var(--sys-color-divider);
     border-spacing: 0;
     padding-left: 10px;
     padding-right: 10px;
@@ -24,14 +24,14 @@
 
   .service-worker-update-timing-row {
     position: relative;
-    height: 20px;
+    height: var(--sys-size-9);
     overflow: hidden;
-    min-width: 80px;
+    min-width: var(--sys-size-19);
   }
 
   .service-worker-update-timing-bar {
     position: absolute;
-    min-width: 1px;
+    min-width: var(--sys-size-1);
     top: 0;
     bottom: 0;
   }
@@ -40,9 +40,9 @@
     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);
@@ -51,7 +51,7 @@
 
   .service-worker-update-timing-bar-clickable {
     position: relative;
-    left: -12px;
+    left: calc(-1 * var(--sys-size-6));
   }
 
   .service-worker-update-timing-bar-clickable:focus-visible {
@@ -93,7 +93,7 @@
   }
 
   .service-worker-update-timing-table > tbody > tr > td {
-    padding: 4px 0;
+    padding: var(--sys-size-3) 0;
     padding-right: 10px;
   }
 
@@ -103,10 +103,10 @@
   }
 
   table.service-worker-update-timing-table > tbody > tr.service-worker-update-timing-bar-details > td:first-child {
-    padding-left: 12px;
+    padding-left: var(--sys-size-6);
   }
 
   table.service-worker-update-timing-table > tbody > tr.service-worker-update-timeline > td:first-child {
-    padding-left: 12px;
+    padding-left: var(--sys-size-6);
   }
 }

package/front_end/panels/application/serviceWorkersView.css

@@ -22,10 +22,10 @@
 .service-worker-version-stack-bar {
   position: absolute;
   top: 10px;
-  bottom: 20px;
-  left: 4px;
+  bottom: var(--sys-size-9);
+  left: var(--sys-size-3);
   content: "";
-  border-left: 1px solid var(--sys-color-divider);
+  border-left: var(--sys-size-1) solid var(--sys-color-divider);
   z-index: 0;
 }
 
@@ -49,8 +49,8 @@
   height: 10px;
   z-index: 10;
   margin-right: 5px;
-  border-radius: 50%;
-  border: 1px solid var(--sys-color-token-subtle);
+  border-radius: var(--sys-shape-corner-full);
+  border: var(--sys-size-1) solid var(--sys-color-token-subtle);
   align-self: center;
   /* The circle should not shrink, to avoid risking becoming invisible. */
   flex-shrink: 0;
@@ -73,7 +73,7 @@
 }
 
 .service-worker-subtitle {
-  padding-left: 14px;
+  padding-left: var(--sys-size-7);
   line-height: 14px;
   color: var(--sys-color-state-disabled);
 }
@@ -88,12 +88,12 @@
 }
 
 .service-worker-notification-editor {
-  border: 1px solid var(--sys-color-divider);
+  border: var(--sys-size-1) solid var(--sys-color-divider);
   display: flex;
   flex: auto;
-  margin-right: 4px;
+  margin-right: var(--sys-size-3);
   max-width: 400px;
-  min-width: 80px;
+  min-width: var(--sys-size-19);
 }
 
 .report-field-value-filename,
@@ -118,13 +118,13 @@
 
 .service-worker-client-focus-link {
   flex: none;
-  margin-left: 2px;
+  margin-left: var(--sys-size-2);
   align-self: center;
 }
 
 .service-worker-notification-editor.source-code {
   /** Simulate CodeMirror that is shown above */
-  padding: 4px;
+  padding: var(--sys-size-3);
 }
 
 .service-worker-list {
@@ -140,11 +140,11 @@
 .devtools-link {
   line-height: 14px;
   align-self: center;
-  padding: 1px;
+  padding: var(--sys-size-1);
 }
 
 button.link {
-  padding: 1px;
+  padding: var(--sys-size-1);
 }
 
 button.link:focus-visible {
@@ -171,7 +171,7 @@ devtools-icon.error-icon {
 .report-field-name {
   font: var(--sys-typescale-body5-medium);
   color: var(--sys-color-on-surface-subtle);
-  flex: 0 0 128px;
+  flex: 0 0 var(--sys-size-21);
   text-align: left;
   white-space: pre-wrap;
 }
@@ -185,7 +185,7 @@ devtools-icon.error-icon {
 }
 
 .service-worker-section {
-  border-bottom: 1px solid var(--sys-color-divider);
+  border-bottom: var(--sys-size-1) solid var(--sys-color-divider);
   grid-column: 1 / 3;
   padding: 0 var(--sys-size-9) 11px var(--sys-size-9);
 }
@@ -197,4 +197,3 @@ devtools-icon.error-icon {
 devtools-widget {
   display: block;
 }
-

package/front_end/panels/application/storageView.css

@@ -49,15 +49,15 @@
 }
 
 .quota-override-notification-editor {
-  border: solid 1px var(--sys-color-neutral-outline);
-  border-radius: 4px;
+  border: solid var(--sys-size-1) var(--sys-color-neutral-outline);
+  border-radius: var(--sys-shape-corner-extra-small);
   display: flex;
   flex: auto;
-  margin-right: 4px;
+  margin-right: var(--sys-size-3);
   max-width: 200px;
   min-width: 50px;
   min-height: 19px;
-  padding-left: 4px;
+  padding-left: var(--sys-size-3);
 
   &:focus {
     border-color: var(--sys-color-state-focus-ring);
@@ -84,7 +84,7 @@
 .clear-storage-header {
   min-width: 400px;
   /* Keep in sync with ui/legacy/checkboxTextLabel.css (12px input, 6px margins). */
-  --nested-checkbox-indent: 24px;
+  --nested-checkbox-indent: var(--sys-size-11);
 }
 
 .report-content-box {

package/front_end/panels/application/webMCPView.css

@@ -71,7 +71,7 @@
     align-items: center;
     flex: none;
     color: var(--sys-color-on-surface);
-    border-bottom: 1px solid var(--sys-color-divider);
+    border-bottom: var(--sys-size-1) solid var(--sys-color-divider);
 
     devtools-button {
       margin: calc(-1 * var(--sys-size-1)) 0;
@@ -188,7 +188,7 @@
     gap: var(--sys-size-3);
     width: 100%;
     box-sizing: border-box;
-    border-bottom: 1px solid var(--sys-color-divider);
+    border-bottom: var(--sys-size-1) solid var(--sys-color-divider);
 
     &:hover {
       background-color: var(--sys-color-state-hover-on-subtle);
@@ -250,7 +250,7 @@
 
   .call-details-tabbed-pane {
     flex: auto;
-    border-bottom: 1px solid var(--sys-color-divider);
+    border-bottom: var(--sys-size-1) solid var(--sys-color-divider);
   }
 
   .call-payload-view {
@@ -272,22 +272,22 @@
 
   .sidebar-tool-details {
     flex: none;
-    border-bottom: 1px solid var(--sys-color-divider);
+    border-bottom: var(--sys-size-1) solid var(--sys-color-divider);
   }
 
   .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);
   }
 
   .call-to-action-body {
-    padding: 6px 0;
+    padding: var(--sys-size-4) 0;
     margin-left: 9.5px;
-    border-left: 2px solid var(--issue-color-yellow);
+    border-left: var(--sys-size-2) solid var(--issue-color-yellow);
     padding-left: 18px;
-    line-height: 20px;
+    line-height: var(--sys-typescale-body3-line-height);
   }
 
   .call-to-action .explanation {

package/front_end/panels/autofill/autofillView.css

@@ -13,7 +13,7 @@
   .header {
     display: flex;
     flex-wrap: wrap;
-    border-bottom: 1px solid var(--sys-color-divider);
+    border-bottom: var(--sys-size-1) solid var(--sys-color-divider);
     width: 100%;
   }
 
@@ -27,11 +27,11 @@
 
   .address {
     padding: 10px;
-    border-bottom: 1px solid var(--sys-color-divider);
+    border-bottom: var(--sys-size-1) solid var(--sys-color-divider);
   }
 
   .filled-fields-grid {
-    border-top: 1px solid var(--sys-color-divider);
+    border-top: var(--sys-size-1) solid var(--sys-color-divider);
     box-sizing: border-box;
   }
 
@@ -64,7 +64,7 @@
   }
 
   .top-left-corner {
-    border-bottom: 1px solid var(--sys-color-divider);
+    border-bottom: var(--sys-size-1) solid var(--sys-color-divider);
     display: flex;
     flex-wrap: wrap;
     padding: 5px;

package/front_end/panels/browser_debugger/categorizedBreakpointsSidebarPane.css

@@ -6,7 +6,7 @@
 
 :host {
   margin: 0;
-  padding: 2px 4px;
+  padding: var(--sys-size-2) var(--sys-size-3);
   min-height: 18px;
 }
 
@@ -15,12 +15,12 @@
 }
 
 .tree-outline li {
-  margin-left: 14px;
+  margin-left: var(--sys-size-7);
   user-select: text;
 }
 
 .tree-outline li.parent {
-  margin-left: 1px;
+  margin-left: var(--sys-size-1);
 }
 
 .tree-outline li:not(.parent)::before {
@@ -40,7 +40,7 @@
   left: 0;
   margin-left: -30px;
   position: absolute;
-  right: -4px;
+  right: calc(-1 * var(--sys-size-3));
   z-index: -1;
 }
 

package/front_end/panels/browser_debugger/domBreakpointsSidebarPane.css

@@ -34,7 +34,7 @@
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
-    padding: 2px 0;
+    padding: var(--sys-size-2) 0;
   }
 
   .breakpoint-entry:focus-visible {
@@ -56,11 +56,13 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    padding: 20px;
+    padding: var(--sys-size-9);
+    font-style: italic;
+    color: var(--sys-color-token-subtle);
   }
 }
 
-:host-context(.sources.panel) .empty-view-scroller {
+:host-context(.sources.panel) .empty-widget-container {
   display: none;
 }