chrome-devtools-frontend 1.0.1571007 → 1.0.1572937

package/agents/prompts/README.md

@@ -0,0 +1,18 @@
+This directory contains a series of prompts that can be added to your root `GEMINI.md` file, which is not committed to version control.
+
+More context for Googlers: go/chrome-devtools:ai-agents-use
+
+## Getting started
+
+1. Create `//GEMINI.md` in the root of the `devtools-frontend` repository.
+2. Include the relevant prompts with `@`:
+
+```
+@agents/prompts/verification.md
+```
+
+The `/memory show` command in Gemini CL can be used to verify that the files have been included correctly.
+
+## Contributing
+
+Contributions to existing prompts or to add new ones are encouraged; CLs are very welcome.

package/agents/prompts/devtools-imports.md

@@ -0,0 +1,47 @@
+# Imports
+
+This codebase follows a special convention for importing code that must be followed to avoid build errors.
+
+In DevTools each folder of code is considered a *module*:
+
+- `front_end/models/trace` is the *trace module*.
+- `front_end/panels/timeline` is the *timeline module*.
+
+Within each module there are multiple TypeScript files. *The file that is named the same as the folder name is called the entrypoint*.
+
+- `front_end/models/trace/trace.ts` is the *trace module's entrypoint*
+- `front_end/models/trace/ModelImpl.ts` is part of the implementation of the trace module.
+
+## Importing from another module
+
+When you want to reuse code from other modules, *you must import that module via its entrypoint*. Imagine we are in `front_end/panels/timeline/TimelinePanel.ts`. This import is GOOD:
+
+```
+import * as Trace from '../models/trace/trace.js'; // import the entrypoint
+```
+
+This import is BAD because we import a file that is NOT the entrypoint:
+
+```
+import * as ModelImpl from '../models/trace/ModelImpl.js' // NEVER ALLOWED
+```
+
+Additionally, you **must import using the `import * as` syntax**.
+
+```
+import {ModelImpl, X, Y} from '../models/trace/trace.js'; // BAD
+```
+
+```
+import * as Trace from '../models/trace/trace.js'; // GOOD
+```
+
+## Importing from within the same module
+
+If you are within the same module, it is OK to import from files directly rather than go via the entrypoint. You can also import specifically what you need.
+
+For example, if you are editing `front_end/models/trace/ModelImpl.ts` this would be acceptable:
+
+```
+import {Foo} from './Foo.js'; // allowed because Foo.ts is in the same directory.
+```

package/agents/prompts/verification.md

@@ -0,0 +1,27 @@
+# Instructions on how to verify your changes
+
+## Testing
+
+- To test a file, you can run `npm run test -- <FILEPATH>` where `FILEPATH` is a path to a `*.test.ts` file, relative to the working directory.
+- Test files are usually defined alongside their implementation. So if you are working on `front_end/panels/timeline/TimelinePanel.ts`, you would expect the test file to be defined in `front_end/panels/timeline/TimelinePanel.test.ts`.
+- You can also test an entire directory. For example, `npm run test -- front_end/models/trace` will run all tests in that directory.
+
+## Building & compiling
+
+- Check for TypeScript or dependency issues in the build system by running `autoninja -C out/Default`.
+
+## Fast builds
+
+- If the `out/Fast` or `out/fast-build` directory exists, this means that a build that does not execute TypeScript is available to you which greatly decreases build time.
+- To use the fast build for tests, pass the `--target=Fast` (adjust the value based on the name of the directory) argument to `npm run test`.
+
+## Linting
+
+- `npm run lint` will execute ESLint and StyleLint and report any violations that must be fixed.
+
+## Best practices
+
+- Run tests often to verify your changes.
+- Prefer using a fast build, if it exists, to keep the feedback loop shorter.
+- Periodically compile with TypeScript to check for type errors.
+- Run linting at the end of your code changes.

