chrome-devtools-frontend 1.0.1558690 → 1.0.1559913

package/front_end/panels/timeline/TimelinePanel.ts

@@ -232,6 +232,18 @@ const UIStrings = {
    * @description Text in Timeline Panel of the Performance panel
    */
   initializingTracing: 'Initializing tracing…',
+  /**
+   * @description Text in Timeline Panel of the Performance panel. Shown to the user after they request to download the trace.
+   */
+  preparingTraceForDownload: 'Preparing…',
+  /**
+   * @description Text in Timeline Panel of the Performance panel. Shown to the user after they request to download the trace.
+   */
+  compressingTraceForDownload: 'Compressing…',
+  /**
+   * @description Text in Timeline Panel of the Performance panel. Shown to the user after they request to download the trace.
+   */
+  encodingTraceForDownload: 'Encoding…',
   /**
    * @description Tooltip description for a checkbox that toggles the visibility of data added by extensions of this panel (Performance).
    */
@@ -452,7 +464,6 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
       content: adornerContent,
     };
     this.#traceEngineModel = traceModel || this.#instantiateNewModel();
-    this.#listenForProcessingProgress();
 
     this.element.addEventListener('contextmenu', this.contextMenu.bind(this), false);
     this.dropTarget = new UI.DropTarget.DropTarget(
@@ -675,7 +686,7 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
   #setActiveInsight(insight: TimelineComponents.Sidebar.ActiveInsight|null, opts: {
     highlightInsight: boolean,
   } = {highlightInsight: false}): void {
-    if (insight) {
+    if (insight && this.#splitWidget.showMode() !== UI.SplitWidget.ShowMode.BOTH) {
       this.#splitWidget.showBoth();
     }
     this.#sideBar.setActiveInsight(insight, {highlight: opts.highlightInsight});
@@ -732,7 +743,25 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
     config.includeRuntimeCallStats = Root.Runtime.experiments.isEnabled('timeline-v8-runtime-call-stats');
     config.debugMode = Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.TIMELINE_DEBUG_MODE);
 
-    return Trace.TraceModel.Model.createWithAllHandlers(config);
+    const traceEngineModel = Trace.TraceModel.Model.createWithAllHandlers(config);
+
+    traceEngineModel.addEventListener(Trace.TraceModel.ModelUpdateEvent.eventName, e => {
+      const updateEvent = e as Trace.TraceModel.ModelUpdateEvent;
+      const str = i18nString(UIStrings.processed);
+
+      // Trace Engine will report progress from [0...1] but we still have more work to do. So, scale them down a bit.
+      const traceParseMaxProgress = 0.7;
+
+      if (updateEvent.data.type === Trace.TraceModel.ModelUpdateType.COMPLETE) {
+        this.statusDialog?.updateProgressBar(str, 100 * traceParseMaxProgress);
+      } else if (updateEvent.data.type === Trace.TraceModel.ModelUpdateType.PROGRESS_UPDATE) {
+        const data = updateEvent.data.data;
+        this.statusDialog?.updateProgressBar(str, data.percent * 100 * traceParseMaxProgress);
+      }
+    });
+
+    this.#traceEngineModel = traceEngineModel;
+    return this.#traceEngineModel;
   }
 
   static extensionDataVisibilitySetting(): Common.Settings.Setting<boolean> {
@@ -1455,6 +1484,9 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
       }
 
       this.#showExportTraceErrorDialog(error);
+    } finally {
+      this.statusDialog?.remove();
+      this.statusDialog = null;
     }
   }
 
