chrome-devtools-frontend 1.0.1386602 → 1.0.1402249

package/front_end/panels/settings/AISettingsTab.ts

@@ -6,6 +6,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 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 type * as IconButton from '../../ui/components/icon_button/icon_button.js';
 import * as Input from '../../ui/components/input/input.js';
@@ -46,8 +47,12 @@ const UIStrings = {
   /**
    *@description Text describing a fact to consider when using AI features
    */
-  adminSettings:
-      'Depending on your Google account management and/or region, Google may refrain from data collection. Depending on your organization’s settings, features available to managed users may vary.',
+  dataCollection: 'Depending on your region, Google may refrain from data collection.',
+  /**
+   *@description Text describing a fact to consider when using AI features
+   */
+  dataCollectionNoLogging:
+      'Your content will not be used by human reviewers to improve AI. Your organization may change these settings at any time. Depending on your Google account management and/or region, Google may refrain from data collection.',
   /**
    *@description Text describing the 'Console Insights' feature
    */
@@ -149,7 +154,7 @@ const UIStrings = {
   /**
    * @description Message shown to the user if the age check is not successful.
    */
-  ageRestricted: 'This feature is only available to users who are 18 years of age or older',
+  ageRestricted: 'This feature is only available to users who are 18 years of age or older.',
   /**
    * @description The error message when the user is not logged in into Chrome.
    */
@@ -169,6 +174,7 @@ export class AISettingsTab extends LegacyWrapper.LegacyWrapper.WrappableComponen
   readonly #shadow = this.attachShadow({mode: 'open'});
   #consoleInsightsSetting?: Common.Settings.Setting<boolean>;
   #aiAssistanceSetting?: Common.Settings.Setting<boolean>;
+  #aiAssistanceHistorySetting?: Common.Settings.Setting<unknown[]>;
   #isConsoleInsightsSettingExpanded = false;
   #isAiAssistanceSettingExpanded = false;
   #aidaAvailability = Host.AidaClient.AidaAccessPreconditions.NO_ACCOUNT_EMAIL;
@@ -186,6 +192,13 @@ export class AISettingsTab extends LegacyWrapper.LegacyWrapper.WrappableComponen
     } catch {
       this.#aiAssistanceSetting = undefined;
     }
+    try {
+      this.#aiAssistanceHistorySetting =
+          // Name needs to match the one in AiHistoryStorage
+          Common.Settings.Settings.instance().moduleSetting('ai-assistance-history-entries');
+    } catch {
+      this.#aiAssistanceHistorySetting = undefined;
+    }
     this.#boundOnAidaAvailabilityChange = this.#onAidaAvailabilityChange.bind(this);
   }
 
@@ -284,6 +297,11 @@ export class AISettingsTab extends LegacyWrapper.LegacyWrapper.WrappableComponen
     if (!oldSettingValue && !this.#isAiAssistanceSettingExpanded) {
       this.#isAiAssistanceSettingExpanded = true;
     }
+
+    // If history was create create and the value changes to `false`
+    if (this.#aiAssistanceHistorySetting && !this.#aiAssistanceSetting.get()) {
+      this.#aiAssistanceHistorySetting.set([]);
+    }
     void this.render();
   }
 
@@ -313,12 +331,17 @@ export class AISettingsTab extends LegacyWrapper.LegacyWrapper.WrappableComponen
     const privacyNoticeLink = UI.XLink.XLink.create(
         'https://policies.google.com/privacy', i18nString(UIStrings.privacyNotice), undefined, undefined,
         'privacy-notice');
