chrome-devtools-frontend 1.0.1376716 → 1.0.1380117

package/front_end/panels/settings/SettingsScreen.ts

@@ -34,6 +34,7 @@ import * as i18n from '../../core/i18n/i18n.js';
 import type * as Platform from '../../core/platform/platform.js';
 import * as Root from '../../core/root/root.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
+import * as Cards from '../../ui/components/cards/cards.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
@@ -44,6 +45,11 @@ import type {KeybindsSettingsTab} from './KeybindsSettingsTab.js';
 import settingsScreenStyles from './settingsScreen.css.js';
 
 const UIStrings = {
+
+  /**
+   *@description Card header in Experiments settings tab that list all available unstable experiments that can be turned on or off.
+   */
+  unstableExperiments: 'Unstable experiments',
   /**
    *@description Name of the Settings view
    */
@@ -52,31 +58,22 @@ const UIStrings = {
    *@description Text for keyboard shortcuts
    */
   shortcuts: 'Shortcuts',
-  /**
-   *@description Text in Settings Screen of the Settings
-   */
-  preferences: 'Preferences',
   /**
    *@description Text of button in Settings Screen of the Settings
    */
   restoreDefaultsAndReload: 'Restore defaults and reload',
   /**
-   *@description Text in Settings Screen of the Settings
+   *@description Card header in Experiments settings tab that list all available stable experiments that can be turned on or off.
    */
   experiments: 'Experiments',
   /**
    *@description Message shown in the experiments panel to warn users about any possible unstable features.
    */
-  theseExperimentsCouldBeUnstable:
-      'These experiments could be unstable or unreliable and may require you to restart DevTools.',
+  theseExperimentsCouldBeUnstable: 'Warning: These experiments could be unstable or unreliable.',
   /**
    *@description Message text content in Settings Screen of the Settings
    */
-  theseExperimentsAreParticularly: 'These experiments are particularly unstable. Enable at your own risk.',
-  /**
-   *@description Warning text content in Settings Screen of the Settings
-   */
-  warning: 'WARNING:',
+  theseExperimentsAreParticularly: 'Warning: These experiments are particularly unstable. Enable at your own risk.',
   /**
    *@description Message to display if a setting change requires a reload of DevTools
    */
@@ -89,7 +86,7 @@ const UIStrings = {
    * @description Warning text shown when the user has entered text to filter the
    * list of experiments, but no experiments match the filter.
    */
-  noResults: 'No experiments match the filter',
+  noResults: 'Warning: No experiments match the filter',
   /**
    *@description Text that is usually a hyperlink to more documentation
    */
@@ -104,6 +101,12 @@ const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 let settingsScreenInstance: SettingsScreen;
 
+function createSettingsCard(heading: Common.UIString.LocalizedString, ...content: HTMLElement[]): Cards.Card.Card {
+  const card = new Cards.Card.Card();
+  card.data = {heading, content};
+  return card;
+}
+
 export class SettingsScreen extends UI.Widget.VBox implements UI.View.ViewLocationResolver {
   private readonly tabbedLocation: UI.View.TabbedViewLocation;
   private keybindsTab?: KeybindsSettingsTab;
@@ -240,28 +243,14 @@ export class SettingsScreen extends UI.Widget.VBox implements UI.View.ViewLocati
 
 abstract class SettingsTab extends UI.Widget.VBox {
   containerElement: HTMLElement;
-  constructor(name: string, id?: string) {
+  constructor(id?: string) {
     super();
     this.element.classList.add('settings-tab-container');
     if (id) {
       this.element.id = id;
     }
-    const header = this.element.createChild('header');
-    UI.UIUtils.createTextChild(header.createChild('h1'), name);
-    this.containerElement = this.element.createChild('div', 'settings-container-wrapper')
-                                .createChild('div', 'settings-tab settings-content settings-container');
-  }
-
-  protected appendSection(name?: string): HTMLElement {
-    const block = this.containerElement.createChild('div', 'settings-block');
-    if (name) {
-      UI.ARIAUtils.markAsGroup(block);
-      const title = block.createChild('div', 'settings-section-title');
-      title.textContent = name;
-      UI.ARIAUtils.markAsHeading(title, 2);
-      UI.ARIAUtils.setLabel(block, name);
-    }
-    return block;
+    this.containerElement =
+        this.contentElement.createChild('div', 'settings-card-container-wrapper').createChild('div');
   }
 
   abstract highlightObject(_object: Object): void;
@@ -272,9 +261,10 @@ export class GenericSettingsTab extends SettingsTab {
   private readonly settingToControl = new Map<Common.Settings.Setting<unknown>, HTMLElement>();
 
   constructor() {
-    super(i18nString(UIStrings.preferences), 'preferences-tab-content');
+    super('preferences-tab-content');
 
     this.element.setAttribute('jslog', `${VisualLogging.pane('preferences')}`);
+    this.containerElement.classList.add('settings-multicolumn-card-container');
 
     // GRID, MOBILE, EMULATION, and RENDERING are intentionally excluded from this list.
     const explicitSectionOrder: Common.Settings.SettingCategory[] = [
@@ -318,7 +308,7 @@ export class GenericSettingsTab extends SettingsTab {
     const restoreAndReloadButton = UI.UIUtils.createTextButton(
         i18nString(UIStrings.restoreDefaultsAndReload), restoreAndReload,
         {jslogContext: 'settings.restore-defaults-and-reload'});
-    this.appendSection().appendChild(restoreAndReloadButton);
+    this.containerElement.appendChild(restoreAndReloadButton);
 
     function restoreAndReload(): void {
       Common.Settings.Settings.instance().clearAll();
@@ -355,8 +345,7 @@ export class GenericSettingsTab extends SettingsTab {
     const settingUI = Components.Linkifier.LinkHandlerSettingUI.instance() as UI.SettingsUI.SettingUI;
     const element = settingUI.settingElement();
     if (element) {
-      const sectionElement = this.createStandardSectionElement(sectionName, settings);
-      sectionElement.appendChild(element);
+      this.createStandardSectionElement(sectionName, settings, element);
     }
   }
 
@@ -366,16 +355,20 @@ export class GenericSettingsTab extends SettingsTab {
     if (category === Common.Settings.SettingCategory.EXTENSIONS) {
       this.createExtensionSection(settings);
     } else if (category === Common.Settings.SettingCategory.SYNC && settings.length > 0) {
-      this.containerElement.appendChild(this.syncSection);
+      const syncCard = createSettingsCard(
+          Common.SettingRegistration.getLocalizedSettingsCategory(Common.SettingRegistration.SettingCategory.SYNC),
+          this.syncSection);
+      this.containerElement.appendChild(syncCard);
     } else if (settings.length > 0) {
       this.createStandardSectionElement(category, settings);
     }
   }
 
   private createStandardSectionElement(
-      category: Common.Settings.SettingCategory, settings: Common.Settings.SettingRegistration[]): Element {
+      category: Common.Settings.SettingCategory, settings: Common.Settings.SettingRegistration[],
+      content?: Element): void {
     const uiSectionName = Common.Settings.getLocalizedSettingsCategory(category);
-    const sectionElement = this.appendSection(uiSectionName);
+    const sectionElement = document.createElement('div');
     for (const settingRegistration of settings) {
       const setting = Common.Settings.Settings.instance().moduleSetting(settingRegistration.settingName);
       const settingControl = UI.SettingsUI.createControlForSetting(setting);
@@ -384,7 +377,11 @@ export class GenericSettingsTab extends SettingsTab {
         sectionElement.appendChild(settingControl);
       }
     }
-    return sectionElement;
+    if (content) {
+      sectionElement.appendChild(content);
+    }
+    const card = createSettingsCard(uiSectionName, sectionElement);
+    this.containerElement.appendChild(card);
   }
 
   highlightObject(setting: Object): void {
@@ -398,14 +395,16 @@ export class GenericSettingsTab extends SettingsTab {
 }
 
 export class ExperimentsSettingsTab extends SettingsTab {
-  #experimentsSection: HTMLElement|undefined;
-  #unstableExperimentsSection: HTMLElement|undefined;
+  #experimentsSection: Cards.Card.Card|undefined;
+  #unstableExperimentsSection: Cards.Card.Card|undefined;
   #inputElement: HTMLInputElement;
   private readonly experimentToControl = new Map<Root.Runtime.Experiment, HTMLElement>();
 
   constructor() {
-    super(i18nString(UIStrings.experiments), 'experiments-tab-content');
-    const filterSection = this.appendSection();
+    super('experiments-tab-content');
+    this.containerElement.classList.add('settings-card-container');
+
+    const filterSection = this.containerElement.createChild('div');
     filterSection.classList.add('experiments-filter');
 
     this.element.setAttribute('jslog', `${VisualLogging.pane('experiments')}`);
@@ -434,36 +433,42 @@ export class ExperimentsSettingsTab extends SettingsTab {
     const unstableExperiments = experiments.filter(e => e.unstable && e.title.toLowerCase().includes(filterText));
     const stableExperiments = experiments.filter(e => !e.unstable && e.title.toLowerCase().includes(filterText));
     if (stableExperiments.length) {
-      this.#experimentsSection = this.appendSection();
+      const experimentsBlock = document.createElement('div');
+      experimentsBlock.classList.add('settings-experiments-block');
       const warningMessage = i18nString(UIStrings.theseExperimentsCouldBeUnstable);
-      this.#experimentsSection.appendChild(this.createExperimentsWarningSubsection(warningMessage));
+      const warningSection = this.createExperimentsWarningSubsection(warningMessage);
       for (const experiment of stableExperiments) {
-        this.#experimentsSection.appendChild(this.createExperimentCheckbox(experiment));
+        experimentsBlock.appendChild(this.createExperimentCheckbox(experiment));
       }
+      this.#experimentsSection =
+          createSettingsCard(i18nString(UIStrings.experiments), warningSection, experimentsBlock);
+      this.containerElement.appendChild(this.#experimentsSection);
     }
     if (unstableExperiments.length) {
-      this.#unstableExperimentsSection = this.appendSection();
+      const experimentsBlock = document.createElement('div');
+      experimentsBlock.classList.add('settings-experiments-block');
       const warningMessage = i18nString(UIStrings.theseExperimentsAreParticularly);
-      this.#unstableExperimentsSection.appendChild(this.createExperimentsWarningSubsection(warningMessage));
       for (const experiment of unstableExperiments) {
-        this.#unstableExperimentsSection.appendChild(this.createExperimentCheckbox(experiment));
+        experimentsBlock.appendChild(this.createExperimentCheckbox(experiment));
       }
+      this.#unstableExperimentsSection = createSettingsCard(
+          i18nString(UIStrings.unstableExperiments), this.createExperimentsWarningSubsection(warningMessage),
+          experimentsBlock);
+      this.containerElement.appendChild(this.#unstableExperimentsSection);
     }
     if (!stableExperiments.length && !unstableExperiments.length) {
-      this.#experimentsSection = this.appendSection();
-      const warning = this.#experimentsSection.createChild('span');
+      const warning = document.createElement('span');
       warning.textContent = i18nString(UIStrings.noResults);
       UI.ARIAUtils.alert(warning.textContent);
+      this.#experimentsSection = createSettingsCard(i18nString(UIStrings.experiments), warning);
+      this.containerElement.appendChild(this.#experimentsSection);
     }
   }
 
-  private createExperimentsWarningSubsection(warningMessage: string): Element {
+  private createExperimentsWarningSubsection(warningMessage: string): HTMLElement {
     const subsection = document.createElement('div');
-    const warning = subsection.createChild('span', 'settings-experiments-warning-subsection-warning');
-    warning.textContent = i18nString(UIStrings.warning);
-    UI.UIUtils.createTextChild(subsection, ' ');
-    const message = subsection.createChild('span', 'settings-experiments-warning-subsection-message');
-    message.textContent = warningMessage;
+    const warning = subsection.createChild('span');
+    warning.textContent = warningMessage;
     return subsection;
   }
 

package/front_end/panels/settings/aiSettingsTab.css

@@ -8,13 +8,6 @@
   box-sizing: border-box;
 }
 
-header > h1 {
-  font-size: 18px;
-  font-weight: normal;
-  margin: 0;
-  white-space: nowrap;
-}
-
 .shared-disclaimer {
   background: linear-gradient(135deg, var(--sys-color-gradient-primary), var(--sys-color-gradient-tertiary));
   border-radius: var(--sys-size-5);
@@ -45,7 +38,7 @@ header > h1 {
   display: grid;
   grid-template-columns: 1fr auto auto;
   border-radius: var(--sys-size-5);
-  box-shadow: var(--sys-elevation-level3); /* stylelint-disable-line plugin/use_theme_colors */
+  box-shadow: var(--sys-elevation-level2);
   margin: var(--sys-size-11) 0 var(--sys-size-4);
   line-height: var(--sys-typescale-body5-line-height);
   min-width: var(--sys-size-28);
@@ -154,13 +147,9 @@ header > h1 {
 
 .settings-container-wrapper {
   position: absolute;
-  top: 31px;
-  left: 0;
-  right: 0;
-  bottom: 0;
+  inset: var(--sys-size-8) 0 0;
   overflow: auto;
-  padding: var(--sys-size-6);
-  border-top: 1px solid var(--sys-color-divider);
+  padding: var(--sys-size-3) var(--sys-size-6) var(--sys-size-6);
   display: flex;
   flex-direction: column;
 }

package/front_end/panels/settings/components/SyncSection.ts

@@ -5,7 +5,7 @@
 import '../../../ui/components/chrome_link/chrome_link.js';
 import '../../../ui/components/settings/settings.js';
 
-import * as Common from '../../../core/common/common.js';
+import type * as Common from '../../../core/common/common.js';
 import type * as Host from '../../../core/host/host.js';
 import * as i18n from '../../../core/i18n/i18n.js';
 import type * as Platform from '../../../core/platform/platform.js';
@@ -77,7 +77,6 @@ export class SyncSection extends HTMLElement {
     // clang-format off
     LitHtml.render(html`
       <fieldset>
-        <legend>${Common.Settings.getLocalizedSettingsCategory(Common.Settings.SettingCategory.SYNC)}</legend>
         ${renderAccountInfoOrWarning(this.#syncInfo)}
         <setting-checkbox .data=${
             {setting: this.#syncSetting}}>

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

@@ -13,18 +13,9 @@
 
 fieldset {
   border: 0;
-  margin-left: 20px;
   padding: 0;
 }
 
-legend {
-  color: var(--sys-color-token-subtle);
-  font-size: 120%;
-  margin-left: -20px;
-  padding: 0;
-  text-align: left;
-}
-
 .link {
   color: var(--sys-color-primary);
   text-decoration: underline;
@@ -42,7 +33,6 @@ img {
 
 .warning {
   display: block;
-  margin-top: 12px;
 }
 
 .account-info {

package/front_end/panels/settings/frameworkIgnoreListSettingsTab.css

@@ -28,7 +28,9 @@
   flex: 0 1 auto;
 }
 
-.enable-ignore-listing, .ignore-list-item, .general-exclusion-group {
+.enable-ignore-listing,
+.ignore-list-item,
+.general-exclusion-group {
   padding-left: var(--sys-size-4);
 }
 

package/front_end/panels/settings/keybindsSettingsTab.css

@@ -10,7 +10,7 @@
 }
 
 .keybinds-key {
-  display:flex;
+  display: flex;
   align-items: center;
   justify-content: center;
   height: var(--sys-size-11);
@@ -19,19 +19,16 @@
   white-space: nowrap;
   border-radius: var(--sys-shape-corner-small);
   background: var(--sys-color-tonal-container);
-  padding: 0px var(--sys-size-4);
+  padding: 0 var(--sys-size-4);
 }
 
 .keybinds-list-item {
   margin: 0 var(--sys-size-6);
   padding: var(--sys-size-4) 0;
   display: grid;
-  grid-template-rows: 1fr ;
+  grid-template-rows: 1fr;
   grid-template-columns: 1fr 30px 2fr 30px 30px;
-}
-
-.keybinds-list-item:not(.keybinds-category-header) {
-  border-top: 1px solid var(--sys-color-divider);
+  border-bottom: var(--sys-size-1) solid var(--sys-color-divider);
 }
 
 .keybinds-list-item:focus-visible {
@@ -43,7 +40,7 @@
 }
 
 .keybinds-list-text.keybinds-action-name {
-  grid-row: 1 / 3;
+  grid-row: 1 / 1;
 }
 
 .keybinds-shortcut,
@@ -108,8 +105,8 @@
   white-space: nowrap;
 }
 
-.keybinds-header-wrapper + .keybinds-list-item-wrapper > .keybinds-list-item {
-  border: none;
+.keybinds-list-item-wrapper + .keybinds-header-wrapper {
+  margin-top: var(--sys-size-9);
 }
 
 .keybinds-list-item-wrapper:has(:not(.keybinds-category-header):hover),

package/front_end/panels/settings/settingsScreen.css

@@ -17,54 +17,8 @@
   flex: auto;
 }
 
-.settings-container {
-  width: 100%;
-  column-width: 288px;
-}
-
-.settings-block {
-  display: block;
-  padding-bottom: 9px;
-  width: 288px;
-  break-inside: avoid;
-}
-
-.settings-tab.settings-container {
-  column-width: 308px;
-}
-
-.settings-tab .settings-block {
-  margin-left: 20px;
-}
-
-.settings-line {
-  padding-bottom: 5px;
-  margin-bottom: 5px;
-}
-
-.settings-key-cell {
-  display: inline-block;
-  width: 153px;
-  white-space: nowrap;
-  text-align: right;
-  vertical-align: middle;
-  padding-right: 6px;
-}
-
-.settings-cell {
-  display: inline-block;
-  width: 135px;
-  vertical-align: middle;
-}
-
-.settings-section-title {
-  font-size: 120%;
-  text-align: left;
-}
-
-.settings-combine-keys {
-  margin: 0 0.3em;
-  font-size: 9px;
+.settings-experiments-block {
+  padding: 0 var(--sys-size-6) var(--sys-size-5) var(--sys-size-4);
 }
 
 fieldset {
@@ -81,36 +35,20 @@ fieldset {
 
 label {
   padding-right: 8px;
-  padding-bottom: 8px;
 }
 
 .experiments-filter label {
   padding-bottom: 0;
 }
 
-.settings-tab p {
-  margin: 6px 0;
-}
-
-.settings-block p p {
-  padding-left: 30px;
-}
-
 .settings-select {
   align-items: center;
   display: grid;
+  row-gap: var(--sys-size-3);
 }
 
-.settings-experiments-warning-subsection-warning {
-  color: var(--sys-color-error);
-}
-
-.settings-experiments-warning-subsection-message {
-  color: inherit;
-}
-
-.settings-content input[type="checkbox"] {
-  margin: 1px 7px 1px 2px;
+div:has(.settings-select) + div:has(.settings-select) {
+  padding-top: var(--sys-size-5);
 }
 
 .settings-window-label-element {
@@ -133,32 +71,12 @@ label {
   }
 }
 
-.settings-container-wrapper {
-  position: absolute;
-  top: 31px;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  overflow: auto;
-  padding-top: 9px;
-  border-top: 1px solid var(--sys-color-divider);
-}
-
 .settings-card-container-wrapper {
-  padding-top: var(--sys-size-8);
+  scrollbar-gutter: stable;
+  padding-bottom: var(--sys-size-8);
   overflow: auto;
-  scrollbar-width: thin;
-}
-
-@media (max-width: 1000px) {
-  .settings-card-container-wrapper {
-    position: absolute;
-    top: var(--sys-size-8);
-    left: 0;
-    right: 0;
-    bottom: 0;
-    overflow: auto;
-  }
+  position: absolute;
+  inset: var(--sys-size-8) 0 0;
 }
 
 .settings-card-container {
@@ -168,49 +86,33 @@ label {
   gap: var(--sys-size-9);
 }
 
-.settings-tab.settings-content {
-  margin: 0;
-  padding: 0;
-}
-
-.settings-tab-container {
-  flex: auto;
-  overflow: hidden;
-}
-
-.settings-tab-container header {
-  padding: 0 0 6px;
-}
-
-#experiments-tab-content .settings-container {
-  column-width: auto;
-}
+.settings-multicolumn-card-container {
+  column-width: var(--sys-size-32);
+  column-gap: var(--sys-size-11);
 
-#experiments-tab-content .settings-block {
-  width: auto;
-  margin-left: 0;
-  margin-right: 10px;
-}
+  > * + * {
+    margin-top: var(--sys-size-8);
+  }
 
-.settings-tab-container header > h1 {
-  font-size: 18px;
-  font-weight: normal;
-  margin: 0;
-  padding-bottom: 3px;
-  white-space: nowrap;
+  > devtools-button {
+    margin-left: var(--sys-size-5);
+  }
 }
 
-.settings-tab .settings-section-title {
-  margin-left: -20px;
-  color: var(--sys-color-on-surface-subtle);
+.settings-card-container-wrapper select {
+  margin-left: 10px;
+  width: var(--sys-size-28);
 }
 
-.settings-tab select {
-  margin-left: 10px;
-  width: 80%;
+.settings-card-container-wrapper setting-checkbox { /* stylelint-disable-line selector-type-no-unknown */
+  min-height: var(--sys-size-13);
+  position: relative;
+  left: calc(var(--sys-size-4) * -1);
 }
 
 .settings-experiment {
+  margin: 0;
+  min-height: var(--sys-size-13);
   display: grid;
   grid-template-columns: auto min-content auto 1fr;
 

package/front_end/panels/sources/DebuggerPlugin.ts

@@ -566,18 +566,23 @@ export class DebuggerPlugin extends Plugin {
       scriptFile.addSourceMapURL(url);
     }
 
-    function addDebugInfoURL(scriptFile: Bindings.ResourceScriptMapping.ResourceScriptFile): void {
+    function addDebugInfoURL(
+        this: DebuggerPlugin, scriptFile: Bindings.ResourceScriptMapping.ResourceScriptFile): void {
       const dialog =
-          AddDebugInfoURLDialog.createAddDWARFSymbolsURLDialog(addDebugInfoURLDialogCallback.bind(null, scriptFile));
+          AddDebugInfoURLDialog.createAddDWARFSymbolsURLDialog(addDebugInfoURLDialogCallback.bind(this, scriptFile));
       dialog.show();
     }
 
     function addDebugInfoURLDialogCallback(
-        scriptFile: Bindings.ResourceScriptMapping.ResourceScriptFile, url: Platform.DevToolsPath.UrlString): void {
+        this: DebuggerPlugin, scriptFile: Bindings.ResourceScriptMapping.ResourceScriptFile,
+        url: Platform.DevToolsPath.UrlString): void {
       if (!url) {
         return;
       }
       scriptFile.addDebugInfoURL(url);
+      if (scriptFile.script?.debuggerModel) {
+        this.updateScriptFile(scriptFile.script?.debuggerModel);
+      }
     }
 
     if (this.uiSourceCode.project().type() === Workspace.Workspace.projectTypes.Network &&
@@ -593,7 +598,7 @@ export class DebuggerPlugin extends Plugin {
             !Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance().pluginManager.hasPluginForScript(
                 scriptFile.script)) {
           contextMenu.debugSection().appendItem(
-              i18nString(UIStrings.addWasmDebugInfo), addDebugInfoURL.bind(null, scriptFile),
+              i18nString(UIStrings.addWasmDebugInfo), addDebugInfoURL.bind(this, scriptFile),
               {jslogContext: 'add-wasm-debug-info'});
         }
       }