chrome-devtools-frontend 1.0.1574367 → 1.0.1575174

package/AUTHORS

@@ -64,6 +64,7 @@ Krishnal Ciccolella <ciccolella.krishnal@gmail.com>
 Liam DeBeasi <ldebeasi@gmail.com>
 Luke Swiderski <luke.swiderski@gmail.com>
 Luke Warlow <luke@warlow.dev>
+Lyra Rebane <rebane2001@gmail.com>
 Marijn Haverbeke <marijnh@gmail.com>
 Max 😎 Coplan <mchcopl@gmail.com>
 Michael Brüning <michael.bruning@qt.io>

package/docs/contributing/settings-experiments-features.md

@@ -12,6 +12,9 @@ Adding new DevTools experiments is deprecated, the preferred way for adding new
 features / exposing experimental features is via `base::Feature`s. These are
 controllable via Chromium command line parameters or optionally via `chrome://flags`.
 
+Note: We are currently in the process of migrating away from DevTools experiments,
+this documentation is partly outdated and will be updated ASAP.
+
 
 [TOC]
 
@@ -76,9 +79,9 @@ This step is optional. If you want the `base::Feature` to be controllable via th
 
 Please refer to this [example CL](https://crrev.com/c/5626314).
 
-## How to add experiments
+## DEPRECATED:How to add experiments
 
-Note: Adding new DevTools experiments is deprecated, please use a `base::Feature` instead.
+Note: We are currently in the process of migrating away from DevTools experiments, please use a `base::Feature` instead.
 
 If you want to launch a new feature in DevTools behind an experiment flag, you
 will need to do two things:

package/front_end/core/common/Settings.ts

@@ -343,7 +343,7 @@ export class SettingsStorage {
 export class Deprecation {
   readonly disabled: boolean;
   readonly warning: Platform.UIString.LocalizedString;
-  readonly experiment?: Root.Runtime.Experiment;
+  readonly experiment?: Root.Runtime.Experiment|Root.Runtime.HostExperiment;
 
   constructor({deprecationNotice}: SettingRegistration) {
     if (!deprecationNotice) {

package/front_end/core/host/InspectorFrontendHostAPI.ts

@@ -389,6 +389,8 @@ export interface InspectorFrontendHostAPI {
 
   recordPerformanceHistogram(histogramName: string, duration: number): void;
 
+  recordPerformanceHistogramMedium(histogramName: string, duration: number): void;
+
   recordUserMetricsAction(umaName: string): void;
 
   recordNewBadgeUsage(featureName: string): void;
@@ -449,6 +451,8 @@ export interface InspectorFrontendHostAPI {
   recordKeyDown(event: KeyDownEvent): void;
   recordSettingAccess(event: SettingAccessEvent): void;
   recordFunctionCall(event: FunctionCallEvent): void;
+
+  setChromeFlag(flagName: string, value: boolean): void;
 }
 
 export interface AcceleratorDescriptor {
@@ -512,7 +516,7 @@ export interface SyncInformation {
 }
 
 /**
- * Enum for recordPerformanceHistogram
+ * Enum for recordEnumeratedHistogram
  * Warning: There is another definition of this enum in the DevTools code
  * base, keep them in sync:
  * front_end/devtools_compatibility.js

package/front_end/core/host/InspectorFrontendHostStub.ts

@@ -255,6 +255,13 @@ export class InspectorFrontendHostStub implements InspectorFrontendHostAPI {
     this.recordedPerformanceHistograms.push({histogramName, duration});
   }
 
+  recordPerformanceHistogramMedium(histogramName: string, duration: number): void {
+    if (this.recordedPerformanceHistograms.length >= MAX_RECORDED_HISTOGRAMS_SIZE) {
+      this.recordedPerformanceHistograms.shift();
+    }
+    this.recordedPerformanceHistograms.push({histogramName, duration});
+  }
+
   recordUserMetricsAction(_umaName: string): void {
   }
 
@@ -555,4 +562,7 @@ export class InspectorFrontendHostStub implements InspectorFrontendHostAPI {
   }
   recordFunctionCall(_event: FunctionCallEvent): void {
   }
+
+  setChromeFlag(_flagName: string, _value: boolean): void {
+  }
 }

package/front_end/core/host/UserMetrics.ts

@@ -283,11 +283,26 @@ export class UserMetrics {
         'DevTools.Insights.TeaserGenerationTime', timeInMilliseconds);
   }
 
+  consoleInsightTeaserGeneratedMedium(timeInMilliseconds: number): void {
+    InspectorFrontendHostInstance.recordPerformanceHistogramMedium(
+        'DevTools.Insights.TeaserGenerationTimeMedium', timeInMilliseconds);
+  }
+
   consoleInsightTeaserFirstChunkGenerated(timeInMilliseconds: number): void {
     InspectorFrontendHostInstance.recordPerformanceHistogram(
         'DevTools.Insights.TeaserFirstChunkGenerationTime', timeInMilliseconds);
   }
 
+  consoleInsightTeaserFirstChunkGeneratedMedium(timeInMilliseconds: number): void {
+    InspectorFrontendHostInstance.recordPerformanceHistogramMedium(
+        'DevTools.Insights.TeaserFirstChunkGenerationTimeMedium', timeInMilliseconds);
+  }
+
+  consoleInsightTeaserChunkToEndMedium(timeInMilliseconds: number): void {
+    InspectorFrontendHostInstance.recordPerformanceHistogramMedium(
+        'DevTools.Insights.TeaserChunkToEndMedium', timeInMilliseconds);
+  }
+
   consoleInsightTeaserAbortedAfterFirstCharacter(timeInMilliseconds: number): void {
     InspectorFrontendHostInstance.recordPerformanceHistogram(
         'DevTools.Insights.TeaserAfterFirstCharacterAbortionTime', timeInMilliseconds);

package/front_end/core/root/Runtime.ts

@@ -159,24 +159,35 @@ export interface Option {
 
 export class ExperimentsSupport {
   #experiments: Experiment[] = [];
+  #hostExperiments = new Map<ExperimentName, HostExperiment>();
   readonly #experimentNames = new Set<ExperimentName>();
-  readonly #enabledTransiently = new Set<ExperimentName>();
+  readonly #enabledForTests = new Set<ExperimentName>();
   readonly #enabledByDefault = new Set<ExperimentName>();
   readonly #serverEnabled = new Set<ExperimentName>();
   readonly #storage = new ExperimentStorage();
 
-  allConfigurableExperiments(): Experiment[] {
-    const result = [];
-    for (const experiment of this.#experiments) {
-      if (!this.#enabledTransiently.has(experiment.name)) {
-        result.push(experiment);
-      }
+  allConfigurableExperiments(): Array<Experiment|HostExperiment> {
+    return [...this.#experiments, ...this.#hostExperiments.values()];
+  }
+
+  registerHostExperiment(params: {
+    name: ExperimentName,
+    title: string,
+    aboutFlag: string,
+    isEnabled: boolean,
+    docLink?: Platform.DevToolsPath.UrlString,
+    readonly feedbackLink?: Platform.DevToolsPath.UrlString,
+  }): HostExperiment {
+    if (this.#isHostExperiment(params.name) || this.#isExperiment(params.name)) {
+      throw new Error(`Duplicate registration of experiment '${params.name}'`);
     }
-    return result;
+    const hostExperiment = new HostExperiment({...params, experiments: this});
+    this.#hostExperiments.set(params.name, hostExperiment);
+    return hostExperiment;
   }
 
   register(experimentName: ExperimentName, experimentTitle: string, docLink?: string, feedbackLink?: string): void {
-    if (this.#experimentNames.has(experimentName)) {
+    if (this.#isHostExperiment(experimentName) || this.#isExperiment(experimentName)) {
       throw new Error(`Duplicate registration of experiment '${experimentName}'`);
     }
     this.#experimentNames.add(experimentName);
@@ -187,63 +198,87 @@ export class ExperimentsSupport {
   }
 
   isEnabled(experimentName: ExperimentName): boolean {
-    this.checkExperiment(experimentName);
-    // Check for explicitly disabled #experiments first - the code could call setEnable(false) on the experiment enabled
-    // by default and we should respect that.
-    if (this.#storage.get(experimentName) === false) {
-      return false;
+    if (this.#isHostExperiment(experimentName)) {
+      return this.#enabledForTests.has(experimentName) ||
+          (this.#hostExperiments.get(experimentName)?.isEnabled() ?? false);
     }
-    if (this.#enabledTransiently.has(experimentName) || this.#enabledByDefault.has(experimentName)) {
-      return true;
-    }
-    if (this.#serverEnabled.has(experimentName)) {
-      return true;
+    if (this.#isExperiment(experimentName)) {
+      // Check for explicitly disabled #experiments first - the code could call setEnable(false)
+      // on the experiment enabled by default and we should respect that.
+      if (this.#storage.get(experimentName) === false) {
+        return false;
+      }
+      if (this.#enabledForTests.has(experimentName) || this.#enabledByDefault.has(experimentName)) {
+        return true;
+      }
+      if (this.#serverEnabled.has(experimentName)) {
+        return true;
+      }
+      return Boolean(this.#storage.get(experimentName));
     }
-
-    return Boolean(this.#storage.get(experimentName));
+    throw new Error(`Unknown experiment '${experimentName}'`);
   }
 
-  setEnabled(experimentName: ExperimentName, enabled: boolean): void {
-    this.checkExperiment(experimentName);
-    this.#storage.set(experimentName, enabled);
+  getValueFromStorage(experimentName: ExperimentName): boolean|undefined {
+    return this.#storage.get(experimentName);
   }
 
-  enableExperimentsTransiently(experimentNames: ExperimentName[]): void {
-    for (const experimentName of experimentNames) {
-      this.checkExperiment(experimentName);
-      this.#enabledTransiently.add(experimentName);
+  setEnabled(experimentName: ExperimentName, enabled: boolean): void {
+    if (this.#isHostExperiment(experimentName)) {
+      this.#hostExperiments.get(experimentName)?.setEnabled(enabled);
+      return;
+    }
+    if (this.#isExperiment(experimentName)) {
+      this.#storage.set(experimentName, enabled);
+      return;
     }
+    throw new Error(`Unknown experiment '${experimentName}'`);
   }
 
+  // Only applicable to legacy experiments.
   enableExperimentsByDefault(experimentNames: ExperimentName[]): void {
     for (const experimentName of experimentNames) {
-      this.checkExperiment(experimentName);
+      if (!this.#isExperiment(experimentName)) {
+        throw new Error(`Unknown (legacy) experiment '${experimentName}'`);
+      }
       this.#enabledByDefault.add(experimentName);
     }
   }
 
+  // Only applicable to legacy experiments.
   setServerEnabledExperiments(experiments: string[]): void {
     for (const experiment of experiments) {
       const experimentName = experiment as ExperimentName;
-      this.checkExperiment(experimentName);
+      if (!this.#isExperiment(experimentName)) {
+        throw new Error(`Unknown (legacy) experiment '${experimentName}'`);
+      }
       this.#serverEnabled.add(experimentName);
     }
   }
 
   enableForTest(experimentName: ExperimentName): void {
-    this.checkExperiment(experimentName);
-    this.#enabledTransiently.add(experimentName);
+    if (!this.#isHostExperiment(experimentName) && !this.#isExperiment(experimentName)) {
+      throw new Error(`Unknown experiment '${experimentName}'`);
+    }
+    this.#enabledForTests.add(experimentName);
   }
 
   disableForTest(experimentName: ExperimentName): void {
-    this.checkExperiment(experimentName);
-    this.#enabledTransiently.delete(experimentName);
+    if (!this.#isHostExperiment(experimentName) && !this.#isExperiment(experimentName)) {
+      throw new Error(`Unknown experiment '${experimentName}'`);
+    }
+    this.#enabledForTests.delete(experimentName);
+  }
+
+  isEnabledForTest(experimentName: ExperimentName): boolean {
+    return this.#enabledForTests.has(experimentName);
   }
 
   clearForTest(): void {
     this.#experiments = [];
+    this.#hostExperiments.clear();
     this.#experimentNames.clear();
-    this.#enabledTransiently.clear();
+    this.#enabledForTests.clear();
     this.#enabledByDefault.clear();
     this.#serverEnabled.clear();
   }
@@ -252,10 +287,12 @@ export class ExperimentsSupport {
     this.#storage.cleanUpStaleExperiments(this.#experimentNames);
   }
 
-  private checkExperiment(experimentName: ExperimentName): void {
-    if (!this.#experimentNames.has(experimentName)) {
-      throw new Error(`Unknown experiment '${experimentName}'`);
-    }
+  #isHostExperiment(experimentName: ExperimentName): boolean {
+    return this.#hostExperiments.has(experimentName);
+  }
+
+  #isExperiment(experimentName: ExperimentName): boolean {
+    return this.#experimentNames.has(experimentName);
   }
 }
 
@@ -332,6 +369,44 @@ export class Experiment {
   }
 }
 
+export class HostExperiment {
+  name: ExperimentName;
+  title: string;
+  readonly #experiments: ExperimentsSupport;
+  // This is the name of the corresponding Chromium flag (in chrome/browser/about_flags.cc).
+  // It is NOT the the name of the corresponding Chromium `base::Feature`.
+  aboutFlag: string;
+  #isEnabled: boolean;
+  docLink?: Platform.DevToolsPath.UrlString;
+  readonly feedbackLink?: Platform.DevToolsPath.UrlString;
+
+  constructor(params: {
+    name: ExperimentName,
+    title: string,
+    experiments: ExperimentsSupport,
+    aboutFlag: string,
+    isEnabled: boolean,
+    docLink?: Platform.DevToolsPath.UrlString,
+    feedbackLink?: Platform.DevToolsPath.UrlString,
+  }) {
+    this.name = params.name;
+    this.title = params.title;
+    this.#experiments = params.experiments;
+    this.aboutFlag = params.aboutFlag;
+    this.#isEnabled = params.isEnabled;
+    this.docLink = params.docLink;
+    this.feedbackLink = params.feedbackLink;
+  }
+
+  isEnabled(): boolean {
+    return this.#experiments.isEnabledForTest(this.name) || this.#isEnabled;
+  }
+
+  setEnabled(enabled: boolean): void {
+    this.#isEnabled = enabled;
+  }
+}
+
 /** This must be constructed after the query parameters have been parsed. **/
 export const experiments = new ExperimentsSupport();
 
@@ -524,6 +599,10 @@ interface ConsoleInsightsTeasers {
   allowWithoutGpu: boolean;
 }
 
+interface DevToolsProtocolMonitor {
+  enabled: boolean;
+}
+
 /**
  * The host configuration that we expect from the DevTools back-end.
  *
@@ -575,6 +654,7 @@ export type HostConfig = Platform.TypeScriptUtilities.RecursivePartial<{
   devToolsAiAssistanceContextSelectionAgent: HostConfigAiAssistanceContextSelectionAgent,
   devToolsConsoleInsightsTeasers: ConsoleInsightsTeasers,
   devToolsGeminiRebranding: HostConfigGeminiRebranding,
+  devToolsProtocolMonitor: DevToolsProtocolMonitor,
 }>;
 
 /**

package/front_end/entrypoints/main/MainImpl.ts

@@ -328,6 +328,19 @@ export class MainImpl {
     return {syncedStorage, globalStorage, localStorage};
   }
 
+  // eslint-disable-next-line no-unused-private-class-members
+  #migrateValueFromLegacyToHostExperiment(
+      legacyExperimentName: Root.ExperimentNames.ExperimentName, hostExperiment: Root.Runtime.HostExperiment): void {
+    const value = Root.Runtime.experiments.getValueFromStorage(legacyExperimentName);
+    if (value !== undefined && hostExperiment.aboutFlag) {
+      // Set the host experiment to the same value as the legacy experiment.
+      hostExperiment.setEnabled(value);
+      // Set the chrome flag to the same value as the legacy experiment.
+      Host.InspectorFrontendHost.InspectorFrontendHostInstance.setChromeFlag(hostExperiment.aboutFlag, value);
+      // The legacy experiment will be cleaned up by `cleanUpStaleExperiments`.
+    }
+  }
+
   #initializeExperiments(): void {
     Root.Runtime.experiments.register(
         Root.ExperimentNames.ExperimentName.CAPTURE_NODE_CREATION_STACKS, 'Capture node creation stacks');
@@ -413,7 +426,6 @@ export class MainImpl {
     if (enabledExperiments) {
       Root.Runtime.experiments.setServerEnabledExperiments(enabledExperiments.split(';'));
     }
-    Root.Runtime.experiments.enableExperimentsTransiently([]);
 
     if (Host.InspectorFrontendHost.isUnderTest()) {
       const testParam = Root.Runtime.Runtime.queryParam('test');

package/front_end/models/ai_assistance/agents/StylingAgent.snapshot.txt

@@ -57,7 +57,7 @@ Content:
   "function_declarations": [
     {
       "name": "getStyles",
-      "description": "Get computed and source styles for one or multiple elements on the inspected page for multiple elements at once by uid.\n\n**CRITICAL** Use selectors to refer to elements in the text output. Do not use uids.\n**CRITICAL** Always provide the explanation argument to explain what and why you query.",
+      "description": "Get computed and source styles for one or multiple elements on the inspected page for multiple elements at once by uid.\n\n**CRITICAL** An element uid is a number, not a selector.\n**CRITICAL** Use selectors to refer to elements in the text output. Do not use uids.\n**CRITICAL** Always provide the explanation argument to explain what and why you query.",
       "parameters": {
         "type": 6,
         "description": "",
@@ -70,9 +70,9 @@ Content:
           },
           "elements": {
             "type": 5,
-            "description": "A list of element uids to get data for",
+            "description": "A list of element uids to get data for. These are numbers, not selectors.",
             "items": {
-              "type": 1,
+              "type": 3,
               "description": "An element uid."
             },
             "nullable": false

package/front_end/models/ai_assistance/agents/StylingAgent.ts

@@ -279,13 +279,14 @@ export class StylingAgent extends AiAgent<SDK.DOMModel.DOMNode> {
                                  });
 
     this.declareFunction<{
-      elements: string[],
+      elements: number[],
       styleProperties: string[],
       explanation: string,
     }>('getStyles', {
       description:
           `Get computed and source styles for one or multiple elements on the inspected page for multiple elements at once by uid.
 
+**CRITICAL** An element uid is a number, not a selector.
 **CRITICAL** Use selectors to refer to elements in the text output. Do not use uids.
 **CRITICAL** Always provide the explanation argument to explain what and why you query.`,
       parameters: {
@@ -300,8 +301,8 @@ export class StylingAgent extends AiAgent<SDK.DOMModel.DOMNode> {
           },
           elements: {
             type: Host.AidaClient.ParametersTypes.ARRAY,
-            description: 'A list of element uids to get data for',
-            items: {type: Host.AidaClient.ParametersTypes.STRING, description: `An element uid.`},
+            description: 'A list of element uids to get data for. These are numbers, not selectors.',
+            items: {type: Host.AidaClient.ParametersTypes.INTEGER, description: `An element uid.`},
             nullable: false,
           },
           styleProperties: {
@@ -605,7 +606,7 @@ const data = {
     return this.context?.getItem() ?? null;
   }
 
-  async getStyles(elements: string[], properties: string[]): Promise<FunctionCallHandlerResult<unknown>> {
+  async getStyles(elements: number[], properties: string[]): Promise<FunctionCallHandlerResult<unknown>> {
     const result:
         Record<string, {computed: Record<string, string|undefined>, authored: Record<string, string|undefined>}> = {};
     for (const uid of elements) {

package/front_end/models/issues_manager/CorsIssue.ts

@@ -94,9 +94,6 @@ function getIssueCode(details: Protocol.Audits.CorsIssueDetails): IssueCode {
     case Protocol.Network.CorsError.LocalNetworkAccessPermissionDenied:
       return IssueCode.LOCAL_NETWORK_ACCESS_PERMISSION_DENIED;
   }
-  // TODO(b/394636065): Remove this once browser protocol has rolled, as we
-  // will never hit this case.
-  return null as unknown as IssueCode;
 }
 
 export class CorsIssue extends Issue<Protocol.Audits.CorsIssueDetails, IssueCode> {

package/front_end/models/stack_trace/StackTrace.ts

@@ -62,3 +62,43 @@ export const enum Events {
 export interface EventTypes {
   [Events.UPDATED]: void;
 }
+
+/**
+ * A small wrapper around a DebuggableFrame usable as a UI.Context flavor.
+ * This is necessary as Frame and DebuggableFrame are updated in place, but
+ * for UI.Context we need a new instance.
+ */
+export class DebuggableFrameFlavor implements DebuggableFrame {
+  static #last?: DebuggableFrameFlavor;
+
+  readonly url?: string;
+  readonly uiSourceCode?: Workspace.UISourceCode.UISourceCode;
+  readonly name?: string;
+  readonly line: number;
+  readonly column: number;
+  readonly missingDebugInfo?: MissingDebugInfo;
+  readonly sdkFrame: SDK.DebuggerModel.CallFrame;
+
+  private constructor(frame: DebuggableFrame) {
+    this.url = frame.url;
+    this.uiSourceCode = frame.uiSourceCode;
+    this.name = frame.name;
+    this.line = frame.line;
+    this.column = frame.column;
+    this.missingDebugInfo = frame.missingDebugInfo;
+    this.sdkFrame = frame.sdkFrame;
+  }
+
+  /** @returns the same instance of DebuggableFrameFlavor for repeated calls with the same (i.e. deep equal) DebuggableFrame */
+  static for(frame: DebuggableFrame): DebuggableFrameFlavor {
+    function equals(a: DebuggableFrame, b: DebuggableFrame): boolean {
+      return a.url === b.url && a.uiSourceCode === b.uiSourceCode && a.name === b.name && a.line === b.line &&
+          a.column === b.column && a.sdkFrame === b.sdkFrame;
+    }
+
+    if (!DebuggableFrameFlavor.#last || !equals(DebuggableFrameFlavor.#last, frame)) {
+      DebuggableFrameFlavor.#last = new DebuggableFrameFlavor(frame);
+    }
+    return DebuggableFrameFlavor.#last;
+  }
+}

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

@@ -135,6 +135,8 @@ export interface ViewInput {
   onRemoveImageInput: () => void;
   onImageUpload: (ev: Event) => void;
   onImagePaste: (event: ClipboardEvent) => void;
+  onImageDragOver: (event: DragEvent) => void;
+  onImageDrop: (event: DragEvent) => void;
 }
 
 export type ViewOutput = undefined;
@@ -289,6 +291,8 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
               maxlength="10000"
               @keydown=${input.onTextAreaKeyDown}
               @paste=${input.onImagePaste}
+              @dragover=${input.onImageDragOver}
+              @drop=${input.onImageDrop}
               @input=${(event: KeyboardEvent) => {
                 input.onTextInputChange((event.target as HTMLInputElement).value);
               }}
@@ -550,12 +554,12 @@ export class ChatInput extends UI.Widget.Widget implements SDK.TargetManager.Obs
     });
   }
 
-  #handleImagePaste = (event: ClipboardEvent): void => {
+  #handleImageDataTransferEvent(dataTransfer: DataTransfer|null, event: Event): void {
     if (this.conversationType !== AiAssistanceModel.AiHistoryStorage.ConversationType.STYLING) {
       return;
     }
 
-    const files = event.clipboardData?.files;
+    const files = dataTransfer?.files;
     if (!files || files.length === 0) {
       return;
     }
@@ -567,6 +571,22 @@ export class ChatInput extends UI.Widget.Widget implements SDK.TargetManager.Obs
 
     event.preventDefault();
     void this.#handleLoadImage(imageFile);
+  }
+
+  #handleImagePaste = (event: ClipboardEvent): void => {
+    this.#handleImageDataTransferEvent(event.clipboardData, event);
+  };
+
+  #handleImageDragOver = (event: DragEvent): void => {
+    if (this.conversationType !== AiAssistanceModel.AiHistoryStorage.ConversationType.STYLING) {
+      return;
+    }
+
+    event.preventDefault();
+  };
+
+  #handleImageDrop = (event: DragEvent): void => {
+    this.#handleImageDataTransferEvent(event.dataTransfer, event);
   };
 
   async #handleLoadImage(file: File): Promise<void> {
