chrome-devtools-frontend 1.0.1376716 → 1.0.1386602

package/front_end/panels/sensors/LocationsSettingsTab.ts

@@ -4,6 +4,8 @@
 
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
+import * as Buttons from '../../ui/components/buttons/buttons.js';
+import * as Cards from '../../ui/components/cards/cards.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
@@ -14,7 +16,7 @@ const UIStrings = {
    *@description Title in the Locations Settings Tab, where custom geographic locations that the user
    *has entered are stored.
    */
-  customLocations: 'Custom locations',
+  locations: 'Locations',
   /**
    *@description Label for the name of a geographic location that the user has entered.
    */
@@ -91,7 +93,7 @@ const UIStrings = {
   /**
    *@description Text of add locations button in Locations Settings Tab of the Device Toolbar
    */
-  addLocation: 'Add location...',
+  addLocation: 'Add location',
 };
 const str_ = i18n.i18n.registerUIStrings('panels/sensors/LocationsSettingsTab.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -106,16 +108,31 @@ export class LocationsSettingsTab extends UI.Widget.VBox implements UI.ListWidge
 
     this.element.setAttribute('jslog', `${VisualLogging.pane('emulation-locations')}`);
 
-    this.contentElement.createChild('div', 'header').textContent = i18nString(UIStrings.customLocations);
-
-    const addButton = UI.UIUtils.createTextButton(
-        i18nString(UIStrings.addLocation), this.addButtonClicked.bind(this),
-        {className: 'add-locations-button', jslogContext: 'emulation.add-location'});
-    this.contentElement.appendChild(addButton);
+    const settingsContent =
+        this.contentElement.createChild('div', 'settings-card-container-wrapper').createChild('div');
+    settingsContent.classList.add('settings-card-container');
+
+    const addButton = new Buttons.Button.Button();
+    addButton.classList.add('add-locations-button');
+    addButton.data = {
+      variant: Buttons.Button.Variant.OUTLINED,
+      iconName: 'plus',
+      jslogContext: 'emulation.add-location',
+    };
+    addButton.textContent = i18nString(UIStrings.addLocation);
+    addButton.addEventListener('click', () => this.addButtonClicked());
+
+    const listContainer = document.createElement('div');
+    const locationsCard = new Cards.Card.Card();
+    locationsCard.data = {
+      heading: i18nString(UIStrings.locations),
+      content: [listContainer, addButton],
+    };
+    settingsContent.appendChild(locationsCard);
 
     this.list = new UI.ListWidget.ListWidget(this, undefined, true);
     this.list.element.classList.add('locations-list');
-    this.list.show(this.contentElement);
+    this.list.show(listContainer);
     this.customSetting =
         Common.Settings.Settings.instance().moduleSetting<LocationDescription[]>('emulation.locations');
     const list =
@@ -144,8 +161,6 @@ export class LocationsSettingsTab extends UI.Widget.VBox implements UI.ListWidge
 
     this.customSetting.set(list);
     this.customSetting.addChangeListener(this.locationsUpdated, this);
-
-    this.setDefaultFocusedElement(addButton);
   }
 
   override wasShown(): void {

package/front_end/panels/sensors/locationsSettingsTab.css

@@ -4,28 +4,13 @@
  * found in the LICENSE file.
  */
 
-:host {
-  overflow: hidden;
-}
-
-.header {
-  padding: 0 0 6px;
-  border-bottom: 1px solid var(--sys-color-divider);
-  font-size: 18px;
-  font-weight: normal;
-  flex: none;
-}
-
 .add-locations-button {
-  flex: none;
-  margin: 10px 5px;
-  min-width: 140px;
-  align-self: flex-start;
+  margin-bottom: var(--sys-size-5);
+  border: none;
 }
 
 .locations-list {
-  max-width: 600px;
-  min-width: 340px;
+  margin-top: var(--sys-size-3);
   flex: auto;
 }
 
@@ -85,3 +70,18 @@
 .locations-input-container {
   padding: 1px;
 }
+
+.settings-card-container-wrapper {
+  scrollbar-gutter: stable;
+  padding-bottom: var(--sys-size-8);
+  overflow: auto;
+  position: absolute;
+  inset: var(--sys-size-8) 0 0;
+}
+
+.settings-card-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--sys-size-9);
+}

package/front_end/panels/settings/AISettingsTab.ts

