Skip to content

Commit e74ad4a

Browse files
huntiehuntie
committed
Add FB only network event coverage notice
1 parent 40e2a7d commit e74ad4a

File tree

9 files changed

+183
-0
lines changed

9 files changed

+183
-0
lines changed

‎config/gni/devtools_grd_files.gni‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1654,6 +1654,8 @@ grd_files_debug_sources = [
16541654
"front_end/panels/network/components/EditableSpan.js",
16551655
"front_end/panels/network/components/HeaderSectionRow.css.js",
16561656
"front_end/panels/network/components/HeaderSectionRow.js",
1657+
"front_end/panels/network/components/NetworkEventCoverageInfobar.css.js",
1658+
"front_end/panels/network/components/NetworkEventCoverageInfobar.js",
16571659
"front_end/panels/network/components/RequestHeaderSection.css.js",
16581660
"front_end/panels/network/components/RequestHeaderSection.js",
16591661
"front_end/panels/network/components/RequestHeadersView.css.js",

‎front_end/global_typings/react_native.d.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,5 +21,7 @@ declare global {
2121
var reactNativeOpenInEditorButtonImage: string|undefined;
2222
// eslint-disable-next-line no-var,@typescript-eslint/naming-convention
2323
var FB_ONLY__reactNativeFeedbackLink: string|undefined;
24+
// eslint-disable-next-line no-var,@typescript-eslint/naming-convention
25+
var FB_ONLY__enableNetworkCoverageNotice: boolean|undefined;
2426
}
2527
}

‎front_end/panels/network/NetworkLogView.ts‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,7 @@ import {
6565
type NetworkNode,
6666
NetworkRequestNode,
6767
} from './NetworkDataGridNode.js';
68+
import './components/NetworkEventCoverageInfobar.js';
6869
import {NetworkFrameGrouper} from './NetworkFrameGrouper.js';
6970
import networkLogViewStyles from './networkLogView.css.js';
7071
import {NetworkLogViewColumns} from './NetworkLogViewColumns.js';
@@ -571,6 +572,12 @@ export class NetworkLogView extends Common.ObjectWrapper.eventMixin<EventTypes,
571572
this.durationCalculator = new NetworkTransferDurationCalculator();
572573
this.calculatorInternal = this.timeCalculatorInternal;
573574

575+
// [RN][FB-only] Add network event coverage info banner
576+
if (globalThis.FB_ONLY__enableNetworkCoverageNotice) {
577+
const infobar = document.createElement('devtools-network-event-coverage-infobar');
578+
this.element.appendChild(infobar);
579+
}
580+
574581
this.columnsInternal = new NetworkLogViewColumns(
575582
this, this.timeCalculatorInternal, this.durationCalculator, networkLogLargeRowsSetting);
576583
this.columnsInternal.show(this.element);
@@ -1138,6 +1145,12 @@ export class NetworkLogView extends Common.ObjectWrapper.eventMixin<EventTypes,
11381145
this.recordingHint.contentElement.appendChild(button);
11391146
}
11401147

1148+
// [RN][FB-only] Add network event coverage info banner
1149+
if (globalThis.FB_ONLY__enableNetworkCoverageNotice) {
1150+
const infobar = document.createElement('devtools-network-event-coverage-infobar');
1151+
this.recordingHint.element.prepend(infobar);
1152+
}
1153+
11411154
this.recordingHint.show(this.element);
11421155
this.setHidden(true);
11431156
}

