Bug 1226319 - pt1 - Move react tree widget in memory tool to shared components. r=fitzgen

--HG--
rename : devtools/client/memory/components/test/mochitest/chrome.ini => devtools/client/shared/components/test/mochitest/chrome.ini
rename : devtools/client/memory/components/tree.js => devtools/client/shared/components/tree.js

devtools/client/memory/components/heap.js

@@ -4,7 +4,7 @@
 
 const { DOM: dom, createClass, PropTypes, createFactory } = require("devtools/client/shared/vendor/react");
 const { assert, safeErrorString } = require("devtools/shared/DevToolsUtils");
-const Tree = createFactory(require("./tree"));
+const Tree = createFactory(require("devtools/client/shared/components/tree"));
 const TreeItem = createFactory(require("./tree-item"));
 const { getStatusTextFull, L10N } = require("../utils");
 const { snapshotState: states, diffingState } = require("../constants");

devtools/client/memory/components/moz.build

@@ -10,7 +10,4 @@ DevToolsModules(
     'snapshot-list-item.js',
     'toolbar.js',
     'tree-item.js',
-    'tree.js',
 )
-
-MOCHITEST_CHROME_MANIFESTS += ['test/mochitest/chrome.ini']

devtools/client/shared/browser-loader.js

@@ -1,9 +1,10 @@
 var { classes: Cc, interfaces: Ci, utils: Cu } = Components;
 
 const loaders = Cu.import("resource://gre/modules/commonjs/toolkit/loader.js", {});
-const devtools = Cu.import("resource://devtools/shared/Loader.jsm", {}).devtools;
+const { devtools, DevToolsLoader } = Cu.import("resource://devtools/shared/Loader.jsm", {});
 const { joinURI } = devtools.require("devtools/shared/path");
 const VENDOR_CONTENT_URL = "resource://devtools/client/shared/vendor";
