chrome-devtools-frontend 1.0.1684555 → 1.0.1689415

package/front_end/panels/sensors/sensors.css

@@ -5,7 +5,7 @@
  */
 
 .sensors-view {
-  padding: 12px;
+  padding: var(--sys-size-6);
   display: block;
 }
 
@@ -60,8 +60,8 @@
 }
 
 .sensors-group-title {
-  width: 80px;
-  line-height: 24px;
+  width: var(--sys-size-19);
+  line-height: var(--sys-typescale-body1-line-height);
 }
 
 .sensors-group {
@@ -110,7 +110,7 @@
 
   perspective: 700px;
   perspective-origin: 50% 50%;
-  width: 160px;
+  width: var(--sys-size-23);
   height: 150px;
   background: linear-gradient(var(--override-gradient-color-1) 0%, var(--override-gradient-color-1) 64%, var(--override-gradient-color-2) 64%, var(--override-gradient-color-1) 100%);
   transition: 0.2s ease opacity, 0.2s ease filter;
@@ -163,7 +163,7 @@
 .orientation-back {
   width: 62px;
   height: 122px;
-  border-radius: 8px;
+  border-radius: var(--sys-shape-corner-small);
 }
 
 .orientation-front {
@@ -177,21 +177,21 @@
 
 .orientation-left,
 .orientation-right {
-  width: 8px;
+  width: var(--sys-size-5);
   height: 106px;
-  top: 8px;
+  top: var(--sys-size-5);
   background-position: center center;
 }
 
 .orientation-left {
-  left: -8px;
+  left: calc(-1 * var(--sys-size-5));
   transform-origin: right center;
   transform: rotateY(-90deg);
   background-image: var(--image-file-accelerometer-left);
 }
 
 .orientation-right {
-  right: -8px;
+  right: calc(-1 * var(--sys-size-5));
   transform-origin: left center;
   transform: rotateY(90deg);
   background-image: var(--image-file-accelerometer-right);
@@ -202,8 +202,8 @@
 .orientation-right::before,
 .orientation-right::after {
   content: "";
-  width: 8px;
-  height: 6px;
+  width: var(--sys-size-5);
+  height: var(--sys-size-4);
 }
 
 .orientation-left::before,
@@ -218,7 +218,7 @@
 
 .orientation-left::before,
 .orientation-right::before {
-  top: -6px;
+  top: calc(-1 * var(--sys-size-4));
   transform-origin: center bottom;
   transform: rotateX(26deg);
   background-position: center top;
@@ -226,7 +226,7 @@
 
 .orientation-left::after,
 .orientation-right::after {
-  bottom: -6px;
+  bottom: calc(-1 * var(--sys-size-4));
   transform-origin: center top;
   transform: rotateX(-25deg);
   background-position: center bottom;
@@ -235,20 +235,20 @@
 .orientation-top,
 .orientation-bottom {
   width: 50px;
-  height: 8px;
-  left: 8px;
+  height: var(--sys-size-5);
+  left: var(--sys-size-5);
   background-position: center center;
 }
 
 .orientation-top {
-  top: -8px;
+  top: calc(-1 * var(--sys-size-5));
   transform-origin: center bottom;
   transform: rotateX(90deg);
   background-image: var(--image-file-accelerometer-top);
 }
 
 .orientation-bottom {
-  bottom: -8px;
+  bottom: calc(-1 * var(--sys-size-5));
   transform-origin: center top;
   transform: rotateX(-90deg);
   background-image: var(--image-file-accelerometer-bottom);
@@ -259,8 +259,8 @@
 .orientation-bottom::before,
 .orientation-bottom::after {
   content: "";
-  width: 8px;
-  height: 8px;
+  width: var(--sys-size-5);
+  height: var(--sys-size-5);
 }
 
 .orientation-top::before,
@@ -275,7 +275,7 @@
 
 .orientation-top::before,
 .orientation-bottom::before {
-  left: -6px;
+  left: calc(-1 * var(--sys-size-4));
   transform-origin: right center;
   transform: rotateY(-26deg);
   background-position: left center;
@@ -283,7 +283,7 @@
 
 .orientation-top::after,
 .orientation-bottom::after {
-  right: -6px;
+  right: calc(-1 * var(--sys-size-4));
   transform-origin: left center;
   transform: rotateY(26deg);
   background-position: right center;
@@ -294,7 +294,7 @@
 }
 
 .orientation-reset-button {
-  min-width: 80px;
+  min-width: var(--sys-size-19);
 }
 
 fieldset.device-orientation-override-section {
@@ -303,15 +303,15 @@ fieldset.device-orientation-override-section {
 }
 
 .panel-section-separator {
-  height: 1px;
-  margin-bottom: 20px;
-  margin-left: -12px;
-  margin-right: -12px;
+  height: var(--sys-size-1);
+  margin-bottom: var(--sys-size-9);
+  margin-left: calc(-1 * var(--sys-size-6));
+  margin-right: calc(-1 * var(--sys-size-6));
   background: var(--sys-color-divider);
 }
 
 button.text-button {
-  margin: 4px 0 0 10px;
+  margin: var(--sys-size-3) 0 0 10px;
 }
 
 @media (forced-colors: active) {
@@ -321,5 +321,5 @@ button.text-button {
 }
 
 .chrome-select-label {
-  margin-bottom: 16px;
+  margin-bottom: var(--sys-size-8);
 }

package/front_end/panels/settings/components/syncSection.css

@@ -15,14 +15,14 @@
   fieldset {
     border: 0;
     padding: 0;
-    padding: 4px 0 0;
+    padding: var(--sys-size-3) 0 0;
   }
 
   .link {
     color: var(--sys-color-primary);
     text-decoration: underline;
     cursor: pointer;
-    outline-offset: 2px;
+    outline-offset: var(--sys-size-2);
   }
 
   .account-avatar {
@@ -41,11 +41,11 @@
   .account-email {
     display: flex;
     flex-direction: column;
-    margin-left: 8px;
+    margin-left: var(--sys-size-5);
   }
 
   .not-signed-in {
-    padding-bottom: 4px;
+    padding-bottom: var(--sys-size-3);
   }
 
   .setting-checkbox-container {
@@ -111,7 +111,7 @@
   }
 
   .gdp-profile-container .gdp-profile-details-content .setting-container {
-    margin: calc(var(--sys-size-3) - 6px) 0 -6px;
+    margin: calc(var(--sys-size-3) - var(--sys-size-4)) 0 calc(-1 * var(--sys-size-4));
     display: flex;
     align-items: center;
     gap: var(--sys-size-2);

package/front_end/panels/settings/emulation/components/userAgentClientHintsForm.css

@@ -37,7 +37,7 @@
   display: grid;
   grid-template-columns: 1fr 1fr 1fr auto;
   align-items: center;
-  gap: 8px 10px;
+  gap: var(--sys-size-5) 10px;
   padding: 0 10px;
 }
 
@@ -48,20 +48,20 @@
 .form-factors-checkbox-group {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
-  gap: 6px 10px;
+  gap: var(--sys-size-4) 10px;
 }
 
 .form-factor-checkbox-label {
   display: flex;
   align-items: center;
-  gap: 6px;
+  gap: var(--sys-size-4);
   white-space: nowrap;
 }
 
 hr.section-separator {
   grid-column: 1 / 5; /* Ensures the separator spans all columns */
   border: none;
-  margin-top: 1px;
+  margin-top: var(--sys-size-1);
 }
 
 .half-row {
@@ -78,9 +78,9 @@ hr.section-separator {
 
 .input-field {
   color: var(--sys-color-on-surface);
-  padding: 3px 6px;
-  border-radius: 2px;
-  border: 1px solid var(--sys-color-neutral-outline);
+  padding: 3px var(--sys-size-4);
+  border-radius: var(--sys-size-2);
+  border: var(--sys-size-1) solid var(--sys-color-neutral-outline);
   background-color: var(--sys-color-cdt-base-container);
   font-size: inherit;
   height: 18px;
@@ -91,7 +91,7 @@ hr.section-separator {
 }
 
 .input-field:focus {
-  border: 1px solid var(--sys-color-state-focus-ring);
+  border: var(--sys-size-1) solid var(--sys-color-state-focus-ring);
   outline-style: none;
 }
 
@@ -99,7 +99,7 @@ hr.section-separator {
   cursor: pointer;
   display: flex;
   align-items: center;
-  gap: 6px;
+  gap: var(--sys-size-4);
 }
 
 .add-icon {
@@ -119,7 +119,7 @@ hr.section-separator {
 
 .info-icon {
   margin-left: 5px;
-  margin-right: 1px;
+  margin-right: var(--sys-size-1);
   height: var(--sys-size-8);
   width: var(--sys-size-8);
 }
@@ -129,12 +129,12 @@ hr.section-separator {
   color: var(--sys-color-primary);
   text-decoration: underline;
   cursor: pointer;
-  outline-offset: 2px;
+  outline-offset: var(--sys-size-2);
   font-weight: 400;
 }
 
 devtools-icon + .link {
-  margin-inline-start: 2px;
+  margin-inline-start: var(--sys-size-2);
 }
 
 .hide-container {
@@ -149,7 +149,7 @@ devtools-icon + .link {
 
 @media (forced-colors: active) {
   .input-field {
-    border: 1px solid;
+    border: var(--sys-size-1) solid;
   }
 
   .tree-title[aria-disabled="true"] {

package/front_end/panels/settings/emulation/devicesSettingsTab.css

@@ -10,16 +10,16 @@
 }
 
 .device-group-container {
-  margin-bottom: 8px;
+  margin-bottom: var(--sys-size-5);
 }
 
 .device-group-title {
   font-weight: 600;
   color: var(--sys-color-on-surface-subtle);
-  font-size: 11px;
+  font-size: var(--sys-typescale-body5-size);
   text-transform: uppercase;
   letter-spacing: 0.5px;
-  margin: 12px 0 4px;
+  margin: var(--sys-size-6) 0 var(--sys-size-3);
 }
 
 .list {
@@ -37,7 +37,7 @@
   display: flex;
 
   devtools-button {
-    margin: 4px 0 0 5px;
+    margin: var(--sys-size-3) 0 0 5px;
   }
 }
 
@@ -60,9 +60,9 @@
 }
 
 .devices-list-checkbox {
-  height: 12px;
-  width: 12px;
-  margin: 2px 5px 2px 2px;
+  height: var(--sys-size-6);
+  width: var(--sys-size-6);
+  margin: var(--sys-size-2) 5px var(--sys-size-2) var(--sys-size-2);
   flex: none;
   pointer-events: none;
 }
@@ -78,7 +78,7 @@
   display: flex;
   flex-direction: column;
   align-items: stretch;
-  padding-left: 4px;
+  padding-left: var(--sys-size-3);
   margin-bottom: 5px;
 }
 
@@ -88,7 +88,7 @@
 }
 
 .devices-edit-fields b {
-  margin-top: 8px;
+  margin-top: var(--sys-size-5);
   margin-bottom: 0;
 }
 
@@ -107,12 +107,12 @@ li .devices-edit-client-hints-heading {
 }
 
 .devices-edit-client-hints-heading b {
-  margin-inline-end: 2px;
+  margin-inline-end: var(--sys-size-2);
 }
 
 .devices-edit-client-hints-heading .help-icon {
-  margin-left: 2px;
-  margin-right: 2px;
+  margin-left: var(--sys-size-2);
+  margin-right: var(--sys-size-2);
   vertical-align: middle;
 }
 
@@ -122,17 +122,17 @@ li .devices-edit-client-hints-heading {
 
 .devices-edit-fields input {
   flex: auto;
-  margin: 8px 5px 0;
+  margin: var(--sys-size-5) 5px 0;
 }
 
 li.devices-edit-client-hints-field {
   /* Cancel out padding from treeview's .tree-outline ol */
-  left: -12px;
+  left: calc(-1 * var(--sys-size-6));
 }
 
 .devices-edit-client-hints-field input {
   flex: auto;
-  margin: 8px 5px 0;
+  margin: var(--sys-size-5) 5px 0;
 }
 
 .devices-edit-fields .device-edit-fixed {
@@ -140,5 +140,5 @@ li.devices-edit-client-hints-field {
 }
 
 .devices-edit-fields select {
-  margin: 8px 5px 0;
+  margin: var(--sys-size-5) 5px 0;
 }

package/front_end/panels/settings/frameworkIgnoreListSettingsTab.css

@@ -67,7 +67,7 @@
   flex: none;
   display: flex;
   flex-direction: row;
-  margin: 6px 5px;
+  margin: var(--sys-size-4) 5px;
   align-items: center;
 }
 
@@ -93,5 +93,5 @@
 }
 
 .devtools-link:has(devtools-icon) {
-  margin-left: 6px;
+  margin-left: var(--sys-size-4);
 }

package/front_end/panels/settings/keybindsSettingsTab.css

@@ -126,7 +126,7 @@ button.text-button {
 }
 
 .keybinds-list-text input {
-  margin: 0 2px;
+  margin: 0 var(--sys-size-2);
 }
 
 .keybinds-set-select {
@@ -155,7 +155,7 @@ button.text-button {
   align-self: flex-start;
   min-height: 2em;
   line-height: 2em;
-  margin-bottom: 4px;
+  margin-bottom: var(--sys-size-3);
 }
 
 .keybinds-footer {

package/front_end/panels/settings/settingsScreen.css

@@ -11,8 +11,8 @@
 
 .settings-content {
   overflow: hidden auto;
-  margin: 8px 8px 8px 0;
-  padding: 0 4px;
+  margin: var(--sys-size-5) var(--sys-size-5) var(--sys-size-5) 0;
+  padding: 0 var(--sys-size-3);
   flex: auto;
 }
 
@@ -27,7 +27,7 @@ fieldset {
 }
 
 label {
-  padding-right: 8px;
+  padding-right: var(--sys-size-5);
 }
 
 .experiments-filter {
@@ -149,7 +149,7 @@ devtools-button.link-icon {
 .settings-experiment .feedback-link {
   color: var(--sys-color-primary);
   text-decoration-line: underline;
-  margin-left: 4px;
+  margin-left: var(--sys-size-3);
 }
 
 .tabbed-pane-content slot::slotted(.widget) {
@@ -193,5 +193,5 @@ devtools-button.link-icon {
 }
 
 .greendev-widgets input[type="radio"] {
-  margin: 6px;
+  margin: var(--sys-size-4);
 }

package/front_end/panels/sources/UISourceCodeFrame.ts

@@ -8,7 +8,7 @@ import * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as TextUtils from '../../core/text_utils/text_utils.js';
-import * as FormatterActions from '../../entrypoints/formatter_worker/FormatterActions.js';  // eslint-disable-line @devtools/es-modules-import
+import * as FormatterActions from '../../entrypoints/formatter_actions/formatter_actions.js';
 import * as AiCodeCompletion from '../../models/ai_code_completion/ai_code_completion.js';
 import * as Formatter from '../../models/formatter/formatter.js';
 import * as IssuesManager from '../../models/issues_manager/issues_manager.js';

package/front_end/panels/sources/breakpointEditDialog.css

@@ -6,10 +6,10 @@
 
 :host {
   z-index: 30;
-  padding: 4px;
+  padding: var(--sys-size-3);
   background-color: var(--sys-color-surface3);
   border-radius: 7px;
-  border: 2px solid var(--sys-color-divider);
+  border: var(--sys-size-2) solid var(--sys-color-divider);
   width: 90%;
   pointer-events: auto;
 }
@@ -20,25 +20,25 @@
   background-color: var(--sys-color-surface3);
   width: 555px;
   pointer-events: auto;
-  margin-left: -1px;
+  margin-left: calc(-1 * var(--sys-size-1));
   padding: 0 10px 10px 5px;
-  border: 1px solid var(--sys-color-divider);
+  border: var(--sys-size-1) solid var(--sys-color-divider);
 }
 
 :host-context(.sources-edit-breakpoint-dialog) .condition-editor {
   background-color: var(--sys-color-cdt-base-container);
-  margin: 0 6px 20px 3px;
+  margin: 0 var(--sys-size-4) var(--sys-size-9) 3px;
 }
 
 :host-context(.sources-edit-breakpoint-dialog) .source-frame-breakpoint-toolbar {
   font-family: var(--default-font-family);
-  font-size: 12px;
+  font-size: var(--sys-typescale-body4-size);
 }
 
 :host-context(.sources-edit-breakpoint-dialog) .link,
 .devtools-link {
   font-family: var(--default-font-family);
-  font-size: 12px;
+  font-size: var(--sys-typescale-body4-size);
   margin: 0 3px;
 }
 
@@ -46,8 +46,8 @@
   vertical-align: sub;
   margin-right: 0.5ch;
   color: var(--icon-link);
-  width: 16px;
-  height: 16px;
+  width: var(--sys-size-8);
+  height: var(--sys-size-8);
 }
 
 :host-context(.sources-edit-breakpoint-dialog) .link-wrapper {

package/front_end/panels/sources/breakpointsView.css

@@ -28,15 +28,15 @@
   }
 
   input {
-    height: 12px;
-    width: 12px;
+    height: var(--sys-size-6);
+    width: var(--sys-size-6);
     flex-shrink: 0;
     margin: 3px 0;
   }
 
   details {
-    border-top: 1px solid var(--sys-color-divider);
-    padding: 2px 0;
+    border-top: var(--sys-size-1) solid var(--sys-color-divider);
+    padding: var(--sys-size-2) 0;
   }
 
   details:not(.active) {
@@ -45,10 +45,10 @@
   }
 
   details > summary {
-    min-height: 20px;
+    min-height: var(--sys-size-9);
     list-style: none;
     display: flex;
-    padding: 0 8px 0 6px;
+    padding: 0 var(--sys-size-5) 0 var(--sys-size-4);
     align-items: center;
   }
 
@@ -78,19 +78,19 @@
     display: inline-flex;
     align-items: center;
     width: 100%;
-    padding-right: 8px;
+    padding-right: var(--sys-size-5);
     overflow: hidden;
   }
 
   .group-icon-or-disable {
     justify-content: center;
     display: flex;
-    width: 16px;
-    margin-left: 2px;
+    width: var(--sys-size-8);
+    margin-left: var(--sys-size-2);
   }
 
   .group-header-title {
-    margin-left: 4px;
+    margin-left: var(--sys-size-3);
     text-overflow: ellipsis;
     overflow: hidden;
     white-space: nowrap;
@@ -99,7 +99,7 @@
   .group-header-differentiator {
     font-weight: normal;
     color: var(--sys-color-state-disabled);
-    margin-left: 8px;
+    margin-left: var(--sys-size-5);
   }
 
   .group-hover-actions {
@@ -111,10 +111,10 @@
   }
 
   .breakpoint-item-location-or-actions {
-    min-width: 20px;
+    min-width: var(--sys-size-9);
     flex: 0 0 auto;
     display: flex;
-    padding-left: 8px;
+    padding-left: var(--sys-size-5);
     justify-content: right;
   }
 
@@ -130,7 +130,7 @@
   }
 
   button + span {
-    padding-left: 6px;
+    padding-left: var(--sys-size-4);
   }
 
   button + button {
@@ -142,8 +142,8 @@
   }
 
   devtools-icon {
-    width: 16px;
-    height: 16px;
+    width: var(--sys-size-8);
+    height: var(--sys-size-8);
 
     button:hover & {
       color: var(--icon-default-hover);
@@ -154,18 +154,18 @@
     --override-color-conditional-breakpoint: var(--ref-palette-orange70);
     --override-color-logpoint: var(--ref-palette-pink60);
 
-    border-right: 4px solid;
-    border-radius: 0 2px 2px 0;
+    border-right: var(--sys-size-3) solid;
+    border-radius: 0 var(--sys-size-2) var(--sys-size-2) 0;
     border-color: transparent;
-    height: 16px;
+    height: var(--sys-size-8);
   }
 
   .breakpoint-item {
     display: flex;
     align-items: center;
     line-height: 13px;
-    height: 20px;
-    padding-right: 8px;
+    height: var(--sys-size-9);
+    padding-right: var(--sys-size-5);
   }
 
   .breakpoint-item.hit {
@@ -197,8 +197,8 @@
   }
 
   .checkbox-label > input {
-    margin-left: 16px;
-    margin-right: 6px;
+    margin-left: var(--sys-size-8);
+    margin-right: var(--sys-size-4);
   }
 
   devtools-icon[name="file-script"] {
@@ -245,7 +245,7 @@
 
   .pause-on-caught-exceptions > .checkbox-label > input,
   .pause-on-uncaught-exceptions > .checkbox-label > input {
-    margin-left: 6px;
+    margin-left: var(--sys-size-4);
   }
 
   .pause-on-caught-exceptions > .checkbox-label > span,
@@ -259,7 +259,7 @@
   .pause-on-caught-exceptions {
     line-height: 13px;
     height: 18px;
-    padding-right: 8px;
+    padding-right: var(--sys-size-5);
 
     & > label {
       width: fit-content;