chrome-devtools-frontend 1.0.1624409 → 1.0.1624583

package/.agents/skills/foundation-test-migration/SKILL.md

@@ -126,7 +126,7 @@ sinon.assert.calledOnceWithMatch(emulateSpy, {
 ### DOM Globals (`ReferenceError: FileReader is not defined`)
 Foundation tests run in Node.js where `window`, `FileReader`, and certain DOM string encodings don't exist.
 - **Fix**: Use isomorphic equivalents (e.g. `btoa()`, `Uint8Array`).
-- **Last Resort**: Skip the test with `it.skip()` if it explicitly tests browser quirks (e.g. legacy charset decoding).
+- **Fix**: Abstract the APIs that are different between Node.js and Browser via `front_end/core/platform/api/HostRuntime.ts`.
 
 ### Initialization Order Lockups
 If a test times out (5000ms exceeded), it is usually an unhandled promise caused by a missing singleton. Double-check the constructor of the failing manager to see which `instance()` it listens to, and ensure that dependent singleton was created *first*.

package/front_end/core/host/AidaClient.ts

@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 
 import * as Common from '../common/common.js';
+import * as Platform from '../platform/platform.js';
 import * as Root from '../root/root.js';
 
 import {
@@ -109,7 +110,7 @@ export class AidaClient {
   }
 
   static async checkAccessPreconditions(): Promise<AidaAccessPreconditions> {
-    if (!navigator.onLine) {
+    if (!Platform.HostRuntime.HOST_RUNTIME.getOnLine()) {
       return AidaAccessPreconditions.NO_INTERNET;
     }
 
@@ -437,7 +438,7 @@ export function getClientFeatureName(feature: ClientFeature): string {
 let hostConfigTrackerInstance: HostConfigTracker|undefined;
 
 export class HostConfigTracker extends Common.ObjectWrapper.ObjectWrapper<EventTypes> {
-  #pollTimer?: number;
+  #pollTimer?: ReturnType<typeof setTimeout>;
   #aidaAvailability?: AidaAccessPreconditions;
 
   private constructor() {
@@ -456,7 +457,7 @@ export class HostConfigTracker extends Common.ObjectWrapper.ObjectWrapper<EventT
     const isFirst = !this.hasEventListeners(eventType);
     const eventDescriptor = super.addEventListener(eventType, listener);
     if (isFirst) {
-      window.clearTimeout(this.#pollTimer);
+      clearTimeout(this.#pollTimer);
       void this.pollAidaAvailability();
     }
     return eventDescriptor;
@@ -466,12 +467,12 @@ export class HostConfigTracker extends Common.ObjectWrapper.ObjectWrapper<EventT
       void {
     super.removeEventListener(eventType, listener);
     if (!this.hasEventListeners(eventType)) {
-      window.clearTimeout(this.#pollTimer);
+      clearTimeout(this.#pollTimer);
     }
   }
 
   async pollAidaAvailability(): Promise<void> {
-    this.#pollTimer = window.setTimeout(() => this.pollAidaAvailability(), 2000);
+    this.#pollTimer = setTimeout(() => this.pollAidaAvailability(), 2000);
     const currentAidaAvailability = await AidaClient.checkAccessPreconditions();
     if (currentAidaAvailability !== this.#aidaAvailability) {
       this.#aidaAvailability = currentAidaAvailability;

package/front_end/core/host/AidaClientTypes.ts

@@ -2,6 +2,8 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import * as Platform from '../platform/platform.js';
+
 export enum Role {
   /** Provide this role when giving a function call response  */
   ROLE_UNSPECIFIED = 0,
@@ -466,7 +468,7 @@ export interface AidaChunkResponse {
 }
 
 export function debugLog(...log: unknown[]): void {
-  if (!Boolean(localStorage.getItem('debugAiServicesEnabled'))) {
+  if (!Boolean(Platform.HostRuntime.HOST_RUNTIME.getLocalStorage()?.getItem('debugAiServicesEnabled'))) {
     return;
   }
 

package/front_end/core/host/DispatchHttpRequestClient.ts

@@ -2,6 +2,8 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import * as Platform from '../platform/platform.js';
+
 import {InspectorFrontendHostInstance} from './InspectorFrontendHost.js';
 import type {DispatchHttpRequestRequest, DispatchHttpRequestResult} from './InspectorFrontendHostAPI.js';
 
@@ -56,7 +58,7 @@ export async function makeHttpRequest<R>(
 }
 
 function isDebugMode(): boolean {
-  return Boolean(localStorage.getItem('debugDispatchHttpRequestEnabled'));
+  return Boolean(Platform.HostRuntime.HOST_RUNTIME.getLocalStorage()?.getItem('debugDispatchHttpRequestEnabled'));
 }
 
 function debugLog(...log: unknown[]): void {
@@ -69,10 +71,11 @@ function debugLog(...log: unknown[]): void {
 }
 
 function setDebugDispatchHttpRequestEnabled(enabled: boolean): void {
+  const localStorage = Platform.HostRuntime.HOST_RUNTIME.getLocalStorage();
   if (enabled) {
-    localStorage.setItem('debugDispatchHttpRequestEnabled', 'true');
+    localStorage?.setItem('debugDispatchHttpRequestEnabled', 'true');
   } else {
-    localStorage.removeItem('debugDispatchHttpRequestEnabled');
+    localStorage?.removeItem('debugDispatchHttpRequestEnabled');
   }
 }
 

package/front_end/core/platform/api/HostRuntime.ts

@@ -9,6 +9,9 @@
 export interface HostRuntime {
   createWorker(url: string): Worker;
   workerScope: WorkerScope;
+  getOnLine(): boolean;
+  getUserAgent(): string;
+  getLocalStorage(): Storage|undefined;
 }
 
 /**

package/front_end/core/platform/browser/HostRuntime.ts

@@ -74,4 +74,14 @@ export const HOST_RUNTIME: Api.HostRuntime.HostRuntime = {
     return new WebWorker(url);
   },
   workerScope: new WebWorkerScope(),
+  getOnLine(): boolean {
+    return navigator.onLine;
+  },
+  getUserAgent(): string {
+    return navigator.userAgent;
+  },
+  getLocalStorage(): Storage |
+      undefined {
+        return 'localStorage' in globalThis ? globalThis.localStorage : undefined;
+      },
 };

package/front_end/core/platform/node/HostRuntime.ts

@@ -82,4 +82,14 @@ export const HOST_RUNTIME: Api.HostRuntime.HostRuntime = {
     return new NodeWorker(url);
   },
   workerScope: new NodeWorkerScope(),
+  getOnLine(): boolean {
+    return true;
+  },
+  getUserAgent(): string {
+    return 'Node.js';
+  },
+  getLocalStorage(): Storage |
+      undefined {
+        return undefined;
+      },
 };

package/front_end/core/root/Runtime.ts

@@ -61,7 +61,8 @@ export function isNodeEntry(pathname: string): boolean {
 
 export const getChromeVersion = (): string => {
   const chromeRegex = /(?:^|\W)(?:Chrome|HeadlessChrome)\/(\S+)/;
-  const chromeMatch = globalObject.navigator?.userAgent?.match(chromeRegex);
+  const userAgent = Platform.HostRuntime.HOST_RUNTIME.getUserAgent();
+  const chromeMatch = userAgent.match(chromeRegex);
   if (chromeMatch && chromeMatch.length > 1) {
     return chromeMatch[1];
   }
@@ -317,12 +318,12 @@ class ExperimentStorage {
 
   constructor() {
     try {
-      const storedExperiments = globalObject.localStorage?.getItem('experiments');
+      const storedExperiments = Platform.HostRuntime.HOST_RUNTIME.getLocalStorage()?.getItem('experiments');
       if (storedExperiments) {
         this.#experiments = JSON.parse(storedExperiments);
       }
-    } catch {
-      console.error('Failed to parse localStorage[\'experiments\']');
+    } catch (err) {
+      console.error('Failed to parse localStorage[\'experiments\']: ' + err.message);
     }
   }
 
@@ -351,7 +352,7 @@ class ExperimentStorage {
   }
 
   #syncToLocalStorage(): void {
-    globalObject.localStorage?.setItem('experiments', JSON.stringify(this.#experiments));
+    Platform.HostRuntime.HOST_RUNTIME.getLocalStorage()?.setItem('experiments', JSON.stringify(this.#experiments));
   }
 }
 

package/front_end/models/ai_code_completion/AiCodeCompletion.ts

@@ -14,7 +14,6 @@ import {debugLog} from './debug.js';
 interface AgentOptions {
   aidaClient: Host.AidaClient.AidaClient;
   serverSideLoggingEnabled?: boolean;
-  confirmSideEffectForTest?: typeof Promise.withResolvers;
 }
 
 interface RequestOptions {
@@ -274,7 +273,7 @@ export class AiCodeCompletion {
 
     void this.#aidaClient.registerClientEvent({
       corresponding_aida_rpc_global_id: rpcGlobalId,
-      disable_user_content_logging: true,
+      disable_user_content_logging: !(this.#serverSideLoggingEnabled ?? false),
       complete_code_client_event: {
         user_impression: {
           sample: {
@@ -296,7 +295,7 @@ export class AiCodeCompletion {
   registerUserAcceptance(rpcGlobalId: Host.AidaClient.RpcGlobalId, sampleId?: number): void {
     void this.#aidaClient.registerClientEvent({
       corresponding_aida_rpc_global_id: rpcGlobalId,
-      disable_user_content_logging: true,
+      disable_user_content_logging: !(this.#serverSideLoggingEnabled ?? false),
       complete_code_client_event: {
         user_acceptance: {
           sample: {

package/front_end/models/ai_code_generation/AiCodeGeneration.ts

@@ -39,7 +39,6 @@ The console has direct access to the inspected page's \`window\` and \`document\
 interface Options {
   aidaClient: Host.AidaClient.AidaClient;
   serverSideLoggingEnabled?: boolean;
-  confirmSideEffectForTest?: typeof Promise.withResolvers;
 }
 
 interface RequestOptions {
@@ -124,7 +123,7 @@ export class AiCodeGeneration {
 
     void this.#aidaClient.registerClientEvent({
       corresponding_aida_rpc_global_id: rpcGlobalId,
-      disable_user_content_logging: true,
+      disable_user_content_logging: !(this.#serverSideLoggingEnabled ?? false),
       generate_code_client_event: {
         user_impression: {
           sample: {
@@ -146,7 +145,7 @@ export class AiCodeGeneration {
   registerUserAcceptance(rpcGlobalId: Host.AidaClient.RpcGlobalId, sampleId?: number): void {
     void this.#aidaClient.registerClientEvent({
       corresponding_aida_rpc_global_id: rpcGlobalId,
-      disable_user_content_logging: true,
+      disable_user_content_logging: !(this.#serverSideLoggingEnabled ?? false),
       generate_code_client_event: {
         user_acceptance: {
           sample: {

package/front_end/panels/ai_assistance/AiAssistancePanel.ts

@@ -531,7 +531,7 @@ function defaultView(input: ViewInput, output: PanelViewOutput, target: HTMLElem
     let walkthroughIsForLastMessage = false;
     if(input.state === ViewState.CHAT_VIEW) {
       const lastMessage = input.props.messages.at(-1);
-      if(lastMessage && input.props.walkthrough.activeSidebarMessage === lastMessage) {
+      if(lastMessage && input.props.walkthrough.activeSidebarMessage?.id === lastMessage.id) {
         walkthroughIsForLastMessage = true;
       }
     }
@@ -879,7 +879,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
   }
 
   #openWalkthrough(message: ModelChatMessage): void {
-    if (!this.#walkthrough.inlineExpandedMessages.includes(message)) {
+    if (!this.#walkthrough.inlineExpandedMessages.some(m => m.id === message.id)) {
       this.#walkthrough.inlineExpandedMessages.push(message);
     }
     this.#walkthrough.activeSidebarMessage = message;
@@ -905,7 +905,8 @@ export class AiAssistancePanel extends UI.Panel.Panel {
     }
 
     // If we are closing a walkthrough, remove it from the list of expanded messages.
-    this.#walkthrough.inlineExpandedMessages = this.#walkthrough.inlineExpandedMessages.filter(m => m !== message);
+    this.#walkthrough.inlineExpandedMessages =
+        this.#walkthrough.inlineExpandedMessages.filter(m => m.id !== message.id);
 
     if (this.#walkthrough.isInlined) {
       // In Narrow mode, the global expanded state tracks if at least one walkthrough is open.
@@ -913,7 +914,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
       // If the message we just closed was the active one, we pick a new active message
       // from the remaining open ones (if any). This ensures that if the user
       // re-opens the sidebar later, it shows the most recently opened walkthrough.
-      if (this.#walkthrough.activeSidebarMessage === message) {
+      if (this.#walkthrough.activeSidebarMessage?.id === message.id) {
         this.#walkthrough.activeSidebarMessage = this.#walkthrough.inlineExpandedMessages.at(-1) ?? null;
       }
     } else {
@@ -1857,6 +1858,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
       let systemMessage: ModelChatMessage = {
         entity: ChatMessageEntity.MODEL,
         parts: [],
+        id: crypto.randomUUID(),
       };
       let step: Step = {isLoading: true};
 
@@ -1885,10 +1887,12 @@ export class AiAssistancePanel extends UI.Panel.Panel {
               entity: ChatMessageEntity.USER,
               text: data.query,
               imageInput: data.imageInput,
+              id: crypto.randomUUID(),
             });
             systemMessage = {
               entity: ChatMessageEntity.MODEL,
               parts: [],
+              id: crypto.randomUUID(),
             };
             this.#messages.push(systemMessage);
             // If the walkthrough is currently expanded in the sidebar, we want to

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

@@ -435,6 +435,7 @@ export interface UserChatMessage {
   entity: ChatMessageEntity.USER;
   text: string;
   imageInput?: Host.AidaClient.Part;
+  id: string;
 }
 
 export interface ModelChatMessage {
@@ -442,6 +443,7 @@ export interface ModelChatMessage {
   parts: ModelMessagePart[];
   error?: AiAssistanceModel.AiAgent.ErrorType;
   rpcId?: Host.AidaClient.RpcGlobalId;
+  id: string;
 }
 
 export type Message = UserChatMessage|ModelChatMessage;
@@ -740,7 +742,7 @@ function renderWalkthroughSidebarButton(
   }
 
   const hasOneStepWithWidget = steps.some(step => step.widgets?.length);
-  const isExpanded = walkthrough.isExpanded && input.message === input.walkthrough.activeSidebarMessage;
+  const isExpanded = walkthrough.isExpanded && input.message.id === input.walkthrough.activeSidebarMessage?.id;
   const title = isExpanded ? walkthroughCloseTitle({hasWidgets: hasOneStepWithWidget}) : walkthroughTitle({
     isLoading: input.isLoading,
     hasWidgets: hasOneStepWithWidget,
@@ -781,7 +783,7 @@ function renderWalkthroughSidebarButton(
         .jslogContext=${walkthrough.isExpanded ? 'ai-hide-walkthrough-sidebar' : 'ai-show-walkthrough-sidebar'}
         data-show-walkthrough
         @click=${() => {
-          if(walkthrough.activeSidebarMessage === input.message && walkthrough.isExpanded) {
+          if(walkthrough.activeSidebarMessage?.id === input.message.id && walkthrough.isExpanded) {
             walkthrough.onToggle(false, message as ModelChatMessage);
           } else {
             // Can't just toggle the visibility here; we need to ensure we
@@ -816,8 +818,8 @@ function renderWalkthroughUI(input: ChatMessageViewInput, steps: Step[]): Lit.Li
   // open and it is specifically targeting this message. This is necessary
   // because the walkthrough state is shared across all messages in the chat.
   const isExpanded = input.walkthrough.isInlined ?
-      input.walkthrough.inlineExpandedMessages.includes(input.message as ModelChatMessage) :
-      (input.walkthrough.isExpanded && input.walkthrough.activeSidebarMessage === input.message);
+      input.walkthrough.inlineExpandedMessages.some(m => m.id === input.message.id) :
+      (input.walkthrough.isExpanded && input.walkthrough.activeSidebarMessage?.id === input.message.id);
 
   // clang-format off
   const walkthroughInline = input.walkthrough.isInlined ? html`
@@ -1775,7 +1777,7 @@ function renderActions(input: ChatMessageViewInput, output: ViewOutput): Lit.Lit
 }
 
 export class ChatMessage extends UI.Widget.Widget {
-  message: Message = {entity: ChatMessageEntity.USER, text: ''};
+  message: Message = {entity: ChatMessageEntity.USER, text: '', id: ''};
   isLoading = false;
   isReadOnly = false;
   prompt = '';

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

@@ -155,7 +155,7 @@ const DEFAULT_VIEW: View = (input, output, target) => {
         <main @scroll=${input.handleScroll} ${ref(element => { output.mainElement = element as HTMLElement; } )}>
           ${input.messages.length > 0 ? html`
             <div class="messages-container" ${ref(input.handleMessageContainerRef)}>
-              ${repeat(input.messages, (message, index) => {
+              ${repeat(input.messages, message => message.id, (message, index) => {
                 const prevMessage = index > 0 ? input.messages[index - 1] : null;
                 const prompt = (message.entity === ChatMessageEntity.MODEL && prevMessage?.entity === ChatMessageEntity.USER) ?
                     prevMessage.text :
@@ -169,7 +169,7 @@ const DEFAULT_VIEW: View = (input, output, target) => {
                   isLastMessage: index === input.messages.length - 1,
                   isFirstMessage: index === 0,
                   prompt,
-                  shouldShowCSSChangeSummary: message === cssChangeSummaryMessage,
+                  shouldShowCSSChangeSummary: message.id === cssChangeSummaryMessage?.id,
                   onSuggestionClick: input.handleSuggestionClick,
                   onFeedbackSubmit: input.onFeedbackSubmit,
                   onCopyResponseClick: input.onCopyResponseClick,

package/front_end/panels/elements/StylePropertyTreeElement.ts

@@ -3637,12 +3637,12 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
     }
     const isEditingName = UI.UIUtils.isBeingEdited(this.nameElement);
     if (isEditingName) {
-      this.prompt.applySuggestion({text: activeAiSuggestion.name}, true);
+      this.prompt.applySuggestion({text: activeAiSuggestion.name, disableAcceptSuggestionOnStopCharacters: true}, true);
       this.#showGhostTextInValue(activeAiSuggestion.value);
     } else {
       // Only has ghost text for one field - name part or value part
       const currentSuggestedText = isEditingName ? activeAiSuggestion.name : activeAiSuggestion.value;
-      this.prompt.applySuggestion({text: currentSuggestedText}, true);
+      this.prompt.applySuggestion({text: currentSuggestedText, disableAcceptSuggestionOnStopCharacters: true}, true);
     }
   }
 

package/front_end/panels/elements/StylesAiCodeCompletionProvider.ts

@@ -5,6 +5,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 * as Root from '../../core/root/root.js';
 import type * as SDK from '../../core/sdk/sdk.js';
 import * as AiCodeCompletion from '../../models/ai_code_completion/ai_code_completion.js';
 import * as TextUtils from '../../models/text_utils/text_utils.js';
@@ -61,7 +62,11 @@ export class StylesAiCodeCompletionProvider {
       stopSequences.push(...this.#aiCodeCompletionConfig.completionContext.stopSequences);
     }
     this.#aiCodeCompletion = new AiCodeCompletion.AiCodeCompletion.AiCodeCompletion(
-        {aidaClient: this.#aidaClient}, this.#aiCodeCompletionConfig.panel, undefined, stopSequences);
+        {
+          aidaClient: this.#aidaClient,
+          serverSideLoggingEnabled: !Root.Runtime.hostConfig.aidaAvailability?.disallowLogging
+        },
+        this.#aiCodeCompletionConfig.panel, undefined, stopSequences);
     this.#aiCodeCompletionConfig.onFeatureEnabled();
   }
 

package/front_end/panels/elements/StylesSidebarPane.ts

@@ -135,10 +135,16 @@ const UIStrings = {
    * @description Tooltip text for the link in the sidebar pane layer separators that reveals the layer in the layer tree view.
    */
   clickToRevealLayer: 'Click to reveal layer in layer tree',
+  /**
+   * @description Text to announce that the AI suggestion was accepted.
+   * @example {color: blue;} PH1
+   */
+  aiSuggestionAccepted: '{PH1} Suggestion accepted.',
 } as const;
 
 const str_ = i18n.i18n.registerUIStrings('panels/elements/StylesSidebarPane.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+const lockedString = i18n.i18n.lockedString;
 
 // Number of ms elapsed with no keypresses to determine is the input is finished, to announce results
 const FILTER_IDLE_PERIOD = 500;
@@ -2289,6 +2295,7 @@ export class CSSPropertyPrompt extends UI.TextPrompt.TextPrompt {
     if (args.rpcGlobalId) {
       args.onImpression(args.rpcGlobalId, latency, args.sampleId);
     }
+    UI.ARIAUtils.LiveAnnouncer.status(lockedString(styleText));
   }
 
   #getAiSuggestedProperties(suggestionText: string): ActiveAiSuggestionProperty[] {
@@ -2369,7 +2376,7 @@ export class CSSPropertyPrompt extends UI.TextPrompt.TextPrompt {
         // Explicitly set the query range as it is cleared during `acceptAutoComplete`
         this.queryRange = new TextUtils.TextRange.TextRange(0, 0, 0, textAfterAccept.length);
         // Re-apply the ghost text for the remainder
-        this.applySuggestion({text: suggestionForCurrentPrompt}, true);
+        this.applySuggestion({text: suggestionForCurrentPrompt, disableAcceptSuggestionOnStopCharacters: true}, true);
       }
       return true;
     }
@@ -2384,12 +2391,16 @@ export class CSSPropertyPrompt extends UI.TextPrompt.TextPrompt {
   }
 
   async commitAiSuggestion(): Promise<void> {
+    const suggestionText = this.treeElement.section().activeAiSuggestion?.text;
     await this.treeElement.section().commitActiveAiSuggestion();
     if (this.activeAiSuggestionInfo) {
       this.aiCodeCompletionProvider?.onSuggestionAccepted(
           this.activeAiSuggestionInfo.citations, this.activeAiSuggestionInfo.rpcGlobalId,
           this.activeAiSuggestionInfo.sampleId);
     }
+    if (suggestionText) {
+      UI.ARIAUtils.LiveAnnouncer.status(i18nString(UIStrings.aiSuggestionAccepted, {PH1: suggestionText}));
+    }
     // Clear state and return
     this.setAiAutoCompletion(null);
   }

package/front_end/panels/elements/stylePropertiesTreeOutline.css

@@ -89,7 +89,11 @@
   }
 
   &.ghost-row, .ghost-value-prediction {
-    opacity: 50%;
+    .webkit-css-property {
+      opacity: 50%;
+    }
+
+    color: var(--sys-color-token-subtle);
     font-style: italic;
     pointer-events: none;
   }

package/front_end/third_party/lighthouse/README.chromium

@@ -1,7 +1,7 @@
 Name: Lighthouse
 Short Name: lighthouse
-Version: 13.1.0
-Revision: 0248afea9c9443c9fddd73e705256e38e8c6e042
+Version: 13.2.0
+Revision: a160d341f363acf2d99314214a6e0de7d0fead1f
 Update Mechanism: Manual
 URL: https://github.com/GoogleChrome/lighthouse
 License: Apache-2.0