chrome-devtools-frontend 1.0.1570343 → 1.0.1571573

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/docs/contributing/infrastructure.md

@@ -281,6 +281,28 @@ even if it consistently failed 4 times out of 5 runs for some time. Try to
 correlate your failure with a luci-analysis report on this test and skip it
 until the flakiness gets resolved.
 
+### Clobber a builder's cache
+
+Builder bots utilize caching for project checkouts to speed up updates. This
+cache includes the build output directory (`/out`). Occasionally, stale files
+within these directories can interfere with the build process or test execution.
+
+If you suspect a cache issue, you can clear (clobber) the cache for a specific
+builder. This requires a local Chromium checkout to access the necessary utility
+script.
+
+Run the following command from the root of your Chromium checkout:
+
+```bash
+./tools/infra/builder-cache-clobber.py -S https://chromium-swarm.appspot.com/ --builder "Stand-alone Mac-arm64" --bucket ci --project devtools-frontend
+```
+
+#### Note about caches on try bots:
+
+Try bots (CQ) operate in tester/compilator pairs. When clearing caches, ensure
+you target both builders in the pair. For example, if you clear the cache for
+`dtf_mac_arm64_rel`, you must also clear it for `dtf_mac_arm64_compile_rel`.
+
 ## Luci Analysis configuration
 
 [Luci Analysis](go/luci-analysis) is a tool that helps you understand the

package/front_end/core/host/AidaClient.ts

@@ -79,7 +79,7 @@ export interface FunctionObjectParam<T extends string|number|symbol = string> ex
   type: ParametersTypes.OBJECT;
   // TODO: this can be also be ObjectParams
   properties: Record<T, FunctionPrimitiveParams|FunctionArrayParam>;
