chrome-devtools-frontend 1.0.1564932 → 1.0.1565595

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

@@ -55,7 +55,13 @@ let linkPreconnectEvents: Types.Events.LinkPreconnect[] = [];
 interface NetworkRequestData {
   byId: Map<string, Types.Events.SyntheticNetworkRequest>;
   byTime: Types.Events.SyntheticNetworkRequest[];
-  eventToInitiator: Map<Types.Events.SyntheticNetworkRequest, Types.Events.SyntheticNetworkRequest>;
+  requestIdsByURL: Map<string, string[]>;
+  /**
+   * IMPORTANT: you should prefer to use `Trace.Extras.Initiator` to find the initiator.
+   * This is because backend trace events have some bugs which means the initiators are not always accurate.
+   * See crrev.com/c/7032169 for context.
+   */
+  incompleteInitiator: Map<Types.Events.SyntheticNetworkRequest, Types.Events.SyntheticNetworkRequest>;
   webSocket: WebSocketTraceData[];
   entityMappings: HandlerHelpers.EntityMappings;
   linkPreconnectEvents: Types.Events.LinkPreconnect[];
@@ -65,6 +71,11 @@ let requestMap = new Map<string, TraceEventsForNetworkRequest>();
 let requestsById = new Map<string, Types.Events.SyntheticNetworkRequest>();
 let requestsByTime: Types.Events.SyntheticNetworkRequest[] = [];
 
+/**
+ * URL => RequestId[]. There can be multiple requests for a single URL.
+ */
+let requestIdsByURL = new Map<string, string[]>();
+
 let networkRequestEventByInitiatorUrl = new Map<string, Types.Events.SyntheticNetworkRequest[]>();
 let eventToInitiatorMap = new Map<Types.Events.SyntheticNetworkRequest, Types.Events.SyntheticNetworkRequest>();
 
@@ -120,6 +131,7 @@ export function reset(): void {
   networkRequestEventByInitiatorUrl = new Map();
   eventToInitiatorMap = new Map();
   webSocketData = new Map();
+  requestIdsByURL = new Map();
   entityMappings = {
     eventsByEntity: new Map<HandlerHelpers.Entity, Types.Events.Event[]>(),
     entityByEvent: new Map<Types.Events.Event, HandlerHelpers.Entity>(),
@@ -587,6 +599,10 @@ export async function finalize(): Promise<void> {
     requestsByTime.push(networkEvent);
     requestsById.set(networkEvent.args.data.requestId, networkEvent);
 
+    const requestsForUrl = requestIdsByURL.get(networkEvent.args.data.url) ?? [];
+    requestsForUrl.push(networkEvent.args.data.requestId);
+    requestIdsByURL.set(networkEvent.args.data.url, requestsForUrl);
+
     // Update entity relationships for network events
     HandlerHelpers.addNetworkRequestToEntityMapping(networkEvent, entityMappings, request);
 
@@ -617,7 +633,8 @@ export function data(): NetworkRequestData {
   return {
     byId: requestsById,
     byTime: requestsByTime,
-    eventToInitiator: eventToInitiatorMap,
+    requestIdsByURL,
+    incompleteInitiator: eventToInitiatorMap,
     webSocket: [...webSocketData.values()],
     entityMappings: {
       entityByEvent: entityMappings.entityByEvent,

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

@@ -550,7 +550,9 @@ function candidateRequestsByOrigin(
     }
 
     // Filter out all resources that are loaded by the document. Connections are already early.
-    if (data.NetworkRequests.eventToInitiator.get(request) === mainResource) {
+    // TODO(jacktfranklin, b/392090449): swap this over to use the initiator
+    // lookup that fixes bugs with dynamically injected content.
+    if (data.NetworkRequests.incompleteInitiator.get(request) === mainResource) {
       return;
     }
 

package/front_end/panels/ai_assistance/AiAssistancePanel.ts

@@ -28,6 +28,13 @@ import * as TimelinePanel from '../timeline/timeline.js';
 
 import aiAssistancePanelStyles from './aiAssistancePanel.css.js';
 import {ArtifactsViewer} from './components/ArtifactsViewer.js';
+import {
+  type AnswerPart,
+  ChatMessageEntity,
+  type Message,
+  type ModelChatMessage,
+  type Step,
+} from './components/ChatMessage.js';
 import {
   ChatView,
   type Props as ChatViewProps,
@@ -36,18 +43,11 @@ import {DisabledWidget} from './components/DisabledWidget.js';
 import {ExploreWidget} from './components/ExploreWidget.js';
 import {MarkdownRendererWithCodeBlock} from './components/MarkdownRendererWithCodeBlock.js';
 import {PerformanceAgentMarkdownRenderer} from './components/PerformanceAgentMarkdownRenderer.js';
-import {
-  type AnswerPart,
-  type ChatMessage,
-  ChatMessageEntity,
-  type ModelChatMessage,
-  type Step,
-} from './components/UserActionRow.js';
 import {isAiAssistancePatchingEnabled} from './PatchWidget.js';
 
 // FIXME: this export is temporary to avoid rewriting tests.
-export {ChatMessageEntity} from './components/UserActionRow.js';
-export type {AnswerPart, ModelChatMessage, StepPart} from './components/UserActionRow.js';
+export {ChatMessageEntity} from './components/ChatMessage.js';
+export type {AnswerPart, ModelChatMessage, StepPart} from './components/ChatMessage.js';
 
 const {html} = Lit;
 
@@ -518,7 +518,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
   #selectedRequest: AiAssistanceModel.NetworkAgent.RequestContext|null = null;
   #isArtifactsSidebarOpen = false;
   // Messages displayed in the `ChatView` component.
-  #messages: ChatMessage[] = [];
+  #messages: Message[] = [];
 
   // Whether the UI should show loading or not.
   #isLoading = false;

package/front_end/panels/ai_assistance/ai_assistance.ts

@@ -8,7 +8,7 @@ export * as ChatInput from './components/ChatInput.js';
 export * from './components/MarkdownRendererWithCodeBlock.js';
 export * from './components/PerformanceAgentFlameChart.js';
 export * from './SelectWorkspaceDialog.js';
-export * as UserActionRow from './components/UserActionRow.js';
+export * as ChatMessage from './components/ChatMessage.js';
 export * as ExploreWidget from './components/ExploreWidget.js';
 export * as PatchWidget from './PatchWidget.js';
 export * as DisabledWidget from './components/DisabledWidget.js';

package/front_end/panels/ai_assistance/components/{UserActionRow.ts → ChatMessage.ts}

@@ -19,7 +19,7 @@ import * as UI from '../../../ui/legacy/legacy.js';
 import * as Lit from '../../../ui/lit/lit.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 
-import userActionRowStyles from './userActionRow.css.js';
+import chatMessageStyles from './chatMessage.css.js';
 
 const {html, Directives: {ref, ifDefined}} = Lit;
 const lockedString = i18n.i18n.lockedString;
@@ -205,7 +205,7 @@ export interface ModelChatMessage {
   rpcId?: Host.AidaClient.RpcGlobalId;
 }
 
-export type ChatMessage = UserChatMessage|ModelChatMessage;
+export type Message = UserChatMessage|ModelChatMessage;
 
 export interface RatingViewInput {
   currentRating?: Host.AidaClient.Rating;
@@ -233,7 +233,7 @@ export interface FeedbackFormViewInput {
   isSubmitButtonDisabled: boolean;
 }
 
-export type UserActionRowViewInput =
+export type ChatMessageViewInput =
     MessageInput&RatingViewInput&ActionViewInput&SuggestionViewInput&FeedbackFormViewInput;
 
 export interface ViewOutput {
@@ -244,7 +244,7 @@ export interface ViewOutput {
 
 export interface MessageInput {
   suggestions?: [string, ...string[]];
-  message: ChatMessage;
+  message: Message;
   isLoading: boolean;
   isReadOnly: boolean;
   isLastMessage: boolean;
@@ -256,7 +256,7 @@ export interface MessageInput {
   onCopyResponseClick: (message: ModelChatMessage) => void;
 }
 
-export const DEFAULT_VIEW = (input: UserActionRowViewInput, output: ViewOutput, target: HTMLElement): void => {
+export const DEFAULT_VIEW = (input: ChatMessageViewInput, output: ViewOutput, target: HTMLElement): void => {
   const message = input.message;
   if (message.entity === ChatMessageEntity.USER) {
     const name = input.userInfo.accountFullName || lockedString(UIStringsNotTranslate.you);
@@ -272,7 +272,7 @@ export const DEFAULT_VIEW = (input: UserActionRowViewInput, output: ViewOutput,
     // clang-format off
     Lit.render(html`
       <style>${Input.textInputStyles}</style>
-      <style>${userActionRowStyles}</style>
+      <style>${chatMessageStyles}</style>
       <section
         class="chat-message query ${input.isLastMessage ? 'is-last-message' : ''}"
         jslog=${VisualLogging.section('question')}
@@ -294,7 +294,7 @@ export const DEFAULT_VIEW = (input: UserActionRowViewInput, output: ViewOutput,
   // clang-format off
   Lit.render(html`
     <style>${Input.textInputStyles}</style>
-    <style>${userActionRowStyles}</style>
+    <style>${chatMessageStyles}</style>
     <section
       class="chat-message answer ${input.isLastMessage ? 'is-last-message' : ''}"
       jslog=${VisualLogging.section('answer')}
@@ -585,7 +585,7 @@ function renderImageChatMessage(inlineData: Host.AidaClient.MediaBlob): Lit.LitT
   // clang-format on
 }
 
-function renderActions(input: UserActionRowViewInput, output: ViewOutput): Lit.LitTemplate {
+function renderActions(input: ChatMessageViewInput, output: ViewOutput): Lit.LitTemplate {
   // clang-format off
   return html`
     <div class="ai-assistance-feedback-row">
@@ -739,8 +739,8 @@ function renderActions(input: UserActionRowViewInput, output: ViewOutput): Lit.L
   // clang-format on
 }
 
-export class UserActionRow extends UI.Widget.Widget {
-  message: ChatMessage = {entity: ChatMessageEntity.USER, text: ''};
+export class ChatMessage extends UI.Widget.Widget {
+  message: Message = {entity: ChatMessageEntity.USER, text: ''};
   isLoading = false;
   isReadOnly = false;
   canShowFeedbackForm = false;

package/front_end/panels/ai_assistance/components/ChatView.ts

@@ -17,8 +17,8 @@ import * as Lit from '../../../ui/lit/lit.js';
 import {PatchWidget} from '../PatchWidget.js';
 
 import {ChatInput} from './ChatInput.js';
+import {ChatMessage, type Message, type ModelChatMessage} from './ChatMessage.js';
 import chatViewStyles from './chatView.css.js';
-import {type ChatMessage, type ModelChatMessage, UserActionRow} from './UserActionRow.js';
 
 export {ChatInput, type ImageInputData} from './ChatInput.js';
 
@@ -50,7 +50,7 @@ export interface Props {
   onCopyResponseClick: (message: ModelChatMessage) => void;
   changeManager: AiAssistanceModel.ChangeManager.ChangeManager;
   inspectElementToggled: boolean;
-  messages: ChatMessage[];
+  messages: Message[];
   selectedContext: AiAssistanceModel.AiAgent.ConversationContext<unknown>|null;
   isLoading: boolean;
   canShowFeedbackForm: boolean;
@@ -282,7 +282,7 @@ function renderMainContents({
   onCopyResponseClick,
   onMessageContainerRef,
 }: {
-  messages: ChatMessage[],
+  messages: Message[],
   isLoading: boolean,
   isReadOnly: boolean,
   canShowFeedbackForm: boolean,
@@ -331,7 +331,7 @@ function renderMessages({
   onCopyResponseClick,
   onMessageContainerRef,
 }: {
-  messages: ChatMessage[],
+  messages: Message[],
   isLoading: boolean,
   isReadOnly: boolean,
   canShowFeedbackForm: boolean,
@@ -363,7 +363,7 @@ function renderMessages({
   return html`
     <div class="messages-container" ${ref(onMessageContainerRef)}>
       ${repeat(messages, message =>
-        html`<devtools-widget .widgetConfig=${UI.Widget.widgetConfig(UserActionRow, {
+        html`<devtools-widget .widgetConfig=${UI.Widget.widgetConfig(ChatMessage, {
           message,
           isLoading,
           isReadOnly,

package/front_end/panels/common/ExtensionServer.ts

@@ -1669,7 +1669,12 @@ class ExtensionServerPanelView extends UI.View.SimpleView {
     // used anywhere, since we override the `viewId()` method below.  Ideally we'd pass the
     // `name` as `viewId` to the constructor, but that doesn't work, since the `name` is not
     // necessarily in Kebab case.
-    const viewId = Platform.StringUtilities.toKebabCase(title);
+    //
+    // For non-ASCII titles (e.g., Chinese, Japanese, Arabic), the kebab-cased result may not
+    // pass isExtendedKebabCase validation, so we fall back to 'extension-panel'.
+    const kebabTitle = Platform.StringUtilities.toKebabCase(title);
+    const viewId =
+        Platform.StringUtilities.isExtendedKebabCase(kebabTitle) ? kebabTitle : 'extension-panel' as Lowercase<string>;
     super({title, viewId});
     this.name = name;
     this.panel = panel;

package/front_end/panels/console/ConsolePinPane.ts

@@ -8,14 +8,13 @@ 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 CodeMirror from '../../third_party/codemirror.next/codemirror.next.js';
-import {Directives, html, nothing, render} from '../../third_party/lit/lit.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
 import * as TextEditor from '../../ui/components/text_editor/text_editor.js';
 import * as ObjectUI from '../../ui/legacy/components/object_ui/object_ui.js';
 // eslint-disable-next-line @devtools/es-modules-import
 import objectValueStyles from '../../ui/legacy/components/object_ui/objectValue.css.js';
 import * as UI from '../../ui/legacy/legacy.js';
-import type {LitTemplate} from '../../ui/lit/lit.js';
+import {Directives, html, type LitTemplate, nothing, render} from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import consolePinPaneStyles from './consolePinPane.css.js';

package/front_end/panels/console/ConsoleView.ts

@@ -340,7 +340,6 @@ export class ConsoleView extends UI.Widget.VBox implements
   aiCodeCompletionConfig?: TextEditor.AiCodeCompletionProvider.AiCodeCompletionConfig;
   private aiCodeCompletionSummaryToolbarContainer?: HTMLElement;
   private aiCodeCompletionSummaryToolbar?: AiCodeCompletionSummaryToolbar;
-  private aiCodeCompletionCitations: Host.AidaClient.Citation[] = [];
 
   constructor(viewportThrottlerTimeout: number) {
     super();
@@ -657,21 +656,19 @@ export class ConsoleView extends UI.Widget.VBox implements
     this.aiCodeCompletionSummaryToolbar.show(this.aiCodeCompletionSummaryToolbarContainer, undefined, true);
   }
 
-  #onAiCodeCompletionSuggestionAccepted(): void {
-    if (!this.aiCodeCompletionSummaryToolbar || this.aiCodeCompletionCitations.length === 0) {
+  #onAiCodeCompletionSuggestionAccepted(citations: Host.AidaClient.Citation[]): void {
+    if (!this.aiCodeCompletionSummaryToolbar || citations.length === 0) {
       return;
     }
-    const citations =
-        this.aiCodeCompletionCitations.map(citation => citation.uri).filter((uri): uri is string => Boolean(uri));
-    this.aiCodeCompletionSummaryToolbar.updateCitations(citations);
+    const citationsUri = citations.map(citation => citation.uri).filter((uri): uri is string => Boolean(uri));
+    this.aiCodeCompletionSummaryToolbar.updateCitations(citationsUri);
   }
 
   #onAiCodeCompletionRequestTriggered(): void {
     this.aiCodeCompletionSummaryToolbar?.setLoading(true);
   }
 
-  #onAiCodeCompletionResponseReceived(citations: Host.AidaClient.Citation[]): void {
-    this.aiCodeCompletionCitations = citations;
+  #onAiCodeCompletionResponseReceived(): void {
     this.aiCodeCompletionSummaryToolbar?.setLoading(false);
   }
 
@@ -1077,12 +1074,12 @@ export class ConsoleView extends UI.Widget.VBox implements
     }
 
     const currentGroup = viewMessage.consoleGroup();
+    showGroup(currentGroup, this.visibleViewMessages);
 
     if (!currentGroup?.messagesHidden()) {
       const originatingMessage = viewMessage.consoleMessage().originatingMessage();
       const adjacent = Boolean(originatingMessage && lastMessage?.consoleMessage() === originatingMessage);
       viewMessage.setAdjacentUserCommandResult(adjacent);
-      showGroup(currentGroup, this.visibleViewMessages);
       this.visibleViewMessages.push(viewMessage);
       this.searchMessage(this.visibleViewMessages.length - 1);
     }

package/front_end/panels/elements/CSSValueTraceView.ts

@@ -3,8 +3,8 @@
 // found in the LICENSE file.
 
 import type * as SDK from '../../core/sdk/sdk.js';
-import * as Lit from '../../third_party/lit/lit.js';
 import * as UI from '../../ui/legacy/legacy.js';
+import * as Lit from '../../ui/lit/lit.js';
 
 import cssValueTraceViewStyles from './cssValueTraceView.css.js';
 import {

package/front_end/panels/elements/ElementsTreeElement.ts

@@ -48,7 +48,6 @@ import type * as IssuesManager from '../../models/issues_manager/issues_manager.
 import * as TextUtils from '../../models/text_utils/text_utils.js';
 import * as Workspace from '../../models/workspace/workspace.js';
 import * as CodeMirror from '../../third_party/codemirror.next/codemirror.next.js';
-import type {DirectiveResult} from '../../third_party/lit/lib/directive.js';
 import type * as Adorners from '../../ui/components/adorners/adorners.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
 import * as CodeHighlighter from '../../ui/components/code_highlighter/code_highlighter.js';
@@ -58,6 +57,7 @@ import {Icon} from '../../ui/kit/kit.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as Lit from '../../ui/lit/lit.js';
+import type {DirectiveResult} from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 import * as PanelsCommon from '../common/common.js';
 import * as Emulation from '../emulation/emulation.js';

package/front_end/panels/elements/LayersWidget.ts

@@ -6,9 +6,9 @@ import type * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import type * as Protocol from '../../generated/protocol.js';
-import * as Lit from '../../third_party/lit/lit.js';
 import * as TreeOutline from '../../ui/components/tree_outline/tree_outline.js';
 import * as UI from '../../ui/legacy/legacy.js';
+import * as Lit from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import {ElementsPanel} from './ElementsPanel.js';

package/front_end/panels/emulation/MediaQueryInspector.ts

@@ -8,9 +8,8 @@ import * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Bindings from '../../models/bindings/bindings.js';
 import type * as Workspace from '../../models/workspace/workspace.js';
-import {Directives, html, nothing, render} from '../../third_party/lit/lit.js';
 import * as UI from '../../ui/legacy/legacy.js';
-import type {LitTemplate} from '../../ui/lit/lit.js';
+import {Directives, html, type LitTemplate, nothing, render} from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import mediaQueryInspectorStyles from './mediaQueryInspector.css.js';

package/front_end/panels/network/RequestResponseView.ts

@@ -7,9 +7,9 @@ import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import type * as SDK from '../../core/sdk/sdk.js';
 import * as TextUtils from '../../models/text_utils/text_utils.js';
-import * as Lit from '../../third_party/lit/lit.js';
 import * as SourceFrame from '../../ui/legacy/components/source_frame/source_frame.js';
 import * as UI from '../../ui/legacy/legacy.js';
+import * as Lit from '../../ui/lit/lit.js';
 
 import {BinaryResourceView} from './BinaryResourceView.js';
 

package/front_end/panels/recorder/RecorderController.ts

@@ -42,10 +42,18 @@ const UIStrings = {
    * @description The title of the button that allows importing a recording.
    */
   importRecording: 'Import recording',
+  /**
+   * @description The announcement text for screen readers when a recording is imported.
+   */
+  recordingImported: 'Recording imported',
   /**
    * @description The title of the button that deletes the recording
    */
   deleteRecording: 'Delete recording',
+  /**
+   * @description The announcement text for screen readers when a recording is deleted.
+   */
+  recordingDeleted: 'Recording deleted',
   /**
    * @description The title of the select if user has no saved recordings
    */
@@ -88,6 +96,10 @@ const UIStrings = {
    * panel that is followed by the list of built-in export formats.
    */
   export: 'Export',
+  /**
+   * @description The announcement text for screen readers when a recording is exported successfully.
+   */
+  recordingExported: 'Recording exported',
   /**
    * @description The title of the menu group in the export menu of the Recorder
    * panel that is followed by the list of export formats available via browser
@@ -333,6 +345,7 @@ export class RecorderController extends LitElement {
     this.#setCurrentRecording(await this.#storage.saveRecording(flow));
     this.#setCurrentPage(Pages.RECORDING_PAGE);
     this.#clearError();
+    UI.ARIAUtils.LiveAnnouncer.alert(i18nString(UIStrings.recordingImported));
   }
 
   setCurrentRecordingForTesting(recording: StoredRecording|undefined): void {
@@ -787,6 +800,7 @@ export class RecorderController extends LitElement {
       await this.#storage.deleteRecording(this.currentRecording.storageName);
       this.#screenshotStorage.deleteScreenshotsForRecording(this.currentRecording.storageName);
     }
+    UI.ARIAUtils.LiveAnnouncer.alert(i18nString(UIStrings.recordingDeleted));
     if ((await this.#storage.getRecordings()).length) {
       this.#setCurrentPage(Pages.ALL_RECORDINGS_PAGE);
     } else {
@@ -944,8 +958,10 @@ export class RecorderController extends LitElement {
     const builtInMetric = CONVERTER_ID_TO_METRIC[converter.getId()];
     if (builtInMetric) {
       Host.userMetrics.recordingExported(builtInMetric);
+      UI.ARIAUtils.LiveAnnouncer.alert(i18nString(UIStrings.recordingExported));
     } else if (converter.getId().startsWith(Converters.ExtensionConverter.EXTENSION_PREFIX)) {
       Host.userMetrics.recordingExported(Host.UserMetrics.RecordingExported.TO_EXTENSION);
+      UI.ARIAUtils.LiveAnnouncer.alert(i18nString(UIStrings.recordingExported));
     } else {
       throw new Error('Could not find a metric for the export option with id = ' + id);
     }

package/front_end/panels/sources/AiCodeCompletionPlugin.ts

@@ -23,7 +23,6 @@ export class AiCodeCompletionPlugin extends Plugin {
   #aiCodeCompletionDisclaimer?: PanelCommon.AiCodeCompletionDisclaimer;
   #aiCodeCompletionDisclaimerContainer = document.createElement('div');
   #aiCodeCompletionDisclaimerToolbarItem = new UI.Toolbar.ToolbarItem(this.#aiCodeCompletionDisclaimerContainer);
-  #aiCodeCompletionCitations: Host.AidaClient.Citation[] = [];
   #aiCodeCompletionCitationsToolbar?: PanelCommon.AiCodeCompletionSummaryToolbar;
   #aiCodeCompletionCitationsToolbarContainer = document.createElement('div');
   #aiCodeCompletionCitationsToolbarAttached = false;
@@ -151,21 +150,19 @@ export class AiCodeCompletionPlugin extends Plugin {
     }
   };
 
-  #onAiResponseReceived = (citations: Host.AidaClient.Citation[]): void => {
-    this.#aiCodeCompletionCitations = citations;
+  #onAiResponseReceived = (): void => {
     if (this.#aiCodeCompletionDisclaimer) {
       this.#aiCodeCompletionDisclaimer.loading = false;
     }
   };
 
-  #onAiCodeCompletionSuggestionAccepted(): void {
-    if (!this.#aiCodeCompletionCitationsToolbar || this.#aiCodeCompletionCitations.length === 0) {
+  #onAiCodeCompletionSuggestionAccepted(citations: Host.AidaClient.Citation[]): void {
+    if (!this.#aiCodeCompletionCitationsToolbar || citations.length === 0) {
       return;
     }
-    const citations =
-        this.#aiCodeCompletionCitations.map(citation => citation.uri).filter((uri): uri is string => Boolean(uri));
-    this.#aiCodeCompletionCitationsToolbar.updateCitations(citations);
-    if (!this.#aiCodeCompletionCitationsToolbarAttached && citations.length > 0) {
+    const citationsUri = citations.map(citation => citation.uri).filter((uri): uri is string => Boolean(uri));
+    this.#aiCodeCompletionCitationsToolbar.updateCitations(citationsUri);
+    if (!this.#aiCodeCompletionCitationsToolbarAttached && citationsUri.length > 0) {
       this.#attachAiCodeCompletionCitationsToolbar();
     }
   }

package/front_end/panels/timeline/Initiators.ts

@@ -2,7 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import type * as Trace from '../../models/trace/trace.js';
+import * as Trace from '../../models/trace/trace.js';
 
 export interface InitiatorData {
   event: Trace.Types.Events.Event;
@@ -38,7 +38,7 @@ export function initiatorsDataToDraw(
     hiddenEntries: Trace.Types.Events.Event[],
     expandableEntries: Trace.Types.Events.Event[]): readonly InitiatorData[] {
   const initiatorsData = [
-    ...findInitiatorDataPredecessors(parsedTrace, selectedEvent, parsedTrace.data.Initiators.eventToInitiator),
+    ...findInitiatorDataPredecessors(parsedTrace, selectedEvent),
     ...findInitiatorDataDirectSuccessors(selectedEvent, parsedTrace.data.Initiators.initiatorToEvents),
   ];
 
@@ -54,13 +54,12 @@ export function initiatorsDataToDrawForNetwork(
     parsedTrace: Trace.TraceModel.ParsedTrace,
     selectedEvent: Trace.Types.Events.Event,
     ): readonly InitiatorData[] {
-  return findInitiatorDataPredecessors(parsedTrace, selectedEvent, parsedTrace.data.NetworkRequests.eventToInitiator);
+  return findInitiatorDataPredecessors(parsedTrace, selectedEvent);
 }
 
 function findInitiatorDataPredecessors(
     parsedTrace: Trace.TraceModel.ParsedTrace,
     selectedEvent: Trace.Types.Events.Event,
-    eventToInitiator: Map<Trace.Types.Events.Event, Trace.Types.Events.Event>,
     ): readonly InitiatorData[] {
   const initiatorsData: InitiatorData[] = [];
   let currentEvent: Trace.Types.Events.Event|null = selectedEvent;
@@ -69,7 +68,10 @@ function findInitiatorDataPredecessors(
 
   // Build event initiator data up to the selected one
   while (currentEvent && initiatorsData.length < MAX_PREDECESSOR_INITIATOR_LIMIT) {
-    const currentInitiator = eventToInitiator.get(currentEvent);
+    const currentInitiator: Trace.Types.Events.Event|undefined =
+        Trace.Types.Events.isSyntheticNetworkRequest(currentEvent) ?
+        Trace.Extras.Initiators.getNetworkInitiator(parsedTrace.data, currentEvent) :
+        parsedTrace.data.Initiators.eventToInitiator.get(currentEvent);
 
     if (currentInitiator) {
       if (visited.has(currentInitiator)) {

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

@@ -449,9 +449,11 @@ function renderInitiatedBy(
       link = linkifier.maybeLinkifyConsoleCallFrame(target, topFrame, options);
     }
   }
-  // If we do not, we can see if the network handler found an initiator and try to link by URL
-  const initiator = parsedTrace?.data.NetworkRequests.eventToInitiator.get(request);
-  if (initiator) {
+  // If we do not, we can see if the network handler found an initiator and try
+  // to link by URL
+  const initiator = parsedTrace ? Trace.Extras.Initiators.getNetworkInitiator(parsedTrace.data, request) : undefined;
+  // Initiator will always be a synthetic network request but TS doesn't know that.
+  if (initiator && Trace.Types.Events.isSyntheticNetworkRequest(initiator)) {
     link = linkifier.maybeLinkifyScriptLocation(
         target,
         null,  // this would be the scriptId, but we don't have one. The linkifier will fallback to using the URL.

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: 20a082853649af2a56eb07f8b915a76b5e00d24a
+Revision: 692cff7713662587bc857dc3f7cb434b2253d929
 Update Mechanism: Manual (https://crbug.com/428069060)
 License: BSD-3-Clause
 License File: LICENSE

package/front_end/third_party/codemirror.next/rebuild.sh

@@ -1,6 +1,6 @@
 npm install
 ../../../node_modules/.bin/tsc -d -t esnext -m esnext --moduleResolution node bundle.ts
-../../../node_modules/@rollup/wasm-node/dist/bin/rollup -c
+../../../node_modules/rollup/dist/bin/rollup -c
 rm -rf node_modules bundle.js bundle.d.ts
 # Because there's a bug in clang causing it to reformat import lists even where formatting is disabled, run it right away
 git cl format --js

package/front_end/third_party/lit/rebuild.sh

@@ -1,6 +1,6 @@
 npm install
 ../../../node_modules/.bin/tsc -d -t esnext -m esnext --moduleResolution node src/*
-../../../node_modules/@rollup/wasm-node/dist/bin/rollup -c
+../../../node_modules/rollup/dist/bin/rollup -c
 rm -rf node_modules src/*.js src/*.d.ts
 # Because there's a bug in clang causing it to reformat import lists even where formatting is disabled, run it right away
 git cl format --js

package/front_end/ui/components/buttons/button.css

@@ -354,3 +354,9 @@ button {
     transform: rotate(360deg);
   }
 }
+
+@media(forced-colors: active) {
+  .toggled devtools-icon {
+    background-color: canvas;
+  }
+}

package/front_end/ui/components/text_editor/{AiCodeCompletionTeaserPlaceholder.ts → AccessiblePlaceholder.ts}

@@ -4,7 +4,7 @@
 /* eslint-disable @devtools/no-imperative-dom-api */
 
 import * as CM from '../../../third_party/codemirror.next/codemirror.next.js';
-import type * as UI from '../../../ui/legacy/legacy.js';
+import type * as UI from '../../legacy/legacy.js';
 
 export function flattenRect(rect: DOMRect, left: boolean): {
   left: number,
@@ -16,7 +16,6 @@ export function flattenRect(rect: DOMRect, left: boolean): {
   return {left: x, right: x, top: rect.top, bottom: rect.bottom};
 }
 
-// TODO(b/462393094): Rename this to be a generic accessible placeholder
 /**
  * A CodeMirror WidgetType that displays a UI.Widget.Widget as a placeholder.
  *
@@ -25,7 +24,7 @@ export function flattenRect(rect: DOMRect, left: boolean): {
  * it ensures that screen readers can properly announce the content within
  * the encapsulated widget.
  */
-export class AiCodeCompletionTeaserPlaceholder extends CM.WidgetType {
+export class AccessiblePlaceholder extends CM.WidgetType {
   constructor(readonly teaser: UI.Widget.Widget) {
     super();
   }
@@ -72,25 +71,7 @@ export class AiCodeCompletionTeaserPlaceholder extends CM.WidgetType {
     this.teaser?.hideWidget();
   }
 
-  override eq(other: AiCodeCompletionTeaserPlaceholder): boolean {
+  override eq(other: AccessiblePlaceholder): boolean {
     return this.teaser === other.teaser;
   }
 }
-
-export function aiCodeCompletionTeaserPlaceholder(teaser: UI.Widget.Widget): CM.Extension {
-  const plugin = CM.ViewPlugin.fromClass(class {
-    placeholder: CM.DecorationSet;
-
-    constructor(readonly view: CM.EditorView) {
-      this.placeholder = CM.Decoration.set(
-          [CM.Decoration.widget({widget: new AiCodeCompletionTeaserPlaceholder(teaser), side: 1}).range(0)]);
-    }
-
-    declare update: () => void;
-
-    get decorations(): CM.DecorationSet {
-      return this.view.state.doc.length ? CM.Decoration.none : this.placeholder;
-    }
-  }, {decorations: v => v.decorations});
-  return plugin;
-}