Update to new ReactPerf

Libraries/JavaScriptAppEngine/Initialization/InitializeJavaScriptAppEngine.js

@@ -192,13 +192,6 @@ function setUpWebSockets() {
   polyfillLazyGlobal('WebSocket', () => require('WebSocket'));
 }
 
-function setUpProfile() {
-  if (__DEV__) {
-    var Systrace = require('Systrace');
-    Systrace.swizzleReactPerf();
-  }
-}
-
 function setUpProcess() {
   GLOBAL.process = GLOBAL.process || {};
   GLOBAL.process.env = GLOBAL.process.env || {};
@@ -230,7 +223,6 @@ setUpGeolocation();
 setUpMapAndSet();
 setUpProduct();
 setUpWebSockets();
-setUpProfile();
 setUpDevTools();
 
 // Just to make sure the JS gets packaged up. Wait until the JS environment has

Libraries/Utilities/RCTRenderingPerf.js

@@ -11,9 +11,11 @@
  */
 'use strict';
 
-var ReactDefaultPerf = require('ReactDefaultPerf');
+var ReactPerf = require('ReactPerf');
+var ReactDebugTool = require('ReactDebugTool');
 
 var invariant = require('fbjs/lib/invariant');
+var performanceNow = require('fbjs/lib/performanceNow');
 
 type perfModule = {
   start: () => void;
@@ -22,6 +24,22 @@ type perfModule = {
 
 var perfModules = [];
 var enabled = false;
+var lastRenderStartTime = 0;
+var totalRenderDuration = 0;
+
+var RCTRenderingPerfDevtool = {
+  onBeginLifeCycleTimer(debugID, timerType) {
+    if (timerType === 'render') {
+      lastRenderStartTime = performanceNow();
+    }
+  },
+  onEndLifeCycleTimer(debugID, timerType) {
+    if (timerType === 'render') {
+      var lastRenderDuration = performanceNow() - lastRenderStartTime;
+      totalRenderDuration += lastRenderDuration;
+    }
+  },
+};
 
 var RCTRenderingPerf = {
   // Once perf is enabled, it stays enabled
@@ -35,7 +53,8 @@ var RCTRenderingPerf = {
       return;
     }
 
-    ReactDefaultPerf.start();
+    ReactPerf.start();
+    ReactDebugTool.addDevtool(RCTRenderingPerfDevtool);
     perfModules.forEach((module) => module.start());
   },
 
@@ -44,21 +63,14 @@ var RCTRenderingPerf = {
       return;
     }
 
-    ReactDefaultPerf.stop();
-    ReactDefaultPerf.printInclusive();
-    ReactDefaultPerf.printWasted();
+    ReactPerf.stop();
+    ReactPerf.printInclusive();
+    ReactPerf.printWasted();
+    ReactDebugTool.removeDevtool(RCTRenderingPerfDevtool);
 
-    var totalRender = 0;
-    var totalTime = 0;
-    var measurements = ReactDefaultPerf.getLastMeasurements();
-    for (var ii = 0; ii < measurements.length; ii++) {
-      var render = measurements[ii].render;
-      for (var nodeName in render) {
-        totalRender += render[nodeName];
-      }
-      totalTime += measurements[ii].totalTime;
-    }
-    console.log('Total time spent in render(): ' + totalRender + 'ms');
+    console.log(`Total time spent in render(): ${totalRenderDuration.toFixed(2)} ms`);
+    lastRenderStartTime = 0;
+    totalRenderDuration = 0;
 
     perfModules.forEach((module) => module.stop());
   },

Libraries/Utilities/Systrace.js

@@ -29,26 +29,50 @@ var TRACE_TAG_JSC_CALLS = 1 << 27;
 
 var _enabled = false;
 var _asyncCookie = 0;
-var _ReactPerf = null;
-function ReactPerf() {
-  if (!_ReactPerf) {
-    _ReactPerf = require('ReactPerf');
+var _ReactDebugTool = null;
+var _ReactComponentTreeDevtool = null;
+function ReactDebugTool() {
+  if (!_ReactDebugTool) {
+    _ReactDebugTool = require('ReactDebugTool');
   }
-  return _ReactPerf;
+  return _ReactDebugTool;
 }
+function ReactComponentTreeDevtool() {
+  if (!_ReactComponentTreeDevtool) {
+    _ReactComponentTreeDevtool = require('ReactComponentTreeDevtool');
+  }
+  return _ReactComponentTreeDevtool;
+}
+
+var ReactSystraceDevtool = {
+  onBeginReconcilerTimer(debugID, timerType) {
+    var displayName = ReactComponentTreeDevtool().getDisplayName(debugID);
+    Systrace.beginEvent(`ReactReconciler.${timerType}(${displayName})`);
+  },
+  onEndReconcilerTimer(debugID, timerType) {
+    Systrace.endEvent();
+  },
+  onBeginLifeCycleTimer(debugID, timerType) {
+    var displayName = ReactComponentTreeDevtool().getDisplayName(debugID);
+    Systrace.beginEvent(`${displayName}.${timerType}()`);
+  },
+  onEndLifeCycleTimer(debugID, timerType) {
+    Systrace.endEvent();
+  },
+};
 
 var Systrace = {
   setEnabled(enabled: boolean) {
     if (_enabled !== enabled) {
       if (enabled) {
         global.nativeTraceBeginLegacy && global.nativeTraceBeginLegacy(TRACE_TAG_JSC_CALLS);
+        ReactDebugTool().addDevtool(ReactSystraceDevtool);
       } else {
         global.nativeTraceEndLegacy && global.nativeTraceEndLegacy(TRACE_TAG_JSC_CALLS);
+        ReactDebugTool().removeDevtool(ReactSystraceDevtool);
       }
     }
     _enabled = enabled;
-
-    ReactPerf().enableMeasure = enabled;
   },
 
   /**
@@ -104,24 +128,6 @@ var Systrace = {
     }
   },
 
-  reactPerfMeasure(objName: string, fnName: string, func: any): any {
-    return function (component) {
-      if (!_enabled) {
-        return func.apply(this, arguments);
-      }
-
-      var name = objName === 'ReactCompositeComponent' && this.getName() || '';
-      Systrace.beginEvent(`${objName}.${fnName}(${name})`);
-    var ret = func.apply(this, arguments);
-      Systrace.endEvent();
-      return ret;
-    };
-  },
-
-  swizzleReactPerf() {
-    ReactPerf().injection.injectMeasure(Systrace.reactPerfMeasure);
-  },
-
   /**
    * Relay profiles use await calls, so likely occur out of current stack frame
    * therefore async variant of profiling is used

Libraries/react-native/react-native.js

@@ -195,7 +195,7 @@ if (__DEV__) {
       if (__DEV__) {
         addonWarn('Perf', 'react-addons-perf');
       }
-      return require('ReactDefaultPerf');
+      return require('ReactPerf');
     }
   });
   Object.defineProperty(ReactNative.addons, 'TestUtils', {