chrome-devtools-frontend 1.0.1367881 → 1.0.1380117

package/front_end/panels/explain/components/ConsoleInsight.ts

@@ -8,7 +8,6 @@ import * as Common from '../../../core/common/common.js';
 import * as Host from '../../../core/host/host.js';
 import * as i18n from '../../../core/i18n/i18n.js';
 import type * as Platform from '../../../core/platform/platform.js';
-import * as SDK from '../../../core/sdk/sdk.js';
 import * as Marked from '../../../third_party/marked/marked.js';
 import * as Buttons from '../../../ui/components/buttons/buttons.js';
 import type * as IconButton from '../../../ui/components/icon_button/icon_button.js';
@@ -95,9 +94,9 @@ const UIStrings = {
    */
   notLoggedIn: 'This feature is only available when you sign into Chrome with your Google account.',
   /**
-   * @description The title of the button that opens Chrome settings.
+   * @description The title of a button which opens the Chrome SignIn page.
    */
-  updateSettings: 'Update Settings',
+  signIn: 'Sign in',
   /**
    * @description The header shown when the internet connection is not
    * available.
@@ -168,7 +167,7 @@ const CODE_SNIPPET_WARNING_URL = 'https://support.google.com/legal/answer/135054
 const LEARNMORE_URL = 'https://goo.gle/devtools-console-messages-ai' as Platform.DevToolsPath.UrlString;
 const REPORT_URL = 'https://support.google.com/legal/troubleshooter/1114905?hl=en#ts=1115658%2C13380504' as
     Platform.DevToolsPath.UrlString;
-const CHROME_SETTINGS_URL = 'chrome://settings' as Platform.DevToolsPath.UrlString;
+const SIGN_IN_URL = 'https://accounts.google.com' as Platform.DevToolsPath.UrlString;
 
 const enum State {
   INSIGHT = 'insight',
@@ -214,7 +213,6 @@ export class ConsoleInsight extends HTMLElement {
     return new ConsoleInsight(promptBuilder, aidaClient, aidaAvailability);
   }
 
-  static readonly litTagName = LitHtml.literal`devtools-console-insight`;
   readonly #shadow = this.attachShadow({mode: 'open'});
 
   #promptBuilder: PublicPromptBuilder;
@@ -228,6 +226,8 @@ export class ConsoleInsight extends HTMLElement {
   #selectedRating?: boolean;
 
   #consoleInsightsEnabledSetting: Common.Settings.Setting<boolean>|undefined;
+  #aidaAvailability: Host.AidaClient.AidaAccessPreconditions;
+  #boundOnAidaAvailabilityChange: () => Promise<void>;
 
   constructor(
       promptBuilder: PublicPromptBuilder, aidaClient: PublicAidaClient,
@@ -235,60 +235,55 @@ export class ConsoleInsight extends HTMLElement {
     super();
     this.#promptBuilder = promptBuilder;
     this.#aidaClient = aidaClient;
+    this.#aidaAvailability = aidaAvailability;
     this.#consoleInsightsEnabledSetting = this.#getConsoleInsightsEnabledSetting();
 
-    switch (aidaAvailability) {
+    this.#state = this.#getStateFromAidaAvailability();
+    this.#boundOnAidaAvailabilityChange = this.#onAidaAvailabilityChange.bind(this);
+    this.#render();
+    // Stop keyboard event propagation to avoid Console acting on the events
+    // inside the insight component.
+    this.addEventListener('keydown', e => {
+      e.stopPropagation();
+    });
+    this.addEventListener('keyup', e => {
+      e.stopPropagation();
+    });
+    this.addEventListener('keypress', e => {
+      e.stopPropagation();
+    });
+    this.addEventListener('click', e => {
+      e.stopPropagation();
+    });
+    this.focus();
+  }
+
+  #getStateFromAidaAvailability(): StateData {
+    switch (this.#aidaAvailability) {
       case Host.AidaClient.AidaAccessPreconditions.AVAILABLE: {
-        if (this.#consoleInsightsEnabledSetting?.disabled()) {
-          this.#state = {
-            type: State.SETTING_IS_NOT_TRUE,
-          };
-          break;
-        }
         // Allows skipping the consent reminder if the user enabled the feature via settings in the current session
         const skipReminder =
             Common.Settings.Settings.instance()
                 .createSetting('console-insights-skip-reminder', false, Common.Settings.SettingStorageType.SESSION)
                 .get();
-        this.#state = {
+        return {
           type: State.LOADING,
           consentOnboardingCompleted: this.#getOnboardingCompletedSetting().get() || skipReminder,
         };
-        break;
       }
       case Host.AidaClient.AidaAccessPreconditions.NO_ACCOUNT_EMAIL:
-        this.#state = {
+        return {
           type: State.NOT_LOGGED_IN,
         };
-        break;
       case Host.AidaClient.AidaAccessPreconditions.SYNC_IS_PAUSED:
-        this.#state = {
+        return {
           type: State.SYNC_IS_PAUSED,
         };
-        break;
       case Host.AidaClient.AidaAccessPreconditions.NO_INTERNET:
-        this.#state = {
+        return {
           type: State.OFFLINE,
         };
-        break;
     }
-
-    this.#render();
-    // Stop keyboard event propagation to avoid Console acting on the events
-    // inside the insight component.
-    this.addEventListener('keydown', e => {
-      e.stopPropagation();
-    });
-    this.addEventListener('keyup', e => {
-      e.stopPropagation();
-    });
-    this.addEventListener('keypress', e => {
-      e.stopPropagation();
-    });
-    this.addEventListener('click', e => {
-      e.stopPropagation();
-    });
-    this.focus();
   }
 
   // off -> entrypoints are shown, and point to the AI setting panel where the setting can be turned on
@@ -311,15 +306,36 @@ export class ConsoleInsight extends HTMLElement {
     this.#shadow.adoptedStyleSheets = [styles, Input.checkboxStyles];
     this.classList.add('opening');
     this.#consoleInsightsEnabledSetting?.addChangeListener(this.#onConsoleInsightsSettingChanged, this);
+    const blockedByAge = Common.Settings.Settings.instance().getHostConfig().aidaAvailability?.blockedByAge === true;
     if (this.#state.type === State.LOADING && this.#consoleInsightsEnabledSetting?.getIfNotDisabled() === true &&
-        this.#state.consentOnboardingCompleted) {
+        !blockedByAge && this.#state.consentOnboardingCompleted) {
       Host.userMetrics.actionTaken(Host.UserMetrics.Action.GeneratingInsightWithoutDisclaimer);
     }
+    Host.AidaClient.HostConfigTracker.instance().addEventListener(
+        Host.AidaClient.Events.AIDA_AVAILABILITY_CHANGED, this.#boundOnAidaAvailabilityChange);
+    // If AIDA availability has changed while the component was disconnected, we need to update.
+    void this.#onAidaAvailabilityChange();
+    // The setting might have been turned on/off while the component was disconnected.
+    // Update the state, unless the current state is already terminal (`INSIGHT` or `ERROR`).
+    if (this.#state.type !== State.INSIGHT && this.#state.type !== State.ERROR) {
+      this.#state = this.#getStateFromAidaAvailability();
+    }
     void this.#generateInsightIfNeeded();
   }
 
   disconnectedCallback(): void {
     this.#consoleInsightsEnabledSetting?.removeChangeListener(this.#onConsoleInsightsSettingChanged, this);
+    Host.AidaClient.HostConfigTracker.instance().removeEventListener(
+        Host.AidaClient.Events.AIDA_AVAILABILITY_CHANGED, this.#boundOnAidaAvailabilityChange);
+  }
+
+  async #onAidaAvailabilityChange(): Promise<void> {
+    const currentAidaAvailability = await Host.AidaClient.AidaClient.checkAccessPreconditions();
+    if (currentAidaAvailability !== this.#aidaAvailability) {
+      this.#aidaAvailability = currentAidaAvailability;
+      this.#state = this.#getStateFromAidaAvailability();
+      void this.#generateInsightIfNeeded();
+    }
   }
 
   #onConsoleInsightsSettingChanged(): void {
@@ -359,7 +375,8 @@ export class ConsoleInsight extends HTMLElement {
     if (this.#state.type !== State.LOADING) {
       return;
     }
-    if (this.#consoleInsightsEnabledSetting?.getIfNotDisabled() !== true) {
+    const blockedByAge = Common.Settings.Settings.instance().getHostConfig().aidaAvailability?.blockedByAge === true;
+    if (this.#consoleInsightsEnabledSetting?.getIfNotDisabled() !== true || blockedByAge) {
       this.#transitionTo({
         type: State.SETTING_IS_NOT_TRUE,
       });
@@ -511,17 +528,8 @@ export class ConsoleInsight extends HTMLElement {
     }
   }
 
-  #onGoToChromeSettings(): void {
-    const rootTarget = SDK.TargetManager.TargetManager.instance().rootTarget();
-    if (rootTarget === null) {
-      return;
-    }
-    const url = CHROME_SETTINGS_URL;
-    void rootTarget.targetAgent().invoke_createTarget({url}).then(result => {
-      if (result.getError()) {
-        Host.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab(url);
-      }
-    });
+  #onGoToSignIn(): void {
+    Host.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab(SIGN_IN_URL);
   }
 
   #focusHeader(): void {
@@ -576,7 +584,7 @@ export class ConsoleInsight extends HTMLElement {
         <main jslog=${jslog}>
           ${
             this.#state.validMarkdown ? html`<devtools-markdown-view
-              .data=${{tokens: this.#state.tokens, renderer: this.#renderer} as MarkdownView.MarkdownView.MarkdownViewData}>
+              .data=${{tokens: this.#state.tokens, renderer: this.#renderer, animationEnabled: true} as MarkdownView.MarkdownView.MarkdownViewData}>
             </devtools-markdown-view>`: this.#state.explanation
           }
           <details style="--list-height: ${(this.#state.sources.length + (this.#state.isPageReloadRecommended ? 1 : 0)) * 20}px;" jslog=${VisualLogging.expand('sources').track({click: true})}>
@@ -722,7 +730,7 @@ export class ConsoleInsight extends HTMLElement {
         <div class="filler"></div>
         <div>
           <devtools-button
-            @click=${this.#onGoToChromeSettings}
+            @click=${this.#onGoToSignIn}
             .data=${
               {
                 variant: Buttons.Button.Variant.PRIMARY,
@@ -730,7 +738,7 @@ export class ConsoleInsight extends HTMLElement {
               } as Buttons.Button.ButtonData
             }
           >
-            ${UIStrings.updateSettings}
+            ${UIStrings.signIn}
           </devtools-button>
         </div>
       </footer>`;
@@ -914,7 +922,6 @@ export class ConsoleInsight extends HTMLElement {
 }
 
 class ConsoleInsightSourcesList extends HTMLElement {
-  static readonly litTagName = LitHtml.literal`devtools-console-insight-sources-list`;
   readonly #shadow = this.attachShadow({mode: 'open'});
   #sources: Source[] = [];
   #isPageReloadRecommended = false;

package/front_end/panels/explain/explain-meta.ts

@@ -30,11 +30,7 @@ const UIStrings = {
    * @description Message shown to the user if the DevTools locale is not
    * supported.
    */
-  wrongLocale: 'To use this feature, update your Language preference in DevTools Settings to English',
-  /**
-   * @description Message shown to the user if the age check is not successful.
-   */
-  ageRestricted: 'This feature is only available to users who are 18 years of age or older',
+  wrongLocale: 'To use this feature, set your language preference to English in DevTools settings',
   /**
    * @description Message shown to the user if the user's region is not
    * supported.
@@ -88,10 +84,6 @@ function isLocaleRestricted(): boolean {
   return !devtoolsLocale.locale.startsWith('en-');
 }
 
-function isAgeRestricted(config?: Root.Runtime.HostConfig): boolean {
-  return config?.aidaAvailability?.blockedByAge === true;
-}
-
 function isGeoRestricted(config?: Root.Runtime.HostConfig): boolean {
   return config?.aidaAvailability?.blockedByGeo === true;
 }
@@ -116,9 +108,6 @@ Common.Settings.registerSettingExtension({
     if (isLocaleRestricted()) {
       return {disabled: true, reason: i18nString(UIStrings.wrongLocale)};
     }
-    if (isAgeRestricted(config)) {
-      return {disabled: true, reason: i18nString(UIStrings.ageRestricted)};
-    }
     if (isGeoRestricted(config)) {
       return {disabled: true, reason: i18nString(UIStrings.geoRestricted)};
     }

package/front_end/panels/freestyler/AiAgent.test.ts

@@ -2,24 +2,30 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import * as Host from '../../core/host/host.js';
+import type * as Host from '../../core/host/host.js';
 import {
   describeWithEnvironment,
 } from '../../testing/EnvironmentHelpers.js';
 
 import * as Freestyler from './freestyler.js';
 
-const {AiAgent} = Freestyler;
+const {AiAgent, ResponseType, ConversationContext} = Freestyler;
 
-class AiAgentMock extends AiAgent {
+class AiAgentMock extends AiAgent<unknown> {
+  type = Freestyler.AgentType.FREESTYLER;
   override preamble = 'preamble';
 
+  // eslint-disable-next-line require-yield
+  override async * handleContextDetails(): AsyncGenerator<Freestyler.ContextResponse, void, void> {
+    return;
+  }
+
   clientFeature: Host.AidaClient.ClientFeature = 0;
   userTier: undefined;
 
   options: Freestyler.AidaRequestOptions = {
     temperature: 1,
-    model_id: 'test model',
+    modelId: 'test model',
   };
 }
 
@@ -105,7 +111,7 @@ describeWithEnvironment('AiAgent', () => {
         aidaClient: {} as Host.AidaClient.AidaClient,
       });
       const request = agent.buildRequest({input: 'test input'});
-      assert.strictEqual(request.metadata?.string_session_id, 'session_id');
+      assert.strictEqual(request.metadata?.string_session_id, 'sessionId');
     });
 
     it('builds a request with preamble', async () => {
@@ -122,15 +128,17 @@ describeWithEnvironment('AiAgent', () => {
       const agent = new AiAgentMock({
         aidaClient: {} as Host.AidaClient.AidaClient,
       });
-      agent.chatHistoryForTesting = new Map([[
-        0,
+      agent.chatNewHistoryForTesting = new Map([
         [
-          {
-            text: 'test',
-            entity: Host.AidaClient.Entity.USER,
-          },
+          0,
+          [
+            {
+              type: ResponseType.QUERYING,
+              query: 'test',
+            },
+          ],
         ],
-      ]]);
+      ]);
 
       const request = agent.buildRequest({
         input: 'test input',
@@ -145,4 +153,133 @@ describeWithEnvironment('AiAgent', () => {
       ]);
     });
   });
+
+  describe('runFromHistory', () => {
+    it('should run', async () => {
+      const agent = new AiAgentMock({
+        aidaClient: {} as Host.AidaClient.AidaClient,
+      });
+      agent.chatNewHistoryForTesting = new Map([
+        [
+          0,
+          [
+            {
+              type: ResponseType.USER_QUERY,
+              query: 'first question',
+            },
+            {
+              type: ResponseType.QUERYING,
+              query: 'first enhancements',
+            },
+            {
+              type: ResponseType.ANSWER,
+              text: 'first answer',
+            },
+          ],
+        ],
+        [
+          1,
+          [
+            {
+              type: ResponseType.USER_QUERY,
+              query: 'second question',
+            },
+            {
+              type: ResponseType.QUERYING,
+              query: 'second enhancements',
+            },
+            {
+              type: ResponseType.ANSWER,
+              text: 'second answer',
+            },
+          ],
+        ],
+      ]);
+
+      const responses = await Array.fromAsync(agent.runFromHistory());
+      assert.deepStrictEqual(responses, [
+        {
+          type: ResponseType.USER_QUERY,
+          query: 'first question',
+        },
+        {
+          type: ResponseType.QUERYING,
+          query: 'first enhancements',
+        },
+        {
+          type: ResponseType.ANSWER,
+          text: 'first answer',
+        },
+        {
+          type: ResponseType.USER_QUERY,
+          query: 'second question',
+        },
+        {
+          type: ResponseType.QUERYING,
+          query: 'second enhancements',
+        },
+        {
+          type: ResponseType.ANSWER,
+          text: 'second answer',
+        },
+      ]);
+    });
+  });
+
+  describe('ConversationContext', () => {
+    function getTestContext(origin: string) {
+      class TestContext extends ConversationContext<undefined> {
+        override getIcon(): HTMLElement {
+          throw new Error('Method not implemented.');
+        }
+        override getTitle(): string {
+          throw new Error('Method not implemented.');
+        }
+        override getOrigin(): string {
+          return origin;
+        }
+        override getItem(): undefined {
+          return undefined;
+        }
+      }
+      return new TestContext();
+    }
+    it('checks context origins', () => {
+      const tests = [
+        {
+          contextOrigin: 'https://google.test',
+          agentOrigin: 'https://google.test',
+          isAllowed: true,
+        },
+        {
+          contextOrigin: 'https://google.test',
+          agentOrigin: 'about:blank',
+          isAllowed: false,
+        },
+        {
+          contextOrigin: 'https://google.test',
+          agentOrigin: 'https://www.google.test',
+          isAllowed: false,
+        },
+        {
+          contextOrigin: 'https://a.test',
+          agentOrigin: 'https://b.test',
+          isAllowed: false,
+        },
+        {
+          contextOrigin: 'https://a.test',
+          agentOrigin: 'file:///tmp',
+          isAllowed: false,
+        },
+        {
+          contextOrigin: 'https://a.test',
+          agentOrigin: 'http://a.test',
+          isAllowed: false,
+        },
+      ];
+      for (const test of tests) {
+        assert.strictEqual(getTestContext(test.contextOrigin).isOriginAllowed(test.agentOrigin), test.isAllowed);
+      }
+    });
+  });
 });