[AI][RPP] Only show the FRE dialog when the generate label setting is off and show the dialog otherwise

Make the fre dialog appear only when the setting is off. The setting can be turned on from the dialog of the AI settings panel.
Screencast: http://screencast/cast/NDk3NDIxNzM3NTI1MjQ4MHwyZGUzOGFjNC1lMg

Also refactored tests for labels to remove a bunch of duplicate code.

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

Author: AlinaVarkki

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

@@ -2,6 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import * as Common from '../../../core/common/common.js';
 import * as Trace from '../../../models/trace/trace.js';
 import {dispatchClickEvent} from '../../../testing/DOMHelpers.js';
 import {describeWithEnvironment, updateHostConfig} from '../../../testing/EnvironmentHelpers.js';
@@ -315,6 +316,46 @@ describeWithEnvironment('Overlays', () => {
       return {overlays, container, charts};
     }
 
+    async function createAnnotationsLabelElement(
+        context: Mocha.Suite|Mocha.Context|null, file: string, entryIndex: number, label?: string): Promise<{
+      elementsWrapper: HTMLElement,
+      inputField: HTMLElement,
+      overlays: Overlays.Overlays.Overlays,
+      event: Trace.Types.Events.Event,
+    }> {
+      updateHostConfig({
+        devToolsAiGeneratedTimelineLabels: {
+          enabled: true,
+        }
+      });
+
+      const {parsedTrace} = await TraceLoader.traceEngine(context, file);
+      const {overlays, container, charts} = setupChartWithDimensionsAndAnnotationOverlayListeners(parsedTrace);
+      const event = charts.mainProvider.eventByIndex?.(entryIndex);
+      assert.isOk(event);
+
+      // Create an entry label overlay
+      Timeline.ModificationsManager.ModificationsManager.activeManager()?.createAnnotation({
+        type: 'ENTRY_LABEL',
+        entry: event,
+        label: label ?? '',
+      });
+      await overlays.update();
+
+      // Ensure that the overlay was created.
+      const overlayDOM = container.querySelector<HTMLElement>('.overlay-type-ENTRY_LABEL');
+      assert.isOk(overlayDOM);
+      const component = overlayDOM?.querySelector('devtools-entry-label-overlay');
+      assert.isOk(component?.shadowRoot);
+      component.connectedCallback();
+      const elementsWrapper = component.shadowRoot.querySelector<HTMLElement>('.label-parts-wrapper');
+      assert.isOk(elementsWrapper);
+      const inputField = elementsWrapper.querySelector<HTMLElement>('.input-field');
+      assert.isOk(inputField);
+
+      return {elementsWrapper, inputField, overlays, event};
+    }
+
     it('can render an entry selected overlay', async function() {
       const {parsedTrace} = await TraceLoader.traceEngine(this, 'web-dev.json.gz');
       const {overlays, container, charts} = setupChartWithDimensionsAndAnnotationOverlayListeners(parsedTrace);
@@ -435,53 +476,47 @@ 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,
-        }
-      });
+    it('should show FRE dialog on the ai suggestion button click if the `ai-annotations-enabled` setting is off',
+       async function() {
+         Common.Settings.moduleSetting('ai-annotations-enabled').set(false);
+         const {elementsWrapper, inputField} = await createAnnotationsLabelElement(this, 'web-dev.json.gz', 50);
 
-      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);
+         // Double click on the label box to make it editable and focus on it
+         inputField.dispatchEvent(new FocusEvent('dblclick', {bubbles: true}));
 
-      // Since ENTRY_LABEL is AnnotationOverlay, create it through ModificationsManager
-      Timeline.ModificationsManager.ModificationsManager.activeManager()?.createAnnotation({
-        type: 'ENTRY_LABEL',
-        label: '',
-        entry: event,
-      });
+         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);
 
-      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);
+         // 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}));
 
-      // Double click on the label box to make it editable and focus on it
-      inputField.dispatchEvent(new FocusEvent('dblclick', {bubbles: true}));
+         // This dialog should be visible
+         assert.isTrue(showFreDialogStub.called, 'Expected FreDialog to be shown but it\'s not shown');
+       });
 
