Fix build and lint after chromium/7827 sync

Resolving the chromium/7827 merge surfaced compile/lint breakages that aren't textual conflicts — they come from the TypeScript 6.0 upgrade and upstream API changes/removals. This commit makes the synced tree build (gn + tsc) and lint cleanly. Kept separate from the merge commit for reviewability.

**Experiments**: Upstream moved `ExperimentName` into `core/root/ExperimentNames.ts`. Re-export it from `Runtime.ts` so existing `Root.Runtime.ExperimentName.*` references keep resolving, add the React Native experiment values to `ExperimentNames.ts`, register them for tests in the new `RuntimeHelpers.ts`, and switch RN `isEnabled/setEnabled` call sites from `RNExperimentName` to `ExperimentName` (the core API is strictly typed).

**rehydrated_devtools_app**: Upstream removed this entrypoint in favour of `trace_app`, but the RN debugger opens `rehydrated_devtools_app.html` by name. Restored the entrypoint (alongside `trace_app`) and its BUILD.gn visibility/deps; the rehydrating connection accepts both via `isTraceApp() || getPathName().includes('rehydrated_devtools_app')`.

**Upstream API migrations in RN files**: `UI.XLink`/`<x-link>` (removed) → `<devtools-link>` from `ui/kit`; `UIUtils.createInlineButton` (removed) inlined; `i18n.getFormatLocalizedString` → `ui/i18n`; `SimpleView`/`VBox` options-object constructors; `Trace.Handlers.Types.ParsedTrace` → `Trace.TraceModel.ParsedTrace` (handler data now under `.data`); CSS `*.css.js` imports are branded strings (drop `.cssText`); `getRegisteredViewExtensions` is now a `ViewManager` instance method.

**TypeScript 6.0 / build**: Export the `RNPerfMetrics` class (TS4094 on the re-exported singleton); convert the `check-license-header` eslint rule to ESM; add missing BUILD.gn deps (`ui/components/adorners`, `ui/components/icon_button`, `ui/kit`) and a dropped `Root` import in NetworkLogView; convert lantern metric test `it()` callbacks to `function()` so `this` is the Mocha context.

**Dependencies / lint**: Drop the fork's `nanoid`/`serialize-javascript`/`ws` dependency overrides (superseded by upstream's newer tree); exempt RN components from upstream's new `no-lit-render-outside-of-view` / `no-imperative-dom-api` / `no-adopted-style-sheets` rules pending a proper view-function migration.

Author: huntie

eslint.config.mjs

@@ -855,6 +855,30 @@ export default defineConfig([
       '@devtools/no-lit-render-outside-of-view': 'off',
     },
   },
