chrome-devtools-frontend 1.0.1721762 → 1.0.1726686

package/front_end/models/ai_assistance/tools/ListNetworkRequests.ts

@@ -114,13 +114,8 @@ export class ListNetworkRequestsTool implements
         };
       }
       return {
-        result: JSON.stringify([]),
-        widgets: [{
-          name: 'NETWORK_REQUESTS_LIST',
-          data: {
-            requests: [],
-          },
-        }],
+        error:
+            'No network requests have been recorded. DevTools only records requests made while DevTools is open and network recording is enabled (and the log has not been cleared). Ask the user to ensure network recording is enabled, reload the page or repeat the action that triggers the request, and try again.',
       };
     }
 

package/front_end/models/ai_assistance/tools/RunLighthouse.ts

@@ -45,9 +45,9 @@ export class RunLighthouseTool implements
       },
       categoryId: {
         type: Host.AidaClient.ParametersTypes.STRING,
-        // The experimental 'agentic-browsing' category is intentionally omitted from the prompt description so the agent does not invoke it unprompted. It is also excluded when 'all' is provided.
+        // The experimental 'agentic-browsing' category is listed separately from the standard categories and restricted to explicit user requests so the agent does not invoke it unprompted. It is also excluded when 'all' is provided (see `LighthouseController.getCategoryIDs`).
         description:
-            'Lighthouse category. Use "all" to run all categories, or specify a category: "accessibility", "performance", "best-practices", "seo".',
+            'Lighthouse category. Use "all" to run all categories, or specify a category: "accessibility", "performance", "best-practices", "seo". Use "agentic-browsing" only when the user explicitly asks for an agentic browsing audit (how well AI agents can navigate and use the page, including WebMCP). "all" does not include "agentic-browsing". Run "agentic-browsing" in "navigation" mode, because its WebMCP audits only run in "navigation" mode.',
         nullable: false,
       },
       mode: {

package/front_end/models/comment_manager/CD4ABridge.ts

@@ -113,6 +113,10 @@ export class CD4ABridge extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
       details.push(`- Editor: ${editorInfo}`);
     }
 
+    for (const line of thread.anchor.agentContext ?? []) {
+      details.push(`- ${line}`);
+    }
+
     if (details.length === 0) {
       return rawText;
     }

package/front_end/models/comment_manager/CommentManager.ts

@@ -48,11 +48,6 @@ export class CommentManager extends Common.ObjectWrapper.ObjectWrapper<EventType
   #commentMode = false;
   #agentAttached = false;
 
-  constructor() {
-    super();
-    CommentThread.resetIndex();
-  }
-
   #onThreadChanged(): void {
     this.dispatchEventToListeners(Events.COMMENT_THREADS_CHANGED, this.getCommentThreads());
   }
@@ -174,7 +169,6 @@ export class CommentManager extends Common.ObjectWrapper.ObjectWrapper<EventType
       thread.removeEventListener(CommentThreadEvents.CHANGED, this.#onThreadChanged, this);
     }
     this.#commentThreads.clear();
-    CommentThread.resetIndex();
     this.dispatchEventToListeners(Events.COMMENT_THREADS_CHANGED, []);
   }
 }

package/front_end/models/comment_manager/CommentThread.ts

