chrome-devtools-frontend 1.0.1537268 → 1.0.1537860

package/front_end/panels/network/RequestCookiesView.ts

@@ -10,6 +10,7 @@ import * as Protocol from '../../generated/protocol.js';
 import * as IconButton from '../../ui/components/icon_button/icon_button.js';
 import * as uiI18n from '../../ui/i18n/i18n.js';
 import * as CookieTable from '../../ui/legacy/components/cookie_table/cookie_table.js';
+import * as SettingsUI from '../../ui/legacy/components/settings_ui/settings_ui.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
@@ -104,7 +105,7 @@ export class RequestCookiesView extends UI.Widget.Widget {
     titleText.textContent = i18nString(UIStrings.requestCookies);
     UI.Tooltip.Tooltip.install(titleText, i18nString(UIStrings.cookiesThatWereSentToTheServerIn));
 
-    const requestCookiesCheckbox = UI.SettingsUI.createSettingCheckbox(
+    const requestCookiesCheckbox = SettingsUI.SettingsUI.createSettingCheckbox(
         i18nString(UIStrings.showFilteredOutRequestCookies), this.showFilteredOutCookiesSetting);
     requestCookiesCheckbox.addEventListener('change', () => {
       this.refreshRequestCookiesView();

package/front_end/panels/profiler/HeapSnapshotView.ts

@@ -16,6 +16,7 @@ import * as HeapSnapshotModel from '../../models/heap_snapshot_model/heap_snapsh
 import * as DataGrid from '../../ui/legacy/components/data_grid/data_grid.js';
 import * as ObjectUI from '../../ui/legacy/components/object_ui/object_ui.js';
 import * as PerfUI from '../../ui/legacy/components/perf_ui/perf_ui.js';
+import * as SettingsUI from '../../ui/legacy/components/settings_ui/settings_ui.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';
@@ -1339,7 +1340,7 @@ export class HeapSnapshotProfileType extends
     const showOptionToExposeInternalsInHeapSnapshot =
         Root.Runtime.experiments.isEnabled('show-option-tp-expose-internals-in-heap-snapshot');
     const exposeInternalsInHeapSnapshotCheckbox =
-        UI.SettingsUI.createSettingCheckbox(i18nString(UIStrings.exposeInternals), this.exposeInternals);
+        SettingsUI.SettingsUI.createSettingCheckbox(i18nString(UIStrings.exposeInternals), this.exposeInternals);
     this.customContentInternal = exposeInternalsInHeapSnapshotCheckbox;
     return showOptionToExposeInternalsInHeapSnapshot ? exposeInternalsInHeapSnapshotCheckbox : null;
   }
@@ -1549,7 +1550,7 @@ export class TrackingHeapSnapshotProfileType extends
   }
 
   override customContent(): Element|null {
-    const checkboxSetting = UI.SettingsUI.createSettingCheckbox(
+    const checkboxSetting = SettingsUI.SettingsUI.createSettingCheckbox(
         i18nString(UIStrings.recordAllocationStacksExtra), this.recordAllocationStacksSettingInternal);
     this.customContentInternal = (checkboxSetting);
     return checkboxSetting;

package/front_end/panels/sensors/SensorsView.ts

@@ -8,6 +8,7 @@ import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Geometry from '../../models/geometry/geometry.js';
+import * as SettingsUI from '../../ui/legacy/components/settings_ui/settings_ui.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 import * as MobileThrottling from '../mobile_throttling/mobile_throttling.js';
@@ -549,7 +550,7 @@ export class SensorsView extends UI.Widget.VBox {
 
   private createPressureSection(): void {
     const container = this.contentElement.createChild('div', 'pressure-section');
-    const control = UI.SettingsUI.createControlForSetting(
+    const control = SettingsUI.SettingsUI.createControlForSetting(
         Common.Settings.Settings.instance().moduleSetting('emulation.cpu-pressure'),
         i18nString(UIStrings.forcesSelectedPressureStateEmulation));
 
@@ -798,7 +799,7 @@ export class SensorsView extends UI.Widget.VBox {
 
   private appendTouchControl(): void {
     const container = this.contentElement.createChild('div', 'touch-section');
-    const control = UI.SettingsUI.createControlForSetting(
+    const control = SettingsUI.SettingsUI.createControlForSetting(
         Common.Settings.Settings.instance().moduleSetting('emulation.touch'),
         i18nString(UIStrings.forcesTouchInsteadOfClick));
 
@@ -809,7 +810,7 @@ export class SensorsView extends UI.Widget.VBox {
 
   private appendIdleEmulator(): void {
     const container = this.contentElement.createChild('div', 'idle-section');
-    const control = UI.SettingsUI.createControlForSetting(
+    const control = SettingsUI.SettingsUI.createControlForSetting(
         Common.Settings.Settings.instance().moduleSetting('emulation.idle-detection'),
         i18nString(UIStrings.forcesSelectedIdleStateEmulation));
 

package/front_end/panels/settings/FrameworkIgnoreListSettingsTab.ts

@@ -8,6 +8,7 @@ import '../../ui/components/cards/cards.js';
 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 SettingsUI from '../../ui/legacy/components/settings_ui/settings_ui.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
@@ -112,7 +113,7 @@ export class FrameworkIgnoreListSettingsTab extends UI.Widget.VBox implements
     const enabledSetting = Common.Settings.Settings.instance().moduleSetting('enable-ignore-listing');
     const enableIgnoreListing = this.contentElement.createChild('div', 'enable-ignore-listing');
     enableIgnoreListing.appendChild(
-        UI.SettingsUI.createSettingCheckbox(i18nString(UIStrings.enableIgnoreListing), enabledSetting));
+        SettingsUI.SettingsUI.createSettingCheckbox(i18nString(UIStrings.enableIgnoreListing), enabledSetting));
     UI.Tooltip.Tooltip.install(enableIgnoreListing, i18nString(UIStrings.enableIgnoreListingTooltip));
 
     const enableIgnoreListingCard = settingsContent.createChild('devtools-card');
@@ -123,14 +124,15 @@ export class FrameworkIgnoreListSettingsTab extends UI.Widget.VBox implements
     generalExclusionGroup.classList.add('general-exclusion-group');
     const ignoreListContentScripts =
         generalExclusionGroup.createChild('div', 'ignore-list-option')
-            .appendChild(UI.SettingsUI.createSettingCheckbox(
+            .appendChild(SettingsUI.SettingsUI.createSettingCheckbox(
                 i18nString(UIStrings.ignoreListContentScripts),
                 Common.Settings.Settings.instance().moduleSetting('skip-content-scripts')));
 
     const automaticallyIgnoreListContainer = generalExclusionGroup.createChild('div', 'ignore-list-option');
-    const automaticallyIgnoreList = automaticallyIgnoreListContainer.appendChild(UI.SettingsUI.createSettingCheckbox(
-        i18nString(UIStrings.automaticallyIgnoreListKnownThirdPartyScripts),
-        Common.Settings.Settings.instance().moduleSetting('automatically-ignore-list-known-third-party-scripts')));
+    const automaticallyIgnoreList =
+        automaticallyIgnoreListContainer.appendChild(SettingsUI.SettingsUI.createSettingCheckbox(
+            i18nString(UIStrings.automaticallyIgnoreListKnownThirdPartyScripts),
+            Common.Settings.Settings.instance().moduleSetting('automatically-ignore-list-known-third-party-scripts')));
 
     const automaticallyIgnoreLinkButton = new Buttons.Button.Button();
     automaticallyIgnoreLinkButton.data = {
@@ -148,7 +150,7 @@ export class FrameworkIgnoreListSettingsTab extends UI.Widget.VBox implements
 
     const ignoreListAnonymousScripts =
         generalExclusionGroup.createChild('div', 'ignore-list-option')
-            .appendChild(UI.SettingsUI.createSettingCheckbox(
+            .appendChild(SettingsUI.SettingsUI.createSettingCheckbox(
                 i18nString(UIStrings.ignoreListAnonymousScripts),
                 Common.Settings.Settings.instance().moduleSetting('skip-anonymous-scripts')));
 

package/front_end/panels/settings/KeybindsSettingsTab.ts

@@ -11,6 +11,7 @@ import * as i18n from '../../core/i18n/i18n.js';
 import * as Platform from '../../core/platform/platform.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
 import * as IconButton from '../../ui/components/icon_button/icon_button.js';
+import * as SettingsUI from '../../ui/legacy/components/settings_ui/settings_ui.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
@@ -126,8 +127,8 @@ export class KeybindsSettingsTab extends UI.Widget.VBox implements UI.ListContro
     const keybindsSetSetting = Common.Settings.Settings.instance().moduleSetting('active-keybind-set');
     const userShortcutsSetting = Common.Settings.Settings.instance().moduleSetting('user-shortcuts');
     keybindsSetSetting.addChangeListener(this.update, this);
-    const keybindsSetSelect =
-        UI.SettingsUI.createControlForSetting(keybindsSetSetting, i18nString(UIStrings.matchShortcutsFromPreset));
+    const keybindsSetSelect = SettingsUI.SettingsUI.createControlForSetting(
+        keybindsSetSetting, i18nString(UIStrings.matchShortcutsFromPreset));
 
     const card = settingsContent.createChild('devtools-card');
     card.heading = i18nString(UIStrings.shortcuts);

package/front_end/panels/settings/SettingsScreen.ts

@@ -14,6 +14,7 @@ import * as Root from '../../core/root/root.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
 import type * as Cards from '../../ui/components/cards/cards.js';
 import * as IconButton from '../../ui/components/icon_button/icon_button.js';
+import * as SettingsUI from '../../ui/legacy/components/settings_ui/settings_ui.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import {html, render} from '../../ui/lit/lit.js';
@@ -355,7 +356,7 @@ export class GenericSettingsTab extends UI.Widget.VBox implements SettingsTab {
     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);
+      const settingControl = SettingsUI.SettingsUI.createControlForSetting(setting);
       if (settingControl) {
         this.settingToControl.set(setting, settingControl);
         sectionElement.appendChild(settingControl);

package/front_end/panels/settings/WorkspaceSettingsTab.ts

@@ -61,7 +61,7 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
             <input
               class="harmony-input"
               jslog=${VisualLogging.textField().track({keydown: 'Enter', change: true}).context(input.excludePatternSetting.name)}
-              ${UI.SettingsUI.bindToSetting(input.excludePatternSetting)}
+              ${UI.UIUtils.bindToSetting(input.excludePatternSetting)}
               id="workspace-setting-folder-exclude-pattern"></input>
           </div>
           <div class="mappings-info">${i18nString(UIStrings.mappingsAreInferredAutomatically)}</div>

package/front_end/panels/sources/AiCodeCompletionPlugin.ts

@@ -255,6 +255,7 @@ export class AiCodeCompletionPlugin extends Plugin {
   }
 
   #removeAiCodeCompletionCitationsToolbar(): void {
+    this.#aiCodeCompletionCitationsToolbar?.detach();
     if (this.#editor) {
       this.#editor.dispatch({
         effects: SourceFrame.SourceFrame.removeSourceFrameInfobar.of(
@@ -300,7 +301,7 @@ export class AiCodeCompletionPlugin extends Plugin {
     this.#aiCodeCompletion?.remove();
     this.#aiCodeCompletion = undefined;
     this.#aiCodeCompletionCitations = [];
-    this.#aiCodeCompletionDisclaimerContainer.removeChildren();
+    this.#aiCodeCompletionDisclaimer?.detach();
     this.#aiCodeCompletionDisclaimer = undefined;
     this.#removeAiCodeCompletionCitationsToolbar();
     this.#aiCodeCompletionCitationsToolbar = undefined;

package/front_end/panels/sources/SourcesPanel.ts

@@ -44,6 +44,7 @@ import * as Breakpoints from '../../models/breakpoints/breakpoints.js';
 import * as Workspace from '../../models/workspace/workspace.js';
 import * as PanelCommon from '../../panels/common/common.js';
 import * as ObjectUI from '../../ui/legacy/components/object_ui/object_ui.js';
+import * as SettingsUI from '../../ui/legacy/components/settings_ui/settings_ui.js';
 import type * as SourceFrame from '../../ui/legacy/components/source_frame/source_frame.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
@@ -921,7 +922,7 @@ export class SourcesPanel extends UI.Panel.Panel implements
 
     const label = i18nString(UIStrings.pauseOnCaughtExceptions);
     const setting = Common.Settings.Settings.instance().moduleSetting('pause-on-caught-exception');
-    debugToolbarDrawer.appendChild(UI.SettingsUI.createSettingCheckbox(label, setting));
+    debugToolbarDrawer.appendChild(SettingsUI.SettingsUI.createSettingCheckbox(label, setting));
 
     return debugToolbarDrawer;
   }

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

@@ -396,7 +396,11 @@ const UIStrings = {
   /**
    * @description Title of a setting under the Sources category in Settings
    */
-  wasmAutoStepping: 'When debugging Wasm with debug information, do not pause on wasm bytecode if possible',
+  wasmAutoStepping: 'Wasm auto-stepping bytecode',
+  /**
+   * @description Tooltip text for a setting that controls Wasm will try to skip wasm bytecode
+   */
+  wasmAutoSteppingInfo: 'When debugging Wasm with debug information, try to skip wasm bytecode',
   /**
    * @description Title of a setting under the Sources category in Settings
    */
@@ -1850,6 +1854,9 @@ Common.Settings.registerSettingExtension({
       title: i18nLazyString(UIStrings.disableWasmAutoStepping),
     },
   ],
+  learnMore: {
+    tooltip: i18nLazyString(UIStrings.wasmAutoSteppingInfo),
+  }
 });
 
 UI.ViewManager.registerLocationResolver({

package/front_end/panels/timeline/TimelinePanel.ts

@@ -57,6 +57,7 @@ import * as Dialogs from '../../ui/components/dialogs/dialogs.js';
 import * as LegacyWrapper from '../../ui/components/legacy_wrapper/legacy_wrapper.js';
 import * as Snackbars from '../../ui/components/snackbars/snackbars.js';
 import * as PerfUI from '../../ui/legacy/components/perf_ui/perf_ui.js';
+import * as SettingsUI from '../../ui/legacy/components/settings_ui/settings_ui.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as ThemeSupport from '../../ui/legacy/theme_support/theme_support.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
@@ -1290,7 +1291,7 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
     this.cpuThrottlingSelect = MobileThrottling.ThrottlingManager.throttlingManager().createCPUThrottlingSelector();
     cpuThrottlingPane.append(this.cpuThrottlingSelect.control.element);
 
-    this.settingsPane.append(UI.SettingsUI.createSettingCheckbox(
+    this.settingsPane.append(SettingsUI.SettingsUI.createSettingCheckbox(
         this.captureSelectorStatsSetting.title(), this.captureSelectorStatsSetting,
         i18nString(UIStrings.capturesSelectorStats)));
 
@@ -1298,11 +1299,11 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
     networkThrottlingPane.append(i18nString(UIStrings.network));
     networkThrottlingPane.append(this.createNetworkConditionsSelectToolbarItem().element);
 
-    this.settingsPane.append(UI.SettingsUI.createSettingCheckbox(
+    this.settingsPane.append(SettingsUI.SettingsUI.createSettingCheckbox(
         this.captureLayersAndPicturesSetting.title(), this.captureLayersAndPicturesSetting,
         i18nString(UIStrings.capturesAdvancedPaint)));
 
-    this.settingsPane.append(UI.SettingsUI.createSettingCheckbox(
+    this.settingsPane.append(SettingsUI.SettingsUI.createSettingCheckbox(
         this.disableCaptureJSProfileSetting.title(), this.disableCaptureJSProfileSetting,
         i18nString(UIStrings.disablesJavascriptSampling)));
 

package/front_end/panels/timeline/TimelineUIUtils.ts

@@ -732,26 +732,6 @@ export class TimelineUIUtils {
         break;
       }
 
-      case Trace.Types.Events.Name.COMPILE_SCRIPT:
-      case Trace.Types.Events.Name.CACHE_SCRIPT:
-      case Trace.Types.Events.Name.EVALUATE_SCRIPT: {
-        const url = unsafeEventData['url'];
-        if (url) {
-          const {lineNumber} = Trace.Helpers.Trace.getZeroIndexedLineAndColumnForEvent(event);
-          details = this.linkifyLocation({
-            scriptId: null,
-            url,
-            lineNumber: lineNumber || 0,
-            columnNumber: 0,
-            target,
-            isFreshOrEnhanced,
-            linkifier,
-            omitOrigin: true,
-          });
-        }
-        break;
-      }
-
       case Trace.Types.Events.Name.BACKGROUND_DESERIALIZE:
       case Trace.Types.Events.Name.STREAMING_COMPILE_SCRIPT: {
         const url = unsafeEventData['url'];
@@ -1710,6 +1690,7 @@ export class TimelineUIUtils {
     return {callFrames} as Protocol.Runtime.StackTrace;
   }
 
+  /** This renders a stack trace... and other cool stuff. */
   static async generateCauses(
       event: Trace.Types.Events.Event, contentHelper: TimelineDetailsContentHelper,
       parsedTrace: Trace.TraceModel.ParsedTrace): Promise<void> {
@@ -2478,6 +2459,9 @@ export class TimelineDetailsContentHelper {
     if (!this.#linkifier) {
       return;
     }
+
+    // We resolve the original function name here. StackTracePreviewContent uses
+    // Linkifier to resolve the source code location.
     const resolvedStackTrace: Protocol.Runtime.StackTrace = structuredClone(stackTrace);
     let currentResolvedStackTrace: Protocol.Runtime.StackTrace|undefined = resolvedStackTrace;
     while (currentResolvedStackTrace) {

package/front_end/panels/timeline/components/LiveMetricsView.ts

@@ -4,6 +4,7 @@
 /* eslint-disable @devtools/no-imperative-dom-api */
 /* eslint-disable @devtools/no-lit-render-outside-of-view */
 
+import '../../../ui/components/settings/settings.js';
 import '../../../ui/components/icon_button/icon_button.js';
 import './FieldSettingsDialog.js';
 import './NetworkThrottlingSelector.js';

package/front_end/panels/timeline/components/SidebarAnnotationsTab.ts

@@ -2,6 +2,8 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import '../../../ui/components/settings/settings.js';
+
 import * as Common from '../../../core/common/common.js';
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as Platform from '../../../core/platform/platform.js';

package/front_end/third_party/chromium/README.chromium

@@ -1,7 +1,7 @@
 Name: Dependencies sourced from the upstream `chromium` repository
 URL: https://chromium.googlesource.com/chromium/src
 Version: N/A
-Revision: 5ea04b0081c4e9801ea4b74784e39ff75c8c7abb
+Revision: b60591ec8cb7d0c80f2661ee8fbbfef966d86046
 Update Mechanism: Manual (https://crbug.com/428069060)
 License: BSD-3-Clause
 License File: LICENSE

package/front_end/ui/components/adorners/Adorner.ts

@@ -5,6 +5,7 @@
 
 import type * as Platform from '../../../core/platform/platform.js';
 import {html, render} from '../../../ui/lit/lit.js';
+import * as UI from '../../legacy/legacy.js';
 import * as VisualElements from '../../visual_logging/visual_logging.js';
 
 import adornerStyles from './adorner.css.js';
@@ -37,7 +38,7 @@ export class Adorner extends HTMLElement {
   }
 
   override cloneNode(deep?: boolean): Node {
-    const node = super.cloneNode(deep) as Adorner;
+    const node = UI.UIUtils.cloneCustomElement(this, deep);
     node.data = {name: this.name, content: this.#content, jslogContext: this.#jslogContext};
     return node;
   }

package/front_end/ui/components/buttons/Button.docs.ts

@@ -0,0 +1,195 @@
+// Copyright 2021 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import {Button, FloatingButton} from './buttons.js';
+
+export async function render(container: HTMLElement) {
+  const style = document.createElement('style');
+  style.textContent = `
+      #container > div {
+        width: 80%;
+        padding: var(--sys-size-11);
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+        gap: var(--sys-size-5);
+      }
+    `;
+  container.appendChild(style);
+
+  const appendSection = (headerText: string, sectionElement: HTMLElement) => {
+    const header = document.createElement('header');
+    header.textContent = headerText;
+    container.appendChild(header);
+    container.appendChild(sectionElement);
+  };
+
+  const buttonsSection = document.createElement('div');
+  const primarySection = document.createElement('div');
+  const tonalSection = document.createElement('div');
+  const outlineSection = document.createElement('div');
+  const textSection = document.createElement('div');
+  const iconSection = document.createElement('div');
+  const floatingSection = document.createElement('div');
+
+  appendSection('Buttons', buttonsSection);
+  appendSection('Primary buttons', primarySection);
+  appendSection('Tonal buttons', tonalSection);
+  appendSection('Outlined buttons', outlineSection);
+  appendSection('Text buttons', textSection);
+  appendSection('Icon buttons', iconSection);
+  appendSection('Floating buttons', floatingSection);
+
+  const DEFAULT_TEXT = 'Default';
+  const WITH_ICON_TEXT = 'With icon';
+  const MICRO_TEXT = 'Micro';
+  // Buttons
+  {
+    const primaryButton = new Button.Button();
+    primaryButton.data = {
+      variant: Button.Variant.PRIMARY,
+    };
+    primaryButton.innerText = 'Primary button';
+    buttonsSection.appendChild(primaryButton);
+
+    const tonalButton = new Button.Button();
+    tonalButton.data = {
+      variant: Button.Variant.TONAL,
+    };
+    tonalButton.innerText = 'Tonal button';
+    buttonsSection.appendChild(tonalButton);
+
+    const outlinedButton = new Button.Button();
+    outlinedButton.data = {
+      variant: Button.Variant.OUTLINED,
+    };
+    outlinedButton.innerText = 'Outlined button';
+    buttonsSection.appendChild(outlinedButton);
+
+    const textButton = new Button.Button();
+    textButton.data = {
+      variant: Button.Variant.TEXT,
+    };
+    textButton.innerText = 'Text button';
+    buttonsSection.appendChild(textButton);
+
+    const iconButton = new Button.Button();
+    iconButton.data = {
+      variant: Button.Variant.ICON,
+      iconName: 'gear',
+    };
+    buttonsSection.appendChild(iconButton);
+  }
+
+  // Primary buttons
+  {
+    const primaryDefault = new Button.Button();
+    primaryDefault.data = {
+      variant: Button.Variant.PRIMARY,
+    };
+    primaryDefault.innerText = DEFAULT_TEXT;
+    primarySection.appendChild(primaryDefault);
+
+    const primaryWithIcon = new Button.Button();
+    primaryWithIcon.innerText = WITH_ICON_TEXT;
+    primaryWithIcon.data = {
+      variant: Button.Variant.PRIMARY,
+      iconName: 'plus',
+    };
+    primarySection.appendChild(primaryWithIcon);
+  }
+
+  // Tonal buttons
+  {
+    const tonalDefault = new Button.Button();
+    tonalDefault.data = {
+      variant: Button.Variant.TONAL,
+    };
+    tonalDefault.innerText = DEFAULT_TEXT;
+    tonalSection.appendChild(tonalDefault);
+
+    const tonalWithIcon = new Button.Button();
+    tonalWithIcon.innerText = WITH_ICON_TEXT;
+
+    tonalWithIcon.data = {
+      variant: Button.Variant.PRIMARY,
+      iconName: 'plus',
+    };
+    tonalSection.appendChild(tonalWithIcon);
+  }
+
+  // Outlined buttons
+  {
+    const outlinedDefault = new Button.Button();
+    outlinedDefault.data = {
+      variant: Button.Variant.OUTLINED,
+    };
+    outlinedDefault.innerText = DEFAULT_TEXT;
+    outlineSection.appendChild(outlinedDefault);
+
+    const outlinedWithIcon = new Button.Button();
+    outlinedWithIcon.innerText = WITH_ICON_TEXT;
+    outlinedWithIcon.data = {
+      variant: Button.Variant.OUTLINED,
+      iconName: 'plus',
+    };
+    outlineSection.appendChild(outlinedWithIcon);
+
+    const outlinedMicro = new Button.Button();
+    outlinedMicro.innerText = MICRO_TEXT;
+    outlinedMicro.data = {
+      variant: Button.Variant.OUTLINED,
+      size: Button.Size.MICRO,
+    };
+    outlineSection.appendChild(outlinedMicro);
+  }
+
+  // Text buttons
+  {
+    const textDefault = new Button.Button();
+    textDefault.innerText = DEFAULT_TEXT;
+    textDefault.data = {
+      variant: Button.Variant.TEXT,
+    };
+    textSection.appendChild(textDefault);
+
+    const textWithIcon = new Button.Button();
+    textWithIcon.innerText = WITH_ICON_TEXT;
+
+    textWithIcon.data = {
+      variant: Button.Variant.TEXT,
+      iconName: 'plus',
+    };
+    textSection.appendChild(textWithIcon);
+  }
+
+  // Icon buttons
+  {
+    const iconDefault = new Button.Button();
+    iconDefault.data = {
+      variant: Button.Variant.ICON,
+      iconName: 'gear',
+    };
+    iconSection.appendChild(iconDefault);
+
+    const iconToggle = new Button.Button();
+    iconToggle.data = {
+      variant: Button.Variant.ICON_TOGGLE,
+      iconName: 'gear',
+      toggledIconName: 'gear',
+      toggled: true,
+      toggleType: Button.ToggleType.PRIMARY,
+    };
+    const toggledWithLabel = document.createElement('span');
+    toggledWithLabel.textContent = '(Toggle)';
+    iconSection.appendChild(iconToggle);
+    iconSection.appendChild(toggledWithLabel);
+  }
+
+  // Floating buttons
+  {
+    const floatingButton = FloatingButton.create('smart-assistant', 'Ask AI!');
+    floatingSection.appendChild(floatingButton);
+  }
+}

package/front_end/ui/components/settings/SettingCheckbox.ts

@@ -3,7 +3,9 @@
 // found in the LICENSE file.
 /* eslint-disable @devtools/no-lit-render-outside-of-view */
 
+import '../tooltips/tooltips.js';
 import './SettingDeprecationWarning.js';
+import '../../legacy/legacy.js';
 
 import type * as Common from '../../../core/common/common.js';
 import * as Host from '../../../core/host/host.js';
@@ -66,23 +68,56 @@ export class SettingCheckbox extends HTMLElement {
     }
 
     const learnMore = this.#setting.learnMore();
-    if (learnMore?.url) {
-      const url = learnMore.url;
+    if (learnMore) {
+      const jsLogContext = `${this.#setting.name}-documentation`;
       const data: Buttons.Button.ButtonData = {
-        iconName: 'help',
+        iconName: 'info',
         variant: Buttons.Button.Variant.ICON,
         size: Buttons.Button.Size.SMALL,
-        jslogContext: `${this.#setting.name}-documentation`,
-        title: i18nString(UIStrings.learnMore),
-      };
-      const handleClick = (event: MouseEvent): void => {
-        Host.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab(url);
-        event.consume();
+        jslogContext: jsLogContext,
       };
-      return html`<devtools-button
-                    class=learn-more
-                    @click=${handleClick}
-                    .data=${data}></devtools-button>`;
+
+      const url = learnMore.url;
+      if (learnMore.tooltip) {
+        const id = `${this.#setting.name}-information`;
+        // clang-format off
+        return html`
+          <devtools-button
+            class="info-icon"
+            aria-details=${id}
+            .data=${data}
+          ></devtools-button>
+          <devtools-tooltip id=${id} variant="rich">
+            <span>${learnMore.tooltip()}</span><br />
+            ${url
+              ? html`<x-link
+                  href=${url}
+                  class="link"
+                  jslog=${VisualLogging.link(jsLogContext).track({
+                    click: true,
+                  })}
+                  >${i18nString(UIStrings.learnMore)}</x-link
+                >`
+              : Lit.nothing}
+          </devtools-tooltip>
+        `;
+        // clang-format on
+      }
+      if (url) {
+        const handleClick = (event: MouseEvent): void => {
+          Host.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab(url);
+          event.consume();
+        };
+        data.iconName = 'help';
+        data.title = i18nString(UIStrings.learnMore);
+        // clang-format off
+        return html`<devtools-button
+          class="info-icon"
+          @click=${handleClick}
+          .data=${data}
+        ></devtools-button>`;
+        // clang-format on
+      }
     }
 
     return undefined;
@@ -102,7 +137,7 @@ export class SettingCheckbox extends HTMLElement {
     }
 
     const icon = this.icon();
-    const title = `${this.#setting.learnMore() ? this.#setting.learnMore()?.tooltip() : ''}`;
+    const title = `${this.#setting.learnMore() ? this.#setting.learnMore()?.tooltip?.() : ''}`;
     const disabledReasons = this.#setting.disabledReasons();
     const reason = disabledReasons.length ?
         html`

package/front_end/ui/components/settings/settingCheckbox.css

@@ -35,7 +35,7 @@ p {
   height: var(--sys-size-9);
 }
 
-.learn-more {
+.info-icon {
   cursor: pointer;
   position: relative;
   margin-left: var(--sys-size-2);
@@ -43,3 +43,8 @@ p {
   width: var(--sys-size-9);
   height: var(--sys-size-9);
 }
+
+.link {
+  color: var(--text-link);
+  text-decoration: underline;
+}