+  {
+    // [RN] React Native-specific components predate upstream's view-function lint
+    // rules and use direct Lit render / imperative DOM / adoptedStyleSheets patterns.
+    // Keep them exempt until they are migrated. Keep in sync with META_CODE_PATHS in
+    // scripts/eslint_rules/lib/check-license-header.js.
+    name: 'React Native-specific files',
+    files: [
+      'front_end/core/rn_experiments/**/*.ts',
+      'front_end/entrypoints/rn_fusebox/**/*.ts',
+      'front_end/models/react_native/**/*.ts',
+      'front_end/panels/react_devtools/**/*.ts',
+      'front_end/panels/rn_welcome/**/*.ts',
+      'front_end/panels/network/components/NetworkEventCoverageInfobar.ts',
+      'front_end/panels/timeline/ReactNativeTimelineLandingPage.ts',
+      'front_end/panels/timeline/components/RNPerfIssueTypes.ts',
+      'front_end/panels/timeline/components/SidebarRNPerfIssueItem.ts',
+      'front_end/panels/timeline/components/SidebarRNPerfSignalsTab.ts',
+    ],
+    rules: {
+      '@devtools/no-lit-render-outside-of-view': 'off',
+      '@devtools/no-imperative-dom-api': 'off',
+      '@devtools/no-adopted-style-sheets': 'off',
+    },
+  },
   {
     name: 'Keep models/trace isolated',
     files: ['front_end/models/trace/**/*.ts'],

front_end/core/host/RNPerfMetrics.ts

@@ -20,7 +20,9 @@ export function getInstance(): RNPerfMetrics {
 
 type PanelLocation = 'main'|'drawer';
 type UnsubscribeFn = () => void;
-class RNPerfMetrics {
+// Exported so the type of the `rnPerfMetrics` singleton re-exported from host.ts
+// is nameable (required by TypeScript 6.0's stricter declaration emit, TS4094).
+export class RNPerfMetrics {
   readonly #consoleErrorMethod = 'error';
   #listeners = new Set<RNReliabilityEventListener>();
   #launchId: string|null = null;

front_end/core/rn_experiments/experimentsImpl.ts

@@ -144,10 +144,12 @@ class RNExperimentsSupport {
 
   copyInto(other: Root.Runtime.ExperimentsSupport, titlePrefix = ''): void {
     for (const [name, spec] of this.#experiments) {
+      // RNExperimentName mirrors the React Native entries in Root.Runtime.ExperimentName
+      // (see ExperimentNames.ts); cast to satisfy the core experiments API.
+      const coreName = name as unknown as Root.Runtime.ExperimentName;
       other.register(
-        name,
+        coreName,
         titlePrefix + spec.title,
-        spec.unstable,
         spec.docLink,
         spec.feedbackLink,
       );
@@ -156,7 +158,7 @@ class RNExperimentsSupport {
           isReactNativeEntryPoint: state.isReactNativeEntryPoint,
         })
       ) {
-        other.enableExperimentsByDefault([name]);
+        other.enableExperimentsByDefault([coreName]);
       }
     }
     for (const name of this.#defaultEnabledCoreExperiments) {

front_end/core/sdk/RehydratingConnection.test.ts

@@ -213,8 +213,8 @@ describeWithEnvironment('RehydratingConnection emittance', function() {
     const reveal = sinon.stub(Common.Revealer.RevealerRegistry.prototype, 'reveal').resolves();
     const messageLog: Array<string|Message> = [];
 
-    const conn = new SDK.RehydratingConnection.RehydratingConnectionTransport((e: string) => {
-      throw new Error(`Connection lost: ${e}`);
+    const conn = new SDK.RehydratingConnection.RehydratingConnectionTransport(connectionLostDetails => {
+      throw new Error(`Connection lost: ${connectionLostDetails?.reason}`);
     });
 
     // Impractical to invoke the real devtools frontend, so we fake the 3 CDP handlers that

front_end/entrypoints/main/BUILD.gn

@@ -102,6 +102,8 @@ devtools_entrypoint("meta") {
   visibility = [
     "../../panels/greendev/*",
     "../greendev_floaty/*",
+    "../rehydrated_devtools_app:*",
+    "../rn_fusebox:*",
     "../shell/*",
     "../trace_app:*",
   ]

front_end/entrypoints/rehydrated_devtools_app/BUILD.gn

@@ -0,0 +1,33 @@
+# Copyright 2024 The Chromium Authors. All rights reserved.
+# Use of this source code is governed by a BSD-style license that can be
+# found in the LICENSE file.
+import("../../../scripts/build/ninja/devtools_entrypoint.gni")
+import("../visibility.gni")
+
+devtools_entrypoint("entrypoint") {
+  entrypoint = "rehydrated_devtools_app.ts"
+
+  deps = [
+    "../../Images:optimize_images",
+    "../../core/sdk:meta",
+    "../../entrypoints/inspector_main:meta",
+    "../../entrypoints/main:meta",
+    "../../models/logs:meta",
+    "../../models/persistence:meta",
+    "../../panels/browser_debugger:meta",
+    "../../panels/mobile_throttling:meta",
+    "../../panels/protocol_monitor:meta",
+    "../../panels/sensors:meta",
+    "../../panels/settings:meta",
+    "../../panels/sources:meta",
+    "../../panels/timeline:meta",
+    "../../ui/legacy/components/perf_ui:meta",
+    "../../ui/legacy/components/quick_open:meta",
+    "../../ui/legacy/components/source_frame:meta",
+    "../main:bundle",
+  ]
+
+  visibility = [ "../../:*" ]
+
+  visibility += devtools_entrypoints_visibility
+}

front_end/entrypoints/rehydrated_devtools_app/rehydrated_devtools_app.ts

@@ -0,0 +1,30 @@
+
+// Copyright 2024 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+import '../main/main-meta.js';
+import '../inspector_main/inspector_main-meta.js';
+import '../../core/sdk/sdk-meta.js';
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore: tsc 6.0 does not support side-effect imports without a type definition.
+// We cannot use `@ts-expect-error` here because the import is correctly resolved
+// when bundling the application (which doesn't error) and only errors in unbundled builds.
+import '../../Images/Images.js';
+import '../../models/logs/logs-meta.js';
+import '../../models/persistence/persistence-meta.js';
+import '../../panels/browser_debugger/browser_debugger-meta.js';
+// panels/timeline depends on mobile_throttling for settings UI
+import '../../panels/mobile_throttling/mobile_throttling-meta.js';
+import '../../panels/protocol_monitor/protocol_monitor-meta.js';
+import '../../panels/settings/settings-meta.js';
+import '../../panels/sources/sources-meta.js';
+// sdk/emulation depends on panels/sensors: crbug.com/1376652
+import '../../panels/sensors/sensors-meta.js';
+import '../../panels/timeline/timeline-meta.js';
+import '../../ui/legacy/components/perf_ui/perf_ui-meta.js';
+import '../../ui/legacy/components/quick_open/quick_open-meta.js';
+import '../../ui/legacy/components/source_frame/source_frame-meta.js';
+
+import * as Main from '../main/main.js';
+
+new Main.MainImpl.MainImpl();

front_end/entrypoints/rn_fusebox/BUILD.gn

@@ -20,6 +20,7 @@ devtools_module("rn_fusebox") {
     "../../core/i18n:bundle",
     "../../core/root:bundle",
     "../../core/sdk:bundle",
+    "../../ui/kit:bundle",
     "../../ui/legacy:bundle",
   ]
 }

front_end/entrypoints/rn_fusebox/FuseboxFeatureObserver.ts

@@ -3,6 +3,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 type * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as Root from '../../core/root/root.js';
@@ -115,7 +117,7 @@ export class FuseboxFeatureObserver implements
     const drawerLocationPromise = viewManager.resolveLocation(UI.ViewManager.ViewLocationValues.DRAWER_VIEW);
     void Promise.all([panelLocationPromise, drawerLocationPromise])
       .then(([panelLocation, drawerLocation]) => {
-        UI.ViewManager.getRegisteredViewExtensions().forEach(view => {
+        viewManager.getRegisteredViewExtensions().forEach(view => {
           if (view.location() === UI.ViewManager.ViewLocationValues.DRAWER_VIEW) {
             drawerLocation?.removeView(view);
           } else {
@@ -143,8 +145,8 @@ export class FuseboxFeatureObserver implements
   }
 
   async #ensureTimelineFramesEnabled(): Promise<void> {
-    if (!Root.Runtime.experiments.isEnabled(Root.Runtime.RNExperimentName.ENABLE_TIMELINE_FRAMES)) {
-      Root.Runtime.experiments.setEnabled(Root.Runtime.RNExperimentName.ENABLE_TIMELINE_FRAMES, true);
+    if (!Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.ENABLE_TIMELINE_FRAMES)) {
+      Root.Runtime.experiments.setEnabled(Root.Runtime.ExperimentName.ENABLE_TIMELINE_FRAMES, true);
       UI.InspectorView?.InspectorView?.instance()?.displayReloadRequiredWarning(
           i18nString(UIStrings.reloadRequiredForTimelineFramesMessage));
     }
@@ -206,7 +208,7 @@ export class FuseboxFeatureObserver implements
           <div class="alert-title">${titleText}</div>
           <div class="alert-detail">
             ${i18nString(UIStrings.multiHostFeatureDisabledDetail)}
-            See <x-link href="https://github.com/react-native-community/discussions-and-proposals/discussions/954" class="devtools-link" jslog=${VisualLogging.link().track({click: true, keydown:'Enter|Space'}).context('multi-host-learn-more')}>discussions/954</x-link>.
+            See <devtools-link href="https://github.com/react-native-community/discussions-and-proposals/discussions/954" class="devtools-link" jslog=${VisualLogging.link().track({click: true, keydown:'Enter|Space'}).context('multi-host-learn-more')}>discussions/954</devtools-link>.
           </div>
         </div>
       `, alertBar, {host: this});

front_end/models/trace/lantern/core/NetworkAnalyzer.test.ts

@@ -158,7 +158,7 @@ describeWithEnvironment('NetworkAnalyzer', () => {
       assert.deepEqual(result, expected);
     });
 
-    it('should work on a real trace', async () => {
+    it('should work on a real trace', async function() {
       const requests = await createRequests(this, trace);
       const result = NetworkAnalyzer.estimateIfConnectionWasReused(requests);
       const distinctConnections = Array.from(result.values()).filter(item => !item).length;
@@ -267,15 +267,15 @@ describeWithEnvironment('NetworkAnalyzer', () => {
       assert.deepEqual(result.get('https://example.com'), expected);
     });
 
-    it('should work on a real trace', async () => {
+    it('should work on a real trace', async function() {
       const requests = await createRequests(this, trace);
       const result = NetworkAnalyzer.estimateRTTByOrigin(requests);
       assertCloseEnough(result.get('https://www.paulirish.com')?.min ?? 0, 10);
       assertCloseEnough(result.get('https://www.googletagmanager.com')?.min ?? 0, 17);
       assertCloseEnough(result.get('https://www.google-analytics.com')?.min ?? 0, 10);
     });
 
-    it('should approximate well with either method', async () => {
+    it('should approximate well with either method', async function() {
       const requests = await createRequests(this, trace);
       const result = NetworkAnalyzer.estimateRTTByOrigin(requests).get(NetworkAnalyzer.summary);
       const resultApprox = NetworkAnalyzer
@@ -318,15 +318,15 @@ describeWithEnvironment('NetworkAnalyzer', () => {
       assert.deepEqual(result.get('https://example.com'), expected);
     });
 
-    it('should work on a real trace', async () => {
+    it('should work on a real trace', async function() {
       const requests = await createRequests(this, trace);
       const result = NetworkAnalyzer.estimateServerResponseTimeByOrigin(requests);
       assertCloseEnough(result.get('https://www.paulirish.com')?.avg ?? 0, 35);
       assertCloseEnough(result.get('https://www.googletagmanager.com')?.avg ?? 0, 8);
       assertCloseEnough(result.get('https://www.google-analytics.com')?.avg ?? 0, 8);
     });
 
-    it('should approximate well with either method', async () => {
+    it('should approximate well with either method', async function() {
       const requests = await createRequests(this, trace);
       const result = NetworkAnalyzer.estimateServerResponseTimeByOrigin(requests).get(
           NetworkAnalyzer.summary,
@@ -443,7 +443,7 @@ describeWithEnvironment('NetworkAnalyzer', () => {
   });
 
   describe('#computeRTTAndServerResponseTime', function() {
-    it('should work', async () => {
+    it('should work', async function() {
       const requests = await createRequests(this, trace);
       const result = NetworkAnalyzer.computeRTTAndServerResponseTime(requests);
 
@@ -490,14 +490,14 @@ describeWithEnvironment('NetworkAnalyzer', () => {
   });
 
   describe('#findMainDocument', function() {
-    it('should find the main document', async () => {
+    it('should find the main document', async function() {
       const requests = await createRequests(this, trace);
       const mainDocument = NetworkAnalyzer.findResourceForUrl(requests, 'https://www.paulirish.com/');
       assert.isOk(mainDocument);
       assert.strictEqual(mainDocument.url, 'https://www.paulirish.com/');
     });
 
-    it('should find the main document if the URL includes a fragment', async () => {
+    it('should find the main document if the URL includes a fragment', async function() {
       const requests = await createRequests(this, trace);
       const mainDocument = NetworkAnalyzer.findResourceForUrl(requests, 'https://www.paulirish.com/#info');
       assert.isOk(mainDocument);
@@ -509,7 +509,7 @@ describeWithEnvironment('NetworkAnalyzer', () => {
     expectConsoleLogs({
       error: ['Error: missing metric scores for specified navigation'],
     });
-    it('should resolve to the same document when no redirect', async () => {
+    it('should resolve to the same document when no redirect', async function() {
       const requests = await createRequests(this, trace);
       const mainDocument = NetworkAnalyzer.findResourceForUrl(requests, 'https://www.paulirish.com/');
       assert.isOk(mainDocument);
@@ -518,7 +518,7 @@ describeWithEnvironment('NetworkAnalyzer', () => {
       assert.strictEqual(finalDocument.url, 'https://www.paulirish.com/');
     });
 
-    it('should resolve to the final document with redirects', async () => {
+    it('should resolve to the final document with redirects', async function() {
       const requests = await createRequests(this, traceWithRedirect);
       const mainDocument = NetworkAnalyzer.findResourceForUrl(requests, 'http://www.vkontakte.ru/');
       assert.isOk(mainDocument);