+const COMPONENTS_URL = "resource://devtools/client/shared/components";
 
 /*
  * Create a loader to be used in a browser environment. This evaluates
@@ -18,8 +19,8 @@ const VENDOR_CONTENT_URL = "resource://devtools/client/shared/vendor";
  * outside of that path will still be loaded from the devtools loader,
  * so all system modules are still shared and cached across instances.
  * An exception to this is anything under
- * `devtools/client/shared/content`, which is where shared libraries
- * live that should be evaluated in a browser environment.
+ * `devtools/client/shared/{vendor/components}`, which is where shared libraries
+ * and React components live that should be evaluated in a browser environment.
  *
  * @param string baseURI
  *        Base path to load modules from.
@@ -32,6 +33,7 @@ const VENDOR_CONTENT_URL = "resource://devtools/client/shared/vendor";
  */
 function BrowserLoader(baseURI, window) {
   const loaderOptions = devtools.require("@loader/options");
+
   const opts = {
     id: "browser-loader",
     sharedGlobal: true,
@@ -42,6 +44,7 @@ function BrowserLoader(baseURI, window) {
       let uri = require.resolve(id);
 
       if (!uri.startsWith(baseURI) &&
+          !uri.startsWith(COMPONENTS_URL) &&
           !uri.startsWith(VENDOR_CONTENT_URL)) {
         return devtools.require(uri);
       }
@@ -49,9 +52,6 @@ function BrowserLoader(baseURI, window) {
     }
   };
 
-  // The main.js file does not have to actually exist. It just
-  // represents the base environment, so requires will be relative to
-  // that path when used outside of modules.
   const mainModule = loaders.Module(baseURI, joinURI(baseURI, "main.js"));
   const mainLoader = loaders.Loader(opts);
 

devtools/client/shared/components/moz.build

@@ -0,0 +1,11 @@
+# -*- Mode: python; c-basic-offset: 4; indent-tabs-mode: nil; tab-width: 40 -*-
+# vim: set filetype=python:
+# This Source Code Form is subject to the terms of the Mozilla Public
+# License, v. 2.0. If a copy of the MPL was not distributed with this
+# file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+DevToolsModules(
+    'tree.js',
+)
+
+MOCHITEST_CHROME_MANIFESTS += ['test/mochitest/chrome.ini']

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

@@ -28,9 +28,9 @@ var { TargetFactory } = require("devtools/client/framework/target");
 var { Toolbox } = require("devtools/client/framework/toolbox");
 
 DevToolsUtils.testing = true;
-var { require: bRequire } = BrowserLoader("resource://devtools/client/memory/", this);
+var { require: browserRequire } = BrowserLoader("resource://devtools/client/shared/", this);
 
-var EXAMPLE_URL = "http://example.com/browser/browser/devtools/memory/test/";
+var EXAMPLE_URL = "http://example.com/browser/browser/devtools/shared/test/";
 
 // Encoding of the following tree/forest:
 //

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

@@ -16,9 +16,9 @@ depth.
 <script type="application/javascript;version=1.8">
 window.onload = Task.async(function* () {
   try {
-    let ReactDOM = bRequire("devtools/client/shared/vendor/react-dom");
-    let React = bRequire("devtools/client/shared/vendor/react");
-    let Tree = React.createFactory(bRequire("devtools/client/memory/components/tree"));
+    let ReactDOM = browserRequire("devtools/client/shared/vendor/react-dom");
+    let React = browserRequire("devtools/client/shared/vendor/react");
+    let Tree = React.createFactory(browserRequire("devtools/client/shared/components/tree"));
 
     ok(React, "Should get React");
     ok(Tree, "Should get Tree");

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

@@ -15,9 +15,9 @@ Test that collapsed subtrees aren't rendered.
 <script type="application/javascript;version=1.8">
 window.onload = Task.async(function* () {
   try {
-    let ReactDOM = bRequire("devtools/client/shared/vendor/react-dom");
-    let React = bRequire("devtools/client/shared/vendor/react");
-    let Tree = React.createFactory(bRequire("devtools/client/memory/components/tree"));
+    let ReactDOM = browserRequire("devtools/client/shared/vendor/react-dom");
+    let React = browserRequire("devtools/client/shared/vendor/react");
+    let Tree = React.createFactory(browserRequire("devtools/client/shared/components/tree"));
 
     const tree = ReactDOM.render(Tree(TEST_TREE_INTERFACE), window.document.body);
 

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

@@ -15,9 +15,9 @@ Test Tree's autoExpandDepth.
 <script type="application/javascript;version=1.8">
 window.onload = Task.async(function* () {
   try {
-    let ReactDOM = bRequire("devtools/client/shared/vendor/react-dom");
-    let React = bRequire("devtools/client/shared/vendor/react");
-    let Tree = React.createFactory(bRequire("devtools/client/memory/components/tree"));
+    let ReactDOM = browserRequire("devtools/client/shared/vendor/react-dom");
+    let React = browserRequire("devtools/client/shared/vendor/react");
+    let Tree = React.createFactory(browserRequire("devtools/client/shared/components/tree"));
 
     const tree = ReactDOM.render(Tree(TEST_TREE_INTERFACE), window.document.body);
 

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

@@ -15,9 +15,9 @@ Test that we only render visible tree items.
 <script type="application/javascript;version=1.8">
 window.onload = Task.async(function* () {
   try {
-    const ReactDOM = bRequire("devtools/client/shared/vendor/react-dom");
-    const React = bRequire("devtools/client/shared/vendor/react");
-    const Tree = React.createFactory(bRequire("devtools/client/memory/components/tree"));
+    const ReactDOM = browserRequire("devtools/client/shared/vendor/react-dom");
+    const React = browserRequire("devtools/client/shared/vendor/react");
+    const Tree = React.createFactory(browserRequire("devtools/client/shared/components/tree"));
     const tree = ReactDOM.render(Tree(TEST_TREE_INTERFACE), window.document.body);
 
     yield setState(tree, {

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

@@ -16,10 +16,10 @@ Test focusing with the Tree component.
 
 window.onload = Task.async(function* () {
   try {
-    const ReactDOM = bRequire("devtools/client/shared/vendor/react-dom");
-    const React = bRequire("devtools/client/shared/vendor/react");
+    const ReactDOM = browserRequire("devtools/client/shared/vendor/react-dom");
+    const React = browserRequire("devtools/client/shared/vendor/react");
     const { Simulate } = React.addons.TestUtils;
-    const Tree = React.createFactory(bRequire("devtools/client/memory/components/tree"));
+    const Tree = React.createFactory(browserRequire("devtools/client/shared/components/tree"));
     const tree = ReactDOM.render(Tree(TEST_TREE_INTERFACE), window.document.body);
 
     yield setState(tree, {

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

@@ -15,10 +15,10 @@ Test keyboard navigation with the Tree component.
 <script type="application/javascript;version=1.8">
 window.onload = Task.async(function* () {
   try {
-    const ReactDOM = bRequire("devtools/client/shared/vendor/react-dom");
-    const React = bRequire("devtools/client/shared/vendor/react");
+    const ReactDOM = browserRequire("devtools/client/shared/vendor/react-dom");
+    const React = browserRequire("devtools/client/shared/vendor/react");
     const { Simulate } = React.addons.TestUtils;
-    const Tree = React.createFactory(bRequire("devtools/client/memory/components/tree"));
+    const Tree = React.createFactory(browserRequire("devtools/client/shared/components/tree"));
     const tree = ReactDOM.render(Tree(TEST_TREE_INTERFACE), window.document.body);
 
     yield setState(tree, {

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

@@ -16,9 +16,9 @@ Test that arrows get the open attribute when their item's children are expanded.
 <script type="application/javascript;version=1.8">
 window.onload = Task.async(function* () {
   try {
-    const ReactDOM = bRequire("devtools/client/shared/vendor/react-dom");
-    const React = bRequire("devtools/client/shared/vendor/react");
-    const Tree = React.createFactory(bRequire("devtools/client/memory/components/tree"));
+    const ReactDOM = browserRequire("devtools/client/shared/vendor/react-dom");
+    const React = browserRequire("devtools/client/shared/vendor/react");
+    const Tree = React.createFactory(browserRequire("devtools/client/shared/components/tree"));
     const tree = ReactDOM.render(Tree(TEST_TREE_INTERFACE), window.document.body);
 
     yield setProps(tree, {

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

@@ -17,10 +17,10 @@ other inputs.
 <script type="application/javascript;version=1.8">
 window.onload = Task.async(function* () {
   try {
-    const ReactDOM = bRequire("devtools/client/shared/vendor/react-dom");
-    const React = bRequire("devtools/client/shared/vendor/react");
+    const ReactDOM = browserRequire("devtools/client/shared/vendor/react-dom");
+    const React = browserRequire("devtools/client/shared/vendor/react");
     const { Simulate } = React.addons.TestUtils;
-    const Tree = React.createFactory(bRequire("devtools/client/memory/components/tree"));
+    const Tree = React.createFactory(browserRequire("devtools/client/shared/components/tree"));
     const tree = ReactDOM.render(Tree(TEST_TREE_INTERFACE), window.document.body);
 
     const input = document.createElement("input");

devtools/client/shared/moz.build

@@ -8,6 +8,7 @@ BROWSER_CHROME_MANIFESTS += ['test/browser.ini']
 XPCSHELL_TESTS_MANIFESTS += ['test/unit/xpcshell.ini']
 
 DIRS += [
+    'components',
     'redux',
     'vendor',
     'widgets',