[RPP] Update the 'learn more' links and button name

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

Author: AlinaVarkki

front_end/panels/common/common.ts

@@ -40,12 +40,7 @@ const str_ = i18n.i18n.registerUIStrings('panels/common/common.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 export class FreDialog {
-  static show({
-    header,
-    reminderItems,
-    onLearnMoreClick,
-    ariaLabel,
-  }: {
+  static show({header, reminderItems, onLearnMoreClick, ariaLabel, learnMoreButtonTitle}: {
     header: {
       iconName: string,
       text: Platform.UIString.LocalizedString,
@@ -56,6 +51,7 @@ export class FreDialog {
     }>,
     onLearnMoreClick: () => void,
     ariaLabel?: string,
+    learnMoreButtonTitle?: string,
   }): Promise<boolean> {
     const dialog = new UI.Dialog.Dialog();
     if (ariaLabel) {
@@ -90,7 +86,7 @@ export class FreDialog {
             @click=${onLearnMoreClick}
             .jslogContext=${'fre-disclaimer.learn-more'}
             .variant=${Buttons.Button.Variant.OUTLINED}>
-            ${i18nString(UIStrings.learnMore)}
+            ${learnMoreButtonTitle ?? i18nString(UIStrings.learnMore)}
           </devtools-button>
           <div class="right-buttons">
             <devtools-button

front_end/panels/settings/AISettingsTab.ts

@@ -339,15 +339,17 @@ export class AISettingsTab extends LegacyWrapper.LegacyWrapper.WrappableComponen
         settingDescription: i18nString(UIStrings.getAIAnnotationsSuggestions),
         enableSettingText: i18nString(UIStrings.enableAiSuggestedAnnotations),
         settingItems: [
-          {iconName: 'pen', text: i18nString(UIStrings.getAIAnnotationsSuggestions)},
+          {iconName: 'pen-spark', text: i18nString(UIStrings.getAIAnnotationsSuggestions)},
         ],
         toConsiderSettingItems: [{
           iconName: 'google',
           text: noLogging ? i18nString(UIStrings.generatedAiAnnotationsSendDataNoLogging) :
                             i18nString(UIStrings.generatedAiAnnotationsSendData)
         }],
-        // TODO(b/405316456): Add a relevant link here once we have written the documentation.
-        learnMoreLink: {url: '', linkJSLogContext: 'learn-more.ai-annotations'},
+        learnMoreLink: {
+          url: 'https://developer.chrome.com/docs/devtools/performance/reference#auto-annotations',
+          linkJSLogContext: 'learn-more.auto-annotations'
+        },
         settingExpandState: {
           isSettingExpanded: false,
           expandSettingJSLogContext: 'freestyler.accordion',

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

@@ -516,6 +516,11 @@ describeWithEnvironment('Overlays', () => {
 
          // This dialog should be visible
          assert.isTrue(showFreDialogStub.called, 'Expected FreDialog to be shown but it\'s not shown');
+
+         const customLearnMoreButtonTitle = showFreDialogStub.lastCall.args[0].learnMoreButtonTitle;
+         assert.exists(
+             customLearnMoreButtonTitle, 'Expected FreDialog to have a custom button title but it\'s not provided');
+         assert.deepEqual(customLearnMoreButtonTitle.toString(), 'Learn more about auto annotations');
        });
 
     it('should not show FRE dialog on the ai suggestion button click if the `ai-annotations-enabled` setting is on',

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

@@ -98,6 +98,10 @@ const UIStringsNotTranslate = {
    *@description Third disclaimer item text part for the fre dialog part - settings panel text.
    */
   settingsPanel: 'settings panel',
+  /**
+   *@description Text for the 'learn more' button displayed in fre.
+   */
+  learnMoreButton: 'Learn more about auto annotations',
 } as const;
 
 const str_ = i18n.i18n.registerUIStrings('panels/timeline/overlays/components/EntryLabelOverlay.ts', UIStrings);
@@ -551,11 +555,12 @@ export class EntryLabelOverlay extends HTMLElement {
               })}
             >${lockedString(UIStringsNotTranslate.settingsPanel)}</x-link>`,
           // clang-format on
-        }
+        },
       ],
       onLearnMoreClick: () => {
-        void UI.ViewManager.ViewManager.instance().showView('chrome-ai');
-      }
+        UI.UIUtils.openInNewTab('https://developer.chrome.com/docs/devtools/performance/reference#auto-annotations');
+      },
+      learnMoreButtonTitle: UIStringsNotTranslate.learnMoreButton,
     });
 
     if (userConsented) {