chrome-devtools-frontend 1.0.1529186 → 1.0.1530564

package/eslint.config.mjs

@@ -810,7 +810,7 @@ export default defineConfig([
   },
   {
     name: 'Front-end component docs',
-    files: ['front_end/ui/components/docs/**/*.ts'],
+    files: ['front_end/ui/components/docs/**/*.ts', '**/*.docs.ts'],
     rules: {
       // This makes the component doc examples very verbose and doesn't add
       // anything, so we leave return types to the developer within the

package/front_end/core/common/Gzip.ts

@@ -49,16 +49,18 @@ export async function compress(str: string): Promise<ArrayBuffer> {
 }
 
 /** Private coder/decoder **/
-function gzipCodec(buffer: Uint8Array<ArrayBufferLike>|ArrayBuffer, codecStream: CompressionStream|DecompressionStream):
-    Promise<ArrayBuffer> {
-  const {readable, writable} = new TransformStream();
+async function gzipCodec(
+    buffer: Uint8Array<ArrayBufferLike>|ArrayBuffer,
+    codecStream: CompressionStream|DecompressionStream): Promise<ArrayBuffer> {
+  const readable = new ReadableStream({
+    start(controller) {
+      controller.enqueue(buffer);
+      controller.close();
+    }
+  });
   const codecReadable = readable.pipeThrough(codecStream);
-
-  const writer = writable.getWriter();
-  void writer.write(buffer);
-  void writer.close();
   // A response is a convenient way to get an ArrayBuffer from a ReadableStream.
-  return new Response(codecReadable).arrayBuffer();
+  return await new Response(codecReadable).arrayBuffer();
 }
 
 export function decompressStream(stream: ReadableStream): ReadableStream {

package/front_end/core/common/Worker.ts

@@ -5,10 +5,15 @@
 export class WorkerWrapper {
   readonly #workerPromise: Promise<Worker>;
   #disposed?: boolean;
+  #rejectWorkerPromise?: (error: Error) => void;
 
   private constructor(workerLocation: URL) {
-    this.#workerPromise = new Promise(fulfill => {
+    this.#workerPromise = new Promise((fulfill, reject) => {
+      this.#rejectWorkerPromise = reject;
       const worker = new Worker(workerLocation, {type: 'module'});
+      worker.onerror = event => {
+        console.error(`Failed to load worker for ${workerLocation.href}:`, event);
+      };
       worker.onmessage = (event: MessageEvent<unknown>) => {
         console.assert(event.data === 'workerReady');
         worker.onmessage = null;
@@ -34,7 +39,10 @@ export class WorkerWrapper {
     void this.#workerPromise.then(worker => worker.terminate());
   }
 
-  terminate(): void {
+  terminate(immediately = false): void {
+    if (immediately) {
+      this.#rejectWorkerPromise?.(new Error('Worker terminated'));
+    }
     this.dispose();
   }
 

package/front_end/core/host/AidaClient.ts

@@ -279,7 +279,7 @@ export interface DoConversationClientEvent {
 
 export interface UserImpression {
   sample: {
-    sample_id: number,
+    sample_id?: number,
   };
   latency: {
     duration: {
@@ -291,7 +291,7 @@ export interface UserImpression {
 
 export interface UserAcceptance {
   sample: {
-    sample_id: number,
+    sample_id?: number,
   };
 }
 
@@ -366,7 +366,7 @@ export interface CompletionResponse {
 export interface GenerationSample {
   generationString: string;
   score: number;
-  sampleId: number;
+  sampleId?: number;
   attributionMetadata?: AttributionMetadata;
 }
 

package/front_end/core/host/InspectorFrontendHostAPI.ts

@@ -346,8 +346,7 @@ export interface InspectorFrontendHostAPI {
   closeWindow(): void;
 
   /**
-   * Don't use directly - use {@link CopyToClipboard.copyTextToClipboard} instead.
-   * @deprecated Marked to restrict usage.
+   * If you need to alert to the user after copying use {@link UIUtils.copyTextToClipboard}.
    */
   copyText(text: string|null|undefined): void;
 

package/front_end/core/sdk/NetworkManager.ts

@@ -67,6 +67,10 @@ const UIStrings = {
    * @description Text in Network Manager representing the "Fast 4G" throttling preset
    */
   fast4G: 'Fast 4G',
+  /**
+   * @description Text in Network Manager representing the "Blocking" throttling preset
+   */
+  block: 'Block',
   /**
    * @description Text in Network Manager
    * @example {https://example.com} PH1
@@ -459,6 +463,12 @@ export interface EventTypes {
  * @see https://crbug.com/342406608#comment10 for context around the addition of 4G presets in June 2024.
  */
 
+export const BlockingConditions: ThrottlingConditions = {
+  key: PredefinedThrottlingConditionKey.BLOCKING,
+  block: true,
+  title: i18nLazyString(UIStrings.block),
+};
+
 export const NoThrottlingConditions: Conditions = {
   key: PredefinedThrottlingConditionKey.NO_THROTTLING,
   title: i18nLazyString(UIStrings.noThrottling),
@@ -2466,7 +2476,15 @@ class ExtraInfoBuilder {
 
 SDKModel.register(NetworkManager, {capabilities: Capability.NETWORK, autostart: true});
 
-export function networkConditionsEqual(first: Conditions, second: Conditions): boolean {
+export function networkConditionsEqual(first: ThrottlingConditions, second: ThrottlingConditions): boolean {
+  if ('block' in first || 'block' in second) {
+    if ('block' in first && 'block' in second) {
+      const firstTitle = (typeof first.title === 'function' ? first.title() : first.title);
+      const secondTitle = (typeof second.title === 'function' ? second.title() : second.title);
+      return firstTitle === secondTitle && first.block === second.block;
+    }
+    return false;
+  }
   // Caution: titles might be different function instances, which produce
   // the same value.
   // We prefer to use the i18nTitleKey to prevent against locale changes or
@@ -2493,6 +2511,7 @@ export function networkConditionsEqual(first: Conditions, second: Conditions): b
  * please talk to jacktfranklin@ first.
  */
 export const enum PredefinedThrottlingConditionKey {
+  BLOCKING = 'BLOCKING',
   NO_THROTTLING = 'NO_THROTTLING',
   OFFLINE = 'OFFLINE',
   SPEED_3G = 'SPEED_3G',
@@ -2525,6 +2544,11 @@ export function getPredefinedCondition(key: ThrottlingConditionKey): Conditions|
   return THROTTLING_CONDITIONS_LOOKUP.get(key) ?? null;
 }
 
+export type ThrottlingConditions = Conditions|{
+  readonly key: ThrottlingConditionKey,
+  block: true,
+  title: string | (() => string),
+};
 export interface Conditions {
   readonly key: ThrottlingConditionKey;
   download: number;

package/front_end/core/sdk/SourceMap.ts

@@ -779,6 +779,16 @@ export class SourceMap {
     this.#ensureSourceMapProcessed();
     return this.#scopesInfo?.findOriginalFunctionName(position) ?? null;
   }
+
+  isOutlinedFrame(generatedLine: number, generatedColumn: number): boolean {
+    this.#ensureSourceMapProcessed();
+    return this.#scopesInfo?.isOutlinedFrame(generatedLine, generatedColumn) ?? false;
+  }
+
+  hasInlinedFrames(generatedLine: number, generatedColumn: number): boolean {
+    this.#ensureSourceMapProcessed();
+    return this.#scopesInfo?.hasInlinedFrames(generatedLine, generatedColumn) ?? false;
+  }
 }
 
 const VLQ_BASE_SHIFT = 5;

package/front_end/entrypoints/main/main-meta.ts

@@ -6,6 +6,7 @@ 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 Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Workspace from '../../models/workspace/workspace.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
@@ -935,6 +936,7 @@ UI.Toolbar.registerToolbarItem({
 });
 
 UI.Toolbar.registerToolbarItem({
+  condition: () => !Root.Runtime.Runtime.isTraceApp(),
   async loadItem() {
     const Main = await loadMainModule();
     return Main.MainImpl.MainMenuItem.instance();

package/front_end/entrypoints/trace_app/trace_app.ts

@@ -18,6 +18,7 @@ import '../../panels/sources/sources-meta.js';
 // sdk/emulation depends on panels/sensors: crbug.com/1376652
 import '../../panels/sensors/sensors-meta.js';
 import '../../panels/timeline/timeline-meta.js';
+import '../../panels/ai_assistance/ai_assistance-meta.js';
 import '../../ui/legacy/components/perf_ui/perf_ui-meta.js';
 import '../../ui/legacy/components/quick_open/quick_open-meta.js';
 import '../../ui/legacy/components/source_frame/source_frame-meta.js';

package/front_end/generated/SupportedCSSProperties.js

@@ -3759,6 +3759,13 @@ export const generatedProperties = [
   ],
   "name": "rule"
  },
+ {
+  "longhands": [
+   "row-rule-break",
+   "column-rule-break"
+  ],
+  "name": "rule-break"
+ },
  {
   "longhands": [
    "column-rule-color",
@@ -3766,6 +3773,13 @@ export const generatedProperties = [
   ],
   "name": "rule-color"
  },
+ {
+  "longhands": [
+   "row-rule-outset",
+   "column-rule-outset"
+  ],
+  "name": "rule-outset"
+ },
  {
   "longhands": [
    "column-rule-style",

package/front_end/models/ai_assistance/performance/AICallTree.ts

@@ -2,7 +2,6 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import * as Root from '../../../core/root/root.js';
 import * as Trace from '../../../models/trace/trace.js';
 import * as SourceMapsResolver from '../../../models/trace_source_maps_resolver/trace_source_maps_resolver.js';
 
@@ -144,7 +143,7 @@ export class AICallTree {
       return null;
     }
 
-    const allEventsEnabled = Root.Runtime.experiments.isEnabled('timeline-show-all-events');
+    const showAllEvents = parsedTrace.data.Meta.config.showAllEvents;
     const {startTime, endTime} = Trace.Helpers.Timing.eventTimingsMilliSeconds(selectedEvent);
     const selectedEventBounds = Trace.Helpers.Timing.traceWindowFromMicroSeconds(
         Trace.Helpers.Timing.milliToMicro(startTime), Trace.Helpers.Timing.milliToMicro(endTime));
@@ -166,7 +165,7 @@ export class AICallTree {
     // If the "Show all events" experiment is on, we don't filter out any
     // events here, otherwise the generated call tree will not match what the
     // user is seeing.
-    if (!allEventsEnabled) {
+    if (!showAllEvents) {
       filters.push(new Trace.Extras.TraceFilter.VisibleEventsFilter(Trace.Styles.visibleTypes()));
     }
 

package/front_end/models/ai_code_completion/AiCodeCompletion.ts

@@ -257,10 +257,10 @@ export class AiCodeCompletion extends Common.ObjectWrapper.ObjectWrapper<EventTy
 
   async #generateSampleForRequest(request: Host.AidaClient.CompletionRequest, cursor: number): Promise<{
     suggestionText: string,
-    sampleId: number,
     fromCache: boolean,
     citations: Host.AidaClient.Citation[],
     rpcGlobalId?: Host.AidaClient.RpcGlobalId,
+    sampleId?: number,
   }|null> {
     const {response, fromCache} = await this.#completeCodeCached(request);
     debugLog('At cursor position', cursor, {request, response, fromCache});
@@ -417,7 +417,7 @@ export class AiCodeCompletion extends Common.ObjectWrapper.ObjectWrapper<EventTy
     this.#aidaRequestCache = {request, response};
   }
 
-  #registerUserImpression(rpcGlobalId: Host.AidaClient.RpcGlobalId, sampleId: number, latency: number): void {
+  #registerUserImpression(rpcGlobalId: Host.AidaClient.RpcGlobalId, latency: number, sampleId?: number): void {
     const seconds = Math.floor(latency / 1_000);
     const remainingMs = latency % 1_000;
     const nanos = Math.floor(remainingMs * 1_000_000);
@@ -443,7 +443,7 @@ export class AiCodeCompletion extends Common.ObjectWrapper.ObjectWrapper<EventTy
     Host.userMetrics.actionTaken(Host.UserMetrics.Action.AiCodeCompletionSuggestionDisplayed);
   }
 
-  registerUserAcceptance(rpcGlobalId: Host.AidaClient.RpcGlobalId, sampleId: number): void {
+  registerUserAcceptance(rpcGlobalId: Host.AidaClient.RpcGlobalId, sampleId?: number): void {
     void this.#aidaClient.registerClientEvent({
       corresponding_aida_rpc_global_id: rpcGlobalId,
       disable_user_content_logging: true,

package/front_end/models/bindings/CompilerScriptMapping.ts

@@ -5,7 +5,8 @@
 import * as Common from '../../core/common/common.js';
 import * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
-import type * as StackTraceImpl from '../stack_trace/stack_trace_impl.js';
+// eslint-disable-next-line rulesdir/es-modules-import
+import * as StackTraceImpl from '../stack_trace/stack_trace_impl.js';
 import * as TextUtils from '../text_utils/text_utils.js';
 import * as Workspace from '../workspace/workspace.js';
 
@@ -43,12 +44,14 @@ export class CompilerScriptMapping implements DebuggerSourceMapping {
   readonly #sourceMapToProject = new Map<SDK.SourceMap.SourceMap, ContentProviderBasedProject>();
   readonly #uiSourceCodeToSourceMaps =
       new Platform.MapUtilities.Multimap<Workspace.UISourceCode.UISourceCode, SDK.SourceMap.SourceMap>();
+  readonly #debuggerModel: SDK.DebuggerModel.DebuggerModel;
 
   constructor(
       debuggerModel: SDK.DebuggerModel.DebuggerModel, workspace: Workspace.Workspace.WorkspaceImpl,
       debuggerWorkspaceBinding: DebuggerWorkspaceBinding) {
     this.#sourceMapManager = debuggerModel.sourceMapManager();
     this.#debuggerWorkspaceBinding = debuggerWorkspaceBinding;
+    this.#debuggerModel = debuggerModel;
 
     this.#stubProject = new ContentProviderBasedProject(
         workspace, 'jsSourceMaps:stub:' + debuggerModel.target().id(), Workspace.Workspace.projectTypes.Service, '',
@@ -266,9 +269,56 @@ export class CompilerScriptMapping implements DebuggerSourceMapping {
   }
 
   translateRawFramesStep(
-      _rawFrames: StackTraceImpl.Trie.RawFrame[],
-      _translatedFrames: Awaited<ReturnType<StackTraceImpl.StackTraceModel.TranslateRawFrames>>): boolean {
-    // TODO(crbug.com/433162438): Implement source map stack trace translation.
+      rawFrames: StackTraceImpl.Trie.RawFrame[],
+      translatedFrames: Awaited<ReturnType<StackTraceImpl.StackTraceModel.TranslateRawFrames>>): boolean {
+    const frame = rawFrames[0];
+    if (StackTraceImpl.Trie.isBuiltinFrame(frame)) {
+      return false;
+    }
+
+    const sourceMapWithScopeInfoForFrame =
+        (rawFrame: StackTraceImpl.Trie.RawFrame): {sourceMap: SDK.SourceMap.SourceMap, script: SDK.Script.Script}|
+        null => {
+          const script = this.#debuggerModel.scriptForId(rawFrame.scriptId ?? '');
+          if (!script || this.#stubUISourceCodes.has(script)) {
+            // Use fallback while source map is being loaded.
+            return null;
+          }
+
+          const sourceMap = script.sourceMap();
+          return sourceMap?.hasScopeInfo() ? {sourceMap, script} : null;
+        };
+
+    const sourceMapAndScript = sourceMapWithScopeInfoForFrame(frame);
+    if (!sourceMapAndScript) {
+      return false;
+    }
+    const {sourceMap, script} = sourceMapAndScript;
+    const {lineNumber, columnNumber} = script.relativeLocationToRawLocation(frame);
+
+    if (!sourceMap.hasInlinedFrames(lineNumber, columnNumber) && !sourceMap.isOutlinedFrame(lineNumber, columnNumber)) {
+      // No outlining or inlining: Get the original function name and map the call-site.
+      const mapping = sourceMap.findEntry(lineNumber, columnNumber);
+      if (!mapping?.sourceURL) {
+        return false;
+      }
+
+      const originalName = sourceMap.findOriginalFunctionName({line: lineNumber, column: columnNumber});
+      rawFrames.shift();
+      const project = this.#sourceMapToProject.get(sourceMap);
+      const uiSourceCode = project?.uiSourceCodeForURL(mapping.sourceURL);
+      translatedFrames.push([{
+        line: mapping.sourceLineNumber,
+        column: mapping.sourceColumnNumber,
+        name: originalName ?? undefined,
+        uiSourceCode: uiSourceCode ?? undefined,
+        url: uiSourceCode ? undefined : mapping.sourceURL
+      }]);
+      return true;
+    }
+
+    // TODO(crbug.com/433162438): Expand inlined frames.
+    // TODO(crbug.com/433162438): Consolidate outlined frames.
     return false;
   }
 

package/front_end/models/formatter/FormatterWorkerPool.ts

@@ -7,7 +7,7 @@ import * as FormatterActions from '../../entrypoints/formatter_worker/FormatterA
 
 export {DefinitionKind, ScopeKind, type ScopeTreeNode} from '../../entrypoints/formatter_worker/FormatterActions.js';
 
-let formatterWorkerPoolInstance: FormatterWorkerPool;
+let formatterWorkerPoolInstance: FormatterWorkerPool|undefined;
 
 export class FormatterWorkerPool {
   private taskQueue: Task[];
@@ -26,6 +26,22 @@ export class FormatterWorkerPool {
     return formatterWorkerPoolInstance;
   }
 
+  dispose(): void {
+    for (const task of this.taskQueue) {
+      console.error('rejecting task');
+      task.errorCallback(new Event('Worker terminated'));
+    }
+    for (const [worker, task] of this.workerTasks.entries()) {
+      task?.errorCallback(new Event('Worker terminated'));
+      worker.terminate(/* immediately=*/ true);
+    }
+  }
+
+  static removeInstance(): void {
+    formatterWorkerPoolInstance?.dispose();
+    formatterWorkerPoolInstance = undefined;
+  }
+
   private createWorker(): Common.Worker.WorkerWrapper {
     const worker = Common.Worker.WorkerWrapper.fromURL(
         new URL('../../entrypoints/formatter_worker/formatter_worker-entrypoint.js', import.meta.url));

package/front_end/models/javascript_metadata/NativeFunctions.js

@@ -687,7 +687,7 @@ export const NativeFunctions = [
   {
     name: "toJSON",
     signatures: [["?key"]],
-    receivers: ["Date"]
+    receivers: ["Date","CSPViolationReportBody","ReportBody","CoopAccessViolationReportBody","DeprecationReportBody","DocumentPolicyViolationReportBody","IntegrityViolationReportBody","InterventionReportBody","PermissionsPolicyViolationReportBody","TestReportBody"]
   },
   {
     name: "parse",

package/front_end/models/trace/ModelImpl.ts

@@ -81,8 +81,13 @@ export class Model extends EventTarget {
    * });
    * void this.traceModel.parse(events);
    **/
-  async parse(traceEvents: readonly Types.Events.Event[], config?: Types.Configuration.ParseOptions): Promise<void> {
-    const metadata = config?.metadata || {};
+  async parse(traceEvents: readonly Types.Events.Event[], config: Types.Configuration.ParseOptions = {}):
+      Promise<void> {
+    if (config.showAllEvents === undefined) {
+      config.showAllEvents = this.#config.showAllEvents;
+    }
+
+    const metadata = config.metadata || {};
     // During parsing, periodically update any listeners on each processors'
     // progress (if they have any updates).
     const onTraceUpdate = (event: Event): void => {
@@ -98,7 +103,7 @@ export class Model extends EventTarget {
     try {
       // Wait for all outstanding promises before finishing the async execution,
       // but perform all tasks in parallel.
-      await this.#processor.parse(traceEvents, config ?? {});
+      await this.#processor.parse(traceEvents, config);
       if (!this.#processor.data) {
         throw new Error('processor did not parse trace');
       }

package/front_end/models/trace/handlers/MetaHandler.ts

@@ -6,6 +6,10 @@ import * as Platform from '../../../core/platform/platform.js';
 import * as Helpers from '../helpers/helpers.js';
 import * as Types from '../types/types.js';
 
+import type {FinalizeOptions} from './types.js';
+
+let config: {showAllEvents: boolean};
+
 // We track the renderer processes we see in each frame on the way through the trace.
 let rendererProcessesByFrameId: FrameProcessData = new Map();
 
@@ -349,7 +353,9 @@ export function handleEvent(event: Types.Events.Event): void {
   }
 }
 
-export async function finalize(): Promise<void> {
+export async function finalize(options?: FinalizeOptions): Promise<void> {
+  config = {showAllEvents: Boolean(options?.showAllEvents)};
+
   // We try to set the minimum time by finding the event with the smallest
   // timestamp. However, if we also got a timestamp from the
   // TracingStartedInBrowser event, we should always use that.
@@ -431,6 +437,7 @@ export async function finalize(): Promise<void> {
 }
 
 export interface MetaHandlerData {
+  config: {showAllEvents: boolean};
   traceIsGeneric: boolean;
   traceBounds: Types.Timing.TraceWindowMicro;
   browserProcessId: Types.Events.ProcessID;
@@ -494,6 +501,7 @@ export type FrameProcessData =
 
 export function data(): MetaHandlerData {
   return {
+    config,
     traceBounds,
     browserProcessId,
     browserThreadId,

package/front_end/models/trace/types/Configuration.ts

@@ -66,6 +66,7 @@ export function configToCacheKey(config: Configuration): string {
 }
 
 export interface ParseOptions {
+  showAllEvents?: boolean;
   /**
    * If the trace was just recorded on the current page, rather than an imported file.
    * TODO(paulirish): Maybe remove. This is currently unused by the Processor and Handlers

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

@@ -215,6 +215,7 @@ UI.ViewManager.registerViewExtension({
   commandPrompt: i18nLazyString(UIStrings.showOverrides),
   order: 4,
   persistence: UI.ViewManager.ViewPersistence.PERMANENT,
+  condition: () => !Root.Runtime.Runtime.isTraceApp(),
   async loadView() {
     const Sources = await loadSourcesModule();
     return Sources.SourcesNavigator.OverridesNavigatorView.instance();
@@ -228,7 +229,7 @@ UI.ViewManager.registerViewExtension({
   commandPrompt: i18nLazyString(UIStrings.showContentScripts),
   order: 5,
   persistence: UI.ViewManager.ViewPersistence.PERMANENT,
-  condition: () => Root.Runtime.getPathName() !== '/bundled/worker_app.html',
+  condition: () => Root.Runtime.getPathName() !== '/bundled/worker_app.html' && !Root.Runtime.Runtime.isTraceApp(),
   async loadView() {
     const Sources = await loadSourcesModule();
     return new Sources.SourcesNavigator.ContentScriptsNavigatorView();

package/front_end/panels/changes/CombinedDiffView.ts

@@ -10,7 +10,6 @@ import type * as Workspace from '../../models/workspace/workspace.js';
 import * as WorkspaceDiff from '../../models/workspace_diff/workspace_diff.js';
 import type * as Diff from '../../third_party/diff/diff.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
-import * as CopyToClipboard from '../../ui/components/copy_to_clipboard/copy_to_clipboard.js';
 import type * as DiffView from '../../ui/components/diff_view/diff_view.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as Lit from '../../ui/lit/lit.js';
@@ -168,7 +167,7 @@ export class CombinedDiffView extends UI.Widget.Widget {
       return;
     }
 
-    CopyToClipboard.copyTextToClipboard(content.text, i18nString(UIStrings.copied));
+    UI.UIUtils.copyTextToClipboard(content.text, i18nString(UIStrings.copied));
     this.#copiedFiles[fileUrl] = true;
     this.requestUpdate();
     setTimeout(() => {

package/front_end/panels/console/ConsoleInsightTeaser.ts

@@ -25,7 +25,11 @@ const UIStringsNotTranslate = {
   /**
    * @description Link text in the disclaimer dialog, linking to a settings page containing more information
    */
-  learnMore: 'Learn more about AI summaries',
+  learnMore: 'Learn more',
+  /**
+   * @description Link text in the Console Insights Teaser info tooltip, linking to an explainer on how data is being used in this feature
+   */
+  learnMoreAboutAiSummaries: 'Learn more about AI summaries',
   /**
    * @description Description of the console insights feature
    */
@@ -69,6 +73,10 @@ const UIStringsNotTranslate = {
    * @description Label for a checkbox which turns off the teaser explanation feature
    */
   dontShow: 'Don’t show',
+  /**
+   * @description Aria-label for an infor-button triggering a tooltip with more info about data usage
+   */
+  learnDataUsage: 'Learn more about how your data is used',
 } as const;
 
 const lockedString = i18n.i18n.lockedString;
@@ -108,7 +116,7 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: undefined, target: HTMLE
     >
       <div class="teaser-tooltip-container">
         ${showPlaceholder ? html`
-          <h2 tabindex="-1">${lockedString(UIStringsNotTranslate.summarizing)}</h2>
+          <h2>${lockedString(UIStringsNotTranslate.summarizing)}</h2>
           <div
             role="presentation"
             aria-label=${lockedString(UIStringsNotTranslate.loading)}
@@ -126,7 +134,7 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: undefined, target: HTMLE
             </svg>
           </div>
         ` : html`
-          <h2 tabindex="-1">${input.headerText}</h2>
+          <h2>${input.headerText}</h2>
           <div>${input.mainText}</div>
           <div class="tooltip-footer">
             ${input.hasTellMeMoreButton ? html`
@@ -140,23 +148,25 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: undefined, target: HTMLE
                 ${lockedString(UIStringsNotTranslate.tellMeMore)}
               </devtools-button>
             ` : Lit.nothing}
-            <devtools-icon
-              name="info"
-              class="info-icon"
+            <devtools-button
+              .iconName=${'info'}
+              .variant=${Buttons.Button.Variant.ICON}
               aria-details=${'teaser-info-tooltip-' + input.uuid}
-            ></devtools-icon>
+              aria-label=${lockedString(UIStringsNotTranslate.learnDataUsage)}
+            ></devtools-button>
             <devtools-tooltip id=${'teaser-info-tooltip-' + input.uuid} variant="rich">
               <div class="info-tooltip-text">${lockedString(UIStringsNotTranslate.infoTooltipText)}</div>
               <div class="learn-more">
                 <x-link
                   class="devtools-link"
-                  title=${lockedString(UIStringsNotTranslate.learnMore)}
+                  title=${lockedString(UIStringsNotTranslate.learnMoreAboutAiSummaries)}
                   href=${DATA_USAGE_URL}
                   jslog=${VisualLogging.link().track({click: true, keydown:'Enter|Space'}).context('explain.teaser.learn-more')}
-                >${lockedString(UIStringsNotTranslate.learnMore)}</x-link>
+                >${lockedString(UIStringsNotTranslate.learnMoreAboutAiSummaries)}</x-link>
               </div>
             </devtools-tooltip>
             <devtools-checkbox
+              aria-label=${lockedString(UIStringsNotTranslate.dontShow)}
               @change=${input.dontShowChanged}
               jslog=${VisualLogging.toggle('explain.teaser.dont-show').track({ change: true })}>
               ${lockedString(UIStringsNotTranslate.dontShow)}

package/front_end/panels/console/ConsolePrompt.ts

@@ -170,8 +170,7 @@ export class ConsolePrompt extends Common.ObjectWrapper.eventMixin<EventTypes, t
           Common.Settings.Settings.instance().createSetting('ai-code-completion-teaser-dismissed', false);
       if (!this.aiCodeCompletionSetting.get() && !aiCodeCompletionTeaserDismissedSetting.get()) {
         this.teaser = new PanelCommon.AiCodeCompletionTeaser({onDetach: this.detachAiCodeCompletionTeaser.bind(this)});
-        extensions.push(this.placeholderCompartment.of(
-            TextEditor.AiCodeCompletionTeaserPlaceholder.aiCodeCompletionTeaserPlaceholder(this.teaser)));
+        extensions.push(this.placeholderCompartment.of([]));
       }
       extensions.push(TextEditor.Config.aiAutoCompleteSuggestion);
     }
@@ -397,7 +396,7 @@ export class ConsolePrompt extends Common.ObjectWrapper.eventMixin<EventTypes, t
           if (accepted) {
             this.dispatchEventToListeners(
                 Events.AI_CODE_COMPLETION_SUGGESTION_ACCEPTED, {citations: this.aiCodeCompletionCitations});
-            if (suggestion?.rpcGlobalId && suggestion?.sampleId) {
+            if (suggestion?.rpcGlobalId) {
               this.aiCodeCompletion?.registerUserAcceptance(suggestion.rpcGlobalId, suggestion.sampleId);
             }
           }
@@ -580,9 +579,18 @@ export class ConsolePrompt extends Common.ObjectWrapper.eventMixin<EventTypes, t
       this.aidaAvailability = currentAidaAvailability;
       if (this.aidaAvailability === Host.AidaClient.AidaAccessPreconditions.AVAILABLE) {
         this.onAiCodeCompletionSettingChanged();
+        if (this.teaser) {
+          this.editor.dispatch({
+            effects: this.placeholderCompartment.reconfigure(
+                [TextEditor.AiCodeCompletionTeaserPlaceholder.aiCodeCompletionTeaserPlaceholder(this.teaser)])
+          });
+        }
       } else if (this.aiCodeCompletion) {
         this.aiCodeCompletion.remove();
         this.aiCodeCompletion = undefined;
+        if (this.teaser) {
+          this.detachAiCodeCompletionTeaser();
+        }
       }
     }
   }