@@ -663,6 +683,8 @@ export class ChatInput extends UI.Widget.Widget implements SDK.TargetManager.Obs
           onTextAreaKeyDown: this.onTextAreaKeyDown,
           onCancel: this.onCancel,
           onImageUpload: this.onImageUpload,
+          onImageDragOver: this.#handleImageDragOver,
+          onImageDrop: this.#handleImageDrop,
         },
         undefined, this.contentElement);
   }

package/front_end/panels/common/AiCodeGenerationUpgradeDialog.ts

@@ -19,33 +19,43 @@ const UIStringsNotTranslate = {
    */
   codeCompletionJustGotBetter: 'Code completion just got better',
   /**
-   * @description First item in the description
-   */
-  asYouType: 'As you type, DevTools generates code suggestions to help you code faster.',
-  /**
-   * @description Second item in the description
+   * @description First item in the description.
    */
   describeCodeInComment:
-      'In Console and Sources, you can now describe the code you need in a comment, then press Ctrl+I to generate it.',
+      'Pressing Ctrl+I on a comment in the Console and Sources panels now generates entire code blocks based on the instructions in the comment.',
   /**
-   * @description Second item in the description
+   * @description First item in the description.
    */
   describeCodeInCommentForMacOs:
-      'In Console and Sources, you can now describe the code you need in a comment, then press Cmd+I to generate it.',
+      'Pressing Cmd+I on a comment in the Console and Sources panels now generates entire code blocks based on the instructions in the comment.',
+  /**
+   * @description Second item in the description.
+   */
+  asYouType: 'You will still receive the real-time, as-you-type suggestions to help you code faster.',
+  /**
+   * @description Third item in the description.
+   */
+  disclaimerTextPrivacy:
+      'To generate code suggestions, your console input, the history of your current console session, the currently inspected CSS, and the contents of the currently open file are shared with Google. This data may be seen by human reviewers to improve this feature.',
+  /**
+   * @description Third item in the description.
+   */
+  disclaimerTextPrivacyNoLogging:
+      'To generate code suggestions, your console input, the history of your current console session, the currently inspected CSS, and the contents of the currently open file are shared with Google. This data will not be used to improve Google’s AI models. Your organization may change these settings at any time.',
   /**
    * @description Text for the manage in settings button in the upgrade notice dialog.
    */
   manageInSettings: 'Manage in settings',
   /**
-   * @description Text for the got it button in the upgrade notice dialog.
+   * @description Text for the generate code button in the upgrade notice dialog.
    */
-  gotIt: 'Got it',
+  generateCode: 'Generate code',
 } as const;
 
 const lockedString = i18n.i18n.lockedString;
 
 export class AiCodeGenerationUpgradeDialog {
-  static show(): void {
+  static show({noLogging}: {noLogging: boolean}): void {
     const dialog = new UI.Dialog.Dialog();
     dialog.setAriaLabel(lockedString(UIStringsNotTranslate.codeCompletionJustGotBetter));
     // clang-format off
@@ -63,10 +73,6 @@ export class AiCodeGenerationUpgradeDialog {
           </h2>
         </header>
         <main class="reminder-container">
-          <div class="reminder-item">
-            <devtools-icon class="reminder-icon" name="code"></devtools-icon>
-            <span>${lockedString(UIStringsNotTranslate.asYouType)}</span>
-          </div>
           <div class="reminder-item">
             <devtools-icon class="reminder-icon" name="text-analysis"></devtools-icon>
             <span>
@@ -75,6 +81,16 @@ export class AiCodeGenerationUpgradeDialog {
                   lockedString(UIStringsNotTranslate.describeCodeInComment)}
             </span>
           </div>
+          <div class="reminder-item">
+            <devtools-icon class="reminder-icon" name="code"></devtools-icon>
+            <span>${lockedString(UIStringsNotTranslate.asYouType)}</span>
+          </div>
+          <div class="reminder-item">
+            <devtools-icon class="reminder-icon" name="google"></devtools-icon>
+            <span>${noLogging ? lockedString(UIStringsNotTranslate.disclaimerTextPrivacyNoLogging) :
+                                lockedString(UIStringsNotTranslate.disclaimerTextPrivacy)}
+            </span>
+          </div>
         </main>
         <footer>
           <div class="right-buttons">
@@ -93,7 +109,7 @@ export class AiCodeGenerationUpgradeDialog {
                 }}
               jslogcontext="ai-code-generation-upgrade-dialog.continue"
               .variant=${Buttons.Button.Variant.PRIMARY}>
-              ${lockedString(UIStringsNotTranslate.gotIt)}
+              ${lockedString(UIStringsNotTranslate.generateCode)}
             </devtools-button>
           </div>
         </footer>

package/front_end/panels/console/ConsoleFormat.ts

@@ -199,11 +199,34 @@ export const format = (fmt: string, args: SDK.RemoteObject.RemoteObject[]): {
   return {tokens, args: args.slice(argIndex)};
 };
 
+/**
+ * This function converts a string into a partial regex string that
+ * case-insensitively matches it in CSS, even if CSS escapes are used.
+ *
+ * @param cssString the target string.
+ * @returns a partial regex matching the string in CSS.
+ */
+const cssEscapeRegex = (cssString: string): string => {
+  return [...cssString]
+      .map(char => {
+        const charCodes = new Set([char.toLowerCase(), char.toUpperCase()].map(c => c.charCodeAt(0).toString(16)));
+        const charCodeRegex =
+            [...charCodes].map(charCode => `\\\\0{0,${6 - charCode.length}}${charCode}[ \\n\\t]?`).join('|');
+        return `\\\\?(?:${charCodeRegex}|${char})`;
+      })
+      .join('');
+};
+
 export const updateStyle = (currentStyle: Map<string, {value: string, priority: string}>, styleToAdd: string): void => {
   const ALLOWED_PROPERTY_PREFIXES = ['background', 'border', 'color', 'font', 'line', 'margin', 'padding', 'text'];
   // We only allow data URLs with the `url()` CSS function.
   // The capture group is not intended to grab the whole URL exactly, just enough so we can check the scheme.
-  const URL_REGEX = /url\([\'\"]?([^\)]*)/g;
+  // The regex also covers CSS hex-escaped variations of `url()`.
+  const URL_REGEX = new RegExp(`(?=${cssEscapeRegex('url')}\\(['"]?([^\\)]*))`, 'gi');
+  // We greedily capture all `image-set()`s to make sure that all of
+  // them properly use `url()`s to enforce the data URL check later.
+  const IMAGESET_REGEX = new RegExp(`(?=(${cssEscapeRegex('image-set')}\\(.*))`, 'gi');
+  const GOOD_IMAGESET_REGEX = /^image-set\((?:(?:(?:url|type)\("[^\\"]*"\)|[\d.]+(?:x|dpi|dpcm|dppx)),?\s*)+\)/i;
 
   currentStyle.clear();
   /* eslint-disable-next-line @devtools/no-imperative-dom-api --
@@ -218,9 +241,15 @@ export const updateStyle = (currentStyle: Map<string, {value: string, priority:
       continue;
     }
 
+    const value = buffer.style.getPropertyValue(property);
+    // We make sure every `image-set()` only uses `url()`s for its images.
+    // If any of them seem malformed, we skip the whole property.
+    const imageSets = [...value.matchAll(IMAGESET_REGEX)];
+    if (imageSets.some(match => !GOOD_IMAGESET_REGEX.test(match[1]))) {
+      continue;
+    }
     // There could be multiple `url()` functions, so we check them all.
     // If any of them is not a `data` URL, we skip the whole property.
-    const value = buffer.style.getPropertyValue(property);
     const potentialUrls = [...value.matchAll(URL_REGEX)].map(match => match[1]);
     if (potentialUrls.some(
             potentialUrl => !Common.ParsedURL.schemeIs(potentialUrl as Platform.DevToolsPath.UrlString, 'data:'))) {

package/front_end/panels/console/ConsoleInsightTeaser.ts

@@ -626,6 +626,7 @@ export class ConsoleInsightTeaser extends UI.Widget.Widget {
     this.#startTime = performance.now();
     let teaserText = '';
     let firstChunkReceived = false;
+    let firstChunkTime = 0;
     try {
       for await (const chunk of this.#getOnDeviceInsight()) {
         teaserText += chunk;
@@ -634,7 +635,9 @@ export class ConsoleInsightTeaser extends UI.Widget.Widget {
         this.requestUpdate();
         if (!firstChunkReceived) {
           firstChunkReceived = true;
-          Host.userMetrics.consoleInsightTeaserFirstChunkGenerated(performance.now() - this.#startTime);
+          firstChunkTime = performance.now();
+          Host.userMetrics.consoleInsightTeaserFirstChunkGenerated(firstChunkTime - this.#startTime);
+          Host.userMetrics.consoleInsightTeaserFirstChunkGeneratedMedium(firstChunkTime - this.#startTime);
         }
       }
     } catch (err) {
@@ -654,6 +657,8 @@ export class ConsoleInsightTeaser extends UI.Widget.Widget {
     clearTimeout(this.#timeoutId);
     const duration = performance.now() - this.#startTime;
     Host.userMetrics.consoleInsightTeaserGenerated(duration);
+    Host.userMetrics.consoleInsightTeaserGeneratedMedium(duration);
+    Host.userMetrics.consoleInsightTeaserChunkToEndMedium(performance.now() - firstChunkTime);
     if (teaserText.length > 300) {
       Host.userMetrics.consoleInsightLongTeaserGenerated(duration);
     } else {

package/front_end/panels/elements/ElementsTreeElement.ts

@@ -1092,6 +1092,7 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
   }
 
   override onbind(): void {
+    this.performUpdate();
     if (this.treeOutline && !this.isClosingTag()) {
       this.treeOutline.treeElementByNode.set(this.nodeInternal, this);
       this.nodeInternal.addEventListener(SDK.DOMModel.DOMNodeEvents.TOP_LAYER_INDEX_CHANGED, this.performUpdate, this);
@@ -1115,6 +1116,49 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     if (this.editing) {
       this.editing.cancel();
     }
+    // Update the element to clean up adorner registrations with the
+    // ElementsPanel.
+    // We do not change the ElementsTreeElement state in case the
+    // element is bound again.
+    DEFAULT_VIEW(
+        {
+          containerAdornerActive: false,
+          showAdAdorner: false,
+          showContainerAdorner: false,
+          containerType: this.#layout?.containerType,
+          showFlexAdorner: false,
+          flexAdornerActive: false,
+          showGridAdorner: false,
+          showGridLanesAdorner: false,
+          showMediaAdorner: false,
+          showPopoverAdorner: false,
+          showTopLayerAdorner: false,
+          gridAdornerActive: false,
+          popoverAdornerActive: false,
+          isSubgrid: false,
+          showViewSourceAdorner: false,
+          showScrollAdorner: false,
+          showScrollSnapAdorner: false,
+          scrollSnapAdornerActive: false,
+          showSlotAdorner: false,
+          showStartingStyleAdorner: false,
+          startingStyleAdornerActive: false,
+          nodeInfo: this.#nodeInfo,
+          onStartingStyleAdornerClick: () => {},
+          onSlotAdornerClick: () => {},
+          topLayerIndex: -1,
+          onViewSourceAdornerClick: () => {},
+          onGutterClick: () => {},
+          onContainerAdornerClick: () => {},
+          onFlexAdornerClick: () => {},
+          onGridAdornerClick: () => {},
+          onMediaAdornerClick: () => {},
+          onPopoverAdornerClick: () => {},
+          onScrollSnapAdornerClick: () => {},
+          onTopLayerAdornerClick: () => {},
+        },
+        this, this.listItemElement);
+
     if (this.treeOutline && this.treeOutline.treeElementByNode.get(this.nodeInternal) === this) {
       this.treeOutline.treeElementByNode.delete(this.nodeInternal);
     }

package/front_end/panels/elements/ElementsTreeOutline.ts

@@ -80,7 +80,7 @@ const str_ = i18n.i18n.registerUIStrings('panels/elements/ElementsTreeOutline.ts
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 const elementsTreeOutlineByDOMModel = new WeakMap<SDK.DOMModel.DOMModel, ElementsTreeOutline>();
 
-const populatedTreeElements = new Set<ElementsTreeElement>();
+const populatedTreeElements = new WeakSet<ElementsTreeElement>();
 
 export type View = typeof DEFAULT_VIEW;
 

package/front_end/panels/settings/SettingsScreen.ts

@@ -383,7 +383,7 @@ export class GenericSettingsTab extends UI.Widget.VBox implements SettingsTab {
 
 export class ExperimentsSettingsTab extends UI.Widget.VBox implements SettingsTab {
   #experimentsSection: Card|undefined;
-  private readonly experimentToControl = new Map<Root.Runtime.Experiment, HTMLElement>();
+  private readonly experimentToControl = new Map<Root.Runtime.Experiment|Root.Runtime.HostExperiment, HTMLElement>();
   private readonly containerElement: HTMLElement;
 
   constructor() {
@@ -452,12 +452,16 @@ export class ExperimentsSettingsTab extends UI.Widget.VBox implements SettingsTa
     return subsection;
   }
 
-  private createExperimentCheckbox(experiment: Root.Runtime.Experiment): HTMLParagraphElement {
+  private createExperimentCheckbox(experiment: Root.Runtime.Experiment|Root.Runtime.HostExperiment):
+      HTMLParagraphElement {
     const checkbox =
         UI.UIUtils.CheckboxLabel.createWithStringLiteral(experiment.title, experiment.isEnabled(), experiment.name);
     checkbox.classList.add('experiment-label');
     checkbox.name = experiment.name;
     function listener(): void {
+      if (experiment instanceof Root.Runtime.HostExperiment) {
+        Host.InspectorFrontendHost.InspectorFrontendHostInstance.setChromeFlag(experiment.aboutFlag, checkbox.checked);
+      }
       experiment.setEnabled(checkbox.checked);
       Host.userMetrics.experimentChanged(experiment.name, experiment.isEnabled());
       UI.InspectorView.InspectorView.instance().displayReloadRequiredWarning(
@@ -499,7 +503,7 @@ export class ExperimentsSettingsTab extends UI.Widget.VBox implements SettingsTa
   }
 
   highlightObject(experiment: Object): void {
-    if (experiment instanceof Root.Runtime.Experiment) {
+    if (experiment instanceof Root.Runtime.Experiment || experiment instanceof Root.Runtime.HostExperiment) {
       const element = this.experimentToControl.get(experiment);
       if (element) {
         PanelUtils.highlightElement(element);
@@ -534,10 +538,12 @@ export class ActionDelegate implements UI.ActionRegistration.ActionDelegate {
     return false;
   }
 }
-export class Revealer implements Common.Revealer.Revealer<Root.Runtime.Experiment|Common.Settings.Setting<unknown>> {
-  async reveal(object: Root.Runtime.Experiment|Common.Settings.Setting<unknown>): Promise<void> {
+export class Revealer implements
+    Common.Revealer.Revealer<Root.Runtime.Experiment|Root.Runtime.HostExperiment|Common.Settings.Setting<unknown>> {
+  async reveal(object: Root.Runtime.Experiment|Root.Runtime.HostExperiment|Common.Settings.Setting<unknown>):
+      Promise<void> {
     const context = UI.Context.Context.instance();
-    if (object instanceof Root.Runtime.Experiment) {
+    if (object instanceof Root.Runtime.Experiment || object instanceof Root.Runtime.HostExperiment) {
       Host.InspectorFrontendHost.InspectorFrontendHostInstance.bringToFront();
       await SettingsScreen.showSettingsScreen({name: 'experiments'});
       const experimentsSettingsTab = context.flavor(ExperimentsSettingsTab);

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

@@ -277,6 +277,7 @@ Common.Revealer.registerRevealer({
     return [
       Common.Settings.Setting,
       Root.Runtime.Experiment,
+      Root.Runtime.HostExperiment,
     ];
   },
   destination: undefined,

package/front_end/panels/whats_new/ReleaseNoteText.ts

@@ -40,28 +40,28 @@ export function getReleaseNote(): ReleaseNote {
 }
 
 let releaseNote: ReleaseNote = {
-  version: 144,
-  header: 'What\'s new in DevTools 144',
+  version: 145,
+  header: 'What\'s new in DevTools 145',
   markdownLinks: [
     {
-      key: 'request-conditions',
-      link: 'https://developer.chrome.com/blog/new-in-devtools-144/#request-conditions',
+      key: 'soft-navigations',
+      link: 'https://developer.chrome.com/blog/new-in-devtools-145/#soft-navigations',
     },
     {
-      key: 'mcp-server',
-      link: 'https://developer.chrome.com/blog/new-in-devtools-144/#mcp-server',
+      key: 'render-blocking',
+      link: 'https://developer.chrome.com/blog/new-in-devtools-145/#render-blocking',
     },
     {
-      key: 'adopted-stylesheets',
-      link: 'https://developer.chrome.com/blog/new-in-devtools-144/#adopted-stylesheets',
+      key: 'mcp-server',
+      link: 'https://developer.chrome.com/blog/new-in-devtools-145/#mcp-server',
     },
   ],
   videoLinks: [
     {
-      description: 'See past highlights from Chrome 144',
-      link: 'https://developer.chrome.com/blog/new-in-devtools-144' as Platform.DevToolsPath.UrlString,
+      description: 'See past highlights from Chrome 142-144',
+      link: 'https://www.youtube.com/watch?v=2rOeZ98AOb8' as Platform.DevToolsPath.UrlString,
       type: VideoType.WHATS_NEW,
     },
   ],
-  link: 'https://developer.chrome.com/blog/new-in-devtools-144/',
+  link: 'https://developer.chrome.com/blog/new-in-devtools-145/',
 };

package/front_end/panels/whats_new/resources/WNDT.md

@@ -1,11 +1,11 @@
-### [Request conditions](request-conditions)
+### [Soft navigations in performance traces](soft-navigations)
 
-Block and throttle individual network requests with the new Request conditions panel.
+Soft navigation and soft LCP markers are now visible in performance traces for single-page applications.
 
-### [MCP server](mcp-server)
+### [Identify render blocking requests](render-blocking)
 
-Use auto connect to continue a debugging session in an already running Chrome instance.
+Enable the Render blocking column in the Network panel to spot scripts or stylesheets that are blocking the rendering process.
 
-### [Adopted stylesheets](adopted-stylesheets)
+### [MCP server](mcp-server)
 
-Adopted stylesheets are now visible under shadow roots in the Elements panel.
+Simulate device viewports and user agents, work with extensions, and open pages in the background.

package/mcp/HostBindings.ts

@@ -180,6 +180,9 @@ export class McpHostBindings implements Host.InspectorFrontendHostAPI.InspectorF
   recordPerformanceHistogram(): void {
   }
 
+  recordPerformanceHistogramMedium(): void {
+  }
+
   recordUserMetricsAction(): void {
   }
 
@@ -307,4 +310,7 @@ export class McpHostBindings implements Host.InspectorFrontendHostAPI.InspectorF
 
   recordFunctionCall(): void {
   }
+
+  setChromeFlag(): void {
+  }
 }

package/package.json

@@ -105,5 +105,5 @@
       "flat-cache": "6.1.12"
     }
   },
-  "version": "1.0.1574367"
+  "version": "1.0.1575174"
 }