chrome-devtools-frontend 1.0.1526203 → 1.0.1528866

package/front_end/panels/console/ConsolePrompt.ts

@@ -608,8 +608,18 @@ export class ConsolePrompt extends Common.ObjectWrapper.eventMixin<EventTypes, t
   }
 
   private isAiCodeCompletionEnabled(): boolean {
-    return Boolean(
-        Root.Runtime.hostConfig.aidaAvailability?.enabled && Root.Runtime.hostConfig.devToolsAiCodeCompletion?.enabled);
+    const devtoolsLocale = i18n.DevToolsLocale.DevToolsLocale.instance();
+    const aidaAvailability = Root.Runtime.hostConfig.aidaAvailability;
+    if (!devtoolsLocale.locale.startsWith('en-')) {
+      return false;
+    }
+    if (aidaAvailability?.blockedByGeo) {
+      return false;
+    }
+    if (aidaAvailability?.blockedByAge) {
+      return false;
+    }
+    return Boolean(aidaAvailability?.enabled && Root.Runtime.hostConfig.devToolsAiCodeCompletion?.enabled);
   }
 
   private editorSetForTest(): void {

package/front_end/panels/console/ConsoleSidebar.ts

@@ -109,7 +109,7 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
                         n: group.messageCount
                       })}
                   ${group.messageCount === 0 ? nothing : html`
-                  <ul role="group" ?hidden=${group.filter !== input.selectedFilter}>
+                  <ul role="group" hidden>
                     ${group.urlGroups.values().map(urlGroup => html`
                       <li
                         ${Directives.ref(element => element && nodeFilterMap.set(element, group.filter))}

package/front_end/panels/console/ConsoleView.ts

@@ -767,6 +767,7 @@ export class ConsoleView extends UI.Widget.VBox implements
   }
 
   override willHide(): void {
+    super.willHide();
     this.hidePromptSuggestBox();
   }
 
@@ -1698,6 +1699,17 @@ export class ConsoleView extends UI.Widget.VBox implements
   }
 
   private isAiCodeCompletionEnabled(): boolean {
+    const devtoolsLocale = i18n.DevToolsLocale.DevToolsLocale.instance();
+    const aidaAvailability = Root.Runtime.hostConfig.aidaAvailability;
+    if (!devtoolsLocale.locale.startsWith('en-')) {
+      return false;
+    }
+    if (aidaAvailability?.blockedByGeo) {
+      return false;
+    }
+    if (aidaAvailability?.blockedByAge) {
+      return false;
+    }
     return Boolean(Root.Runtime.hostConfig.devToolsAiCodeCompletion?.enabled);
   }
 }

package/front_end/panels/console/ConsoleViewMessage.ts

@@ -41,6 +41,7 @@ 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 Protocol from '../../generated/protocol.js';
+import * as AiAssistanceModel from '../../models/ai_assistance/ai_assistance.js';
 import * as Bindings from '../../models/bindings/bindings.js';
 import type * as IssuesManager from '../../models/issues_manager/issues_manager.js';
 import * as Logs from '../../models/logs/logs.js';
@@ -61,6 +62,7 @@ import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 import * as Security from '../security/security.js';
 
 import {format, updateStyle} from './ConsoleFormat.js';
+import {ConsoleInsightTeaser} from './ConsoleInsightTeaser.js';
 import consoleViewStyles from './consoleView.css.js';
 import type {ConsoleViewportElement} from './ConsoleViewport.js';
 import {augmentErrorStackWithScriptIds, parseSourcePositionsFromErrorStack} from './ErrorStackParser.js';
@@ -317,6 +319,7 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
   private requestResolver: Logs.RequestResolver.RequestResolver;
   private issueResolver: IssuesManager.IssueResolver.IssueResolver;
   #adjacentUserCommandResult = false;
+  #teaser: ConsoleInsightTeaser|undefined = undefined;
 
   /** Formatting Error#stack is asynchronous. Allow tests to wait for the result */
   #formatErrorStackPromiseForTest = Promise.resolve();
@@ -365,7 +368,9 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
       Host.userMetrics.actionTaken(Host.UserMetrics.Action.InsightClosed);
       this.elementInternal?.classList.toggle('has-insight', false);
       this.elementInternal?.removeChild(insight);
