Added profiling-not-supported message for browser extension
Brian Vaughn committed
Mar 18, 2019 at 13:37 UTC
5f154b376e9658a6b7b7477dead472063be1541e
4 files changed
+48
-7
src/devtools/views/Button.css
+2
-1
@@ -22,7 +22,8 @@
22
outline: none;
23
box-shadow: 0 0 0 2px var(--color-button-background-focus) inset;
24
}
25
-.Button:disabled {
25
+.Button:disabled,
26
+.Button:disabled:active {
27
background: var(--color-button-background);
28
color: var(--color-button-disabled);
29
cursor: default;
src/devtools/views/DevTools.js
+6
-1
@@ -110,7 +110,12 @@ export default function DevTools({
110
let tabElement;
111
switch (tab) {
112
case 'profiler':
113
- tabElement = <Profiler portalContainer={profilerPortalContainer} />;
113
+ tabElement = (
114
+ <Profiler
115
+ portalContainer={profilerPortalContainer}
116
+ supportsProfiling={supportsProfiling}
117
+ />
118
+ );
119
break;
120
case 'settings':
121
tabElement = <Settings portalContainer={settingsPortalContainer} />;
src/devtools/views/Profiler/Profiler.js
+35
-3
@@ -16,9 +16,13 @@ import styles from './Profiler.css';
16
17
export type Props = {|
18
portalContainer?: Element,
19
+ supportsProfiling: boolean,
20
|};
21
21
-export default function Profiler({ portalContainer }: Props) {
22
+export default function Profiler({
23
+ portalContainer,
24
+ supportsProfiling,
25
+}: Props) {
26
const { hasProfilingData, isProfiling, rootHasProfilingData } = useContext(
27
ProfilerContext
28
);
@@ -29,6 +33,7 @@ export default function Profiler({ portalContainer }: Props) {
33
<NonSuspendingProfiler
34
hasProfilingData={hasProfilingData}
35
isProfiling={isProfiling}
36
+ supportsProfiling={supportsProfiling}
37
/>
38
);
39
} else {
@@ -47,12 +52,16 @@ export default function Profiler({ portalContainer }: Props) {
52
function NonSuspendingProfiler({
53
hasProfilingData,
54
isProfiling,
55
+ supportsProfiling,
56
}: {|
57
hasProfilingData: boolean,
58
isProfiling: boolean,
59
+ supportsProfiling: boolean,
60
|}) {
61
let view = null;
55
- if (isProfiling) {
62
+ if (!supportsProfiling) {
63
+ view = <ProfilingNotSupported />;
64
+ } else if (isProfiling) {
65
view = <RecortdingInProgress />;
66
} else if (!hasProfilingData) {
67
view = <NoProfilingData />;
@@ -64,7 +73,7 @@ function NonSuspendingProfiler({
73
<div className={styles.Profiler}>
74
<div className={styles.LeftColumn}>
75
<div className={styles.Toolbar}>
67
- <RecordToggle />
76
+ <RecordToggle disabled={!supportsProfiling} />
77
<Button disabled title="Reload and start profiling">
78
{/* TODO (profiling) Wire up reload button */}
79
<ButtonIcon type="reload" />
@@ -200,6 +209,29 @@ const NoProfilingDataForRoot = () => (
209
</div>
210
);
211
212
+const ProfilingNotSupported = () => (
213
+ <div className={styles.Column}>
214
+ <div className={styles.Header}>Profiling not supported.</div>
215
+ <div className={styles.Column}>
216
+ <p>
217
+ Profiling support requires either a development or production-profiling
218
+ build of React v16.5+.
219
+ </p>
220
+ <p>
221
+ Learn more at{' '}
222
+ <a
223
+ href="https://fb.me/react-profiling"
224
+ rel="noopener noreferrer"
225
+ target="_blank"
226
+ >
227
+ fb.me/react-profiling
228
+ </a>
229
+ .
230
+ </p>
231
+ </div>
232
+ </div>
233
+);
234
+
235
const RecortdingInProgress = () => (
236
<div className={styles.Column}>
237
<div className={styles.Header}>Profiling is in progress...</div>
src/devtools/views/Profiler/RecordToggle.js
+5
-2
@@ -7,9 +7,11 @@ import { ProfilerContext } from './ProfilerContext';
7
8
import styles from './RecordToggle.css';
9
10
-export type Props = {||};
10
+export type Props = {|
11
+ disabled?: boolean,
12
+|};
13
12
-export default function RecordToggle(_: Props) {
14
+export default function RecordToggle({ disabled }: Props) {
15
const { isProfiling, startProfiling, stopProfiling } = useContext(
16
ProfilerContext
17
);
@@ -19,6 +21,7 @@ export default function RecordToggle(_: Props) {
21
className={
22
isProfiling ? styles.ActiveRecordToggle : styles.InactiveRecordToggle
23
}
24
+ disabled={disabled}
25
onClick={isProfiling ? stopProfiling : startProfiling}
26
title={isProfiling ? 'Stop profiling' : 'Start profiling'}
27
>