+    const noLogging = Common.Settings.Settings.instance().getHostConfig().aidaAvailability?.enterprisePolicyValue ===
+        Root.Runtime.GenAiEnterprisePolicyValue.ALLOW_WITHOUT_LOGGING;
 
     const bulletPoints = [
       {icon: 'psychiatry', text: i18nString(UIStrings.experimentalFeatures)},
-      {icon: 'google', text: i18nString(UIStrings.sendsDataToGoogle)},
+      ...noLogging ? [] : [{icon: 'google', text: i18nString(UIStrings.sendsDataToGoogle)}],
       {icon: 'calendar-today', text: i18nString(UIStrings.retainData)},
-      {icon: 'corporate-fare', text: i18nString(UIStrings.adminSettings)},
+      {
+        icon: 'corporate-fare',
+        text: noLogging ? i18nString(UIStrings.dataCollectionNoLogging) : i18nString(UIStrings.dataCollection),
+      },
       {
         icon: 'policy',
         text: html`${i18n.i18n.getFormatLocalizedString(str_, UIStrings.termsOfServicePrivacyNotice, {
@@ -355,24 +378,33 @@ export class AISettingsTab extends LegacyWrapper.LegacyWrapper.WrappableComponen
     // clang-format on
   }
 
-  #getDisabledReason(): string|undefined {
+  #getDisabledReasons(): string[] {
+    const reasons = [];
     switch (this.#aidaAvailability) {
       case Host.AidaClient.AidaAccessPreconditions.NO_ACCOUNT_EMAIL:
       case Host.AidaClient.AidaAccessPreconditions.SYNC_IS_PAUSED:
-        return i18nString(UIStrings.notLoggedIn);
-      case Host.AidaClient.AidaAccessPreconditions.NO_INTERNET:
-        return i18nString(UIStrings.offline);
+        reasons.push(i18nString(UIStrings.notLoggedIn));
+        break;
+      // @ts-expect-error
+      case Host.AidaClient.AidaAccessPreconditions.NO_INTERNET:  // fallthrough
+        reasons.push(i18nString(UIStrings.offline));
+      case Host.AidaClient.AidaAccessPreconditions.AVAILABLE: {
+        // No age check if there is no logged in user. Age check would always fail in that case.
+        const config = Common.Settings.Settings.instance().getHostConfig();
+        if (config?.aidaAvailability?.blockedByAge === true) {
+          reasons.push(i18nString(UIStrings.ageRestricted));
+        }
+      }
     }
-
-    const config = Common.Settings.Settings.instance().getHostConfig();
-    if (config?.aidaAvailability?.blockedByAge === true) {
-      return i18nString(UIStrings.ageRestricted);
-    }
-    // `consoleInsightsSetting` and `aiAssistantSetting` are both disabled for the same reason.
-    return this.#consoleInsightsSetting?.disabledReason();
+    // `consoleInsightsSetting` and `aiAssistantSetting` are both disabled for the same reasons.
+    const disabledReasons = this.#consoleInsightsSetting?.disabledReasons() || [];
+    reasons.push(...disabledReasons);
+    return reasons;
   }
 
-  #renderConsoleInsightsSetting(disabledReason?: string): LitHtml.TemplateResult {
+  #renderConsoleInsightsSetting(disabledReasons: string[]): LitHtml.TemplateResult {
+    const isDisabled = disabledReasons.length > 0;
+    const disabledReasonsJoined = disabledReasons.join('\n') || undefined;
     const detailsClasses = {
       'whole-row': true,
       open: this.#isConsoleInsightsSettingExpanded,
@@ -404,15 +436,15 @@ export class AISettingsTab extends LegacyWrapper.LegacyWrapper.WrappableComponen
       </div>
       <div class="divider"></div>
       <div class="toggle-container centered"
-        title=${ifDefined(disabledReason)}
+        title=${ifDefined(disabledReasonsJoined)}
         @click=${this.#toggleConsoleInsightsSetting.bind(this)}
       >
         <devtools-switch
-          .checked=${Boolean(this.#consoleInsightsSetting?.get()) && !Boolean(disabledReason)}
+          .checked=${Boolean(this.#consoleInsightsSetting?.get()) && !isDisabled}
           .jslogContext=${this.#consoleInsightsSetting?.name || ''}
-          .disabled=${Boolean(disabledReason)}
+          .disabled=${isDisabled}
           @switchchange=${this.#toggleConsoleInsightsSetting.bind(this)}
-          aria-label=${disabledReason || i18nString(UIStrings.enableConsoleInsights)}
+          aria-label=${disabledReasonsJoined || i18nString(UIStrings.enableConsoleInsights)}
         ></devtools-switch>
       </div>
       <div class=${classMap(detailsClasses)}>
@@ -440,7 +472,9 @@ export class AISettingsTab extends LegacyWrapper.LegacyWrapper.WrappableComponen
     // clang-format on
   }
 
-  #renderAiAssistanceSetting(disabledReason?: string): LitHtml.TemplateResult {
+  #renderAiAssistanceSetting(disabledReasons: string[]): LitHtml.TemplateResult {
+    const isDisabled = disabledReasons.length > 0;
+    const disabledReasonsJoined = disabledReasons.join('\n') || undefined;
     const detailsClasses = {
       'whole-row': true,
       open: this.#isAiAssistanceSettingExpanded,
@@ -472,15 +506,15 @@ export class AISettingsTab extends LegacyWrapper.LegacyWrapper.WrappableComponen
       </div>
       <div class="divider"></div>
       <div class="toggle-container centered"
-        title=${ifDefined(disabledReason)}
+        title=${ifDefined(disabledReasonsJoined)}
         @click=${this.#toggleAiAssistanceSetting.bind(this)}
       >
         <devtools-switch
-          .checked=${Boolean(this.#aiAssistanceSetting?.get()) && !Boolean(disabledReason)}
+          .checked=${Boolean(this.#aiAssistanceSetting?.get()) && !isDisabled}
           .jslogContext=${this.#aiAssistanceSetting?.name || ''}
-          .disabled=${Boolean(disabledReason)}
+          .disabled=${isDisabled}
           @switchchange=${this.#toggleAiAssistanceSetting.bind(this)}
-          aria-label=${disabledReason || i18nString(UIStrings.enableAiAssistance)}
+          aria-label=${disabledReasonsJoined || i18nString(UIStrings.enableAiAssistance)}
         ></devtools-switch>
       </div>
       <div class=${classMap(detailsClasses)}>
@@ -508,26 +542,30 @@ export class AISettingsTab extends LegacyWrapper.LegacyWrapper.WrappableComponen
     // clang-format on
   }
 
-  #renderDisabledExplainer(disabledReason: string): LitHtml.LitTemplate {
+  #renderDisabledExplainer(disabledReasons: string[]): LitHtml.LitTemplate {
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
     return html`
       <div class="disabled-explainer">
-        <devtools-icon .data=${{
-          iconName: 'warning',
-          color: 'var(--sys-color-orange)',
-          width: 'var(--sys-size-8)',
-          height: 'var(--sys-size-8)',
-        } as IconButton.Icon.IconData}>
-        </devtools-icon>
-        ${disabledReason}
+        ${disabledReasons.map(reason => html`
+          <div class="disabled-explainer-row">
+            <devtools-icon .data=${{
+              iconName: 'warning',
+              color: 'var(--sys-color-orange)',
+              width: 'var(--sys-size-8)',
+              height: 'var(--sys-size-8)',
+            } as IconButton.Icon.IconData}>
+            </devtools-icon>
+            ${reason}
+          </div>
+        `)}
       </div>
     `;
     // clang-format on
   }
 
   override async render(): Promise<void> {
-    const disabledReason = this.#getDisabledReason();
+    const disabledReasons = this.#getDisabledReasons();
 
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
@@ -535,10 +573,10 @@ export class AISettingsTab extends LegacyWrapper.LegacyWrapper.WrappableComponen
       <div class="settings-container-wrapper" jslog=${VisualLogging.pane('chrome-ai')}>
         ${this.#renderSharedDisclaimer()}
         ${this.#consoleInsightsSetting || this.#aiAssistanceSetting ? html`
-          ${Boolean(disabledReason) ? this.#renderDisabledExplainer(disabledReason as string) : LitHtml.nothing}
+          ${disabledReasons.length ? this.#renderDisabledExplainer(disabledReasons) : LitHtml.nothing}
           <div class="settings-container">
-            ${this.#consoleInsightsSetting ? this.#renderConsoleInsightsSetting(disabledReason) : LitHtml.nothing}
-            ${this.#aiAssistanceSetting ? this.#renderAiAssistanceSetting(disabledReason) : LitHtml.nothing}
+            ${this.#consoleInsightsSetting ? this.#renderConsoleInsightsSetting(disabledReasons) : LitHtml.nothing}
+            ${this.#aiAssistanceSetting ? this.#renderAiAssistanceSetting(disabledReasons) : LitHtml.nothing}
           </div>
         ` : LitHtml.nothing}
       </div>

package/front_end/panels/settings/FrameworkIgnoreListSettingsTab.ts

@@ -55,7 +55,7 @@ const UIStrings = {
   /**
    *@description Text of the add pattern button in Framework Ignore List Settings Tab of the Settings
    */
-  addPattern: 'Add regex rule...',
+  addPattern: 'Add regex rule',
   /**
    *@description Aria accessible name in Framework Ignore List Settings Tab of the Settings
    */
@@ -230,8 +230,8 @@ export class FrameworkIgnoreListSettingsTab extends UI.Widget.VBox implements
 
     const listSetting = this.setting;
 
-    const checkbox =
-        UI.UIUtils.CheckboxLabel.create(item.pattern, !item.disabled, undefined, 'settings.ignore-list-pattern');
+    const checkbox = UI.UIUtils.CheckboxLabel.createWithStringLiteral(
+        item.pattern, !item.disabled, undefined, 'settings.ignore-list-pattern');
     const helpText = i18nString(UIStrings.ignoreScriptsWhoseNamesMatchS, {PH1: item.pattern});
     UI.Tooltip.Tooltip.install(checkbox, helpText);
     checkbox.checkboxElement.ariaLabel = helpText;

package/front_end/panels/settings/KeybindsSettingsTab.ts

@@ -159,16 +159,14 @@ export class KeybindsSettingsTab extends UI.Widget.VBox implements UI.ListContro
   }
 
   createElementForItem(item: KeybindsItem): Element {
-    const itemWrapper = document.createElement('div');
-    itemWrapper.classList.add('keybinds-list-item-wrapper');
+    const element = document.createElement('div');
 
     let itemContent;
     if (typeof item === 'string') {
-      itemWrapper.classList.add('keybinds-header-wrapper');
-      UI.ARIAUtils.setLevel(itemWrapper, 1);
-      itemContent = itemWrapper.createChild('div');
+      itemContent = element;
       itemContent.classList.add('keybinds-category-header');
       itemContent.textContent = UI.ActionRegistration.getLocalizedActionCategory(item);
+      UI.ARIAUtils.setLevel(itemContent, 1);
     } else {
       const listItem = new ShortcutListItem(item, this, item === this.editingItem);
       itemContent = listItem.element;
@@ -177,12 +175,13 @@ export class KeybindsSettingsTab extends UI.Widget.VBox implements UI.ListContro
         this.editingRow = listItem;
       }
       itemContent.classList.add('keybinds-list-item');
-      itemWrapper.appendChild(itemContent);
+      element.classList.add('keybinds-list-item-wrapper');
+      element.appendChild(itemContent);
     }
 
     UI.ARIAUtils.markAsListitem(itemContent);
     itemContent.tabIndex = item === this.list.selectedItem() && item !== this.editingItem ? 0 : -1;
-    return itemWrapper;
+    return element;
   }
 
   commitChanges(
@@ -445,7 +444,7 @@ export class ShortcutListItem {
     }
     const shortcutElement = this.element.createChild('div', 'keybinds-shortcut keybinds-list-text');
     if (this.isEditing) {
-      const shortcutInput = shortcutElement.createChild('input', 'harmony-input') as HTMLInputElement;
+      const shortcutInput = shortcutElement.createChild('input', 'harmony-input');
       shortcutInput.setAttribute('jslog', `${VisualLogging.textField().track({change: true})}`);
       shortcutInput.spellcheck = false;
       shortcutInput.maxLength = 0;

package/front_end/panels/settings/SettingsScreen.ts

@@ -122,9 +122,7 @@ export class SettingsScreen extends UI.Widget.VBox implements UI.View.ViewLocati
     const settingsLabelElement = document.createElement('div');
     settingsLabelElement.classList.add('settings-window-label-element');
     const settingsTitleElement =
-        UI.UIUtils
-            .createShadowRootWithCoreStyles(
-                settingsLabelElement, {cssFile: [settingsScreenStyles], delegatesFocus: undefined})
+        UI.UIUtils.createShadowRootWithCoreStyles(settingsLabelElement, {cssFile: [settingsScreenStyles]})
             .createChild('div', 'settings-window-title');
 
     UI.ARIAUtils.markAsHeading(settingsTitleElement, 1);
@@ -166,6 +164,7 @@ export class SettingsScreen extends UI.Widget.VBox implements UI.View.ViewLocati
 
     settingsScreen.reportTabOnReveal = true;
     const dialog = new UI.Dialog.Dialog('settings');
+    dialog.contentElement.removeAttribute('aria-modal');
     dialog.contentElement.tabIndex = -1;
     dialog.addCloseButton();
     dialog.setOutsideClickCallback(() => {});
@@ -477,7 +476,8 @@ export class ExperimentsSettingsTab extends SettingsTab {
   }
 
   private createExperimentCheckbox(experiment: Root.Runtime.Experiment): HTMLParagraphElement {
-    const label = UI.UIUtils.CheckboxLabel.create(experiment.title, experiment.isEnabled(), undefined, experiment.name);
+    const label = UI.UIUtils.CheckboxLabel.createWithStringLiteral(
+        experiment.title, experiment.isEnabled(), undefined, experiment.name);
     label.classList.add('experiment-label');
     const input = label.checkboxElement;
     input.name = experiment.name;

package/front_end/panels/settings/aiSettingsTab.css

@@ -8,6 +8,11 @@
   box-sizing: border-box;
 }
 
+:host {
+  container-type: inline-size; /* stylelint-disable-line property-no-unknown */
+  container-name: ai-settings; /* stylelint-disable-line property-no-unknown */
+}
+
 .shared-disclaimer {
   background: linear-gradient(135deg, var(--sys-color-gradient-primary), var(--sys-color-gradient-tertiary));
   border-radius: var(--sys-size-5);
@@ -154,7 +159,8 @@
   flex-direction: column;
 }
 
-@media (min-width: 640px) {
+/* stylelint-disable-next-line at-rule-no-unknown */
+@container ai-settings (min-width: 480px) {
   .settings-container-wrapper {
     align-items: center;
   }
@@ -166,14 +172,18 @@ header {
 }
 
 .disabled-explainer {
-  display: flex;
-  gap: var(--sys-size-6);
   background-color: var(--sys-color-surface-yellow);
   border-radius: var(--sys-shape-corner-medium-small);
   margin-top: var(--sys-size-11);
-  padding: var(--sys-size-8) var(--sys-size-11);
+  padding: var(--sys-size-6) var(--sys-size-11) var(--sys-size-8);
   width: 100%;
   max-width: var(--sys-size-35);
   min-width: var(--sys-size-28);
   color: var(--sys-color-yellow);
 }
+
+.disabled-explainer-row {
+  display: flex;
+  gap: var(--sys-size-6);
+  margin-top: var(--sys-size-4);
+}

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

@@ -4,7 +4,7 @@
 
 import {renderElementIntoDOM} from '../../../testing/DOMHelpers.js';
 import {createFakeSetting, describeWithLocale} from '../../../testing/EnvironmentHelpers.js';
-import * as Coordinator from '../../../ui/components/render_coordinator/render_coordinator.js';
+import * as RenderCoordinator from '../../../ui/components/render_coordinator/render_coordinator.js';
 import * as SettingComponents from '../../../ui/components/settings/settings.js';
 
 import * as PanelComponents from './components.js';
@@ -14,7 +14,7 @@ async function renderSyncSection(data: PanelComponents.SyncSection.SyncSectionDa
   const section = new PanelComponents.SyncSection.SyncSection();
   renderElementIntoDOM(section);
   section.data = data;
-  await Coordinator.RenderCoordinator.RenderCoordinator.instance().done();
+  await RenderCoordinator.done();
   assert.isNotNull(section.shadowRoot);
   return {section, shadowRoot: section.shadowRoot};
 }

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

@@ -88,7 +88,7 @@ export class SyncSection extends HTMLElement {
 }
 
 /* x-link doesn't work with custom click/keydown handlers */
-/* eslint-disable rulesdir/ban_a_tags_in_lit_html */
+/* eslint-disable rulesdir/no-a-tags-in-lit-html */
 
 function renderAccountInfoOrWarning(syncInfo: Host.InspectorFrontendHostAPI.SyncInformation): LitHtml.TemplateResult {
   if (!syncInfo.isSyncActive) {

package/front_end/panels/settings/emulation/DevicesSettingsTab.ts

@@ -24,7 +24,7 @@ const UIStrings = {
   /**
    *@description Button to add a custom device (e.g. phone, tablet) the Device Toolbar.
    */
-  addCustomDevice: 'Add custom device...',
+  addCustomDevice: 'Add custom device',
   /**
    *@description Label/title for UI to add a new custom device type. Device means mobile/tablet etc.
    */
@@ -189,7 +189,7 @@ export class DevicesSettingsTab extends UI.Widget.VBox implements
   renderItem(device: EmulationModel.EmulatedDevices.EmulatedDevice, editable: boolean): Element {
     const label = document.createElement('label');
     label.classList.add('devices-list-item');
-    const checkbox = (label.createChild('input', 'devices-list-checkbox') as HTMLInputElement);
+    const checkbox = label.createChild('input', 'devices-list-checkbox');
     checkbox.type = 'checkbox';
     checkbox.checked = device.show();
     checkbox.addEventListener('click', onItemClicked.bind(this), false);

package/front_end/panels/settings/emulation/components/userAgentClientHintsForm.css

@@ -23,8 +23,7 @@
   display: grid;
   grid-template-columns: 1fr 1fr 1fr auto;
   align-items: center;
-  column-gap: 10px;
-  row-gap: 8px;
+  gap: 8px 10px;
   padding: 0 10px;
 }
 

package/front_end/panels/settings/emulation/devicesSettingsTab.css

@@ -10,7 +10,9 @@
 }
 
 .list {
-  border: none;
+  &:has(div) {
+    border: none;
+  }
 }
 
 #custom-device-add-button {

package/front_end/panels/settings/emulation/utils/StructuredHeaders.test.ts

@@ -55,7 +55,7 @@ function assertParams(
   assert.lengthOf(result.items, expectParams.length);
   for (let i = 0; i < expectParams.length; ++i) {
     assert.strictEqual(result.items[i].name.value, expectParams[i][0]);
-    assert.deepStrictEqual(result.items[i].value, expectParams[i][1], 'Param ' + i + ' value mismatch');
+    assert.deepEqual(result.items[i].value, expectParams[i][1], 'Param ' + i + ' value mismatch');
   }
 }
 
@@ -88,7 +88,7 @@ function assertListItem(
     assert.fail('Unexpected inner list when an item expected');
     return;
   }
-  assert.deepStrictEqual(
+  assert.deepEqual(
       item.value, expectValue,
       'List item bare value mismatch, ' + item.value.value + ' vs expected ' + expectValue.value);
   assertItemParams(item, expectParams);

package/front_end/panels/settings/keybindsSettingsTab.css

@@ -28,11 +28,7 @@
   display: grid;
   grid-template-rows: 1fr;
   grid-template-columns: 1fr 30px 2fr 30px 30px;
-  border-bottom: var(--sys-size-1) solid var(--sys-color-divider);
-
-  &:last-of-type {
-    border-bottom: unset;
-  }
+  border-top: var(--sys-size-1) solid var(--app-color-card-divider);
 }
 
 .keybinds-list-item:focus-visible {
@@ -107,13 +103,13 @@
   height: var(--sys-size-13);
   padding: var(--sys-size-4) var(--sys-size-7);
   white-space: nowrap;
-}
 
-.keybinds-list-item-wrapper + .keybinds-header-wrapper {
-  margin-top: var(--sys-size-9);
+  + .keybinds-list-item-wrapper > .keybinds-list-item {
+    border-top: unset;
+  }
 }
 
-.keybinds-list-item-wrapper:has(:not(.keybinds-category-header):hover),
+.keybinds-list-item-wrapper:has(.keybinds-list-item:hover),
 .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/settingsScreen.css

@@ -10,8 +10,7 @@
 }
 
 .settings-content {
-  overflow-y: auto;
-  overflow-x: hidden;
+  overflow: hidden auto;
   margin: 8px 8px 8px 0;
   padding: 0 4px;
   flex: auto;
@@ -45,6 +44,7 @@ label {
   align-items: center;
   display: grid;
   row-gap: var(--sys-size-3);
+  margin: var(--sys-size-4) 0;
 }
 
 div:has(.settings-select) + div:has(.settings-select) {
@@ -73,29 +73,46 @@ div:has(.settings-select) + div:has(.settings-select) {
 
 .settings-card-container-wrapper {
   scrollbar-gutter: stable;
-  padding-bottom: var(--sys-size-8);
+  padding: var(--sys-size-8) 0;
   overflow: auto;
   position: absolute;
   inset: var(--sys-size-8) 0 0;
+  container-type: inline-size; /* stylelint-disable-line property-no-unknown */
+  container-name: settings-content; /* stylelint-disable-line property-no-unknown */
 }
 
-.settings-card-container {
+.settings-card-container,
+.settings-multicolumn-card-container {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: var(--sys-size-9);
+
+  > devtools-button {
+    min-width: var(--sys-size-31);
+    max-width: var(--sys-size-35);
+    width: 100%;
+    margin-left: var(--sys-size-5);
+  }
 }
 
-.settings-multicolumn-card-container {
-  column-width: var(--sys-size-32);
-  column-gap: var(--sys-size-11);
+/* In multi-column mode, we adopt single-column styles unless
+   enough space is available to actually show two columns (at 850px) */
+/* stylelint-disable-next-line at-rule-no-unknown */
+@container settings-content (min-width: 850px) {
+  .settings-multicolumn-card-container {
+    display: block;
+    column-width: var(--sys-size-32);
+    column-gap: var(--sys-size-11);
+    margin: 0 var(--sys-size-9);
 
-  > * + * {
-    margin-top: var(--sys-size-8);
-  }
+    > * + * {
+      margin-top: var(--sys-size-8);
+    }
 
-  > devtools-button {
-    margin-left: var(--sys-size-5);
+    > devtools-button {
+      align-self: start;
+    }
   }
 }
 
@@ -127,7 +144,8 @@ devtools-button.link-icon {
 }
 
 .experiment-label {
-  margin-right: 2px;
+  margin: var(--sys-size-3) var(--sys-size-2) var(--sys-size-3) 0;
+  white-space: normal;
 }
 
 .settings-experiment-unstable {

package/front_end/panels/sources/CSSPlugin.test.ts

@@ -77,7 +77,7 @@ describeWithMockConnection('CSSPlugin', () => {
     sinon.stub(SDK.CSSModel.CSSModel.prototype, 'getClassNames').withArgs(STYLESHEET_ID).resolves(CLASS_NAMES);
     const completionResult =
         await autocompletion!({state: {field: () => {}}} as unknown as CodeMirror.CompletionContext);
-    assert.deepStrictEqual(completionResult, {
+    assert.deepEqual(completionResult, {
       from: FROM,
       options: [
         {type: 'constant', label: CLASS_NAMES[0]},

package/front_end/panels/sources/CallStackSidebarPane.ts

@@ -402,7 +402,7 @@ export class CallStackSidebarPane extends UI.View.SimpleView implements UI.Conte
     element.classList.add('ignore-listed-message');
     const label = element.createChild('label');
     label.classList.add('ignore-listed-message-label');
-    const checkbox = label.createChild('input') as HTMLInputElement;
+    const checkbox = label.createChild('input');
     checkbox.tabIndex = 0;
     checkbox.type = 'checkbox';
     checkbox.classList.add('ignore-listed-checkbox');

package/front_end/panels/sources/DebuggerPausedMessage.ts

@@ -123,9 +123,9 @@ export class DebuggerPausedMessage {
     this.elementInternal.classList.add('paused-message');
     this.elementInternal.classList.add('flex-none');
     this.elementInternal.setAttribute('jslog', `${VisualLogging.dialog('debugger-paused')}`);
-    const root = UI.UIUtils.createShadowRootWithCoreStyles(
-        this.elementInternal, {cssFile: [debuggerPausedMessageStyles], delegatesFocus: undefined});
-    this.contentElement = (root.createChild('div') as HTMLElement);
+    const root =
+        UI.UIUtils.createShadowRootWithCoreStyles(this.elementInternal, {cssFile: [debuggerPausedMessageStyles]});
+    this.contentElement = root.createChild('div');
     UI.ARIAUtils.markAsPoliteLiveRegion(this.elementInternal, false);
   }
 

package/front_end/panels/sources/DebuggerPlugin.test.ts

@@ -94,7 +94,7 @@ describeWithMockConnection('Inline variable view scope helpers', () => {
         await Sources.DebuggerPlugin.computeScopeMappings(callFrame, l => toOffsetWithSourceMap(sourceMap, l));
 
     const text = new TextUtils.Text.Text(originalSource);
-    assert.strictEqual(scopeMappings.length, 1);
+    assert.lengthOf(scopeMappings, 1);
     assert.strictEqual(
         scopeMappings[0].scopeStart,
         text.offsetFromPosition(expectedOffsets[0].startLine, expectedOffsets[0].startColumn));
@@ -144,7 +144,7 @@ describeWithMockConnection('Inline variable view scope helpers', () => {
         await Sources.DebuggerPlugin.computeScopeMappings(callFrame, l => toOffsetWithSourceMap(sourceMap, l));
 
     const text = new TextUtils.Text.Text(originalSource);
-    assert.strictEqual(scopeMappings.length, 2);
+    assert.lengthOf(scopeMappings, 2);
     assert.strictEqual(
         scopeMappings[0].scopeStart,
         text.offsetFromPosition(expectedOffsets[0].startLine, expectedOffsets[0].startColumn));
@@ -174,7 +174,7 @@ describeWithMockConnection('Inline variable view scope helpers', () => {
 
     const scopeMappings = await Sources.DebuggerPlugin.computeScopeMappings(callFrame, l => toOffset(source, l));
 
-    assert.strictEqual(scopeMappings.length, 1);
+    assert.lengthOf(scopeMappings, 1);
     assert.strictEqual(scopeMappings[0].scopeStart, expectedOffsets[0].startColumn);
     assert.strictEqual(scopeMappings[0].scopeEnd, expectedOffsets[0].endColumn);
     assert.strictEqual(scopeMappings[0].variableMap.get('a')?.value, 1);
@@ -194,7 +194,7 @@ describeWithMockConnection('Inline variable view scope helpers', () => {
 
     const scopeMappings = await Sources.DebuggerPlugin.computeScopeMappings(callFrame, l => toOffset(source, l));
 
-    assert.strictEqual(scopeMappings.length, 2);
+    assert.lengthOf(scopeMappings, 2);
     assert.strictEqual(scopeMappings[0].scopeStart, expectedOffsets[0].startColumn);
     assert.strictEqual(scopeMappings[0].scopeEnd, expectedOffsets[0].endColumn);
     assert.strictEqual(scopeMappings[0].variableMap.size, 0);
@@ -217,7 +217,7 @@ describeWithMockConnection('Inline variable view scope helpers', () => {
 
     const scopeMappings = await Sources.DebuggerPlugin.computeScopeMappings(callFrame, l => toOffset(source, l));
 
-    assert.strictEqual(scopeMappings.length, 2);
+    assert.lengthOf(scopeMappings, 2);
     assert.strictEqual(scopeMappings[0].scopeStart, expectedOffsets[0].startColumn);
     assert.strictEqual(scopeMappings[0].scopeEnd, expectedOffsets[0].endColumn);
     assert.strictEqual(scopeMappings[0].variableMap.size, 1);