Update settings tab to include Code suggestions

Add icon for text-analysis

Bug: 425865106
Change-Id: I73f00471807e040b50c59d76275bce8457b04a37
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6786612
Reviewed-by: Ergün Erdoğmuş <[email protected]>
Auto-Submit: Samiya Caur <[email protected]>
Commit-Queue: Samiya Caur <[email protected]>

Author: Samiya Caur

config/gni/devtools_grd_files.gni

@@ -278,6 +278,7 @@ grd_files_bundled_sources = [
   "front_end/Images/sync.svg",
   "front_end/Images/table.svg",
   "front_end/Images/terminal.svg",
+  "front_end/Images/text-analysis.svg",
   "front_end/Images/thumb-down-filled.svg",
   "front_end/Images/thumb-down.svg",
   "front_end/Images/thumb-up-filled.svg",

config/gni/devtools_image_files.gni

@@ -276,6 +276,7 @@ devtools_svg_sources = [
   "sync.svg",
   "table.svg",
   "terminal.svg",
+  "text-analysis.svg",
   "thumb-down-filled.svg",
   "thumb-down.svg",
   "thumb-up-filled.svg",

front_end/Images/src/text-analysis.svg

@@ -27,6 +27,9 @@ describeWithEnvironment('AISettingsTab', () => {
     updateHostConfig({
       devToolsAiGeneratedTimelineLabels: {
         enabled: true,
+      },
+      devToolsAiCodeCompletion: {
+        enabled: true,
       }
     });
   });
@@ -59,28 +62,30 @@ describeWithEnvironment('AISettingsTab', () => {
     Common.Settings.moduleSetting('console-insights-enabled').set(false);
     Common.Settings.moduleSetting('ai-assistance-enabled').set(true);
     Common.Settings.moduleSetting('ai-annotations-enabled').set(true);
+    Common.Settings.moduleSetting('ai-code-completion-fre-completed').set(false);
 
     view = new Settings.AISettingsTab.AISettingsTab();
     renderElementIntoDOM(view);
     await view.render();
     assert.isNotNull(view.shadowRoot);
 
     const switches = Array.from(view.shadowRoot.querySelectorAll('devtools-switch'));
-    assert.lengthOf(switches, 3);
+    assert.lengthOf(switches, 4);
     const details = Array.from(view.shadowRoot.querySelectorAll('.whole-row'));
-    assert.lengthOf(details, 3);
+    assert.lengthOf(details, 4);
     const dropdownButtons = Array.from(view.shadowRoot.querySelectorAll('.dropdown devtools-button')) as HTMLElement[];
-    assert.lengthOf(dropdownButtons, 3);
+    assert.lengthOf(dropdownButtons, 4);
     const toggleContainers =
         Array.from(view.shadowRoot.querySelectorAll('.toggle-container')) as Switch.Switch.Switch[];
-    assert.lengthOf(toggleContainers, 3);
+    assert.lengthOf(toggleContainers, 4);
     return {switches, details, dropdownButtons, toggleContainers, view};
   }
 
   it('renders', async () => {
     Common.Settings.moduleSetting('console-insights-enabled').set(true);
     Common.Settings.moduleSetting('ai-assistance-enabled').set(true);
     Common.Settings.moduleSetting('ai-annotations-enabled').set(true);
+    Common.Settings.moduleSetting('ai-code-completion-fre-completed').set(true);
 
     view = new Settings.AISettingsTab.AISettingsTab();
     renderElementIntoDOM(view);
@@ -98,18 +103,20 @@ describeWithEnvironment('AISettingsTab', () => {
 
     const settingCards = view.shadowRoot.querySelectorAll('.setting-card h2');
     const settingNames = Array.from(settingCards).map(element => element.textContent);
-    assert.deepEqual(settingNames, ['Console Insights', 'AI assistance', 'Auto annotations']);
+    assert.deepEqual(settingNames, ['Console Insights', 'AI assistance', 'Auto annotations', 'Code suggestions']);
 
     const settingCardDesc = view.shadowRoot.querySelectorAll('.setting-description');
     assert.strictEqual(settingCardDesc[0].textContent, 'Helps you understand and fix console warnings and errors');
     assert.strictEqual(settingCardDesc[1].textContent, 'Get help with understanding CSS styles');
     assert.strictEqual(settingCardDesc[2].textContent, 'Get AI suggestions for performance panel annotations');
+    assert.strictEqual(settingCardDesc[3].textContent, 'Get help completing your code');
   });
 
   it('renders different dislaimers for managed users which have logging disabled', async () => {
     Common.Settings.moduleSetting('console-insights-enabled').set(true);
     Common.Settings.moduleSetting('ai-assistance-enabled').set(true);
     Common.Settings.moduleSetting('ai-annotations-enabled').set(true);
+    Common.Settings.moduleSetting('ai-code-completion-fre-completed').set(true);
     updateHostConfig({
       aidaAvailability: {
         enabled: true,
@@ -208,6 +215,8 @@ describeWithEnvironment('AISettingsTab', () => {
     assert.strictEqual(toggleContainers[1].title, underAgeExplainer);
     assert.isTrue(switches[2].disabled);
     assert.strictEqual(toggleContainers[2].title, underAgeExplainer);
+    assert.isTrue(switches[3].disabled);
+    assert.strictEqual(toggleContainers[3].title, underAgeExplainer);
 
     aidaAccessStub.restore();
   });
@@ -226,6 +235,8 @@ describeWithEnvironment('AISettingsTab', () => {
     assert.strictEqual(toggleContainers[1].title, notLoggedInExplainer);
     assert.isTrue(switches[2].disabled);
     assert.strictEqual(toggleContainers[2].title, notLoggedInExplainer);
+    assert.isTrue(switches[3].disabled);
+    assert.strictEqual(toggleContainers[3].title, notLoggedInExplainer);
 
     aidaAccessStub.returns(Promise.resolve(Host.AidaClient.AidaAccessPreconditions.AVAILABLE));
     Host.AidaClient.HostConfigTracker.instance().dispatchEventToListeners(
@@ -235,6 +246,7 @@ describeWithEnvironment('AISettingsTab', () => {
     assert.isFalse(switches[0].disabled);
     assert.isFalse(switches[1].disabled);
     assert.isFalse(switches[2].disabled);
+    assert.isFalse(switches[3].disabled);
     aidaAccessStub.restore();
   });
 

front_end/panels/settings/AISettingsTab.test.ts

@@ -46,7 +46,6 @@ const UIStrings = {
    */
   sendsDataToGoogleNoLogging:
       'Your content will not be used by human reviewers to improve AI. Your organization may change these settings at any time.',
-
   /**
    *@description Text describing a fact to consider when using AI features
    */
@@ -61,7 +60,7 @@ const UIStrings = {
    */
   helpUnderstandConsole: 'Helps you understand and fix console warnings and errors',
   /**
-   *@description Text describing the 'Console Insights' feature
+   *@description Text describing the 'Auto Annotations' feature
    */
   getAIAnnotationsSuggestions: 'Get AI suggestions for performance panel annotations',
   /**
@@ -117,6 +116,10 @@ const UIStrings = {
    */
   helpUnderstandStylingNetworkPerformanceAndFile:
       'Get help with understanding CSS styles, network requests, performance, and files',
+  /**
+   *@description Text describing the 'Code suggestions' feature
+   */
+  helpUnderstandCodeSuggestions: 'Get help completing your code',
   /**
    *@description Text which is a hyperlink to more documentation
    */
@@ -162,6 +165,21 @@ const UIStrings = {
    */
   generatedAiAnnotationsSendDataNoLogging:
       'Your performance trace is sent to Google to generate an explanation. This data will not be used to improve Google’s AI models.',
+  /**
+   *@description Description of the 'Code suggestions' feature
+   */
+  asYouTypeCodeSuggestions:
+      'As you type in the Console or Sources panel, you’ll get code suggestions. Press Tab to accept one.',
+  /**
+   *@description Explainer for which data is being sent for the 'Code suggestions' feature
+   */
+  codeSuggestionsSendData:
+      'To generate code suggestions, your console input, the history of your current console session, and the contents of the currently open file are shared with Google. This data may be seen by human reviewers to improve this feature.',
+  /**
+   *@description Explainer for which data is being sent for the 'Code suggestions' feature when logging is not enabled
+   */
+  codeSuggestionsSendDataNoLogging:
+      'To generate code suggestions, your console input, the history of your current console session, and the contents of the currently open file are shared with Google. This data will not be used to improve Google’s AI models.',
   /**
    *@description Label for a link to the terms of service
    */
@@ -210,6 +228,7 @@ export class AISettingsTab extends LegacyWrapper.LegacyWrapper.WrappableComponen
   #consoleInsightsSetting?: Common.Settings.Setting<boolean>;
   #aiAnnotationsSetting?: Common.Settings.Setting<boolean>;
   #aiAssistanceSetting?: Common.Settings.Setting<boolean>;
+  #aiCodeCompletionSetting?: Common.Settings.Setting<boolean>;
   #aidaAvailability = Host.AidaClient.AidaAccessPreconditions.NO_ACCOUNT_EMAIL;
   #boundOnAidaAvailabilityChange: () => Promise<void>;
   // Setting to parameters needed to display it in the UI.
@@ -234,6 +253,12 @@ export class AISettingsTab extends LegacyWrapper.LegacyWrapper.WrappableComponen
       this.#aiAnnotationsSetting = Common.Settings.Settings.instance().createSetting('ai-annotations-enabled', false);
     }
 
+    if (Root.Runtime.hostConfig.devToolsAiCodeCompletion?.enabled) {
+      // Get an existing setting or, if it does not exist, create a new one.
+      this.#aiCodeCompletionSetting =
+          Common.Settings.Settings.instance().createSetting('ai-code-completion-fre-completed', false);
+    }
+
     this.#boundOnAidaAvailabilityChange = this.#onAidaAvailabilityChange.bind(this);
     this.#initSettings();
   }
@@ -306,7 +331,7 @@ export class AISettingsTab extends LegacyWrapper.LegacyWrapper.WrappableComponen
     }
 
     if (this.#aiAnnotationsSetting) {
-      const aiAssistanceData: AiSettingParams = {
+      const aiAnnotationsData: AiSettingParams = {
         settingName: i18n.i18n.lockedString('Auto annotations'),
         iconName: 'pen-spark',
         settingDescription: i18nString(UIStrings.getAIAnnotationsSuggestions),
@@ -325,11 +350,34 @@ export class AISettingsTab extends LegacyWrapper.LegacyWrapper.WrappableComponen
         },
         settingExpandState: {
           isSettingExpanded: false,
-          expandSettingJSLogContext: 'freestyler.accordion',
+          expandSettingJSLogContext: 'auto-annotations.accordion',
+        },
+      };
+
+      this.#settingToParams.set(this.#aiAnnotationsSetting, aiAnnotationsData);
+    }
+
+    if (this.#aiCodeCompletionSetting) {
+      const aiCodeCompletionData: AiSettingParams = {
+        settingName: i18n.i18n.lockedString('Code suggestions'),
+        iconName: 'text-analysis',
+        settingDescription: i18nString(UIStrings.helpUnderstandCodeSuggestions),
+        enableSettingText: i18nString(UIStrings.enableAiSuggestedAnnotations),
+        settingItems: [{iconName: 'code', text: i18nString(UIStrings.asYouTypeCodeSuggestions)}],
+        toConsiderSettingItems: [{
+          iconName: 'google',
+          text: noLogging ? i18nString(UIStrings.codeSuggestionsSendDataNoLogging) :
+                            i18nString(UIStrings.codeSuggestionsSendData)
+        }],
+        // TODO: Add a relevant link
+        learnMoreLink: {url: '', linkJSLogContext: 'learn-more.code-completion'},
+        settingExpandState: {
+          isSettingExpanded: false,
+          expandSettingJSLogContext: 'code-completion.accordion',
         },
       };
 
-      this.#settingToParams.set(this.#aiAnnotationsSetting, aiAssistanceData);
+      this.#settingToParams.set(this.#aiCodeCompletionSetting, aiCodeCompletionData);
     }
   }
 

front_end/panels/settings/AISettingsTab.ts

@@ -299,6 +299,9 @@ export async function initializeGlobalVars({reset = true} = {}) {
     createSettingValue(
         Common.Settings.SettingCategory.AI, 'ai-assistance-patching-fre-completed', false,
         Common.Settings.SettingType.BOOLEAN),
+    createSettingValue(
+        Common.Settings.SettingCategory.AI, 'ai-code-completion-fre-completed', false,
+        Common.Settings.SettingType.BOOLEAN),
     createSettingValue(
         Common.Settings.SettingCategory.MOBILE, 'emulation.show-device-outline', false,
         Common.Settings.SettingType.BOOLEAN),