@@ -1464,6 +1496,24 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
     addModifications: boolean,
     shouldCompress: boolean,
   }): Promise<void> {
+    this.statusDialog = new StatusDialog(
+        {
+          hideStopButton: true,
+          showProgress: true,
+        },
+        async () => {
+          this.statusDialog?.remove();
+          this.statusDialog = null;
+        });
+    this.statusDialog.showPane(this.statusPaneContainer, 'tinted');
+    this.statusDialog.updateStatus(i18nString(UIStrings.preparingTraceForDownload));
+    this.statusDialog.updateProgressBar(i18nString(UIStrings.preparingTraceForDownload), 0);
+    this.statusDialog.requestUpdate();
+    await this.statusDialog.updateComplete;
+    // Not sure why the above isn't sufficient.
+    await new Promise(resolve => requestAnimationFrame(resolve));
+    await new Promise(resolve => requestAnimationFrame(resolve));
+
     // Base the filename on the trace's time of recording
     const isoDate =
         Platform.DateUtilities.toISO8601Compact(metadata.startTime ? new Date(metadata.startTime) : new Date());
@@ -1499,8 +1549,16 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
     let blob = new Blob(blobParts, {type: 'application/json'});
 
     if (config.shouldCompress) {
+      this.statusDialog.updateStatus(i18nString(UIStrings.compressingTraceForDownload));
+      this.statusDialog.updateProgressBar(i18nString(UIStrings.compressingTraceForDownload), 0);
+
       fileName = `${fileName}.gz` as Platform.DevToolsPath.RawPathString;
-      const gzStream = Common.Gzip.compressStream(blob.stream());
+      const inputSize = blob.size;
+      const monitoredStream = Common.Gzip.createMonitoredStream(blob.stream(), bytesRead => {
+        this.statusDialog?.updateProgressBar(
+            i18nString(UIStrings.compressingTraceForDownload), bytesRead / inputSize * 100);
+      });
+      const gzStream = Common.Gzip.compressStream(monitoredStream);
       blob = await new Response(gzStream, {
                headers: {'Content-Type': 'application/gzip'},
              }).blob();
@@ -1515,9 +1573,12 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
     try {
       // The maximum string length in v8 is `2 ** 29 - 23`, aka 538 MB.
       // If the gzipped&base64-encoded trace is larger than that, this'll throw a RangeError.
+      this.statusDialog.updateStatus(i18nString(UIStrings.encodingTraceForDownload));
+      this.statusDialog.updateProgressBar(i18nString(UIStrings.encodingTraceForDownload), 100);
       bytesAsB64 = await Common.Base64.encode(blob);
     } catch {
     }
+
     if (bytesAsB64?.length) {
       const contentData = new TextUtils.ContentData.ContentData(bytesAsB64, /* isBase64=*/ true, blob.type);
       await Workspace.FileManager.FileManager.instance().save(fileName, contentData, /* forceSaveAs=*/ true);
@@ -1531,6 +1592,9 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
       a.click();
       URL.revokeObjectURL(url);
     }
+
+    this.statusDialog.remove();
+    this.statusDialog = null;
   }
 
   async handleSaveToFileAction(): Promise<void> {
@@ -1965,7 +2029,7 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
         {
           description: error,
           buttonText: i18nString(UIStrings.close),
-          hideStopButton: true,
+          hideStopButton: false,
           showProgress: undefined,
           showTimer: undefined,
         },
@@ -2055,7 +2119,7 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
 
   private onClearButton(): void {
     this.#historyManager.clear();
-    this.#traceEngineModel = this.#instantiateNewModel();
+    this.#instantiateNewModel();
     ModificationsManager.reset();
     this.#uninstallSourceMapsResolver();
     this.flameChart.getMainDataProvider().reset();
@@ -2467,23 +2531,6 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
     this.statusDialog?.updateStatus(i18nString(UIStrings.processingTrace));
   }
 
-  #listenForProcessingProgress(): void {
-    this.#traceEngineModel.addEventListener(Trace.TraceModel.ModelUpdateEvent.eventName, e => {
-      const updateEvent = e as Trace.TraceModel.ModelUpdateEvent;
-      const str = i18nString(UIStrings.processed);
-
-      // Trace Engine will report progress from [0...1] but we still have more work to do. So, scale them down a bit.
-      const traceParseMaxProgress = 0.7;
-
-      if (updateEvent.data.type === Trace.TraceModel.ModelUpdateType.COMPLETE) {
-        this.statusDialog?.updateProgressBar(str, 100 * traceParseMaxProgress);
-      } else if (updateEvent.data.type === Trace.TraceModel.ModelUpdateType.PROGRESS_UPDATE) {
-        const data = updateEvent.data.data;
-        this.statusDialog?.updateProgressBar(str, data.percent * 100 * traceParseMaxProgress);
-      }
-    });
-  }
-
   #onSourceMapsNodeNamesResolved(): void {
     // Source maps can change the way calls hierarchies should look in
     // the flame chart (f.e. if some calls are ignore listed after