-      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);
+    it('should not show FRE dialog on the ai suggestion button click if the `ai-annotations-enabled` setting is on',
+       async function() {
+         Common.Settings.moduleSetting('ai-annotations-enabled').set(true);
+         const {elementsWrapper, inputField} = await createAnnotationsLabelElement(this, 'web-dev.json.gz', 50);
 
-      // 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}));
+         // Double click on the label box to make it editable and focus on it
+         inputField.dispatchEvent(new FocusEvent('dblclick', {bubbles: true}));
 
-      // This dialog should be visible
-      assert.isTrue(showFreDialogStub.called, 'Expected FreDialog to be shown but it\'s not shown');
-    });
+         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);
+
+         aiButton.dispatchEvent(new FocusEvent('click', {bubbles: true}));
+         // This dialog should not be visible on the `generate label` button click since the setting is already on
+         assert.isFalse(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');
@@ -518,59 +553,13 @@ describeWithEnvironment('Overlays', () => {
       assert.lengthOf(container.children, 1);
     });
 
-    it('can render the label for entry label overlay', async function() {
-      const {parsedTrace} = await TraceLoader.traceEngine(this, 'web-dev.json.gz');
-      const {overlays, container, charts} = setupChartWithDimensionsAndAnnotationOverlayListeners(parsedTrace);
-      const event = charts.mainProvider.eventByIndex?.(50);
-      assert.isOk(event);
-
-      overlays.add({
-        type: 'ENTRY_LABEL',
-        entry: event,
-        label: 'entry label',
-      });
-      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);
-
+    it('can render provided label for entry label overlay', async function() {
+      const {inputField} = await createAnnotationsLabelElement(this, 'web-dev.json.gz', 50, 'entry label');
       assert.strictEqual(inputField?.innerText, 'entry label');
     });
 
     it('Inputting `Enter`into label overlay makes it non-editable', async function() {
-      const {parsedTrace} = await TraceLoader.traceEngine(this, 'web-dev.json.gz');
-      const {overlays, container, charts} = setupChartWithDimensionsAndAnnotationOverlayListeners(parsedTrace);
-      const event = charts.mainProvider.eventByIndex?.(50);
-      assert.isOk(event);
-
-      // Create an entry label overlay
-      overlays.add({
-        type: 'ENTRY_LABEL',
-        entry: event,
-        label: 'label',
-      });
-      await overlays.update();
-
-      // Ensure that the overlay was created.
-      const overlayDOM = container.querySelector<HTMLElement>('.overlay-type-ENTRY_LABEL');
-      assert.isOk(overlayDOM);
-
-      const component = overlayDOM?.querySelector('devtools-entry-label-overlay');
-      assert.isOk(component?.shadowRoot);
-      component.connectedCallback();
-      const elementsWrapper = component.shadowRoot.querySelector<HTMLElement>('.label-parts-wrapper');
-      assert.isOk(elementsWrapper);
-
-      const inputField = elementsWrapper.querySelector<HTMLElement>('.input-field');
-      assert.isOk(inputField);
+      const {inputField} = await createAnnotationsLabelElement(this, 'web-dev.json.gz', 50, 'label');
 
       // Double click on the label box to make it editable and focus on it
       inputField.dispatchEvent(new FocusEvent('dblclick', {bubbles: true}));
@@ -687,31 +676,7 @@ describeWithEnvironment('Overlays', () => {
     });
 
     it('Removes empty label if it is empty when navigated away from (removed focused from)', async function() {
-      const {parsedTrace} = await TraceLoader.traceEngine(this, 'web-dev.json.gz');
-      const {overlays, container, charts} = setupChartWithDimensionsAndAnnotationOverlayListeners(parsedTrace);
-      const event = charts.mainProvider.eventByIndex?.(50);
-      assert.isOk(event);
-
-      // Create an entry label overlay
-      Timeline.ModificationsManager.ModificationsManager.activeManager()?.createAnnotation({
-        type: 'ENTRY_LABEL',
-        entry: event,
-        label: '',
-      });
-      await overlays.update();
-
-      // Ensure that the overlay was created.
-      const overlayDOM = container.querySelector<HTMLElement>('.overlay-type-ENTRY_LABEL');
-      assert.isOk(overlayDOM);
-      const component = overlayDOM?.querySelector('devtools-entry-label-overlay');
-      assert.isOk(component?.shadowRoot);
-
-      component.connectedCallback();
-      const elementsWrapper = component.shadowRoot.querySelector<HTMLElement>('.label-parts-wrapper');
-      assert.isOk(elementsWrapper);
-
-      const inputField = elementsWrapper.querySelector<HTMLElement>('.input-field');
-      assert.isOk(inputField);
+      const {inputField, overlays, event} = await createAnnotationsLabelElement(this, 'web-dev.json.gz', 50);
 
       // Double click on the label box to make it editable and focus on it
       inputField.dispatchEvent(new FocusEvent('dblclick', {bubbles: true}));
@@ -927,70 +892,25 @@ describeWithEnvironment('Overlays', () => {
       assert.lengthOf(container.children, 0);
     });
 
-    it('the label entry field is editable when created', async function() {
-      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');
-      const inputField = elementsWrapper?.querySelector<HTMLElement>('.input-field') as HTMLSpanElement;
-      assert.isOk(inputField);
+    it('the label entry field is editable when created without initial label', async function() {
+      const {inputField} = await createAnnotationsLabelElement(this, 'web-dev.json.gz', 50);
       // The label input box should be editable after it is created and before anything else happened
       assert.isTrue(inputField.isContentEditable);
     });
 
     it('the label entry field is in focus after being double clicked on', async function() {
-      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 labelBox = elementsWrapper.querySelector<HTMLElement>('.input-field') as HTMLSpanElement;
-
-      assert.isOk(labelBox);
-
+      const {inputField} = await createAnnotationsLabelElement(this, 'web-dev.json.gz', 50);
       // The label input box should be editable after it is created and before anything else happened
-      assert.isTrue(labelBox.isContentEditable);
+      assert.isTrue(inputField.isContentEditable);
 
       // Make the content to editable by changing the element blur like when clicking outside of it.
       // When that happens, the content should be set to not editable.
-      labelBox.dispatchEvent(new FocusEvent('blur', {bubbles: true}));
-      assert.isFalse(labelBox.isContentEditable);
+      inputField.dispatchEvent(new FocusEvent('blur', {bubbles: true}));
+      assert.isFalse(inputField.isContentEditable);
 
       // Double click on the label to make it editable again
-      labelBox.dispatchEvent(new FocusEvent('dblclick', {bubbles: true}));
-      assert.isTrue(labelBox.isContentEditable);
+      inputField.dispatchEvent(new FocusEvent('dblclick', {bubbles: true}));
+      assert.isTrue(inputField.isContentEditable);
     });
   });
 

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

@@ -4,6 +4,7 @@
 
 import '../../../../ui/components/icon_button/icon_button.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';
@@ -379,8 +380,28 @@ export class EntryLabelOverlay extends HTMLElement {
     }
   }
 
+  // Generate the AI label suggestion if:
+  // 1. the user has already already seen the fre dialog and confirmed the feature usage
+  // or
+  // 2. turned on the `generate AI labels` setting through the AI settings panel
+  //
+  // Otherwise, show the fre dialog with a 'Got it' button that turns the setting on.
   async #handleAiButtonClick(): Promise<void> {
-    await PanelCommon.FreDialog.show({
+    // Creates or gets the setting if it exists.
+    const onboardingCompleteSetting =
+        Common.Settings.Settings.instance().createSetting('ai-annotations-enabled', false);
+
+    if (onboardingCompleteSetting.get()) {
+      // TODO: Actually generate the ai label
+      if (this.#inputField) {
+        this.#label = 'ai generated label';
+        this.dispatchEvent(new EntryLabelChangeEvent(this.#label));
+        this.#inputField.innerText = this.#label;
+      }
+      return;
+    }
+
+    const userConsented = await PanelCommon.FreDialog.show({
       header: {iconName: 'pen-spark', text: lockedString(UIStringsNotTranslate.freDisclaimerHeader)},
       reminderItems: [
         {
@@ -411,12 +432,15 @@ export class EntryLabelOverlay extends HTMLElement {
       // TODO: Update this href to be the correct link.
       learnMoreHref: Platform.DevToolsPath.EmptyUrlString
     });
+
+    if (userConsented) {
+      onboardingCompleteSetting.set(true);
+    }
   }
 
   #renderAiButton(): Lit.TemplateResult {
     // clang-format off
     return html`
-      <!-- TODO: On button click generate a label -->
       <!-- 'preventDefault' on the AI label button to prevent the label removal on blur  -->
       <span
         class="ai-label-button-wrapper"