-  required: string[];
+  required: T[];
 }
 
 /**

package/front_end/core/host/UserMetrics.ts

@@ -825,7 +825,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/Runtime.ts

@@ -119,11 +119,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 +157,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 +173,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 +184,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 +201,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 +250,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 +278,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 +301,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,18 +333,21 @@ 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 {
+export enum ExperimentName {
+  ALL = '*',
   CAPTURE_NODE_CREATION_STACKS = 'capture-node-creation-stacks',
-  CSS_OVERVIEW = 'css-overview',
   LIVE_HEAP_PROFILE = 'live-heap-profile',
-  ALL = '*',
   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',
-  HEADER_OVERRIDES = 'header-overrides',
+  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',
@@ -342,8 +356,8 @@ export const enum ExperimentName {
   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
+  // 1. DevToolsExperiments enum in host/UserMetrics.ts
+  // 2. Maybe REGISTERED_EXPERIMENTS in EnvironmentHelpers.ts (to create this experiment in the test env)
 }
 
 export enum GenAiEnterprisePolicyValue {
@@ -522,6 +536,11 @@ interface HostConfigAiAssistanceContextSelectionAgent {
   enabled: boolean;
 }
 
+interface ConsoleInsightsTeasers {
+  enabled: boolean;
+  allowWithoutGpu: boolean;
+}
+
 /**
  * The host configuration that we expect from the DevTools back-end.
  *
@@ -570,6 +589,7 @@ export type HostConfig = Platform.TypeScriptUtilities.RecursivePartial<{
   devToolsAiPromptApi: AiPromptApi,
   devToolsEnableDurableMessages: DevToolsEnableDurableMessages,
   devToolsAiAssistanceContextSelectionAgent: HostConfigAiAssistanceContextSelectionAgent,
+  devToolsConsoleInsightsTeasers: ConsoleInsightsTeasers,
 }>;
 
 /**

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.Runtime.ExperimentName.FONT_EDITOR)) {
       matchers.push(new FontMatcher());
     }
     return matchers;

package/front_end/core/sdk/CookieModel.ts

@@ -99,7 +99,7 @@ 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.Runtime.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.Runtime.ExperimentName.CAPTURE_NODE_CREATION_STACKS)) {
       void this.agent.invoke_setNodeStackTracesEnabled({enable: true});
     }
   }

package/front_end/core/sdk/DebuggerModel.ts

@@ -653,26 +653,6 @@ export class DebuggerModel extends SDKModel<EventTypes> {
     if (this.#expandCallFramesCallback) {
       pausedDetails.callFrames = await this.#expandCallFramesCallback.call(null, pausedDetails.callFrames);
     }
-
-    if (!Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.USE_SOURCE_MAP_SCOPES)) {
-      return;
-    }
-
-    // TODO(crbug.com/40277685): Support attaching/detaching source maps after pausing.
-    // Expanding call frames via source maps here is only suitable for the experiment prototype because
-    // we block until all relevant source maps are loaded.
-    // We should change this so the "Debugger Plugin" and "Source Map" have a bottle neck where they expand
-    // call frames and that bottleneck should support attaching/detaching source maps while paused.
-    const finalFrames: CallFrame[] = [];
-    for (const frame of pausedDetails.callFrames) {
-      const sourceMap = await this.sourceMapManager().sourceMapForClientPromise(frame.script);
-      if (sourceMap?.hasScopeInfo()) {
-        finalFrames.push(...sourceMap.expandCallFrame(frame));
-      } else {
-        finalFrames.push(frame);
-      }
-    }
-    pausedDetails.callFrames = finalFrames;
   }
 
   resumedScript(): void {
@@ -707,7 +687,8 @@ export class DebuggerModel extends SDKModel<EventTypes> {
     this.registerScript(script);
     this.dispatchEventToListeners(Events.ParsedScriptSource, script);
 
-    if (script.sourceMapURL && !hasSyntaxError) {
+    if ((!selectedDebugSymbol || selectedDebugSymbol.type === Protocol.Debugger.DebugSymbolsType.SourceMap) &&
+        script.sourceMapURL && !hasSyntaxError) {
       this.#sourceMapManager.attachSourceMap(script, script.sourceURL, script.sourceMapURL);
     }
 

package/front_end/core/sdk/OverlayModel.ts

@@ -534,8 +534,9 @@ export class OverlayModel extends SDKModel<EventTypes> implements ProtocolProxyA
       gridHighlightConfig: {},
       flexContainerHighlightConfig: {},
       flexItemHighlightConfig: {},
-      contrastAlgorithm: Root.Runtime.experiments.isEnabled('apca') ? Protocol.Overlay.ContrastAlgorithm.Apca :
-                                                                      Protocol.Overlay.ContrastAlgorithm.Aa,
+      contrastAlgorithm: Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.APCA) ?
+          Protocol.Overlay.ContrastAlgorithm.Apca :
+          Protocol.Overlay.ContrastAlgorithm.Aa,
     };
 
     if (mode === 'all' || mode === 'content') {

package/front_end/core/sdk/SourceMap.ts

@@ -770,15 +770,6 @@ export class SourceMap {
         this.hasIgnoreListHint(sourceURL) === other.hasIgnoreListHint(sourceURL);
   }
 
-  expandCallFrame(frame: CallFrame): CallFrame[] {
-    this.#ensureSourceMapProcessed();
-    if (this.#scopesInfo === null) {
-      return [frame];
-    }
-
-    return this.#scopesInfo.expandCallFrame(frame);
-  }
-
   resolveScopeChain(frame: CallFrame): ScopeChainEntry[]|null {
     this.#ensureSourceMapProcessed();
     if (this.#scopesInfo === null) {

package/front_end/core/sdk/SourceMapScopesInfo.ts

@@ -276,30 +276,6 @@ export class SourceMapScopesInfo {
     return result;
   }
 
-  /**
-   * Takes a V8 provided call frame and expands any inlined frames into virtual call frames.
-   *
-   * For call frames where nothing was inlined, the result contains only a single element,
-   * the provided frame but with the original name.
-   *
-   * For call frames where we are paused in inlined code, this function returns a list of
-   * call frames from "inner to outer". This is the call frame at index 0
-   * signifies the top of this stack trace fragment.
-   *
-   * The rest are "virtual" call frames and will have an "inlineFrameIndex" set in ascending
-   * order, so the condition `result[index] === result[index].inlineFrameIndex` always holds.
-   */
-  expandCallFrame(callFrame: CallFrame): CallFrame[] {
-    const {originalFunctionName, inlinedFunctions} =
-        this.findInlinedFunctions(callFrame.location().lineNumber, callFrame.location().columnNumber);
-    const result: CallFrame[] = [];
-    for (const [index, fn] of inlinedFunctions.entries()) {
-      result.push(callFrame.createVirtualCallFrame(index, fn.name));
-    }
-    result.push(callFrame.createVirtualCallFrame(result.length, originalFunctionName));
-    return result;
-  }
-
   /**
    * Given a generated position, this returns all the surrounding generated ranges from outer
    * to inner.

package/front_end/entrypoints/main/MainImpl.ts

@@ -58,6 +58,7 @@ import * as PanelCommon from '../../panels/common/common.js';
 import * as Snippets from '../../panels/snippets/snippets.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
 import * as Snackbar from '../../ui/components/snackbars/snackbars.js';
+import * as UIHelpers from '../../ui/helpers/helpers.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as ThemeSupport from '../../ui/legacy/theme_support/theme_support.js';
@@ -128,6 +129,10 @@ const UIStrings = {
    * @description Notification shown to the user whenever DevTools has finished downloading a local AI model.
    */
   aiModelDownloaded: 'AI model downloaded',