@@ -3061,7 +3108,7 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
    * 3. Flash the Insight with the highlight colour we use in other panels.
    */
   revealInsight(insightModel: Trace.Insights.Types.InsightModel): void {
-    const insightSetKey = insightModel.navigationId ?? Trace.Types.Events.NO_NAVIGATION;
+    const insightSetKey = insightModel.navigation?.args.data?.navigationId ?? Trace.Types.Events.NO_NAVIGATION;
     this.#setActiveInsight({model: insightModel, insightSetKey}, {highlightInsight: true});
   }
 

package/front_end/panels/timeline/TimelineUIUtils.ts

@@ -824,6 +824,10 @@ export class TimelineUIUtils {
         link = 'https://web.dev/lcp/';
         name = 'largest contentful paint';
         break;
+      case Trace.Types.Events.Name.MARK_LCP_CANDIDATE_FOR_SOFT_NAVIGATION:
+        link = 'https://developer.chrome.com/docs/web-platform/soft-navigations-experiment';
+        name = 'largest contentful paint (soft navigation)';
+        break;
       case Trace.Types.Events.Name.MARK_FCP:
         link = 'https://web.dev/first-contentful-paint/';
         name = 'first contentful paint';
@@ -1001,6 +1005,20 @@ export class TimelineUIUtils {
       return contentHelper.fragment;
     }
 
+    if (Trace.Types.Events.isNavigationStart(event)) {
+      url = (event.args.data?.documentLoaderURL ?? event.args.data?.url) as Platform.DevToolsPath.UrlString;
+      if (url) {
+        contentHelper.appendElementRow(i18nString(UIStrings.url), LegacyComponents.Linkifier.Linkifier.linkifyURL(url));
+      }
+    }
+
+    if (Trace.Types.Events.isSoftNavigationStart(event)) {
+      url = event.args.context.URL as Platform.DevToolsPath.UrlString;
+      if (url) {
+        contentHelper.appendElementRow(i18nString(UIStrings.url), LegacyComponents.Linkifier.Linkifier.linkifyURL(url));
+      }
+    }
+
     if (Trace.Types.Events.isV8Compile(event)) {
       url = event.args.data?.url as Platform.DevToolsPath.UrlString;
       if (url) {
@@ -1428,6 +1446,7 @@ export class TimelineUIUtils {
         break;
       }
 
+      case Trace.Types.Events.Name.MARK_LCP_CANDIDATE_FOR_SOFT_NAVIGATION:
       // @ts-expect-error Fall-through intended.
       case Trace.Types.Events.Name.MARK_LCP_CANDIDATE: {
         contentHelper.appendTextRow(i18nString(UIStrings.type), String(unsafeEventData['type']));
@@ -2244,6 +2263,10 @@ export class TimelineUIUtils {
         color = 'var(--color-text-primary)';
         tall = true;
         break;
+      case Trace.Types.Events.Name.SOFT_NAVIGATION_START:
+        color = 'var(--sys-color-blue)';
+        tall = true;
+        break;
       case Trace.Types.Events.Name.FRAME_STARTED_LOADING:
         color = 'green';
         tall = true;
@@ -2264,6 +2287,7 @@ export class TimelineUIUtils {
         color = 'var(--sys-color-green-bright)';
         tall = true;
         break;
+      case Trace.Types.Events.Name.MARK_LCP_CANDIDATE_FOR_SOFT_NAVIGATION:
       case Trace.Types.Events.Name.MARK_LCP_CANDIDATE:
         color = 'var(--sys-color-green)';
         tall = true;
@@ -2509,6 +2533,7 @@ export function timeStampForEventAdjustedForClosestNavigationIfPossible(
       event,
       parsedTrace.data.Meta.traceBounds,
       parsedTrace.data.Meta.navigationsByNavigationId,
+      parsedTrace.data.Meta.softNavigationsById,
       parsedTrace.data.Meta.navigationsByFrameId,
   );
   return Trace.Helpers.Timing.microToMilli(time);
@@ -2523,7 +2548,8 @@ export function timeStampForEventAdjustedForClosestNavigationIfPossible(
 export function isMarkerEvent(parsedTrace: Trace.TraceModel.ParsedTrace, event: Trace.Types.Events.Event): boolean {
   const {Name} = Trace.Types.Events;
 
-  if (event.name === Name.TIME_STAMP || event.name === Name.NAVIGATION_START) {
+  if (event.name === Name.TIME_STAMP || event.name === Name.NAVIGATION_START ||
+      event.name === Name.SOFT_NAVIGATION_START) {
     return true;
   }
 
@@ -2532,7 +2558,7 @@ export function isMarkerEvent(parsedTrace: Trace.TraceModel.ParsedTrace, event:
   }
 
   if (Trace.Types.Events.isMarkDOMContent(event) || Trace.Types.Events.isMarkLoad(event) ||
-      Trace.Types.Events.isLargestContentfulPaintCandidate(event)) {
+      Trace.Types.Events.isAnyLargestContentfulPaintCandidate(event)) {
     // isOutermostMainFrame was added in 2022, so we fallback to isMainFrame
     // for older traces.
     if (!event.args.data) {

package/front_end/panels/timeline/TimingsTrackAppender.ts

@@ -42,6 +42,7 @@ export const SORT_ORDER_PAGE_LOAD_MARKERS: Readonly<Record<string, number>> = {
   [Trace.Types.Events.Name.MARK_FIRST_PAINT]: 2,
   [Trace.Types.Events.Name.MARK_DOM_CONTENT]: 3,
   [Trace.Types.Events.Name.MARK_LCP_CANDIDATE]: 4,
+  [Trace.Types.Events.Name.MARK_LCP_CANDIDATE_FOR_SOFT_NAVIGATION]: 5,
 };
 
 export class TimingsTrackAppender implements TrackAppender {
@@ -182,7 +183,7 @@ export class TimingsTrackAppender implements TrackAppender {
       color = '#1A6937';
       title = Trace.Handlers.ModelHandlers.PageLoadMetrics.MetricName.FCP;
     }
-    if (Trace.Types.Events.isLargestContentfulPaintCandidate(markerEvent)) {
+    if (Trace.Types.Events.isAnyLargestContentfulPaintCandidate(markerEvent)) {
       color = '#1A3422';
       title = Trace.Handlers.ModelHandlers.PageLoadMetrics.MetricName.LCP;
     }
@@ -282,6 +283,7 @@ export class TimingsTrackAppender implements TrackAppender {
           event,
           this.#parsedTrace.data.Meta.traceBounds,
           this.#parsedTrace.data.Meta.navigationsByNavigationId,
+          this.#parsedTrace.data.Meta.softNavigationsById,
           this.#parsedTrace.data.Meta.navigationsByFrameId,
       );
       info.formattedTime = getDurationString(timeOfEvent);

package/front_end/panels/timeline/components/SidebarSingleInsightSet.ts

@@ -84,7 +84,7 @@ interface InsightData {
 }
 
 interface LocalMetrics {
-  lcp: {value: Trace.Types.Timing.Micro, event: Trace.Types.Events.LargestContentfulPaintCandidate}|null;
+  lcp: {value: Trace.Types.Timing.Micro, event: Trace.Types.Events.AnyLargestContentfulPaintCandidate}|null;
   cls: {value: number, worstClusterEvent: Trace.Types.Events.Event|null};
   inp: {value: Trace.Types.Timing.Micro, event: Trace.Types.Events.SyntheticInteractionPair}|null;
 }

package/front_end/panels/timeline/components/insights/RenderBlocking.ts

@@ -5,15 +5,17 @@
 import * as i18n from '../../../../core/i18n/i18n.js';
 import type {RenderBlockingInsightModel} from '../../../../models/trace/insights/RenderBlocking.js';
 import * as Trace from '../../../../models/trace/trace.js';
+import * as UI from '../../../../ui/legacy/legacy.js';
 import * as Lit from '../../../../ui/lit/lit.js';
 
 import {BaseInsightComponent} from './BaseInsightComponent.js';
 import {eventRef} from './EventRef.js';
-import {createLimitedRows, renderOthersLabel, type TableDataRow} from './Table.js';
+import {createLimitedRows, renderOthersLabel, Table, type TableDataRow} from './Table.js';
 
 const {UIStrings, i18nString, createOverlayForRequest} = Trace.Insights.Models.RenderBlocking;
 
 const {html} = Lit;
+const {widgetConfig} = UI.Widget;
 
 export class RenderBlocking extends BaseInsightComponent<RenderBlockingInsightModel> {
   override internalName = 'render-blocking-requests';
@@ -58,12 +60,12 @@ export class RenderBlocking extends BaseInsightComponent<RenderBlockingInsightMo
     // clang-format off
     return html`
       <div class="insight-section">
-        <devtools-widget
-          .data=${{
+        <devtools-widget .widgetConfig=${widgetConfig(Table, {
+           data: {
             insight: this,
             headers: [i18nString(UIStrings.renderBlockingRequest), i18nString(UIStrings.duration)],
             rows,
-          }}>
+          }})}>
         </devtools-widget>
       </div>
     `;

package/front_end/panels/timeline/overlays/OverlaysImpl.ts

@@ -1616,6 +1616,10 @@ export class Overlays extends EventTarget {
   #mouseMoveOverlay(
       e: MouseEvent, event: Trace.Types.Events.PageLoadEvent, name: string, overlay: Trace.Types.Overlays.TimingsMarker,
       markers: HTMLElement, marker: HTMLElement): void {
+    if (Trace.Types.Events.isSoftNavigationStart(event)) {
+      name = 'Soft Nav';
+    }
+
     const fieldResult = overlay.entryToFieldResult.get(event);
     const popoverElement = this.#createOverlayPopover(overlay.adjustedTimestamp, name, fieldResult);
     this.#lastMouseOffsetX = e.offsetX + (markers.offsetLeft || 0) + (marker.offsetLeft || 0);

package/front_end/panels/timeline/timelinePanel.css

@@ -90,11 +90,18 @@
   pointer-events: none;
 }
 
-.timeline.panel .status-pane-container.tinted {
+.timeline.panel .status-pane-container.opaque {
   background-color: var(--sys-color-cdt-base-container);
   pointer-events: auto;
 }
 
+.timeline.panel .status-pane-container.tinted {
+  /* stylelint-disable-next-line plugin/use_theme_colors */
+  background-color: #0005;
+  background-blend-mode: multiply;
+  pointer-events: auto;
+}
+
 .timeline-landing-page.legacy > div > p {
   flex: none;
   white-space: pre-line;

package/front_end/panels/timeline/utils/EntryNodes.ts

@@ -29,7 +29,8 @@ export function nodeIdsForEvent(
   } else if (Trace.Types.Events.isSyntheticLayoutShift(event) && event.args.data?.impacted_nodes) {
     event.args.data.impacted_nodes.forEach(node => foundIds.add(node.node_id));
   } else if (
-      Trace.Types.Events.isLargestContentfulPaintCandidate(event) && typeof event.args.data?.nodeId !== 'undefined') {
+      Trace.Types.Events.isAnyLargestContentfulPaintCandidate(event) &&
+      typeof event.args.data?.nodeId !== 'undefined') {
     foundIds.add(event.args.data.nodeId);
   } else if (Trace.Types.Events.isPaint(event) && typeof event.args.data.nodeId !== 'undefined') {
     foundIds.add(event.args.data.nodeId);

package/front_end/third_party/chromium/README.chromium

@@ -1,7 +1,7 @@
 Name: Dependencies sourced from the upstream `chromium` repository
 URL: https://chromium.googlesource.com/chromium/src
 Version: N/A
-Revision: 62c1a660407ec8f7589a271587ffee39bc215751
+Revision: cb5e3196dab34d7c2e8e58809202c6858ad441dd
 Update Mechanism: Manual (https://crbug.com/428069060)
 License: BSD-3-Clause
 License File: LICENSE

package/front_end/ui/components/text_editor/AiCodeGenerationProvider.ts

@@ -49,7 +49,7 @@ export class AiCodeGenerationProvider {
   #devtoolsLocale: string;
   #aiCodeCompletionSetting = Common.Settings.Settings.instance().createSetting('ai-code-completion-enabled', false);
   #generationTeaserCompartment = new CodeMirror.Compartment();
-  #generationTeaser: PanelCommon.AiCodeGenerationTeaser;
+  #generationTeaser: PanelCommon.AiCodeGenerationTeaser.AiCodeGenerationTeaser;
   #editor?: TextEditor;
   #aiCodeGenerationConfig: AiCodeGenerationConfig;
   #aiCodeGeneration?: AiCodeGeneration.AiCodeGeneration.AiCodeGeneration;
@@ -63,7 +63,7 @@ export class AiCodeGenerationProvider {
     if (!AiCodeGeneration.AiCodeGeneration.AiCodeGeneration.isAiCodeGenerationEnabled(this.#devtoolsLocale)) {
       throw new Error('AI code generation feature is not enabled.');
     }
-    this.#generationTeaser = new PanelCommon.AiCodeGenerationTeaser();
+    this.#generationTeaser = new PanelCommon.AiCodeGenerationTeaser.AiCodeGenerationTeaser();
     this.#aiCodeGenerationConfig = aiCodeGenerationConfig;
   }
 
@@ -73,7 +73,8 @@ export class AiCodeGenerationProvider {
 
   extension(): CodeMirror.Extension[] {
     return [
-      CodeMirror.EditorView.updateListener.of(update => this.activateTeaser(update)),
+      CodeMirror.EditorView.updateListener.of(update => this.#activateTeaser(update)),
+      CodeMirror.EditorView.updateListener.of(update => this.#abortGenerationDuringUpdate(update)),
       aiAutoCompleteSuggestion,
       aiAutoCompleteSuggestionState,
       aiCodeGenerationTeaserModeState,
@@ -141,7 +142,9 @@ export class AiCodeGenerationProvider {
             });
             return true;
           }
-          if (this.#generationTeaser.isShowing() && this.#generationTeaser.loading) {
+          const generationTeaserIsLoading = this.#generationTeaser.displayState ===
+              PanelCommon.AiCodeGenerationTeaser.AiCodeGenerationTeaserDisplayState.LOADING;
+          if (this.#generationTeaser.isShowing() && generationTeaserIsLoading) {
             this.#controller.abort();
             this.#controller = new AbortController();
             this.#dismissTeaser();
@@ -187,11 +190,11 @@ export class AiCodeGenerationProvider {
   }
 
   #dismissTeaser(): void {
-    this.#generationTeaser.loading = false;
+    this.#generationTeaser.displayState = PanelCommon.AiCodeGenerationTeaser.AiCodeGenerationTeaserDisplayState.TRIGGER;
     this.#editor?.dispatch({effects: setAiCodeGenerationTeaserMode.of(AiCodeGenerationTeaserMode.DISMISSED)});
   }
 
-  async activateTeaser(update: CodeMirror.ViewUpdate): Promise<void> {
+  #activateTeaser(update: CodeMirror.ViewUpdate): void {
     const currentTeaserMode = update.state.field(aiCodeGenerationTeaserModeState);
     if (currentTeaserMode === AiCodeGenerationTeaserMode.ACTIVE) {
       return;
@@ -202,12 +205,35 @@ export class AiCodeGenerationProvider {
     update.view.dispatch({effects: setAiCodeGenerationTeaserMode.of(AiCodeGenerationTeaserMode.ACTIVE)});
   }
 
+  /**
+   * Monitors editor changes to cancel an ongoing AI generation.
+   * We abort the request and dismiss the teaser if the user modifies the
+   * document or moves their cursor/selection. These actions indicate the user
+   * is no longer focused on the current generation point or has manually
+   * resumed editing, making the pending suggestion irrelevant.
+   */
+  #abortGenerationDuringUpdate(update: CodeMirror.ViewUpdate): void {
+    if (!update.docChanged && update.state.selection.main.head === update.startState.selection.main.head) {
+      return;
+    }
+    const currentTeaserMode = update.state.field(aiCodeGenerationTeaserModeState);
+    const generationTeaserIsLoading = this.#generationTeaser.displayState ===
+        PanelCommon.AiCodeGenerationTeaser.AiCodeGenerationTeaserDisplayState.LOADING;
+    // Generation should be in progress
+    if (currentTeaserMode === AiCodeGenerationTeaserMode.DISMISSED || !generationTeaserIsLoading) {
+      return;
+    }
+    this.#controller.abort();
+    this.#controller = new AbortController();
+    this.#dismissTeaser();
+  }
+
   async #triggerAiCodeGeneration(options?: {signal?: AbortSignal}): Promise<void> {
     if (!this.#editor || !this.#aiCodeGeneration) {
       return;
     }
 
-    this.#generationTeaser.loading = true;
+    this.#generationTeaser.displayState = PanelCommon.AiCodeGenerationTeaser.AiCodeGenerationTeaserDisplayState.LOADING;
     const cursor = this.#editor.state.selection.main.head;
     // TODO(b/445899453): Detect all types of comments
     const query = this.#editor.state.doc.lineAt(cursor).text;
@@ -265,44 +291,60 @@ export class AiCodeGenerationProvider {
   }
 }
 
-// TODO(b/445899453): Handle teaser's discovery mode
-function aiCodeGenerationTeaserExtension(teaser: PanelCommon.AiCodeGenerationTeaser): CodeMirror.Extension {
+function aiCodeGenerationTeaserExtension(teaser: PanelCommon.AiCodeGenerationTeaser.AiCodeGenerationTeaser):
+    CodeMirror.Extension {
   return CodeMirror.ViewPlugin.fromClass(class {
-    #teaserMode: AiCodeGenerationTeaserMode;
+    #view: CodeMirror.EditorView;
 
-    constructor(readonly view: CodeMirror.EditorView) {
-      this.#teaserMode = view.state.field(aiCodeGenerationTeaserModeState);
+    constructor(view: CodeMirror.EditorView) {
+      this.#view = view;
+      this.#updateTeaserState(view.state);
     }
 
     update(update: CodeMirror.ViewUpdate): void {
-      const currentTeaserMode = update.state.field(aiCodeGenerationTeaserModeState);
-      if (currentTeaserMode !== this.#teaserMode) {
-        this.#teaserMode = currentTeaserMode;
-      }
       if (!update.docChanged && update.state.selection.main.head === update.startState.selection.main.head) {
         return;
       }
-      if (teaser.loading) {
-        teaser.loading = false;
-      }
+      this.#updateTeaserState(update.state);
     }
 
     get decorations(): CodeMirror.DecorationSet {
-      if (this.#teaserMode === AiCodeGenerationTeaserMode.DISMISSED) {
+      const teaserMode = this.#view.state.field(aiCodeGenerationTeaserModeState);
+      if (teaserMode === AiCodeGenerationTeaserMode.DISMISSED) {
         return CodeMirror.Decoration.none;
       }
-      const cursorPosition = this.view.state.selection.main.head;
-      const line = this.view.state.doc.lineAt(cursorPosition);
+
+      const cursorPosition = this.#view.state.selection.main.head;
+      const line = this.#view.state.doc.lineAt(cursorPosition);
+
+      const isEmptyLine = line.length === 0;
       // TODO(b/445899453): Detect all types of comments
       const isComment = line.text.startsWith('//');
       const isCursorAtEndOfLine = cursorPosition >= line.to;
-      if (!isComment || !isCursorAtEndOfLine) {
-        return CodeMirror.Decoration.none;
+
+      if ((isEmptyLine) || (isComment && isCursorAtEndOfLine)) {
+        return CodeMirror.Decoration.set([
+          CodeMirror.Decoration.widget({widget: new AiCodeCompletionTeaserPlaceholder(teaser), side: 1})
+              .range(cursorPosition),
+        ]);
+      }
+      return CodeMirror.Decoration.none;
+    }
+
+    #updateTeaserState(state: CodeMirror.EditorState): void {
+      // Only handle non loading states, as updates during generation are handled by
+      // #abortGenerationDuringUpdate in AiCodeGenerationProvider
+      if (teaser.displayState === PanelCommon.AiCodeGenerationTeaser.AiCodeGenerationTeaserDisplayState.LOADING) {
+        return;
+      }
+      const cursorPosition = state.selection.main.head;
+      const line = state.doc.lineAt(cursorPosition);
+      const isEmptyLine = line.length === 0;
+      if (isEmptyLine) {
+        teaser.displayState = PanelCommon.AiCodeGenerationTeaser.AiCodeGenerationTeaserDisplayState.DISCOVERY;
+      } else {
+        teaser.displayState = PanelCommon.AiCodeGenerationTeaser.AiCodeGenerationTeaserDisplayState.TRIGGER;
       }
-      return CodeMirror.Decoration.set([
-        CodeMirror.Decoration.widget({widget: new AiCodeCompletionTeaserPlaceholder(teaser), side: 1})
-            .range(cursorPosition),
-      ]);
     }
   }, {
     decorations: v => v.decorations,

package/front_end/ui/legacy/SearchableView.ts

@@ -150,6 +150,7 @@ export class SearchableView extends VBox {
   private replaceToggleButton: ToolbarToggle;
   private searchInputElement: HTMLInputElement;
   private matchesElement: HTMLElement;
+  private matchesElementValue: HTMLElement;
   private searchNavigationPrevElement: ToolbarButton;
   private searchNavigationNextElement: ToolbarButton;
   private readonly replaceInputElement: HTMLInputElement;
@@ -314,6 +315,9 @@ export class SearchableView extends VBox {
     this.matchesElement.style.color = 'var(--sys-color-on-surface-subtle)';
     this.matchesElement.style.padding = '0 var(--sys-size-3)';
     this.matchesElement.classList.add('search-results-matches');
+    ARIAUtils.markAsPoliteLiveRegion(this.matchesElement, false);
+    this.matchesElementValue = this.matchesElement.createChild('span');
+    ARIAUtils.setHidden(this.matchesElementValue, true);
     toolbar.appendToolbarItem(matchesText);
 
     const cancelButtonElement = new Buttons.Button.Button();
@@ -455,7 +459,7 @@ export class SearchableView extends VBox {
   resetSearch(): void {
     this.clearSearch();
     this.updateReplaceVisibility();
-    this.matchesElement.textContent = '';
+    this.matchesElementValue.textContent = '';
   }
 
   refreshSearch(): void {
@@ -504,15 +508,17 @@ export class SearchableView extends VBox {
 
   private updateSearchMatchesCountAndCurrentMatchIndex(matches: number, currentMatchIndex: number): void {
     if (!this.currentQuery) {
-      this.matchesElement.textContent = '';
+      this.matchesElementValue.textContent = '';
     } else if (matches === 0 || currentMatchIndex >= 0) {
-      this.matchesElement.textContent = i18nString(UIStrings.dOfD, {PH1: currentMatchIndex + 1, PH2: matches});
+      this.matchesElementValue.textContent = i18nString(UIStrings.dOfD, {PH1: currentMatchIndex + 1, PH2: matches});
       ARIAUtils.setLabel(
           this.matchesElement, i18nString(UIStrings.accessibledOfD, {PH1: currentMatchIndex + 1, PH2: matches}));
     } else if (matches === 1) {
-      this.matchesElement.textContent = i18nString(UIStrings.matchString);
+      this.matchesElementValue.textContent = i18nString(UIStrings.matchString);
+      ARIAUtils.setLabel(this.matchesElement, i18nString(UIStrings.matchString));
     } else {
-      this.matchesElement.textContent = i18nString(UIStrings.dMatches, {PH1: matches});
+      this.matchesElementValue.textContent = i18nString(UIStrings.dMatches, {PH1: matches});
+      ARIAUtils.setLabel(this.matchesElement, i18nString(UIStrings.dMatches, {PH1: matches}));
     }
     this.updateSearchNavigationButtonState(matches > 0);
   }

package/front_end/ui/legacy/SplitWidget.ts

@@ -236,7 +236,7 @@ export class SplitWidget extends Common.ObjectWrapper.eventMixin<EventTypes, typ
     this.#restoreAndApplyShowModeFromSettings();
   }
 
-  showMode(): string {
+  showMode(): ShowMode {
     return this.#showMode;
   }