[settings] Make (?) buttons consistent in settings.

A bunch of adjustments for the (?) buttons:

1. Consistently use "Learn more" as title.
2. When used in combination with a settings checkbox,
   and there's more information, this will be shown as
   tooltip when hovering the checkbox (rather than when
   hovering the (?) icon).
3. Consistently use the `pointer` cursor.

Fixed: 374247106
Change-Id: Ia1e49de4e3e0ea72a17730b6935e358f89c84eaa
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/5946885
Auto-Submit: Benedikt Meurer <[email protected]>
Reviewed-by: Kateryna Prokopenko <[email protected]>
Commit-Queue: Kateryna Prokopenko <[email protected]>

Author: bmeurer

front_end/panels/elements/ElementStatePaneWidget.ts

@@ -38,6 +38,10 @@ const UIStrings = {
    * @description Similar with forceElementState but allows users to force specific state of the selected element.
    */
   forceElementSpecificStates: 'Force specific element state',
+  /**
+   *@description Text that is usually a hyperlink to more documentation
+   */
+  learnMore: 'Learn more',
 };
 const str_ = i18n.i18n.registerUIStrings('panels/elements/ElementStatePaneWidget.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -125,6 +129,7 @@ export class ElementStatePaneWidget extends UI.Widget.Widget {
         iconName: 'help',
         size: Buttons.Button.Size.SMALL,
         jslogContext: 'learn-more',
+        title: i18nString(UIStrings.learnMore),
       };
       learnMoreButton.addEventListener(
           'click',

front_end/panels/settings/SettingsScreen.ts

@@ -496,10 +496,10 @@ export class ExperimentsSettingsTab extends SettingsTab {
         variant: Buttons.Button.Variant.ICON,
         size: Buttons.Button.Size.SMALL,
         jslogContext: `${experiment.name}-documentation`,
+        title: i18nString(UIStrings.learnMore),
       };
       linkButton.addEventListener(
           'click', () => Host.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab(experimentLink));
-      linkButton.ariaLabel = i18nString(UIStrings.learnMore);
       linkButton.classList.add('link-icon');
 
       p.appendChild(linkButton);

front_end/panels/settings/frameworkIgnoreListSettingsTab.css

@@ -9,6 +9,7 @@
 }
 
 .ignore-list-option devtools-button {
+  cursor: pointer;
   position: relative;
   top: var(--sys-size-2);
   margin-left: var(--sys-size-2);

front_end/panels/settings/settingsScreen.css

@@ -213,15 +213,15 @@ label {
 .settings-experiment {
   display: grid;
   grid-template-columns: auto min-content auto 1fr;
-}
 
-.settings-experiment .devtools-link {
-  display: flex !important; /* stylelint-disable-line declaration-no-important */
-  align-items: center;
+  & .devtools-link {
+    display: flex !important; /* stylelint-disable-line declaration-no-important */
+    align-items: center;
+  }
 }
 
-.settings-experiment .devtools-link:has(.link-icon) {
-  outline-offset: 0;
+devtools-button.link-icon {
+  cursor: pointer;
 }
 
 .experiment-label {

front_end/ui/components/buttons/button.css

@@ -40,6 +40,7 @@ button {
   align-items: center;
   background: transparent;
   border-radius: var(--sys-shape-corner-full);
+  cursor: inherit;
   display: inline-flex;
   position: relative;
   font-size: var(--sys-typescale-body4-size);

front_end/ui/components/settings/SettingCheckbox.ts

@@ -6,6 +6,7 @@ import './SettingDeprecationWarning.js';
 
 import type * as Common from '../../../core/common/common.js';
 import * as Host from '../../../core/host/host.js';
+import * as i18n from '../../../core/i18n/i18n.js';
 import * as LitHtml from '../../lit-html/lit-html.js';
 import * as VisualLogging from '../../visual_logging/visual_logging.js';
 import * as Buttons from '../buttons/buttons.js';
@@ -15,6 +16,15 @@ import settingCheckboxStyles from './settingCheckbox.css.js';
 
 const {html, Directives: {ifDefined}} = LitHtml;
 
+const UIStrings = {
+  /**
+   *@description Text that is usually a hyperlink to more documentation
+   */
+  learnMore: 'Learn more',
+};
+const str_ = i18n.i18n.registerUIStrings('ui/components/settings/SettingCheckbox.ts', UIStrings);
+const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+
 export interface SettingCheckboxData {
   setting: Common.Settings.Setting<boolean>;
   textOverride?: string;
@@ -60,13 +70,21 @@ export class SettingCheckbox extends HTMLElement {
 
     const learnMore = this.#setting.learnMore();
     if (learnMore) {
-      const jslog = VisualLogging.link()
-                        .track({click: true, keydown: 'Enter|Space'})
-                        .context(this.#setting.name + '-documentation');
-      return html`<devtools-button .iconName=${'help'} .size=${Buttons.Button.Size.SMALL} .variant=${
-          Buttons.Button.Variant.ICON} .title=${learnMore.tooltip()} jslog=${jslog} @click=${
-          () => Host.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab(
-              learnMore.url)} class="learn-more"></devtools-button>`;
+      const data: Buttons.Button.ButtonData = {
+        iconName: 'help',
+        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(learnMore.url);
+        event.consume();
+      };
+      return html`<devtools-button
+                    class=learn-more
+                    @click=${handleClick}
+                    .data=${data as Buttons.Button.ButtonData}></devtools-button>`;
     }
 
     return undefined;
@@ -78,6 +96,7 @@ export class SettingCheckbox extends HTMLElement {
     }
 
     const icon = this.icon();
+    const title = this.#setting.learnMore() && this.#setting.learnMore()?.tooltip();
     const reason = this.#setting.disabledReason() ?
         html`
       <devtools-button class="disabled-reason" .iconName=${'info'} .variant=${Buttons.Button.Variant.ICON} .size=${
@@ -88,7 +107,7 @@ export class SettingCheckbox extends HTMLElement {
     LitHtml.render(
         html`
       <p>
-        <label>
+        <label title=${title ?? LitHtml.nothing}>
           <input
             type="checkbox"
             .checked=${this.#setting.disabledReason() ? false : this.#setting.get()}

front_end/ui/components/settings/settingCheckbox.css

@@ -36,6 +36,7 @@ p {
 }
 
 .learn-more {
+  cursor: pointer;
   position: relative;
   margin-left: var(--sys-size-2);
   top: var(--sys-size-2);