package/front_end/Images/src/database-off.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 -960 960 960" width="20px" fill="#e3e3e3"><path d="M449-449Zm97-87Zm-97 87Zm97-87Zm-97 87Zm97-87ZM768-90 90-768l51-51 678 678-51 51Zm-287.52-54Q339-144 241.5-185.85T144-288v-384q0-23 16-44.5t45-38.5l226 226q-65-4-120.5-18T216-583v109q44 32 111.5 49T480-408q17.96 0 35.02-.5 17.06-.5 34.12-2.5L612-348q-31 6-64.07 9-33.07 3-67.93 3-80 0-148.5-14.5T216-391v103q10 26 93.5 49T480-216q62 0 123-12t99-29l53 52q-45.91 28.22-117.59 44.61Q565.74-144 480.48-144ZM807-255l-63-63v-73q-11 6-23.94 11.33Q707.12-374.33 693-369l-57-57q32-8 59-20t49-28v-109q-40 22-94.5 35T532-530l-70-70q23 1 65-2.5t85.5-12q43.5-8.5 81-22.5t50.5-35q-18-28-98.5-50T480-744q-37 0-74 4.5T335-727l-59-59q43-14 94.5-22t109.5-8q139.07 0 237.53 42Q816-732 816-672v384q0 8-2 16.5t-7 16.5Z"/></svg>

package/front_end/Images/src/lock-person.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#e3e3e3"><path d="M720-240q25 0 42.5-17.5T780-300q0-25-17.5-42.5T720-360q-25 0-42.5 17.5T660-300q0 25 17.5 42.5T720-240Zm0 120q30 0 56-14t43-39q-23-14-48-20.5t-51-6.5q-26 0-51 6.5T621-173q17 25 43 39t56 14ZM360-640h240v-80q0-50-35-85t-85-35q-50 0-85 35t-35 85v80ZM490-80H240q-33 0-56.5-23.5T160-160v-400q0-33 23.5-56.5T240-640h40v-80q0-83 58.5-141.5T480-920q83 0 141.5 58.5T680-720v80h40q33 0 56.5 23.5T800-560v52q-18-6-37.5-9t-42.5-3v-40H240v400h212q8 24 16 41.5T490-80Zm230 40q-83 0-141.5-58.5T520-240q0-83 58.5-141.5T720-440q83 0 141.5 58.5T920-240q0 83-58.5 141.5T720-40ZM240-560v400-400Z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" height="20px" viewBox="0 -960 960 960" width="20px" fill="#e3e3e3"><path d="M720-240q25 0 42.5-17.5T780-300q0-25-17.5-42.5T720-360q-25 0-42.5 17.5T660-300q0 25 17.5 42.5T720-240Zm0 120q32 0 59-16t43-42q-23-13-48.5-19.5T720-204q-28 0-53.5 7T618-178q16 26 43 42t59 16ZM360-624h240v-96q0-50-35-85t-85-35q-50 0-85 35t-35 85v96ZM499-96H264q-29.7 0-50.85-21.15Q192-138.3 192-168v-384q0-29.7 21.15-50.85Q234.3-624 264-624h24v-96q0-79.68 56.23-135.84 56.22-56.16 136-56.16Q560-912 616-855.84q56 56.16 56 135.84v96h24q29.7 0 50.85 21.15Q768-581.7 768-552v53q-17.05-3-35.53-4.5Q714-505 696-503v-49H264v384h202q6 20 14 38t19 34Zm220.77 48Q640-48 584-104.23q-56-56.22-56-136Q528-320 584.23-376q56.22-56 136-56Q800-432 856-375.77q56 56.22 56 136Q912-160 855.77-104q-56.22 56-136 56ZM264-552v384-384Z"/></svg>

package/front_end/core/common/Debouncer.ts

@@ -9,7 +9,16 @@ export const debounce = function(func: (...args: any[]) => void, delay: number):
   let timer: ReturnType<typeof setTimeout>;
   const debounced = (...args: any[]): void => {
     clearTimeout(timer);
-    timer = setTimeout(() => func(...args), delay);
+    timer = setTimeout(() => func(...args), testDebounceOverride ? 0 : delay);
   };
   return debounced;
 };
+
+let testDebounceOverride = false;
+export function enableTestOverride(): void {
+  testDebounceOverride = true;
+}
+
+export function disableTestOverride(): void {
+  testDebounceOverride = false;
+}

package/front_end/core/common/SettingRegistration.ts

