chrome-devtools-frontend 1.0.1571007 → 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/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 {

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/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/entrypoints/main/MainImpl.ts

@@ -329,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(
@@ -389,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();
@@ -402,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);
       }
     }
 
@@ -672,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()) {

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": [

package/front_end/models/issues_manager/ContrastCheckTrigger.ts

@@ -45,7 +45,7 @@ export class ContrastCheckTrigger {
   }
 
   #checkContrast(resourceTreeModel: SDK.ResourceTreeModel.ResourceTreeModel): void {
-    if (!Root.Runtime.experiments.isEnabled('contrast-issues')) {
+    if (!Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.CONTRAST_ISSUES)) {
       return;
     }
     void resourceTreeModel.target().auditsAgent().invoke_checkContrast({});
@@ -60,7 +60,7 @@ export class ContrastCheckTrigger {
 
   async #frameAdded(event: Common.EventTarget.EventTargetEvent<SDK.ResourceTreeModel.ResourceTreeFrame>):
       Promise<void> {
-    if (!Root.Runtime.experiments.isEnabled('contrast-issues')) {
+    if (!Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.CONTRAST_ISSUES)) {
       return;
     }
     const frame = event.data;

package/front_end/models/javascript_metadata/NativeFunctions.js

@@ -6594,6 +6594,14 @@ export const NativeFunctions = [
     name: "setHTML",
     signatures: [["html","?options"]]
   },
+  {
+    name: "streamAppendHTMLUnsafe",
+    signatures: [["?options"]]
+  },
+  {
+    name: "streamHTMLUnsafe",
+    signatures: [["?options"]]
+  },
   {
     name: "scrollIntoViewIfNeeded",
     signatures: [["?centerIfNeeded"]]

package/front_end/models/trace/ModelImpl.ts

@@ -10,10 +10,6 @@ import type * as Insights from './insights/insights.js';
 import {TraceParseProgressEvent, TraceProcessor} from './Processor.js';
 import * as Types from './types/types.js';
 
-// Note: this model is implemented in a way that can support multiple trace
-// processors. Currently there is only one implemented, but you will see
-// references to "processors" plural because it can easily be extended in the future.
-
 /**
  * The Model is responsible for parsing arrays of raw trace events and storing the
  * resulting data. It can store multiple traces at once, and can return the data for

package/front_end/panels/accessibility/AccessibilitySidebarView.ts

@@ -95,7 +95,7 @@ export class AccessibilitySidebarView extends UI.Widget.VBox {
     if (!accessibilityModel) {
       return;
     }
-    if (!Root.Runtime.experiments.isEnabled('full-accessibility-tree')) {
+    if (!Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.FULL_ACCESSIBILITY_TREE)) {
       accessibilityModel.clear();
     }
     await accessibilityModel.requestPartialAXTree(node);

package/front_end/panels/ai_assistance/PatchWidget.ts

@@ -5,6 +5,7 @@
 import '../../ui/legacy/legacy.js';
 import '../../ui/components/markdown_view/markdown_view.js';
 import '../../ui/components/spinners/spinners.js';
+import '../../ui/kit/kit.js';
 
 import * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';
@@ -200,15 +201,13 @@ const DEFAULT_VIEW: View = (input, output, target) => {
       return nothing;
     }
 
-    return html`<x-link
+    return html`<devtools-link
           class="link"
           title="${UIStringsNotTranslate.viewUploadedFiles} ${UIStringsNotTranslate.opensInNewTab}"
           href="data:text/plain;charset=utf-8,${encodeURIComponent(input.sources)}"
-          jslog=${VisualLogging.link('files-used-in-patching').track({
-      click: true
-    })}>
+          .jslogContext=${'files-used-in-patching'}>
           ${UIStringsNotTranslate.viewUploadedFiles}
-        </x-link>`;
+        </devtools-link>`;
   }
 
   function renderHeader(): LitTemplate {
@@ -297,12 +296,10 @@ const DEFAULT_VIEW: View = (input, output, target) => {
       return html`
           <div class="footer">
             <div class="left-side">
-              <x-link class="link disclaimer-link" href="https://support.google.com/legal/answer/13505487" jslog=${
-          VisualLogging.link('code-disclaimer').track({
-            click: true,
-          })}>
+              <devtools-link class="link disclaimer-link" href="https://support.google.com/legal/answer/13505487" .jslogContext=${
+                 'code-disclaimer'}>
                 ${lockedString(UIStringsNotTranslate.codeDisclaimer)}
-              </x-link>
+              </devtools-link>
               ${renderSourcesLink()}
             </div>
             <div class="save-or-discard-buttons">
@@ -575,13 +572,11 @@ export class PatchWidget extends UI.Widget.Widget {
         {
           iconName: 'warning',
           // clang-format off
-          content: html`<x-link
+          content: html`<devtools-link
             href=${CODE_SNIPPET_WARNING_URL}
             class="link devtools-link"
-            jslog=${VisualLogging.link('code-snippets-explainer.patch-widget').track({
-              click: true
-            })}
-          >${lockedString(UIStringsNotTranslate.freDisclaimerTextUseWithCaution)}</x-link>`,
+            .jslogContext=${'code-snippets-explainer.patch-widget'}
+          >${lockedString(UIStringsNotTranslate.freDisclaimerTextUseWithCaution)}</devtools-link>`,
           // clang-format on
         }
       ],

package/front_end/panels/ai_assistance/SelectWorkspaceDialog.ts

@@ -2,6 +2,8 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import '../../ui/kit/kit.js';
+
 import * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
@@ -13,7 +15,6 @@ import * as Workspace from '../../models/workspace/workspace.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import {html, nothing, render} from '../../ui/lit/lit.js';
-import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import selectWorkspaceDialogStyles from './selectWorkspaceDialog.css.js';
 
@@ -89,11 +90,11 @@ export const SELECT_WORKSPACE_DIALOG_DEFAULT_VIEW: View = (input, _output, targe
           <!-- Hardcoding, because there is no 'getFormatLocalizedString' equivalent for 'lockedString' -->
           <div>
             Tip: provide a
-            <x-link
+            <devtools-link
               class="devtools-link"
               href="https://goo.gle/devtools-automatic-workspace-folders"
-              jslog=${VisualLogging.link().track({click: true, keydown:'Enter|Space'}).context('automatic-workspaces-documentation')}
-            >com.chrome.devtools.json</x-link>
+              .jslogContext=${'automatic-workspaces-documentation'}
+            >com.chrome.devtools.json</devtools-link>
             file to automatically connect your project to DevTools.
           </div>
         ` : nothing}

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

@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 
 import '../../../ui/components/markdown_view/markdown_view.js';
+import '../../../ui/kit/kit.js';
 
 import * as Common from '../../../core/common/common.js';
 import * as Host from '../../../core/host/host.js';
@@ -576,12 +577,12 @@ function renderImageChatMessage(inlineData: Host.AidaClient.MediaBlob): Lit.LitT
   }
   const imageUrl = `data:${inlineData.mimeType};base64,${inlineData.data}`;
   // clang-format off
-    return html`<x-link
+    return html`<devtools-link
       class="image-link" title=${UIStringsNotTranslate.openImageInNewTab}
       href=${imageUrl}
     >
       <img src=${imageUrl} alt=${UIStringsNotTranslate.imageInputSentToTheModel} />
-    </x-link>`;
+    </devtools-link>`;
   // clang-format on
 }