Misc. Profiler tweaks
* Disabled (with a follow up TODO) the call in the reload-and-profile toggle. * Disabled reload-and-profile in Firefox extension for now, since it was triggering a disconnected port error. * Fixed Safari layout bug that caused profiler charts to be hidden.
Brian Vaughn committed
Aug 12, 2019 at 11:13 UTC
2f1c100e7ce3e16357510ae5867b33b2e9236f42
6 files changed
+17
-13
shells/browser/shared/src/main.js
+6
-2
@@ -5,7 +5,11 @@ import { unstable_createRoot as createRoot, flushSync } from 'react-dom';
5
import Bridge from 'src/bridge';
6
import Store from 'src/devtools/store';
7
import inject from './inject';
8
-import { createViewElementSource, getBrowserTheme } from './utils';
8
+import {
9
+ createViewElementSource,
10
+ getBrowserName,
11
+ getBrowserTheme,
12
+} from './utils';
13
import { getSavedComponentFilters, getAppendComponentStack } from 'src/utils';
14
import {
15
localStorageGetItem,
@@ -115,7 +119,7 @@ function createPanelIfReactLoaded() {
119
120
store = new Store(bridge, {
121
isProfiling,
118
- supportsReloadAndProfile: true,
122
+ supportsReloadAndProfile: getBrowserName() === 'Chrome',
123
supportsProfiling,
124
});
125
store.profilerStore.profilingData = profilingData;
src/devtools/views/Profiler/CommitFlamegraph.css
+1
-1
@@ -1,6 +1,6 @@
1
.Container {
2
width: 100%;
3
- height: 100%;
3
+ flex: 1;
4
padding: 0.5rem;
5
}
6
src/devtools/views/Profiler/CommitRanked.css
+1
-1
@@ -1,5 +1,5 @@
1
.Container {
2
width: 100%;
3
- height: 100%;
3
+ flex: 1;
4
padding: 0.5rem;
5
}
src/devtools/views/Profiler/Interactions.css
+1
-1
@@ -1,6 +1,6 @@
1
.Container {
2
width: 100%;
3
- height: 100%;
3
+ flex: 1;
4
padding: 0.5rem;
5
}
6
src/devtools/views/Profiler/Profiler.css
+1
-1
@@ -32,7 +32,7 @@
32
position: relative;
33
flex: 1 1 auto;
34
display: flex;
35
- flex-direction: row;
35
+ flex-direction: column;
36
align-items: center;
37
justify-content: center;
38
}
src/devtools/views/Profiler/ReloadAndProfileButton.js
+7
-7
@@ -6,7 +6,6 @@ import ButtonIcon from '../ButtonIcon';
6
import { BridgeContext, StoreContext } from '../context';
7
import { useSubscription } from '../hooks';
8
import Store from 'src/devtools/store';
9
-import { ProfilerContext } from './ProfilerContext';
9
10
type SubscriptionData = {|
11
recordChangeDescriptions: boolean,
@@ -17,8 +16,6 @@ export default function ReloadAndProfileButton() {
16
const bridge = useContext(BridgeContext);
17
const store = useContext(StoreContext);
18
20
- const { startProfiling } = useContext(ProfilerContext);
21
-
19
const subscription = useMemo(
20
() => ({
21
getCurrentValue: () => ({
@@ -42,11 +39,14 @@ export default function ReloadAndProfileButton() {
39
} = useSubscription<SubscriptionData, Store>(subscription);
40
41
const reloadAndProfile = useCallback(() => {
45
- bridge.send('reloadAndProfile', recordChangeDescriptions);
42
+ // TODO If we want to support reload-and-profile for e.g. React Native,
43
+ // we might need to also start profiling here before reloading the app (since DevTools itself isn't reloaded).
44
+ // We'd probably want to do this before reloading though, to avoid sending a message on a disconnected port in the browser.
45
+ // For now, let's just skip doing it entirely to avoid paying snapshot costs for data we don't need.
46
+ // startProfiling();
47
47
- // In case the DevTools UI itself doesn't reload along with the app, also start profiling.
48
- startProfiling();
49
- }, [bridge, recordChangeDescriptions, startProfiling]);
48
+ bridge.send('reloadAndProfile', recordChangeDescriptions);
49
+ }, [bridge, recordChangeDescriptions]);
50
51
if (!supportsReloadAndProfile) {
52
return null;