facebook · huntie · Dec 16, 2025 · Dec 12, 2025
diff --git a/config/gni/devtools_grd_files.gni b/config/gni/devtools_grd_files.gni
@@ -1654,6 +1654,8 @@ grd_files_debug_sources = [
   "front_end/panels/network/components/EditableSpan.js",
   "front_end/panels/network/components/HeaderSectionRow.css.js",
   "front_end/panels/network/components/HeaderSectionRow.js",
+  "front_end/panels/network/components/NetworkEventCoverageInfobar.css.js",
+  "front_end/panels/network/components/NetworkEventCoverageInfobar.js",
   "front_end/panels/network/components/RequestHeaderSection.css.js",
   "front_end/panels/network/components/RequestHeaderSection.js",
   "front_end/panels/network/components/RequestHeadersView.css.js",

diff --git a/front_end/global_typings/react_native.d.ts b/front_end/global_typings/react_native.d.ts
@@ -21,5 +21,7 @@ declare global {
     var reactNativeOpenInEditorButtonImage: string|undefined;
     // eslint-disable-next-line no-var,@typescript-eslint/naming-convention
     var FB_ONLY__reactNativeFeedbackLink: string|undefined;
+    // eslint-disable-next-line no-var,@typescript-eslint/naming-convention
+    var FB_ONLY__enableNetworkCoverageNotice: boolean|undefined;
   }
 }
diff --git a/front_end/panels/network/NetworkLogView.ts b/front_end/panels/network/NetworkLogView.ts
@@ -65,6 +65,7 @@ import {
   type NetworkNode,
   NetworkRequestNode,
 } from './NetworkDataGridNode.js';
+import './components/NetworkEventCoverageInfobar.js';
 import {NetworkFrameGrouper} from './NetworkFrameGrouper.js';
 import networkLogViewStyles from './networkLogView.css.js';
 import {NetworkLogViewColumns} from './NetworkLogViewColumns.js';
@@ -571,6 +572,12 @@ export class NetworkLogView extends Common.ObjectWrapper.eventMixin<EventTypes,
     this.durationCalculator = new NetworkTransferDurationCalculator();
     this.calculatorInternal = this.timeCalculatorInternal;
 
+    // [RN][FB-only] Add network event coverage info banner
+    if (globalThis.FB_ONLY__enableNetworkCoverageNotice) {
+      const infobar = document.createElement('devtools-network-event-coverage-infobar');
+      this.element.appendChild(infobar);
+    }
+
     this.columnsInternal = new NetworkLogViewColumns(
         this, this.timeCalculatorInternal, this.durationCalculator, networkLogLargeRowsSetting);
     this.columnsInternal.show(this.element);
@@ -1138,6 +1145,12 @@ export class NetworkLogView extends Common.ObjectWrapper.eventMixin<EventTypes,
       this.recordingHint.contentElement.appendChild(button);
     }
 
+    // [RN][FB-only] Add network event coverage info banner
+    if (globalThis.FB_ONLY__enableNetworkCoverageNotice) {
+      const infobar = document.createElement('devtools-network-event-coverage-infobar');
+      this.recordingHint.element.prepend(infobar);
+    }
+
     this.recordingHint.show(this.element);
     this.setHidden(true);
   }

