Bug 1315794 - migrate aboutdebugging to React 15.3.2;r=linclark
authorJulian Descottes <jdescottes@mozilla.com>
Mon, 07 Nov 2016 22:30:03 +0100
changeset 366665 c8bca2404d0b9c6ef85cf0e4197dea3405f9447f
parent 366664 342db7014f26bdf8138c0670fdc808dbd370c0ef
child 366666 a14ca8dbcc4b3e9475273f9327c4826e6b3a9130
push id1369
push userjlorenzo@mozilla.com
push dateMon, 27 Feb 2017 14:59:41 +0000
treeherdermozilla-release@d75a1dba431f [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerslinclark
bugs1315794
milestone52.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1315794 - migrate aboutdebugging to React 15.3.2;r=linclark Use ReactDOM.render instead of React.render (same for unmountComponentAtNode) Update tests to observe both childList and characterData mutations when expecting only text changes. MozReview-Commit-ID: ILTgypkpZRz
devtools/client/aboutdebugging/initializer.js
devtools/client/aboutdebugging/test/browser_addons_reload.js
devtools/client/aboutdebugging/test/browser_tabs.js
devtools/client/aboutdebugging/test/head.js
--- a/devtools/client/aboutdebugging/initializer.js
+++ b/devtools/client/aboutdebugging/initializer.js
@@ -19,18 +19,18 @@ loader.lazyRequireGetter(this, "Debugger
 loader.lazyRequireGetter(this, "Telemetry",
   "devtools/client/shared/telemetry");
 
 const { require } = BrowserLoader({
   baseURI: "resource://devtools/client/aboutdebugging/",
   window
 });
 
-const { createFactory, render, unmountComponentAtNode } =
-  require("devtools/client/shared/vendor/react");
+const { createFactory } = require("devtools/client/shared/vendor/react");
+const { render, unmountComponentAtNode } = require("devtools/client/shared/vendor/react-dom");
 
 const AboutDebuggingApp = createFactory(require("./components/aboutdebugging"));
 
 var AboutDebugging = {
   init() {
     if (!DebuggerServer.initialized) {
       DebuggerServer.init();
       DebuggerServer.addBrowserActors();
--- a/devtools/client/aboutdebugging/test/browser_addons_reload.js
+++ b/devtools/client/aboutdebugging/test/browser_addons_reload.js
@@ -165,18 +165,18 @@ add_task(function* reloadButtonRefreshes
   info(`addon installed: ${addon.id}`);
   yield onAddonListUpdated;
 
   const newName = "Temporary web extension (updated)";
   tempExt.writeManifest(Object.assign({}, manifestBase, {name: newName}));
 
   // Wait for the add-on list to be updated with the reloaded name.
   const onReInstall = promiseAddonEvent("onInstalled");
-  const onAddonReloaded = waitForMutation(getAddonList(document),
-                                          { childList: true, subtree: true });
+  const onAddonReloaded = waitForContentMutation(getAddonList(document));
+
   const reloadButton = getReloadButton(document, manifestBase.name);
   reloadButton.click();
 
   yield onAddonReloaded;
   const [reloadedAddon] = yield onReInstall;
   // Make sure the name was updated correctly.
   const allAddons = [...document.querySelectorAll("#addons .target-name")]
     .map(element => element.textContent);
--- a/devtools/client/aboutdebugging/test/browser_tabs.js
+++ b/devtools/client/aboutdebugging/test/browser_tabs.js
@@ -34,17 +34,17 @@ add_task(function* () {
   let newNames = [...tabsElement.querySelectorAll(".target-name")];
   newNames = newNames.filter(node => !names.includes(node));
   is(newNames.length, 1, "A new tab appeared in the list");
   let newTabTarget = newNames[0];
 
   // Then wait for title update, but on slow test runner, the title may already
   // be set to the expected value
   if (newTabTarget.textContent != "foo") {
-    yield waitForMutation(newTabTarget, { childList: true });
+    yield waitForContentMutation(newTabTarget);
   }
 
   // Check that the new tab appears in the UI
   is(newTabTarget.textContent, "foo", "The tab title got updated");
   is(newTabTarget.title, TAB_URL, "The tab tooltip is the url");
 
   // Finally, close the tab
   let onTabsUpdate = waitForMutation(tabsElement, { childList: true });
--- a/devtools/client/aboutdebugging/test/head.js
+++ b/devtools/client/aboutdebugging/test/head.js
@@ -1,14 +1,14 @@
 /* Any copyright is dedicated to the Public Domain.
    http://creativecommons.org/publicdomain/zero/1.0/ */
 
 /* eslint-env browser */
 /* exported openAboutDebugging, changeAboutDebuggingHash, closeAboutDebugging,
-   installAddon, uninstallAddon, waitForMutation, assertHasTarget,
+   installAddon, uninstallAddon, waitForMutation, waitForContentMutation, assertHasTarget,
    getServiceWorkerList, getTabList, openPanel, waitForInitialAddonList,
    waitForServiceWorkerRegistered, unregisterServiceWorker,
    waitForDelayedStartupFinished, setupTestAboutDebuggingWebExtension,
    waitForServiceWorkerActivation */
 /* import-globals-from ../../framework/test/shared-head.js */
 
 "use strict";
 
@@ -225,16 +225,32 @@ function waitForMutation(target, mutatio
       observer.disconnect();
       resolve();
     });
     observer.observe(target, mutationOptions);
   });
 }
 
 /**
+ * Returns a promise that will resolve after receiving a mutation in the subtree of the
+ * provided target. Depending on the current React implementation, a text change might be
+ * observable as a childList mutation or a characterData mutation.
+ *
+ * @param {Node} target
+ * @return {Promise}
+ */
+function waitForContentMutation(target) {
+  return waitForMutation(target, {
+    characterData: true,
+    childList: true,
+    subtree: true
+  });
+}
+
+/**
  * Checks if an about:debugging TargetList element contains a Target element
  * corresponding to the specified name.
  * @param {Boolean} expected
  * @param {Document} document
  * @param {String} type
  * @param {String} name
  */
 function assertHasTarget(expected, document, type, name) {