+  /**
+   * @description A title of the menu item in the main menu leading to https://github.com/ChromeDevTools/chrome-devtools-mcp.
+   */
+  getDevToolsMcp: 'Get `DevTools MCP`'
 } as const;
 const str_ = i18n.i18n.registerUIStrings('entrypoints/main/MainImpl.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -324,49 +329,59 @@ export class MainImpl {
   }
 
   #initializeExperiments(): void {
-    Root.Runtime.experiments.register('capture-node-creation-stacks', 'Capture node creation stacks');
-    Root.Runtime.experiments.register('live-heap-profile', 'Live heap profile');
     Root.Runtime.experiments.register(
-        'protocol-monitor', 'Protocol Monitor',
+        Root.Runtime.ExperimentName.CAPTURE_NODE_CREATION_STACKS, 'Capture node creation stacks');
+    Root.Runtime.experiments.register(Root.Runtime.ExperimentName.LIVE_HEAP_PROFILE, 'Live heap profile');
+    Root.Runtime.experiments.register(
+        Root.Runtime.ExperimentName.PROTOCOL_MONITOR, 'Protocol Monitor',
         'https://developer.chrome.com/blog/new-in-devtools-92/#protocol-monitor');
-    Root.Runtime.experiments.register('sampling-heap-profiler-timeline', 'Sampling heap profiler timeline');
     Root.Runtime.experiments.register(
-        'show-option-tp-expose-internals-in-heap-snapshot', 'Show option to expose internals in heap snapshots');
+        Root.Runtime.ExperimentName.SAMPLING_HEAP_PROFILER_TIMELINE, 'Sampling heap profiler timeline');
+    Root.Runtime.experiments.register(
+        Root.Runtime.ExperimentName.SHOW_OPTION_TO_EXPOSE_INTERNALS_IN_HEAP_SNAPSHOT,
+        'Show option to expose internals in heap snapshots');
 
     // Timeline
-    Root.Runtime.experiments.register('timeline-invalidation-tracking', 'Performance panel: invalidation tracking');
-    Root.Runtime.experiments.register('timeline-show-all-events', 'Performance panel: show all events');
-    Root.Runtime.experiments.register('timeline-v8-runtime-call-stats', 'Performance panel: V8 runtime call stats');
+    Root.Runtime.experiments.register(
+        Root.Runtime.ExperimentName.TIMELINE_INVALIDATION_TRACKING, 'Performance panel: invalidation tracking');
+    Root.Runtime.experiments.register(
+        Root.Runtime.ExperimentName.TIMELINE_SHOW_ALL_EVENTS, 'Performance panel: show all events');
+    Root.Runtime.experiments.register(
+        Root.Runtime.ExperimentName.TIMELINE_V8_RUNTIME_CALL_STATS, 'Performance panel: V8 runtime call stats');
     Root.Runtime.experiments.register(
         Root.Runtime.ExperimentName.TIMELINE_DEBUG_MODE, 'Performance panel: debug mode (trace event details, etc)');
 
     // Debugging
-    Root.Runtime.experiments.register('instrumentation-breakpoints', 'Instrumentation breakpoints');
-    Root.Runtime.experiments.register('use-source-map-scopes', 'Use scope information from source maps');
+    Root.Runtime.experiments.register(
+        Root.Runtime.ExperimentName.INSTRUMENTATION_BREAKPOINTS, 'Instrumentation breakpoints');
+    Root.Runtime.experiments.register(
+        Root.Runtime.ExperimentName.USE_SOURCE_MAP_SCOPES, 'Use scope information from source maps');
 
     // Advanced Perceptual Contrast Algorithm.
     Root.Runtime.experiments.register(
-        'apca', 'Advanced Perceptual Contrast Algorithm (APCA) replacing previous contrast ratio and AA/AAA guidelines',
+        Root.Runtime.ExperimentName.APCA,
+        'Advanced Perceptual Contrast Algorithm (APCA) replacing previous contrast ratio and AA/AAA guidelines',
         'https://developer.chrome.com/blog/new-in-devtools-89/#apca');
 
     // Full Accessibility Tree
     Root.Runtime.experiments.register(
-        'full-accessibility-tree', 'Full accessibility tree view in the Elements panel',
+        Root.Runtime.ExperimentName.FULL_ACCESSIBILITY_TREE, 'Full accessibility tree view in the Elements panel',
         'https://developer.chrome.com/blog/new-in-devtools-90/#accessibility-tree',
         'https://g.co/devtools/a11y-tree-feedback');
 
     // Font Editor
     Root.Runtime.experiments.register(
-        'font-editor', 'New font editor in the Styles tab',
+        Root.Runtime.ExperimentName.FONT_EDITOR, 'New font editor in the Styles tab',
         'https://developer.chrome.com/blog/new-in-devtools-89/#font');
 
     // Contrast issues reported via the Issues panel.
     Root.Runtime.experiments.register(
-        'contrast-issues', 'Automatic contrast issue reporting via the Issues panel',
+        Root.Runtime.ExperimentName.CONTRAST_ISSUES, 'Automatic contrast issue reporting via the Issues panel',
         'https://developer.chrome.com/blog/new-in-devtools-90/#low-contrast');
 
     // New cookie features.
