Profiler plug-in for DevTools

.eslintrc

@@ -8,6 +8,7 @@ plugins:
   - react
 
 globals:
+  chrome: false
   React$Element: false
 
 rules:

.gitignore

@@ -4,5 +4,6 @@
 build
 node_modules
 npm-debug.log
+yarn-error.log
 .DS_Store
 

agent/Agent.js

@@ -161,6 +161,7 @@ class Agent extends EventEmitter {
     bridge.on('startInspecting', () => this.emit('startInspecting'));
     bridge.on('stopInspecting', () => this.emit('stopInspecting'));
     bridge.on('selected', id => this.emit('selected', id));
+    bridge.on('isRecording', isRecording => this.emit('isRecording', isRecording));
     bridge.on('setInspectEnabled', enabled => {
       this._inspectEnabled = enabled;
       this.emit('stopInspecting');
@@ -210,6 +211,7 @@ class Agent extends EventEmitter {
     this.on('root', id => bridge.send('root', id));
     this.on('mount', data => bridge.send('mount', data));
     this.on('update', data => bridge.send('update', data));
+    this.on('updateProfileTimes', data => bridge.send('updateProfileTimes', data));
     this.on('unmount', id => {
       bridge.send('unmount', id);
       // once an element has been unmounted, the bridge doesn't need to be
@@ -218,6 +220,9 @@ class Agent extends EventEmitter {
     });
     this.on('setSelection', data => bridge.send('select', data));
     this.on('setInspectEnabled', data => bridge.send('setInspectEnabled', data));
+    this.on('isRecording', isRecording => bridge.send('isRecording', isRecording));
+    this.on('storeSnapshot', (data) => bridge.send('storeSnapshot', data));
+    this.on('clearSnapshots', () => bridge.send('clearSnapshots'));
   }
 
   scrollToNode(id: ElementID): void {
@@ -375,6 +380,11 @@ class Agent extends EventEmitter {
     this.emit('root', id);
   }
 
+  rootCommitted(renderer: RendererID, internalInstance: OpaqueNodeHandle) {
+    var id = this.getId(internalInstance);
+    this.emit('rootCommitted', id, internalInstance);
+  }
+
   onMounted(renderer: RendererID, component: OpaqueNodeHandle, data: DataType) {
     var id = this.getId(component);
     this.renderers.set(id, renderer);
@@ -406,10 +416,28 @@ class Agent extends EventEmitter {
     this.emit('update', send);
   }
 
+  onUpdatedProfileTimes(component: OpaqueNodeHandle, data: DataType) {
+    var id = this.getId(component);
+    this.elementData.set(id, data);
+
+    var send = assign({}, data);
+    if (send.children && send.children.map) {
+      send.children = send.children.map(c => this.getId(c));
+    }
+    send.id = id;
+    send.canUpdate = send.updater && !!send.updater.forceUpdate;
+    delete send.type;
+    delete send.updater;
+    this.emit('updateProfileTimes', send);
+  }
+
   onUnmounted(component: OpaqueNodeHandle) {
     var id = this.getId(component);
     this.elementData.delete(id);
-    this.roots.delete(id);
+    if (this.roots.has(id)) {
+      this.roots.delete(id);
+      this.emit('rootUnmounted', id);
+    }
     this.renderers.delete(id);
     this.emit('unmount', id);
     this.idsByInternalInstances.delete(component);

agent/inject.js

@@ -17,14 +17,19 @@ var setupBackend = require('../backend/backend');
 
 module.exports = function(hook: Hook, agent: Agent) {
   var subs = [
+    // Basic functionality
     hook.sub('renderer-attached', ({id, renderer, helpers}) => {
       agent.setReactInternals(id, helpers);
       helpers.walkTree(agent.onMounted.bind(agent, id), agent.addRoot.bind(agent, id));
     }),
-    hook.sub('root', ({renderer, internalInstance}) => agent.addRoot(renderer, internalInstance)),
     hook.sub('mount', ({renderer, internalInstance, data}) => agent.onMounted(renderer, internalInstance, data)),
-    hook.sub('update', ({renderer, internalInstance, data}) => agent.onUpdated(internalInstance, data)),
     hook.sub('unmount', ({renderer, internalInstance}) => agent.onUnmounted(internalInstance)),
+    hook.sub('update', ({renderer, internalInstance, data}) => agent.onUpdated(internalInstance, data)),
+
+    // Required by Profiler plugin
+    hook.sub('root', ({renderer, internalInstance}) => agent.addRoot(renderer, internalInstance)),
+    hook.sub('rootCommitted', ({renderer, internalInstance}) => agent.rootCommitted(renderer, internalInstance)),
+    hook.sub('updateProfileTimes', ({renderer, internalInstance, data}) => agent.onUpdatedProfileTimes(internalInstance, data)),
   ];
 
   var success = setupBackend(hook);

backend/ReactTypeOfWork.js

@@ -28,4 +28,6 @@ module.exports = {
   ContextConsumer: 12,
   ContextProvider: 13,
   ForwardRef: 14,
+  Profiler: 15,
+  Placeholder: 16,
 };

backend/attachRendererFiber.js

@@ -64,6 +64,18 @@ function attachRendererFiber(hook: Hook, rid: string, renderer: ReactRenderer):
     }
   }
 
+  function haveProfilerTimesChanged(prevFiber, nextFiber) {
+    return (
+      prevFiber.actualDuration !== undefined && // Short-circuit check for non-profiling builds
+      (
+        prevFiber.actualDuration !== nextFiber.actualDuration ||
+        prevFiber.actualStartTime !== nextFiber.actualStartTime ||
+        prevFiber.selfBaseDuration !== nextFiber.selfBaseDuration ||
+        prevFiber.treeBaseDuration !== nextFiber.treeBaseDuration
+      )
+    );
+  }
+
   let pendingEvents = [];
 
   function flushPendingEvents() {
@@ -94,7 +106,22 @@ function attachRendererFiber(hook: Hook, rid: string, renderer: ReactRenderer):
   }
 
   function enqueueUpdateIfNecessary(fiber, hasChildOrderChanged) {
-    if (!hasChildOrderChanged && !hasDataChanged(fiber.alternate, fiber)) {
+    if (
+      !hasChildOrderChanged &&
+      !hasDataChanged(fiber.alternate, fiber)
+    ) {
+      // If only timing information has changed, we still need to update the nodes.
+      // But we can do it in a faster way since we know it's safe to skip the children.
+      // It's also important to avoid emitting an "update" signal for the node in this case,
+      // Since that would indicate to the Profiler that it was part of the "commit" when it wasn't.
+      if (haveProfilerTimesChanged(fiber.alternate, fiber)) {
+        pendingEvents.push({
+          internalInstance: getOpaqueNode(fiber),
+          data: getDataFiber(fiber, getOpaqueNode),
+          renderer: rid,
+          type: 'updateProfileTimes',
+        });
+      }
       return;
     }
     pendingEvents.push({
@@ -125,6 +152,14 @@ function attachRendererFiber(hook: Hook, rid: string, renderer: ReactRenderer):
     opaqueNodes.delete(opaqueNode);
   }
 
+  function markRootCommitted(fiber) {
+    pendingEvents.push({
+      internalInstance: getOpaqueNode(fiber),
+      renderer: rid,
+      type: 'rootCommitted',
+    });
+  }
+
   function mountFiber(fiber) {
     // Depth-first.
     // Logs mounting of children first, parents later.
@@ -207,6 +242,7 @@ function attachRendererFiber(hook: Hook, rid: string, renderer: ReactRenderer):
     hook.getFiberRoots(rid).forEach(root => {
       // Hydrate all the roots for the first time.
       mountFiber(root.current);
+      markRootCommitted(root.current);
     });
     flushPendingEvents();
   }
@@ -226,6 +262,7 @@ function attachRendererFiber(hook: Hook, rid: string, renderer: ReactRenderer):
   function handleCommitFiberRoot(root) {
     const current = root.current;
     const alternate = current.alternate;
+
     if (alternate) {
       // TODO: relying on this seems a bit fishy.
       const wasMounted = alternate.memoizedState != null && alternate.memoizedState.element != null;
@@ -244,6 +281,7 @@ function attachRendererFiber(hook: Hook, rid: string, renderer: ReactRenderer):
       // Mount a new root.
       mountFiber(current);
     }
+    markRootCommitted(current);
     // We're done here.
     flushPendingEvents();
   }

backend/getDataFiber.js

@@ -56,6 +56,11 @@ function getDataFiber(fiber: Object, getOpaqueNode: (fiber: Object) => Object):
   var name = null;
   var text = null;
 
+  // Profiler data
+  var actualDuration = null;
+  var actualStartTime = null;
+  var treeBaseDuration = null;
+
   switch (fiber.tag) {
     case FunctionalComponent:
     case ClassComponent:
@@ -185,7 +190,7 @@ function getDataFiber(fiber: Object, getOpaqueNode: (fiber: Object) => Object):
         case PROFILER_SYMBOL_STRING:
           nodeType = 'Special';
           props = fiber.memoizedProps;
-          name = 'Profiler';
+          name = `Profiler(${fiber.memoizedProps.id})`;
           children = [];
           break;
         default:
@@ -206,6 +211,12 @@ function getDataFiber(fiber: Object, getOpaqueNode: (fiber: Object) => Object):
     }
   }
 
+  if (fiber.actualDuration !== undefined) {
+    actualDuration = fiber.actualDuration;
+    actualStartTime = fiber.actualStartTime;
+    treeBaseDuration = fiber.treeBaseDuration;
+  }
+
   // $FlowFixMe
   return {
     nodeType,
@@ -221,6 +232,11 @@ function getDataFiber(fiber: Object, getOpaqueNode: (fiber: Object) => Object):
     text,
     updater,
     publicInstance,
+
+    // Profiler data
+    actualDuration,
+    actualStartTime,
+    treeBaseDuration,
   };
 }
 

frontend/Breadcrumb.js

@@ -14,10 +14,10 @@ import type Store from './Store';
 import type {ElementID} from './types';
 import type {Theme} from './types';
 
-var {sansSerif} = require('./Themes/Fonts');
+const {sansSerif} = require('./Themes/Fonts');
 const PropTypes = require('prop-types');
-var React = require('react');
-var decorate = require('./decorate');
+const React = require('react');
+const decorate = require('./decorate');
 
 type BreadcrumbPath = Array<{id: ElementID, node: Object}>;
 

frontend/ContextMenu.js

@@ -11,13 +11,12 @@
 'use strict';
 
 const PropTypes = require('prop-types');
+const React = require('react');
+const nullthrows = require('nullthrows').default;
+const {sansSerif} = require('./Themes/Fonts');
+const HighlightHover = require('./HighlightHover');
 
-var React = require('react');
-var nullthrows = require('nullthrows').default;
-var {sansSerif} = require('./Themes/Fonts');
-var HighlightHover = require('./HighlightHover');
-
-var decorate = require('./decorate');
+const decorate = require('./decorate');
 
 import type {Theme} from './types';
 

frontend/DataView/DataView.js

@@ -12,14 +12,14 @@
 
 import type {Theme, DOMEvent} from '../types';
 
-var {sansSerif} = require('../Themes/Fonts');
+const {sansSerif} = require('../Themes/Fonts');
 const PropTypes = require('prop-types');
-var React = require('react');
-var Simple = require('./Simple');
-var nullthrows = require('nullthrows').default;
+const React = require('react');
+const Simple = require('./Simple');
+const nullthrows = require('nullthrows').default;
 
-var consts = require('../../agent/consts');
-var previewComplex = require('./previewComplex');
+const consts = require('../../agent/consts');
+const previewComplex = require('./previewComplex');
 
 type Inspect = (path: Array<string>, cb: () => void) => void;
 type ShowMenu = boolean | (e: DOMEvent, val: any, path: Array<string>, name: string) => void;

frontend/DataView/Simple.js

@@ -10,16 +10,15 @@
  */
 'use strict';
 
-const PropTypes = require('prop-types');
-
-var React = require('react');
-var ReactDOM = require('react-dom');
+import type {Theme, DOMEvent, DOMNode} from '../types';
 
-var Input = require('../Input');
-var flash = require('../flash');
-var {monospace} = require('../Themes/Fonts');
+const PropTypes = require('prop-types');
+const React = require('react');
+const ReactDOM = require('react-dom');
 
-import type {Theme, DOMEvent, DOMNode} from '../types';
+const Input = require('../Input');
+const flash = require('../flash');
+const {monospace} = require('../Themes/Fonts');
 
 type Props = {
   data: any,

frontend/DataView/previewComplex.js

@@ -10,12 +10,12 @@
  */
 'use strict';
 
+import type {Theme} from '../types';
+
 var React = require('react');
 
 var consts = require('../../agent/consts');
 
-import type {Theme} from '../types';
-
 function previewComplex(data: Object, theme: Theme) {
   const style={ color: theme.special04 };
 

frontend/HighlightHover.js

@@ -11,9 +11,8 @@
 'use strict';
 
 const PropTypes = require('prop-types');
-
-var React = require('react');
-var assign = require('object-assign');
+const React = require('react');
+const assign = require('object-assign');
 
 import type {Theme} from './types';