diff --git a/front_end/panels/network/components/BUILD.gn b/front_end/panels/network/components/BUILD.gn
@@ -12,6 +12,7 @@ generate_css("css_files") {
   sources = [
     "EditableSpan.css",
     "HeaderSectionRow.css",
+    "NetworkEventCoverageInfobar.css",
     "RequestHeaderSection.css",
     "RequestHeadersView.css",
     "RequestTrustTokensView.css",
@@ -24,6 +25,7 @@ devtools_module("components") {
   sources = [
     "EditableSpan.ts",
     "HeaderSectionRow.ts",
+    "NetworkEventCoverageInfobar.ts",
     "RequestHeaderSection.ts",
     "RequestHeadersView.ts",
     "RequestTrustTokensView.ts",

diff --git a/front_end/panels/network/components/NetworkEventCoverageInfobar.css b/front_end/panels/network/components/NetworkEventCoverageInfobar.css
@@ -0,0 +1,61 @@
+/*
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ * 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.
+ */
+
+:host {
+  display: block;
+}
+
+.infobar {
+  background-color: var(--sys-color-surface-yellow);
+  color: var(--sys-color-on-surface-yellow);
+  border-radius: 6px;
+  padding: 6px 10px;
+  margin: 6px;
+  font-size: 11px;
+  max-width: 320px;
+}
+
+.infobar-header {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  cursor: pointer;
+  user-select: none;
+}
+
+.arrow-icon {
+  display: inline-block;
+  mask-image: var(--image-file-triangle-right);
+  background-color: var(--icon-default);
+  height: 12px;
+  width: 12px;
+  transition: transform 200ms;
+  flex-shrink: 0;
+}
+
+.arrow-icon.expanded {
+  transform: rotate(90deg);
+}
+
+.infobar-message {
+  font-weight: 500;
+}
+
+.info-icon {
+  flex-shrink: 0;
+}
+
+.close-button {
+  flex-shrink: 0;
+  margin-left: auto;
+}
+
+.infobar-details {
+  margin-top: 6px;
+  margin-left: 17px;
+  color: var(--sys-color-on-surface-subtle);
+}
diff --git a/front_end/panels/network/components/NetworkEventCoverageInfobar.ts b/front_end/panels/network/components/NetworkEventCoverageInfobar.ts
@@ -0,0 +1,99 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+// 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 '../../../ui/components/icon_button/icon_button.js';
+
+import * as Common from '../../../core/common/common.js';
+import * as Buttons from '../../../ui/components/buttons/buttons.js';
+import * as Lit from '../../../ui/lit/lit.js';
+import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
+
+import networkEventCoverageInfobarStylesRaw from './NetworkEventCoverageInfobar.css.js';
+
+const networkEventCoverageInfobarStyles = new CSSStyleSheet();
+networkEventCoverageInfobarStyles.replaceSync(networkEventCoverageInfobarStylesRaw.cssText);
+
+const {html} = Lit;
+
+const DISMISSED_SETTING_NAME = 'network-event-coverage-infobar-dismissed';
+
+export class NetworkEventCoverageInfobar extends HTMLElement {
+  readonly #shadow = this.attachShadow({mode: 'open'});
+  #expanded = false;
+  readonly #dismissedSetting = Common.Settings.Settings.instance().createSetting<boolean>(DISMISSED_SETTING_NAME, false);
+
+  connectedCallback(): void {
+    this.#shadow.adoptedStyleSheets = [networkEventCoverageInfobarStyles];
+    this.#render();
+  }
+
+  #onToggleExpand(): void {
+    this.#expanded = !this.#expanded;
+    this.#render();
+  }
+
+  #onClose(event: Event): void {
+    event.stopPropagation();
+    this.#dismissedSetting.set(true);
+    this.#render();
+  }
+
+  #render(): void {
+    if (this.#dismissedSetting.get()) {
+      Lit.render(Lit.nothing, this.#shadow, {host: this});
+      return;
+    }
+    // clang-format off
+    Lit.render(
+      html`
+        <div class="infobar" jslog=${VisualLogging.section('network-event-coverage-infobar')}>
+          <div
+            class="infobar-header"
+            role="button"
+            tabindex="0"
+            aria-expanded=${this.#expanded ? 'true' : 'false'}
+            @click=${this.#onToggleExpand}
+            @keydown=${(e: KeyboardEvent) => {
+              if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                this.#onToggleExpand();
+              }
+            }}
+            jslog=${VisualLogging.expand().track({click: true})}
+          >
+            <span class="arrow-icon ${this.#expanded ? 'expanded' : ''}"></span>
+            <devtools-icon class="info-icon" .data=${{iconName: 'info', color: 'var(--sys-color-on-surface-yellow)', width: '16px', height: '16px'}}></devtools-icon>
+            <span class="infobar-message">[FB-only] Network event coverage</span>
+            <devtools-button
+              class="close-button"
+              title="Dismiss"
+              .size=${Buttons.Button.Size.MICRO}
+              .iconName=${'cross'}
+              .variant=${Buttons.Button.Variant.ICON}
+              .jslogContext=${'dismiss'}
+              @click=${this.#onClose}
+            ></devtools-button>
+          </div>
+          ${this.#expanded ? html`
+            <div class="infobar-details">
+              Only fetch() and XMLHttpRequest events are available at Meta. Images fetched via &lt;Image&gt; are not currently supported.
+            </div>
+          ` : Lit.nothing}
+        </div>
+      `,
+      this.#shadow,
+      {host: this},
+    );
+    // clang-format on
+  }
+}
+
+customElements.define('devtools-network-event-coverage-infobar', NetworkEventCoverageInfobar);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'devtools-network-event-coverage-infobar': NetworkEventCoverageInfobar;
+  }
+}
diff --git a/front_end/panels/network/components/components.ts b/front_end/panels/network/components/components.ts
@@ -4,6 +4,7 @@
 
 import * as EditableSpan from './EditableSpan.js';
 import * as HeaderSectionRow from './HeaderSectionRow.js';
+import * as NetworkEventCoverageInfobar from './NetworkEventCoverageInfobar.js';
 import * as RequestHeaderSection from './RequestHeaderSection.js';
 import * as RequestHeadersView from './RequestHeadersView.js';
 import * as RequestTrustTokensView from './RequestTrustTokensView.js';
@@ -13,6 +14,7 @@ import * as WebBundleInfoView from './WebBundleInfoView.js';
 export {
   EditableSpan,
   HeaderSectionRow,
+  NetworkEventCoverageInfobar,
   RequestHeaderSection,
   RequestHeadersView,
   RequestTrustTokensView,

diff --git a/front_end/ui/visual_logging/KnownContextValues.ts b/front_end/ui/visual_logging/KnownContextValues.ts
@@ -2434,6 +2434,7 @@ export const knownContextValues = new Set([
   'network-conditions.network-mid-tier-mobile',
   'network-conditions.network-offline',
   'network-conditions.network-online',
+  'network-event-coverage-infobar',
   'network-event-source-message-filter',
   'network-film-strip',
   'network-hide-chrome-extensions',

diff --git a/scripts/eslint_rules/lib/check-license-header.js b/scripts/eslint_rules/lib/check-license-header.js
@@ -83,6 +83,7 @@ const META_CODE_PATHS = [
   'entrypoints/shell/browser_compatibility_guard.ts',
   'global_typings/react_native.d.ts',
   'models/react_native',
+  'panels/network/components/NetworkEventCoverageInfobar.ts',
   'panels/react_devtools',
   'panels/rn_welcome',
   'panels/timeline/ReactNativeTimelineLandingPage.ts',