-    Root.Runtime.experiments.register('experimental-cookie-features', 'Experimental cookie features');
+    Root.Runtime.experiments.register(
+        Root.Runtime.ExperimentName.EXPERIMENTAL_COOKIE_FEATURES, 'Experimental cookie features');
 
     // Change grouping of sources panel to use Authored/Deployed trees
     Root.Runtime.experiments.register(
@@ -384,7 +399,8 @@ export class MainImpl {
 
     Root.Runtime.experiments.enableExperimentsByDefault([
       Root.Runtime.ExperimentName.FULL_ACCESSIBILITY_TREE,
-      ...(Root.Runtime.Runtime.queryParam('isChromeForTesting') ? ['protocol-monitor'] : []),
+      Root.Runtime.ExperimentName.USE_SOURCE_MAP_SCOPES,
+      ...(Root.Runtime.Runtime.queryParam('isChromeForTesting') ? [Root.Runtime.ExperimentName.PROTOCOL_MONITOR] : []),
     ]);
 
     Root.Runtime.experiments.cleanUpStaleExperiments();
@@ -397,7 +413,7 @@ export class MainImpl {
     if (Host.InspectorFrontendHost.isUnderTest()) {
       const testParam = Root.Runtime.Runtime.queryParam('test');
       if (testParam?.includes('live-line-level-heap-profile.js')) {
-        Root.Runtime.experiments.enableForTest('live-heap-profile');
+        Root.Runtime.experiments.enableForTest(Root.Runtime.ExperimentName.LIVE_HEAP_PROFILE);
       }
     }
 
@@ -667,7 +683,7 @@ export class MainImpl {
           const runnable = await lateInitializationLoader();
           return await runnable.run();
         });
-    if (Root.Runtime.experiments.isEnabled('live-heap-profile')) {
+    if (Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.LIVE_HEAP_PROFILE)) {
       const PerfUI = await import('../../ui/legacy/components/perf_ui/perf_ui.js');
       const setting = 'memory-live-heap-profile';
       if (Common.Settings.Settings.instance().moduleSetting(setting).get()) {
@@ -942,6 +958,15 @@ export class MainMenuItem implements UI.Toolbar.Provider {
 
     contextMenu.defaultSection().appendAction('freestyler.main-menu', undefined, /* optional */ true);
 
+    contextMenu.defaultSection().appendItem(i18nString(UIStrings.getDevToolsMcp), () => {
+      UIHelpers.openInNewTab('https://github.com/ChromeDevTools/chrome-devtools-mcp');
+    }, {
+      additionalElement: UI.UIUtils.maybeCreateNewBadge('get-devtools-mcp'),
+      jslogContext: 'get-devtools-mcp',
+    });
+
+    contextMenu.defaultSection().appendSeparator();
+
     if (dockController.dockSide() === UI.DockController.DockState.UNDOCKED) {
       const mainTarget = SDK.TargetManager.TargetManager.instance().primaryPageTarget();
       if (mainTarget && mainTarget.type() === SDK.Target.Type.FRAME) {

package/front_end/generated/SupportedCSSProperties.js

@@ -730,14 +730,13 @@ export const generatedProperties = [
    "text-emphasis-color",
    "text-emphasis-position",
    "text-emphasis-style",
-   "text-grow",
+   "text-fit",
    "text-indent",
    "text-justify",
    "text-orientation",
    "text-overflow",
    "text-rendering",
    "text-shadow",
-   "text-shrink",
    "text-size-adjust",
    "text-spacing-trim",
    "text-transform",
@@ -4440,7 +4439,7 @@ export const generatedProperties = [
   "name": "text-emphasis-style"
  },
  {
-  "name": "text-grow"
+  "name": "text-fit"
  },
  {
   "inherited": true,
@@ -4489,9 +4488,6 @@ export const generatedProperties = [
   ],
   "name": "text-shadow"
  },
- {
-  "name": "text-shrink"
- },
  {
   "inherited": true,
   "keywords": [