chrome-devtools-frontend 1.0.1684555 → 1.0.1690116

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/SourcesView.ts

@@ -117,8 +117,13 @@ export const DEFAULT_VIEW: View = (input, output, target): void => {
   // clang-format on
 };
 
-export class SourcesView extends Common.ObjectWrapper.eventMixin<EventTypes, typeof UI.Widget.VBox>(UI.Widget.VBox)
-    implements UI.SearchableView.Searchable, UI.SearchableView.Replaceable {
+const SourcesViewBase: Common.ObjectWrapper.EventMixin<EventTypes, typeof UI.Widget.VBox> =
+    Common.ObjectWrapper.eventMixin(
+        UI.Widget.VBox,
+    );
+
+export class SourcesView extends SourcesViewBase implements UI.SearchableView.Searchable,
+                                                            UI.SearchableView.Replaceable {
   #searchableView!: UI.SearchableView.SearchableView;
   editorContainer?: TabbedEditorContainer;
   #uiSourceCodes = new Set<Workspace.UISourceCode.UISourceCode>();

package/front_end/panels/sources/TabbedEditorContainer.ts

@@ -86,8 +86,12 @@ const HEADER_OVERRIDES_FILENAME = '.headers';
 
 let tabId = 0;
 
-export class TabbedEditorContainer extends Common.ObjectWrapper.eventMixin<EventTypes, typeof UI.Widget.VBox>(
-    UI.Widget.VBox) {
+const TabbedEditorContainerBase: Common.ObjectWrapper.EventMixin<EventTypes, typeof UI.Widget.VBox> =
+    Common.ObjectWrapper.eventMixin(
+        UI.Widget.VBox,
+    );
+
+export class TabbedEditorContainer extends TabbedEditorContainerBase {
   #historyManager!: EditingLocationHistoryManager;
   set historyManager(historyManager: EditingLocationHistoryManager) {
     this.#historyManager = historyManager;

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';
@@ -40,9 +40,13 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/sources/UISourceCodeFrame.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
-export class UISourceCodeFrame extends Common.ObjectWrapper
-                                           .eventMixin<EventTypes, typeof SourceFrame.SourceFrame.SourceFrameImpl>(
-                                               SourceFrame.SourceFrame.SourceFrameImpl) {
+const UISourceCodeFrameBase:
+    Common.ObjectWrapper.EventMixin<EventTypes, typeof SourceFrame.SourceFrame.SourceFrameImpl> =
+    Common.ObjectWrapper.eventMixin(
+        SourceFrame.SourceFrame.SourceFrameImpl,
+    );
+
+export class UISourceCodeFrame extends UISourceCodeFrameBase {
   #uiSourceCode: Workspace.UISourceCode.UISourceCode;
   #muteSourceCodeEvents = false;
   #persistenceBinding: Persistence.Persistence.PersistenceBinding|null;
@@ -150,6 +154,7 @@ export class UISourceCodeFrame extends Common.ObjectWrapper
   }
 
   private unloadUISourceCode(): void {
+    this.textEditor.removeAttribute('data-file-path');
     Common.EventTarget.removeEventListeners(this.#messageAndDecorationListeners);
     Common.EventTarget.removeEventListeners(this.#uiSourceCodeEventListeners);
     this.#uiSourceCode.removeWorkingCopyGetter();
@@ -158,6 +163,7 @@ export class UISourceCodeFrame extends Common.ObjectWrapper
   }
 
   private initializeUISourceCode(): void {
+    this.textEditor.setAttribute('data-file-path', this.#uiSourceCode.url());
     this.#uiSourceCodeEventListeners = [
       this.#uiSourceCode.addEventListener(
           Workspace.UISourceCode.Events.WorkingCopyChanged, this.onWorkingCopyChanged, this),
@@ -333,6 +339,7 @@ export class UISourceCodeFrame extends Common.ObjectWrapper
   }
 
   private onTitleChanged(): void {
+    this.textEditor.setAttribute('data-file-path', this.#uiSourceCode.url());
     this.updateLanguageMode('').then(() => this.reloadPlugins(), console.error);
   }
 

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;

package/front_end/panels/sources/callStackSidebarPane.css

@@ -7,13 +7,13 @@
 .call-frame-warnings-message {
   text-align: center;
   font-style: italic;
-  padding: 4px;
+  padding: var(--sys-size-3);
   color: var(--sys-color-on-surface-yellow);
   background-color: var(--sys-color-surface-yellow);
 }
 
 .ignore-listed-message {
-  padding: 1px;
+  padding: var(--sys-size-1);
 }
 
 .ignore-listed-message-label {
@@ -29,12 +29,12 @@
 .show-more-message {
   text-align: center;
   font-style: italic;
-  padding: 4px;
-  border-top: 1px solid var(--sys-color-divider);
+  padding: var(--sys-size-3);
+  border-top: var(--sys-size-1) solid var(--sys-color-divider);
 }
 
 .call-frame-item {
-  padding: 3px 8px 3px 20px;
+  padding: 3px var(--sys-size-5) 3px var(--sys-size-9);
   position: relative;
   min-height: 18px;
   line-height: 15px;
@@ -52,7 +52,7 @@
 }
 
 .call-frame-item:not(.async-header) {
-  border-top: 1px solid var(--sys-color-divider);
+  border-top: var(--sys-size-1) solid var(--sys-color-divider);
 }
 
 .call-frame-item-title,
@@ -92,8 +92,8 @@
 .async-header::before {
   content: " ";
   width: 100%;
-  border-top: 1px solid var(--sys-color-divider);
-  margin-top: 8px;
+  border-top: var(--sys-size-1) solid var(--sys-color-divider);
+  margin-top: var(--sys-size-5);
   position: absolute;
   left: 0;
 }
@@ -107,7 +107,7 @@
   display: none;
   position: absolute;
   top: 3px;
-  left: 4px;
+  left: var(--sys-size-3);
 }
 
 .call-frame-item.selected .selected-call-frame-icon {
@@ -118,7 +118,7 @@
   display: block;
   position: absolute;
   top: 3px;
-  right: 4px;
+  right: var(--sys-size-3);
 }
 
 @media (forced-colors: active) {

package/front_end/panels/sources/components/HeadersView.css

@@ -6,7 +6,7 @@
 
 :host {
   flex-grow: 1;
-  padding: 6px;
+  padding: var(--sys-size-4);
 }
 
 .row {
@@ -16,7 +16,7 @@
   font-family: var(--monospace-font-family);
   font-size: var(--monospace-font-size);
   align-items: center;
-  line-height: 24px;
+  line-height: var(--sys-typescale-body1-line-height);
 }
 
 .row devtools-button {
@@ -56,8 +56,8 @@
 
 .editable:hover,
 .editable:focus {
-  border: 1px solid var(--sys-color-neutral-outline);
-  border-radius: 2px;
+  border: var(--sys-size-1) solid var(--sys-color-neutral-outline);
+  border-radius: var(--sys-size-2);
 }
 
 .row .inline-button {
@@ -108,10 +108,10 @@
   color: var(--sys-color-primary);
   text-decoration: underline;
   cursor: pointer;
-  outline-offset: 2px;
+  outline-offset: var(--sys-size-2);
   padding: 0;
 }
 
 .learn-more-row {
-  line-height: 24px;
+  line-height: var(--sys-typescale-body1-line-height);
 }

package/front_end/panels/sources/debuggerPausedMessage.css

@@ -5,8 +5,8 @@
  */
 
 .paused-status {
-  margin: 6px;
-  padding: 4px 10px;
+  margin: var(--sys-size-4);
+  padding: var(--sys-size-3) 10px;
   border-radius: 10px;
   background-color: var(--sys-color-yellow-container);
   color: var(--sys-color-on-yellow-container);
@@ -38,8 +38,8 @@
 
 devtools-icon {
   position: absolute;
-  left: -1px;
-  top: -1px;
+  left: calc(-1 * var(--sys-size-1));
+  top: calc(-1 * var(--sys-size-1));
 }
 
 devtools-icon[name="info"] {