chrome-devtools-frontend 1.0.1683520 → 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

@@ -58,7 +58,7 @@ import objectValueStyles from '../../ui/legacy/components/object_ui/objectValue.
 import * as SettingsUI from '../../ui/legacy/components/settings_ui/settings_ui.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
-import * as SettingUIRegistration from '../../ui/settings/settings.js';
+import * as Settings from '../../ui/settings/settings.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 import {AiCodeCompletionSummaryToolbar} from '../common/common.js';
 
@@ -316,7 +316,7 @@ export class ConsoleView extends UI.Widget.VBox implements
   private readonly progressToolbarItem: UI.Toolbar.ToolbarItem;
   private readonly groupSimilarSetting: Common.Settings.Setting<boolean>;
   private readonly showCorsErrorsSetting: Common.Settings.Setting<boolean>;
-  private readonly timestampsSetting: Common.Settings.Setting<unknown>;
+  private readonly timestampsSetting: Common.Settings.Setting<boolean>;
   private readonly consoleHistoryAutocompleteSetting: Common.Settings.Setting<boolean>;
   private selfXssWarningDisabledSetting: Common.Settings.Setting<boolean>;
   readonly pinPane: ConsolePinPane;
@@ -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');
@@ -483,9 +485,10 @@ export class ConsoleView extends UI.Widget.VBox implements
 
     const monitoringXHREnabledSetting =
         Common.Settings.Settings.instance().resolve(SDK.SDKSettings.monitoringXHREnabledSettingDescriptor);
-    this.timestampsSetting = Common.Settings.Settings.instance().moduleSetting('console-timestamps-enabled');
-    this.consoleHistoryAutocompleteSetting =
-        Common.Settings.Settings.instance().moduleSetting('console-history-autocomplete');
+    this.timestampsSetting =
+        Common.Settings.Settings.instance().resolve(Settings.ConsoleSettings.consoleTimestampsEnabledSettingDescriptor);
+    this.consoleHistoryAutocompleteSetting = Common.Settings.Settings.instance().resolve(
+        Settings.ConsoleSettings.consoleHistoryAutocompleteSettingDescriptor);
     this.selfXssWarningDisabledSetting = Common.Settings.Settings.instance().createSetting(
         'disable-self-xss-warning', false, Common.Settings.SettingStorageType.SYNCED);
 
@@ -493,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 =
@@ -501,29 +505,28 @@ export class ConsoleView extends UI.Widget.VBox implements
     settingsPane.append(
         SettingsUI.SettingsUI.createSettingCheckbox(
             i18nString(UIStrings.networkMessages), this.filter.networkMessagesSetting,
-            SettingUIRegistration.SettingUIRegistration.resolve(this.filter.networkMessagesSetting.descriptor()).title),
+            Settings.SettingUIRegistration.resolve(this.filter.networkMessagesSetting.descriptor()).title),
         SettingsUI.SettingsUI.createSettingCheckbox(i18nString(UIStrings.logXMLHttpRequests),
                                                     monitoringXHREnabledSetting),
         SettingsUI.SettingsUI.createSettingCheckbox(i18nString(UIStrings.preserveLog), preserveConsoleLogSetting,
                                                     i18nString(UIStrings.doNotClearLogOnPageReload)),
         SettingsUI.SettingsUI.createSettingCheckbox(
-            SettingUIRegistration.SettingUIRegistration.resolve(consoleEagerEvalSetting.descriptor()).title,
-            consoleEagerEvalSetting, i18nString(UIStrings.eagerlyEvaluateTextInThePrompt)),
+            Settings.SettingUIRegistration.resolve(consoleEagerEvalSetting.descriptor()).title, consoleEagerEvalSetting,
+            i18nString(UIStrings.eagerlyEvaluateTextInThePrompt)),
         SettingsUI.SettingsUI.createSettingCheckbox(i18nString(UIStrings.selectedContextOnly),
                                                     this.filter.filterByExecutionContextSetting,
                                                     i18nString(UIStrings.onlyShowMessagesFromTheCurrentContext)),
         SettingsUI.SettingsUI.createSettingCheckbox(
-            SettingUIRegistration.SettingUIRegistration.resolve(this.consoleHistoryAutocompleteSetting.descriptor())
-                .title,
+            Settings.SettingUIRegistration.resolve(this.consoleHistoryAutocompleteSetting.descriptor()).title,
             this.consoleHistoryAutocompleteSetting, i18nString(UIStrings.autocompleteFromHistory)),
         SettingsUI.SettingsUI.createSettingCheckbox(
-            SettingUIRegistration.SettingUIRegistration.resolve(this.groupSimilarSetting.descriptor()).title,
+            Settings.SettingUIRegistration.resolve(this.groupSimilarSetting.descriptor()).title,
             this.groupSimilarSetting, i18nString(UIStrings.groupSimilarMessagesInConsole)),
         SettingsUI.SettingsUI.createSettingCheckbox(
-            SettingUIRegistration.SettingUIRegistration.resolve(userActivationEvalSetting.descriptor()).title,
+            Settings.SettingUIRegistration.resolve(userActivationEvalSetting.descriptor()).title,
             userActivationEvalSetting, i18nString(UIStrings.treatEvaluationAsUserActivation)),
         SettingsUI.SettingsUI.createSettingCheckbox(
-            SettingUIRegistration.SettingUIRegistration.resolve(this.showCorsErrorsSetting.descriptor()).title,
+            Settings.SettingUIRegistration.resolve(this.showCorsErrorsSetting.descriptor()).title,
             this.showCorsErrorsSetting, i18nString(UIStrings.showCorsErrorsInConsole)),
     );
 