‎front_end/panels/network/components/BUILD.gn‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ generate_css("css_files") {
1212
sources = [
1313
"EditableSpan.css",
1414
"HeaderSectionRow.css",
15+
"NetworkEventCoverageInfobar.css",
1516
"RequestHeaderSection.css",
1617
"RequestHeadersView.css",
1718
"RequestTrustTokensView.css",
@@ -24,6 +25,7 @@ devtools_module("components") {
2425
sources = [
2526
"EditableSpan.ts",
2627
"HeaderSectionRow.ts",
28+
"NetworkEventCoverageInfobar.ts",
2729
"RequestHeaderSection.ts",
2830
"RequestHeadersView.ts",
2931
"RequestTrustTokensView.ts",

‎front_end/panels/network/components/NetworkEventCoverageInfobar.css‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
/*
2+
* Copyright (c) Meta Platforms, Inc. and affiliates.
3+
* Copyright 2024 The Chromium Authors. All rights reserved.
4+
* Use of this source code is governed by a BSD-style license that can be
5+
* found in the LICENSE file.
6+
*/
7+
8+
:host {
9+
display: block;
10+
}
11+
12+
.infobar {
13+
background-color: var(--sys-color-surface-yellow);
14+
color: var(--sys-color-on-surface-yellow);
15+
border-radius: 6px;
16+
padding: 6px 10px;
17+
margin: 6px;
18+
font-size: 11px;
19+
max-width: 320px;
20+
}
21+
22+
.infobar-header {
23+
display: flex;
24+
align-items: center;
25+
gap: 5px;
26+
cursor: pointer;
27+
user-select: none;
28+
}
29+
30+
.arrow-icon {
31+
display: inline-block;
32+
mask-image: var(--image-file-triangle-right);
33+
background-color: var(--icon-default);
34+
height: 12px;
35+
width: 12px;
36+
transition: transform 200ms;
37+
flex-shrink: 0;
38+
}
39+
40+
.arrow-icon.expanded {
41+
transform: rotate(90deg);
42+
}
43+
44+
.infobar-message {
45+
font-weight: 500;
46+
}
47+
48+
.info-icon {
49+
flex-shrink: 0;
50+
}
51+
52+
.close-button {
53+
flex-shrink: 0;
54+
margin-left: auto;
55+
}
56+
57+
.infobar-details {
58+
margin-top: 6px;
59+
margin-left: 17px;
60+
color: var(--sys-color-on-surface-subtle);
61+
}

‎front_end/panels/network/components/NetworkEventCoverageInfobar.ts‎

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
// Copyright (c) Meta Platforms, Inc. and affiliates.
2+
// Copyright 2024 The Chromium Authors. All rights reserved.
3+
// Use of this source code is governed by a BSD-style license that can be
4+
// found in the LICENSE file.
5+
6+
import '../../../ui/components/icon_button/icon_button.js';
7+
8+
import * as Common from '../../../core/common/common.js';
9+
import * as Buttons from '../../../ui/components/buttons/buttons.js';
10+
import * as Lit from '../../../ui/lit/lit.js';
11+
import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
12+
13+
import networkEventCoverageInfobarStylesRaw from './NetworkEventCoverageInfobar.css.js';
14+
15+
const networkEventCoverageInfobarStyles = new CSSStyleSheet();
16+
networkEventCoverageInfobarStyles.replaceSync(networkEventCoverageInfobarStylesRaw.cssText);
17+
18+
const {html} = Lit;
19+
20+
const DISMISSED_SETTING_NAME = 'network-event-coverage-infobar-dismissed';
21+
22+
export class NetworkEventCoverageInfobar extends HTMLElement {
23+
readonly #shadow = this.attachShadow({mode: 'open'});
24+
#expanded = false;
25+
readonly #dismissedSetting = Common.Settings.Settings.instance().createSetting<boolean>(DISMISSED_SETTING_NAME, false);
26+
27+
connectedCallback(): void {
28+
this.#shadow.adoptedStyleSheets = [networkEventCoverageInfobarStyles];
29+
this.#render();
30+
}
31+
32+
#onToggleExpand(): void {
33+
this.#expanded = !this.#expanded;
34+
this.#render();
35+
}
36+
37+
#onClose(event: Event): void {
38+
event.stopPropagation();
39+
this.#dismissedSetting.set(true);
40+
this.#render();
41+
}
42+
43+
#render(): void {
44+
if (this.#dismissedSetting.get()) {
45+
Lit.render(Lit.nothing, this.#shadow, {host: this});
46+
return;
47+
}
48+
// clang-format off
49+
Lit.render(
50+
html`
51+
<div class="infobar" jslog=${VisualLogging.section('network-event-coverage-infobar')}>
52+
<div
53+
class="infobar-header"
54+
role="button"
55+
tabindex="0"
56+
aria-expanded=${this.#expanded ? 'true' : 'false'}
57+
@click=${this.#onToggleExpand}
58+
@keydown=${(e: KeyboardEvent) => {
59+
if (e.key === 'Enter' || e.key === ' ') {
60+
e.preventDefault();
61+
this.#onToggleExpand();
62+
}
63+
}}
64+
jslog=${VisualLogging.expand().track({click: true})}
65+
>
66+
<span class="arrow-icon ${this.#expanded ? 'expanded' : ''}"></span>
67+
<devtools-icon class="info-icon" .data=${{iconName: 'info', color: 'var(--sys-color-on-surface-yellow)', width: '16px', height: '16px'}}></devtools-icon>
68+
<span class="infobar-message">[FB-only] Network event coverage</span>
69+
<devtools-button
70+
class="close-button"
71+
title="Dismiss"
72+
.size=${Buttons.Button.Size.MICRO}
73+
.iconName=${'cross'}
74+
.variant=${Buttons.Button.Variant.ICON}
75+
.jslogContext=${'dismiss'}
76+
@click=${this.#onClose}
77+
></devtools-button>
78+
</div>
79+
${this.#expanded ? html`
80+
<div class="infobar-details">
81+
We currently record events from React Native's default networking stack. This includes &lt;Image&gt;, but not FbImageNetworkFetcher. Therefore, only fetch() and XMLHttpRequest events may be visible.
82+
</div>
83+
` : Lit.nothing}
84+
</div>
85+
`,
86+
this.#shadow,
87+
{host: this},
88+
);
89+
// clang-format on
90+
}
91+
}
92+
93+
customElements.define('devtools-network-event-coverage-infobar', NetworkEventCoverageInfobar);
94+
95+
declare global {
96+
interface HTMLElementTagNameMap {
97+
'devtools-network-event-coverage-infobar': NetworkEventCoverageInfobar;
98+
}
99+
}

‎front_end/panels/network/components/components.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44

55
import * as EditableSpan from './EditableSpan.js';
66
import * as HeaderSectionRow from './HeaderSectionRow.js';
7+
import * as NetworkEventCoverageInfobar from './NetworkEventCoverageInfobar.js';
78
import * as RequestHeaderSection from './RequestHeaderSection.js';
89
import * as RequestHeadersView from './RequestHeadersView.js';
910
import * as RequestTrustTokensView from './RequestTrustTokensView.js';
@@ -13,6 +14,7 @@ import * as WebBundleInfoView from './WebBundleInfoView.js';
1314
export {
1415
EditableSpan,
1516
HeaderSectionRow,
17+
NetworkEventCoverageInfobar,
1618
RequestHeaderSection,
1719
RequestHeadersView,
1820
RequestTrustTokensView,

‎front_end/ui/visual_logging/KnownContextValues.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2434,6 +2434,7 @@ export const knownContextValues = new Set([
24342434
'network-conditions.network-mid-tier-mobile',
24352435
'network-conditions.network-offline',
24362436
'network-conditions.network-online',
2437+
'network-event-coverage-infobar',
24372438
'network-event-source-message-filter',
24382439
'network-film-strip',
24392440
'network-hide-chrome-extensions',

‎scripts/eslint_rules/lib/check-license-header.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -83,6 +83,7 @@ const META_CODE_PATHS = [
8383
'entrypoints/shell/browser_compatibility_guard.ts',
8484
'global_typings/react_native.d.ts',
8585
'models/react_native',
86+
'panels/network/components/NetworkEventCoverageInfobar.ts',
8687
'panels/react_devtools',
8788
'panels/rn_welcome',
8889
'panels/timeline/ReactNativeTimelineLandingPage.ts',

0 commit comments

Comments
 (0)