Upsell React DevTools in 16 (#10351)

* Upsell React DevTools * Fix Flow * Upsell message nits * Avoid extra checks in onCommitRoot and onCommitUnmount
facebook · Aug 2, 2017 · 9823808 · 9823808
1 parent 4e6cc2f
commit 9823808
Show file tree

Hide file tree

Showing 3 changed files with 96 additions and 56 deletions.
diff --git a/src/renderers/dom/fiber/ReactDOMFiberEntry.js b/src/renderers/dom/fiber/ReactDOMFiberEntry.js
@@ -15,6 +15,7 @@
 import type {Fiber} from 'ReactFiber';
 import type {ReactNodeList} from 'ReactTypes';
 
+var ExecutionEnvironment = require('fbjs/lib/ExecutionEnvironment');
 var ReactBrowserEventEmitter = require('ReactBrowserEventEmitter');
 var ReactControlledComponent = require('ReactControlledComponent');
 var ReactDOMComponentTree = require('ReactDOMComponentTree');
@@ -804,14 +805,39 @@ var ReactDOMFiber = {
   },
 };
 
-if (typeof injectInternals === 'function') {
-  injectInternals({
-    findFiberByHostInstance: ReactDOMComponentTree.getClosestInstanceFromNode,
-    findHostInstanceByFiber: DOMRenderer.findHostInstance,
-    // This is an enum because we may add more (e.g. profiler build)
-    bundleType: __DEV__ ? 1 : 0,
-    version: ReactVersion,
-  });
+const foundDevTools = injectInternals({
+  findFiberByHostInstance: ReactDOMComponentTree.getClosestInstanceFromNode,
+  findHostInstanceByFiber: DOMRenderer.findHostInstance,
+  // This is an enum because we may add more (e.g. profiler build)
+  bundleType: __DEV__ ? 1 : 0,
+  version: ReactVersion,
+});
+
+if (__DEV__) {
+  if (
+    !foundDevTools &&
+    ExecutionEnvironment.canUseDOM &&
+    window.top === window.self
+  ) {
+    // If we're in Chrome or Firefox, provide a download link if not installed.
+    if (
+      (navigator.userAgent.indexOf('Chrome') > -1 &&
+        navigator.userAgent.indexOf('Edge') === -1) ||
+      navigator.userAgent.indexOf('Firefox') > -1
+    ) {
+      var showFileUrlMessage = window.location.protocol.indexOf('http') === -1;
+      console.info(
+        '%cDownload the React DevTools ' +
+          'for a better development experience: ' +
+          'https://fb.me/react-devtools' +
+          (showFileUrlMessage
+            ? '\nYou might need to use a local HTTP server (instead of file://): ' +
+                'https://fb.me/react-devtools-faq'
+            : ''),
+        'font-weight:bold',
+      );
+    }
+  }
 }
 
 module.exports = ReactDOMFiber;
diff --git a/src/renderers/native/ReactNativeFiberEntry.js b/src/renderers/native/ReactNativeFiberEntry.js
@@ -116,15 +116,13 @@ if (__DEV__) {
   );
 }
 
-if (typeof injectInternals === 'function') {
-  injectInternals({
-    findFiberByHostInstance: ReactNativeComponentTree.getClosestInstanceFromNode,
-    findHostInstanceByFiber: ReactNativeFiberRenderer.findHostInstance,
-    getInspectorDataForViewTag: ReactNativeFiberInspector.getInspectorDataForViewTag,
-    // This is an enum because we may add more (e.g. profiler build)
-    bundleType: __DEV__ ? 1 : 0,
-    version: ReactVersion,
-  });
-}
+injectInternals({
+  findFiberByHostInstance: ReactNativeComponentTree.getClosestInstanceFromNode,
+  findHostInstanceByFiber: ReactNativeFiberRenderer.findHostInstance,
+  getInspectorDataForViewTag: ReactNativeFiberInspector.getInspectorDataForViewTag,
+  // This is an enum because we may add more (e.g. profiler build)
+  bundleType: __DEV__ ? 1 : 0,
+  version: ReactVersion,
+});
 
 module.exports = ReactNativeFiber;
