Run mochitests

bin/copy-assets.js

@@ -9,9 +9,9 @@ const args = minimist(process.argv.slice(2), {
 function start() {
   console.log("start: copy assets");
   const projectPath = path.resolve(__dirname, "..");
-  const mcModulePath = "devtools/client/shared/components";
+  const mcModulePath = "devtools/client/shared/components/reps";
   const mcPath = "./firefox";
-  
+
   symlinkTests({ projectPath, mcModulePath });
 
   makeBundle({

bin/download-firefox-artifact

@@ -24,8 +24,8 @@ if [ -d "$FIREFOX_PATH" ]; then
 
         # If the mochitest dir has been symlinked, remove it as revert
         # does not follow symlinks.
-        if [ -h "$FIREFOX_PATH/devtools/client/debugger/new/test/mochitest" ]; then
-           rm "$FIREFOX_PATH/devtools/client/debugger/new/test/mochitest";
+        if [ -h "$FIREFOX_PATH/devtools/client/shared/components/reps/test/mochitest" ]; then
+           rm "$FIREFOX_PATH/devtools/client/shared/components/reps/test/mochitest";
         fi
 
         hg revert -a

bin/prepare-mochitests-dev

@@ -6,7 +6,8 @@ FIREFOX_PATH="$ROOT/../firefox"
 # This will either download or update the local Firefox repo
 "$ROOT/download-firefox-artifact"
 
-# Update the debugger files, build firefox, and run all the mochitests
-"$ROOT/make-firefox-bundle" "$FIREFOX_PATH" --symlink-mochitests
+# Update the reps files and symlink reps mochitests
+node "$ROOT/copy-assets.js"
+
 cd "$FIREFOX_PATH"
 ./mach build

bin/publish-assets.js

@@ -4,7 +4,7 @@ const path = require("path");
 function start() {
   console.log("start: publish assets");
   const projectPath = path.resolve(__dirname, "..");
-  const mcModulePath = "devtools/client/debugger/new";
+  const mcModulePath = "devtools/client/shared/components/reps";
 
   copyFile(
     path.resolve(projectPath, "src/test/mochitest"),

src/index.js

@@ -1,11 +1,13 @@
 const React = require("react");
 
 const { MODE } = require("./reps/constants");
-const Rep = React.createFactory(require("./reps/rep"));
-const Grip = require("./reps/grip");
+const { REPS } = require("./reps/rep");
+const { createFactories, parseURLEncodedText, parseURLParams } = require("./reps/rep-utils");
 
 module.exports = {
-  Rep,
-  Grip,
-  MODE
+  REPS,
+  MODE,
+  createFactories,
+  parseURLEncodedText,
+  parseURLParams,
 };

src/launchpad/components/Result.js

@@ -2,7 +2,7 @@ const React = require("react");
 const { DOM: dom, PropTypes, createFactory } = React;
 
 const { MODE } = require("../../reps/constants");
-const Rep = createFactory(require("../../reps/rep"));
+const Rep = createFactory(require("../../reps/rep").Rep);
 const Grip = require("../../reps/grip");
 
 const Result = React.createClass({

src/reps/array.js

@@ -1,6 +1,12 @@
+"use strict";
 
+// Dependencies
 const React = require("react");
-const Caption = React.createFactory(require("./caption"));
+const {
+  createFactories,
+  wrapRender,
+} = require("./rep-utils");
+const { Caption } = createFactories(require("./caption"));
 const { MODE } = require("./constants");
 
 // Shortcuts
@@ -16,6 +22,8 @@ let ArrayRep = React.createClass({
   propTypes: {
     // @TODO Change this to Object.values once it's supported in Node's version of V8
     mode: React.PropTypes.oneOf(Object.keys(MODE).map(key => MODE[key])),
+    objectLink: React.PropTypes.func,
+    object: React.PropTypes.array.isRequired,
   },
 
   getTitle: function (object, context) {
@@ -105,7 +113,7 @@ let ArrayRep = React.createClass({
   onClickBracket: function (event) {
   },
 
-  render: function () {
+  render: wrapRender(function () {
     let {
       object,
       mode = MODE.SHORT,
@@ -147,7 +155,7 @@ let ArrayRep = React.createClass({
         )
       )
     );
-  },
+  }),
 });
 
 /**
@@ -156,8 +164,14 @@ let ArrayRep = React.createClass({
 let ItemRep = React.createFactory(React.createClass({
   displayName: "ItemRep",
 
-  render: function () {
-    const Rep = React.createFactory(require("./rep"));
+  propTypes: {
+    object: React.PropTypes.any.isRequired,
+    delim: React.PropTypes.string.isRequired,
+    mode: React.PropTypes.symbol,
+  },
+
+  render: wrapRender(function () {
+    const { Rep } = createFactories(require("./rep"));
 
     let object = this.props.object;
     let delim = this.props.delim;
@@ -168,14 +182,15 @@ let ItemRep = React.createFactory(React.createClass({
         delim
       )
     );
-  }
+  })
 }));
 
 function supportsObject(object, type) {
   return Array.isArray(object) ||
     Object.prototype.toString.call(object) === "[object Arguments]";
 }
 
+// Exports from this module
 module.exports = {
   rep: ArrayRep,
   supportsObject: supportsObject

src/reps/attribute.js

@@ -1,11 +1,17 @@
+// ReactJS
 const React = require("react");
 
 // Reps
-const { isGrip } = require("./rep-utils");
-const StringRep = React.createFactory(require("./string").rep);
+const {
+  createFactories,
+  isGrip,
+  wrapRender,
+} = require("./rep-utils");
+const { StringRep } = require("./string");
 
 // Shortcuts
 const { span } = React.DOM;
+const { rep: StringRepFactory } = createFactories(StringRep);
 
 /**
  * Renders DOM attribute
@@ -14,14 +20,15 @@ let Attribute = React.createClass({
   displayName: "Attr",
 
   propTypes: {
-    object: React.PropTypes.object.isRequired
+    object: React.PropTypes.object.isRequired,
+    objectLink: React.PropTypes.func,
   },
 
   getTitle: function (grip) {
     return grip.preview.nodeName;
   },
 
-  render: function () {
+  render: wrapRender(function () {
     let object = this.props.object;
     let value = object.preview.value;
     let objectLink = this.props.objectLink || span;
@@ -35,11 +42,11 @@ let Attribute = React.createClass({
           span({className: "attrEqual"},
             "="
           ),
-          StringRep({object: value})
+          StringRepFactory({object: value})
         )
       )
     );
-  },
+  }),
 });
 
 // Registration
@@ -55,4 +62,4 @@ function supportsObject(grip, type) {
 module.exports = {
   rep: Attribute,
   supportsObject: supportsObject
-};
+};

src/reps/caption.js

@@ -1,18 +1,26 @@
+// Dependencies
 const React = require("react");
 const DOM = React.DOM;
 
+const { wrapRender } = require("./rep-utils");
+
 /**
  * Renders a caption. This template is used by other components
  * that needs to distinguish between a simple text/value and a label.
  */
 const Caption = React.createClass({
   displayName: "Caption",
 
-  render: function () {
+  propTypes: {
+    object: React.PropTypes.object,
+  },
+
+  render: wrapRender(function () {
     return (
       DOM.span({"className": "caption"}, this.props.object)
     );
-  },
+  }),
 });
 
+// Exports from this module
 module.exports = Caption;

src/reps/comment-node.js

@@ -1,5 +1,11 @@
+// Dependencies
 const React = require("react");
-const { isGrip, cropString, cropMultipleLines } = require("./rep-utils");
+const {
+  isGrip,
+  cropString,
+  cropMultipleLines,
+  wrapRender,
+} = require("./rep-utils");
 const { MODE } = require("./constants");
 const nodeConstants = require("../shared/dom-node-constants");
 
@@ -18,7 +24,7 @@ const CommentNode = React.createClass({
     mode: React.PropTypes.oneOf(Object.keys(MODE).map(key => MODE[key])),
   },
 
-  render: function () {
+  render: wrapRender(function () {
     let {
       object,
       mode = MODE.SHORT
@@ -32,7 +38,7 @@ const CommentNode = React.createClass({
     }
 
     return span({className: "objectBox theme-comment"}, `<!-- ${textContent} -->`);
-  },
+  }),
 });
 
 // Registration
@@ -43,6 +49,7 @@ function supportsObject(object, type) {
   return object.preview && object.preview.nodeType === nodeConstants.COMMENT_NODE;
 }
 
+// Exports from this module
 module.exports = {
   rep: CommentNode,
   supportsObject: supportsObject

src/reps/date-time.js

@@ -1,7 +1,11 @@
+// ReactJS
 const React = require("react");
 
 // Reps
-const { isGrip } = require("./rep-utils");
+const {
+  isGrip,
+  wrapRender,
+} = require("./rep-utils");
 
 // Shortcuts
 const { span } = React.DOM;
@@ -13,7 +17,8 @@ let DateTime = React.createClass({
   displayName: "Date",
 
   propTypes: {
-    object: React.PropTypes.object.isRequired
+    object: React.PropTypes.object.isRequired,
+    objectLink: React.PropTypes.func,
   },
 
   getTitle: function (grip) {
@@ -25,7 +30,7 @@ let DateTime = React.createClass({
     return "";
   },
 
-  render: function () {
+  render: wrapRender(function () {
     let grip = this.props.object;
     let date;
     try {
@@ -38,8 +43,9 @@ let DateTime = React.createClass({
     } catch (e) {
       date = span({className: "objectBox"}, "Invalid Date");
     }
+
     return date;
-  },
+  }),
 });
 
 // Registration
@@ -52,6 +58,7 @@ function supportsObject(grip, type) {
   return (type == "Date" && grip.preview);
 }
 
+// Exports from this module
 module.exports = {
   rep: DateTime,
   supportsObject: supportsObject

src/reps/document.js

@@ -1,7 +1,12 @@
+// ReactJS
 const React = require("react");
 
 // Reps
-const { isGrip, getURLDisplayString } = require("./rep-utils");
+const {
+  isGrip,
+  getURLDisplayString,
+  wrapRender,
+} = require("./rep-utils");
 
 // Shortcuts
 const { span } = React.DOM;
@@ -13,7 +18,8 @@ let Document = React.createClass({
   displayName: "Document",
 
   propTypes: {
-    object: React.PropTypes.object.isRequired
+    object: React.PropTypes.object.isRequired,
+    objectLink: React.PropTypes.func,
   },
 
   getLocation: function (grip) {
@@ -36,7 +42,7 @@ let Document = React.createClass({
     return doc.location.href;
   },
 
-  render: function () {
+  render: wrapRender(function () {
     let grip = this.props.object;
 
     return (
@@ -47,7 +53,7 @@ let Document = React.createClass({
         )
       )
     );
-  },
+  }),
 });
 
 // Registration
@@ -60,6 +66,7 @@ function supportsObject(object, type) {
   return (object.preview && type == "HTMLDocument");
 }
 
+// Exports from this module
 module.exports = {
   rep: Document,
   supportsObject: supportsObject