chrome-devtools-frontend 1.0.1362775 → 1.0.1367881

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

@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 
 import * as Host from '../../core/host/host.js';
+import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import {
   describeWithEnvironment,
@@ -14,12 +15,15 @@ import * as Freestyler from './freestyler.js';
 const {FreestylerAgent} = Freestyler;
 
 describeWithEnvironment('FreestylerAgent', () => {
-  function mockHostConfig(modelId?: string, temperature?: number, userTier?: string) {
+  function mockHostConfig(
+      modelId?: string, temperature?: number, userTier?: string,
+      executionMode?: Root.Runtime.HostConfigFreestylerExecutionMode) {
     getGetHostConfigStub({
-      devToolsFreestylerDogfood: {
+      devToolsFreestyler: {
         modelId,
         temperature,
         userTier,
+        executionMode,
       },
     });
   }
@@ -365,6 +369,17 @@ c`;
           },
       );
     });
+
+    it('parses multi line thoughts', () => {
+      const thoughtText = 'first line\nsecond line';
+      assert.deepStrictEqual(
+          FreestylerAgent.parseResponse(`THOUGHT: ${thoughtText}`),
+          {
+            thought: thoughtText,
+            title: undefined,
+          },
+      );
+    });
   });
 
   describe('describeElement', () => {
@@ -553,6 +568,15 @@ c`;
     });
   });
 
+  function mockAidaClient(
+      fetch: (_: unknown, options?: {signal: AbortSignal}) => AsyncGenerator<Host.AidaClient.AidaResponse, void, void>,
+      ): Host.AidaClient.AidaClient {
+    return {
+      fetch,
+      registerClientEvent: () => Promise.resolve({}),
+    };
+  }
+
   describe('run', () => {
     let element: sinon.SinonStubbedInstance<SDK.DOMModel.DOMNode>;
     beforeEach(() => {
@@ -560,16 +584,6 @@ c`;
       element = sinon.createStubInstance(SDK.DOMModel.DOMNode);
     });
 
-    function mockAidaClient(
-        fetch: (_: unknown, options?: {signal: AbortSignal}) =>
-            AsyncGenerator<Host.AidaClient.AidaResponse, void, void>,
-        ): Host.AidaClient.AidaClient {
-      return {
-        fetch,
-        registerClientEvent: () => Promise.resolve({}),
-      };
-    }
-
     describe('side effect handling', () => {
       it('calls confirmSideEffect when the code execution contains a side effect', async () => {
         const promise = Promise.withResolvers();
@@ -750,6 +764,19 @@ c`;
 
       const responses = await Array.fromAsync(agent.run('test', {selectedElement: element}));
       assert.deepStrictEqual(responses, [
+        {
+          type: Freestyler.ResponseType.TITLE,
+          title: 'Analyzing the prompt',
+        },
+        {
+          type: Freestyler.ResponseType.THOUGHT,
+          contextDetails: [
+            {
+              text: '* Its selector is `undefined`',
+              title: 'Data used',
+            },
+          ],
+        },
         {
           type: Freestyler.ResponseType.QUERYING,
         },
@@ -792,6 +819,19 @@ c`;
 
       const responses = await Array.fromAsync(agent.run('test', {selectedElement: element}));
       assert.deepStrictEqual(responses, [
+        {
+          type: Freestyler.ResponseType.TITLE,
+          title: 'Analyzing the prompt',
+        },
+        {
+          type: Freestyler.ResponseType.THOUGHT,
+          contextDetails: [
+            {
+              text: '* Its selector is `undefined`',
+              title: 'Data used',
+            },
+          ],
+        },
         {
           type: Freestyler.ResponseType.QUERYING,
         },
@@ -827,6 +867,19 @@ c`;
 
       const responses = await Array.fromAsync(agent.run('test', {selectedElement: element}));
       assert.deepStrictEqual(responses, [
+        {
+          type: Freestyler.ResponseType.TITLE,
+          title: 'Analyzing the prompt',
+        },
+        {
+          type: Freestyler.ResponseType.THOUGHT,
+          contextDetails: [
+            {
+              text: '* Its selector is `undefined`',
+              title: 'Data used',
+            },
+          ],
+        },
         {
           type: Freestyler.ResponseType.QUERYING,
         },
@@ -861,6 +914,19 @@ c`;
 
       const responses = await Array.fromAsync(agent.run('test', {selectedElement: element}));
       assert.deepStrictEqual(responses, [
+        {
+          type: Freestyler.ResponseType.TITLE,
+          title: 'Analyzing the prompt',
+        },
+        {
+          type: Freestyler.ResponseType.THOUGHT,
+          contextDetails: [
+            {
+              text: '* Its selector is `undefined`',
+              title: 'Data used',
+            },
+          ],
+        },
         {
           type: Freestyler.ResponseType.QUERYING,
         },
@@ -889,6 +955,19 @@ c`;
       });
       const responses = await Array.fromAsync(agent.run('test', {selectedElement: element}));
       assert.deepStrictEqual(responses, [
+        {
+          type: Freestyler.ResponseType.TITLE,
+          title: 'Analyzing the prompt',
+        },
+        {
+          type: Freestyler.ResponseType.THOUGHT,
+          contextDetails: [
+            {
+              text: '* Its selector is `undefined`',
+              title: 'Data used',
+            },
+          ],
+        },
         {
           type: Freestyler.ResponseType.QUERYING,
         },
@@ -937,6 +1016,19 @@ ANSWER: this is the answer`,
       });
       const responses = await Array.fromAsync(agent.run('test', {selectedElement: element}));
       assert.deepStrictEqual(responses, [
+        {
+          type: Freestyler.ResponseType.TITLE,
+          title: 'Analyzing the prompt',
+        },
+        {
+          type: Freestyler.ResponseType.THOUGHT,
+          contextDetails: [
+            {
+              text: '* Its selector is `undefined`',
+              title: 'Data used',
+            },
+          ],
+        },
         {
           type: Freestyler.ResponseType.QUERYING,
         },
@@ -1066,4 +1158,77 @@ ANSWER: this is the answer`,
       assert.deepStrictEqual(agent.chatHistoryForTesting, []);
     });
   });
+
+  describe('HostConfigFreestylerExecutionMode', () => {
+    let element: sinon.SinonStubbedInstance<SDK.DOMModel.DOMNode>;
+    beforeEach(() => {
+      element = sinon.createStubInstance(SDK.DOMModel.DOMNode);
+    });
+
+    function getMockClient() {
+      let count = 0;
+      async function* generateActionAndAnswer() {
+        if (count === 0) {
+          yield {
+            explanation: `ACTION
+            $0.style.backgroundColor = 'red'
+            STOP`,
+            metadata: {},
+            completed: true,
+          };
+        } else {
+          yield {
+            explanation: 'ANSWER: This is the answer',
+            metadata: {},
+            completed: true,
+          };
+        }
+
+        count++;
+      }
+      return mockAidaClient(generateActionAndAnswer);
+    }
+
+    describe('NO_SCRIPTS', () => {
+      beforeEach(() => {
+        mockHostConfig(undefined, undefined, undefined, Root.Runtime.HostConfigFreestylerExecutionMode.NO_SCRIPTS);
+      });
+
+      it('returns an error if scripts are disabled', async () => {
+        const execJs = sinon.mock();
+        const agent = new FreestylerAgent({
+          aidaClient: getMockClient(),
+          createExtensionScope,
+          execJs,
+        });
+        const responses = await Array.fromAsync(agent.run('test', {selectedElement: element}));
+        const actionStep = responses.find(response => response.type === Freestyler.ResponseType.ACTION)!;
+        assert.strictEqual(actionStep.output, 'Error: JavaScript execution is currently disabled.');
+        assert.strictEqual(execJs.getCalls().length, 0);
+      });
+    });
+
+    describe('SIDE_EFFECT_FREE_SCRIPTS_ONLY', () => {
+      beforeEach(() => {
+        mockHostConfig(
+            undefined, undefined, undefined,
+            Root.Runtime.HostConfigFreestylerExecutionMode.SIDE_EFFECT_FREE_SCRIPTS_ONLY);
+      });
+
+      it('returns an error if a script causes a side effect', async () => {
+        const execJs =
+            sinon.mock().throws(new Freestyler.SideEffectError('EvalError: Possible side-effect in debug-evaluate'));
+        const agent = new FreestylerAgent({
+          aidaClient: getMockClient(),
+          createExtensionScope,
+          execJs,
+        });
+        const responses = await Array.fromAsync(agent.run('test', {selectedElement: element}));
+        const actionStep = responses.find(response => response.type === Freestyler.ResponseType.ACTION)!;
+        assert.strictEqual(
+            actionStep.output, 'Error: JavaScript execution that modifies the page is currently disabled.');
+        assert.strictEqual(execJs.getCalls().length, 1);
+      });
+    });
+  });
 });

package/front_end/panels/freestyler/FreestylerAgent.ts

@@ -4,7 +4,9 @@
 
 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 * as Platform from '../../core/platform/platform.js';
+import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
@@ -18,11 +20,29 @@ import {
   type ResponseData,
   ResponseType,
   type SideEffectResponse,
+  type ThoughtResponse,
+  type TitleResponse,
 } from './AiAgent.js';
 import {ChangeManager} from './ChangeManager.js';
 import {ExtensionScope, FREESTYLER_WORLD_NAME} from './ExtensionScope.js';
 import {ExecutionError, FreestylerEvaluateAction, SideEffectError} from './FreestylerEvaluateAction.js';
 
+/*
+* Strings that don't need to be translated at this time.
+*/
+const UIStringsNotTranslate = {
+  /**
+   *@description Title for context details for Freestyler.
+   */
+  analyzingThePrompt: 'Analyzing the prompt',
+  /**
+   *@description Heading text for context details of Freestyler agent.
+   */
+  dataUsed: 'Data used',
+};
+
+const lockedString = i18n.i18n.lockedString;
+
 /* clang-format off */
 const preamble = `You are the most advanced CSS debugging assistant integrated into Chrome DevTools.
 You always suggest considering the best web development practices and the newest platform features such as view transitions.
@@ -119,8 +139,6 @@ SUGGESTIONS: ["What is a stacking context?", "How can I change the stacking orde
 `;
 /* clang-format on */
 
-export const FIX_THIS_ISSUE_PROMPT = 'Fix this issue using JavaScript code execution';
-
 async function executeJsCode(code: string, {throwOnSideEffect}: {throwOnSideEffect: boolean}): Promise<string> {
   const selectedNode = UI.Context.Context.instance().flavor(SDK.DOMModel.DOMNode);
   const target = selectedNode?.domModel().target() ?? UI.Context.Context.instance().flavor(SDK.Target.Target);
@@ -183,12 +201,18 @@ export class FreestylerAgent extends AiAgent {
   get userTier(): string|undefined {
     const config = Common.Settings.Settings.instance().getHostConfig();
 
-    return config.devToolsFreestylerDogfood?.userTier;
+    return config.devToolsFreestyler?.userTier;
   }
+  get executionMode(): Root.Runtime.HostConfigFreestylerExecutionMode {
+    const config = Common.Settings.Settings.instance().getHostConfig();
+
+    return config.devToolsFreestyler?.executionMode ?? Root.Runtime.HostConfigFreestylerExecutionMode.ALL_SCRIPTS;
+  }
+
   get options(): AidaRequestOptions {
     const config = Common.Settings.Settings.instance().getHostConfig();
-    const temperature = AiAgent.validTemperature(config.devToolsFreestylerDogfood?.temperature);
-    const modelId = config.devToolsFreestylerDogfood?.modelId;
+    const temperature = AiAgent.validTemperature(config.devToolsFreestyler?.temperature);
+    const modelId = config.devToolsFreestyler?.modelId;
 
     return {
       temperature,
@@ -244,9 +268,18 @@ export class FreestylerAgent extends AiAgent {
     while (i < lines.length) {
       const trimmed = lines[i].trim();
       if (trimmed.startsWith('THOUGHT:') && !thought) {
-        // TODO: multiline thoughts.
-        thought = trimmed.substring('THOUGHT:'.length).trim();
+        // Start with the initial `THOUGHT: text` line and move forward by one line.
+        const thoughtLines = [trimmed.substring('THOUGHT:'.length).trim()];
         i++;
+        // Move until we see a new instruction, otherwise we're still inside the `THOUGHT` block.
+        while (i < lines.length && !isInstructionStart(lines[i])) {
+          const trimmedLine = lines[i].trim();
+          if (trimmedLine) {
+            thoughtLines.push(trimmedLine);
+          }
+          i++;
+        }
+        thought = thoughtLines.join('\n');
       } else if (trimmed.startsWith('TITLE:')) {
         title = trimmed.substring('TITLE:'.length).trim();
         i++;
@@ -395,6 +428,7 @@ export class FreestylerAgent extends AiAgent {
           {throwOnSideEffect},
       );
       const byteCount = Platform.StringUtilities.countWtf8Bytes(result);
+      Host.userMetrics.freestylerEvalResponseSize(byteCount);
       if (byteCount > MAX_OBSERVATION_BYTE_LENGTH) {
         throw new Error('Output exceeded the maximum allowed length.');
       }
@@ -504,9 +538,28 @@ export class FreestylerAgent extends AiAgent {
     const scope = this.#createExtensionScope(this.#changes);
     await scope.install();
     try {
+      if (this.executionMode === Root.Runtime.HostConfigFreestylerExecutionMode.NO_SCRIPTS) {
+        return {
+          type: ResponseType.ACTION,
+          code: action,
+          output: 'Error: JavaScript execution is currently disabled.',
+          canceled: true,
+          rpcId,
+        };
+      }
       let result = await this.#generateObservation(action, {throwOnSideEffect: true});
       debugLog(`Action result: ${JSON.stringify(result)}`);
       if (result.sideEffect) {
+        if (this.executionMode === Root.Runtime.HostConfigFreestylerExecutionMode.SIDE_EFFECT_FREE_SCRIPTS_ONLY) {
+          return {
+            type: ResponseType.ACTION,
+            code: action,
+            output: 'Error: JavaScript execution that modifies the page is currently disabled.',
+            canceled: true,
+            rpcId,
+          };
+        }
+
         const sideEffectConfirmationPromiseWithResolvers = this.#confirmSideEffect<boolean>();
         if (isDebugMode()) {
           window.dispatchEvent(new CustomEvent(
@@ -537,6 +590,26 @@ export class FreestylerAgent extends AiAgent {
     }
   }
 
+  async *
+      handleContextDetails(selectedElement: SDK.DOMModel.DOMNode|null):
+          AsyncGenerator<ThoughtResponse|TitleResponse, void, void> {
+    if (!selectedElement) {
+      return;
+    }
+
+    yield {
+      type: ResponseType.TITLE,
+      title: lockedString(UIStringsNotTranslate.analyzingThePrompt),
+    };
+    yield {
+      type: ResponseType.THOUGHT,
+      contextDetails: [{
+        title: lockedString(UIStringsNotTranslate.dataUsed),
+        text: await FreestylerAgent.describeElement(selectedElement),
+      }],
+    };
+  }
+
   async enhanceQuery(query: string, selectedElement: SDK.DOMModel.DOMNode|null): Promise<string> {
     const elementEnchantmentQuery = selectedElement ?
         `# Inspected element\n\n${await FreestylerAgent.describeElement(selectedElement)}\n\n# User request\n\n` :
@@ -548,9 +621,11 @@ export class FreestylerAgent extends AiAgent {
   async * run(query: string, options: {
     signal?: AbortSignal, selectedElement: SDK.DOMModel.DOMNode|null,
   }): AsyncGenerator<ResponseData, void, void> {
+    yield* this.handleContextDetails(options.selectedElement);
+
     query = await this.enhanceQuery(query, options.selectedElement);
     const currentRunId = ++this.#runId;
-
+    Host.userMetrics.freestylerQueryLength(query.length);
     for (let i = 0; i < MAX_STEPS; i++) {
       yield {
         type: ResponseType.QUERYING,

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

@@ -10,8 +10,15 @@ import * as Freestyler from './FreestylerEvaluateAction.js';
 
 describe('FreestylerEvaluateAction', () => {
   describe('error handling', () => {
-    function executeWithResult(mockResult: SDK.RuntimeModel.EvaluationResult): Promise<string> {
+    function executeWithResult(
+        mockResult: SDK.RuntimeModel.EvaluationResult, pausedOnBreakpoint = false): Promise<string> {
       const executionContextStub = sinon.createStubInstance(SDK.RuntimeModel.ExecutionContext);
+      executionContextStub.debuggerModel = sinon.createStubInstance(SDK.DebuggerModel.DebuggerModel);
+      if (pausedOnBreakpoint) {
+        executionContextStub.debuggerModel.selectedCallFrame = () => {
+          return sinon.createStubInstance(SDK.DebuggerModel.CallFrame);
+        };
+      }
       executionContextStub.evaluate.resolves(mockResult);
       executionContextStub.runtimeModel = sinon.createStubInstance(SDK.RuntimeModel.RuntimeModel);
       return Freestyler.FreestylerEvaluateAction.execute('', executionContextStub, {throwOnSideEffect: false});
@@ -44,12 +51,23 @@ describe('FreestylerEvaluateAction', () => {
     it('should throw an ExecutionError when the page returned with an error message', async () => {
       try {
         await executeWithResult({error: 'errorMessage'});
+        assert.fail('not reachable');
       } catch (err) {
         assert.instanceOf(err, Freestyler.ExecutionError);
         assert.strictEqual(err.message, 'errorMessage');
       }
     });
 
+    it('should throw an ExecutionError when the debugger is paused', async () => {
+      try {
+        await executeWithResult({error: 'errorMessage'}, true);
+        assert.fail('not reachable');
+      } catch (err) {
+        assert.instanceOf(err, Freestyler.ExecutionError);
+        assert.strictEqual(err.message, 'Cannot evaluate JavaScript because the execution is paused on a breakpoint.');
+      }
+    });
+
     it('should throw an ExecutionError with the description of the exception if response included exception details',
        async () => {
          try {
@@ -57,6 +75,7 @@ describe('FreestylerEvaluateAction', () => {
              object: mockRemoteObject(),
              exceptionDetails: mockExceptionDetails({description: 'Error description'}),
            });
+           assert.fail('not reachable');
          } catch (err) {
            assert.instanceOf(err, Freestyler.ExecutionError);
            assert.strictEqual(err.message, 'Error description');
@@ -70,6 +89,7 @@ describe('FreestylerEvaluateAction', () => {
              object: mockRemoteObject(),
              exceptionDetails: mockExceptionDetails({description: 'EvalError: Possible side-effect in debug-evaluate'}),
            });
+           assert.fail('not reachable');
          } catch (err) {
            assert.instanceOf(err, Freestyler.SideEffectError);
            assert.strictEqual(err.message, 'EvalError: Possible side-effect in debug-evaluate');

package/front_end/panels/freestyler/FreestylerEvaluateAction.ts

@@ -72,6 +72,9 @@ export interface Options {
 export class FreestylerEvaluateAction {
   static async execute(code: string, executionContext: SDK.RuntimeModel.ExecutionContext, {throwOnSideEffect}: Options):
       Promise<string> {
+    if (executionContext.debuggerModel.selectedCallFrame()) {
+      throw new ExecutionError('Cannot evaluate JavaScript because the execution is paused on a breakpoint.');
+    }
     const response = await executionContext.evaluate(
         {
           expression: code,

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

@@ -52,13 +52,13 @@ describeWithEnvironment('FreestylerPanel', () => {
       panel.show(document.body);
       sinon.assert.calledWith(mockView, sinon.match({state: Freestyler.State.CONSENT_VIEW}));
 
-      Common.Settings.moduleSetting('freestyler-enabled').set(true);
+      Common.Settings.moduleSetting('ai-assistance-enabled').set(true);
       sinon.assert.calledWith(mockView, sinon.match({state: Freestyler.State.CHAT_VIEW}));
       panel.detach();
     });
 
     it('should render chat view when the consent is given before', async () => {
-      Common.Settings.moduleSetting('freestyler-enabled').set(true);
+      Common.Settings.moduleSetting('ai-assistance-enabled').set(true);
 
       new Freestyler.FreestylerPanel(mockView, {
         aidaClient: getTestAidaClient(),
@@ -68,6 +68,20 @@ describeWithEnvironment('FreestylerPanel', () => {
 
       sinon.assert.calledWith(mockView, sinon.match({state: Freestyler.State.CHAT_VIEW}));
     });
+
+    it('should render the consent view when the setting is disabled', async () => {
+      Common.Settings.moduleSetting('ai-assistance-enabled').set(true);
+      Common.Settings.moduleSetting('ai-assistance-enabled').setDisabled(true);
+
+      new Freestyler.FreestylerPanel(mockView, {
+        aidaClient: getTestAidaClient(),
+        aidaAvailability: Host.AidaClient.AidaAccessPreconditions.AVAILABLE,
+        syncInfo: getTestSyncInfo(),
+      });
+
+      sinon.assert.calledWith(mockView, sinon.match({state: Freestyler.State.CONSENT_VIEW}));
+      Common.Settings.moduleSetting('ai-assistance-enabled').setDisabled(false);
+    });
   });
 
   describe('on rate click', () => {