Scheduling profiler UX changes (#21990)

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

@@ -45,20 +45,21 @@ function Profiler(_: {||}) {
 
   const {supportsSchedulingProfiler} = useContext(StoreContext);
 
-  let showRightColumn = true;
+  let isLegacyProfilerSelected = false;
 
   let view = null;
   if (didRecordCommits || selectedTabID === 'scheduling-profiler') {
     switch (selectedTabID) {
       case 'flame-chart':
+        isLegacyProfilerSelected = true;
         view = <CommitFlamegraph />;
         break;
       case 'ranked-chart':
+        isLegacyProfilerSelected = true;
         view = <CommitRanked />;
         break;
       case 'scheduling-profiler':
         view = <SchedulingProfiler />;
-        showRightColumn = false;
         break;
       default:
         break;
@@ -119,7 +120,7 @@ function Profiler(_: {||}) {
             <RootSelector />
             <div className={styles.Spacer} />
             <SettingsModalContextToggle />
-            {didRecordCommits && (
+            {isLegacyProfilerSelected && didRecordCommits && (
               <Fragment>
                 <div className={styles.VRule} />
                 <SnapshotSelector />
@@ -131,7 +132,9 @@ function Profiler(_: {||}) {
             <ModalDialog />
           </div>
         </div>
-        {showRightColumn && <div className={styles.RightColumn}>{sidebar}</div>}
+        {isLegacyProfilerSelected && (
+          <div className={styles.RightColumn}>{sidebar}</div>
+        )}
         <SettingsModal />
       </div>
     </SettingsModalContextController>

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

@@ -212,7 +212,10 @@ function ProfilerContextController({children}: Props) {
   const [selectedCommitIndex, selectCommitIndex] = useState<number | null>(
     null,
   );
-  const [selectedTabID, selectTab] = useState<TabID>('flame-chart');
+  const [selectedTabID, selectTab] = useLocalStorage<TabID>(
+    'React::DevTools::Profiler::defaultTab',
+    'flame-chart',
+  );
 
   if (isProfiling) {
     batchedUpdates(() => {

packages/react-devtools-shared/src/devtools/views/Settings/SettingsContext.js

@@ -412,6 +412,9 @@ export function updateThemeVariables(
   updateStyleHelper(theme, 'color-record-hover', documentElements);
   updateStyleHelper(theme, 'color-record-inactive', documentElements);
   updateStyleHelper(theme, 'color-resize-bar', documentElements);
+  updateStyleHelper(theme, 'color-resize-bar-active', documentElements);
+  updateStyleHelper(theme, 'color-resize-bar-border', documentElements);
+  updateStyleHelper(theme, 'color-resize-bar-dot', documentElements);
   updateStyleHelper(theme, 'color-color-scroll-thumb', documentElements);
   updateStyleHelper(theme, 'color-color-scroll-track', documentElements);
   updateStyleHelper(theme, 'color-search-match', documentElements);
@@ -431,21 +434,6 @@ export function updateThemeVariables(
     'color-scheduling-profiler-native-event-hover',
     documentElements,
   );
-  updateStyleHelper(
-    theme,
-    'color-scheduling-profiler-native-event-warning',
-    documentElements,
-  );
-  updateStyleHelper(
-    theme,
-    'color-scheduling-profiler-native-event-warning-hover',
-    documentElements,
-  );
-  updateStyleHelper(
-    theme,
-    'color-scheduling-profiler-native-event-warning-text',
-    documentElements,
-  );
   updateStyleHelper(
     theme,
     'color-selected-tree-highlight-active',
@@ -481,11 +469,6 @@ export function updateThemeVariables(
     'color-scheduling-profiler-react-idle',
     documentElements,
   );
-  updateStyleHelper(
-    theme,
-    'color-scheduling-profiler-react-idle-selected',
-    documentElements,
-  );
   updateStyleHelper(
     theme,
     'color-scheduling-profiler-react-idle-hover',
@@ -496,11 +479,6 @@ export function updateThemeVariables(
     'color-scheduling-profiler-react-render',
     documentElements,
   );
-  updateStyleHelper(
-    theme,
-    'color-scheduling-profiler-react-render-selected',
-    documentElements,
-  );
   updateStyleHelper(
     theme,
     'color-scheduling-profiler-react-render-hover',
@@ -511,11 +489,6 @@ export function updateThemeVariables(
     'color-scheduling-profiler-react-commit',
     documentElements,
   );
-  updateStyleHelper(
-    theme,
-    'color-scheduling-profiler-react-commit-selected',
-    documentElements,
-  );
   updateStyleHelper(
     theme,
     'color-scheduling-profiler-react-commit-hover',
@@ -526,11 +499,6 @@ export function updateThemeVariables(
     'color-scheduling-profiler-react-layout-effects',
     documentElements,
   );
-  updateStyleHelper(
-    theme,
-    'color-scheduling-profiler-react-layout-effects-selected',
-    documentElements,
-  );
   updateStyleHelper(
     theme,
     'color-scheduling-profiler-react-layout-effects-hover',
@@ -541,11 +509,6 @@ export function updateThemeVariables(
     'color-scheduling-profiler-react-passive-effects',
     documentElements,
   );
-  updateStyleHelper(
-    theme,
-    'color-scheduling-profiler-react-passive-effects-selected',
-    documentElements,
-  );
   updateStyleHelper(
     theme,
     'color-scheduling-profiler-react-passive-effects-hover',
@@ -563,22 +526,32 @@ export function updateThemeVariables(
   );
   updateStyleHelper(
     theme,
-    'color-scheduling-profiler-react-schedule-cascading',
+    'color-scheduling-profiler-react-suspense-rejected-event',
     documentElements,
   );
   updateStyleHelper(
     theme,
-    'color-scheduling-profiler-react-schedule-cascading-hover',
+    'color-scheduling-profiler-react-suspense-rejected-hover',
     documentElements,
   );
   updateStyleHelper(
     theme,
-    'color-scheduling-profiler-react-suspend',
+    'color-scheduling-profiler-react-suspense-resolved',
     documentElements,
   );
   updateStyleHelper(
     theme,
-    'color-scheduling-profiler-react-suspend-hover',
+    'color-scheduling-profiler-react-suspense-resolved-hover',
+    documentElements,
+  );
+  updateStyleHelper(
+    theme,
+    'color-scheduling-profiler-react-suspense-unresolved',
+    documentElements,
+  );
+  updateStyleHelper(
+    theme,
+    'color-scheduling-profiler-react-suspense-unresolved-hover',
     documentElements,
   );
   updateStyleHelper(
@@ -586,6 +559,7 @@ export function updateThemeVariables(
     'color-scheduling-profiler-react-work-border',
     documentElements,
   );
+  updateStyleHelper(theme, 'color-scroll-caret', documentElements);
   updateStyleHelper(theme, 'color-shadow', documentElements);
   updateStyleHelper(theme, 'color-tab-selected-border', documentElements);
   updateStyleHelper(theme, 'color-text', documentElements);
@@ -597,6 +571,14 @@ export function updateThemeVariables(
   updateStyleHelper(theme, 'color-toggle-text', documentElements);
   updateStyleHelper(theme, 'color-tooltip-background', documentElements);
   updateStyleHelper(theme, 'color-tooltip-text', documentElements);
+  updateStyleHelper(theme, 'color-warning-background', documentElements);
+  updateStyleHelper(theme, 'color-warning-background-hover', documentElements);
+  updateStyleHelper(theme, 'color-warning-text-color', documentElements);
+  updateStyleHelper(
+    theme,
+    'color-warning-text-color-inverted',
+    documentElements,
+  );
 
   // Font smoothing varies based on the theme.
   updateStyleHelper(theme, 'font-smoothing', documentElements);

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

@@ -91,7 +91,7 @@ export default function TabBar({
     <Fragment>
       {tabs.map(tab => {
         if (tab === null) {
-          return <div className={styles.VRule} />;
+          return <div key="VRule" className={styles.VRule} />;
         }
 
         const {icon, id, label, title} = tab;

packages/react-devtools-shared/src/devtools/views/root.css

@@ -77,46 +77,43 @@
   --light-color-record-active: #fc3a4b;
   --light-color-record-hover: #3578e5;
   --light-color-record-inactive: #0088fa;
-  --light-color-resize-bar: #cccccc;
+  --light-color-resize-bar: #eeeeee;
+  --light-color-resize-bar-active: #dcdcdc;
+  --light-color-resize-bar-border: #d1d1d1;
+  --light-color-resize-bar-dot: #333333;
   --light-color-scheduling-profiler-native-event: #ccc;
   --light-color-scheduling-profiler-native-event-hover: #aaa;
-  --light-color-scheduling-profiler-native-event-warning: #ee1638;
-  --light-color-scheduling-profiler-native-event-warning-hover: #da1030;
-  --light-color-scheduling-profiler-native-event-warning-text: #fff;
   --light-color-scheduling-profiler-priority-background: #f6f6f6;
   --light-color-scheduling-profiler-priority-border: #eeeeee;
   --light-color-scheduling-profiler-user-timing: #c9cacd;
-  --light-color-scheduling-profiler-user-timing-hover:#93959a;
-  --light-color-scheduling-profiler-react-idle: #edf6ff;
-  --light-color-scheduling-profiler-react-idle-selected:#EDF6FF;
-  --light-color-scheduling-profiler-react-idle-hover:#EDF6FF;
+  --light-color-scheduling-profiler-user-timing-hover: #93959a;
+  --light-color-scheduling-profiler-react-idle: #d3e5f6;
+  --light-color-scheduling-profiler-react-idle-hover: #c3d9ef;
   --light-color-scheduling-profiler-react-render: #9fc3f3;
-  --light-color-scheduling-profiler-react-render-selected:#64A9F5;
-  --light-color-scheduling-profiler-react-render-hover:#2683E2;
-  --light-color-scheduling-profiler-react-commit: #ff718e;
-  --light-color-scheduling-profiler-react-commit-selected:#FF5277;
-  --light-color-scheduling-profiler-react-commit-hover:#ed0030;
-  --light-color-scheduling-profiler-react-layout-effects:#c88ff0;
-  --light-color-scheduling-profiler-react-layout-effects-selected:#934FC1;
-  --light-color-scheduling-profiler-react-layout-effects-hover:#601593;
-  --light-color-scheduling-profiler-react-passive-effects:#c88ff0;
-  --light-color-scheduling-profiler-react-passive-effects-selected:#934FC1;
-  --light-color-scheduling-profiler-react-passive-effects-hover:#601593;
+  --light-color-scheduling-profiler-react-render-hover: #83afe9;
+  --light-color-scheduling-profiler-react-commit: #c88ff0;
+  --light-color-scheduling-profiler-react-commit-hover: #b281d6;
+  --light-color-scheduling-profiler-react-layout-effects: #b281d6;
+  --light-color-scheduling-profiler-react-layout-effects-hover: #9d71bd;
+  --light-color-scheduling-profiler-react-passive-effects: #b281d6;
+  --light-color-scheduling-profiler-react-passive-effects-hover: #9d71bd;
   --light-color-scheduling-profiler-react-schedule: #9fc3f3;
-  --light-color-scheduling-profiler-react-schedule-hover:#2683E2;
-  --light-color-scheduling-profiler-react-schedule-cascading:#ff718e;
-  --light-color-scheduling-profiler-react-schedule-cascading-hover:#ed0030;
-  --light-color-scheduling-profiler-react-suspend: #a6e59f;
-  --light-color-scheduling-profiler-react-suspend-hover:#13bc00;
+  --light-color-scheduling-profiler-react-schedule-hover: #2683E2;
+  --light-color-scheduling-profiler-react-suspense-rejected: #f1cc14;
+  --light-color-scheduling-profiler-react-suspense-rejected-hover: #ffdf37;
+  --light-color-scheduling-profiler-react-suspense-resolved: #a6e59f;
+  --light-color-scheduling-profiler-react-suspense-resolved-hover: #89d281;
+  --light-color-scheduling-profiler-react-suspense-unresolved: #c9cacd;
+  --light-color-scheduling-profiler-react-suspense-unresolved-hover: #93959a;
   --light-color-scheduling-profiler-text-color: #000000;
-  --light-color-scheduling-profiler-react-work-border:#ffffff;
+  --light-color-scheduling-profiler-react-work-border: #ffffff;
   --light-color-scroll-thumb: #c2c2c2;
   --light-color-scroll-track: #fafafa;
   --light-color-search-match: yellow;
   --light-color-search-match-current: #f7923b;
   --light-color-selected-tree-highlight-active: rgba(0, 136, 250, 0.1);
   --light-color-selected-tree-highlight-inactive: rgba(0, 0, 0, 0.05);
-  --light-color-shadow: rgba(0, 0, 0, 0.25);
+  --light-color-scroll-caret: rgba(150, 150, 150, 0.5);
   --light-color-tab-selected-border: #0088fa;
   --light-color-text: #000000;
   --light-color-text-invalid: #ff0000;
@@ -127,6 +124,10 @@
   --light-color-toggle-text: #ffffff;
   --light-color-tooltip-background: rgba(0, 0, 0, 0.9);
   --light-color-tooltip-text: #ffffff;
+  --light-color-warning-background: #fb3655;
+  --light-color-warning-background-hover: #f82042;
+  --light-color-warning-text-color: #ffffff;
+  --light-color-warning-text-color-inverted: #fd4d69;
 
   /* Dark theme */
   --dark-color-attribute-name: #9d87d2;
@@ -202,45 +203,43 @@
   --dark-color-record-active: #fc3a4b;
   --dark-color-record-hover: #a2e9fc;
   --dark-color-record-inactive: #61dafb;
-  --dark-color-resize-bar: #3d424a;
+  --dark-color-resize-bar: #282c34;
+  --dark-color-resize-bar-active: #31363f;
+  --dark-color-resize-bar-border: #3d424a;
+  --dark-color-resize-bar-dot: #cfd1d5;
   --dark-color-scheduling-profiler-native-event: #b2b2b2;
   --dark-color-scheduling-profiler-native-event-hover: #949494;
-  --dark-color-scheduling-profiler-native-event-warning: #ee1638;
-  --dark-color-scheduling-profiler-native-event-warning-hover: #da1030;
-  --dark-color-scheduling-profiler-native-event-warning-text: #fff;
   --dark-color-scheduling-profiler-priority-background: #1d2129;
   --dark-color-scheduling-profiler-priority-border: #282c34;
   --dark-color-scheduling-profiler-user-timing: #c9cacd;
-  --dark-color-scheduling-profiler-user-timing-hover:#93959a;
+  --dark-color-scheduling-profiler-user-timing-hover: #93959a;
   --dark-color-scheduling-profiler-react-idle: #3d485b;
-  --dark-color-scheduling-profiler-react-idle-selected:#465269;
-  --dark-color-scheduling-profiler-react-idle-hover:#465269;
-  --dark-color-scheduling-profiler-react-render: #9fc3f3;
-  --dark-color-scheduling-profiler-react-render-selected:#64A9F5;
-  --dark-color-scheduling-profiler-react-render-hover:#2683E2;
-  --dark-color-scheduling-profiler-react-commit: #ff718e;
-  --dark-color-scheduling-profiler-react-commit-selected:#FF5277;
-  --dark-color-scheduling-profiler-react-commit-hover:#ed0030;
-  --dark-color-scheduling-profiler-react-layout-effects:#c88ff0;
-  --dark-color-scheduling-profiler-react-layout-effects-selected:#934FC1;
-  --dark-color-scheduling-profiler-react-layout-effects-hover:#601593;
-  --dark-color-scheduling-profiler-react-passive-effects:#c88ff0;
-  --dark-color-scheduling-profiler-react-passive-effects-selected:#934FC1;
-  --dark-color-scheduling-profiler-react-passive-effects-hover:#601593;
-  --dark-color-scheduling-profiler-react-schedule: #9fc3f3;
-  --dark-color-scheduling-profiler-react-schedule-hover:#2683E2;
-  --dark-color-scheduling-profiler-react-schedule-cascading:#ff718e;
-  --dark-color-scheduling-profiler-react-schedule-cascading-hover:#ed0030;
-  --dark-color-scheduling-profiler-react-suspend: #a6e59f;
-  --dark-color-scheduling-profiler-react-suspend-hover:#13bc00;
+  --dark-color-scheduling-profiler-react-idle-hover: #465269;
+  --dark-color-scheduling-profiler-react-render: #2683E2;
+  --dark-color-scheduling-profiler-react-render-hover: #1a76d4;
+  --dark-color-scheduling-profiler-react-commit: #731fad;
+  --dark-color-scheduling-profiler-react-commit-hover: #611b94;
+  --dark-color-scheduling-profiler-react-layout-effects: #611b94;
+  --dark-color-scheduling-profiler-react-layout-effects-hover: #51167a;
+  --dark-color-scheduling-profiler-react-passive-effects: #611b94;
+  --dark-color-scheduling-profiler-react-passive-effects-hover: #51167a;
+  --dark-color-scheduling-profiler-react-schedule: #2683E2;
+  --dark-color-scheduling-profiler-react-schedule-hover: #1a76d4;
+  --dark-color-scheduling-profiler-react-suspense-rejected: #f1cc14;
+  --dark-color-scheduling-profiler-react-suspense-rejected-hover: #e4c00f;
+  --dark-color-scheduling-profiler-react-suspense-resolved: #a6e59f;
+  --dark-color-scheduling-profiler-react-suspense-resolved-hover: #89d281;
+  --dark-color-scheduling-profiler-react-suspense-unresolved: #c9cacd;
+  --dark-color-scheduling-profiler-react-suspense-unresolved-hover: #93959a;
   --dark-color-scheduling-profiler-text-color: #000000;
-  --dark-color-scheduling-profiler-react-work-border:#ffffff;
+  --dark-color-scheduling-profiler-react-work-border: #ffffff;
   --dark-color-scroll-thumb: #afb3b9;
   --dark-color-scroll-track: #313640;
   --dark-color-search-match: yellow;
   --dark-color-search-match-current: #f7923b;
   --dark-color-selected-tree-highlight-active: rgba(23, 143, 185, 0.15);
   --dark-color-selected-tree-highlight-inactive: rgba(255, 255, 255, 0.05);
+  --dark-color-scroll-caret: #4f5766;
   --dark-color-shadow: rgba(0, 0, 0, 0.5);
   --dark-color-tab-selected-border: #178fb9;
   --dark-color-text: #ffffff;
@@ -252,6 +251,10 @@
   --dark-color-toggle-text: #ffffff;
   --dark-color-tooltip-background: rgba(255, 255, 255, 0.95);
   --dark-color-tooltip-text: #000000;
+  --dark-color-warning-background: #ee1638;
+  --dark-color-warning-background-hover: #da1030;
+  --dark-color-warning-text-color: #ffffff;
+  --dark-color-warning-text-color-inverted: #ee1638;
 
   /* Font smoothing */
   --light-font-smoothing: auto;