Show commit priority levels in Profiler UI (if available)

package.json

@@ -132,16 +132,16 @@
     "opener": "^1.5.1",
     "prettier": "^1.16.4",
     "prop-types": "^15.6.2",
-    "react": "^0.0.0-6da04b5d8",
+    "react": "^0.0.0-50b50c26f",
     "react-color": "^2.11.7",
-    "react-dom": "^0.0.0-6da04b5d8",
-    "react-is": "^0.0.0-6da04b5d8",
-    "react-test-renderer": "^0.0.0-6da04b5d8",
+    "react-dom": "^0.0.0-50b50c26f",
+    "react-is": "^0.0.0-50b50c26f",
+    "react-test-renderer": "^0.0.0-50b50c26f",
     "react-virtualized-auto-sizer": "^1.0.2",
     "react-window": "^1.8.0",
     "request-promise": "^4.2.4",
     "rimraf": "^2.6.3",
-    "scheduler": "^0.0.0-6da04b5d8",
+    "scheduler": "^0.0.0-50b50c26f",
     "semver": "^5.5.1",
     "style-loader": "^0.23.1",
     "web-ext": "^3.0.0",

shells/dev/app/ElementTypes/index.js

@@ -6,8 +6,6 @@ import React, {
   lazy,
   memo,
   Component,
-  // $FlowFixMe Flow thinks ConcurrentMode is stable
-  unstable_ConcurrentMode as ConcurrentMode,
   Fragment,
   // $FlowFixMe Flow doesn't know about the Profiler import yet
   Profiler,
@@ -48,15 +46,13 @@ export default function ElementTypes() {
           <Context.Consumer>{value => null}</Context.Consumer>
         </Context.Provider>
         <StrictMode>
-          <ConcurrentMode>
-            <Suspense fallback={<div>Loading...</div>}>
-              <ClassComponent />
-              <FunctionComponent />
-              <MemoFunctionComponent />
-              <ForwardRefComponent />
-              <LazyComponent />
-            </Suspense>
-          </ConcurrentMode>
+          <Suspense fallback={<div>Loading...</div>}>
+            <ClassComponent />
+            <FunctionComponent />
+            <MemoFunctionComponent />
+            <ForwardRefComponent />
+            <LazyComponent />
+          </Suspense>
         </StrictMode>
       </Fragment>
     </Profiler>

shells/dev/app/PriorityLevels/index.js

@@ -0,0 +1,46 @@
+// @flow
+
+import React, { Fragment, useCallback, useState } from 'react';
+import {
+  unstable_IdlePriority as IdlePriority,
+  unstable_LowPriority as LowPriority,
+  unstable_runWithPriority as runWithPriority,
+} from 'scheduler';
+
+export default function PriorityLevels() {
+  const [defaultPriority, setDefaultPriority] = useState<boolean>(false);
+  const [idlePriority, setIdlePriority] = useState<boolean>(false);
+  const [normalPriority, setLowPriority] = useState<boolean>(false);
+
+  const resetSequence = useCallback(() => {
+    setDefaultPriority(false);
+    setLowPriority(false);
+    setIdlePriority(false);
+  }, []);
+
+  const startSequence = useCallback(() => {
+    setDefaultPriority(true);
+    runWithPriority(LowPriority, () => setLowPriority(true));
+    runWithPriority(IdlePriority, () => setIdlePriority(true));
+  }, []);
+
+  const labels = [];
+  if (defaultPriority) {
+    labels.push('(default priority)');
+  }
+  if (normalPriority) {
+    labels.push('Low Priority');
+  }
+  if (idlePriority) {
+    labels.push('Idle Priority');
+  }
+
+  return (
+    <Fragment>
+      <h1>Priority Levels</h1>
+      <button onClick={resetSequence}>Reset</button>
+      <button onClick={startSequence}>Start sequence</button>
+      <span>{labels.join(', ')}</span>
+    </Fragment>
+  );
+}

shells/dev/app/index.js

@@ -3,12 +3,17 @@
 // This test harness mounts each test app as a separate root to test multi-root applications.
 
 import { createElement } from 'react';
-import { render, unmountComponentAtNode } from 'react-dom';
+import {
+  unmountComponentAtNode,
+  // $FlowFixMe Flow does not yet know about createRoot()
+  unstable_createRoot as createRoot,
+} from 'react-dom';
 import DeeplyNestedComponents from './DeeplyNestedComponents';
 import EditableProps from './EditableProps';
 import ElementTypes from './ElementTypes';
 import InspectableElements from './InspectableElements';
 import InteractionTracing from './InteractionTracing';
+import PriorityLevels from './PriorityLevels';
 import ToDoList from './ToDoList';
 import Toggle from './Toggle';
 import SuspenseTree from './SuspenseTree';
@@ -24,7 +29,8 @@ function mountHelper(App) {
 
   containers.push(container);
 
-  render(createElement(App), container);
+  const root = createRoot(container);
+  root.render(createElement(App));
 }
 
 function mountTestApp() {
@@ -33,6 +39,7 @@ function mountTestApp() {
   mountHelper(InspectableElements);
   mountHelper(ElementTypes);
   mountHelper(EditableProps);
+  mountHelper(PriorityLevels);
   mountHelper(Toggle);
   mountHelper(SuspenseTree);
   mountHelper(DeeplyNestedComponents);

src/__tests__/__snapshots__/inspectedElementContext-test.js.snap

@@ -27,6 +27,28 @@ exports[`InspectedElementContext should inspect the currently selected element:
 }
 `;
 
+exports[`InspectedElementContext should inspect the currently selected element: 2: Inspected element 2 2`] = `
+{
+  "id": 2,
+  "owners": null,
+  "context": null,
+  "hooks": [
+    {
+      "id": 0,
+      "isStateEditable": true,
+      "name": "State",
+      "value": 1,
+      "subHooks": []
+    }
+  ],
+  "props": {
+    "foo": 1,
+    "bar": "abc"
+  },
+  "state": null
+}
+`;
+
 exports[`InspectedElementContext should poll for updates for the currently selected element: 1: mount 1`] = `
 [root]
     <Example>

src/__tests__/__snapshots__/profiling-test.js.snap

@@ -11,6 +11,7 @@ Object {
   },
   "commitIndex": 0,
   "interactions": Array [],
+  "priorityLevel": "Immediate",
   "rootID": 1,
   "selfDurations": Map {
     1 => 0,
@@ -33,6 +34,7 @@ Object {
   },
   "commitIndex": 1,
   "interactions": Array [],
+  "priorityLevel": "Immediate",
   "rootID": 1,
   "selfDurations": Map {
     3 => 0,
@@ -53,6 +55,7 @@ Object {
   },
   "commitIndex": 2,
   "interactions": Array [],
+  "priorityLevel": "Immediate",
   "rootID": 1,
   "selfDurations": Map {
     3 => 0,
@@ -70,6 +73,7 @@ Object {
   },
   "commitIndex": 3,
   "interactions": Array [],
+  "priorityLevel": "Immediate",
   "rootID": 1,
   "selfDurations": Map {
     2 => 10,
@@ -91,6 +95,7 @@ Object {
       },
       "commitIndex": 0,
       "interactions": Array [],
+      "priorityLevel": "Immediate",
       "rootID": 1,
       "selfDurations": Map {
         1 => 0,
@@ -110,6 +115,7 @@ Object {
       },
       "commitIndex": 1,
       "interactions": Array [],
+      "priorityLevel": "Immediate",
       "rootID": 1,
       "selfDurations": Map {
         3 => 0,
@@ -127,6 +133,7 @@ Object {
       },
       "commitIndex": 2,
       "interactions": Array [],
+      "priorityLevel": "Immediate",
       "rootID": 1,
       "selfDurations": Map {
         3 => 0,
@@ -141,6 +148,7 @@ Object {
       },
       "commitIndex": 3,
       "interactions": Array [],
+      "priorityLevel": "Immediate",
       "rootID": 1,
       "selfDurations": Map {
         2 => 10,
@@ -324,6 +332,7 @@ Object {
   },
   "commitIndex": 0,
   "interactions": Array [],
+  "priorityLevel": "Immediate",
   "rootID": 1,
   "selfDurations": Map {
     1 => 0,
@@ -344,6 +353,7 @@ Object {
   },
   "commitIndex": 0,
   "interactions": Array [],
+  "priorityLevel": "Immediate",
   "rootID": 1,
   "selfDurations": Map {
     1 => 0,
@@ -362,6 +372,7 @@ Object {
   },
   "commitIndex": 1,
   "interactions": Array [],
+  "priorityLevel": "Immediate",
   "rootID": 1,
   "selfDurations": Map {
     5 => 3,
@@ -447,6 +458,7 @@ Object {
       },
       "commitIndex": 0,
       "interactions": Array [],
+      "priorityLevel": "Immediate",
       "rootID": 1,
       "selfDurations": Map {
         1 => 0,
@@ -464,6 +476,7 @@ Object {
       },
       "commitIndex": 1,
       "interactions": Array [],
+      "priorityLevel": "Immediate",
       "rootID": 1,
       "selfDurations": Map {
         3 => 0,
@@ -482,6 +495,7 @@ Object {
       },
       "commitIndex": 2,
       "interactions": Array [],
+      "priorityLevel": "Immediate",
       "rootID": 1,
       "selfDurations": Map {
         3 => 0,
@@ -696,6 +710,7 @@ Object {
           "timestamp": 0,
         },
       ],
+      "priorityLevel": "Immediate",
       "rootID": 1,
       "selfDurations": Map {
         1 => 0,
@@ -720,6 +735,7 @@ Object {
           "timestamp": 11,
         },
       ],
+      "priorityLevel": "Immediate",
       "rootID": 1,
       "selfDurations": Map {
         3 => 0,
@@ -906,6 +922,7 @@ Object {
       },
       "commitIndex": 0,
       "interactions": Array [],
+      "priorityLevel": "Immediate",
       "rootID": 1,
       "selfDurations": Map {
         3 => 0,
@@ -923,6 +940,7 @@ Object {
       },
       "commitIndex": 1,
       "interactions": Array [],
+      "priorityLevel": "Immediate",
       "rootID": 1,
       "selfDurations": Map {
         3 => 0,
@@ -937,6 +955,7 @@ Object {
       },
       "commitIndex": 2,
       "interactions": Array [],
+      "priorityLevel": "Immediate",
       "rootID": 1,
       "selfDurations": Map {
         2 => 10,