Bring back React Stack support

Reviewed By: javache

Differential Revision: D5547208

fbshipit-source-id: 25cef6aa27fc4f17b26e1088256819ea235f79cf

Libraries/Core/InitializeCore.js

@@ -95,11 +95,6 @@ if (global.__RCTProfileIsProfiling) {
   Systrace.setEnabled(true);
 }
 
-if (__DEV__ && global.performance === undefined) {
-  const Systrace = require('Systrace');
-  global.performance = Systrace.getUserTimingPolyfill();
-}
-
 // Set up console
 const ExceptionsManager = require('ExceptionsManager');
 ExceptionsManager.installConsoleErrorReporter();

Libraries/Performance/Systrace.js

@@ -33,6 +33,8 @@ let _enabled = false;
 let _asyncCookie = 0;
 const _markStack = [];
 let _markStackIndex = -1;
+let _canInstallReactHook = false;
+let _useFiber = false;
 
 // Implements a subset of User Timing API necessary for React measurements.
 // https://developer.mozilla.org/en-US/docs/Web/API/User_Timing_API
@@ -102,9 +104,53 @@ const userTimingPolyfill = {
   },
 };
 
+// A hook to get React Stack markers in Systrace.
+const reactDebugToolHook = {
+  onBeforeMountComponent(debugID) {
+    const ReactComponentTreeHook = require('ReactGlobalSharedState').ReactComponentTreeHook;
+    const displayName = ReactComponentTreeHook.getDisplayName(debugID);
+    Systrace.beginEvent(`ReactReconciler.mountComponent(${displayName})`);
+  },
+  onMountComponent(debugID) {
+    Systrace.endEvent();
+  },
+  onBeforeUpdateComponent(debugID) {
+    const ReactComponentTreeHook = require('ReactGlobalSharedState').ReactComponentTreeHook;
+    const displayName = ReactComponentTreeHook.getDisplayName(debugID);
+    Systrace.beginEvent(`ReactReconciler.updateComponent(${displayName})`);
+  },
+  onUpdateComponent(debugID) {
+    Systrace.endEvent();
+  },
+  onBeforeUnmountComponent(debugID) {
+    const ReactComponentTreeHook = require('ReactGlobalSharedState').ReactComponentTreeHook;
+    const displayName = ReactComponentTreeHook.getDisplayName(debugID);
+    Systrace.beginEvent(`ReactReconciler.unmountComponent(${displayName})`);
+  },
+  onUnmountComponent(debugID) {
+    Systrace.endEvent();
+  },
+  onBeginLifeCycleTimer(debugID, timerType) {
+    const ReactComponentTreeHook = require('ReactGlobalSharedState').ReactComponentTreeHook;
+    const displayName = ReactComponentTreeHook.getDisplayName(debugID);
+    Systrace.beginEvent(`${displayName}.${timerType}()`);
+  },
+  onEndLifeCycleTimer(debugID, timerType) {
+    Systrace.endEvent();
+  },
+};
+
 const Systrace = {
-  getUserTimingPolyfill() {
-    return userTimingPolyfill;
+  installReactHook(useFiber: boolean) {
+    if (_enabled) {
+      if (useFiber) {
+        global.performance = userTimingPolyfill;
+      } else {
+        require('ReactDebugTool').addHook(reactDebugToolHook);
+      }
+    }
+    _useFiber = useFiber;
+    _canInstallReactHook = true;
   },
 
   setEnabled(enabled: boolean) {
@@ -115,6 +161,18 @@ const Systrace = {
         } else {
           global.nativeTraceEndLegacy && global.nativeTraceEndLegacy(TRACE_TAG_JSC_CALLS);
         }
+        if (_canInstallReactHook) {
+          if (_useFiber) {
+            global.performance = enabled ? userTimingPolyfill : undefined;
+          } else {
+            const ReactDebugTool = require('ReactDebugTool');
+            if (enabled) {
+              ReactDebugTool.addHook(reactDebugToolHook);
+            } else {
+              ReactDebugTool.removeHook(reactDebugToolHook);
+            }
+          }
+        }
       }
       _enabled = enabled;
     }

Libraries/Renderer/shims/ReactNativeFeatureFlags.js

@@ -16,4 +16,8 @@ var ReactNativeFeatureFlags = {
   useFiber: false,
 };
 
+if (__DEV__) {
+  require('Systrace').installReactHook(false);
+}
+
 module.exports = ReactNativeFeatureFlags;