DevTools scheduling profiler: Add React component measures (#22013)

packages/react-devtools-shared/src/devtools/views/Profiler/ClearProfilingDataButton.js

@@ -8,22 +8,41 @@
  */
 
 import * as React from 'react';
-import {useCallback, useContext} from 'react';
+import {useContext} from 'react';
 import {ProfilerContext} from './ProfilerContext';
 import Button from '../Button';
 import ButtonIcon from '../ButtonIcon';
 import {StoreContext} from '../context';
+import {SchedulingProfilerContext} from 'react-devtools-scheduling-profiler/src/SchedulingProfilerContext';
 
 export default function ClearProfilingDataButton() {
   const store = useContext(StoreContext);
-  const {didRecordCommits, isProfiling} = useContext(ProfilerContext);
+  const {didRecordCommits, isProfiling, selectedTabID} = useContext(
+    ProfilerContext,
+  );
+  const {clearSchedulingProfilerData, schedulingProfilerData} = useContext(
+    SchedulingProfilerContext,
+  );
   const {profilerStore} = store;
 
-  const clear = useCallback(() => profilerStore.clear(), [profilerStore]);
+  let doesHaveData = false;
+  if (selectedTabID === 'scheduling-profiler') {
+    doesHaveData = schedulingProfilerData !== null;
+  } else {
+    doesHaveData = didRecordCommits;
+  }
+
+  const clear = () => {
+    if (selectedTabID === 'scheduling-profiler') {
+      clearSchedulingProfilerData();
+    } else {
+      profilerStore.clear();
+    }
+  };
 
   return (
     <Button
-      disabled={isProfiling || !didRecordCommits}
+      disabled={isProfiling || !doesHaveData}
       onClick={clear}
       title="Clear profiling data">
       <ButtonIcon type="clear" />

packages/react-devtools-shared/src/devtools/views/Profiler/Profiler.js

@@ -103,8 +103,16 @@ function Profiler(_: {||}) {
       <div className={styles.Profiler}>
         <div className={styles.LeftColumn}>
           <div className={styles.Toolbar}>
-            <RecordToggle disabled={!supportsProfiling} />
-            <ReloadAndProfileButton />
+            <RecordToggle
+              disabled={
+                !supportsProfiling || selectedTabID === 'scheduling-profiler'
+              }
+            />
+            <ReloadAndProfileButton
+              disabled={
+                selectedTabID === 'scheduling-profiler' || !supportsProfiling
+              }
+            />
             <ClearProfilingDataButton />
             <ProfilingImportExportButtons />
             <div className={styles.VRule} />

packages/react-devtools-shared/src/devtools/views/Profiler/ReloadAndProfileButton.js

@@ -19,7 +19,11 @@ type SubscriptionData = {|
   supportsReloadAndProfile: boolean,
 |};
 
-export default function ReloadAndProfileButton() {
+export default function ReloadAndProfileButton({
+  disabled,
+}: {|
+  disabled: boolean,
+|}) {
   const bridge = useContext(BridgeContext);
   const store = useContext(StoreContext);
 
@@ -61,7 +65,7 @@ export default function ReloadAndProfileButton() {
 
   return (
     <Button
-      disabled={!store.supportsProfiling}
+      disabled={disabled}
       onClick={reloadAndProfile}
       title="Reload and start profiling">
       <ButtonIcon type="reload" />