chrome-devtools-frontend 1.0.1684555 → 1.0.1689415

package/front_end/panels/browser_debugger/xhrBreakpointsSidebarPane.css

@@ -15,15 +15,15 @@
 
 .breakpoint-condition {
   display: block;
-  margin: 4px 8px 4px 23px;
+  margin: var(--sys-size-3) var(--sys-size-5) var(--sys-size-3) 23px;
 }
 
 .breakpoint-condition-input {
   display: block;
   margin-left: 0;
   margin-right: 0;
-  border: 1px solid var(--sys-color-neutral-outline);
-  border-radius: 4px;
+  border: var(--sys-size-1) solid var(--sys-color-neutral-outline);
+  border-radius: var(--sys-shape-corner-extra-small);
 
   &:focus {
     outline: 5px auto var(--sys-color-tonal-outline);
@@ -33,7 +33,7 @@
 
 .breakpoint-entry {
   white-space: nowrap;
-  padding: 2px 0;
+  padding: var(--sys-size-2) 0;
 }
 
 .breakpoint-list .breakpoint-entry:focus-visible {

package/front_end/panels/changes/changesSidebar.css

@@ -6,7 +6,7 @@
 
 @scope to (devtools-widget > *) {
 .tree-outline li {
-  min-height: 20px;
+  min-height: var(--sys-size-9);
 }
 
 devtools-icon {

package/front_end/panels/changes/changesView.css

@@ -34,7 +34,7 @@
 
 .changes-toolbar {
   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);
 }
 
 [hidden] {

package/front_end/panels/changes/combinedDiffView.css

@@ -14,7 +14,7 @@
 
   details {
     flex-shrink: 0;
-    border-radius: 12px;
+    border-radius: var(--sys-shape-corner-medium-small);
 
     &.selected {
       outline: var(--sys-size-2) solid var(--sys-color-divider-on-tonal-container);

package/front_end/panels/common/CPUThrottlingOption.ts

@@ -4,6 +4,11 @@
 
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
+import * as SDK from '../../core/sdk/sdk.js';
+
+export type CalibratedCPUThrottling = SDK.CPUThrottlingManager.CalibratedCPUThrottling;
+export import CalibrationError = SDK.CPUThrottlingManager.CalibrationError;
+export import CPUPerformanceTier = SDK.CPUThrottlingManager.CPUPerformanceTier;
 
 const UIStrings = {
   /**
@@ -107,16 +112,6 @@ function makeCalibratedThrottlingOption(calibratedDeviceType: CalibratedDeviceTy
 export const CalibratedLowTierMobileThrottlingOption = makeCalibratedThrottlingOption('low-tier-mobile');
 export const CalibratedMidTierMobileThrottlingOption = makeCalibratedThrottlingOption('mid-tier-mobile');
 
-export interface CalibratedCPUThrottling {
-  /** Either the CPU multiplier, or an error code for why it could not be determined. */
-  low?: number|CalibrationError;
-  mid?: number|CalibrationError;
-}
-
-export enum CalibrationError {
-  DEVICE_TOO_WEAK = 'DEVICE_TOO_WEAK',
-}
-
 export function calibrationErrorToString(error: CalibrationError): string {
   if (error === CalibrationError.DEVICE_TOO_WEAK) {
     return i18nString(UIStrings.calibrationErrorDeviceTooWeak);

package/front_end/panels/common/badgeNotification.css

@@ -54,8 +54,8 @@
 
   .badge-container {
     margin-right: 10px;
-    min-width: 64px;
-    height: 64px;
+    min-width: var(--sys-size-18);
+    height: var(--sys-size-18);
   }
 
   .badge-image {

package/front_end/panels/common/domLinkifier.css

@@ -13,7 +13,7 @@
     cursor: pointer;
     display: inline;
     pointer-events: auto;
-    outline-offset: 2px;
+    outline-offset: var(--sys-size-2);
 
     /* If the element has lots of classes, don't let the label get too wide */
     text-overflow: ellipsis;

package/front_end/panels/common/gdpSignUpDialog.css

@@ -13,13 +13,13 @@
 
     .gdp-sign-up-dialog-header {
         background-image: var(--image-file-gdp-logo-light);
-        height: 20px;
+        height: var(--sys-size-9);
         background-repeat: no-repeat;
         background-size: contain;
         margin: 0;
 
         &:focus-visible {
-            outline: 2px solid var(--sys-color-state-focus-ring);
+            outline: var(--sys-size-2) solid var(--sys-color-state-focus-ring);
         }
     }
 
@@ -37,7 +37,7 @@
     .section {
         display: flex;
         gap: var(--sys-size-6);
-        padding: 12px 16px 12px 12px;
+        padding: var(--sys-size-6) var(--sys-size-8) var(--sys-size-6) var(--sys-size-6);
         background-color: var(--sys-color-surface4);
         align-self: stretch;
     }

package/front_end/panels/common/geminiRebrandPromoDialog.css

@@ -17,7 +17,7 @@
     }
 
     .title {
-        font-size: 20px;
+        font-size: var(--sys-typescale-headline2-size);
     }
 
     .banner-image {

package/front_end/panels/console/ConsolePrompt.ts

@@ -17,6 +17,7 @@ import * as TextEditor from '../../ui/components/text_editor/text_editor.js';
 import {Icon} from '../../ui/kit/kit.js';
 import * as ObjectUI from '../../ui/legacy/components/object_ui/object_ui.js';
 import * as UI from '../../ui/legacy/legacy.js';
+import * as Settings from '../../ui/settings/settings.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import {ConsolePanel} from './ConsolePanel.js';
@@ -124,7 +125,8 @@ export class ConsolePrompt extends Common.ObjectWrapper.eventMixin<EventTypes, t
     this.element.appendChild(this.promptIcon);
     this.iconThrottler = new Common.Throttler.Throttler(0);
 
-    this.eagerEvalSetting = Common.Settings.Settings.instance().moduleSetting('console-eager-eval');
+    this.eagerEvalSetting =
+        Common.Settings.Settings.instance().resolve(Settings.ConsoleSettings.consoleEagerEvalSettingDescriptor);
     this.eagerEvalSetting.addChangeListener(this.eagerSettingChanged.bind(this));
     this.eagerPreviewElement.classList.toggle('hidden', !this.eagerEvalSetting.get());
 
@@ -134,8 +136,9 @@ export class ConsolePrompt extends Common.ObjectWrapper.eventMixin<EventTypes, t
     const argumentHints = TextEditor.JavaScript.argumentHints();
     this.#argumentHintsState = argumentHints[0];
 
-    const autocompleteOnEnter = TextEditor.Config.DynamicSetting.bool(
-        'console-autocomplete-on-enter', [], TextEditor.Config.conservativeCompletion);
+    const autocompleteOnEnter =
+        TextEditor.Config.DynamicSetting.bool(Settings.ConsoleSettings.consoleAutocompleteOnEnterSettingDescriptor, [],
+                                              TextEditor.Config.conservativeCompletion);
 
     const extensions = [
       CodeMirror.keymap.of(this.editorKeymap()),

package/front_end/panels/console/ConsoleView.ts

@@ -434,10 +434,12 @@ export class ConsoleView extends UI.Widget.VBox implements
     this.showSettingsPaneButton.element.setAttribute(
         'jslog', `${VisualLogging.toggleSubpane('console-settings').track({click: true})}`);
     this.progressToolbarItem = new UI.Toolbar.ToolbarItem(document.createElement('div'));
-    this.groupSimilarSetting = Common.Settings.Settings.instance().moduleSetting('console-group-similar');
+    this.groupSimilarSetting =
+        Common.Settings.Settings.instance().resolve(Settings.ConsoleSettings.consoleGroupSimilarSettingDescriptor);
     this.groupSimilarSetting.addChangeListener(() => this.updateMessageList());
 
-    this.showCorsErrorsSetting = Common.Settings.Settings.instance().moduleSetting('console-shows-cors-errors');
+    this.showCorsErrorsSetting =
+        Common.Settings.Settings.instance().resolve(Settings.ConsoleSettings.consoleShowsCorsErrorsSettingDescriptor);
     this.showCorsErrorsSetting.addChangeListener(() => this.updateMessageList());
 
     const toolbar = this.consoleToolbarContainer.createChild('devtools-toolbar', 'console-main-toolbar');
@@ -494,7 +496,8 @@ export class ConsoleView extends UI.Widget.VBox implements
     UI.ARIAUtils.setLabel(settingsPane, i18nString(UIStrings.consoleSettings));
     UI.ARIAUtils.markAsGroup(settingsPane);
 
-    const consoleEagerEvalSetting = Common.Settings.Settings.instance().moduleSetting('console-eager-eval');
+    const consoleEagerEvalSetting =
+        Common.Settings.Settings.instance().resolve(Settings.ConsoleSettings.consoleEagerEvalSettingDescriptor);
     const preserveConsoleLogSetting =
         Common.Settings.Settings.instance().resolve(SDK.SDKSettings.preserveConsoleLogSettingDescriptor);
     const userActivationEvalSetting =

package/front_end/panels/console/ConsoleViewMessage.ts

@@ -688,7 +688,9 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
 
     clickableElement.addEventListener('click', toggleStackTrace, false);
     if (this.message.type === Protocol.Runtime.ConsoleAPICalledEventType.Trace &&
-        Common.Settings.Settings.instance().moduleSetting('console-trace-expand').get()) {
+        Common.Settings.Settings.instance()
+            .resolve(Settings.ConsoleSettings.consoleTraceExpandSettingDescriptor)
+            .get()) {
       this.expandTrace(true);
     }
 

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

@@ -330,13 +330,9 @@ SettingsUI.SettingUIRegistration.register(SettingsUI.ConsoleSettings.consoleHist
   ],
 });
 
-Common.Settings.registerSettingExtension({
+SettingsUI.SettingUIRegistration.register(SettingsUI.ConsoleSettings.consoleAutocompleteOnEnterSettingDescriptor, {
   category: Common.Settings.SettingCategory.CONSOLE,
-  storageType: Common.Settings.SettingStorageType.SYNCED,
   title: i18nLazyString(UIStrings.autocompleteOnEnter),
-  settingName: 'console-autocomplete-on-enter',
-  settingType: Common.Settings.SettingType.BOOLEAN,
-  defaultValue: false,
   options: [
     {
       value: true,
@@ -349,13 +345,9 @@ Common.Settings.registerSettingExtension({
   ],
 });
 
-Common.Settings.registerSettingExtension({
+SettingsUI.SettingUIRegistration.register(SettingsUI.ConsoleSettings.consoleGroupSimilarSettingDescriptor, {
   category: Common.Settings.SettingCategory.CONSOLE,
-  storageType: Common.Settings.SettingStorageType.SYNCED,
   title: i18nLazyString(UIStrings.groupSimilarMessages),
-  settingName: 'console-group-similar',
-  settingType: Common.Settings.SettingType.BOOLEAN,
-  defaultValue: true,
   options: [
     {
       value: true,
@@ -368,12 +360,9 @@ Common.Settings.registerSettingExtension({
   ],
 });
 
-Common.Settings.registerSettingExtension({
+SettingsUI.SettingUIRegistration.register(SettingsUI.ConsoleSettings.consoleShowsCorsErrorsSettingDescriptor, {
   category: Common.Settings.SettingCategory.CONSOLE,
   title: i18nLazyString(UIStrings.corsErrorsInConsole),
-  settingName: 'console-shows-cors-errors',
-  settingType: Common.Settings.SettingType.BOOLEAN,
-  defaultValue: true,
   options: [
     {
       value: true,
@@ -386,13 +375,9 @@ Common.Settings.registerSettingExtension({
   ],
 });
 
-Common.Settings.registerSettingExtension({
+SettingsUI.SettingUIRegistration.register(SettingsUI.ConsoleSettings.consoleEagerEvalSettingDescriptor, {
   category: Common.Settings.SettingCategory.CONSOLE,
-  storageType: Common.Settings.SettingStorageType.SYNCED,
   title: i18nLazyString(UIStrings.eagerEvaluation),
-  settingName: 'console-eager-eval',
-  settingType: Common.Settings.SettingType.BOOLEAN,
-  defaultValue: true,
   options: [
     {
       value: true,
@@ -420,13 +405,9 @@ SettingsUI.SettingUIRegistration.register(SDK.SDKSettings.consoleUserActivationE
   ],
 });
 
-Common.Settings.registerSettingExtension({
+SettingsUI.SettingUIRegistration.register(SettingsUI.ConsoleSettings.consoleTraceExpandSettingDescriptor, {
   category: Common.Settings.SettingCategory.CONSOLE,
-  storageType: Common.Settings.SettingStorageType.SYNCED,
   title: i18nLazyString(UIStrings.expandConsoleTraceMessagesByDefault),
-  settingName: 'console-trace-expand',
-  settingType: Common.Settings.SettingType.BOOLEAN,
-  defaultValue: true,
   options: [
     {
       value: true,

package/front_end/panels/console/consoleContextSelector.css

@@ -6,7 +6,7 @@
 
 .widget {
   .console-context-selector-element{
-    padding: 2px 1px 2px 2px;
+    padding: var(--sys-size-2) var(--sys-size-1) var(--sys-size-2) var(--sys-size-2);
     white-space: nowrap;
     display: flex;
     flex-direction: column;
@@ -30,7 +30,7 @@
 
     .badge {
       pointer-events: none;
-      margin-right: 4px;
+      margin-right: var(--sys-size-3);
       display: inline-block;
       height: 15px;
     }

package/front_end/panels/console/consolePinPane.css

@@ -19,18 +19,18 @@
 }
 
 .console-pins:not(:empty) {
-  border-bottom: 1px solid var(--sys-color-divider);
+  border-bottom: var(--sys-size-1) solid var(--sys-color-divider);
 }
 
 .console-pin {
   position: relative;
   user-select: text;
   flex: none;
-  padding: 2px 0 6px 24px;
+  padding: var(--sys-size-2) 0 var(--sys-size-4) var(--sys-size-11);
 }
 
 .console-pin:not(:last-child) {
-  border-bottom: 1px solid var(--sys-color-divider);
+  border-bottom: var(--sys-size-1) solid var(--sys-color-divider);
 }
 
 .console-pin.error-level:not(:focus-within) {
@@ -39,14 +39,14 @@
 }
 
 .console-pin:not(:last-child).error-level:not(:focus-within) {
-  border-top: 1px solid var(--sys-color-error-outline);
-  border-bottom: 1px solid var(--sys-color-error-outline);
-  margin-top: -1px;
+  border-top: var(--sys-size-1) solid var(--sys-color-error-outline);
+  border-bottom: var(--sys-size-1) solid var(--sys-color-error-outline);
+  margin-top: calc(-1 * var(--sys-size-1));
 }
 
 .console-pin-name {
   margin-left: -5px;
-  margin-bottom: 1px;
+  margin-bottom: var(--sys-size-1);
   height: auto;
 }
 
@@ -64,8 +64,8 @@
 
 .console-pin-name:focus-within {
   background: var(--sys-color-cdt-base-container);
-  border-radius: 4px;
-  border: 1px solid var(--sys-color-state-focus-ring);
+  border-radius: var(--sys-shape-corner-extra-small);
+  border: var(--sys-size-1) solid var(--sys-color-state-focus-ring);
 }
 
 .console-pin:focus-within .console-pin-preview,

package/front_end/panels/console/consolePrompt.css

@@ -19,13 +19,13 @@
 #console-prompt .console-prompt-icon {
   position: absolute;
   left: -9px;
-  top: 4px;
+  top: var(--sys-size-3);
   user-select: none;
 }
 
 .console-eager-preview {
-  padding-bottom: 2px;
-  margin-left: 4px;
+  padding-bottom: var(--sys-size-2);
+  margin-left: var(--sys-size-3);
   opacity: 60%;
   position: relative;
 }
@@ -33,7 +33,7 @@
 .console-eager-inner-preview {
   text-overflow: ellipsis;
   overflow: hidden;
-  margin-left: 4px;
+  margin-left: var(--sys-size-3);
   height: 100%;
   white-space: nowrap;
 }
@@ -41,7 +41,7 @@
 .preview-result-icon {
   position: absolute;
   left: -13px;
-  top: -1px;
+  top: calc(-1 * var(--sys-size-1));
 }
 
 .console-eager-inner-preview:empty,

package/front_end/panels/console/consoleView.css

@@ -59,7 +59,7 @@
 
 .console-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);
 }
 
 .console-view-fix-select-all {
@@ -72,7 +72,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);
 }
 
 #console-messages {
@@ -88,21 +88,21 @@
 #console-prompt {
   clear: right;
   position: relative;
-  margin: 0 22px 0 20px;
+  margin: 0 var(--sys-size-10) 0 var(--sys-size-9);
 }
 
 .console-prompt-editor-container {
   min-height: 21px;
-  padding-left: 2px;
-  padding-top: 1px;
+  padding-left: var(--sys-size-2);
+  padding-top: var(--sys-size-1);
 }
 
 .console-message,
 .console-user-command {
   clear: right;
   position: relative;
-  padding: 1px 22px 1px 0;
-  margin-left: 24px;
+  padding: var(--sys-size-1) var(--sys-size-10) var(--sys-size-1) 0;
+  margin-left: var(--sys-size-11);
   min-height: 18px;
   flex: auto;
   display: flex;
@@ -124,7 +124,7 @@
 .command-result-icon {
   position: absolute;
   left: -17px;
-  top: 2px;
+  top: var(--sys-size-2);
   user-select: none;
 }
 
@@ -134,7 +134,7 @@
 }
 
 .repeated-message {
-  margin-left: 4px;
+  margin-left: var(--sys-size-3);
 }
 
 .repeated-message .message-level-icon {
@@ -145,7 +145,7 @@
   display: flex;
   flex-direction: row;
   align-items: flex-start;
-  margin-top: -1px;
+  margin-top: calc(-1 * var(--sys-size-1));
 }
 
 .console-error-level .repeated-message,
@@ -158,11 +158,11 @@
 .console-info {
   color: var(--sys-color-token-subtle);
   font-style: italic;
-  padding-bottom: 2px;
+  padding-bottom: var(--sys-size-2);
 }
 
 .console-group .console-group > .console-group-messages {
-  margin-left: 16px;
+  margin-left: var(--sys-size-8);
 }
 
 .console-group-title.console-from-api {
@@ -170,16 +170,16 @@
 }
 
 .console-group-title .console-message {
-  margin-left: 12px;
+  margin-left: var(--sys-size-6);
 }
 
 .expand-group-icon {
   user-select: none;
   flex: none;
   position: relative;
-  left: 8px;
+  left: var(--sys-size-5);
   top: 3px;
-  margin-right: 2px;
+  margin-right: var(--sys-size-2);
 }
 
 .console-group-title .message-level-icon {
@@ -189,7 +189,7 @@
 .console-message-repeat-count .expand-group-icon {
   position: static;
   color: var(--sys-color-cdt-base-container);
-  margin-left: -1px;
+  margin-left: calc(-1 * var(--sys-size-1));
 }
 
 .console-group {
@@ -199,7 +199,7 @@
 .console-message-wrapper {
   display: flex;
   flex-direction: column;
-  margin: 4px;
+  margin: var(--sys-size-3);
   border-radius: 5px;
 
   /* Console ANSI color */
@@ -263,8 +263,8 @@
     content: "";
     display: block;
     position: absolute;
-    top: -2px;
-    border-top: 1px solid var(--sys-color-divider);
+    top: calc(-1 * var(--sys-size-2));
+    border-top: var(--sys-size-1) solid var(--sys-color-divider);
   }
 
   &:first-of-type .console-message::before,
@@ -282,12 +282,12 @@
 }
 
 .console-message-wrapper.console-adjacent-user-command-result:not(.console-error-level, .console-warning-level):focus {
-  border-top-width: 1px;
+  border-top-width: var(--sys-size-1);
 }
 
 .console-message-wrapper.console-adjacent-user-command-result:not(.console-error-level, .console-warning-level):focus .console-message {
-  padding-top: 2px;
-  min-height: 16px;
+  padding-top: var(--sys-size-2);
+  min-height: var(--sys-size-8);
 }
 
 .console-message-wrapper.console-adjacent-user-command-result:not(.console-error-level, .console-warning-level):focus .command-result-icon {
@@ -295,11 +295,11 @@
 }
 
 .console-message-wrapper .nesting-level-marker {
-  width: 14px;
+  width: var(--sys-size-7);
   flex: 0 0 auto;
   position: relative;
-  margin-bottom: -1px;
-  margin-top: -1px;
+  margin-bottom: calc(-1 * var(--sys-size-1));
+  margin-top: calc(-1 * var(--sys-size-1));
   background-color: var(--sys-color-cdt-base-container);
 }
 
@@ -307,7 +307,7 @@
   position: absolute;
   left: -30px;
   top: 0;
-  width: 6px;
+  width: var(--sys-size-4);
   height: 100%;
   box-sizing: border-box;
   background-color: var(--sys-color-surface-yellow);
@@ -381,8 +381,8 @@
 }
 
 #console-messages .resource-links {
-  margin-top: -1px;
-  margin-bottom: -2px;
+  margin-top: calc(-1 * var(--sys-size-1));
+  margin-bottom: calc(-1 * var(--sys-size-2));
 }
 
 .console-object-preview,
@@ -490,7 +490,7 @@
   float: right;
   text-align: right;
   max-width: 100%;
-  margin-left: 4px;
+  margin-left: var(--sys-size-3);
 }
 
 .console-message-nowrap-below,
@@ -507,7 +507,7 @@
   text-align: center;
   border-radius: 3px;
   line-height: 13px;
-  margin: 0 6px;
+  margin: 0 var(--sys-size-4);
   font-size: 9px;
 }
 
@@ -521,7 +521,7 @@
 }
 
 .console-message-expand-icon {
-  margin-bottom: -4px;
+  margin-bottom: calc(-1 * var(--sys-size-3));
 }
 
 .console-searchable-view {
@@ -541,11 +541,11 @@
 }
 
 .devtools-console-insight {
-  margin: 9px 22px 11px 24px;
+  margin: 9px var(--sys-size-10) 11px var(--sys-size-11);
 }
 
 .hover-button {
-  --width: 24px;
+  --width: var(--sys-size-11);
 
   align-items: center;
   border-radius: 50%;
@@ -566,13 +566,13 @@
   overflow: hidden;
   padding: var(--sys-size-3) var(--sys-size-4);
   position: absolute;
-  right: 6px;
+  right: var(--sys-size-4);
   display: none;
   width: var(--width);
   z-index: 1;
 
   .theme-with-dark-background & {
-    border: 1px solid var(--sys-color-neutral-outline);
+    border: var(--sys-size-1) solid var(--sys-color-neutral-outline);
     background-color: var(--sys-color-primary);
     color: var(--sys-color-on-primary);
   }
@@ -595,7 +595,7 @@
 
 .hover-button:focus,
 .hover-button:hover {
-  border-radius: 4px;
+  border-radius: var(--sys-shape-corner-extra-small);
   max-width: 200px;
   transition:
     max-width var(--sys-motion-duration-short4) var(--sys-motion-easing-emphasized),
@@ -605,8 +605,8 @@
 }
 
 .hover-button:focus-visible {
-  outline: 2px solid var(--sys-color-primary);
-  outline-offset: 2px;
+  outline: var(--sys-size-2) solid var(--sys-color-primary);
+  outline-offset: var(--sys-size-2);
 }
 
 .button-label {
@@ -616,7 +616,7 @@
 
   & div {
     display: inline-block;
-    vertical-align: -1px;
+    vertical-align: calc(-1 * var(--sys-size-1));
 
     &::after {
       content: attr(data-text);

package/front_end/panels/coverage/coverageListView.css

@@ -30,8 +30,8 @@
 
   .data-grid td .bar {
     display: inline-block;
-    height: 8px;
-    border: 1px solid transparent;
+    height: var(--sys-size-5);
+    border: var(--sys-size-1) solid transparent;
   }
 
   .data-grid td .bar-unused-size {