+      this.#teaser?.setInactive(false);
     }, {once: true});
+    this.#teaser?.setInactive(true);
   }
 
   element(): HTMLElement {
@@ -374,6 +379,9 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
 
   wasShown(): void {
     this.isVisibleInternal = true;
+    if (this.elementInternal) {
+      this.#teaser?.show(this.elementInternal);
+    }
   }
 
   onResize(): void {
@@ -382,6 +390,7 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
   willHide(): void {
     this.isVisibleInternal = false;
     this.cachedHeight = this.element().offsetHeight;
+    this.#teaser?.detach();
   }
 
   isVisible(): boolean {
@@ -1359,6 +1368,13 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
     this.elementInternal.removeChildren();
     this.consoleRowWrapper = this.elementInternal.createChild('div');
     this.consoleRowWrapper.classList.add('console-row-wrapper');
+
+    if (this.shouldShowTeaser()) {
+      const uuid = crypto.randomUUID();
+      this.elementInternal.setAttribute('aria-details', `teaser-${uuid}`);
+      this.#teaser = new ConsoleInsightTeaser(uuid, this);
+    }
+
     if (this.message.isGroupStartMessage()) {
       this.elementInternal.classList.add('console-group-title');
     }
@@ -1430,6 +1446,17 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
         this.message.level === Protocol.Log.LogEntryLevel.Warning;
   }
 
+  shouldShowTeaser(): boolean {
+    if (!this.shouldShowInsights() || !AiAssistanceModel.BuiltInAi.BuiltInAi.cachedIsAvailable()) {
+      return false;
+    }
+    const devtoolsLocale = i18n.DevToolsLocale.DevToolsLocale.instance();
+    if (!devtoolsLocale.locale.startsWith('en-')) {
+      return false;
+    }
+    return true;
+  }
+
   getExplainLabel(): string {
     if (this.message.level === Protocol.Log.LogEntryLevel.Error) {
       return i18nString(UIStrings.explainThisError);

package/front_end/panels/{explain → console}/PromptBuilder.ts

@@ -9,7 +9,8 @@ import * as Formatter from '../../models/formatter/formatter.js';
 import * as Logs from '../../models/logs/logs.js';
 import * as TextUtils from '../../models/text_utils/text_utils.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
-import type * as Console from '../console/console.js';
+
+import type {ConsoleViewMessage} from './ConsoleViewMessage.js';
 
 const MAX_MESSAGE_SIZE = 1000;
 const MAX_STACK_TRACE_SIZE = 1000;
@@ -28,9 +29,9 @@ export interface Source {
 }
 
 export class PromptBuilder {
-  #consoleMessage: Console.ConsoleViewMessage.ConsoleViewMessage;
+  #consoleMessage: ConsoleViewMessage;
 
-  constructor(consoleMessage: Console.ConsoleViewMessage.ConsoleViewMessage) {
+  constructor(consoleMessage: ConsoleViewMessage) {
     this.#consoleMessage = consoleMessage;
   }
 
@@ -270,14 +271,18 @@ export function formatNetworkRequest(
     string {
   return `Request: ${request.url()}
 
-${AiAssistanceModel.NetworkRequestFormatter.formatHeaders('Request headers:', request.requestHeaders())}
+${
+      AiAssistanceModel.NetworkRequestFormatter.NetworkRequestFormatter.formatHeaders(
+          'Request headers:', request.requestHeaders())}
 
-${AiAssistanceModel.NetworkRequestFormatter.formatHeaders('Response headers:', request.responseHeaders)}
+${
+      AiAssistanceModel.NetworkRequestFormatter.NetworkRequestFormatter.formatHeaders(
+          'Response headers:', request.responseHeaders)}
 
 Response status: ${request.statusCode} ${request.statusText}`;
 }
 
-export function formatConsoleMessage(message: Console.ConsoleViewMessage.ConsoleViewMessage): string {
+export function formatConsoleMessage(message: ConsoleViewMessage): string {
   return message.toMessageTextString().substr(0, MAX_MESSAGE_SIZE);
 }
 
@@ -285,7 +290,7 @@ export function formatConsoleMessage(message: Console.ConsoleViewMessage.Console
  * This formats the stacktrace from the console message which might or might not
  * match the content of stacktrace(s) in the console message arguments.
  */
-export function formatStackTrace(message: Console.ConsoleViewMessage.ConsoleViewMessage): string {
+export function formatStackTrace(message: ConsoleViewMessage): string {
   const previewContainer = message.contentElement().querySelector('.stack-preview-container');
 
   if (!previewContainer) {

package/front_end/panels/console/console.ts

@@ -5,6 +5,7 @@
 import './ConsoleContextSelector.js';
 import './ConsoleFilter.js';
 import './ConsoleFormat.js';
+import './ConsoleInsightTeaser.js';
 import './ConsolePinPane.js';
 import './ConsoleSidebar.js';
 import './ConsoleViewport.js';
@@ -12,10 +13,12 @@ import './ConsoleViewMessage.js';
 import './ConsolePrompt.js';
 import './ConsoleView.js';
 import './ConsolePanel.js';
+import './PromptBuilder.js';
 
 import * as ConsoleContextSelector from './ConsoleContextSelector.js';
 import * as ConsoleFilter from './ConsoleFilter.js';
 import * as ConsoleFormat from './ConsoleFormat.js';
+import * as ConsoleInsightTeaser from './ConsoleInsightTeaser.js';
 import * as ConsolePanel from './ConsolePanel.js';
 import * as ConsolePinPane from './ConsolePinPane.js';
 import * as ConsolePrompt from './ConsolePrompt.js';
@@ -24,11 +27,13 @@ import * as ConsoleView from './ConsoleView.js';
 import * as ConsoleViewMessage from './ConsoleViewMessage.js';
 import * as ConsoleViewport from './ConsoleViewport.js';
 import * as ErrorStackParser from './ErrorStackParser.js';
+import * as PromptBuilder from './PromptBuilder.js';
 
 export {
   ConsoleContextSelector,
   ConsoleFilter,
   ConsoleFormat,
+  ConsoleInsightTeaser,
   ConsolePanel,
   ConsolePinPane,
   ConsolePrompt,
@@ -37,4 +42,5 @@ export {
   ConsoleViewMessage,
   ConsoleViewport,
   ErrorStackParser,
+  PromptBuilder,
 };

package/front_end/panels/console/consoleInsightTeaser.css

@@ -0,0 +1,55 @@
+/*
+ * Copyright 2025 The Chromium Authors
+ * Use of this source code is governed by a BSD-style license that can be
+ * found in the LICENSE file.
+ */
+
+@scope to (devtools-widget > *) {
+  .teaser-tooltip-container {
+    width: var(--sys-size-31);
+    padding: var(--sys-size-1) var(--sys-size-3) var(--sys-size-3);
+    margin-top: var(--sys-size-2);
+  }
+
+  @keyframes gradient {
+    0% { background-position: 100% 0; }
+    100% { background-position: -100% 0; }
+  }
+
+  .loader {
+    background-size: 400% 100%;
+    animation: gradient 4s infinite linear;
+    margin-top: var(--sys-size-5);
+  }
+
+  @media (prefers-color-scheme: light) {
+    .loader {
+      background-image: linear-gradient(
+        70deg,
+        color-mix(in srgb, var(--sys-color-on-surface) 5%, transparent) 0%,
+        color-mix(in srgb, var(--sys-color-on-surface) 5%, transparent) 30%,
+        color-mix(in srgb, var(--sys-color-on-surface) 15%, transparent) 50%,
+        color-mix(in srgb, var(--sys-color-on-surface) 5%, transparent) 70%,
+        color-mix(in srgb, var(--sys-color-on-surface) 5%, transparent) 100%
+      );
+    }
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .loader {
+      background-image: linear-gradient(
+        70deg,
+        color-mix(in srgb, var(--sys-color-on-surface) 10%, transparent) 0%,
+        color-mix(in srgb, var(--sys-color-on-surface) 10%, transparent) 30%,
+        color-mix(in srgb, var(--sys-color-on-surface) 30%, transparent) 50%,
+        color-mix(in srgb, var(--sys-color-on-surface) 10%, transparent) 70%,
+        color-mix(in srgb, var(--sys-color-on-surface) 10%, transparent) 100%
+      );
+    }
+  }
+
+  h2 {
+    font: var(--sys-typescale-body4-bold);
+    margin: 0 0 var(--sys-size-3);
+  }
+}