Backed out 3 changesets (bug 1416824) for mochitest chrome failures at devtools/client/shared/components/test/mochitest/test_notification_box_01.html on a CLOSED TREE

Backed out changeset dc4675fd3257 (bug 1416824)
Backed out changeset b2aebf1d7ee7 (bug 1416824)
Backed out changeset f52006e2a1dc (bug 1416824)

devtools/client/jsonview/viewer-config.js

@@ -41,10 +41,6 @@ require.config({
       JSONView.debug
       ? "resource://devtools-client-shared/vendor/react-prop-types-dev"
       : "resource://devtools-client-shared/vendor/react-prop-types",
-    "devtools/client/shared/vendor/react-dom-test-utils":
-      JSONView.debug
-      ? "resource://devtools-client-shared/vendor/react-dom-test-utils-dev"
-      : "resource://devtools-client-shared/vendor/react-dom-test-utils",
   }
 });
 

devtools/client/netmonitor/test/require-helper.js

@@ -12,8 +12,12 @@ requireHacker.global_hook("default", path => {
       return `const React = require('devtools/client/shared/vendor/react-dev'); module.exports = React`;
     case "react-dom/server":
       return `const React = require('devtools/client/shared/vendor/react-dev'); module.exports = React`;
+    // TODO: Enzyme uses the require paths to choose which adapters are
+    // needed... we need to use react-addons-test-utils instead of
+    // react-dom/test-utils as the path until we upgrade to React 16+
+    // https://bugzil.la/1416824
     case "react-addons-test-utils":
-      return `const TestUtils = require('devtools/client/shared/vendor/react-dom-test-utils'); module.exports = TestUtils`;
+      return `const ReactDOM = require('devtools/client/shared/vendor/react-dom'); module.exports = ReactDOM.TestUtils`;
     // Use react-dev. This would be handled by browserLoader in Firefox.
     case "react":
     case "devtools/client/shared/vendor/react":

devtools/client/responsive.html/test/browser/head.js

@@ -191,7 +191,8 @@ function getElRect(selector, win) {
  * the rect of the dragged element as it was before drag.
  */
 function dragElementBy(selector, x, y, win) {
-  let { Simulate } = win.require("devtools/client/shared/vendor/react-dom-test-utils");
+  let ReactDOM = win.require("devtools/client/shared/vendor/react-dom");
+  let { Simulate } = ReactDOM.TestUtils;
   let rect = getElRect(selector, win);
   let startPoint = {
     clientX: Math.floor(rect.left + rect.width / 2),
@@ -227,7 +228,8 @@ async function testViewportResize(ui, selector, moveBy,
 
 function openDeviceModal({ toolWindow }) {
   let { document } = toolWindow;
-  let { Simulate } = toolWindow.require("devtools/client/shared/vendor/react-dom-test-utils");
+  let ReactDOM = toolWindow.require("devtools/client/shared/vendor/react-dom");
+  let { Simulate } = ReactDOM.TestUtils;
   let select = document.querySelector(".viewport-device-selector");
   let modal = document.querySelector("#device-modal-wrapper");
 
@@ -244,8 +246,8 @@ function openDeviceModal({ toolWindow }) {
 
 function changeSelectValue({ toolWindow }, selector, value) {
   let { document } = toolWindow;
-  let { Simulate } =
-    toolWindow.require("devtools/client/shared/vendor/react-dom-test-utils");
+  let ReactDOM = toolWindow.require("devtools/client/shared/vendor/react-dom");
+  let { Simulate } = ReactDOM.TestUtils;
 
   info(`Selecting ${value} in ${selector}.`);
 
@@ -385,8 +387,8 @@ async function testUserAgentFromBrowser(browser, expected) {
  * function adds `device` via the form, saves it, and waits for it to appear in the store.
  */
 function addDeviceInModal(ui, device) {
-  let { Simulate } =
-    ui.toolWindow.require("devtools/client/shared/vendor/react-dom-test-utils");
+  let ReactDOM = ui.toolWindow.require("devtools/client/shared/vendor/react-dom");
+  let { Simulate } = ReactDOM.TestUtils;
   let { store, document } = ui.toolWindow;
 
   let nameInput = document.querySelector("#device-adder-name input");

devtools/client/shared/browser-loader.js

@@ -108,8 +108,6 @@ function BrowserLoaderBuilder({ baseURI, window, useOnlyShared, commonLibRequire
       "resource://devtools/client/shared/vendor/react-dom-server-dev";
     dynamicPaths["devtools/client/shared/vendor/react-prop-types"] =
       "resource://devtools/client/shared/vendor/react-prop-types-dev";
-    dynamicPaths["devtools/client/shared/vendor/react-dom-test-utils"] =
-      "resource://devtools/client/shared/vendor/react-dom-test-utils-dev";
   }
 
   const opts = {

devtools/client/shared/components/test/mochitest/head.js

@@ -26,10 +26,10 @@ var { require: browserRequire } = BrowserLoader({
   window
 });
 
-const React = browserRequire("devtools/client/shared/vendor/react");
-const ReactDOM = browserRequire("devtools/client/shared/vendor/react-dom");
-const dom = browserRequire("devtools/client/shared/vendor/react-dom-factories");
-const TestUtils = browserRequire("devtools/client/shared/vendor/react-dom-test-utils");
+let React = browserRequire("devtools/client/shared/vendor/react");
+let ReactDOM = browserRequire("devtools/client/shared/vendor/react-dom");
+let dom = browserRequire("devtools/client/shared/vendor/react-dom-factories");
+let TestUtils = ReactDOM.TestUtils;
 
 var EXAMPLE_URL = "http://example.com/browser/browser/devtools/shared/test/";
 

devtools/client/shared/components/test/mochitest/test_tree_06.html

@@ -20,7 +20,7 @@ window.onload = Task.async(function* () {
   try {
     const ReactDOM = browserRequire("devtools/client/shared/vendor/react-dom");
     const { createFactory } = browserRequire("devtools/client/shared/vendor/react");
-    const { Simulate } = browserRequire("devtools/client/shared/vendor/react-dom-test-utils");
+    const { Simulate } = ReactDOM.TestUtils;
     const Tree = createFactory(browserRequire("devtools/client/shared/components/VirtualizedTree"));
 
     function renderTree(props) {

devtools/client/shared/components/test/mochitest/test_tree_09.html

@@ -21,7 +21,7 @@ window.onload = Task.async(function* () {
   try {
     const ReactDOM = browserRequire("devtools/client/shared/vendor/react-dom");
     const { createFactory } = browserRequire("devtools/client/shared/vendor/react");
-    const { Simulate } = browserRequire("devtools/client/shared/vendor/react-dom-test-utils");
+    const { Simulate } = ReactDOM.TestUtils;
     const Tree = createFactory(browserRequire("devtools/client/shared/components/VirtualizedTree"));
 
     let numberOfExpands = 0;

devtools/client/shared/components/test/mochitest/test_tree_11.html

@@ -32,7 +32,7 @@ window.onload = Task.async(function* () {
   try {
     const ReactDOM = browserRequire("devtools/client/shared/vendor/react-dom");
     const { createFactory } = browserRequire("devtools/client/shared/vendor/react");
-    const { Simulate } = browserRequire("devtools/client/shared/vendor/react-dom-test-utils");
+    const { Simulate } = ReactDOM.TestUtils;
     const Tree = createFactory(browserRequire("devtools/client/shared/components/VirtualizedTree"));
 
     TEST_TREE.expanded = new Set("ABCDEFGHIJKLMNO".split(""));

devtools/client/shared/vendor/REACT_PROP_TYPES_UPGRADING.md

@@ -7,7 +7,7 @@
 ## Getting the Source
 
 ```bash
-git clone git@github.com:facebook/prop-types.git
+git clone the latest version from https://github.com/facebook/prop-types
 cd prop-types
 ```
 
@@ -19,13 +19,6 @@ NODE_ENV=development browserify index.js -t envify --standalone PropTypes -o rea
 NODE_ENV=production browserify index.js -t envify --standalone PropTypes -o react-prop-types.js
 ```
 
-## Copying files to your Firefox repo
-
-```bash
-mv react-prop-types.js /firefox/repo/devtools/client/shared/vendor/react-prop-types-dev.js
-mv react-prop-types-dev.js /firefox/repo/devtools/client/shared/vendor/react-prop-types-dev.js
-```
-
 ## Adding Version Info
 
 Add the version to the top of `react-prop-types.js` and `react-prop-types-dev.js`.
@@ -35,3 +28,10 @@ Add the version to the top of `react-prop-types.js` and `react-prop-types-dev.js
   * react-prop-types v15.6.0
   */
 ```
+
+## Copying files to your Firefox repo
+
+```bash
+mv react-prop-types.js /firefox/repo/devtools/client/shared/vendor/react-prop-types-dev.js
+mv react-prop-types-dev.js /firefox/repo/devtools/client/shared/vendor/react-prop-types-dev.js
+```

devtools/client/shared/vendor/REACT_UPGRADING.md

@@ -6,95 +6,188 @@
 
 ## Introduction
 
-We use a version of React that has a few minor tweaks. We want to use an un-minified production version anyway so you need to build React yourself.
-
-## First, Upgrade react-prop-types.js
-
-You should start by upgrading our prop-types library to match the latest version of React. Please follow the instructions in `devtools/client/shared/vendor/REACT_PROP_TYPES_UPGRADING.md` before continuing.
+We use a version of React that has a few minor tweaks. We want to use an un-minified production version anyway, and because of all of this you need to build React yourself to upgrade it for devtools.
 
 ## Getting the Source
 
 ```bash
 git clone https://github.com/facebook/react.git
 cd react
-git checkout v16.2.0 # or the version you are targetting
+git checkout v15.6.1 # or the version you are targetting
 ```
 
-## Preparing to Build
-
-We need to disable minification and tree shaking as they overcomplicate the upgrade process without adding any benefits.
-
-- Open scripts/rollup/build.js
-- Find a method called `function getRollupOutputOptions()`
-- After `sourcemap: false` add `treeshake: false` and `freeze: false`
-- Change this:
-  ```js
-  // Apply dead code elimination and/or minification.
-  isProduction &&
-  ```
-  To this:
-  ```js
-  {
-    transformBundle(source) {
-      return (
-        source.replace(/['"]react['"]/g,
-                        "'devtools/client/shared/vendor/react'")
-                        ('http://www.w3.org/1999/xhtml', 'react');
-              .replace(/createElementNS\(['"]http:\/\/www\.w3\.org\/1999\/xhtml['"], ['"]devtools\/client\/shared\/vendor\/react['"]\)/g,
-                        "createElementNS('http://www.w3.org/1999/xhtml', 'react')"
-              .replace(/['"]react-dom['"]/g,
-                        "'devtools/client/shared/vendor/react-dom'")
-              .replace(/rendererPackageName:\s['"]devtools\/client\/shared\/vendor\/react-dom['"]/g,
-                        "rendererPackageName: 'react-dom'")
-              .replace(/ocument\.createElement\(/g,
-                        "ocument.createElementNS('http://www.w3.org/1999/xhtml', ")
-      );
-    },
-  },
-  // Apply dead code elimination and/or minification.
-  false &&
-  ```
-  - Find `await createBundle` and remove all bundles in that block except for `UMD_DEV` and `UMD_PROD`.
-
 ## Building
 
 ```bash
-npm install --global yarn
-yarn install
-yarn build
+npm install
+grunt build
 ```
 
-### Copy the Files Into your Firefox Repo
+If you did not receive any errors go to the section entitled "[Patching (XUL Workarounds)](#patching-xul-workarounds)."
+
+If you receive the following error:
+
+> Current npm version is not supported for development,
+> expected "x.x.x." to satisfy "2.x || 3.x || 4.x"
+
+Your npm version is too recent. `"2.x || 3.x || 4.x"` is a hint that the React project only supports npm versions 2.x, 3.x and 4.x. To fix this let's start by removing all of your node versions:
 
 ```bash
-cp build/dist/react.production.min.js <gecko-dev>/devtools/client/shared/vendor/react.js
-cp build/dist/react-dom.production.min.js <gecko-dev>/devtools/client/shared/vendor/react-dom.js
-cp build/dist/react-dom-server.browser.production.min.js <gecko-dev>/devtools/client/shared/vendor/react-dom-server.js
-cp build/dist/react-dom-test-utils.production.min.js <gecko-dev>/devtools/client/shared/vendor/react-dom-test-utils.js
-cp build/dist/react.development.js <gecko-dev>/devtools/client/shared/vendor/react-dev.js
-cp build/dist/react-dom.development.js <gecko-dev>/devtools/client/shared/vendor/react-dom-dev.js
-cp build/dist/react-dom-server.browser.development.js <gecko-dev>/devtools/client/shared/vendor/react-dom-server-dev.js
-cp build/dist/react-dom-test-utils.development.js <gecko-dev>/devtools/client/shared/vendor/react-dom-test-utils-dev.js
+# If you use ubuntu
+sudo apt-get remove --purge nodejs
+# If you use homebrew
+brew uninstall node
+# If yu use macports
+sudo port uninstall nodejs
+# If you use nvm
+LINK="https://github.com/creationix/nvm/issues/298"
+xdg-open $LINK || open $LINK
 ```
 
-From this point we will no longer need your react repository so feel free to delete it.
+You will need to setup a node version manager. These instructions cover "n" but many people prefer to use "nvm". If you choose to use nvm them you will need to set it up yourself.
+
+Run the n-install script and it will set "n" it up for you:
+
+```bash
+curl -L -o /tmp/n-install-script https://git.io/n-install
+bash /tmp/n-install-script -y
+exec $SHELL # To re-initialize the PATH variable
+```
+
+To match node versions with npm versions see:
+<https://nodejs.org/en/download/releases/>
+
+The latest 4.x version of npm is installed with node 7.10.1 so install that version using `sudo n 7.10.1`.
+
+Running `node --version` should now show v7.10.1 and `npm --version` should show 4.2.0.
+
+Now try again:
+
+```bash
+npm install
+grunt build
+```
 
 ## Patching
 
-### Patching react-dom
+### Patching build/react-with-addons.js
 
-Open `devtools/client/shared/vendor/react-dom.js` and `devtools/client/shared/vendor/react-dom-dev.js`.
+- Open `build/react-with-addons.js`. Search for all `document.createElement` calls and replace them with `document.createElementNS('http://www.w3.org/1999/xhtml', ...)`.
 
-The following change should be made to **BOTH** files.
+  **Note**: some code may be `ownerDocument.createElement` so don't do a blind search/replace. At the time of writing there was only 1 place to change.
 
-To have React's event system working correctly in certain XUL situations, ReactDOM must be monkey patched with a fix.
+- If you are editing the production version then change this:
 
-Turn this:
+  ```js
+  if ("production" !== 'production') {
+    exports.getReactPerf = function () {
+      return getReactDOM().__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactPerf;
+    };
+
+    exports.getReactTestUtils = function () {
+      return getReactDOM().__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactTestUtils;
+    };
+  }
+  ```
+
+  To this:
+
+  ```js
+  if ("production" !== 'production') {
+    exports.getReactPerf = function () {
+      return getReactDOM().__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactPerf;
+    };
+  }
+
+  exports.getReactTestUtils = function () {
+    return getReactDOM().__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactTestUtils;
+  };
+  ```
+
+- If you are editing the production version then change this:
+
+  ```js
+  if ("production" !== 'production') {
+    // For the UMD build we get these lazily from the global since they're tied
+    // to the DOM renderer and it hasn't loaded yet.
+    Object.defineProperty(React.addons, 'Perf', {
+      enumerable: true,
+      get: function () {
+        return ReactAddonsDOMDependencies.getReactPerf();
+      }
+    });
+    Object.defineProperty(React.addons, 'TestUtils', {
+      enumerable: true,
+      get: function () {
+        return ReactAddonsDOMDependencies.getReactTestUtils();
+      }
+    });
+  }
+  ```
+
+  To this:
+  ```js
+  if ("production" !== 'production') {
+    // For the UMD build we get these lazily from the global since they're tied
+    // to the DOM renderer and it hasn't loaded yet.
+    Object.defineProperty(React.addons, 'Perf', {
+      enumerable: true,
+      get: function () {
+        return ReactAddonsDOMDependencies.getReactPerf();
+      }
+    });
+  }
+
+  Object.defineProperty(React.addons, 'TestUtils', {
+    enumerable: true,
+    get: function () {
+      return ReactAddonsDOMDependencies.getReactTestUtils();
+    }
+  });
+  ```
+
+### Patching build/react-dom.js
+
+- Open `build/react-dom.js` and replace all of the document.createElement calls as you did for `build/react-with-addons.js`.
+
+- Change `require('react')` near the top of the file to `require('devtools/client/shared/vendor/react')`.
+
+- About four lines below that require there is a `define(['react'], f);`. Change this to the full path e.g.`define(['devtools/client/shared/vendor/react'], f);`
+
+- If you are editing the production version then change this:
+
+  ```js
+  if ("production" !== 'production') {
+    ReactDOMUMDEntry.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED = {
+      // ReactPerf and ReactTestUtils currently only work with the DOM renderer
+      // so we expose them from here, but only in DEV mode.
+      ReactPerf: _dereq_(71),
+      ReactTestUtils: _dereq_(80)
+    };
+  }
+  ```
+
+  Into this:
+
+  ```js
+  if ("production" !== 'production') {
+    ReactDOMUMDEntry.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED = {
+      // ReactPerf and ReactTestUtils currently only work with the DOM renderer
+      // so we expose them from here, but only in DEV mode.
+      ReactPerf: _dereq_(71)
+    };
+  }
+  ReactDOMUMDEntry.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED = {
+    ReactTestUtils: _dereq_(80)
+  }
+  ```
+
+To have React's event system working correctly in certain XUL situations, ReactDOM must be monkey patched with a fix. This fix is currently applied in devtools/client/shared/vendor/react-dom.js. When upgrading, copy and paste the existing block of code into the new file in the same location. It is delimited by a header and footer, and then the monkeyPatchReactDOM() needs to be applied to the returned value.
+
+e.g. Turn this:
 
 ```js
-var ReactDOM$2 = Object.freeze({
-  default: ReactDOM
-});
+module.exports = ReactDOM;
 ```
 
 Into this:
@@ -134,8 +227,14 @@ function monkeyPatchReactDOM(ReactDOM) {
   // Pass on getting and setting behaviors.
   return new Proxy({}, {
     get: (target, name) => {
-      if (name === "render") {
-        return reactDomRender;
+      switch (name) {
+        case "render":
+          return reactDomRender;
+        case "TestUtils":
+          // Bind ReactTestUtils and return it when a request is made for
+          // ReactDOM.TestUtils.
+          let ReactInternals = ReactDOM.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
+          return lazyFunctionBinding(ReactInternals, "ReactTestUtils");
       }
       return lazyFunctionBinding(ReactDOM, name);
     },
@@ -261,9 +360,55 @@ function functionLazyBinder() {
 // END MONKEY PATCH
 //--------------------------------------------------------------------------------------
 
-ReactDOM = monkeyPatchReactDOM(ReactDOM);
-
-var ReactDOM$2 = Object.freeze({
-  default: ReactDOM
-});
+module.exports = monkeyPatchReactDOM(ReactDOM);
 ```
+
+### Patching build/react-dom-server.js
+
+- Open `build/react-dom-server.js` and replace all of the document.createElement calls as you did for `build/react-with-addons.js`.
+
+- Change `require('react')` near the top of the file to `require('devtools/client/shared/vendor/react')`.
+
+- About four lines below that require there is a `define(['react'], f);`. Change this to the full path e.g.`define(['devtools/client/shared/vendor/react'], f);`
+
+### Copy the Files Across
+
+- Now we need to copy `react-with-addons.js`, `react-dom.js` and `react-dom-server.js` into our repo (note the destination filenames all have -dev added e.g. `react-dev.js`, these are part of the dev version):
+
+  ```bash
+  cp build/react-with-addons.js
+     <gecko-dev>/devtools/client/shared/vendor/react-dev.js
+  cp build/react-dom.js
+     <gecko-dev>/devtools/client/shared/vendor/react-dom-dev.js
+  cp build/react-dom-server.js
+     <gecko-dev>/devtools/client/shared/vendor/react-dom-server-dev.js
+  ```
+
+### Generate a Production Build
+
+```bash
+NODE_ENV=production grunt build
+
+# Or if using the fish shell:
+
+env NODE_ENV=production grunt build
+```
+
+### More Patching
+
+Unfortunately, you will need to repeat the following sections **(See note below)**:
+
+- [Patching build/react-with-addons.js](#patching-buildreact-with-addonsjs)
+- [Patching build/react-dom.js](#patching-buildreact-domjs)
+- [Patching build/react-dom-server.js](#patching-buildreact-dom-serverjs)
+
+**NOTE**: This time you need to save the files with their original filenames so the commands in the "Copy the Files Across" section become:
+
+  ```bash
+  cp build/react-with-addons.js
+     <gecko-dev>/devtools/client/shared/vendor/react.js
+  cp build/react-dom.js
+     <gecko-dev>/devtools/client/shared/vendor/react-dom.js
+  cp build/react-dom-server.js
+     <gecko-dev>/devtools/client/shared/vendor/react-dom-server.js
+  ```

devtools/client/shared/vendor/moz.build

@@ -15,7 +15,6 @@ DevToolsModules(
     'lodash.js',
     'react-dom-factories.js',
     'react-dom-server.js',
-    'react-dom-test-utils.js',
     'react-dom.js',
     'react-prop-types.js',
     'react-redux.js',
@@ -35,6 +34,5 @@ if CONFIG['DEBUG_JS_MODULES'] or CONFIG['MOZ_DEBUG']:
         'react-dev.js',
         'react-dom-dev.js',
         'react-dom-server-dev.js',
-        'react-dom-test-utils-dev.js',
         'react-prop-types-dev.js',
     )

devtools/client/webconsole/new-console-output/test/helpers.js

@@ -7,7 +7,7 @@ let ReactDOM = require("devtools/client/shared/vendor/react-dom");
 let React = require("devtools/client/shared/vendor/react");
 const dom = require("devtools/client/shared/vendor/react-dom-factories");
 const { createElement } = React;
-const TestUtils = require("devtools/client/shared/vendor/react-dom-test-utils");
+const TestUtils = ReactDOM.TestUtils;
 
 const reduxActions = require("devtools/client/webconsole/new-console-output/actions/index");
 const { configureStore } = require("devtools/client/webconsole/new-console-output/store");

devtools/client/webconsole/new-console-output/test/require-helper.js

@@ -11,8 +11,12 @@ requireHacker.global_hook("default", path => {
       return `const ReactDOM = require('devtools/client/shared/vendor/react-dom'); module.exports = ReactDOM`;
     case "react-dom/server":
       return `const ReactDOMServer = require('devtools/client/shared/vendor/react-dom-server'); module.exports = ReactDOMServer`;
+    // TODO: Enzyme uses the require paths to choose which adapters are
+    // needed... we need to use react-addons-test-utils instead of
+    // react-dom/test-utils as the path until we upgrade to React 16+
+    // https://bugzil.la/1416824
     case "react-addons-test-utils":
-      return `const TestUtils = require('devtools/client/shared/vendor/react-dom-test-utils'); module.exports = TestUtils`;
+      return `const ReactDOM = require('devtools/client/shared/vendor/react-dom'); module.exports = ReactDOM.TestUtils`;
     case "react-redux":
       return `const ReactRedux = require('devtools/client/shared/vendor/react-redux'); module.exports = ReactRedux`;
     // Use react-dev. This would be handled by browserLoader in Firefox.