Moved profiling-supported subscription into ProfilerContext

src/devtools/views/DevTools.js

@@ -5,7 +5,7 @@
 import '@reach/menu-button/styles.css';
 import '@reach/tooltip/styles.css';
 
-import React, { useMemo, useState } from 'react';
+import React, { useState } from 'react';
 import Store from '../store';
 import { BridgeContext, StoreContext } from './context';
 import Components from './Components/Components';
@@ -18,7 +18,6 @@ import ViewElementSourceContext from './Components/ViewElementSourceContext';
 import { ProfilerContextController } from './Profiler/ProfilerContext';
 import { ModalDialogContextController } from './ModalDialog';
 import ReactLogo from './ReactLogo';
-import { useSubscription } from './hooks';
 
 import styles from './DevTools.css';
 
@@ -92,20 +91,6 @@ export default function DevTools({
     setTab(overrideTab);
   }
 
-  const supportsProfilingSubscription = useMemo(
-    () => ({
-      getCurrentValue: () => store.supportsProfiling,
-      subscribe: (callback: Function) => {
-        store.addListener('supportsProfiling', callback);
-        return () => store.removeListener('supportsProfiling', callback);
-      },
-    }),
-    [store]
-  );
-  const supportsProfiling = useSubscription<boolean, Store>(
-    supportsProfilingSubscription
-  );
-
   return (
     <BridgeContext.Provider value={bridge}>
       <StoreContext.Provider value={store}>
@@ -146,10 +131,7 @@ export default function DevTools({
                       className={styles.TabContent}
                       hidden={tab !== 'profiler'}
                     >
-                      <Profiler
-                        portalContainer={profilerPortalContainer}
-                        supportsProfiling={supportsProfiling}
-                      />
+                      <Profiler portalContainer={profilerPortalContainer} />
                     </div>
                     <div
                       className={styles.TabContent}

src/devtools/views/Profiler/Profiler.js

@@ -23,11 +23,7 @@ import portaledContent from '../portaledContent';
 
 import styles from './Profiler.css';
 
-export type Props = {|
-  supportsProfiling: boolean,
-|};
-
-function Profiler({ supportsProfiling }: Props) {
+function Profiler(_: {||}) {
   const {
     didRecordCommits,
     isProcessingData,
@@ -35,6 +31,7 @@ function Profiler({ supportsProfiling }: Props) {
     selectedFiberID,
     selectedTabID,
     selectTab,
+    supportsProfiling,
   } = useContext(ProfilerContext);
 
   let view = null;
@@ -86,7 +83,7 @@ function Profiler({ supportsProfiling }: Props) {
       <div className={styles.Profiler}>
         <div className={styles.LeftColumn}>
           <div className={styles.Toolbar}>
-            <RecordToggle />
+            <RecordToggle disabled={!supportsProfiling} />
             <ReloadAndProfileButton />
             <ClearProfilingDataButton />
             <ProfilingImportExportButtons />

src/devtools/views/Profiler/ProfilerContext.js

@@ -21,6 +21,9 @@ import type { ProfilingDataFrontend } from './types';
 export type TabID = 'flame-chart' | 'ranked-chart' | 'interactions';
 
 export type Context = {|
+  // Does the Store support profiling?
+  supportsProfiling: boolean,
+
   // Which tab is selexted in the Profiler UI?
   selectedTabID: TabID,
   selectTab(id: TabID): void,
@@ -77,6 +80,7 @@ type StoreProfilingState = {|
   isProcessingData: boolean,
   isProfiling: boolean,
   profilingData: ProfilingDataFrontend | null,
+  supportsProfiling: boolean,
 |};
 
 type Props = {|
@@ -97,25 +101,29 @@ function ProfilerContextController({ children }: Props) {
         isProcessingData: profilerStore.isProcessingData,
         isProfiling: profilerStore.isProfiling,
         profilingData: profilerStore.profilingData,
+        supportsProfiling: store.supportsProfiling,
       }),
       subscribe: (callback: Function) => {
         profilerStore.addListener('profilingData', callback);
         profilerStore.addListener('isProcessingData', callback);
         profilerStore.addListener('isProfiling', callback);
+        store.addListener('supportsProfiling', callback);
         return () => {
           profilerStore.removeListener('profilingData', callback);
           profilerStore.removeListener('isProcessingData', callback);
           profilerStore.removeListener('isProfiling', callback);
+          store.removeListener('supportsProfiling', callback);
         };
       },
     }),
-    [profilerStore]
+    [profilerStore, store]
   );
   const {
     didRecordCommits,
     isProcessingData,
     isProfiling,
     profilingData,
+    supportsProfiling,
   } = useSubscription<StoreProfilingState, Store>(subscription);
 
   const [prevProfilingData, setPrevProfilingData] = useState();
@@ -221,6 +229,7 @@ function ProfilerContextController({ children }: Props) {
       profilingData,
       startProfiling,
       stopProfiling,
+      supportsProfiling,
 
       rootID,
       setRootID,
@@ -250,6 +259,7 @@ function ProfilerContextController({ children }: Props) {
       profilingData,
       startProfiling,
       stopProfiling,
+      supportsProfiling,
 
       rootID,
       setRootID,