[pull] master from facebook:master

.gitignore

@@ -32,5 +32,6 @@ packages/react-devtools-extensions/firefox/build
 packages/react-devtools-extensions/firefox/*.xpi
 packages/react-devtools-extensions/firefox/*.pem
 packages/react-devtools-extensions/shared/build
+packages/react-devtools-extensions/.tempUserDataDir
 packages/react-devtools-inline/dist
 packages/react-devtools-shell/dist

packages/react-devtools-extensions/chrome/test.js

@@ -4,10 +4,20 @@
 
 const chromeLaunch = require('chrome-launch');
 const {resolve} = require('path');
+const {argv} = require('yargs');
 
 const EXTENSION_PATH = resolve('./chrome/build/unpacked');
-const START_URL = 'https://facebook.github.io/react/';
+const START_URL = argv.url || 'https://reactjs.org/';
 
 chromeLaunch(START_URL, {
-  args: [`--load-extension=${EXTENSION_PATH}`],
+  args: [
+    // Load the React DevTools extension
+    `--load-extension=${EXTENSION_PATH}`,
+
+    // Automatically open DevTools window
+    '--auto-open-devtools-for-tabs',
+
+    // Remembers previous session settings (e.g. DevTools size/position)
+    '--user-data-dir=./.tempUserDataDir',
+  ],
 });

packages/react-devtools-extensions/edge/test.js

@@ -5,10 +5,12 @@
 const open = require('open');
 const os = require('os');
 const osName = require('os-name');
-const START_URL = 'https://facebook.github.io/react/';
 const {resolve} = require('path');
+const {argv} = require('yargs');
 
 const EXTENSION_PATH = resolve('./edge/build/unpacked');
+const START_URL = argv.url || 'https://reactjs.org/';
+
 const extargs = `--load-extension=${EXTENSION_PATH}`;
 
 const osname = osName(os.platform());

packages/react-devtools-extensions/firefox/test.js

@@ -5,9 +5,10 @@
 const {exec} = require('child-process-promise');
 const {Finder} = require('firefox-profile');
 const {resolve} = require('path');
+const {argv} = require('yargs');
 
 const EXTENSION_PATH = resolve('./firefox/build/unpacked');
-const START_URL = 'https://facebook.github.io/react/';
+const START_URL = argv.url || 'https://reactjs.org/';
 
 const main = async () => {
   const finder = new Finder();

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

@@ -13,7 +13,7 @@ import '@reach/menu-button/styles.css';
 import '@reach/tooltip/styles.css';
 
 import * as React from 'react';
-import {useEffect, useMemo, useRef} from 'react';
+import {useEffect, useLayoutEffect, useMemo, useRef} from 'react';
 import Store from '../store';
 import {BridgeContext, ContextMenuContext, StoreContext} from './context';
 import Components from './Components/Components';
@@ -169,9 +169,10 @@ export default function DevTools({
     };
   }, [showTabBar]);
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     return () => {
       try {
+        // Shut the Bridge down synchronously (during unmount).
         bridge.shutdown();
       } catch (error) {
         // Attempting to use a disconnected port.

packages/react-reconciler/src/DebugTracing.js

@@ -7,6 +7,7 @@
  * @flow
  */
 
+import type {Lane, Lanes} from './ReactFiberLane';
 import type {Wakeable} from 'shared/ReactTypes';
 
 import {enableDebugTracing} from 'shared/ReactFeatureFlags';
@@ -17,6 +18,10 @@ let nativeConsoleLog: null | Function = null;
 const pendingGroupArgs: Array<any> = [];
 let printedGroupIndex: number = -1;
 
