RPP: add rich tooltip to annotation label generation

Fixed: 405061222
Change-Id: I3a7bc85e40512e3f9de244a0258377b9e3da2077
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6375726
Commit-Queue: Jack Franklin <[email protected]>
Reviewed-by: Ergün Erdoğmuş <[email protected]>
Auto-Submit: Jack Franklin <[email protected]>

Author: jackfranklin

front_end/panels/timeline/overlays/OverlaysImpl.test.ts

@@ -4,7 +4,7 @@
 
 import * as Common from '../../../core/common/common.js';
 import * as Trace from '../../../models/trace/trace.js';
-import {dispatchClickEvent} from '../../../testing/DOMHelpers.js';
+import {cleanTextContent, dispatchClickEvent} from '../../../testing/DOMHelpers.js';
 import {describeWithEnvironment, updateHostConfig} from '../../../testing/EnvironmentHelpers.js';
 import {
   makeInstantEvent,
@@ -568,42 +568,40 @@ describeWithEnvironment('Overlays', () => {
              elementsWrapper.querySelector<HTMLElement>('.ai-label-button-wrapper') as HTMLSpanElement;
          assert.isOk(aiLabelButtonWrapper);
 
-         const infoIconTooltip = aiLabelButtonWrapper.querySelector('.pen-icon[title]');
-         assert.isNotNull(infoIconTooltip);
+         const tooltip = aiLabelButtonWrapper.querySelector<HTMLElement>('devtools-tooltip');
+         assert.isOk(tooltip);
          assert.strictEqual(
-             infoIconTooltip.getAttribute('title'),
-             'The selected call stack is sent to Google. The content you submit and that is generated by this feature will be used to improve Google’s AI models. This is an experimental AI feature and won’t always get it right.',
+             cleanTextContent(tooltip.innerText),
+             'The selected call stack is sent to Google. The content you submit and that is generated by this feature will be used to improve Google’s AI models. This is an experimental AI feature and won’t always get it right. Learn more',
          );
        });
 
-    it('Correct security tooltip on the `generate ai label` info icon hover for the users with logging disabled',
-       async function() {
-         updateHostConfig({
-           aidaAvailability: {
-             enabled: true,
-             blockedByAge: false,
-             blockedByEnterprisePolicy: false,
-             blockedByGeo: false,
-             disallowLogging: true,
-             enterprisePolicyValue: 1,
-           },
-         });
-
-         const {elementsWrapper, inputField} =
-             await createAnnotationsLabelElement(this, 'web-dev.json.gz', 50, 'entry label');
-         assert.strictEqual(inputField?.innerText, 'entry label');
+    it('shows correct tooltip text on `generate ai label` hover for the users with logging disabled', async function() {
+      updateHostConfig({
+        aidaAvailability: {
+          enabled: true,
+          blockedByAge: false,
+          blockedByEnterprisePolicy: false,
+          blockedByGeo: false,
+          disallowLogging: true,
+          enterprisePolicyValue: 1,
+        },
+      });
 
-         const aiLabelButtonWrapper =
-             elementsWrapper.querySelector<HTMLElement>('.ai-label-button-wrapper') as HTMLSpanElement;
-         assert.isOk(aiLabelButtonWrapper);
+      const {elementsWrapper, inputField} =
+          await createAnnotationsLabelElement(this, 'web-dev.json.gz', 50, 'entry label');
+      assert.strictEqual(inputField?.innerText, 'entry label');
 
-         const infoIconTooltip = aiLabelButtonWrapper.querySelector('.pen-icon[title]');
-         assert.isNotNull(infoIconTooltip);
-         assert.strictEqual(
-             infoIconTooltip.getAttribute('title'),
-             'The selected call stack is sent to Google. The content you submit and that is generated by this feature will not be used to improve Google’s AI models. This is an experimental AI feature and won’t always get it right.',
-         );
-       });
+      const aiLabelButtonWrapper =
+          elementsWrapper.querySelector<HTMLElement>('.ai-label-button-wrapper') as HTMLSpanElement;
+      assert.isOk(aiLabelButtonWrapper);
+      const tooltip = aiLabelButtonWrapper.querySelector<HTMLElement>('devtools-tooltip');
+      assert.isOk(tooltip);
+      assert.strictEqual(
+          cleanTextContent(tooltip.innerText),
+          'The selected call stack is sent to Google. The content you submit and that is generated by this feature will not be used to improve Google’s AI models. This is an experimental AI feature and won’t always get it right. Learn more',
+      );
+    });
 
     it('Shows disabled `generate ai label` button if the user is not logged into their google account or is under 18',
        async function() {
@@ -626,11 +624,11 @@ describeWithEnvironment('Overlays', () => {
              elementsWrapper.querySelector<HTMLElement>('.ai-label-disabled-button-wrapper') as HTMLSpanElement;
          assert.isOk(aiLabelButtonWrapper);
 
-         const infoIconTooltip = aiLabelButtonWrapper.querySelector('.pen-icon[title]');
-         assert.isNotNull(infoIconTooltip);
+         const tooltip = aiLabelButtonWrapper.querySelector<HTMLElement>('devtools-tooltip');
+         assert.isOk(tooltip);
          assert.strictEqual(
-             infoIconTooltip.getAttribute('title'),
-             'Auto anotations are not available, go to AI Innovations in Settings to learn more.',
+             cleanTextContent(tooltip.innerText),
+             'Auto annotations are not available. Learn more',
          );
        });
 
@@ -654,11 +652,11 @@ describeWithEnvironment('Overlays', () => {
           elementsWrapper.querySelector<HTMLElement>('.ai-label-disabled-button-wrapper') as HTMLSpanElement;
       assert.isOk(aiLabelButtonWrapper);
 
-      const infoIconTooltip = aiLabelButtonWrapper.querySelector('.pen-icon[title]');
-      assert.isNotNull(infoIconTooltip);
+      const tooltip = aiLabelButtonWrapper.querySelector<HTMLElement>('devtools-tooltip');
+      assert.isOk(tooltip);
       assert.strictEqual(
-          infoIconTooltip.getAttribute('title'),
-          'Auto anotations are not available, go to AI Innovations in Settings to learn more.',
+          cleanTextContent(tooltip.innerText),
+          'Auto annotations are not available. Learn more',
       );
     });
 

front_end/panels/timeline/overlays/components/BUILD.gn

@@ -30,6 +30,7 @@ devtools_module("components") {
     "../../../../panels/common:bundle",
     "../../../../ui/components/helpers:bundle",
     "../../../../ui/components/icon_button:bundle",
+    "../../../../ui/components/tooltips:bundle",
     "../../../../ui/lit:bundle",
     "../../../../ui/visual_logging:bundle",
   ]

front_end/panels/timeline/overlays/components/EntryLabelOverlay.ts

@@ -3,11 +3,13 @@
 // found in the LICENSE file.
 
 import '../../../../ui/components/icon_button/icon_button.js';
+import '../../../../ui/components/tooltips/tooltips.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';
 import * as Root from '../../../../core/root/root.js';
+import * as Buttons from '../../../../ui/components/buttons/buttons.js';
 import * as ComponentHelpers from '../../../../ui/components/helpers/helpers.js';
 import * as UI from '../../../../ui/legacy/legacy.js';
 import * as ThemeSupport from '../../../../ui/legacy/theme_support/theme_support.js';
@@ -17,7 +19,7 @@ import * as PanelCommon from '../../../common/common.js';
 
 import stylesRaw from './entryLabelOverlay.css.js';
 
-const {html} = Lit;
+const {html, Directives} = Lit;
 
 // TODO(crbug.com/391381439): Fully migrate off of constructed style sheets.
 const styles = new CSSStyleSheet();
@@ -42,6 +44,10 @@ const UIStrings = {
 * Strings that don't need to be translated at this time.
 */
 const UIStringsNotTranslate = {
+  /**
+   *@description Tooltip link for the navigating to "AI innovations" page in settings.
+   */
+  learnMore: 'Learn more',
   /**
    *@description Security disclaimer text displayed when the information icon on a button that generates an AI label is hovered.
    */
@@ -55,12 +61,11 @@ const UIStringsNotTranslate = {
   /**
    *@description The `Generate AI label button` tooltip disclaimer for when the feature is not available and the reason can be checked in settings.
    */
-  autoAnnotationNotAvailableDisclaimer:
-      'Auto anotations are not available, go to AI Innovations in Settings to learn more.',
+  autoAnnotationNotAvailableDisclaimer: 'Auto annotations are not available.',
   /**
    *@description The `Generate AI label button` tooltip disclaimer for when the feature is not available because the user is offline.
    */
-  autoAnnotationNotAvailableOfflineDisclaimer: 'Auto anotations are not available because you are offline.',
+  autoAnnotationNotAvailableOfflineDisclaimer: 'Auto annotations are not available because you are offline.',
   /**
    *@description Header text for the AI-powered annotations suggestions disclaimer dialog.
    */
@@ -137,6 +142,7 @@ export class EntryLabelOverlay extends HTMLElement {
   #connectorLineContainer: SVGAElement|null = null;
   #label: string;
   #shouldDrawBelowEntry: boolean;
+  #richTooltip: Lit.Directives.Ref<HTMLElement> = Directives.createRef();
   /**
    * The entry label overlay consists of 3 parts - the label part with the label string inside,
    * the line connecting the label to the entry, and a black box around an entry to highlight the entry with a label.
@@ -459,6 +465,26 @@ export class EntryLabelOverlay extends HTMLElement {
         !Root.Runtime.hostConfig.aidaAvailability?.blockedByGeo && !navigator.onLine === false;
   }
 
+  #renderAITooltip(opts: {textContent: string, includeSettingsButton: boolean}): Lit.TemplateResult {
+    // clang-format off
+    return html`<devtools-tooltip variant="rich" id="info-tooltip" ${Directives.ref(this.#richTooltip)}>
+      <div class="info-tooltip-container">
+        ${opts.textContent}
+        ${opts.includeSettingsButton ? html`
+          <button
+            class="link tooltip-link"
+            role="link"
+            jslog=${VisualLogging.link('open-ai-settings').track({
+              click: true,
+            })}
+            @click=${this.#onTooltipLearnMoreClick}
+          >${lockedString(UIStringsNotTranslate.learnMore)}</button>
+        ` : Lit.nothing}
+      </div>
+    </devtools-tooltip>`;
+    // clang-format on
+  }
+
   #renderAiButton(): Lit.TemplateResult {
     const noLogging = Root.Runtime.hostConfig.aidaAvailability?.enterprisePolicyValue ===
         Root.Runtime.GenAiEnterprisePolicyValue.ALLOW_WITHOUT_LOGGING;
@@ -480,18 +506,26 @@ export class EntryLabelOverlay extends HTMLElement {
           </devtools-icon>
           <span class="generate-label-text">${i18nString(UIStrings.generateLabelButton)}</span>
         </button>
-        <devtools-icon
+        <devtools-button
+          aria-details="info-tooltip"
           class="pen-icon"
-          title=${noLogging ? lockedString(UIStringsNotTranslate.generateLabelSecurityDisclaimerLogginOff) : lockedString(UIStringsNotTranslate.generateLabelSecurityDisclaimer)}
-          .name=${'info'}
-          .data=${{
-          iconName: 'info', color: 'var(--color-background-inverted)', width: '20px'}}>
-        </devtools-icon>
+          .iconName=${'info'}
+          .variant=${Buttons.Button.Variant.ICON}
+          ></devtools-button>
+        ${this.#renderAITooltip({
+         textContent: noLogging ? lockedString(UIStringsNotTranslate.generateLabelSecurityDisclaimerLogginOff) : lockedString(UIStringsNotTranslate.generateLabelSecurityDisclaimer),
+         includeSettingsButton: true,
+        })}
       </span>
     `;
     // clang-format on
   }
 
+  #onTooltipLearnMoreClick(): void {
+    this.#richTooltip?.value?.hidePopover();
+    void UI.ViewManager.ViewManager.instance().showView('chrome-ai');
+  }
+
   // The disabled button rendered when the `generate AI label` feature is not available
   // because of the geolocation, age or if they are not logged in into the google account.
   //
@@ -509,13 +543,17 @@ export class EntryLabelOverlay extends HTMLElement {
           ?disabled=${true}
           @click=${this.#handleAiButtonClick}>
           <devtools-icon
+            aria-details="info-tooltip"
             class="pen-icon"
-            title=${noConnection ? lockedString(UIStringsNotTranslate.autoAnnotationNotAvailableOfflineDisclaimer) : lockedString(UIStringsNotTranslate.autoAnnotationNotAvailableDisclaimer)}
             .name=${'pen-spark'}
             .data=${{
             iconName: 'pen-spark', color: 'var(--sys-color-state-disabled)', width: '20px'}}>
           </devtools-icon>
         </button>
+        ${this.#renderAITooltip({
+          textContent: noConnection ? lockedString(UIStringsNotTranslate.autoAnnotationNotAvailableOfflineDisclaimer) : lockedString(UIStringsNotTranslate.autoAnnotationNotAvailableDisclaimer),
+          includeSettingsButton: !noConnection,
+        })}
       </span>
     `;
     // clang-format on

front_end/panels/timeline/overlays/components/entryLabelOverlay.css

@@ -122,3 +122,21 @@
     border-left: none;
   }
 }
+
+/* The tooltip for the AI label generation info */
+.info-tooltip-container {
+  max-width: var(--sys-size-28);
+
+  button.link {
+    cursor: pointer;
+    text-decoration: underline;
+    border: none;
+    padding: 0;
+    background: none;
+    font: inherit;
+    font-weight: var(--ref-typeface-weight-medium);
+    display: block;
+    margin-top: var(--sys-size-4);
+    color: var(--sys-color-primary);
+  }
+}

front_end/testing/DOMHelpers.ts

@@ -290,7 +290,11 @@ export function getCleanTextContentFromElements(el: ShadowRoot|HTMLElement, sele
 export function getCleanTextContentFromSingleElement(el: ShadowRoot|HTMLElement, selector: string): string {
   const element = el.querySelector(selector);
   assert.isOk(element, `Could not find element with selector ${selector}`);
-  return element.textContent ? element.textContent.trim().replace(/[ \n]{2,}/g, ' ') : '';
+  return element.textContent ? cleanTextContent(element.textContent) : '';
+}
+
+export function cleanTextContent(input: string): string {
+  return input.trim().replace(/[ \n]{2,}/g, ' ');
 }
 
 export function assertNodeTextContent(component: NodeText.NodeText.NodeText, expectedContent: string) {