Merge branch 'source' of github.com:bvaughn/react-devtools-experimental

extension/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "4.0.5",
+  "version": "4.0.6",
   "repository": "bvaughn/react-devtools-experimental",
   "license": "MIT",
   "private": true,
@@ -101,7 +101,7 @@
     "crx": "^5.0.0",
     "css-loader": "^1.0.1",
     "error-stack-parser": "^2.0.2",
-    "es6-symbol": "3.0.2",
+    "es6-symbol": "^3",
     "escape-string-regexp": "^1.0.5",
     "eslint": "^4.19.1",
     "eslint-config-prettier": "^2.9.0",

extension/shells/browser/chrome/manifest.json

@@ -2,8 +2,8 @@
   "manifest_version": 2,
   "name": "React Developer Tools",
   "description": "Adds React debugging tools to the Chrome Developer Tools.",
-  "version": "4.0.5",
-  "version_name": "4.0.5",
+  "version": "4.0.6",
+  "version_name": "4.0.6",
 
   "minimum_chrome_version": "49",
 

extension/shells/browser/firefox/manifest.json

@@ -2,7 +2,7 @@
   "manifest_version": 2,
   "name": "React Developer Tools",
   "description": "Adds React debugging tools to the Firefox Developer Tools.",
-  "version": "4.0.5",
+  "version": "4.0.6",
 
   "applications": {
     "gecko": {

extension/shells/browser/shared/popups/deadcode.html

@@ -28,5 +28,5 @@
 </p>
 <hr />
 <p>
-  Open the developer tools, and the React tab will appear to the right.
+  Open the developer tools, and  "Components" and "Profiler" tabs will appear to the right.
 </p>

extension/shells/browser/shared/popups/development.html

@@ -24,5 +24,5 @@
 </p>
 <hr />
 <p>
-  Open the developer tools, and the React tab will appear to the right.
+  Open the developer tools, and  "Components" and "Profiler" tabs will appear to the right.
 </p>

extension/shells/browser/shared/popups/outdated.html

@@ -25,5 +25,5 @@
 </p>
 <hr />
 <p>
-  Open the developer tools, and the React tab will appear to the right.
+  Open the developer tools, and  "Components" and "Profiler" tabs will appear to the right.
 </p>

extension/shells/browser/shared/popups/production.html

@@ -17,5 +17,5 @@
 <p>
   <b>This page is using the production build of React. &#x2705;</b>
   <br />
-  Open the developer tools, and the React tab will appear to the right.
+  Open the developer tools, and  "Components" and "Profiler" tabs will appear to the right.
 </p>

extension/shells/browser/shared/popups/unminified.html

@@ -27,5 +27,5 @@
 </p>
 <hr />
 <p>
-  Open the developer tools, and the React tab will appear to the right.
+  Open the developer tools, and  "Components" and "Profiler" tabs will appear to the right.
 </p>

extension/shells/browser/shared/src/main.js

@@ -21,6 +21,8 @@ import DevTools from 'src/devtools/views/DevTools';
 const LOCAL_STORAGE_SUPPORTS_PROFILING_KEY =
   'React::DevTools::supportsProfiling';
 
+const isChrome = getBrowserName() === 'Chrome';
+
 let panelCreated = false;
 
 // The renderer interface can't read saved component filters directly,
@@ -123,7 +125,7 @@ function createPanelIfReactLoaded() {
 
         store = new Store(bridge, {
           isProfiling,
-          supportsReloadAndProfile: getBrowserName() === 'Chrome',
+          supportsReloadAndProfile: isChrome,
           supportsProfiling,
         });
         store.profilerStore.profilingData = profilingData;
@@ -226,47 +228,57 @@ function createPanelIfReactLoaded() {
       let currentPanel = null;
       let needsToSyncElementSelection = false;
 
-      chrome.devtools.panels.create('⚛ Components', '', 'panel.html', panel => {
-        panel.onShown.addListener(panel => {
-          if (needsToSyncElementSelection) {
-            needsToSyncElementSelection = false;
-            bridge.send('syncSelectionFromNativeElementsPanel');
-          }
+      chrome.devtools.panels.create(
+        isChrome ? '⚛ Components' : 'Components',
+        '',
+        'panel.html',
+        panel => {
+          panel.onShown.addListener(panel => {
+            if (needsToSyncElementSelection) {
+              needsToSyncElementSelection = false;
+              bridge.send('syncSelectionFromNativeElementsPanel');
+            }
 
-          if (currentPanel === panel) {
-            return;
-          }
+            if (currentPanel === panel) {
+              return;
+            }
 
-          currentPanel = panel;
-          componentsPortalContainer = panel.container;
+            currentPanel = panel;
+            componentsPortalContainer = panel.container;
 
-          if (componentsPortalContainer != null) {
-            ensureInitialHTMLIsCleared(componentsPortalContainer);
-            render('components');
-            panel.injectStyles(cloneStyleTags);
-          }
-        });
-        panel.onHidden.addListener(() => {
-          // TODO: Stop highlighting and stuff.
-        });
-      });
-
-      chrome.devtools.panels.create('⚛ Profiler', '', 'panel.html', panel => {
-        panel.onShown.addListener(panel => {
-          if (currentPanel === panel) {
-            return;
-          }
+            if (componentsPortalContainer != null) {
+              ensureInitialHTMLIsCleared(componentsPortalContainer);
+              render('components');
+              panel.injectStyles(cloneStyleTags);
+            }
+          });
+          panel.onHidden.addListener(() => {
+            // TODO: Stop highlighting and stuff.
+          });
+        }
+      );
+
+      chrome.devtools.panels.create(
+        isChrome ? '⚛ Profiler' : 'Profiler',
+        '',
+        'panel.html',
+        panel => {
+          panel.onShown.addListener(panel => {
+            if (currentPanel === panel) {
+              return;
+            }
 
-          currentPanel = panel;
-          profilerPortalContainer = panel.container;
+            currentPanel = panel;
+            profilerPortalContainer = panel.container;
 
-          if (profilerPortalContainer != null) {
-            ensureInitialHTMLIsCleared(profilerPortalContainer);
-            render('profiler');
-            panel.injectStyles(cloneStyleTags);
-          }
-        });
-      });
+            if (profilerPortalContainer != null) {
+              ensureInitialHTMLIsCleared(profilerPortalContainer);
+              render('profiler');
+              panel.injectStyles(cloneStyleTags);
+            }
+          });
+        }
+      );
 
       chrome.devtools.network.onNavigated.removeListener(checkPageForReact);
 

extension/src/backend/renderer.js

@@ -2067,7 +2067,10 @@ export function attach(
     let fiber = findCurrentFiberUsingSlowPathById(id);
     if (fiber !== null) {
       instance = fiber.stateNode;
-      style = fiber.memoizedProps.style;
+
+      if (fiber.memoizedProps !== null) {
+        style = fiber.memoizedProps.style;
+      }
     }
 
     return { instance, style };

extension/src/hydration.js

@@ -1,5 +1,6 @@
 // @flow
 
+import Symbol from 'es6-symbol';
 import {
   isElement,
   typeOf,

extension/src/utils.js

@@ -1,5 +1,6 @@
 // @flow
 
+import Symbol from 'es6-symbol';
 import LRU from 'lru-cache';
 import {
   TREE_OPERATION_ADD,

extension/yarn.lock

@@ -3859,12 +3859,6 @@ d@1:
   dependencies:
     es5-ext "^0.10.9"
 
-d@^0.1.1, d@~0.1.1:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/d/-/d-0.1.1.tgz#da184c535d18d8ee7ba2aa229b914009fae11309"
-  dependencies:
-    es5-ext "~0.10.2"
-
 damerau-levenshtein@^1.0.0:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/damerau-levenshtein/-/damerau-levenshtein-1.0.4.tgz#03191c432cb6eea168bb77f3a55ffdccb8978514"
@@ -4481,13 +4475,6 @@ es5-ext@^0.10.14, es5-ext@^0.10.35, es5-ext@^0.10.9, es5-ext@~0.10.14:
     es6-symbol "~3.1.1"
     next-tick "^1.0.0"
 
-es5-ext@^0.10.7, es5-ext@~0.10.10, es5-ext@~0.10.11, es5-ext@~0.10.2:
-  version "0.10.12"
-  resolved "https://registry.yarnpkg.com/es5-ext/-/es5-ext-0.10.12.tgz#aa84641d4db76b62abba5e45fd805ecbab140047"
-  dependencies:
-    es6-iterator "2"
-    es6-symbol "~3.1"
-
 es6-error@4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/es6-error/-/es6-error-4.0.0.tgz#f094c7041f662599bb12720da059d6b9c7ff0f40"
@@ -4498,14 +4485,6 @@ es6-error@4.1.1:
   resolved "https://registry.yarnpkg.com/es6-error/-/es6-error-4.1.1.tgz#9e3af407459deed47e9a91f9b885a84eb05c561d"
   integrity sha512-Um/+FxMr9CISWh0bi5Zv0iOD+4cFh5qLeks1qhAopKVAJw3drgKbKySikp7wGhDL0HPeaja0P5ULZrxLkniUVg==
 
-es6-iterator@2:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/es6-iterator/-/es6-iterator-2.0.0.tgz#bd968567d61635e33c0b80727613c9cb4b096bac"
-  dependencies:
-    d "^0.1.1"
-    es5-ext "^0.10.7"
-    es6-symbol "3"
-
 es6-iterator@^2.0.1, es6-iterator@~2.0.1, es6-iterator@~2.0.3:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/es6-iterator/-/es6-iterator-2.0.3.tgz#a7de889141a05a94b0854403b2d0a0fbfa98f3b7"
@@ -4560,21 +4539,7 @@ es6-set@~0.1.5:
     es6-symbol "3.1.1"
     event-emitter "~0.3.5"
 
-es6-symbol@3, es6-symbol@~3.1:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/es6-symbol/-/es6-symbol-3.1.0.tgz#94481c655e7a7cad82eba832d97d5433496d7ffa"
-  dependencies:
-    d "~0.1.1"
-    es5-ext "~0.10.11"
-
-es6-symbol@3.0.2:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/es6-symbol/-/es6-symbol-3.0.2.tgz#1e928878c6f5e63541625b4bb4df4af07d154219"
-  dependencies:
-    d "~0.1.1"
-    es5-ext "~0.10.10"
-
-es6-symbol@3.1.1, es6-symbol@^3.1.1, es6-symbol@~3.1.1:
+es6-symbol@3.1.1, es6-symbol@^3, es6-symbol@^3.1.1, es6-symbol@~3.1.1:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/es6-symbol/-/es6-symbol-3.1.1.tgz#bf00ef4fdab6ba1b46ecb7b629b4c7ed5715cc77"
   integrity sha1-vwDvT9q2uhtG7Le2KbTH7VcVzHc=

packages/react-devtools-core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-devtools-core",
-  "version": "4.0.5",
+  "version": "4.0.6",
   "description": "Use react-devtools outside of the browser",
   "license": "MIT",
   "main": "./dist/backend.js",
@@ -23,6 +23,7 @@
     "start:standalone": "cross-env NODE_ENV=development webpack --config webpack.standalone.js --watch"
   },
   "dependencies": {
+    "es6-symbol": "^3",
     "shell-quote": "^1.6.1",
     "ws": "^7"
   },

packages/react-devtools-inline/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-devtools-inline",
-  "version": "4.0.5",
+  "version": "4.0.6",
   "description": "Embed react-devtools within a website",
   "license": "MIT",
   "main": "./dist/backend.js",
@@ -19,7 +19,9 @@
     "prepublish": "yarn run build",
     "start": "cross-env NODE_ENV=development webpack --config webpack.config.js --watch"
   },
-  "dependencies": {},
+  "dependencies": {
+    "es6-symbol": "^3"
+  },
   "devDependencies": {
     "cross-env": "^3.1.4"
   }

packages/react-devtools/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-devtools",
-  "version": "4.0.5",
+  "version": "4.0.6",
   "description": "Use react-devtools outside of the browser",
   "license": "MIT",
   "repository": {
@@ -26,7 +26,7 @@
     "electron": "^5.0.0",
     "ip": "^1.1.4",
     "minimist": "^1.2.0",
-    "react-devtools-core": "4.0.5",
+    "react-devtools-core": "4.0.6",
     "update-notifier": "^2.1.0"
   }
 }