diff --git a/config/gni/devtools_grd_files.gni b/config/gni/devtools_grd_files.gni index 317517f56b0..80df96a7e71 100644 --- 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 index bb026253b2f..275a1092d5c 100644 --- 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 index 876a633bb8f..61869aa0db9 100644 --- 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(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` +
+
{ + if (e.key === 'Enter' || e.key === ' ') { + e.preventDefault(); + this.#onToggleExpand(); + } + }} + jslog=${VisualLogging.expand().track({click: true})} + > + + + [FB-only] Network event coverage + +
+ ${this.#expanded ? html` +
+ Only fetch() and XMLHttpRequest events are available at Meta. Images fetched via <Image> are not currently supported. +
+ ` : Lit.nothing} +
+ `, + 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 index c2debb6873d..cb27e53bf1b 100644 --- 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 index c1eb4fcbe0c..92cfb7fb450 100644 --- 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 index 3d6dff28525..44a7ff10a26 100644 --- 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',