From 6dda81610276b50dcd626e5a9090fe596c8f595c Mon Sep 17 00:00:00 2001 From: Brian Vaughn Date: Wed, 21 Aug 2019 14:23:51 -0700 Subject: [PATCH 1/5] Remove emoji prefix from Firefox extension tab labels Firefox adds these already for React, so the extra emoji character was confusing. For now, we still prepend it for Chrome --- shells/browser/shared/src/main.js | 86 ++++++++++++++++++------------- 1 file changed, 49 insertions(+), 37 deletions(-) diff --git a/shells/browser/shared/src/main.js b/shells/browser/shared/src/main.js index 98d09dab5cc2d..8d0858873fd2c 100644 --- a/shells/browser/shared/src/main.js +++ b/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); From bf9415834f0bf1809cae5d59e2195e2cc1dfdccf Mon Sep 17 00:00:00 2001 From: Brian Vaughn Date: Wed, 21 Aug 2019 14:28:57 -0700 Subject: [PATCH 2/5] Fixed outdated extension popup wording --- shells/browser/shared/popups/deadcode.html | 2 +- shells/browser/shared/popups/development.html | 2 +- shells/browser/shared/popups/outdated.html | 2 +- shells/browser/shared/popups/production.html | 2 +- shells/browser/shared/popups/unminified.html | 2 +- 5 files changed, 5 insertions(+), 5 deletions(-) diff --git a/shells/browser/shared/popups/deadcode.html b/shells/browser/shared/popups/deadcode.html index 5e74dc06c405f..cdd4c278e86cc 100644 --- a/shells/browser/shared/popups/deadcode.html +++ b/shells/browser/shared/popups/deadcode.html @@ -28,5 +28,5 @@

- 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.

diff --git a/shells/browser/shared/popups/development.html b/shells/browser/shared/popups/development.html index 9c2089cc2f37c..3d092a5eb69f8 100644 --- a/shells/browser/shared/popups/development.html +++ b/shells/browser/shared/popups/development.html @@ -24,5 +24,5 @@

- 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.

diff --git a/shells/browser/shared/popups/outdated.html b/shells/browser/shared/popups/outdated.html index a6ec12bcafc1d..8f3f3f9508766 100644 --- a/shells/browser/shared/popups/outdated.html +++ b/shells/browser/shared/popups/outdated.html @@ -25,5 +25,5 @@

- 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.

diff --git a/shells/browser/shared/popups/production.html b/shells/browser/shared/popups/production.html index 1b65eb5b219b6..7b92841c6c75c 100644 --- a/shells/browser/shared/popups/production.html +++ b/shells/browser/shared/popups/production.html @@ -17,5 +17,5 @@

This page is using the production build of React. ✅
- 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.

diff --git a/shells/browser/shared/popups/unminified.html b/shells/browser/shared/popups/unminified.html index 553c9ac6acf55..c53885f5098c3 100644 --- a/shells/browser/shared/popups/unminified.html +++ b/shells/browser/shared/popups/unminified.html @@ -27,5 +27,5 @@

- 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.

From 84b492f344b16ad37ada3c480c61ceb4b49ae0ff Mon Sep 17 00:00:00 2001 From: Brian Vaughn Date: Fri, 23 Aug 2019 17:38:45 -0600 Subject: [PATCH 3/5] Polyfill Symbol usage --- package.json | 2 +- packages/react-devtools-core/package.json | 1 + packages/react-devtools-inline/package.json | 4 ++- src/hydration.js | 1 + src/utils.js | 1 + yarn.lock | 37 +-------------------- 6 files changed, 8 insertions(+), 38 deletions(-) diff --git a/package.json b/package.json index 790363ec5d078..c91c8ec0f6504 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/packages/react-devtools-core/package.json b/packages/react-devtools-core/package.json index d31a9bcad8f4b..a82f25f2bd9ca 100644 --- a/packages/react-devtools-core/package.json +++ b/packages/react-devtools-core/package.json @@ -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" }, diff --git a/packages/react-devtools-inline/package.json b/packages/react-devtools-inline/package.json index 6ce31290e60ad..3cd1d3a169c1e 100644 --- a/packages/react-devtools-inline/package.json +++ b/packages/react-devtools-inline/package.json @@ -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" } diff --git a/src/hydration.js b/src/hydration.js index f660864e4a1a7..a71ce51b40e91 100644 --- a/src/hydration.js +++ b/src/hydration.js @@ -1,5 +1,6 @@ // @flow +import Symbol from 'es6-symbol'; import { isElement, typeOf, diff --git a/src/utils.js b/src/utils.js index 1827495e98e4b..e114dc8d4d365 100644 --- a/src/utils.js +++ b/src/utils.js @@ -1,5 +1,6 @@ // @flow +import Symbol from 'es6-symbol'; import LRU from 'lru-cache'; import { TREE_OPERATION_ADD, diff --git a/yarn.lock b/yarn.lock index 24c7d3b366f26..43f2a9ca3d446 100644 --- a/yarn.lock +++ b/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= From 1e3b0b520e1d77ed3926ac9e41bea3a5c7309cad Mon Sep 17 00:00:00 2001 From: Brian Vaughn Date: Sat, 24 Aug 2019 09:04:26 -0700 Subject: [PATCH 4/5] Added a null check around memoizedProps --- src/backend/renderer.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/backend/renderer.js b/src/backend/renderer.js index 27bf7b03f4910..e1b9c7205ceac 100644 --- a/src/backend/renderer.js +++ b/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 }; From a39d9c3dff451c5280dded9418a627f37871b94b Mon Sep 17 00:00:00 2001 From: Brian Vaughn Date: Mon, 26 Aug 2019 08:42:38 -0700 Subject: [PATCH 5/5] 4.0.5 -> 4.0.6 --- package.json | 2 +- packages/react-devtools-core/package.json | 2 +- packages/react-devtools-inline/package.json | 2 +- packages/react-devtools/package.json | 4 ++-- shells/browser/chrome/manifest.json | 4 ++-- shells/browser/firefox/manifest.json | 2 +- 6 files changed, 8 insertions(+), 8 deletions(-) diff --git a/package.json b/package.json index c91c8ec0f6504..dc7e4d52e50ea 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "version": "4.0.5", + "version": "4.0.6", "repository": "bvaughn/react-devtools-experimental", "license": "MIT", "private": true, diff --git a/packages/react-devtools-core/package.json b/packages/react-devtools-core/package.json index a82f25f2bd9ca..90258a731d8ad 100644 --- a/packages/react-devtools-core/package.json +++ b/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", diff --git a/packages/react-devtools-inline/package.json b/packages/react-devtools-inline/package.json index 3cd1d3a169c1e..53be51aeeb791 100644 --- a/packages/react-devtools-inline/package.json +++ b/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", diff --git a/packages/react-devtools/package.json b/packages/react-devtools/package.json index 0ff553694f273..5af48118da7ca 100644 --- a/packages/react-devtools/package.json +++ b/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" } } diff --git a/shells/browser/chrome/manifest.json b/shells/browser/chrome/manifest.json index a915ccc18cdfe..13a79dfd73ce9 100644 --- a/shells/browser/chrome/manifest.json +++ b/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", diff --git a/shells/browser/firefox/manifest.json b/shells/browser/firefox/manifest.json index 50da7c0c83e7a..77ea161a7a632 100644 --- a/shells/browser/firefox/manifest.json +++ b/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": {