@@ -138,10 +138,6 @@ const UIStrings = {
    *@description Label for a link to the privacy notice
    */
   privacyNotice: 'Google Privacy Policy',
-  /**
-   *@description Header for the AI innovations settings page
-   */
-  aiInnovations: 'AI innovations',
   /**
    *@description Label for a toggle to enable the Console Insights feature
    */
@@ -215,14 +211,13 @@ export class AISettingsTab extends LegacyWrapper.LegacyWrapper.WrappableComponen
 
   #getAiAssistanceSettingDescription(): Platform.UIString.LocalizedString {
     const config = Common.Settings.Settings.instance().getHostConfig();
-    if (config.devToolsAiAssistancePerformanceAgent?.enabled ||
-        config.devToolsAiAssistancePerformanceAgentDogfood?.enabled) {
+    if (config.devToolsAiAssistancePerformanceAgent?.enabled) {
       return i18nString(UIStrings.helpUnderstandStylingNetworkPerformanceAndFile);
     }
-    if (config.devToolsAiAssistanceFileAgent?.enabled || config.devToolsAiAssistanceFileAgentDogfood?.enabled) {
+    if (config.devToolsAiAssistanceFileAgent?.enabled) {
       return i18nString(UIStrings.helpUnderstandStylingNetworkAndFile);
     }
-    if (config.devToolsAiAssistanceNetworkAgent?.enabled || config.devToolsExplainThisResourceDogfood?.enabled) {
+    if (config.devToolsAiAssistanceNetworkAgent?.enabled) {
       return i18nString(UIStrings.helpUnderstandStylingAndNetworkRequest);
     }
     return i18nString(UIStrings.helpUnderstandStyling);
@@ -230,14 +225,13 @@ export class AISettingsTab extends LegacyWrapper.LegacyWrapper.WrappableComponen
 
   #getAiAssistanceSettingInfo(): Platform.UIString.LocalizedString {
     const config = Common.Settings.Settings.instance().getHostConfig();
-    if (config.devToolsAiAssistancePerformanceAgent?.enabled ||
-        config.devToolsAiAssistancePerformanceAgentDogfood?.enabled) {
+    if (config.devToolsAiAssistancePerformanceAgent?.enabled) {
       return i18nString(UIStrings.explainStylingNetworkPerformanceAndFile);
     }
-    if (config.devToolsAiAssistanceFileAgent?.enabled || config.devToolsAiAssistanceFileAgentDogfood?.enabled) {
+    if (config.devToolsAiAssistanceFileAgent?.enabled) {
       return i18nString(UIStrings.explainStylingNetworkAndFile);
     }
-    if (config.devToolsAiAssistanceNetworkAgent?.enabled || config.devToolsExplainThisResourceDogfood?.enabled) {
+    if (config.devToolsAiAssistanceNetworkAgent?.enabled) {
       return i18nString(UIStrings.explainStylingAndNetworkRequest);
     }
     return i18nString(UIStrings.explainStyling);
@@ -538,9 +532,6 @@ export class AISettingsTab extends LegacyWrapper.LegacyWrapper.WrappableComponen
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
     LitHtml.render(html`
-      <header>
-        <h1>${i18nString(UIStrings.aiInnovations)}</h1>
-      </header>
       <div class="settings-container-wrapper" jslog=${VisualLogging.pane('chrome-ai')}>
         ${this.#renderSharedDisclaimer()}
         ${this.#consoleInsightsSetting || this.#aiAssistanceSetting ? html`

package/front_end/panels/settings/KeybindsSettingsTab.ts

@@ -23,7 +23,7 @@ const UIStrings = {
   /**
    *@description Text appearing before a select control offering users their choice of keyboard shortcut presets.
    */
-  matchShortcutsFromPreset: 'Match shortcuts from preset',
+  matchShortcutsFromPreset: 'Shortcut preset',
   /**
    *@description Screen reader label for list of keyboard shortcuts in settings
    */
@@ -303,7 +303,7 @@ export class KeybindsSettingsTab extends UI.Widget.VBox implements UI.ListContro
     }
   }
 
-  update(): void {
+  override update(): void {
     if (this.editingItem) {
       this.stopEditing(this.editingItem);
     }
@@ -478,7 +478,8 @@ export class ShortcutListItem {
             UI.ARIAUtils.alert(i18nString(UIStrings.shortcutRemoved, {PH1: this.item.title()}));
           }));
     } else {
-      const keys = shortcut.descriptors.flatMap(descriptor => descriptor.name.split(' + '));
+      const separator = Host.Platform.isMac() ? '\u2004' : ' + ';
+      const keys = shortcut.descriptors.flatMap(descriptor => descriptor.name.split(separator));
       keys.forEach(key => {
         shortcutElement.createChild('div', 'keybinds-key').createChild('span').textContent = key;
       });

package/front_end/panels/settings/SettingsScreen.ts

@@ -34,6 +34,8 @@ 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 IconButton from '../../ui/components/icon_button/icon_button.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 +46,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 +59,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
    */
@@ -104,6 +102,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 +244,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 +262,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 +309,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 +346,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 +356,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 +378,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 +396,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 +434,45 @@ 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;
+    subsection.classList.add('experiments-warning-subsection');
+    const warningIcon = IconButton.Icon.create('warning');
+    subsection.appendChild(warningIcon);
+    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);
 }
 
@@ -49,7 +51,7 @@
   flex: auto;
 }
 
-.ignore-list-item > [is="dt-checkbox"] {
+.ignore-list-item > dt-checkbox {
   width: 100%;
 }
 

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,20 @@
   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;
-}
+  border-bottom: var(--sys-size-1) solid var(--sys-color-divider);
 
-.keybinds-list-item:not(.keybinds-category-header) {
-  border-top: 1px solid var(--sys-color-divider);
+  &:last-of-type {
+    border-bottom: unset;
+  }
 }
 
 .keybinds-list-item:focus-visible {
@@ -43,7 +44,7 @@
 }
 
 .keybinds-list-text.keybinds-action-name {
-  grid-row: 1 / 3;
+  grid-row: 1 / 1;
 }
 
 .keybinds-shortcut,
@@ -108,12 +109,13 @@
   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),
-.keybinds-list-item-wrapper:has(.keybinds-list-item:not(.keybinds-editing)):focus-within {
+.keybinds-list-item-wrapper:has(
+  .keybinds-list-item:not(.keybinds-editing)):focus-within {
   background: var(--sys-color-state-hover-on-subtle);
 }
 

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

@@ -101,7 +101,9 @@ UI.ViewManager.registerViewExtension({
   iconName: 'button-magic',
   settings: ['console-insights-enabled'],
   condition: config => {
-    return (config?.devToolsConsoleInsights?.enabled || config?.devToolsFreestyler?.enabled) ?? false;
+    return (config?.aidaAvailability?.enabled &&
+            (config?.devToolsConsoleInsights?.enabled || config?.devToolsFreestyler?.enabled)) ??
+        false;
   },
 });