@@ -22,7 +22,10 @@ export interface DOMNodeAnchorSignature {
 export interface TimelineAnchorSignature {
   /** Identifier of the trace to scope comments to a specific recording */
   traceId: string;
-  /** Serializable key from Trace.EventsSerializer (e.g. 'r-123', 'p-1-2-3-4', 's-5') */
+  /**
+   * Serializable key from Trace.EventsSerializer (e.g. 'r-123', 'p-1-2-3-4', 's-5'), or
+   * 'fc-<chartLocation>-<entryIndex>' for flame chart entries that EventsSerializer cannot key.
+   */
   traceEventKey: string;
   /** Primary event title or category name */
   entryName: string;
@@ -51,6 +54,22 @@ export interface CommentAnchorSignature {
   editor?: EditorAnchorSignature;
   /** Optional timeline flamechart anchor coordinates for Performance panel trace entries */
   timeline?: TimelineAnchorSignature;
+  /**
+   * Optional formatted lines that give the AI agent context about the
+   * anchored target beyond the VE path and text signature, for example the
+   * timing and warnings of a Performance panel trace entry. CD4ABridge
+   * appends each line to the comment text that it sends to the agent.
+   *
+   * These lines are only context for the agent. They are not used to
+   * re-match the anchor to its target; the other fields of this signature
+   * do that.
+   *
+   * Currently only the Performance panel sets this field. Before adding
+   * context here, consider whether it belongs in a new field on this
+   * signature instead. This field is only for text that is already
+   * formatted for the agent, not for data that other code needs to read.
+   */
+  agentContext?: string[];
 }
 
 export interface Comment {
@@ -77,17 +96,11 @@ export interface CommentThreadOptions {
 }
 
 export class CommentThread extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
-  static #nextIndex = 1;
-
-  static resetIndex(): void {
-    CommentThread.#nextIndex = 1;
-  }
-
   readonly id: string = crypto.randomUUID();
   readonly anchor: CommentAnchorSignature;
   /** True for comments generated from the change tracker. */
   readonly isGeneratedComment: boolean;
-  #savedIndex?: number;
+  #isOrphaned = false;
   comments: Comment[];
   status: CommentThreadStatus = 'DRAFT';
   transmitted: boolean = false;
@@ -99,8 +112,16 @@ export class CommentThread extends Common.ObjectWrapper.ObjectWrapper<EventTypes
     this.isGeneratedComment = Boolean(options.isGeneratedComment);
   }
 
-  get index(): number {
-    return this.#savedIndex ?? CommentThread.#nextIndex;
+  get isOrphaned(): boolean {
+    return this.#isOrphaned;
+  }
+
+  setOrphaned(isOrphaned: boolean): void {
+    if (this.#isOrphaned === isOrphaned) {
+      return;
+    }
+    this.#isOrphaned = isOrphaned;
+    this.dispatchEventToListeners(Events.CHANGED);
   }
 
   /**
@@ -137,9 +158,6 @@ export class CommentThread extends Common.ObjectWrapper.ObjectWrapper<EventTypes
     let changed = this.#saveText(text, author);
     if (this.status === 'DRAFT') {
       this.#recordCommentCreated();
-      if (this.#savedIndex === undefined) {
-        this.#savedIndex = CommentThread.#nextIndex++;
-      }
       this.status = 'ACTIVE';
       changed = true;
     }
@@ -167,9 +185,6 @@ export class CommentThread extends Common.ObjectWrapper.ObjectWrapper<EventTypes
       this.#recordCommentCreated();
     }
     if (this.status === 'DRAFT' || this.status === 'ACTIVE') {
-      if (this.#savedIndex === undefined) {
-        this.#savedIndex = CommentThread.#nextIndex++;
-      }
       this.status = 'SENT_TO_AGENT';
       changed = true;
     }
@@ -186,10 +201,15 @@ export class CommentThread extends Common.ObjectWrapper.ObjectWrapper<EventTypes
         timestamp: Date.now(),
       });
     }
-    if (this.#savedIndex === undefined) {
-      this.#savedIndex = CommentThread.#nextIndex++;
-    }
     this.status = 'RESOLVED';
     this.dispatchEventToListeners(Events.CHANGED);
   }
 }
+
+export class RevealableThread {
+  constructor(
+      readonly thread: CommentThread,
+      readonly position?: {left: number, top: number},
+  ) {
+  }
+}

package/front_end/models/elements/StyleChanges.ts

@@ -95,3 +95,69 @@ export function trackStylePropertyToggle(
   }
   tracker.trackChange(describeStylePropertyToggle(toggle), buildAnchor(STYLES_PANE_VE_PATH, node));
 }
+
+export function trackStyleRuleAdded(
+    tracker: ChangeTracker.ChangeTracker.ChangeTracker|undefined,
+    node: SDK.DOMModel.DOMNode,
+    selector: string,
+    ): void {
+  if (!tracker?.isTracking) {
+    return;
+  }
+  const trimmedSelector = Platform.StringUtilities.collapseWhitespace(selector.trim());
+  if (!trimmedSelector) {
+    return;
+  }
+  tracker.trackChange(
+      `Added style rule "${trimValue(trimmedSelector)}"`,
+      buildAnchor(STYLES_PANE_VE_PATH, node),
+  );
+}
+
+function trackRuleHeaderChange(
+    tracker: ChangeTracker.ChangeTracker.ChangeTracker|undefined,
+    node: SDK.DOMModel.DOMNode,
+    headerDescription: string,
+    oldText: string,
+    newText: string,
+    ): void {
+  if (!tracker?.isTracking) {
+    return;
+  }
+  const trimmedOld = Platform.StringUtilities.collapseWhitespace(oldText.trim());
+  const trimmedNew = Platform.StringUtilities.collapseWhitespace(newText.trim());
+  if (!trimmedOld || !trimmedNew || trimmedOld === trimmedNew) {
+    return;
+  }
+  tracker.trackChange(
+      `Changed ${headerDescription} from "${trimValue(trimmedOld)}" to "${trimValue(trimmedNew)}"`,
+      buildAnchor(STYLES_PANE_VE_PATH, node),
+  );
+}
+
+export function trackStyleSelectorChange(
+    tracker: ChangeTracker.ChangeTracker.ChangeTracker|undefined,
+    node: SDK.DOMModel.DOMNode,
+    oldSelector: string,
+    newSelector: string,
+    ): void {
+  trackRuleHeaderChange(tracker, node, 'style rule selector', oldSelector, newSelector);
+}
+
+export function trackPropertyRuleNameChange(
+    tracker: ChangeTracker.ChangeTracker.ChangeTracker|undefined,
+    node: SDK.DOMModel.DOMNode,
+    oldName: string,
+    newName: string,
+    ): void {
+  trackRuleHeaderChange(tracker, node, '@property rule name', oldName, newName);
+}
+
+export function trackKeyframeKeyChange(
+    tracker: ChangeTracker.ChangeTracker.ChangeTracker|undefined,
+    node: SDK.DOMModel.DOMNode,
+    oldKey: string,
+    newKey: string,
+    ): void {
+  trackRuleHeaderChange(tracker, node, 'keyframe key', oldKey, newKey);
+}

package/front_end/models/trace/EventsSerializer.ts

@@ -84,13 +84,8 @@ export class EventsSerializer {
     }
 
     if (EventsSerializer.isSyntheticEventKey(eventValues)) {
-      const syntheticEvents = Helpers.SyntheticEvents.SyntheticEventsManager.getActiveManager().getSyntheticTraces();
-      const syntheticEvent = syntheticEvents.at(eventValues.rawIndex);
-      if (!syntheticEvent) {
-        throw new Error(`Unknown trace event. Attempted to get a synthetic event from an unknown raw event index: ${
-            eventValues.rawIndex}`);
-      }
-      return syntheticEvent;
+      return Helpers.SyntheticEvents.SyntheticEventsManager.getActiveManager().syntheticEventForRawEventIndex(
+          eventValues.rawIndex);
     }
 
     if (EventsSerializer.isRawEventKey(eventValues)) {

package/front_end/models/trace/ModelImpl.ts

@@ -110,8 +110,6 @@ export class Model extends EventTarget {
       }
       const file = this.#storeAndCreateParsedTraceFile(
           syntheticEventsManager, traceEvents, metadata, this.#processor.data, this.#processor.insights);
-      // Reclaim memory used by the temporary event-to-index lookup map now that trace parsing is complete.
-      syntheticEventsManager.clearRegistrationIndex();
       // We only push the file onto this.#traces here once we know it's valid
       // and there's been no errors in the parsing.
       this.#traces.push(file);

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

@@ -14,7 +14,7 @@ import * as Types from '../types/types.js';
 // included, while the amount of `step` phase events can be >= 0.
 
 // A flow phase event is assigned to a trace event when their cat, tid,
-// pid and ts are equal (see @flowPhaseBindingTokenForEvent ).
+// pid and ts are equal (see findBinding()).
 
 // It's possible for a single event to belong to multiple flows. In that
 // case, it will have multiple corresponding flow phase events (one
@@ -26,24 +26,27 @@ import * as Types from '../types/types.js';
 // there are any corresponding flow phase events at all).
 let flowDataByGroupToken = new Map<string, number>();
 
-interface EventFlowData {
+/**
+ * The flows bound to one flow binding tuple (timestamp, process id,
+ * thread id and category).
+ */
+interface FlowBinding {
+  ts: Types.Timing.Micro;
+  pid: Types.Events.ProcessID;
+  tid: Types.Events.ThreadID;
+  cat: string;
   flows: Set<number>;
   bindingParsed: boolean;
 }
-type FlowBindingTuple =
-    Map<Types.Timing.Micro, Map<Types.Events.ProcessID, Map<Types.Events.ThreadID, Map<string, EventFlowData>>>>;
-
-// Given a trace event's flow binding tuple (timestamp, process id,
-// thread id and category) we determine if there is any flow data bound
-// to it by using this map's content. It's built when processing flow
-// events in a trace.
-// An alternative to having a map of four levels is having single map
-// from a string token built from concatenating the binding data to the
-// corresponding flow data. However, this token would be calculated for
-// every event in a trace, resulting in a lot of memory overhead and
-// major GC triggering. So we are trading off readability for
-// performance.
-let boundFlowData: FlowBindingTuple = new Map();
+
+// Trace timestamps are microseconds and too large to be small integers
+// in V8, so a Map keyed by the timestamp hashes a heap number on every
+// lookup. Every non-flow event in a trace is looked up here, so this
+// map is keyed by the low 30 bits of the timestamp instead, which are
+// always a small integer. Bindings that share a key are told apart by
+// comparing the full flow binding tuple.
+const TS_KEY_MASK = 0x3fffffff;
+let boundFlowData = new Map<number, FlowBinding[]>();
 
 let flowsById = new Map<number, Map<Types.Timing.Micro, Types.Events.Event>>();
 let flowEvents: Types.Events.FlowEvent[] = [];
@@ -67,8 +70,17 @@ export function handleEvent(event: Types.Events.Event): void {
   nonFlowEvents.push(event);
 }
 
+function findBinding(bindings: FlowBinding[], event: Types.Events.Event): FlowBinding|undefined {
+  return bindings.find(binding => binding.ts === event.ts && binding.pid === event.pid && binding.tid === event.tid &&
+                           binding.cat === event.cat);
+}
+
 function processNonFlowEvent(event: Types.Events.Event): void {
-  const flowDataForEvent = boundFlowData.get(event.ts)?.get(event.pid)?.get(event.tid)?.get(event.cat);
+  const bindings = boundFlowData.get(event.ts & TS_KEY_MASK);
+  if (!bindings) {
+    return;
+  }
+  const flowDataForEvent = findBinding(bindings, event);
   if (!flowDataForEvent) {
     return;
   }
@@ -95,9 +107,8 @@ function processFlowEvent(flowPhaseEvent: Types.Events.FlowEvent): void {
   const flowGroup = flowGroupTokenForFlowPhaseEvent(flowPhaseEvent);
   switch (flowPhaseEvent.ph) {
     case (Types.Events.Phase.FLOW_START): {
-      const flowMetadata = {flowId: flowPhaseEvent.id, times: new Map([[flowPhaseEvent.ts, undefined]])};
       flowDataByGroupToken.set(flowGroup, flowPhaseEvent.id);
-      addFlowIdToEventBinding(flowPhaseEvent, flowMetadata.flowId);
+      addFlowIdToEventBinding(flowPhaseEvent, flowPhaseEvent.id);
       return;
     }
     case (Types.Events.Phase.FLOW_STEP): {
@@ -125,22 +136,19 @@ function processFlowEvent(flowPhaseEvent: Types.Events.FlowEvent): void {
   }
 }
 
-type MapValueType<T extends Map<unknown, unknown>> = NonNullable<ReturnType<T['get']>>;
 /**
  * A single trace event can belong to multiple flows. This method
  * tracks which flows (flowId) an event belongs to given its flow
  * binding tuple (made of its ts, pid, tid and cat).
  */
 function addFlowIdToEventBinding(event: Types.Events.Event, flowId: number): void {
-  const flowsByPid = Platform.MapUtilities.getWithDefault<Types.Timing.Micro, MapValueType<typeof boundFlowData>>(
-      boundFlowData, event.ts, () => new Map());
-  const flowsByTid = Platform.MapUtilities.getWithDefault<Types.Events.ProcessID, MapValueType<typeof flowsByPid>>(
-      flowsByPid, event.pid, () => new Map());
-  const flowsByCat = Platform.MapUtilities.getWithDefault<Types.Events.ThreadID, MapValueType<typeof flowsByTid>>(
-      flowsByTid, event.tid, () => new Map());
-  const flowData =
-      Platform.MapUtilities.getWithDefault(flowsByCat, event.cat, () => ({flows: new Set(), bindingParsed: false}));
-  flowData.flows.add(flowId);
+  const bindings = Platform.MapUtilities.getWithDefault(boundFlowData, event.ts & TS_KEY_MASK, () => []);
+  let binding = findBinding(bindings, event);
+  if (!binding) {
+    binding = {ts: event.ts, pid: event.pid, tid: event.tid, cat: event.cat, flows: new Set(), bindingParsed: false};
+    bindings.push(binding);
+  }
+  binding.flows.add(flowId);
 }
 
 /**

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

@@ -283,14 +283,21 @@ export async function finalize(): Promise<void> {
      */
     // @ts-expect-error
     const isLightrider = globalThis.isLightrider;
-    if (isLightrider && request.resourceFinish && request.receiveResponse?.args.data.headers) {
-      const lrSizeHeader = request.receiveResponse.args.data.headers.find(h => h.name === 'X-TotalFetchedSize');
-      if (lrSizeHeader) {
-        const size = parseFloat(lrSizeHeader.value);
-        if (!isNaN(size)) {
-          request.resourceFinish.args.data.encodedDataLength = size;
+    if (isLightrider && request.receiveResponse?.args.data.headers) {
+      if (request.resourceFinish) {
+        const lrSizeHeader = request.receiveResponse.args.data.headers.find(h => h.name === 'X-TotalFetchedSize');
+        if (lrSizeHeader) {
+          const size = parseFloat(lrSizeHeader.value);
+          if (!isNaN(size)) {
+            request.resourceFinish.args.data.encodedDataLength = size;
+          }
         }
       }
+
+      const isH2 = request.receiveResponse.args.data.headers.some(h => h.name === 'X-ProtocolIsH2');
+      if (isH2) {
+        request.receiveResponse.args.data.protocol = 'h2';
+      }
     }
 
     // If a ResourceFinish event with an encoded data length is received,

package/front_end/models/trace/helpers/SyntheticEvents.ts

@@ -8,12 +8,14 @@ let activeManager: SyntheticEventsManager|null = null;
 
 export class SyntheticEventsManager {
   /**
-   * All synthetic entries created in a trace from
-   * corresponding trace events.
-   * (ProfileCalls and layout shift clusters are excluded
-   * because they are not based on a real trace event.)
+   * All synthetic entries created in a trace, keyed by the raw trace event
+   * they are based on. (ProfileCalls and layout shift clusters are excluded
+   * because they are not based on a real trace event.) Keying by the raw
+   * event rather than by its index in the raw events array means
+   * registration does not need to look up the index, which would require a
+   * map of every raw event in the trace.
    */
-  #syntheticTraces: Types.Events.SyntheticBased[] = [];
+  #syntheticEventByRawEvent = new WeakMap<Types.Events.Event, Types.Events.SyntheticBased>();
   /**
    * All raw entries from a trace.
    */
@@ -56,55 +58,26 @@ export class SyntheticEventsManager {
     this.#rawTraceEvents = rawEvents;
   }
 
-  #rawEventIndexes: Map<Types.Events.Event, number>|null = null;
-
-  #getRawEventIndex(event: Types.Events.Event): number {
-    if (!this.#rawEventIndexes) {
-      this.#rawEventIndexes = new Map();
-      for (let i = 0; i < this.#rawTraceEvents.length; i++) {
-        this.#rawEventIndexes.set(this.#rawTraceEvents[i], i);
-      }
-    }
-    return this.#rawEventIndexes.get(event) ?? -1;
-  }
-
-  /**
-   * Clears the transient raw event index map.
-   * During trace parsing, this map provides O(1) lookups for registering synthetic events.
-   * Once parsing is complete, queries look up synthetic events exclusively by index in
-   * `#syntheticTraces`, so this map is discarded to reclaim memory.
-   */
-  clearRegistrationIndex(): void {
-    this.#rawEventIndexes = null;
-  }
-
   /**
    * Registers and returns a branded synthetic event. Synthetic events need to
    * be created with this method to ensure they are registered and made
    * available to load events using serialized keys.
    */
   #registerSyntheticEvent<T extends Types.Events.SyntheticBased>(syntheticEvent: Omit<T, '_tag'>): T {
-    const rawIndex = this.#getRawEventIndex(syntheticEvent.rawSourceEvent);
-    if (rawIndex < 0) {
-      throw new Error('Attempted to register a synthetic event paired to an unknown raw event.');
-    }
     const eventAsSynthetic = syntheticEvent as T;
-    this.#syntheticTraces[rawIndex] = eventAsSynthetic;
+    this.#syntheticEventByRawEvent.set(syntheticEvent.rawSourceEvent, eventAsSynthetic);
     return eventAsSynthetic;
   }
 
   syntheticEventForRawEventIndex(rawEventIndex: number): Types.Events.SyntheticBased {
-    const syntheticEvent = this.#syntheticTraces.at(rawEventIndex);
+    const rawEvent = this.#rawTraceEvents.at(rawEventIndex);
+    const syntheticEvent = rawEvent && this.#syntheticEventByRawEvent.get(rawEvent);
     if (!syntheticEvent) {
       throw new Error(`Attempted to get a synthetic event from an unknown raw event index: ${rawEventIndex}`);
     }
     return syntheticEvent;
   }
 
-  getSyntheticTraces(): Types.Events.SyntheticBased[] {
-    return this.#syntheticTraces;
-  }
-
   getRawTraceEvents(): readonly Types.Events.Event[] {
     return this.#rawTraceEvents;
   }

package/front_end/models/trace/insights/RenderBlocking.ts

@@ -82,18 +82,20 @@ function getNodesAndTimingByRequestId(nodeTimings: Lantern.Simulation.Result['no
 
     let duration = nodeTiming.duration;
     let startTime = nodeTiming.startTime;
+    let queuedTime = nodeTiming.queuedTime;
     for (const redirect of node.request.redirects ?? []) {
       const redirectTiming = timingByNodeId.get(redirect.requestId);
       if (redirectTiming) {
         duration += redirectTiming.duration;
         startTime = Math.min(startTime, redirectTiming.startTime);
+        queuedTime = Math.min(queuedTime, redirectTiming.queuedTime);
       }
     }
 
     const backendRequestId = node.request.rawRequest?.args.data.requestId ?? node.request.requestId;
     requestIdToNode.set(backendRequestId, {
       node,
-      nodeTiming: {startTime, endTime: nodeTiming.endTime, duration},
+      nodeTiming: {startTime, endTime: nodeTiming.endTime, queuedTime, duration},
     });
   }
 

package/front_end/models/trace/lantern/simulation/Simulator.ts

@@ -262,6 +262,9 @@ class Simulator<T = Lantern.AnyNetworkObject> {
       if (!connection) {
         return;
       }
+      if (this.nodeTimings.getQueued(node).queuedTime === totalElapsedTime) {
+        connection.setH2OverflowBytesDownloaded(0);
+      }
     }
 
     this.markNodeAsInProgress(node, totalElapsedTime);
@@ -430,6 +433,7 @@ class Simulator<T = Lantern.AnyNetworkObject> {
             {
               startTime: timing.startTime,
               endTime: timing.endTime,
+              queuedTime: timing.queuedTime,
               duration: timing.endTime - timing.startTime,
             },
           ];

package/front_end/models/trace/lantern/types/Lantern.ts

@@ -233,6 +233,7 @@ export namespace Simulation {
   export interface NodeTiming {
     startTime: number;
     endTime: number;
+    queuedTime: number;
     duration: number;
   }
 }

package/front_end/panels/accessibility/AccessibilityAnnouncementRecordingView.ts

@@ -89,11 +89,86 @@ const UIStrings = {
    * @description Fallback reason shown when an unknown error occurs while blocking recording.
    */
   unknownError: 'Unknown error',
+  /**
+   * @description Accessible label for the grabber handle used to vertically resize the announcements pane.
+   */
+  resizeAnnouncementsPane: 'Resize announcements pane',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/accessibility/AccessibilityAnnouncementRecordingView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 export const BINDING_NAME = '__announcementsRecorderBinding';
+const MIN_MAIN_PANE_HEIGHT = 150;
+const KEYBOARD_RESIZE_STEP = 10;
+let isDragging = false;
+let resizeStartY = 0;
+let resizeStartHeight = MIN_MAIN_PANE_HEIGHT;
+
+function onResizerPointerDown(event: PointerEvent): void {
+  if (event.button !== 0) {
+    return;
+  }
+  const resizerEl = event.currentTarget as HTMLElement | null;
+  const mainPane = resizerEl?.parentElement?.querySelector<HTMLElement>('.announcements-main-pane');
+  if (!resizerEl || !mainPane) {
+    return;
+  }
+  isDragging = true;
+  resizeStartY = event.clientY;
+  resizeStartHeight = mainPane.getBoundingClientRect().height;
+  try {
+    resizerEl.setPointerCapture(event.pointerId);
+  } catch {
+    // Pointer capture may fail on synthetic events in unit tests.
+  }
+  event.preventDefault();
+}
+
+function onResizerPointerMove(event: PointerEvent): void {
+  const resizerEl = event.currentTarget as HTMLElement | null;
+  if (!resizerEl || !isDragging) {
+    return;
+  }
+  const mainPane = resizerEl.parentElement?.querySelector<HTMLElement>('.announcements-main-pane');
+  if (!mainPane) {
+    return;
+  }
+  const delta = event.clientY - resizeStartY;
+  const newHeight = Math.max(MIN_MAIN_PANE_HEIGHT, resizeStartHeight + delta);
+  mainPane.style.height = `${newHeight}px`;
+  mainPane.style.flex = 'none';
+}
+
+function onResizerPointerUp(event: PointerEvent): void {
+  isDragging = false;
+  const resizerEl = event.currentTarget as HTMLElement | null;
+  if (resizerEl) {
+    try {
+      if (resizerEl.hasPointerCapture(event.pointerId)) {
+        resizerEl.releasePointerCapture(event.pointerId);
+      }
+    } catch {
+      // Ignored for synthetic events in unit tests.
+    }
+  }
+}
+
+function onResizerKeyDown(event: KeyboardEvent): void {
+  if (event.key !== 'ArrowDown' && event.key !== 'ArrowUp') {
+    return;
+  }
+  const resizerEl = event.currentTarget as HTMLElement | null;
+  const mainPane = resizerEl?.parentElement?.querySelector<HTMLElement>('.announcements-main-pane');
+  if (!mainPane) {
+    return;
+  }
+  event.preventDefault();
+  const delta = event.key === 'ArrowDown' ? KEYBOARD_RESIZE_STEP : -KEYBOARD_RESIZE_STEP;
+  const currentHeight = mainPane.getBoundingClientRect().height;
+  const newHeight = Math.max(MIN_MAIN_PANE_HEIGHT, currentHeight + delta);
+  mainPane.style.height = `${newHeight}px`;
+  mainPane.style.flex = 'none';
+}
 
 export enum AnnouncementApi {
   ARIA_LIVE = 'aria-live',
@@ -218,6 +293,23 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
           @reveal-in-a11y-tree=${(e: CustomEvent<A11yAnnouncement>) => input.onRevealInA11yTree(e.detail)}>
         </devtools-widget>
       </div>
+      <div
+        class="announcements-resizer"
+        role="separator"
+        aria-orientation="horizontal"
+        aria-label=${i18nString(UIStrings.resizeAnnouncementsPane)}
+        title=${i18nString(UIStrings.resizeAnnouncementsPane)}
+        tabindex="0"
+        jslog=${VisualLogging.resizer('accessibility-announcements.resizer').track({
+          drag: true,
+          keydown: 'ArrowUp|ArrowDown',
+        })}
+        @pointerdown=${onResizerPointerDown}
+        @pointermove=${onResizerPointerMove}
+        @pointerup=${onResizerPointerUp}
+        @lostpointercapture=${onResizerPointerUp}
+        @keydown=${onResizerKeyDown}>
+      </div>
     </div>`,
     target);
   // clang-format on

package/front_end/panels/accessibility/SourceOrderView.ts

@@ -72,7 +72,7 @@ const DEFAULT_VIEW: View = (input, _output, target) => {
       }
       <devtools-checkbox class="source-order-checkbox"
                           jslog=${VisualLogging.toggle().track({click: true})}
-                          ?checked=${input.showSourceOrder}
+                          .checked=${Boolean(input.showSourceOrder)}
                           @change=${onShowSourceOrderChanged}>
         ${i18nString(UIStrings.showSourceOrder)}
       </devtools-checkbox>