[AI] Show a dialog on generate label button click

Show a dialog when the button is clicked.
Will add more tests when I add the logic for it to only appear when the setting is not on and when the input field is empty.

Bug: 393063467
Change-Id: I6329d10b929126c3f0f59289adf239c9ae457e6e
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6341555
Auto-Submit: Alina Varkki <[email protected]>
Reviewed-by: Jack Franklin <[email protected]>
Commit-Queue: Alina Varkki <[email protected]>

Author: AlinaVarkki

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

@@ -4,7 +4,7 @@
 
 import * as Trace from '../../../models/trace/trace.js';
 import {dispatchClickEvent} from '../../../testing/DOMHelpers.js';
-import {describeWithEnvironment} from '../../../testing/EnvironmentHelpers.js';
+import {describeWithEnvironment, updateHostConfig} from '../../../testing/EnvironmentHelpers.js';
 import {
   makeInstantEvent,
   microsecondsTraceWindow,
@@ -14,6 +14,7 @@ import {
 import {TraceLoader} from '../../../testing/TraceLoader.js';
 import * as RenderCoordinator from '../../../ui/components/render_coordinator/render_coordinator.js';
 import * as PerfUI from '../../../ui/legacy/components/perf_ui/perf_ui.js';
+import * as PanelCommon from '../../common/common.js';
 import * as Timeline from '../timeline.js';
 
 import * as Components from './components/components.js';
@@ -64,7 +65,9 @@ function createCharts(parsedTrace?: Trace.Handlers.Types.ParsedTrace): Overlays.
 }
 
 describeWithEnvironment('Overlays', () => {
+  let showFreDialogStub: sinon.SinonStub<Parameters<typeof PanelCommon.FreDialog.show>, Promise<boolean>>;
   beforeEach(() => {
+    showFreDialogStub = sinon.stub(PanelCommon.FreDialog, 'show');
     setupIgnoreListManagerEnvironment();
   });
 
@@ -432,6 +435,54 @@ describeWithEnvironment('Overlays', () => {
       });
     });
 
+    // TODO: update to check if the fre is completed and make the dialog visible dependant on that
+    it('should show FRE dialog on the ai suggestion button click', async function() {
+      updateHostConfig({
+        devToolsAiGeneratedTimelineLabels: {
+          enabled: true,
+        }
+      });
+
+      const {parsedTrace} = await TraceLoader.traceEngine(this, 'web-dev.json.gz');
+      const {overlays, container} = setupChartWithDimensionsAndAnnotationOverlayListeners(parsedTrace);
+      const charts = createCharts(parsedTrace);
+      const event = charts.mainProvider.eventByIndex?.(50);
+      assert.isOk(event);
+
+      // Since ENTRY_LABEL is AnnotationOverlay, create it through ModificationsManager
+      Timeline.ModificationsManager.ModificationsManager.activeManager()?.createAnnotation({
+        type: 'ENTRY_LABEL',
+        label: '',
+        entry: event,
+      });
+
+      await overlays.update();
+      const overlayDOM = container.querySelector<HTMLElement>('.overlay-type-ENTRY_LABEL');
+      assert.isOk(overlayDOM);
+      const component = overlayDOM?.querySelector('devtools-entry-label-overlay');
+      assert.isOk(component?.shadowRoot);
+      const elementsWrapper = component.shadowRoot.querySelector<HTMLElement>('.label-parts-wrapper');
+      assert.isOk(elementsWrapper);
+      const inputField = elementsWrapper.querySelector<HTMLElement>('.input-field');
+      assert.isOk(inputField);
+
+      // Double click on the label box to make it editable and focus on it
+      inputField.dispatchEvent(new FocusEvent('dblclick', {bubbles: true}));
+
+      const aiLabelButtonWrapper =
+          elementsWrapper.querySelector<HTMLElement>('.ai-label-button-wrapper') as HTMLSpanElement;
+      assert.isOk(aiLabelButtonWrapper);
+      const aiButton = aiLabelButtonWrapper.querySelector<HTMLElement>('.ai-label-button') as HTMLSpanElement;
+      assert.isOk(aiButton);
+
+      // This dialog should not be visible unless the `generate annotation` button is clicked
+      assert.isFalse(showFreDialogStub.called, 'Expected FreDialog to be not shown but it\'s shown');
+      aiButton.dispatchEvent(new FocusEvent('click', {bubbles: true}));
+
+      // This dialog should be visible
+      assert.isTrue(showFreDialogStub.called, 'Expected FreDialog to be shown but it\'s not shown');
+    });
+
     it('toggles overlays container display', async function() {
       const {parsedTrace} = await TraceLoader.traceEngine(this, 'web-dev.json.gz');
       const {overlays, container} = setupChartWithDimensionsAndAnnotationOverlayListeners(parsedTrace);

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

@@ -27,6 +27,7 @@ devtools_module("components") {
   deps = [
     "../../../../core/i18n:bundle",
     "../../../../models/trace:bundle",
+    "../../../../panels/common:bundle",
     "../../../../ui/components/helpers:bundle",
     "../../../../ui/components/icon_button:bundle",
     "../../../../ui/lit:bundle",

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

@@ -6,10 +6,13 @@ import '../../../../ui/components/icon_button/icon_button.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 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';
 import * as Lit from '../../../../ui/lit/lit.js';
 import * as VisualLogging from '../../../../ui/visual_logging/visual_logging.js';
+import * as PanelCommon from '../../../common/common.js';
 
 import stylesRaw from './entryLabelOverlay.css.js';
 
@@ -43,7 +46,26 @@ const UIStringsNotTranslate = {
    */
   generateLabelSecurityDisclaimer:
       '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.',
-
+  /**
+   *@description Header text for the AI-powered annotations suggestions disclaimer dialog.
+   */
+  freDisclaimerHeader: 'Get AI-powered annotation suggestions',
+  /**
+   *@description First disclaimer item text for the fre dialog - AI won't always get it right.
+   */
+  freDisclaimerAiWontAlwaysGetItRight: 'This feature uses AI and won’t always get it right',
+  /**
+   *@description Second disclaimer item text for the fre dialog - trace data is sent to Google.
+   */
+  freDisclaimerPrivacyDataSentToGoogle: 'Performance trace is sent to Google to generate annotation suggestions',
+  /**
+   *@description Third disclaimer item text part for the fre dialog part - you can control this setting from the settings panel (because 'settings panel' part of the string is a link, it is attached separately).
+   */
+  freDisclaimerControlSettingFrom: 'You can control this feature in the',
+  /**
+   *@description Third disclaimer item text part for the fre dialog part - settings panel text.
+   */
+  settingsPanel: 'settings panel',
 } as const;
 
 const str_ = i18n.i18n.registerUIStrings('panels/timeline/overlays/components/EntryLabelOverlay.ts', UIStrings);
@@ -357,6 +379,40 @@ export class EntryLabelOverlay extends HTMLElement {
     }
   }
 
+  async #handleAiButtonClick(): Promise<void> {
+    await PanelCommon.FreDialog.show({
+      header: {iconName: 'pen-spark', text: lockedString(UIStringsNotTranslate.freDisclaimerHeader)},
+      reminderItems: [
+        {
+          iconName: 'psychiatry',
+          content: lockedString(UIStringsNotTranslate.freDisclaimerAiWontAlwaysGetItRight),
+        },
+        {
+          iconName: 'google',
+          content: lockedString(UIStringsNotTranslate.freDisclaimerPrivacyDataSentToGoogle),
+        },
+        {
+          iconName: 'gear',
+          // clang-format off
+          content: html`
+            ${lockedString(UIStringsNotTranslate.freDisclaimerControlSettingFrom)}
+            <x-link
+              @click=${() => {
+                void UI.ViewManager.ViewManager.instance().showView('chrome-ai');
+              }}
+              class="link"
+              jslog=${VisualLogging.link('open-ai-settings').track({
+                click: true
+              })}
+            >${lockedString(UIStringsNotTranslate.settingsPanel)}</x-link>`,
+          // clang-format on
+        }
+      ],
+      // TODO: Update this href to be the correct link.
+      learnMoreHref: Platform.DevToolsPath.EmptyUrlString
+    });
+  }
+
   #renderAiButton(): Lit.TemplateResult {
     // clang-format off
     return html`
@@ -367,7 +423,7 @@ export class EntryLabelOverlay extends HTMLElement {
         @mousedown=${(e: Event) => e.preventDefault()}>
         <button
           class="ai-label-button"
-          @click=${(): void => {}}>
+          @click=${this.#handleAiButtonClick}>
           <devtools-icon
             class="pen-icon"
             .name=${'pen-spark'}
@@ -406,7 +462,9 @@ export class EntryLabelOverlay extends HTMLElement {
               contenteditable=${this.#isLabelEditable ? 'plaintext-only' : false}
               jslog=${VisualLogging.textField('timeline.annotations.entry-label-input').track({keydown: true, click: true})}
             ></span>
-            <!-- ${this.#renderAiButton()} -->
+
+            ${Root.Runtime.hostConfig.devToolsAiGeneratedTimelineLabels?.enabled ?
+              this.#renderAiButton():Lit.nothing}
           </span>
           <svg class="connectorContainer">
             <line/>