chrome-devtools-frontend 1.0.1380117 → 1.0.1386602

package/front_end/panels/elements/ElementStatePaneWidget.ts

@@ -59,11 +59,12 @@ enum SpecificPseudoStates {
   IN_RANGE = 'in-range',
   OUT_OF_RANGE = 'out-of-range',
   VISITED = 'visited',
+  LINK = 'link',
   CHECKED = 'checked',
   INDETERMINATE = 'indeterminate',
   PLACEHOLDER_SHOWN = 'placeholder-shown',
   AUTOFILL = 'autofill',
-}  // TODO(crbug.com/332914922): Also add :link and tests for :visited when the bug is fixed.
+}
 
 export class ElementStatePaneWidget extends UI.Widget.Widget {
   private readonly inputs: HTMLInputElement[];
@@ -207,6 +208,7 @@ export class ElementStatePaneWidget extends UI.Widget.Widget {
         SpecificPseudoStates.OUT_OF_RANGE, createElementStateCheckbox(SpecificPseudoStates.OUT_OF_RANGE));
     this.specificPseudoStateDivs.set(
         SpecificPseudoStates.VISITED, createElementStateCheckbox(SpecificPseudoStates.VISITED));
+    this.specificPseudoStateDivs.set(SpecificPseudoStates.LINK, createElementStateCheckbox(SpecificPseudoStates.LINK));
     this.specificPseudoStateDivs.set(
         SpecificPseudoStates.CHECKED, createElementStateCheckbox(SpecificPseudoStates.CHECKED));
     this.specificPseudoStateDivs.set(
@@ -225,6 +227,7 @@ export class ElementStatePaneWidget extends UI.Widget.Widget {
     setDualStateCheckboxes(SpecificPseudoStates.READ_ONLY, SpecificPseudoStates.READ_WRITE);
     setDualStateCheckboxes(SpecificPseudoStates.IN_RANGE, SpecificPseudoStates.OUT_OF_RANGE);
     setDualStateCheckboxes(SpecificPseudoStates.ENABLED, SpecificPseudoStates.DISABLED);
+    setDualStateCheckboxes(SpecificPseudoStates.VISITED, SpecificPseudoStates.LINK);
 
     this.specificHeader = document.createElement('details');
     this.specificHeader.classList.add('specific-details');
@@ -259,7 +262,7 @@ export class ElementStatePaneWidget extends UI.Widget.Widget {
     this.registerCSSFiles([elementStatePaneWidgetStyles]);
     this.update();
   }
-  private update(): void {
+  override update(): void {
     let node = UI.Context.Context.instance().flavor(SDK.DOMModel.DOMNode);
     if (node) {
       node = node.enclosingElementOrSelf();
@@ -381,8 +384,10 @@ export class ElementStatePaneWidget extends UI.Widget.Widget {
 
     if (isElementOfTypes(node, ['a', 'area']) && node.getAttribute('href') !== undefined) {
       hideSpecificCheckbox(SpecificPseudoStates.VISITED, false);
+      hideSpecificCheckbox(SpecificPseudoStates.LINK, false);
     } else {
       hideSpecificCheckbox(SpecificPseudoStates.VISITED, true);
+      hideSpecificCheckbox(SpecificPseudoStates.LINK, true);
     }
 
     if (isInputWithTypeRadioOrCheckbox(node) || isElementOfTypes(node, ['option'])) {

package/front_end/panels/elements/ElementsSidebarPane.ts

@@ -6,7 +6,7 @@ import * as Common from '../../core/common/common.js';
 import type * as SDK from '../../core/sdk/sdk.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
-import {ComputedStyleModel, Events, type ComputedStyleChangedEvent} from './ComputedStyleModel.js';
+import {type ComputedStyleChangedEvent, ComputedStyleModel, Events} from './ComputedStyleModel.js';
 
 export class ElementsSidebarPane extends UI.Widget.VBox {
   protected computedStyleModelInternal: ComputedStyleModel;
@@ -34,11 +34,11 @@ export class ElementsSidebarPane extends UI.Widget.VBox {
     return this.computedStyleModelInternal;
   }
 
-  async doUpdate(): Promise<void> {
+  override async doUpdate(): Promise<void> {
     return;
   }
 
-  update(): void {
+  override update(): void {
     this.updateWhenVisible = !this.isShowing();
     if (this.updateWhenVisible) {
       return;

package/front_end/panels/elements/ElementsTreeElement.ts

@@ -537,6 +537,7 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     if (this.contentElement && !this.aiButtonContainer) {
       this.aiButtonContainer = this.contentElement.createChild('span', 'ai-button-container');
       const floatingButton = new FloatingButton.FloatingButton.FloatingButton({
+        title: action.title(),
         iconName: 'smart-assistant',
       });
       floatingButton.addEventListener('click', ev => {

package/front_end/panels/elements/LayersWidget.ts

@@ -64,7 +64,7 @@ export class LayersWidget extends UI.Widget.Widget {
     return this.update();
   }
 
-  private async update(): Promise<void> {
+  override async update(): Promise<void> {
     if (!this.isShowing()) {
       return;
     }

package/front_end/panels/elements/PropertyMatchers.test.ts

@@ -280,6 +280,13 @@ describe('Matchers for SDK.CSSPropertyParser.BottomUpTreeMatching', () => {
       assert.deepStrictEqual(
           match('animation', '1s linear var(--non-existent, --animation-name)'),
           ['--non-existent', '--animation-name']);
+      assert.deepStrictEqual(match('animation', '1s step-start 0s kf'), ['kf']);
+      assert.deepStrictEqual(match('animation', '1s step-end 0s kf'), ['kf']);
+      assert.deepStrictEqual(match('animation', '1s steps(1, jump-start) 0s kf'), ['kf']);
+      assert.deepStrictEqual(match('animation', '1s steps(1, jump-end) 0s kf'), ['kf']);
+      assert.deepStrictEqual(match('animation', '1s steps(1, jump-none) 0s kf'), ['kf']);
+      assert.deepStrictEqual(match('animation', '1s steps(1, start) 0s kf'), ['kf']);
+      assert.deepStrictEqual(match('animation', '1s steps(1, end) 0s kf'), ['kf']);
     }
   });
 

package/front_end/panels/elements/PropertyMatchers.ts

@@ -292,6 +292,9 @@ export class LinkableNameMatcher extends matcherBase(LinkableNameMatch) {
         'ease-in': AnimationLonghandPart.EASING_FUNCTION,
         'ease-out': AnimationLonghandPart.EASING_FUNCTION,
         'ease-in-out': AnimationLonghandPart.EASING_FUNCTION,
+        steps: AnimationLonghandPart.EASING_FUNCTION,
+        'step-start': AnimationLonghandPart.EASING_FUNCTION,
+        'step-end': AnimationLonghandPart.EASING_FUNCTION,
       }),
   );
 

package/front_end/panels/elements/classesPaneWidget.css

@@ -16,7 +16,7 @@
   justify-content: flex-start;
 }
 
-.styles-element-classes-pane [is="dt-checkbox"] {
+.styles-element-classes-pane dt-checkbox {
   margin-right: 15px;
 }
 

package/front_end/panels/emulation/DeviceModeView.ts

@@ -598,7 +598,7 @@ export class Ruler extends UI.Widget.VBox {
     void this.throttler.schedule(this.update.bind(this));
   }
 
-  private update(): Promise<void> {
+  override update(): Promise<void> {
     const zoomFactor = UI.ZoomManager.ZoomManager.instance().zoomFactor();
     const size = this.horizontal ? this.contentElementInternal.offsetWidth : this.contentElementInternal.offsetHeight;
 

package/front_end/panels/emulation/DeviceModeWrapper.ts

@@ -80,7 +80,7 @@ export class DeviceModeWrapper extends UI.Widget.VBox {
     this.captureScreenshot(false, clip);
   }
 
-  private update(force: boolean): void {
+  override update(force?: boolean): void {
     this.toggleDeviceModeAction.setToggled(this.showDeviceModeSetting.get());
     if (!force) {
       const showing = this.deviceModeView && this.deviceModeView.isShowing();

package/front_end/panels/emulation/InspectedPagePlaceholder.ts

@@ -63,7 +63,7 @@ export class InspectedPagePlaceholder extends Common.ObjectWrapper.eventMixin<Ev
     return {x: left, y: top, width: right - left, height: bottom - top};
   }
 
-  update(force?: boolean): void {
+  override update(force?: boolean): void {
     delete this.updateId;
     const rect = this.dipPageRect();
     const bounds = {

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

@@ -2,14 +2,44 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import type * as Host from '../../core/host/host.js';
+import * as Host from '../../core/host/host.js';
 import {
   describeWithEnvironment,
 } from '../../testing/EnvironmentHelpers.js';
 
 import * as Freestyler from './freestyler.js';
 
-const {AiAgent, ResponseType, ConversationContext} = Freestyler;
+const {AiAgent, ResponseType, ConversationContext, ErrorType} = Freestyler;
+
+function mockAidaClient(
+    fetch: (_: Host.AidaClient.AidaRequest, options?: {signal: AbortSignal}) =>
+        AsyncGenerator<Host.AidaClient.AidaResponse, void, void>,
+    ): Host.AidaClient.AidaClient {
+  return {
+    fetch,
+    registerClientEvent: () => Promise.resolve({}),
+  };
+}
+
+function mockConversationContext(): Freestyler.ConversationContext<unknown> {
+  return new (class extends ConversationContext<unknown>{
+    override getOrigin(): string {
+      return 'origin';
+    }
+
+    override getItem(): unknown {
+      return null;
+    }
+
+    override getIcon(): HTMLElement {
+      return document.createElement('span');
+    }
+
+    override getTitle(): string {
+      return 'title';
+    }
+  })();
+}
 
 class AiAgentMock extends AiAgent<unknown> {
   type = Freestyler.AgentType.FREESTYLER;
@@ -23,7 +53,7 @@ class AiAgentMock extends AiAgent<unknown> {
   clientFeature: Host.AidaClient.ClientFeature = 0;
   userTier: undefined;
 
-  options: Freestyler.AidaRequestOptions = {
+  options: Freestyler.RequestOptions = {
     temperature: 1,
     modelId: 'test model',
   };
@@ -128,27 +158,276 @@ describeWithEnvironment('AiAgent', () => {
       const agent = new AiAgentMock({
         aidaClient: {} as Host.AidaClient.AidaClient,
       });
-      agent.chatNewHistoryForTesting = new Map([
-        [
-          0,
-          [
-            {
-              type: ResponseType.QUERYING,
-              query: 'test',
-            },
-          ],
-        ],
+      agent.chatNewHistoryForTesting = [
+        {
+          type: ResponseType.USER_QUERY,
+          query: 'test',
+        },
+        {
+          type: ResponseType.QUERYING,
+          query: 'test',
+        },
+        {
+          type: ResponseType.THOUGHT,
+          thought: 'thought',
+        },
+        {
+          type: ResponseType.TITLE,
+          title: 'title',
+        },
+        {
+          type: ResponseType.ACTION,
+          code: 'action',
+          output: 'result',
+          canceled: false,
+        },
+        {
+          type: ResponseType.QUERYING,
+          query: 'OBSERVATION: result',
+        },
+        {
+          type: ResponseType.ANSWER,
+          text: 'answer',
+        },
+      ];
+      const request = agent.buildRequest({
+        input: 'test input',
+      });
+      assert.strictEqual(request.input, 'test input');
+      assert.deepStrictEqual(request.chat_history, [
+        {
+          text: 'test',
+          entity: 1,
+        },
+        {
+          entity: 2,
+          text: 'THOUGHT: thought\nTITLE: title\nACTION\naction\nSTOP',
+        },
+        {
+          entity: 1,
+          text: 'OBSERVATION: result',
+        },
+        {
+          entity: 2,
+          text: 'answer',
+        },
       ]);
+    });
 
+    it('builds a request with aborted query in history', async () => {
+      const agent = new AiAgentMock({
+        aidaClient: {} as Host.AidaClient.AidaClient,
+      });
+      agent.chatNewHistoryForTesting = [
+        {
+          type: ResponseType.USER_QUERY,
+          query: 'test',
+        },
+        {
+          type: ResponseType.QUERYING,
+          query: 'test',
+        },
+        {
+          type: ResponseType.THOUGHT,
+          thought: 'thought',
+        },
+        {
+          type: ResponseType.TITLE,
+          title: 'title',
+        },
+        {
+          type: ResponseType.ERROR,
+          error: ErrorType.ABORT,
+        },
+      ];
       const request = agent.buildRequest({
         input: 'test input',
       });
+      assert.strictEqual(request.input, 'test input');
+      assert.deepStrictEqual(request.chat_history, undefined);
+    });
 
+    it('builds a request with aborted query in history before a real request', async () => {
+      const agent = new AiAgentMock({
+        aidaClient: {} as Host.AidaClient.AidaClient,
+      });
+      agent.chatNewHistoryForTesting = [
+        {
+          type: ResponseType.USER_QUERY,
+          query: 'test',
+        },
+        {
+          type: ResponseType.QUERYING,
+          query: 'test',
+        },
+        {
+          type: ResponseType.THOUGHT,
+          thought: 'thought',
+        },
+        {
+          type: ResponseType.TITLE,
+          title: 'title',
+        },
+        {
+          type: ResponseType.ERROR,
+          error: ErrorType.ABORT,
+        },
+        {
+          type: ResponseType.USER_QUERY,
+          query: 'test2',
+        },
+        {
+          type: ResponseType.QUERYING,
+          query: 'test2',
+        },
+        {
+          type: ResponseType.THOUGHT,
+          thought: 'thought2',
+        },
+        {
+          type: ResponseType.TITLE,
+          title: 'title2',
+        },
+        {
+          type: ResponseType.ACTION,
+          code: 'action2',
+          output: 'result2',
+          canceled: false,
+        },
+        {
+          type: ResponseType.QUERYING,
+          query: 'OBSERVATION: result2',
+        },
+        {
+          type: ResponseType.ANSWER,
+          text: 'answer2',
+        },
+      ];
+      const request = agent.buildRequest({
+        input: 'test input',
+      });
       assert.strictEqual(request.input, 'test input');
       assert.deepStrictEqual(request.chat_history, [
         {
-          text: 'test',
+          text: 'test2',
+          entity: 1,
+        },
+        {
+          entity: 2,
+          text: 'THOUGHT: thought2\nTITLE: title2\nACTION\naction2\nSTOP',
+        },
+        {
           entity: 1,
+          text: 'OBSERVATION: result2',
+        },
+        {
+          entity: 2,
+          text: 'answer2',
+        },
+      ]);
+    });
+  });
+
+  describe('run', () => {
+    describe('partial yielding for answers', () => {
+      it('should yield partial answer with final answer at the end', async () => {
+        async function* generateAnswerAfterPartial() {
+          yield {
+            explanation: 'Partial ans',
+            metadata: {},
+            completed: false,
+          };
+
+          yield {
+            explanation: 'Partial answer is now completed',
+            metadata: {},
+            completed: true,
+          };
+        }
+        const agent = new AiAgentMock({
+          aidaClient: mockAidaClient(generateAnswerAfterPartial),
+        });
+
+        const responses = await Array.fromAsync(agent.run('query', {selected: mockConversationContext()}));
+
+        assert.deepStrictEqual(responses, [
+          {
+            type: ResponseType.USER_QUERY,
+            query: 'query',
+          },
+          {
+            type: ResponseType.QUERYING,
+            query: 'query',
+          },
+          {
+            type: ResponseType.ANSWER,
+            text: 'Partial ans',
+            rpcId: undefined,
+          },
+          {
+            type: ResponseType.ANSWER,
+            text: 'Partial answer is now completed',
+            rpcId: undefined,
+            suggestions: undefined,
+          },
+        ]);
+      });
+
+      it('should not add partial answers to history', async () => {
+        async function* generateAnswerAfterPartial() {
+          yield {
+            explanation: 'Partial ans',
+            metadata: {},
+            completed: false,
+          };
+
+          yield {
+            explanation: 'Partial answer is now completed',
+            metadata: {},
+            completed: true,
+          };
+        }
+        const agent = new AiAgentMock({
+          aidaClient: mockAidaClient(generateAnswerAfterPartial),
+        });
+
+        await Array.fromAsync(agent.run('query', {selected: mockConversationContext()}));
+
+        assert.deepStrictEqual(agent.chatHistoryForTesting, [
+          {
+            entity: Host.AidaClient.Entity.USER,
+            text: 'query',
+          },
+          {
+            entity: Host.AidaClient.Entity.SYSTEM,
+            text: 'Partial answer is now completed',
+          },
+        ]);
+      });
+    });
+
+    it('should yield unknown error when aidaFetch does not return anything', async () => {
+      async function* generateNothing() {
+      }
+      const agent = new AiAgentMock({
+        aidaClient: mockAidaClient(generateNothing),
+      });
+
+      const responses = await Array.fromAsync(agent.run('query', {selected: mockConversationContext()}));
+
+      assert.deepStrictEqual(responses, [
+        {
+          type: ResponseType.USER_QUERY,
+          query: 'query',
+        },
+        {
+          type: ResponseType.QUERYING,
+          query: 'query',
+        },
+        {
+          type: ResponseType.ERROR,
+          error: ErrorType.UNKNOWN,
+          rpcId: undefined,
         },
       ]);
     });
@@ -159,42 +438,32 @@ describeWithEnvironment('AiAgent', () => {
       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',
-            },
-          ],
-        ],
-      ]);
+      agent.chatNewHistoryForTesting = [
+        {
+          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',
+        },
+      ];
 
       const responses = await Array.fromAsync(agent.runFromHistory());
       assert.deepStrictEqual(responses, [