chrome-devtools-frontend 1.0.1473514 → 1.0.1506453

package/front_end/panels/settings/KeybindsSettingsTab.ts

@@ -19,84 +19,84 @@ import settingsScreenStyles from './settingsScreen.css.js';
 
 const UIStrings = {
   /**
-   *@description Text for keyboard shortcuts
+   * @description Text for keyboard shortcuts
    */
   shortcuts: 'Shortcuts',
   /**
-   *@description Text appearing before a select control offering users their choice of keyboard shortcut presets.
+   * @description Text appearing before a select control offering users their choice of keyboard shortcut presets.
    */
   matchShortcutsFromPreset: 'Shortcut preset',
   /**
-   *@description Screen reader label for list of keyboard shortcuts in settings
+   * @description Screen reader label for list of keyboard shortcuts in settings
    */
   keyboardShortcutsList: 'Keyboard shortcuts list',
   /**
-   *@description Screen reader label for an icon denoting a shortcut that has been changed from its default
+   * @description Screen reader label for an icon denoting a shortcut that has been changed from its default
    */
   shortcutModified: 'Shortcut modified',
   /**
-   *@description Screen reader label for an empty shortcut cell in custom shortcuts settings tab
+   * @description Screen reader label for an empty shortcut cell in custom shortcuts settings tab
    */
   noShortcutForAction: 'No shortcut for action',
   /**
-   *@description Link text in the settings pane to add another shortcut for an action
+   * @description Link text in the settings pane to add another shortcut for an action
    */
   addAShortcut: 'Add a shortcut',
   /**
-   *@description Label for a button in the settings pane that confirms changes to a keyboard shortcut
+   * @description Label for a button in the settings pane that confirms changes to a keyboard shortcut
    */
   confirmChanges: 'Confirm changes',
   /**
-   *@description Label for a button in the settings pane that discards changes to the shortcut being edited
+   * @description Label for a button in the settings pane that discards changes to the shortcut being edited
    */
   discardChanges: 'Discard changes',
   /**
-   *@description Label for a button in the settings pane that removes a keyboard shortcut.
+   * @description Label for a button in the settings pane that removes a keyboard shortcut.
    */
   removeShortcut: 'Remove shortcut',
   /**
-   *@description Label for a button in the settings pane that edits a keyboard shortcut
+   * @description Label for a button in the settings pane that edits a keyboard shortcut
    */
   editShortcut: 'Edit shortcut',
   /**
-   *@description Message shown in settings when the user inputs a modifier-only shortcut such as Ctrl+Shift.
+   * @description Message shown in settings when the user inputs a modifier-only shortcut such as Ctrl+Shift.
    */
   shortcutsCannotContainOnly: 'Shortcuts cannot contain only modifier keys.',
   /**
-   *@description Messages shown in shortcuts settings when the user inputs a shortcut that is already in use.
-   *@example {Performance} PH1
-   *@example {Start/stop recording} PH2
+   * @description Messages shown in shortcuts settings when the user inputs a shortcut that is already in use.
+   * @example {Performance} PH1
+   * @example {Start/stop recording} PH2
    */
   thisShortcutIsInUseByS: 'This shortcut is in use by {PH1}: {PH2}.',
   /**
-   *@description Message shown in settings when to restore default shortcuts.
+   * @description Message shown in settings when to restore default shortcuts.
    */
   RestoreDefaultShortcuts: 'Restore default shortcuts',
   /**
-   *@description Message shown in settings to show the full list of keyboard shortcuts.
+   * @description Message shown in settings to show the full list of keyboard shortcuts.
    */
   FullListOfDevtoolsKeyboard: 'Full list of DevTools keyboard shortcuts and gestures',
   /**
-   *@description Label for a button in the shortcut editor that resets all shortcuts for the current action.
+   * @description Label for a button in the shortcut editor that resets all shortcuts for the current action.
    */
   ResetShortcutsForAction: 'Reset shortcuts for action',
   /**
-   *@description Screen reader announcement for shortcut removed
-   *@example {Start/stop recording} PH1
+   * @description Screen reader announcement for shortcut removed
+   * @example {Start/stop recording} PH1
    */
   shortcutRemoved: '{PH1} Shortcut removed',
   /**
-   *@description Screen reader announcment for shortcut restored to default
+   * @description Screen reader announcement for shortcut restored to default
    */
   shortcutChangesRestored: 'Changes to shortcut restored to default',
   /**
-   *@description Screen reader announcment for applied short cut changes
+   * @description Screen reader announcement for applied short cut changes
    */
   shortcutChangesApplied: 'Changes to shortcut applied',
   /**
-   *@description Screen reader announcment for discarded short cut changes
+   * @description Screen reader announcement for discarded short cut changes
    */
-  shortcutChangesDiscared: 'Changes to shortcut discarded',
+  shortcutChangesDiscarded: 'Changes to shortcut discarded',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/settings/KeybindsSettingsTab.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -108,11 +108,12 @@ export class KeybindsSettingsTab extends UI.Widget.VBox implements UI.ListContro
   private editingRow: ShortcutListItem|null;
 
   constructor() {
-    super(true);
+    super({
+      jslog: `${VisualLogging.pane('keybinds')}`,
+      useShadowDom: true,
+    });
     this.registerRequiredCSS(keybindsSettingsTabStyles, settingsScreenStyles);
 
-    this.element.setAttribute('jslog', `${VisualLogging.pane('keybinds')}`);
-
     const settingsContent =
         this.contentElement.createChild('div', 'settings-card-container-wrapper').createChild('div');
     settingsContent.classList.add('settings-card-container');
@@ -404,13 +405,13 @@ export class ShortcutListItem {
     this.confirmButton = this.createIconButton(
         i18nString(UIStrings.confirmChanges), 'checkmark', 'keybinds-confirm-button', 'confirm', () => {
           this.settingsTab.commitChanges(this.item, this.editedShortcuts);
-          UI.ARIAUtils.alert(i18nString(UIStrings.shortcutChangesApplied, {PH1: this.item.title()}));
+          UI.ARIAUtils.LiveAnnouncer.alert(i18nString(UIStrings.shortcutChangesApplied, {PH1: this.item.title()}));
         });
     this.element.appendChild(this.confirmButton);
     this.element.appendChild(
         this.createIconButton(i18nString(UIStrings.discardChanges), 'cross', 'keybinds-cancel-button', 'cancel', () => {
           this.settingsTab.stopEditing(this.item);
-          UI.ARIAUtils.alert(i18nString(UIStrings.shortcutChangesDiscared));
+          UI.ARIAUtils.LiveAnnouncer.alert(i18nString(UIStrings.shortcutChangesDiscarded));
         }));
     this.element.addEventListener('keydown', event => {
       if (Platform.KeyboardUtilities.isEscKey(event)) {
@@ -473,7 +474,7 @@ export class ShortcutListItem {
             this.update();
             this.focus();
             this.validateInputs();
-            UI.ARIAUtils.alert(i18nString(UIStrings.shortcutRemoved, {PH1: this.item.title()}));
+            UI.ARIAUtils.LiveAnnouncer.alert(i18nString(UIStrings.shortcutRemoved, {PH1: this.item.title()}));
           }));
     } else {
       const separator = Host.Platform.isMac() ? '\u2004' : ' + ';
@@ -583,7 +584,7 @@ export class ShortcutListItem {
     });
     this.update();
     this.focus();
-    UI.ARIAUtils.alert(i18nString(UIStrings.shortcutChangesRestored, {PH1: this.item.title()}));
+    UI.ARIAUtils.LiveAnnouncer.alert(i18nString(UIStrings.shortcutChangesRestored, {PH1: this.item.title()}));
   }
 
   onEscapeKeyPressed(event: Event): void {

package/front_end/panels/settings/SettingsScreen.ts

@@ -53,35 +53,35 @@ 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.
+   * @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
+   * @description Name of the Settings view
    */
   settings: 'Settings',
   /**
-   *@description Text for keyboard shortcuts
+   * @description Text for keyboard shortcuts
    */
   shortcuts: 'Shortcuts',
   /**
-   *@description Text of button in Settings Screen of the Settings
+   * @description Text of button in Settings Screen of the Settings
    */
   restoreDefaultsAndReload: 'Restore defaults and reload',
   /**
-   *@description Card header in Experiments settings tab that list all available stable experiments that can be turned on or off.
+   * @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.
+   * @description Message shown in the experiments panel to warn users about any possible unstable features.
    */
   theseExperimentsCouldBeUnstable: 'Warning: These experiments could be unstable or unreliable.',
   /**
-   *@description Message text content in Settings Screen of the Settings
+   * @description Message text content in Settings Screen of the Settings
    */
   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
+   * @description Message to display if a setting change requires a reload of DevTools
    */
   oneOrMoreSettingsHaveChanged: 'One or more settings have changed which requires a reload to take effect',
   /**
@@ -90,15 +90,15 @@ const UIStrings = {
    */
   noResults: 'No experiments match the filter',
   /**
-   *@description Text that is usually a hyperlink to more documentation
+   * @description Text that is usually a hyperlink to more documentation
    */
   learnMore: 'Learn more',
   /**
-   *@description Text that is usually a hyperlink to a feedback form
+   * @description Text that is usually a hyperlink to a feedback form
    */
   sendFeedback: 'Send feedback',
   /**
-   *@description Placeholder text in search bar
+   * @description Placeholder text in search bar
    */
   searchExperiments: 'Search experiments',
 } as const;
@@ -120,7 +120,7 @@ export class SettingsScreen extends UI.Widget.VBox implements UI.View.ViewLocati
   private reportTabOnReveal: boolean;
 
   private constructor() {
-    super(true);
+    super({useShadowDom: true});
     this.registerRequiredCSS(settingsScreenStyles);
 
     this.contentElement.classList.add('settings-window-main');
@@ -181,6 +181,7 @@ export class SettingsScreen extends UI.Widget.VBox implements UI.View.ViewLocati
     dialog.setEscapeKeyCallback(settingsScreen.onEscapeKeyPressed.bind(settingsScreen));
     dialog.setMarginBehavior(UI.GlassPane.MarginBehavior.NO_MARGIN);
     dialog.show();
+    dialog.contentElement.focus();
 
     return settingsScreen;
   }
@@ -251,13 +252,12 @@ export class GenericSettingsTab extends UI.Widget.VBox implements SettingsTab {
   #updateSyncSectionTimerId = -1;
 
   constructor() {
-    super();
+    super({jslog: `${VisualLogging.pane('preferences')}`});
     this.element.classList.add('settings-tab-container');
     this.element.id = 'preferences-tab-content';
     this.containerElement =
         this.contentElement.createChild('div', 'settings-card-container-wrapper').createChild('div');
 
-    this.element.setAttribute('jslog', `${VisualLogging.pane('preferences')}`);
     this.containerElement.classList.add('settings-multicolumn-card-container');
 
     // AI, GRID, MOBILE, EMULATION, and RENDERING are intentionally excluded from this list.
@@ -275,7 +275,7 @@ export class GenericSettingsTab extends UI.Widget.VBox implements SettingsTab {
       Common.Settings.SettingCategory.PERSISTENCE,
       Common.Settings.SettingCategory.DEBUGGER,
       Common.Settings.SettingCategory.GLOBAL,
-      Common.Settings.SettingCategory.SYNC,
+      Common.Settings.SettingCategory.ACCOUNT,
     ];
 
     // Some settings define their initial ordering.
@@ -360,9 +360,9 @@ export class GenericSettingsTab extends UI.Widget.VBox implements SettingsTab {
     // Always create the EXTENSIONS section and append the link handling control.
     if (category === Common.Settings.SettingCategory.EXTENSIONS) {
       this.createExtensionSection(settings);
-    } else if (category === Common.Settings.SettingCategory.SYNC && settings.length > 0) {
+    } else if (category === Common.Settings.SettingCategory.ACCOUNT && settings.length > 0) {
       const syncCard = createSettingsCard(
-          Common.SettingRegistration.getLocalizedSettingsCategory(Common.SettingRegistration.SettingCategory.SYNC),
+          Common.SettingRegistration.getLocalizedSettingsCategory(Common.SettingRegistration.SettingCategory.ACCOUNT),
           this.syncSection);
       this.containerElement.appendChild(syncCard);
     } else if (settings.length > 0) {
@@ -407,13 +407,12 @@ export class ExperimentsSettingsTab extends UI.Widget.VBox implements SettingsTa
   private readonly containerElement: HTMLElement;
 
   constructor() {
-    super();
+    super({jslog: `${VisualLogging.pane('experiments')}`});
     this.element.classList.add('settings-tab-container');
     this.element.id = 'experiments-tab-content';
     this.containerElement =
         this.contentElement.createChild('div', 'settings-card-container-wrapper').createChild('div');
     this.containerElement.classList.add('settings-card-container');
-    this.element.setAttribute('jslog', `${VisualLogging.pane('experiments')}`);
 
     const filterSection = this.containerElement.createChild('div');
     filterSection.classList.add('experiments-filter');
@@ -473,7 +472,7 @@ export class ExperimentsSettingsTab extends UI.Widget.VBox implements SettingsTa
     if (!stableExperiments.length && !unstableExperiments.length) {
       const warning = document.createElement('span');
       warning.textContent = i18nString(UIStrings.noResults);
-      UI.ARIAUtils.alert(warning.textContent);
+      UI.ARIAUtils.LiveAnnouncer.alert(warning.textContent);
       this.#experimentsSection = createSettingsCard(i18nString(UIStrings.experiments), warning);
       this.containerElement.appendChild(this.#experimentsSection);
     }

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

@@ -20,20 +20,32 @@ async function renderSyncSection(data: PanelComponents.SyncSection.SyncSectionDa
 }
 
 describeWithLocale('SyncSection', () => {
-  it('shows a warning when sync is not active', async () => {
+  it('shows a warning tooltip when sync is not active and the user is signed in', async () => {
     const syncSetting = createFakeSetting<boolean>('setting', true);
-    const {shadowRoot} = await renderSyncSection({syncInfo: {isSyncActive: false}, syncSetting});
-    const warning = shadowRoot.querySelector('.warning');
+    const {shadowRoot} = await renderSyncSection({
+      syncInfo: {
+        isSyncActive: false,
+        accountEmail: 'user@gmail.com',
+      },
+      syncSetting
+    });
+    const warning = shadowRoot.querySelector('devtools-tooltip');
     assert.instanceOf(warning, HTMLElement);
     assert.include(warning.innerText, 'To turn this setting on');
   });
 
-  it('shows a warning when sync is active but preferences bucket is not synced', async () => {
+  it('shows a warning tooltip when sync is active but preferences bucket is not synced', async () => {
     const syncSetting = createFakeSetting<boolean>('setting', true);
-    const {shadowRoot} =
-        await renderSyncSection({syncInfo: {isSyncActive: true, arePreferencesSynced: false}, syncSetting});
+    const {shadowRoot} = await renderSyncSection({
+      syncInfo: {
+        isSyncActive: true,
+        arePreferencesSynced: false,
+        accountEmail: 'user@gmail.com',
+      },
+      syncSetting
+    });
 
-    const warning = shadowRoot.querySelector('.warning');
+    const warning = shadowRoot.querySelector('devtools-tooltip');
     assert.instanceOf(warning, HTMLElement);
 
     assert.include(warning.innerText, 'To turn this setting on');
@@ -41,7 +53,13 @@ describeWithLocale('SyncSection', () => {
 
   it('disables the checkbox when sync is not active', async () => {
     const syncSetting = createFakeSetting<boolean>('setting', true);
-    const {shadowRoot} = await renderSyncSection({syncInfo: {isSyncActive: false}, syncSetting});
+    const {shadowRoot} = await renderSyncSection({
+      syncInfo: {
+        isSyncActive: false,
+        accountEmail: 'user@gmail.com',
+      },
+      syncSetting
+    });
 
     const settingCheckbox = shadowRoot.querySelector('setting-checkbox');
     assert.instanceOf(settingCheckbox, SettingComponents.SettingCheckbox.SettingCheckbox);
@@ -53,7 +71,7 @@ describeWithLocale('SyncSection', () => {
     assert.isTrue(checkbox.disabled);
   });
 
-  it('shows the avatar and email of the logged in user when sync is active', async () => {
+  it('shows the avatar and email of the logged in user', async () => {
     const syncSetting = createFakeSetting<boolean>('setting', true);
     const {shadowRoot} = await renderSyncSection({
       syncInfo: {
@@ -73,4 +91,20 @@ describeWithLocale('SyncSection', () => {
 
     assert.include(email.innerText, 'user@gmail.com');
   });
+
+  it('shows not signed in if the user is not logged in', async () => {
+    const syncSetting = createFakeSetting<boolean>('setting', true);
+    const {shadowRoot} = await renderSyncSection({
+      syncInfo: {
+        isSyncActive: false,
+        arePreferencesSynced: false,
+      },
+      syncSetting,
+    });
+
+    const email = shadowRoot.querySelector('.not-signed-in');
+    assert.instanceOf(email, HTMLElement);
+
+    assert.include(email.innerText, 'not signed into Chrome');
+  });
 });

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

@@ -5,11 +5,13 @@
 
 import '../../../ui/components/chrome_link/chrome_link.js';
 import '../../../ui/components/settings/settings.js';
+import '../../../ui/components/tooltips/tooltips.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';
+import * as Buttons from '../../../ui/components/buttons/buttons.js';
 import * as ComponentHelpers from '../../../ui/components/helpers/helpers.js';
 import * as Lit from '../../../ui/lit/lit.js';
 
@@ -28,16 +30,16 @@ const UIStrings = {
    * to a checkbox that is disabled.
    */
   preferencesSyncDisabled: 'To turn this setting on, you must first enable settings sync in Chrome.',
-  /**
-   * @description Label for a link that take the user to the "Sync" section of the
-   * chrome settings. The link is shown in the DevTools Settings UI.
-   */
-  settings: 'Go to Settings',
   /**
    * @description Label for the account email address. Shown in the DevTools Settings UI in
    * front of the email address currently used for Chrome Sync.
    */
   signedIn: 'Signed into Chrome as:',
+  /**
+   * @description Label for the account settings. Shown in the DevTools Settings UI in
+   * case the user is not logged in to Chrome.
+   */
+  notSignedIn: 'You\'re not signed into Chrome.',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/settings/components/SyncSection.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -61,7 +63,7 @@ export class SyncSection extends HTMLElement {
 
   #render(): void {
     if (!this.#syncSetting) {
-      throw new Error('SyncSection not properly initialized');
+      throw new Error('SyncSection is not properly initialized');
     }
 
     // TODO: this should not probably happen in render, instead, the setting
@@ -73,41 +75,72 @@ export class SyncSection extends HTMLElement {
     Lit.render(html`
       <style>${syncSectionStyles}</style>
       <fieldset>
-        ${renderAccountInfoOrWarning(this.#syncInfo)}
-        <setting-checkbox .data=${
-            {setting: this.#syncSetting}}>
-        </setting-checkbox>
+        ${renderAccountInfo(this.#syncInfo)}
+        ${renderSettingCheckboxIfNeeded(this.#syncInfo, this.#syncSetting)}
       </fieldset>
     `, this.#shadow, {host: this});
     // clang-format on
   }
 }
 
-/* x-link doesn't work with custom click/keydown handlers */
+function renderSettingCheckboxIfNeeded(
+    syncInfo: Host.InspectorFrontendHostAPI.SyncInformation,
+    syncSetting: Common.Settings.Setting<boolean>): Lit.LitTemplate {
+  if (!syncInfo.accountEmail) {
+    return Lit.nothing;
+  }
 
-function renderAccountInfoOrWarning(syncInfo: Host.InspectorFrontendHostAPI.SyncInformation): Lit.TemplateResult {
-  if (!syncInfo.isSyncActive) {
-    const link = 'chrome://settings/syncSetup' as Platform.DevToolsPath.UrlString;
-    // Disabled until https://crbug.com/1079231 is fixed.
-    // clang-format off
-    return html`
-      <span class="warning">
-        ${i18nString(UIStrings.syncDisabled)}
-        <devtools-chrome-link .href=${link}>${i18nString(UIStrings.settings)}</devtools-chrome-link>
-      </span>`;
-    // clang-format on
+  // clang-format off
+  return html`
+    <div class="setting-checkbox-container">
+      <setting-checkbox class="setting-checkbox" .data=${{setting: syncSetting}}>
+      </setting-checkbox>
+      ${renderWarningIfNeeded(syncInfo)}
+    </div>
+  `;
+  // clang-format on
+}
+
+function renderWarningIfNeeded(syncInfo: Host.InspectorFrontendHostAPI.SyncInformation): Lit.LitTemplate {
+  const hasWarning = !syncInfo.isSyncActive || !syncInfo.arePreferencesSynced;
+  if (!hasWarning) {
+    return Lit.nothing;
   }
-  if (!syncInfo.arePreferencesSynced) {
-    const link = 'chrome://settings/syncSetup/advanced' as Platform.DevToolsPath.UrlString;
-    // Disabled until https://crbug.com/1079231 is fixed.
+
+  const warningLink = !syncInfo.isSyncActive ?
+      'chrome://settings/syncSetup' as Platform.DevToolsPath.UrlString :
+      'chrome://settings/syncSetup/advanced' as Platform.DevToolsPath.UrlString;
+  const warningText =
+      !syncInfo.isSyncActive ? i18nString(UIStrings.syncDisabled) : i18nString(UIStrings.preferencesSyncDisabled);
+  // clang-format off
+  return html`
+    <devtools-chrome-link .href=${warningLink}>
+      <devtools-button
+        aria-describedby=settings-sync-info
+        .iconName=${'info'}
+        .variant=${Buttons.Button.Variant.ICON}
+        .size=${Buttons.Button.Size.SMALL}>
+      </devtools-button>
+    </devtools-chrome-link>
+    <devtools-tooltip
+        id=settings-sync-info
+        variant=simple>
+      ${warningText}
+    </devtools-tooltip>
+  `;
+  // clang-format on
+}
+
+function renderAccountInfo(syncInfo: Host.InspectorFrontendHostAPI.SyncInformation): Lit.LitTemplate {
+  if (!syncInfo.accountEmail) {
     // clang-format off
     return html`
-      <span class="warning">
-        ${i18nString(UIStrings.preferencesSyncDisabled)}
-        <devtools-chrome-link .href=${link}>${i18nString(UIStrings.settings)}</devtools-chrome-link>
-      </span>`;
+      <div class="not-signed-in">${i18nString(UIStrings.notSignedIn)}</div>
+    `;
     // clang-format on
   }
+
+  // clang-format off
   return html`
     <div class="account-info">
       <img src="data:image/png;base64, ${syncInfo.accountImage}" alt="Account avatar" />
@@ -116,6 +149,7 @@ function renderAccountInfoOrWarning(syncInfo: Host.InspectorFrontendHostAPI.Sync
         <span>${syncInfo.accountEmail}</span>
       </div>
     </div>`;
+  // clang-format on
 }
 
 customElements.define('devtools-sync-section', SyncSection);

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

@@ -7,13 +7,13 @@
 :host {
   break-inside: avoid;
   display: block;
-  padding-bottom: 9px;
-  width: 288px;
+  width: 100%;
 }
 
 fieldset {
   border: 0;
   padding: 0;
+  padding: 4px 0 0;
 }
 
 .link {
@@ -31,14 +31,9 @@ img {
   width: var(--sys-size-9);
 }
 
-.warning {
-  display: block;
-}
-
 .account-info {
   display: flex;
   align-items: center;
-  margin-top: 12px;
 }
 
 .account-email {
@@ -46,3 +41,17 @@ img {
   flex-direction: column;
   margin-left: 8px;
 }
+
+.not-signed-in {
+  padding-bottom: 4px;
+}
+
+.setting-checkbox-container {
+  display: flex;
+  align-items: center;
+  gap: var(--sys-size-2);
+}
+
+.setting-checkbox {
+  display: inline-block;
+}

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

@@ -24,50 +24,50 @@ const UIStrings = {
    */
   defaultDevices: 'Default devices',
   /**
-   *@description Button to add a custom device (e.g. phone, tablet) the Device Toolbar.
+   * @description Button to add a custom device (e.g. phone, tablet) the Device Toolbar.
    */
   addCustomDevice: 'Add custom device',
   /**
-   *@description Label/title for UI to add a new custom device type. Device means mobile/tablet etc.
+   * @description Label/title for UI to add a new custom device type. Device means mobile/tablet etc.
    */
   device: 'Device',
   /**
-   *@description Placeholder for text input for the name of a custom device.
+   * @description Placeholder for text input for the name of a custom device.
    */
   deviceName: 'Device Name',
   /**
-   *@description Placeholder text for text input for the width of a custom device in pixels.
+   * @description Placeholder text for text input for the width of a custom device in pixels.
    */
   width: 'Width',
   /**
-   *@description Placeholder text for text input for the height of a custom device in pixels.
+   * @description Placeholder text for text input for the height of a custom device in pixels.
    */
   height: 'Height',
   /**
-   *@description Placeholder text for text input for the height/width ratio of a custom device in pixels.
+   * @description Placeholder text for text input for the height/width ratio of a custom device in pixels.
    */
   devicePixelRatio: 'Device pixel ratio',
   /**
-   *@description Label in the Devices settings pane for the user agent string input of a custom device
+   * @description Label in the Devices settings pane for the user agent string input of a custom device
    */
   userAgentString: 'User agent string',
   /**
-   *@description Tooltip text for a drop-down in the Devices settings pane, for the 'user agent type' input of a custom device.
+   * @description Tooltip text for a drop-down in the Devices settings pane, for the 'user agent type' input of a custom device.
    * 'Type' refers to different options e.g. mobile or desktop.
    */
   userAgentType: 'User agent type',
   /**
-   *@description Error message in the Devices settings pane that declares the maximum length of the device name input
-   *@example {50} PH1
+   * @description Error message in the Devices settings pane that declares the maximum length of the device name input
+   * @example {50} PH1
    */
   deviceNameMustBeLessThanS: 'Device name must be less than {PH1} characters.',
   /**
-   *@description Error message in the Devices settings pane that declares that the device name input must not be empty
+   * @description Error message in the Devices settings pane that declares that the device name input must not be empty
    */
   deviceNameCannotBeEmpty: 'Device name cannot be empty.',
   /**
-   *@description Success message for screen readers when device is added.
-   *@example {TestDevice} PH1
+   * @description Success message for screen readers when device is added.
+   * @example {TestDevice} PH1
    */
   deviceAddedOrUpdated: 'Device {PH1} successfully added/updated.',
 } as const;
@@ -86,11 +86,9 @@ export class DevicesSettingsTab extends UI.Widget.VBox implements
   private editor?: UI.ListWidget.Editor<EmulationModel.EmulatedDevices.EmulatedDevice>;
 
   constructor() {
-    super();
+    super({jslog: `${VisualLogging.pane('devices')}`});
     this.registerRequiredCSS(devicesSettingsTabStyles);
 
-    this.element.setAttribute('jslog', `${VisualLogging.pane('devices')}`);
-
     this.containerElement =
         this.contentElement.createChild('div', 'settings-card-container-wrapper').createChild('div');
     this.containerElement.classList.add('settings-card-container', 'ignore-list-settings');