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.

shells/browser/shared/src/main.js

@@ -5,7 +5,11 @@ import { unstable_createRoot as createRoot, flushSync } from 'react-dom';
 import Bridge from 'src/bridge';
 import Store from 'src/devtools/store';
 import inject from './inject';
-import { createViewElementSource, getBrowserTheme } from './utils';
+import {
+  createViewElementSource,
+  getBrowserName,
+  getBrowserTheme,
+} from './utils';
 import { getSavedComponentFilters, getAppendComponentStack } from 'src/utils';
 import {
   localStorageGetItem,
@@ -115,7 +119,7 @@ function createPanelIfReactLoaded() {
 
         store = new Store(bridge, {
           isProfiling,
-          supportsReloadAndProfile: true,
+          supportsReloadAndProfile: getBrowserName() === 'Chrome',
           supportsProfiling,
         });
         store.profilerStore.profilingData = profilingData;

src/devtools/views/Profiler/CommitFlamegraph.css

@@ -1,6 +1,6 @@
 .Container {
   width: 100%;
-  height: 100%;
+  flex: 1;
   padding: 0.5rem;
 }
 

src/devtools/views/Profiler/CommitRanked.css

@@ -1,5 +1,5 @@
 .Container {
   width: 100%;
-  height: 100%;
+  flex: 1;
   padding: 0.5rem;
 }

src/devtools/views/Profiler/Interactions.css

@@ -1,6 +1,6 @@
 .Container {
   width: 100%;
-  height: 100%;
+  flex: 1;
   padding: 0.5rem;
 }
 

src/devtools/views/Profiler/Profiler.css

@@ -32,7 +32,7 @@
   position: relative;
   flex: 1 1 auto;
   display: flex;
-  flex-direction: row;
+  flex-direction: column;
   align-items: center;
   justify-content: center;
 }

src/devtools/views/Profiler/ReloadAndProfileButton.js

@@ -6,7 +6,6 @@ import ButtonIcon from '../ButtonIcon';
 import { BridgeContext, StoreContext } from '../context';
 import { useSubscription } from '../hooks';
 import Store from 'src/devtools/store';
-import { ProfilerContext } from './ProfilerContext';
 
 type SubscriptionData = {|
   recordChangeDescriptions: boolean,
@@ -17,8 +16,6 @@ export default function ReloadAndProfileButton() {
   const bridge = useContext(BridgeContext);
   const store = useContext(StoreContext);
 
-  const { startProfiling } = useContext(ProfilerContext);
-
   const subscription = useMemo(
     () => ({
       getCurrentValue: () => ({
@@ -42,11 +39,14 @@ export default function ReloadAndProfileButton() {
   } = useSubscription<SubscriptionData, Store>(subscription);
 
   const reloadAndProfile = useCallback(() => {
-    bridge.send('reloadAndProfile', recordChangeDescriptions);
+    // TODO If we want to support reload-and-profile for e.g. React Native,
+    // we might need to also start profiling here before reloading the app (since DevTools itself isn't reloaded).
+    // We'd probably want to do this before reloading though, to avoid sending a message on a disconnected port in the browser.
+    // For now, let's just skip doing it entirely to avoid paying snapshot costs for data we don't need.
+    // startProfiling();
 
-    // In case the DevTools UI itself doesn't reload along with the app, also start profiling.
-    startProfiling();
-  }, [bridge, recordChangeDescriptions, startProfiling]);
+    bridge.send('reloadAndProfile', recordChangeDescriptions);
+  }, [bridge, recordChangeDescriptions]);
 
   if (!supportsReloadAndProfile) {
     return null;