diff --git a/src/renderers/shared/fiber/ReactFiberDevToolsHook.js b/src/renderers/shared/fiber/ReactFiberDevToolsHook.js
@@ -21,54 +21,70 @@ if (__DEV__) {
   var warning = require('fbjs/lib/warning');
 }
 
-let rendererID = null;
-let injectInternals = null;
-let onCommitRoot = null;
-let onCommitUnmount = null;
-if (
-  typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ !== 'undefined' &&
-  __REACT_DEVTOOLS_GLOBAL_HOOK__.supportsFiber
-) {
-  let {
-    inject,
-    onCommitFiberRoot,
-    onCommitFiberUnmount,
-  } = __REACT_DEVTOOLS_GLOBAL_HOOK__;
+let onCommitFiberRoot = null;
+let onCommitFiberUnmount = null;
+let hasLoggedError = false;
 
-  injectInternals = function(internals: Object) {
-    if (__DEV__) {
-      warning(rendererID == null, 'Cannot inject into DevTools twice.');
-    }
-    rendererID = inject(internals);
-  };
-
-  onCommitRoot = function(root: FiberRoot) {
-    if (rendererID == null) {
-      return;
-    }
+function catchErrors(fn) {
+  return function(arg) {
     try {
-      onCommitFiberRoot(rendererID, root);
+      return fn(arg);
     } catch (err) {
-      // Catch all errors because it is unsafe to throw in the commit phase.
-      if (__DEV__) {
+      if (__DEV__ && !hasLoggedError) {
+        hasLoggedError = true;
         warning(false, 'React DevTools encountered an error: %s', err);
       }
     }
   };
+}
 
-  onCommitUnmount = function(fiber: Fiber) {
-    if (rendererID == null) {
-      return;
+function injectInternals(internals: Object): boolean {
+  if (typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ === 'undefined') {
+    // No DevTools
+    return false;
+  }
+  const hook = __REACT_DEVTOOLS_GLOBAL_HOOK__;
+  if (!hook.supportsFiber) {
+    if (__DEV__) {
+      warning(
+        false,
+        'The installed version of React DevTools is too old and will not work ' +
+          'with the current version of React. Please update React DevTools. ' +
+          'https://fb.me/react-devtools',
+      );
     }
-    try {
-      onCommitFiberUnmount(rendererID, fiber);
-    } catch (err) {
-      // Catch all errors because it is unsafe to throw in the commit phase.
-      if (__DEV__) {
-        warning(false, 'React DevTools encountered an error: %s', err);
-      }
+    // DevTools exists, even though it doesn't support Fiber.
+    return true;
+  }
+  try {
+    const rendererID = hook.inject(internals);
+    // We have successfully injected, so now it is safe to set up hooks.
+    onCommitFiberRoot = catchErrors(root =>
+      hook.onCommitFiberRoot(rendererID, root),
+    );
+    onCommitFiberUnmount = catchErrors(fiber =>
+      hook.onCommitFiberUnmount(rendererID, fiber),
+    );
+  } catch (err) {
+    // Catch all errors because it is unsafe to throw during initialization.
+    if (__DEV__) {
+      warning(false, 'React DevTools encountered an error: %s.', err);
     }
-  };
+  }
+  // DevTools exists
+  return true;
+}
+
+function onCommitRoot(root: FiberRoot) {
+  if (typeof onCommitFiberRoot === 'function') {
+    onCommitFiberRoot(root);
+  }
+}
+
+function onCommitUnmount(fiber: Fiber) {
+  if (typeof onCommitFiberUnmount === 'function') {
+    onCommitFiberUnmount(fiber);
+  }
 }
 
 exports.injectInternals = injectInternals;