chrome-devtools-frontend 1.0.1621678 → 1.0.1624409

package/front_end/panels/console/SymbolizedErrorWidget.ts

@@ -0,0 +1,69 @@
+// Copyright 2026 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import * as Bindings from '../../models/bindings/bindings.js';
+import type * as Workspace from '../../models/workspace/workspace.js';
+import * as UI from '../../ui/legacy/legacy.js';
+
+export interface ViewInput {
+  error: Bindings.SymbolizedError.SymbolizedError;
+  ignoreListManager?: Workspace.IgnoreListManager.IgnoreListManager;
+}
+
+const DEFAULT_VIEW = (_input: ViewInput, _output: object, _target: HTMLElement): void => {};
+
+export class SymbolizedErrorWidget extends UI.Widget.Widget {
+  #error?: Bindings.SymbolizedError.SymbolizedError;
+  #view: typeof DEFAULT_VIEW;
+  #ignoreListManager?: Workspace.IgnoreListManager.IgnoreListManager;
+
+  constructor(element?: HTMLElement, view: typeof DEFAULT_VIEW = DEFAULT_VIEW) {
+    super(element);
+    this.#view = view;
+  }
+
+  set ignoreListManager(ignoreListManager: Workspace.IgnoreListManager.IgnoreListManager) {
+    this.#ignoreListManager = ignoreListManager;
+    this.requestUpdate();
+  }
+
+  get ignoreListManager(): Workspace.IgnoreListManager.IgnoreListManager|undefined {
+    return this.#ignoreListManager;
+  }
+
+  set error(error: Bindings.SymbolizedError.SymbolizedError) {
+    this.#error?.removeEventListener(Bindings.SymbolizedError.Events.UPDATED, this.requestUpdate, this);
+    this.#error = error;
+    if (this.isShowing()) {
+      this.#error?.addEventListener(Bindings.SymbolizedError.Events.UPDATED, this.requestUpdate, this);
+    }
+    this.requestUpdate();
+  }
+
+  get error(): Bindings.SymbolizedError.SymbolizedError|undefined {
+    return this.#error;
+  }
+
+  override wasShown(): void {
+    super.wasShown();
+    this.#error?.addEventListener(Bindings.SymbolizedError.Events.UPDATED, this.requestUpdate, this);
+    this.requestUpdate();
+  }
+
+  override willHide(): void {
+    super.willHide();
+    this.#error?.removeEventListener(Bindings.SymbolizedError.Events.UPDATED, this.requestUpdate, this);
+  }
+
+  override performUpdate(): void {
+    if (!this.#error) {
+      return;
+    }
+    const input: ViewInput = {
+      error: this.#error,
+      ignoreListManager: this.#ignoreListManager,
+    };
+    this.#view(input, {}, this.contentElement);
+  }
+}

package/front_end/panels/console/console.ts

@@ -13,6 +13,7 @@ import './ConsoleViewMessage.js';
 import './ConsolePrompt.js';
 import './ConsoleView.js';
 import './ConsolePanel.js';
+import './SymbolizedErrorWidget.js';
 import './PromptBuilder.js';
 
 import * as ConsoleContextSelector from './ConsoleContextSelector.js';
@@ -27,6 +28,7 @@ import * as ConsoleView from './ConsoleView.js';
 import * as ConsoleViewMessage from './ConsoleViewMessage.js';
 import * as ConsoleViewport from './ConsoleViewport.js';
 import * as PromptBuilder from './PromptBuilder.js';
+import * as SymbolizedErrorWidget from './SymbolizedErrorWidget.js';
 
 export {
   ConsoleContextSelector,
@@ -41,4 +43,5 @@ export {
   ConsoleViewMessage,
   ConsoleViewport,
   PromptBuilder,
+  SymbolizedErrorWidget,
 };

package/front_end/panels/elements/StylePropertiesSection.ts

@@ -907,8 +907,7 @@ export class StylePropertiesSection {
       return;
     }
     const sourceTreeElement = this.closestPropertyForEditing(this.#activeAiSuggestion.cssProperty.index);
-    if (!(sourceTreeElement instanceof StylePropertyTreeElement) ||
-        sourceTreeElement.property !== this.#activeAiSuggestion.cssProperty) {
+    if (!(sourceTreeElement instanceof StylePropertyTreeElement)) {
       return;
     }
     return sourceTreeElement;

package/front_end/panels/elements/StylePropertyTreeElement.ts

@@ -3515,7 +3515,7 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
     if (this.prompt) {
       this.prompt.detach();
       this.prompt = null;
-      this.#clearGhostTextInValue();
+      this.section().activeAiSuggestion = undefined;
     }
   }
 

package/front_end/panels/elements/StylesAiCodeCompletionProvider.ts

@@ -55,9 +55,13 @@ export class StylesAiCodeCompletionProvider {
       // early return as this means that code completion was previously setup
       return;
     }
+    // Adding '}' as a stop sequence so that suggestion is limited to properties for a given style section
+    const stopSequences = ['}'];
+    if (this.#aiCodeCompletionConfig.completionContext.stopSequences) {
+      stopSequences.push(...this.#aiCodeCompletionConfig.completionContext.stopSequences);
+    }
     this.#aiCodeCompletion = new AiCodeCompletion.AiCodeCompletion.AiCodeCompletion(
-        {aidaClient: this.#aidaClient}, this.#aiCodeCompletionConfig.panel, undefined,
-        this.#aiCodeCompletionConfig.completionContext.stopSequences);
+        {aidaClient: this.#aidaClient}, this.#aiCodeCompletionConfig.panel, undefined, stopSequences);
     this.#aiCodeCompletionConfig.onFeatureEnabled();
   }
 

package/front_end/panels/elements/StylesSidebarPane.ts

@@ -1918,14 +1918,18 @@ export class CSSPropertyPrompt extends UI.TextPrompt.TextPrompt {
           return;
         }
         break;
-      case 'Enter':
+      case 'Enter': {
         if (keyboardEvent.shiftKey) {
           return;
         }
         // Accept any available autocompletions and advance to the next field.
-        this.tabKeyPressed();
+        const handled = this.tabKeyPressed();
+        if (this.aiCodeCompletionProvider && handled) {
+          event.consume(true);
+        }
         keyboardEvent.preventDefault();
         return;
+      }
       case 'Escape':
         if (this.#handleEscape(keyboardEvent)) {
           return;
@@ -2264,9 +2268,18 @@ export class CSSPropertyPrompt extends UI.TextPrompt.TextPrompt {
     if (!this.queryRange) {
       this.queryRange = new TextUtils.TextRange.TextRange(0, 0, 0, this.text().length);
     }
+
+    const properties = this.#getAiSuggestedProperties(args.text);
+    if (properties.length === 0) {
+      this.treeElement.section().activeAiSuggestion = undefined;
+      this.activeAiSuggestionInfo = undefined;
+      return;
+    }
+
+    const styleText = properties.map(p => `${p.name}: ${p.value};`).join(' ');
     this.treeElement.section().activeAiSuggestion = {
-      text: args.text,
-      properties: this.#getAiSuggestedProperties(args.text),
+      text: styleText,
+      properties,
       cursorPosition: args.from,
       clearCachedRequest: args.clearCachedRequest,
       cssProperty: this.treeElement.property,