@@ -277,7 +277,7 @@ export interface SettingRegistration {
    * The name of the experiment a setting is associated with. Enabling and disabling the declared
    * experiment will enable and disable the setting respectively.
    */
-  experiment?: Root.Runtime.ExperimentName;
+  experiment?: Root.ExperimentNames.ExperimentName;
   /**
    * A condition is a function that will make the setting available if it
    * returns true, and not available, otherwise. Make sure that objects you

package/front_end/core/host/AidaClient.ts

@@ -531,6 +531,14 @@ export class AidaClient {
     if (!InspectorFrontendHostInstance.doAidaConversation) {
       throw new Error('doAidaConversation is not available');
     }
+
+    // Disable logging for now.
+    // For context, see b/454563259#comment35.
+    // We should be able to remove this ~end of April.
+    if (Root.Runtime.hostConfig.devToolsGeminiRebranding?.enabled) {
+      request.metadata.disable_user_content_logging = true;
+    }
+
     const stream = (() => {
       let {promise, resolve, reject} = Promise.withResolvers<string|null>();
       options?.signal?.addEventListener('abort', () => {

package/front_end/core/host/InspectorFrontendHostAPI.ts

@@ -536,13 +536,7 @@ export const enum EnumeratedHistogram {
   DeveloperResourceScheme = 'DevTools.DeveloperResourceScheme',
   Language = 'DevTools.Language',
   SyncSetting = 'DevTools.SyncSetting',
-  RecordingAssertion = 'DevTools.RecordingAssertion',
-  RecordingCodeToggled = 'DevTools.RecordingCodeToggled',
-  RecordingCopiedToClipboard = 'DevTools.RecordingCopiedToClipboard',
-  RecordingEdited = 'DevTools.RecordingEdited',
-  RecordingExported = 'DevTools.RecordingExported',
   RecordingReplayFinished = 'DevTools.RecordingReplayFinished',
-  RecordingReplaySpeed = 'DevTools.RecordingReplaySpeed',
   RecordingReplayStarted = 'DevTools.RecordingReplayStarted',
   RecordingToggled = 'DevTools.RecordingToggled',
   SourcesPanelFileDebugged = 'DevTools.SourcesPanelFileDebugged',

package/front_end/core/host/UserMetrics.ts

@@ -209,11 +209,6 @@ export class UserMetrics {
     });
   }
 
-  recordingAssertion(value: RecordingAssertion): void {
-    InspectorFrontendHostInstance.recordEnumeratedHistogram(
-        EnumeratedHistogram.RecordingAssertion, value, RecordingAssertion.MAX_VALUE);
-  }
-
   recordingToggled(value: RecordingToggled): void {
     InspectorFrontendHostInstance.recordEnumeratedHistogram(
         EnumeratedHistogram.RecordingToggled, value, RecordingToggled.MAX_VALUE);
@@ -224,36 +219,11 @@ export class UserMetrics {
         EnumeratedHistogram.RecordingReplayFinished, value, RecordingReplayFinished.MAX_VALUE);
   }
 
-  recordingReplaySpeed(value: RecordingReplaySpeed): void {
-    InspectorFrontendHostInstance.recordEnumeratedHistogram(
-        EnumeratedHistogram.RecordingReplaySpeed, value, RecordingReplaySpeed.MAX_VALUE);
-  }
-
   recordingReplayStarted(value: RecordingReplayStarted): void {
     InspectorFrontendHostInstance.recordEnumeratedHistogram(
         EnumeratedHistogram.RecordingReplayStarted, value, RecordingReplayStarted.MAX_VALUE);
   }
 
-  recordingEdited(value: RecordingEdited): void {
-    InspectorFrontendHostInstance.recordEnumeratedHistogram(
-        EnumeratedHistogram.RecordingEdited, value, RecordingEdited.MAX_VALUE);
-  }
-
-  recordingExported(value: RecordingExported): void {
-    InspectorFrontendHostInstance.recordEnumeratedHistogram(
-        EnumeratedHistogram.RecordingExported, value, RecordingExported.MAX_VALUE);
-  }
-
-  recordingCodeToggled(value: RecordingCodeToggled): void {
-    InspectorFrontendHostInstance.recordEnumeratedHistogram(
-        EnumeratedHistogram.RecordingCodeToggled, value, RecordingCodeToggled.MAX_VALUE);
-  }
-
-  recordingCopiedToClipboard(value: RecordingCopiedToClipboard): void {
-    InspectorFrontendHostInstance.recordEnumeratedHistogram(
-        EnumeratedHistogram.RecordingCopiedToClipboard, value, RecordingCopiedToClipboard.MAX_VALUE);
-  }
-
   lighthouseModeRun(type: LighthouseModeRun): void {
     InspectorFrontendHostInstance.recordEnumeratedHistogram(
         EnumeratedHistogram.LighthouseModeRun, type, LighthouseModeRun.MAX_VALUE);
@@ -825,7 +795,7 @@ export enum DevtoolsExperiments {
   'live-heap-profile' = 11,
   'protocol-monitor' = 13,
   'sampling-heap-profiler-timeline' = 17,
-  'show-option-tp-expose-internals-in-heap-snapshot' = 18,
+  'show-option-to-expose-internals-in-heap-snapshot' = 18,
   'timeline-invalidation-tracking' = 26,
   'timeline-show-all-events' = 27,
   'timeline-v8-runtime-call-stats' = 28,

package/front_end/core/root/ExperimentNames.ts

@@ -0,0 +1,30 @@
+// Copyright 2026 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+export enum ExperimentName {
+  ALL = '*',
+  CAPTURE_NODE_CREATION_STACKS = 'capture-node-creation-stacks',
+  LIVE_HEAP_PROFILE = 'live-heap-profile',
+  PROTOCOL_MONITOR = 'protocol-monitor',
+  SAMPLING_HEAP_PROFILER_TIMELINE = 'sampling-heap-profiler-timeline',
+  SHOW_OPTION_TO_EXPOSE_INTERNALS_IN_HEAP_SNAPSHOT = 'show-option-to-expose-internals-in-heap-snapshot',
+  TIMELINE_INVALIDATION_TRACKING = 'timeline-invalidation-tracking',
+  TIMELINE_SHOW_ALL_EVENTS = 'timeline-show-all-events',
+  TIMELINE_V8_RUNTIME_CALL_STATS = 'timeline-v8-runtime-call-stats',
+  APCA = 'apca',
+  FONT_EDITOR = 'font-editor',
+  FULL_ACCESSIBILITY_TREE = 'full-accessibility-tree',
+  CONTRAST_ISSUES = 'contrast-issues',
+  EXPERIMENTAL_COOKIE_FEATURES = 'experimental-cookie-features',
+  INSTRUMENTATION_BREAKPOINTS = 'instrumentation-breakpoints',
+  AUTHORED_DEPLOYED_GROUPING = 'authored-deployed-grouping',
+  JUST_MY_CODE = 'just-my-code',
+  USE_SOURCE_MAP_SCOPES = 'use-source-map-scopes',
+  TIMELINE_SHOW_POST_MESSAGE_EVENTS = 'timeline-show-postmessage-events',
+  TIMELINE_DEBUG_MODE = 'timeline-debug-mode',
+  // Adding or removing an entry from this enum?
+  // You will need to update:
+  // 1. DevToolsExperiments enum in host/UserMetrics.ts
+  // 2. Maybe REGISTERED_EXPERIMENTS in EnvironmentHelpers.ts (to create this experiment in the test env)
+}

package/front_end/core/root/Runtime.ts

@@ -4,6 +4,8 @@
 
 import * as Platform from '../platform/platform.js';
 
+import type {ExperimentName} from './ExperimentNames.js';
+
 let runtimePlatform = '';
 
 let runtimeInstance: Runtime|undefined;
@@ -119,11 +121,17 @@ export class Runtime {
     if (experiment === '*') {
       return true;
     }
-    if (experiment && experiment.startsWith('!') && experiments.isEnabled(experiment.substring(1))) {
-      return false;
+    if (experiment?.startsWith('!')) {
+      const experimentName = experiment.substring(1) as ExperimentName;
+      if (experiments.isEnabled(experimentName)) {
+        return false;
+      }
     }
-    if (experiment && !experiment.startsWith('!') && !experiments.isEnabled(experiment)) {
-      return false;
+    if (experiment && !experiment.startsWith('!')) {
+      const experimentName = experiment as ExperimentName;
+      if (!experiments.isEnabled(experimentName)) {
+        return false;
+      }
     }
     const {condition} = descriptor;
     return condition ? condition(hostConfig) : true;
@@ -151,10 +159,10 @@ export interface Option {
 
 export class ExperimentsSupport {
   #experiments: Experiment[] = [];
-  readonly #experimentNames = new Set<string>();
-  readonly #enabledTransiently = new Set<string>();
-  readonly #enabledByDefault = new Set<string>();
-  readonly #serverEnabled = new Set<string>();
+  readonly #experimentNames = new Set<ExperimentName>();
+  readonly #enabledTransiently = new Set<ExperimentName>();
+  readonly #enabledByDefault = new Set<ExperimentName>();
+  readonly #serverEnabled = new Set<ExperimentName>();
   readonly #storage = new ExperimentStorage();
 
   allConfigurableExperiments(): Experiment[] {
@@ -167,7 +175,7 @@ export class ExperimentsSupport {
     return result;
   }
 
-  register(experimentName: string, experimentTitle: string, docLink?: string, feedbackLink?: string): void {
+  register(experimentName: ExperimentName, experimentTitle: string, docLink?: string, feedbackLink?: string): void {
     if (this.#experimentNames.has(experimentName)) {
       throw new Error(`Duplicate registration of experiment '${experimentName}'`);
     }
@@ -178,7 +186,7 @@ export class ExperimentsSupport {
         feedbackLink as Platform.DevToolsPath.UrlString ?? Platform.DevToolsPath.EmptyUrlString));
   }
 
-  isEnabled(experimentName: string): boolean {
+  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.
@@ -195,38 +203,39 @@ export class ExperimentsSupport {
     return Boolean(this.#storage.get(experimentName));
   }
 
-  setEnabled(experimentName: string, enabled: boolean): void {
+  setEnabled(experimentName: ExperimentName, enabled: boolean): void {
     this.checkExperiment(experimentName);
     this.#storage.set(experimentName, enabled);
   }
 
-  enableExperimentsTransiently(experimentNames: string[]): void {
+  enableExperimentsTransiently(experimentNames: ExperimentName[]): void {
     for (const experimentName of experimentNames) {
       this.checkExperiment(experimentName);
       this.#enabledTransiently.add(experimentName);
     }
   }
 
-  enableExperimentsByDefault(experimentNames: string[]): void {
+  enableExperimentsByDefault(experimentNames: ExperimentName[]): void {
     for (const experimentName of experimentNames) {
       this.checkExperiment(experimentName);
       this.#enabledByDefault.add(experimentName);
     }
   }
 
-  setServerEnabledExperiments(experimentNames: string[]): void {
-    for (const experiment of experimentNames) {
-      this.checkExperiment(experiment);
-      this.#serverEnabled.add(experiment);
+  setServerEnabledExperiments(experiments: string[]): void {
+    for (const experiment of experiments) {
+      const experimentName = experiment as ExperimentName;
+      this.checkExperiment(experimentName);
+      this.#serverEnabled.add(experimentName);
     }
   }
 
-  enableForTest(experimentName: string): void {
+  enableForTest(experimentName: ExperimentName): void {
     this.checkExperiment(experimentName);
     this.#enabledTransiently.add(experimentName);
   }
 
-  disableForTest(experimentName: string): void {
+  disableForTest(experimentName: ExperimentName): void {
     this.checkExperiment(experimentName);
     this.#enabledTransiently.delete(experimentName);
   }
@@ -243,7 +252,7 @@ export class ExperimentsSupport {
     this.#storage.cleanUpStaleExperiments(this.#experimentNames);
   }
 
-  private checkExperiment(experimentName: string): void {
+  private checkExperiment(experimentName: ExperimentName): void {
     if (!this.#experimentNames.has(experimentName)) {
       throw new Error(`Unknown experiment '${experimentName}'`);
     }
@@ -271,11 +280,11 @@ class ExperimentStorage {
    *   - false: Explicitly disabled.
    *   - undefined: Disabled.
    */
-  get(experimentName: string): boolean|undefined {
+  get(experimentName: ExperimentName): boolean|undefined {
     return this.#experiments[experimentName];
   }
 
-  set(experimentName: string, enabled: boolean): void {
+  set(experimentName: ExperimentName, enabled: boolean): void {
     this.#experiments[experimentName] = enabled;
     this.#syncToLocalStorage();
   }
@@ -294,14 +303,18 @@ class ExperimentStorage {
   }
 }
 
+/**
+ * @deprecated Experiments should not be used anymore, instead use base::Feature.
+ * See docs/contributing/settings-experiments-features.md
+ */
 export class Experiment {
-  name: string;
+  name: ExperimentName;
   title: string;
   docLink?: Platform.DevToolsPath.UrlString;
   readonly feedbackLink?: Platform.DevToolsPath.UrlString;
   readonly #experiments: ExperimentsSupport;
   constructor(
-      experiments: ExperimentsSupport, name: string, title: string, docLink: Platform.DevToolsPath.UrlString,
+      experiments: ExperimentsSupport, name: ExperimentName, title: string, docLink: Platform.DevToolsPath.UrlString,
       feedbackLink: Platform.DevToolsPath.UrlString) {
     this.name = name;
     this.title = title;
@@ -322,30 +335,6 @@ export class Experiment {
 /** This must be constructed after the query parameters have been parsed. **/
 export const experiments = new ExperimentsSupport();
 
-/**
- * @deprecated Experiments should not be used anymore, instead use base::Feature.
- * See docs/contributing/settings-experiments-features.md
- */
-export const enum ExperimentName {
-  CAPTURE_NODE_CREATION_STACKS = 'capture-node-creation-stacks',
-  CSS_OVERVIEW = 'css-overview',
-  LIVE_HEAP_PROFILE = 'live-heap-profile',
-  ALL = '*',
-  PROTOCOL_MONITOR = 'protocol-monitor',
-  FULL_ACCESSIBILITY_TREE = 'full-accessibility-tree',
-  HEADER_OVERRIDES = 'header-overrides',
-  INSTRUMENTATION_BREAKPOINTS = 'instrumentation-breakpoints',
-  AUTHORED_DEPLOYED_GROUPING = 'authored-deployed-grouping',
-  JUST_MY_CODE = 'just-my-code',
-  USE_SOURCE_MAP_SCOPES = 'use-source-map-scopes',
-  TIMELINE_SHOW_POST_MESSAGE_EVENTS = 'timeline-show-postmessage-events',
-  TIMELINE_DEBUG_MODE = 'timeline-debug-mode',
-  // Adding or removing an entry from this enum?
-  // You will need to update:
-  // 1. REGISTERED_EXPERIMENTS in EnvironmentHelpers.ts (to create this experiment in the test env)
-  // 2. DevToolsExperiments enum in host/UserMetrics.ts
-}
-
 export enum GenAiEnterprisePolicyValue {
   ALLOW = 0,
   ALLOW_WITHOUT_LOGGING = 1,
@@ -430,6 +419,10 @@ export interface HostConfigGreenDevUi {
   enabled: boolean;
 }
 
+export interface HostConfigGeminiRebranding {
+  enabled: boolean;
+}
+
 export interface HostConfigVeLogging {
   enabled: boolean;
   testing: boolean;
@@ -462,6 +455,10 @@ export interface HostConfigThirdPartyCookieControls {
   managedBlockThirdPartyCookies: string|boolean;
 }
 
+export interface HostConfigAiAssistanceV2 {
+  enabled: boolean;
+}
+
 interface AiGeneratedTimelineLabels {
   enabled: boolean;
 }
@@ -550,6 +547,7 @@ export type HostConfig = Platform.TypeScriptUtilities.RecursivePartial<{
   devToolsAiAssistanceNetworkAgent: HostConfigAiAssistanceNetworkAgent,
   devToolsAiAssistanceFileAgent: HostConfigAiAssistanceFileAgent,
   devToolsAiAssistancePerformanceAgent: HostConfigAiAssistancePerformanceAgent,
+  devToolsAiAssistanceV2: HostConfigAiAssistanceV2,
   devToolsAiCodeCompletion: HostConfigAiCodeCompletion,
   devToolsAiCodeGeneration: HostConfigAiCodeGeneration,
   devToolsVeLogging: HostConfigVeLogging,
@@ -576,6 +574,7 @@ export type HostConfig = Platform.TypeScriptUtilities.RecursivePartial<{
   devToolsEnableDurableMessages: DevToolsEnableDurableMessages,
   devToolsAiAssistanceContextSelectionAgent: HostConfigAiAssistanceContextSelectionAgent,
   devToolsConsoleInsightsTeasers: ConsoleInsightsTeasers,
+  devToolsGeminiRebranding: HostConfigGeminiRebranding,
 }>;
 
 /**

package/front_end/core/root/root.ts

@@ -3,9 +3,11 @@
 // found in the LICENSE file.
 
 import * as DevToolsContext from './DevToolsContext.js';
+import * as ExperimentNames from './ExperimentNames.js';
 import * as Runtime from './Runtime.js';
 
 export {
   DevToolsContext,
+  ExperimentNames,
   Runtime,
 };

package/front_end/core/sdk/CSSModel.ts

@@ -379,6 +379,13 @@ export class CSSModel extends SDKModel<EventTypes> {
     return await this.#styleLoader.computedStylePromise(nodeId);
   }
 
+  async getComputedStyleExtraFields(nodeId: Protocol.DOM.NodeId): Promise<Protocol.CSS.ComputedStyleExtraFields> {
+    if (!this.isEnabled()) {
+      await this.enable();
+    }
+    return await this.#styleLoader.extraFieldsPromise(nodeId);
+  }
+
   async getLayoutPropertiesFromComputedStyle(nodeId: Protocol.DOM.NodeId): Promise<LayoutProperties|null> {
     const styles = await this.getComputedStyle(nodeId);
     if (!styles) {
@@ -1051,32 +1058,48 @@ class CSSDispatcher implements ProtocolProxyApi.CSSDispatcher {
   }
 }
 
+interface ComputedStyleWithExtraFields {
+  style: Map<string, string>|null;
+  extraFields: Protocol.CSS.ComputedStyleExtraFields;
+}
+
 class ComputedStyleLoader {
   #cssModel: CSSModel;
-  #nodeIdToPromise = new Map<number, Promise<Map<string, string>|null>>();
+  #nodeIdToPromise = new Map<number, Promise<ComputedStyleWithExtraFields>>();
   constructor(cssModel: CSSModel) {
     this.#cssModel = cssModel;
   }
 
-  computedStylePromise(nodeId: Protocol.DOM.NodeId): Promise<Map<string, string>|null> {
+  #getResponsePromise(nodeId: Protocol.DOM.NodeId): Promise<ComputedStyleWithExtraFields> {
     let promise = this.#nodeIdToPromise.get(nodeId);
     if (promise) {
       return promise;
     }
-    promise = this.#cssModel.getAgent().invoke_getComputedStyleForNode({nodeId}).then(({computedStyle}) => {
-      this.#nodeIdToPromise.delete(nodeId);
-      if (!computedStyle?.length) {
-        return null;
-      }
-      const result = new Map<string, string>();
-      for (const property of computedStyle) {
-        result.set(property.name, property.value);
-      }
-      return result;
-    });
+    promise =
+        this.#cssModel.getAgent().invoke_getComputedStyleForNode({nodeId}).then(({computedStyle, extraFields}) => {
+          this.#nodeIdToPromise.delete(nodeId);
+          if (!computedStyle?.length) {
+            return {style: null, extraFields};
+          }
+          const result = new Map<string, string>();
+          for (const property of computedStyle) {
+            result.set(property.name, property.value);
+          }
+          return {style: result, extraFields};
+        });
     this.#nodeIdToPromise.set(nodeId, promise);
     return promise;
   }
+
+  async computedStylePromise(nodeId: Protocol.DOM.NodeId): Promise<Map<string, string>|null> {
+    const computedStyleWithExtraFields = await this.#getResponsePromise(nodeId);
+    return computedStyleWithExtraFields.style;
+  }
+
+  async extraFieldsPromise(nodeId: Protocol.DOM.NodeId): Promise<Protocol.CSS.ComputedStyleExtraFields> {
+    const computedStyleWithExtraFields = await this.#getResponsePromise(nodeId);
+    return computedStyleWithExtraFields.extraFields;
+  }
 }
 
 export class InlineStyleResult {

package/front_end/core/sdk/CSSProperty.ts

@@ -115,7 +115,7 @@ export class CSSProperty extends Common.ObjectWrapper.ObjectWrapper<EventTypes>
     const matchers = matchedStyles.propertyMatchers(this.ownerStyle, computedStyles);
 
     matchers.push(new CSSWideKeywordMatcher(this, matchedStyles));
-    if (Root.Runtime.experiments.isEnabled('font-editor')) {
+    if (Root.Runtime.experiments.isEnabled(Root.ExperimentNames.ExperimentName.FONT_EDITOR)) {
       matchers.push(new FontMatcher());
     }
     return matchers;

package/front_end/core/sdk/CSSPropertyParserMatchers.ts

@@ -983,6 +983,9 @@ export const enum ArithmeticFunction {
   CALC = 'calc',
   SIBLING_COUNT = 'sibling-count',
   SIBLING_INDEX = 'sibling-index',
+  ROUND = 'round',
+  MOD = 'mod',
+  REM = 'rem',
 }
 type MathFunction = SelectFunction|ArithmeticFunction;
 
@@ -1000,6 +1003,9 @@ export class MathFunctionMatch extends BaseFunctionMatch<MathFunction> {
       case ArithmeticFunction.CALC:
       case ArithmeticFunction.SIBLING_COUNT:
       case ArithmeticFunction.SIBLING_INDEX:
+      case ArithmeticFunction.ROUND:
+      case ArithmeticFunction.MOD:
+      case ArithmeticFunction.REM:
         return true;
     }
     // This assignment catches missed values in the switch above.
@@ -1021,6 +1027,9 @@ export class MathFunctionMatcher extends matcherBase(MathFunctionMatch) {
       case ArithmeticFunction.CALC:
       case ArithmeticFunction.SIBLING_COUNT:
       case ArithmeticFunction.SIBLING_INDEX:
+      case ArithmeticFunction.ROUND:
+      case ArithmeticFunction.MOD:
+      case ArithmeticFunction.REM:
         return maybeFunc;
     }
     // This assignment catches missed values in the switch above.

package/front_end/core/sdk/CookieModel.ts

@@ -99,7 +99,8 @@ export class CookieModel extends SDKModel<EventTypes> {
     if (cookie.expires()) {
       expires = Math.floor(Date.parse(`${cookie.expires()}`) / 1000);
     }
-    const enabled = Root.Runtime.experiments.isEnabled('experimental-cookie-features');
+    const enabled =
+        Root.Runtime.experiments.isEnabled(Root.ExperimentNames.ExperimentName.EXPERIMENTAL_COOKIE_FEATURES);
     const preserveUnset = (scheme: Protocol.Network.CookieSourceScheme): Protocol.Network.CookieSourceScheme.Unset|
                           undefined => scheme === Protocol.Network.CookieSourceScheme.Unset ? scheme : undefined;
     const protocolCookie = {

package/front_end/core/sdk/DOMModel.ts

@@ -1319,7 +1319,7 @@ export class DOMModel extends SDKModel<EventTypes> {
       void this.agent.invoke_enable({});
     }
 
-    if (Root.Runtime.experiments.isEnabled('capture-node-creation-stacks')) {
+    if (Root.Runtime.experiments.isEnabled(Root.ExperimentNames.ExperimentName.CAPTURE_NODE_CREATION_STACKS)) {
       void this.agent.invoke_setNodeStackTracesEnabled({enable: true});
     }
   }

package/front_end/core/sdk/DebuggerModel.ts

@@ -267,7 +267,7 @@ export class DebuggerModel extends SDKModel<EventTypes> {
     const maxScriptsCacheSize = isRemoteFrontend ? 10e6 : 100e6;
     const enablePromise = this.agent.invoke_enable({maxScriptsCacheSize});
     let instrumentationPromise: Promise<Protocol.Debugger.SetInstrumentationBreakpointResponse>|undefined;
-    if (Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.INSTRUMENTATION_BREAKPOINTS)) {
+    if (Root.Runtime.experiments.isEnabled(Root.ExperimentNames.ExperimentName.INSTRUMENTATION_BREAKPOINTS)) {
       instrumentationPromise = this.agent.invoke_setInstrumentationBreakpoint({
         instrumentation: Protocol.Debugger.SetInstrumentationBreakpointRequestInstrumentation.BeforeScriptExecution,
       });