@@ -1870,9 +1873,10 @@ export class ConsoleViewFilter {
     this.filterChanged = filterChangedCallback;
 
     this.messageLevelFiltersSetting = ConsoleViewFilter.levelFilterSetting();
-    this.networkMessagesSetting = Common.Settings.Settings.instance().moduleSetting('network-messages');
-    this.filterByExecutionContextSetting =
-        Common.Settings.Settings.instance().moduleSetting('selected-context-filter-enabled');
+    this.networkMessagesSetting =
+        Common.Settings.Settings.instance().resolve(Settings.ConsoleSettings.networkMessagesSettingDescriptor);
+    this.filterByExecutionContextSetting = Common.Settings.Settings.instance().resolve(
+        Settings.ConsoleSettings.selectedContextFilterEnabledSettingDescriptor);
 
     this.messageLevelFiltersSetting.addChangeListener(this.onFilterChanged.bind(this));
     this.networkMessagesSetting.addChangeListener(this.onFilterChanged.bind(this));

package/front_end/panels/console/ConsoleViewMessage.ts

@@ -58,6 +58,7 @@ import objectValueStyles from '../../ui/legacy/components/object_ui/objectValue.
 import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import {html, type LitTemplate, nothing, render} from '../../ui/lit/lit.js';
+import * as Settings from '../../ui/settings/settings.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 import * as Elements from '../elements/elements.js';
 
@@ -687,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);
     }
 
@@ -1238,7 +1241,9 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
       return;
     }
 
-    if (Common.Settings.Settings.instance().moduleSetting('console-timestamps-enabled').get()) {
+    if (Common.Settings.Settings.instance()
+            .resolve(Settings.ConsoleSettings.consoleTimestampsEnabledSettingDescriptor)
+            .get()) {
       if (!this.timestampElement) {
         this.timestampElement = document.createElement('span');
         this.timestampElement.classList.add('console-timestamp');

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

@@ -270,13 +270,9 @@ UI.ActionRegistration.registerActionExtension({
   },
 });
 
-Common.Settings.registerSettingExtension({
+SettingsUI.SettingUIRegistration.register(SettingsUI.ConsoleSettings.networkMessagesSettingDescriptor, {
   category: Common.Settings.SettingCategory.CONSOLE,
-  storageType: Common.Settings.SettingStorageType.SYNCED,
   title: i18nLazyString(UIStrings.networkMessages),
-  settingName: 'network-messages',
-  settingType: Common.Settings.SettingType.BOOLEAN,
-  defaultValue: true,
   options: [
     {
       value: true,
@@ -289,13 +285,9 @@ Common.Settings.registerSettingExtension({
   ],
 });
 
-Common.Settings.registerSettingExtension({
+SettingsUI.SettingUIRegistration.register(SettingsUI.ConsoleSettings.selectedContextFilterEnabledSettingDescriptor, {
   category: Common.Settings.SettingCategory.CONSOLE,
-  storageType: Common.Settings.SettingStorageType.SYNCED,
   title: i18nLazyString(UIStrings.selectedContextOnly),
-  settingName: 'selected-context-filter-enabled',
-  settingType: Common.Settings.SettingType.BOOLEAN,
-  defaultValue: false,
   options: [
     {
       value: true,
@@ -308,13 +300,9 @@ Common.Settings.registerSettingExtension({
   ],
 });
 
-Common.Settings.registerSettingExtension({
+SettingsUI.SettingUIRegistration.register(SettingsUI.ConsoleSettings.consoleTimestampsEnabledSettingDescriptor, {
   category: Common.Settings.SettingCategory.CONSOLE,
-  storageType: Common.Settings.SettingStorageType.SYNCED,
   title: i18nLazyString(UIStrings.timestamps),
-  settingName: 'console-timestamps-enabled',
-  settingType: Common.Settings.SettingType.BOOLEAN,
-  defaultValue: false,
   options: [
     {
       value: true,
@@ -327,12 +315,9 @@ Common.Settings.registerSettingExtension({
   ],
 });
 
-Common.Settings.registerSettingExtension({
+SettingsUI.SettingUIRegistration.register(SettingsUI.ConsoleSettings.consoleHistoryAutocompleteSettingDescriptor, {
   category: Common.Settings.SettingCategory.CONSOLE,
   title: i18nLazyString(UIStrings.autocompleteFromHistory),
-  settingName: 'console-history-autocomplete',
-  settingType: Common.Settings.SettingType.BOOLEAN,
-  defaultValue: true,
   options: [
     {
       value: true,
@@ -345,13 +330,9 @@ Common.Settings.registerSettingExtension({
   ],
 });
 
-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,
@@ -364,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,
@@ -383,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,
@@ -401,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,
@@ -435,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,