+function formatLanes(laneOrLanes: Lane | Lanes): string {
+  return '0b' + (laneOrLanes: any).toString(2).padStart(31, '0');
+}
+
 function group(...groupArgs): void {
   pendingGroupArgs.push(groupArgs);
 
@@ -57,11 +62,11 @@ function log(...logArgs): void {
 const REACT_LOGO_STYLE =
   'background-color: #20232a; color: #61dafb; padding: 0 2px;';
 
-export function logCommitStarted(priorityLabel: string): void {
+export function logCommitStarted(lanes: Lanes): void {
   if (__DEV__) {
     if (enableDebugTracing) {
       group(
-        `%c⚛️%c commit%c (priority: ${priorityLabel})`,
+        `%c⚛️%c commit%c (${formatLanes(lanes)})`,
         REACT_LOGO_STYLE,
         '',
         'font-weight: normal;',
@@ -128,11 +133,11 @@ export function logComponentSuspended(
   }
 }
 
-export function logLayoutEffectsStarted(priorityLabel: string): void {
+export function logLayoutEffectsStarted(lanes: Lanes): void {
   if (__DEV__) {
     if (enableDebugTracing) {
       group(
-        `%c⚛️%c layout effects%c (priority: ${priorityLabel})`,
+        `%c⚛️%c layout effects%c (${formatLanes(lanes)})`,
         REACT_LOGO_STYLE,
         '',
         'font-weight: normal;',
@@ -149,11 +154,11 @@ export function logLayoutEffectsStopped(): void {
   }
 }
 
-export function logPassiveEffectsStarted(priorityLabel: string): void {
+export function logPassiveEffectsStarted(lanes: Lanes): void {
   if (__DEV__) {
     if (enableDebugTracing) {
       group(
-        `%c⚛️%c passive effects%c (priority: ${priorityLabel})`,
+        `%c⚛️%c passive effects%c (${formatLanes(lanes)})`,
         REACT_LOGO_STYLE,
         '',
         'font-weight: normal;',
@@ -170,11 +175,11 @@ export function logPassiveEffectsStopped(): void {
   }
 }
 
-export function logRenderStarted(priorityLabel: string): void {
+export function logRenderStarted(lanes: Lanes): void {
   if (__DEV__) {
     if (enableDebugTracing) {
       group(
-        `%c⚛️%c render%c (priority: ${priorityLabel})`,
+        `%c⚛️%c render%c (${formatLanes(lanes)})`,
         REACT_LOGO_STYLE,
         '',
         'font-weight: normal;',
@@ -193,12 +198,12 @@ export function logRenderStopped(): void {
 
 export function logForceUpdateScheduled(
   componentName: string,
-  priorityLabel: string,
+  lane: Lane,
 ): void {
   if (__DEV__) {
     if (enableDebugTracing) {
       log(
-        `%c⚛️%c ${componentName} forced update %c(priority: ${priorityLabel})`,
+        `%c⚛️%c ${componentName} forced update %c(${formatLanes(lane)})`,
         REACT_LOGO_STYLE,
         'color: #db2e1f; font-weight: bold;',
         '',
@@ -209,13 +214,13 @@ export function logForceUpdateScheduled(
 
 export function logStateUpdateScheduled(
   componentName: string,
-  priorityLabel: string,
+  lane: Lane,
   payloadOrAction: any,
 ): void {
   if (__DEV__) {
     if (enableDebugTracing) {
       log(
-        `%c⚛️%c ${componentName} updated state %c(priority: ${priorityLabel})`,
+        `%c⚛️%c ${componentName} updated state %c(${formatLanes(lane)})`,
         REACT_LOGO_STYLE,
         'color: #01a252; font-weight: bold;',
         '',

packages/react-reconciler/src/ReactFiberClassComponent.old.js

@@ -16,6 +16,7 @@ import {Update, Snapshot} from './ReactSideEffectTags';
 import {
   debugRenderPhaseSideEffectsForStrictMode,
   disableLegacyContext,
+  enableDebugTracing,
   warnAboutDeprecatedLifecycles,
 } from 'shared/ReactFeatureFlags';
 import ReactStrictModeWarnings from './ReactStrictModeWarnings.old';
@@ -27,7 +28,7 @@ import invariant from 'shared/invariant';
 import {REACT_CONTEXT_TYPE, REACT_PROVIDER_TYPE} from 'shared/ReactSymbols';
 
 import {resolveDefaultProps} from './ReactFiberLazyComponent.old';
-import {StrictMode} from './ReactTypeOfMode';
+import {DebugTracingMode, StrictMode} from './ReactTypeOfMode';
 
 import {
   enqueueUpdate,
@@ -55,6 +56,7 @@ import {
   scheduleUpdateOnFiber,
 } from './ReactFiberWorkLoop.old';
 import {requestCurrentSuspenseConfig} from './ReactFiberSuspenseConfig';
+import {logForceUpdateScheduled, logStateUpdateScheduled} from './DebugTracing';
 
 import {disableLogs, reenableLogs} from 'shared/ConsolePatchingDev';
 
@@ -203,6 +205,15 @@ const classComponentUpdater = {
 
     enqueueUpdate(fiber, update);
     scheduleUpdateOnFiber(fiber, lane, eventTime);
+
+    if (__DEV__) {
+      if (enableDebugTracing) {
+        if (fiber.mode & DebugTracingMode) {
+          const name = getComponentName(fiber.type) || 'Unknown';
+          logStateUpdateScheduled(name, lane, payload);
+        }
+      }
+    }
   },
   enqueueReplaceState(inst, payload, callback) {
     const fiber = getInstance(inst);
@@ -223,6 +234,15 @@ const classComponentUpdater = {
 
     enqueueUpdate(fiber, update);
     scheduleUpdateOnFiber(fiber, lane, eventTime);
+
+    if (__DEV__) {
+      if (enableDebugTracing) {
+        if (fiber.mode & DebugTracingMode) {
+          const name = getComponentName(fiber.type) || 'Unknown';
+          logStateUpdateScheduled(name, lane, payload);
+        }
+      }
+    }
   },
   enqueueForceUpdate(inst, callback) {
     const fiber = getInstance(inst);
@@ -242,6 +262,15 @@ const classComponentUpdater = {
 
     enqueueUpdate(fiber, update);
     scheduleUpdateOnFiber(fiber, lane, eventTime);
+
+    if (__DEV__) {
+      if (enableDebugTracing) {
+        if (fiber.mode & DebugTracingMode) {
+          const name = getComponentName(fiber.type) || 'Unknown';
+          logForceUpdateScheduled(name, lane);
+        }
+      }
+    }
   },
 };
 

packages/react-reconciler/src/ReactFiberHooks.old.js

@@ -24,9 +24,12 @@ import type {FiberRoot} from './ReactInternalTypes';
 import type {OpaqueIDType} from './ReactFiberHostConfig';
 
 import ReactSharedInternals from 'shared/ReactSharedInternals';
-import {enableNewReconciler} from 'shared/ReactFeatureFlags';
+import {
+  enableDebugTracing,
+  enableNewReconciler,
+} from 'shared/ReactFeatureFlags';
 
-import {NoMode, BlockingMode} from './ReactTypeOfMode';
+import {NoMode, BlockingMode, DebugTracingMode} from './ReactTypeOfMode';
 import {
   NoLane,
   NoLanes,
@@ -83,6 +86,7 @@ import {
   warnAboutMultipleRenderersDEV,
 } from './ReactMutableSource.old';
 import {getIsRendering} from './ReactCurrentFiber';
+import {logStateUpdateScheduled} from './DebugTracing';
 
 const {ReactCurrentDispatcher, ReactCurrentBatchConfig} = ReactSharedInternals;
 
@@ -1737,6 +1741,15 @@ function dispatchAction<S, A>(
     }
     scheduleUpdateOnFiber(fiber, lane, eventTime);
   }
+
+  if (__DEV__) {
+    if (enableDebugTracing) {
+      if (fiber.mode & DebugTracingMode) {
+        const name = getComponentName(fiber.type) || 'Unknown';
+        logStateUpdateScheduled(name, lane, action);
+      }
+    }
+  }
 }
 
 export const ContextOnlyDispatcher: Dispatcher = {

packages/react-reconciler/src/ReactFiberThrow.old.js

@@ -30,7 +30,8 @@ import {
   LifecycleEffectMask,
 } from './ReactSideEffectTags';
 import {shouldCaptureSuspense} from './ReactFiberSuspenseComponent.old';
-import {NoMode, BlockingMode} from './ReactTypeOfMode';
+import {NoMode, BlockingMode, DebugTracingMode} from './ReactTypeOfMode';
+import {enableDebugTracing} from 'shared/ReactFeatureFlags';
 import {createCapturedValue} from './ReactCapturedValue';
 import {
   enqueueCapturedUpdate,
@@ -53,6 +54,7 @@ import {
   pingSuspendedRoot,
 } from './ReactFiberWorkLoop.old';
 import {logCapturedError} from './ReactFiberErrorLogger';
+import {logComponentSuspended} from './DebugTracing';
 
 import {
   SyncLane,
@@ -189,6 +191,15 @@ function throwException(
     // This is a wakeable.
     const wakeable: Wakeable = (value: any);
 
+    if (__DEV__) {
+      if (enableDebugTracing) {
+        if (sourceFiber.mode & DebugTracingMode) {
+          const name = getComponentName(sourceFiber.type) || 'Unknown';
+          logComponentSuspended(name, wakeable);
+        }
+      }
+    }
+
     if ((sourceFiber.mode & BlockingMode) === NoMode) {
       // Reset the memoizedState to what it was before we attempted
       // to render it.