Bug 1273653 - Fix ESLint errors in devtools/client/shared/(components|redux). r=tromey

MozReview-Commit-ID: 5hY0uII6wf8

.eslintignore

@@ -103,10 +103,9 @@ devtools/client/shared/*.jsm
 !devtools/client/shared/css-color.js
 !devtools/client/shared/css-color-db.js
 !devtools/client/shared/css-parsing-utils.js
-devtools/client/shared/components/**
-devtools/client/shared/redux/**
+devtools/client/shared/components/test/**
+devtools/client/shared/redux/middleware/test/**
 devtools/client/shared/test/**
-devtools/client/shared/vendor/**
 devtools/client/shared/widgets/**
 devtools/client/sourceeditor/**
 devtools/client/webaudioeditor/**

devtools/client/shared/components/frame.js

@@ -11,6 +11,8 @@ const { LocalizationHelper } = require("devtools/client/shared/l10n");
 const l10n = new LocalizationHelper("chrome://devtools/locale/components.properties");
 
 module.exports = createClass({
+  displayName: "Frame",
+
   propTypes: {
     // SavedFrame, or an object containing all the required properties.
     frame: PropTypes.shape({
@@ -34,8 +36,6 @@ module.exports = createClass({
     };
   },
 
-  displayName: "Frame",
-
   render() {
     let { onClick, frame, showFunctionName, showHost } = this.props;
     let source = frame.source ? String(frame.source) : "";
@@ -72,7 +72,8 @@ module.exports = createClass({
 
     if (showFunctionName && frame.functionDisplayName) {
       elements.push(
-        dom.span({ className: "frame-link-function-display-name" }, frame.functionDisplayName)
+        dom.span({ className: "frame-link-function-display-name" },
+                 frame.functionDisplayName)
       );
     }
 
@@ -87,7 +88,9 @@ module.exports = createClass({
       // Intentionally exclude 0
       if (column) {
         sourceElements.push(dom.span({ className: "frame-link-colon" }, ":"));
-        sourceElements.push(dom.span({ className: "frame-link-column" }, column));
+        sourceElements.push(
+          dom.span({ className: "frame-link-column" }, column)
+        );
         // Add `data-column` attribute for testing
         attributes["data-column"] = column;
       }

devtools/client/shared/components/h-split-box.js

@@ -2,6 +2,9 @@
  * 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/. */
 
+/* eslint-env browser */
+"use strict";
+
 // A box with a start and a end pane, separated by a dragable splitter that
 // allows the user to resize the relative widths of the panes.
 //
@@ -30,20 +33,6 @@ const { assert } = require("devtools/shared/DevToolsUtils");
 module.exports = createClass({
   displayName: "HSplitBox",
 
-  getDefaultProps() {
-    return {
-      startWidth: 0.5,
-      minStartWidth: "20px",
-      minEndWidth: "20px",
-    };
-  },
-
-  getInitialState() {
-    return {
-      mouseDown: false
-    };
-  },
-
   propTypes: {
     // The contents of the start pane.
     start: PropTypes.any.isRequired,
@@ -68,6 +57,34 @@ module.exports = createClass({
     onResize: PropTypes.func.isRequired,
   },
 
+  getDefaultProps() {
+    return {
+      startWidth: 0.5,
+      minStartWidth: "20px",
+      minEndWidth: "20px",
+    };
+  },
+
+  getInitialState() {
+    return {
+      mouseDown: false
+    };
+  },
+
+  componentDidMount() {
+    document.defaultView.top.addEventListener("mouseup", this._onMouseUp,
+                                              false);
+    document.defaultView.top.addEventListener("mousemove", this._onMouseMove,
+                                              false);
+  },
+
+  componentWillUnmount() {
+    document.defaultView.top.removeEventListener("mouseup", this._onMouseUp,
+                                                 false);
+    document.defaultView.top.removeEventListener("mousemove", this._onMouseMove,
+                                                 false);
+  },
+
   _onMouseDown(event) {
     if (event.button !== 0) {
       return;
@@ -100,21 +117,12 @@ module.exports = createClass({
     event.preventDefault();
   },
 
-  componentDidMount() {
-    document.defaultView.top.addEventListener("mouseup", this._onMouseUp, false);
-    document.defaultView.top.addEventListener("mousemove", this._onMouseMove, false);
-  },
-
-  componentWillUnmount() {
-    document.defaultView.top.removeEventListener("mouseup", this._onMouseUp, false);
-    document.defaultView.top.removeEventListener("mousemove", this._onMouseMove, false);
-  },
-
   render() {
+    /* eslint-disable no-shadow */
     const { start, end, startWidth, minStartWidth, minEndWidth } = this.props;
-    assert(0 <= startWidth && startWidth <= 1,
+    assert(startWidth => 0 && startWidth <= 1,
            "0 <= this.props.startWidth <= 1");
-
+    /* eslint-enable */
     return dom.div(
       {
         className: "h-split-box",

devtools/client/shared/components/notification-box.js

@@ -33,6 +33,8 @@ const PriorityLevels = {
  * https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/notificationbox
  */
 var NotificationBox = createClass({
+  displayName: "NotificationBox",
+
   propTypes: {
     // List of notifications appended into the box.
     notifications: PropTypes.arrayOf(PropTypes.shape({
@@ -74,8 +76,6 @@ var NotificationBox = createClass({
     })),
   },
 
-  displayName: "NotificationBox",
-
   getInitialState() {
     return {
       notifications: new Immutable.OrderedMap()

devtools/client/shared/components/reps/array.js

@@ -7,7 +7,7 @@
 "use strict";
 
 // Make this available to both AMD and CJS environments
-define(function(require, exports, module) {
+define(function (require, exports, module) {
   // Dependencies
   const React = require("devtools/client/shared/vendor/react");
   const { createFactories } = require("./rep-utils");
@@ -24,54 +24,11 @@ define(function(require, exports, module) {
   let ArrayRep = React.createClass({
     displayName: "ArrayRep",
 
-    render: function() {
-      let mode = this.props.mode || "short";
-      let object = this.props.object;
-      let items;
-
-      if (mode == "tiny") {
-        items = DOM.span({className: "length"}, object.length);
-      } else {
-        let max = (mode == "short") ? 3 : 300;
-        items = this.arrayIterator(object, max);
-      }
-
-      return (
-        ObjectBox({
-          className: "array",
-          onClick: this.onToggleProperties},
-          DOM.a({
-            className: "objectLink",
-            onclick: this.onClickBracket},
-            DOM.span({
-              className: "arrayLeftBracket",
-              role: "presentation"},
-              "["
-            )
-          ),
-          items,
-          DOM.a({
-            className: "objectLink",
-            onclick: this.onClickBracket},
-            DOM.span({
-              className: "arrayRightBracket",
-              role: "presentation"},
-              "]"
-            )
-          ),
-          DOM.span({
-            className: "arrayProperties",
-            role: "group"}
-          )
-        )
-      );
-    },
-
-    getTitle: function(object, context) {
+    getTitle: function (object, context) {
       return "[" + object.length + "]";
     },
 
-    arrayIterator: function(array, max) {
+    arrayIterator: function (array, max) {
       let items = [];
       let delim;
 
@@ -125,7 +82,7 @@ define(function(require, exports, module) {
      *
      * @param {Array} array The array object.
      */
-    hasSpecialProperties: function(array) {
+    hasSpecialProperties: function (array) {
       function isInteger(x) {
         let y = parseInt(x, 10);
         if (isNaN(y)) {
@@ -154,11 +111,54 @@ define(function(require, exports, module) {
 
     // Event Handlers
 
-    onToggleProperties: function(event) {
+    onToggleProperties: function (event) {
     },
 
-    onClickBracket: function(event) {
+    onClickBracket: function (event) {
+    },
+
+    render: function () {
+      let mode = this.props.mode || "short";
+      let object = this.props.object;
+      let items;
+
+      if (mode == "tiny") {
+        items = DOM.span({className: "length"}, object.length);
+      } else {
+        let max = (mode == "short") ? 3 : 300;
+        items = this.arrayIterator(object, max);
       }
+
+      return (
+        ObjectBox({
+          className: "array",
+          onClick: this.onToggleProperties},
+          DOM.a({
+            className: "objectLink",
+            onclick: this.onClickBracket},
+            DOM.span({
+              className: "arrayLeftBracket",
+              role: "presentation"},
+              "["
+            )
+          ),
+          items,
+          DOM.a({
+            className: "objectLink",
+            onclick: this.onClickBracket},
+            DOM.span({
+              className: "arrayRightBracket",
+              role: "presentation"},
+              "]"
+            )
+          ),
+          DOM.span({
+            className: "arrayProperties",
+            role: "group"}
+          )
+        )
+      );
+    },
   });
 
   /**
@@ -167,7 +167,7 @@ define(function(require, exports, module) {
   let ItemRep = React.createFactory(React.createClass({
     displayName: "ItemRep",
 
-    render: function() {
+    render: function () {
       const { Rep } = createFactories(require("./rep"));
 
       let object = this.props.object;
@@ -187,7 +187,7 @@ define(function(require, exports, module) {
   let Reference = React.createFactory(React.createClass({
     displayName: "Reference",
 
-    render: function() {
+    render: function () {
       let tooltip = "Circular reference";
       return (
         DOM.span({title: tooltip},

devtools/client/shared/components/reps/attribute.js

@@ -6,7 +6,7 @@
 "use strict";
 
 // Make this available to both AMD and CJS environments
-define(function(require, exports, module) {
+define(function (require, exports, module) {
   // ReactJS
   const React = require("devtools/client/shared/vendor/react");
 
@@ -23,17 +23,17 @@ define(function(require, exports, module) {
    * Renders DOM attribute
    */
   let Attribute = React.createClass({
+    displayName: "Attr",
+
     propTypes: {
       object: React.PropTypes.object.isRequired
     },
 
-    displayName: "Attr",
-
-    getTitle: function(grip) {
+    getTitle: function (grip) {
       return grip.preview.nodeName;
     },
 
-    render: function() {
+    render: function () {
       let grip = this.props.object;
       let value = grip.preview.value;
 

devtools/client/shared/components/reps/caption.js

@@ -7,7 +7,7 @@
 "use strict";
 
 // Make this available to both AMD and CJS environments
-define(function(require, exports, module) {
+define(function (require, exports, module) {
   // Dependencies
   const React = require("devtools/client/shared/vendor/react");
   const DOM = React.DOM;
@@ -19,7 +19,7 @@ define(function(require, exports, module) {
   const Caption = React.createClass({
     displayName: "Caption",
 
-    render: function() {
+    render: function () {
       return (
         DOM.span({"className": "caption"}, this.props.object)
       );

devtools/client/shared/components/reps/date-time.js

@@ -6,7 +6,7 @@
 "use strict";
 
 // Make this available to both AMD and CJS environments
-define(function(require, exports, module) {
+define(function (require, exports, module) {
   // ReactJS
   const React = require("devtools/client/shared/vendor/react");
 
@@ -21,17 +21,17 @@ define(function(require, exports, module) {
    * Used to render JS built-in Date() object.
    */
   let DateTime = React.createClass({
+    displayName: "Date",
+
     propTypes: {
       object: React.PropTypes.object.isRequired
     },
 
-    displayName: "Date",
-
-    getTitle: function(grip) {
+    getTitle: function (grip) {
       return new Date(grip.preview.timestamp).toString();
     },
 
-    render: function() {
+    render: function () {
       let grip = this.props.object;
       return (
         ObjectLink({className: "Date"},

devtools/client/shared/components/reps/document.js

@@ -6,7 +6,7 @@
 "use strict";
 
 // Make this available to both AMD and CJS environments
-define(function(require, exports, module) {
+define(function (require, exports, module) {
   // ReactJS
   const React = require("devtools/client/shared/vendor/react");
 
@@ -22,26 +22,26 @@ define(function(require, exports, module) {
    * Renders DOM document object.
    */
   let Document = React.createClass({
+    displayName: "Document",
+
     propTypes: {
       object: React.PropTypes.object.isRequired
     },
 
-    displayName: "Document",
-
-    getLocation: function(grip) {
+    getLocation: function (grip) {
       let location = grip.preview.location;
       return location ? getFileName(location) : "";
     },
 
-    getTitle: function(win, context) {
+    getTitle: function (win, context) {
       return "document";
     },
 
-    getTooltip: function(doc) {
+    getTooltip: function (doc) {
       return doc.location.href;
     },
 
-    render: function() {
+    render: function () {
       let grip = this.props.object;
 
       return (

devtools/client/shared/components/reps/event.js

@@ -6,7 +6,7 @@
 "use strict";
 
 // Make this available to both AMD and CJS environments
-define(function(require, exports, module) {
+define(function (require, exports, module) {
   // ReactJS
   const React = require("devtools/client/shared/vendor/react");
 
@@ -18,13 +18,13 @@ define(function(require, exports, module) {
    * Renders DOM event objects.
    */
   let Event = React.createClass({
+    displayName: "event",
+
     propTypes: {
       object: React.PropTypes.object.isRequired
     },
 
-    displayName: "event",
-
-    summarizeEvent: function(grip) {
+    summarizeEvent: function (grip) {
       let info = [grip.preview.type, " "];
 
       let eventFamily = grip.class;
@@ -41,7 +41,7 @@ define(function(require, exports, module) {
       return info.join("");
     },
 
-    render: function() {
+    render: function () {
       let grip = this.props.object;
       return (
         ObjectLink({className: "event"},

devtools/client/shared/components/reps/function.js

@@ -6,7 +6,7 @@
 "use strict";
 
 // Make this available to both AMD and CJS environments
-define(function(require, exports, module) {
+define(function (require, exports, module) {
   // ReactJS
   const React = require("devtools/client/shared/vendor/react");
 
@@ -19,18 +19,18 @@ define(function(require, exports, module) {
    * This component represents a template for Function objects.
    */
   let Func = React.createClass({
+    displayName: "Func",
+
     propTypes: {
       object: React.PropTypes.object.isRequired
     },
 
-    displayName: "Func",
-
-    summarizeFunction: function(grip) {
+    summarizeFunction: function (grip) {
       let name = grip.displayName || grip.name || "function";
       return cropString(name + "()", 100);
     },
 
-    render: function() {
+    render: function () {
       let grip = this.props.object;
 
       return (

devtools/client/shared/components/reps/grip-array.js

@@ -7,7 +7,7 @@
 "use strict";
 
 // Make this available to both AMD and CJS environments
-define(function(require, exports, module) {
+define(function (require, exports, module) {
   // Dependencies
   const React = require("devtools/client/shared/vendor/react");
   const { createFactories, isGrip } = require("./rep-utils");
@@ -22,23 +22,23 @@ define(function(require, exports, module) {
    * and the max number of rendered items depends on the current mode.
    */
   let GripArray = React.createClass({
+    displayName: "GripArray",
+
     propTypes: {
       object: React.PropTypes.object.isRequired,
       mode: React.PropTypes.string,
       provider: React.PropTypes.object,
     },
 
-    displayName: "GripArray",
-
-    getLength: function(grip) {
+    getLength: function (grip) {
       return grip.preview ? grip.preview.length : 0;
     },
 
-    getTitle: function(object, context) {
+    getTitle: function (object, context) {
       return "[" + object.length + "]";
     },
 
-    arrayIterator: function(grip, max) {
+    arrayIterator: function (grip, max) {
       let items = [];
 
       if (!grip.preview || !grip.preview.length) {
@@ -96,19 +96,19 @@ define(function(require, exports, module) {
       return items;
     },
 
-    hasSpecialProperties: function(array) {
+    hasSpecialProperties: function (array) {
       return false;
     },
 
     // Event Handlers
 
-    onToggleProperties: function(event) {
+    onToggleProperties: function (event) {
     },
 
-    onClickBracket: function(event) {
+    onClickBracket: function (event) {
     },
 
-    render: function() {
+    render: function () {
       let mode = this.props.mode || "short";
       let object = this.props.object;
 
@@ -158,13 +158,13 @@ define(function(require, exports, module) {
    * a delimiter (a comma by default).
    */
   let GripArrayItem = React.createFactory(React.createClass({
+    displayName: "GripArrayItem",
+
     propTypes: {
       delim: React.PropTypes.string,
     },
 
-    displayName: "GripArrayItem",
-
-    render: function() {
+    render: function () {
       let { Rep } = createFactories(require("./rep"));
 
       return (
@@ -184,7 +184,7 @@ define(function(require, exports, module) {
   let Reference = React.createFactory(React.createClass({
     displayName: "Reference",
 
-    render: function() {
+    render: function () {
       return (
         span({title: "Circular reference"},
           "[...]"

devtools/client/shared/components/reps/grip.js

@@ -6,7 +6,7 @@
 "use strict";
 
 // Make this available to both AMD and CJS environments
-define(function(require, exports, module) {
+define(function (require, exports, module) {
   // ReactJS
   const React = require("devtools/client/shared/vendor/react");
 
@@ -22,18 +22,18 @@ define(function(require, exports, module) {
    * @template TODO docs
    */
   const Grip = React.createClass({
+    displayName: "Grip",
+
     propTypes: {
       object: React.PropTypes.object.isRequired,
       mode: React.PropTypes.string,
     },
 
-    displayName: "Grip",
-
-    getTitle: function() {
+    getTitle: function () {
       return "";
     },
 
-    longPropIterator: function(object) {
+    longPropIterator: function (object) {
       try {
         return this.propIterator(object, 100);
       } catch (err) {
@@ -42,7 +42,7 @@ define(function(require, exports, module) {
       return [];
     },
 
-    shortPropIterator: function(object) {
+    shortPropIterator: function (object) {
       try {
         return this.propIterator(object, 3);
       } catch (err) {
@@ -51,7 +51,7 @@ define(function(require, exports, module) {
       return [];
     },
 
-    propIterator: function(object, max) {
+    propIterator: function (object, max) {
       // Property filter. Show only interesting properties to the user.
       let isInterestingProp = (type, value) => {
         return (
@@ -97,7 +97,7 @@ define(function(require, exports, module) {
       return props;
     },
 
-    getProps: function(object, max, filter) {
+    getProps: function (object, max, filter) {
       let props = [];
 
       max = max || 3;
@@ -139,7 +139,7 @@ define(function(require, exports, module) {
       return props;
     },
 
-    render: function() {
+    render: function () {
       let object = this.props.object;
       let props = this.shortPropIterator(object);
 
@@ -167,15 +167,15 @@ define(function(require, exports, module) {
    * Property for a grip object.
    */
   let PropRep = React.createFactory(React.createClass({
+    displayName: "PropRep",
+
     propTypes: {
       name: React.PropTypes.string,
       equal: React.PropTypes.string,
       delim: React.PropTypes.string,
     },
 
-    displayName: "PropRep",
-
-    render: function() {
+    render: function () {
       let { Rep } = createFactories(require("./rep"));
 
       return (

devtools/client/shared/components/reps/named-node-map.js

@@ -6,7 +6,7 @@
 "use strict";
 
 // Make this available to both AMD and CJS environments
-define(function(require, exports, module) {
+define(function (require, exports, module) {
   // ReactJS
   const React = require("devtools/client/shared/vendor/react");
 
@@ -22,6 +22,7 @@ define(function(require, exports, module) {
    * Used to render a map of values provided as a grip.
    */
   let NamedNodeMap = React.createClass({
+
     propTypes: {
       object: React.PropTypes.object.isRequired,
       mode: React.PropTypes.string,
@@ -30,15 +31,15 @@ define(function(require, exports, module) {
 
     className: "NamedNodeMap",
 
-    getLength: function(object) {
+    getLength: function (object) {
       return object.preview.length;
     },
 
-    getTitle: function(object) {
+    getTitle: function (object) {
       return object.class ? object.class : "";
     },
 
-    getItems: function(array, max) {
+    getItems: function (array, max) {
       let items = this.propIterator(array, max);
 
       items = items.map(item => PropRep(item));
@@ -54,7 +55,7 @@ define(function(require, exports, module) {
       return items;
     },
 
-    propIterator: function(grip, max) {
+    propIterator: function (grip, max) {
       max = max || 3;
 
       let props = [];
@@ -85,7 +86,7 @@ define(function(require, exports, module) {
       return props;
     },
 
-    render: function() {
+    render: function () {
       let grip = this.props.object;
       let mode = this.props.mode;
 
@@ -122,14 +123,14 @@ define(function(require, exports, module) {
    * Property for a grip object.
    */
   let PropRep = React.createFactory(React.createClass({
+    displayName: "PropRep",
+
     propTypes: {
       equal: React.PropTypes.string,
       delim: React.PropTypes.string,
     },
 
-    displayName: "PropRep",
-
-    render: function() {
+    render: function () {
       const { Rep } = createFactories(require("./rep"));
 
       return (

devtools/client/shared/components/reps/null.js

@@ -7,7 +7,7 @@
 "use strict";
 
 // Make this available to both AMD and CJS environments
-define(function(require, exports, module) {
+define(function (require, exports, module) {
   // Dependencies
   const React = require("devtools/client/shared/vendor/react");
   const { createFactories } = require("./rep-utils");
@@ -19,7 +19,7 @@ define(function(require, exports, module) {
   const Null = React.createClass({
     displayName: "NullRep",
 
-    render: function() {
+    render: function () {
       return (
         ObjectBox({className: "null"},
           "null"

devtools/client/shared/components/reps/number.js

@@ -7,7 +7,7 @@
 "use strict";
 
 // Make this available to both AMD and CJS environments
-define(function(require, exports, module) {
+define(function (require, exports, module) {
   // Dependencies
   const React = require("devtools/client/shared/vendor/react");
   const { createFactories } = require("./rep-utils");
@@ -19,18 +19,18 @@ define(function(require, exports, module) {
   const Number = React.createClass({
     displayName: "Number",
 
-    render: function() {
+    stringify: function (object) {
+      return (Object.is(object, -0) ? "-0" : String(object));
+    },
+
+    render: function () {
       let value = this.props.object;
       return (
         ObjectBox({className: "number"},
           this.stringify(value)
         )
       );
-    },
-
-    stringify: function(object) {
-      return (Object.is(object, -0) ? "-0" : String(object));
-    },
+    }
   });
 
   function supportsObject(object, type) {

devtools/client/shared/components/reps/object-box.js

@@ -7,7 +7,7 @@
 "use strict";
 
 // Make this available to both AMD and CJS environments
-define(function(require, exports, module) {
+define(function (require, exports, module) {
   // Dependencies
   const React = require("devtools/client/shared/vendor/react");
   const DOM = React.DOM;
@@ -18,7 +18,7 @@ define(function(require, exports, module) {
   const ObjectBox = React.createClass({
     displayName: "ObjectBox",
 
-    render: function() {
+    render: function () {
       let className = this.props.className;
       let boxClassName = className ? " objectBox-" + className : "";
 

devtools/client/shared/components/reps/object-link.js

@@ -7,7 +7,7 @@
 "use strict";
 
 // Make this available to both AMD and CJS environments
-define(function(require, exports, module) {
+define(function (require, exports, module) {
   // Dependencies
   const React = require("devtools/client/shared/vendor/react");
   const DOM = React.DOM;
@@ -18,7 +18,7 @@ define(function(require, exports, module) {
   const ObjectLink = React.createClass({
     displayName: "ObjectLink",
 
-    render: function() {
+    render: function () {
       let className = this.props.className;
       let objectClassName = className ? " objectLink-" + className : "";
       let linkClassName = "objectLink" + objectClassName + " a11yFocus";

devtools/client/shared/components/reps/object-with-text.js

@@ -6,7 +6,7 @@
 "use strict";
 
 // Make this available to both AMD and CJS environments
-define(function(require, exports, module) {
+define(function (require, exports, module) {
   // ReactJS
   const React = require("devtools/client/shared/vendor/react");
 
@@ -21,21 +21,21 @@ define(function(require, exports, module) {
    * Renders a grip object with textual data.
    */
   let ObjectWithText = React.createClass({
+    displayName: "ObjectWithText",
+
     propTypes: {
       object: React.PropTypes.object.isRequired,
     },
 
-    displayName: "ObjectWithText",
-
-    getType: function(grip) {
+    getType: function (grip) {
       return grip.class;
     },
 
-    getDescription: function(grip) {
+    getDescription: function (grip) {
       return (grip.preview.kind == "ObjectWithText") ? grip.preview.text : "";
     },
 
-    render: function() {
+    render: function () {
       let grip = this.props.object;
       return (
         ObjectLink({className: this.getType(grip)},

devtools/client/shared/components/reps/object-with-url.js

@@ -6,7 +6,7 @@
 "use strict";
 
 // Make this available to both AMD and CJS environments
-define(function(require, exports, module) {
+define(function (require, exports, module) {
   // ReactJS
   const React = require("devtools/client/shared/vendor/react");
 
@@ -21,21 +21,21 @@ define(function(require, exports, module) {
    * Renders a grip object with URL data.
    */
   let ObjectWithURL = React.createClass({
+    displayName: "ObjectWithURL",
+
     propTypes: {
       object: React.PropTypes.object.isRequired,
     },
 
-    displayName: "ObjectWithURL",
-
-    getType: function(grip) {
+    getType: function (grip) {
       return grip.class;
     },
 
-    getDescription: function(grip) {
+    getDescription: function (grip) {
       return grip.preview.url;
     },
 
-    render: function() {
+    render: function () {
       let grip = this.props.object;
       return (
         ObjectLink({className: this.getType(grip)},

devtools/client/shared/components/reps/object.js

@@ -7,7 +7,7 @@
 "use strict";
 
 // Make this available to both AMD and CJS environments
-define(function(require, exports, module) {
+define(function (require, exports, module) {
   // Dependencies
   const React = require("devtools/client/shared/vendor/react");
   const { createFactories } = require("./rep-utils");
@@ -22,18 +22,18 @@ define(function(require, exports, module) {
    * properties enclosed in curly brackets.
    */
   const Obj = React.createClass({
+    displayName: "Obj",
+
     propTypes: {
       object: React.PropTypes.object,
       mode: React.PropTypes.string,
     },
 
-    displayName: "Obj",
-
-    getTitle: function() {
+    getTitle: function () {
       return "";
     },
 
-    longPropIterator: function(object) {
+    longPropIterator: function (object) {
       try {
         return this.propIterator(object, 100);
       } catch (err) {
@@ -42,7 +42,7 @@ define(function(require, exports, module) {
       return [];
     },
 
-    shortPropIterator: function(object) {
+    shortPropIterator: function (object) {
       try {
         return this.propIterator(object, 3);
       } catch (err) {
@@ -51,7 +51,7 @@ define(function(require, exports, module) {
       return [];
     },
 
-    propIterator: function(object, max) {
+    propIterator: function (object, max) {
       let isInterestingProp = (t, value) => {
         // Do not pick objects, it could cause recursion.
         return (t == "boolean" || t == "number" || (t == "string" && value));
@@ -90,7 +90,7 @@ define(function(require, exports, module) {
       return props;
     },
 
-    getProps: function(object, max, filter) {
+    getProps: function (object, max, filter) {
       let props = [];
 
       max = max || 3;
@@ -132,7 +132,7 @@ define(function(require, exports, module) {
       return props;
     },
 
-    render: function() {
+    render: function () {
       let object = this.props.object;
       let props = this.shortPropIterator(object);
 
@@ -151,6 +151,8 @@ define(function(require, exports, module) {
    * Renders object property, name-value pair.
    */
   let PropRep = React.createFactory(React.createClass({
+    displayName: "PropRep",
+
     propTypes: {
       object: React.PropTypes.any,
       mode: React.PropTypes.string,
@@ -159,9 +161,7 @@ define(function(require, exports, module) {
       delim: React.PropTypes.string,
     },
 
-    displayName: "PropRep",
-
-    render: function() {
+    render: function () {
       let { Rep } = createFactories(require("./rep"));
       let object = this.props.object;
       let mode = this.props.mode;

devtools/client/shared/components/reps/regexp.js

@@ -6,7 +6,7 @@
 "use strict";
 
 // Make this available to both AMD and CJS environments
-define(function(require, exports, module) {
+define(function (require, exports, module) {
   // ReactJS
   const React = require("devtools/client/shared/vendor/react");
 
@@ -21,21 +21,21 @@ define(function(require, exports, module) {
    * Renders a grip object with regular expression.
    */
   let RegExp = React.createClass({
+    displayName: "regexp",
+
     propTypes: {
       object: React.PropTypes.object.isRequired,
     },
 
-    displayName: "regexp",
-
-    getTitle: function(grip) {
+    getTitle: function (grip) {
       return grip.class;
     },
 
-    getSource: function(grip) {
+    getSource: function (grip) {
       return grip.displayString;
     },
 
-    render: function() {
+    render: function () {
       let grip = this.props.object;
       return (
         ObjectLink({className: "regexp"},

devtools/client/shared/components/reps/rep-utils.js

@@ -7,7 +7,7 @@
 "use strict";
 
 // Make this available to both AMD and CJS environments
-define(function(require, exports, module) {
+define(function (require, exports, module) {
   // Dependencies
   const React = require("devtools/client/shared/vendor/react");
 

devtools/client/shared/components/reps/rep.js

@@ -7,7 +7,7 @@
 "use strict";
 
 // Make this available to both AMD and CJS environments
-define(function(require, exports, module) {
+define(function (require, exports, module) {
   // Dependencies
   const React = require("devtools/client/shared/vendor/react");
 
@@ -69,14 +69,14 @@ define(function(require, exports, module) {
    * property.
    */
   const Rep = React.createClass({
+    displayName: "Rep",
+
     propTypes: {
       object: React.PropTypes.any,
       defaultRep: React.PropTypes.object,
     },
 
-    displayName: "Rep",
-
-    render: function() {
+    render: function () {
       let rep = getRep(this.props.object, this.props.defaultRep);
       return rep(this.props);
     },

devtools/client/shared/components/reps/string.js

@@ -7,7 +7,7 @@
 "use strict";
 
 // Make this available to both AMD and CJS environments
-define(function(require, exports, module) {
+define(function (require, exports, module) {
   // Dependencies
   const React = require("devtools/client/shared/vendor/react");
   const { createFactories } = require("./rep-utils");
@@ -19,7 +19,7 @@ define(function(require, exports, module) {
   const StringRep = React.createClass({
     displayName: "StringRep",
 
-    render: function() {
+    render: function () {
       let text = this.props.object;
       let member = this.props.member;
       if (member && member.open) {

devtools/client/shared/components/reps/stylesheet.js

@@ -6,7 +6,7 @@
 "use strict";
 
 // Make this available to both AMD and CJS environments
-define(function(require, exports, module) {
+define(function (require, exports, module) {
   // ReactJS
   const React = require("devtools/client/shared/vendor/react");
 
@@ -22,19 +22,19 @@ define(function(require, exports, module) {
    * Renders a grip representing CSSStyleSheet
    */
   let StyleSheet = React.createClass({
+    displayName: "object",
+
     propTypes: {
       object: React.PropTypes.object.isRequired,
     },
 
-    displayName: "object",
-
-    getLocation: function(grip) {
+    getLocation: function (grip) {
       // Embedded stylesheets don't have URL and so, no preview.
       let url = grip.preview ? grip.preview.url : "";
       return url ? getFileName(url) : "";
     },
 
-    render: function() {
+    render: function () {
       let grip = this.props.object;
 
       return (

devtools/client/shared/components/reps/text-node.js

@@ -6,7 +6,7 @@
 "use strict";
 
 // Make this available to both AMD and CJS environments
-define(function(require, exports, module) {
+define(function (require, exports, module) {
   // ReactJS
   const React = require("devtools/client/shared/vendor/react");
 
@@ -22,22 +22,22 @@ define(function(require, exports, module) {
    * Renders DOM #text node.
    */
   let TextNode = React.createClass({
+    displayName: "TextNode",
+
     propTypes: {
       object: React.PropTypes.object.isRequired,
       mode: React.PropTypes.string,
     },
 
-    displayName: "TextNode",
-
-    getTextContent: function(grip) {
+    getTextContent: function (grip) {
       return cropMultipleLines(grip.preview.textContent);
     },
 
-    getTitle: function(win, context) {
+    getTitle: function (win, context) {
       return "textNode";
     },
 
-    render: function() {
+    render: function () {
       let grip = this.props.object;
       let mode = this.props.mode || "short";
 

devtools/client/shared/components/reps/undefined.js

@@ -7,7 +7,7 @@
 "use strict";
 
 // Make this available to both AMD and CJS environments
-define(function(require, exports, module) {
+define(function (require, exports, module) {
   // Dependencies
   const React = require("devtools/client/shared/vendor/react");
   const { createFactories } = require("./rep-utils");
@@ -19,7 +19,7 @@ define(function(require, exports, module) {
   const Undefined = React.createClass({
     displayName: "UndefinedRep",
 
-    render: function() {
+    render: function () {
       return (
         ObjectBox({className: "undefined"},
           "undefined"

devtools/client/shared/components/reps/url.js

@@ -8,7 +8,7 @@
 "use strict";
 
 // Make this available to both AMD and CJS environments
-define(function(require, exports, module) {
+define(function (require, exports, module) {
   function parseURLParams(url) {
     url = new URL(url);
     return parseURLEncodedText(url.searchParams);

devtools/client/shared/components/reps/window.js

@@ -6,7 +6,7 @@
 "use strict";
 
 // Make this available to both AMD and CJS environments
-define(function(require, exports, module) {
+define(function (require, exports, module) {
   // ReactJS
   const React = require("devtools/client/shared/vendor/react");
 
@@ -22,17 +22,17 @@ define(function(require, exports, module) {
    * Renders a grip representing a window.
    */
   let Window = React.createClass({
+    displayName: "Window",
+
     propTypes: {
       object: React.PropTypes.object.isRequired,
     },
 
-    displayName: "Window",
-
-    getLocation: function(grip) {
+    getLocation: function (grip) {
       return cropString(grip.preview.url);
     },
 
-    render: function() {
+    render: function () {
       let grip = this.props.object;
 
       return (

devtools/client/shared/components/tree.js

@@ -1,11 +1,12 @@
 /* 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/. */
+/* eslint-env browser */
+"use strict";
 
 const { DOM: dom, createClass, createFactory, PropTypes } = require("devtools/client/shared/vendor/react");
-const { ViewHelpers } = require("devtools/client/shared/widgets/view-helpers");
 
-const AUTO_EXPAND_DEPTH = 0; // depth
+const AUTO_EXPAND_DEPTH = 0;
 const NUMBER_OF_OFFSCREEN_ITEMS = 1;
 
 /**
@@ -95,7 +96,7 @@ const NUMBER_OF_OFFSCREEN_ITEMS = 1;
  *       }
  *     });
  */
-const Tree = module.exports = createClass({
+module.exports = createClass({
   displayName: "Tree",
 
   propTypes: {
@@ -231,15 +232,15 @@ const Tree = module.exports = createClass({
     this._updateHeight();
   },
 
-  componentWillUnmount() {
-    window.removeEventListener("resize", this._updateHeight);
-  },
-
   componentWillReceiveProps(nextProps) {
     this._autoExpand();
     this._updateHeight();
   },
 
+  componentWillUnmount() {
+    window.removeEventListener("resize", this._updateHeight);
+  },
+
   _autoExpand() {
     if (!this.props.autoExpandDepth) {
       return;
@@ -271,72 +272,6 @@ const Tree = module.exports = createClass({
     }
   },
 
-  render() {
-    const traversal = this._dfsFromRoots();
-
-    // Remove `NUMBER_OF_OFFSCREEN_ITEMS` from `begin` and add `2 *
-    // NUMBER_OF_OFFSCREEN_ITEMS` to `end` so that the top and bottom of the
-    // page are filled with the `NUMBER_OF_OFFSCREEN_ITEMS` previous and next
-    // items respectively, rather than whitespace if the item is not in full
-    // view.
-    const begin = Math.max(((this.state.scroll / this.props.itemHeight) | 0) - NUMBER_OF_OFFSCREEN_ITEMS, 0);
-    const end = begin + (2 * NUMBER_OF_OFFSCREEN_ITEMS) + ((this.state.height / this.props.itemHeight) | 0);
-    const toRender = traversal.slice(begin, end);
-
-    const nodes = [
-      dom.div({
-        key: "top-spacer",
-        style: {
-          padding: 0,
-          margin: 0,
-          height: begin * this.props.itemHeight + "px"
-        }
-      })
-    ];
-
-    for (let i = 0; i < toRender.length; i++) {
-      let { item, depth } = toRender[i];
-      nodes.push(TreeNode({
-        key: this.props.getKey(item),
-        index: begin + i,
-        item: item,
-        depth: depth,
-        renderItem: this.props.renderItem,
-        focused: this.props.focused === item,
-        expanded: this.props.isExpanded(item),
-        hasChildren: !!this.props.getChildren(item).length,
-        onExpand: this._onExpand,
-        onCollapse: this._onCollapse,
-        onFocus: () => this._focus(begin + i, item),
-      }));
-    }
-
-    nodes.push(dom.div({
-      key: "bottom-spacer",
-      style: {
-        padding: 0,
-        margin: 0,
-        height: (traversal.length - 1 - end) * this.props.itemHeight + "px"
-      }
-    }));
-
-    return dom.div(
-      {
-        className: "tree",
-        ref: "tree",
-        onKeyDown: this._onKeyDown,
-        onKeyPress: this._preventArrowKeyScrolling,
-        onKeyUp: this._preventArrowKeyScrolling,
-        onScroll: this._onScroll,
-        style: {
-          padding: 0,
-          margin: 0
-        }
-      },
-      nodes
-    );
-  },
-
   _preventArrowKeyScrolling(e) {
     switch (e.key) {
       case "ArrowUp":
@@ -451,12 +386,12 @@ const Tree = module.exports = createClass({
       const itemStartPosition = index * this.props.itemHeight;
       const itemEndPosition = (index + 1) * this.props.itemHeight;
 
-      // Note that if the height of the viewport (this.state.height) is less than
-      // `this.props.itemHeight`, we could accidentally try and scroll both up and
-      // down in a futile attempt to make both the item's start and end positions
-      // visible. Instead, give priority to the start of the item by checking its
-      // position first, and then using an "else if", rather than a separate "if",
-      // for the end position.
+      // Note that if the height of the viewport (this.state.height) is less
+      // than `this.props.itemHeight`, we could accidentally try and scroll both
+      // up and down in a futile attempt to make both the item's start and end
+      // positions visible. Instead, give priority to the start of the item by
+      // checking its position first, and then using an "else if", rather than
+      // a separate "if", for the end position.
       if (this.state.scroll > itemStartPosition) {
         this.refs.tree.scrollTo(0, itemStartPosition);
       } else if ((this.state.scroll + this.state.height) < itemEndPosition) {
@@ -609,6 +544,74 @@ const Tree = module.exports = createClass({
 
     this._focus(parentIndex, parent);
   }),
+
+  render() {
+    const traversal = this._dfsFromRoots();
+
+    // Remove `NUMBER_OF_OFFSCREEN_ITEMS` from `begin` and add `2 *
+    // NUMBER_OF_OFFSCREEN_ITEMS` to `end` so that the top and bottom of the
+    // page are filled with the `NUMBER_OF_OFFSCREEN_ITEMS` previous and next
+    // items respectively, rather than whitespace if the item is not in full
+    // view.
+    const begin = Math.max(((this.state.scroll / this.props.itemHeight) | 0)
+                           - NUMBER_OF_OFFSCREEN_ITEMS, 0);
+    const end = begin + (2 * NUMBER_OF_OFFSCREEN_ITEMS)
+                      + ((this.state.height / this.props.itemHeight) | 0);
+    const toRender = traversal.slice(begin, end);
+
+    const nodes = [
+      dom.div({
+        key: "top-spacer",
+        style: {
+          padding: 0,
+          margin: 0,
+          height: begin * this.props.itemHeight + "px"
+        }
+      })
+    ];
+
+    for (let i = 0; i < toRender.length; i++) {
+      let { item, depth } = toRender[i];
+      nodes.push(TreeNode({
+        key: this.props.getKey(item),
+        index: begin + i,
+        item: item,
+        depth: depth,
+        renderItem: this.props.renderItem,
+        focused: this.props.focused === item,
+        expanded: this.props.isExpanded(item),
+        hasChildren: !!this.props.getChildren(item).length,
+        onExpand: this._onExpand,
+        onCollapse: this._onCollapse,
+        onFocus: () => this._focus(begin + i, item),
+      }));
+    }
+
+    nodes.push(dom.div({
+      key: "bottom-spacer",
+      style: {
+        padding: 0,
+        margin: 0,
+        height: (traversal.length - 1 - end) * this.props.itemHeight + "px"
+      }
+    }));
+
+    return dom.div(
+      {
+        className: "tree",
+        ref: "tree",
+        onKeyDown: this._onKeyDown,
+        onKeyPress: this._preventArrowKeyScrolling,
+        onKeyUp: this._preventArrowKeyScrolling,
+        onScroll: this._onScroll,
+        style: {
+          padding: 0,
+          margin: 0
+        }
+      },
+      nodes
+    );
+  }
 });
 
 /**
@@ -659,6 +662,22 @@ const TreeNode = createFactory(createClass({
     }
   },
 
+  _buttonAttrs: {
+    ref: "button",
+    style: {
+      opacity: 0,
+      width: "0 !important",
+      height: "0 !important",
+      padding: "0 !important",
+      outline: "none",
+      MozAppearance: "none",
+      // XXX: Despite resetting all of the above properties (and margin), the
+      // button still ends up with ~79px width, so we set a large negative
+      // margin to completely hide it.
+      MozMarginStart: "-1000px !important",
+    }
+  },
+
   render() {
     const arrow = ArrowExpander({
       item: this.props.item,
@@ -691,22 +710,6 @@ const TreeNode = createFactory(createClass({
       // unless there is an input/button child.
       dom.button(this._buttonAttrs)
     );
-  },
-
-  _buttonAttrs: {
-    ref: "button",
-    style: {
-      opacity: 0,
-      width: "0 !important",
-      height: "0 !important",
-      padding: "0 !important",
-      outline: "none",
-      MozAppearance: "none",
-      // XXX: Despite resetting all of the above properties (and margin), the
-      // button still ends up with ~79px width, so we set a large negative
-      // margin to completely hide it.
-      marginInlineStart: "-1000px !important",
-    }
   }
 }));
 

devtools/client/shared/components/tree/label-cell.js

@@ -6,7 +6,7 @@
 "use strict";
 
 // Make this available to both AMD and CJS environments
-define(function(require, exports, module) {
+define(function (require, exports, module) {
   // ReactJS
   const React = require("devtools/client/shared/vendor/react");
 
@@ -18,15 +18,15 @@ define(function(require, exports, module) {
    * Render the default cell used for toggle buttons
    */
   let LabelCell = React.createClass({
+    displayName: "LabelCell",
+
     // See the TreeView component for details related
     // to the 'member' object.
     propTypes: {
       member: PropTypes.object.isRequired
     },
 
-    displayName: "LabelCell",
-
-    render: function() {
+    render: function () {
       let member = this.props.member;
       let level = member.level || 0;
 

devtools/client/shared/components/tree/object-provider.js

@@ -6,14 +6,14 @@
 "use strict";
 
 // Make this available to both AMD and CJS environments
-define(function(require, exports, module) {
+define(function (require, exports, module) {
   /**
    * Implementation of the default data provider. A provider is state less
    * object responsible for transformation data (usually a state) to
    * a structure that can be directly consumed by the tree-view component.
    */
   let ObjectProvider = {
-    getChildren: function(object) {
+    getChildren: function (object) {
       let children = [];
 
       if (object instanceof ObjectProperty) {
@@ -38,7 +38,7 @@ define(function(require, exports, module) {
       return children;
     },
 
-    hasChildren: function(object) {
+    hasChildren: function (object) {
       if (object instanceof ObjectProperty) {
         object = object.value;
       }
@@ -58,22 +58,22 @@ define(function(require, exports, module) {
       return Object.keys(object).length > 0;
     },
 
-    getLabel: function(object) {
+    getLabel: function (object) {
       return (object instanceof ObjectProperty) ?
         object.name : null;
     },
 
-    getValue: function(object) {
+    getValue: function (object) {
       return (object instanceof ObjectProperty) ?
         object.value : null;
     },
 
-    getKey: function(object) {
+    getKey: function (object) {
       return (object instanceof ObjectProperty) ?
         object.name : null;
     },
 
-    getType: function(object) {
+    getType: function (object) {
       return (object instanceof ObjectProperty) ?
         typeof object.value : typeof object;
     }

devtools/client/shared/components/tree/tree-cell.js

@@ -6,7 +6,7 @@
 "use strict";
 
 // Make this available to both AMD and CJS environments
-define(function(require, exports, module) {
+define(function (require, exports, module) {
   const React = require("devtools/client/shared/vendor/react");
 
   // Shortcuts
@@ -18,6 +18,8 @@ define(function(require, exports, module) {
    * using <td> element (the row is <tr> and the entire tree is <table>).
    */
   let TreeCell = React.createClass({
+    displayName: "TreeCell",
+
     // See TreeView component for detailed property explanation.
     propTypes: {
       value: PropTypes.any,
@@ -27,18 +29,16 @@ define(function(require, exports, module) {
       renderValue: PropTypes.func.isRequired
     },
 
-    displayName: "TreeCell",
-
     /**
      * Optimize cell rendering. Rerender cell content only if
      * the value or expanded state changes.
      */
-    shouldComponentUpdate: function(nextProps) {
+    shouldComponentUpdate: function (nextProps) {
       return (this.props.value != nextProps.value) ||
         (this.props.member.open != nextProps.member.open);
     },
 
-    getCellClass: function(object, id) {
+    getCellClass: function (object, id) {
       let decorator = this.props.decorator;
       if (!decorator || !decorator.getCellClass) {
         return [];
@@ -57,7 +57,7 @@ define(function(require, exports, module) {
       return classNames;
     },
 
-    render: function() {
+    render: function () {
       let member = this.props.member;
       let type = member.type || "";
       let id = this.props.id;

devtools/client/shared/components/tree/tree-header.js

@@ -6,7 +6,7 @@
 "use strict";
 
 // Make this available to both AMD and CJS environments
-define(function(require, exports, module) {
+define(function (require, exports, module) {
   // ReactJS
   const React = require("devtools/client/shared/vendor/react");
 
@@ -19,6 +19,8 @@ define(function(require, exports, module) {
    * It's based on <thead> element.
    */
   let TreeHeader = React.createClass({
+    displayName: "TreeHeader",
+
     // See also TreeView component for detailed info about properties.
     propTypes: {
       // Custom tree decorator
@@ -29,9 +31,7 @@ define(function(require, exports, module) {
       columns: PropTypes.array
     },
 
-    displayName: "TreeHeader",
-
-    getDefaultProps: function() {
+    getDefaultProps: function () {
       return {
         columns: [{
           id: "default"
@@ -39,7 +39,7 @@ define(function(require, exports, module) {
       };
     },
 
-    getHeaderClass: function(colId) {
+    getHeaderClass: function (colId) {
       let decorator = this.props.decorator;
       if (!decorator || !decorator.getHeaderClass) {
         return [];
@@ -58,7 +58,7 @@ define(function(require, exports, module) {
       return classNames;
     },
 
-    render: function() {
+    render: function () {
       let cells = [];
       let visible = this.props.header;
 

devtools/client/shared/components/tree/tree-row.js

@@ -6,7 +6,7 @@
 "use strict";
 
 // Make this available to both AMD and CJS environments
-define(function(require, exports, module) {
+define(function (require, exports, module) {
   // ReactJS
   const React = require("devtools/client/shared/vendor/react");
   const ReactDOM = require("devtools/client/shared/vendor/react-dom");
@@ -24,6 +24,8 @@ define(function(require, exports, module) {
    * using <tr> element (the entire tree is one big <table>).
    */
   let TreeRow = React.createClass({
+    displayName: "TreeRow",
+
     // See TreeView component for more details about the props and
     // the 'member' object.
     propTypes: {
@@ -47,23 +49,6 @@ define(function(require, exports, module) {
       onClick: PropTypes.func.isRequired
     },
 
-    displayName: "TreeRow",
-
-    /**
-     * Optimize row rendering. If props are the same do not render.
-     * This makes the rendering a lot faster!
-     */
-    shouldComponentUpdate: function(nextProps) {
-      let props = ["name", "open", "value", "loading"];
-      for (let p in props) {
-        if (nextProps.member[props[p]] != this.props.member[props[p]]) {
-          return true;
-        }
-      }
-
-      return false;
-    },
-
     componentWillReceiveProps(nextProps) {
       // I don't like accessing the underlying DOM elements directly,
       // but this optimization makes the filtering so damn fast!
@@ -77,7 +62,22 @@ define(function(require, exports, module) {
       }
     },
 
-    getRowClass: function(object) {
+    /**
+     * Optimize row rendering. If props are the same do not render.
+     * This makes the rendering a lot faster!
+     */
+    shouldComponentUpdate: function (nextProps) {
+      let props = ["name", "open", "value", "loading"];
+      for (let p in props) {
+        if (nextProps.member[props[p]] != this.props.member[props[p]]) {
+          return true;
+        }
+      }
+
+      return false;
+    },
+
+    getRowClass: function (object) {
       let decorator = this.props.decorator;
       if (!decorator || !decorator.getRowClass) {
         return [];
@@ -96,7 +96,7 @@ define(function(require, exports, module) {
       return classNames;
     },
 
-    render: function() {
+    render: function () {
       let member = this.props.member;
       let decorator = this.props.decorator;
 

devtools/client/shared/components/tree/tree-view.js

@@ -6,7 +6,7 @@
 "use strict";
 
 // Make this available to both AMD and CJS environments
-define(function(require, exports, module) {
+define(function (require, exports, module) {
   // ReactJS
   const React = require("devtools/client/shared/vendor/react");
 
@@ -54,6 +54,8 @@ define(function(require, exports, module) {
    * }
    */
   let TreeView = React.createClass({
+    displayName: "TreeView",
+
     // The only required property (not set by default) is the input data
     // object that is used to puputate the tree.
     propTypes: {
@@ -103,9 +105,7 @@ define(function(require, exports, module) {
       }))
     },
 
-    displayName: "TreeView",
-
-    getDefaultProps: function() {
+    getDefaultProps: function () {
       return {
         object: null,
         renderRow: null,
@@ -115,7 +115,7 @@ define(function(require, exports, module) {
       };
     },
 
-    getInitialState: function() {
+    getInitialState: function () {
       return {
         expandedNodes: this.props.expandedNodes,
         columns: ensureDefaultColumn(this.props.columns)
@@ -124,7 +124,7 @@ define(function(require, exports, module) {
 
     // Node expand/collapse
 
-    toggle: function(nodePath) {
+    toggle: function (nodePath) {
       let nodes = this.state.expandedNodes;
       if (this.isExpanded(nodePath)) {
         nodes.delete(nodePath);
@@ -138,13 +138,13 @@ define(function(require, exports, module) {
       }));
     },
 
-    isExpanded: function(nodePath) {
+    isExpanded: function (nodePath) {
       return this.state.expandedNodes.has(nodePath);
     },
 
     // Event Handlers
 
-    onClickRow: function(nodePath, event) {
+    onClickRow: function (nodePath, event) {
       event.stopPropagation();
       this.toggle(nodePath);
     },
@@ -155,12 +155,12 @@ define(function(require, exports, module) {
      * Filter out nodes that don't correspond to the current filter.
      * @return {Boolean} true if the node should be visible otherwise false.
      */
-    onFilter: function(object) {
+    onFilter: function (object) {
       let onFilter = this.props.onFilter;
       return onFilter ? onFilter(object) : true;
     },
 
-    onSort: function(parent, children) {
+    onSort: function (parent, children) {
       let onSort = this.props.onSort;
       return onSort ? onSort(parent, children) : children;
     },
@@ -171,7 +171,7 @@ define(function(require, exports, module) {
      * Return children node objects (so called 'members') for given
      * parent object.
      */
-    getMembers: function(parent, level, path) {
+    getMembers: function (parent, level, path) {
       // Strings don't have children. Note that 'long' strings are using
       // the expander icon (+/-) to display the entire original value,
       // but there are no child items.
@@ -235,7 +235,7 @@ define(function(require, exports, module) {
     /**
      * Render tree rows/nodes.
      */
-    renderRows: function(parent, level = 0, path = "") {
+    renderRows: function (parent, level = 0, path = "") {
       let rows = [];
       let decorator = this.props.decorator;
       let renderRow = this.props.renderRow || TreeRow;
@@ -285,7 +285,7 @@ define(function(require, exports, module) {
       return rows;
     },
 
-    render: function() {
+    render: function () {
       let root = this.props.object;
       let classNames = ["treeTable"];
 

devtools/client/shared/redux/create-store.js

@@ -22,7 +22,7 @@ const { history } = require("./middleware/history");
  *                   used in tests.
  *        - middleware: array of middleware to be included in the redux store
  */
-module.exports = (opts={}) => {
+module.exports = (opts = {}) => {
   const middleware = [
     task,
     thunk,
@@ -48,4 +48,4 @@ module.exports = (opts={}) => {
   }
 
   return applyMiddleware(...middleware)(createStore);
-}
+};

devtools/client/shared/redux/middleware/history.js

@@ -10,11 +10,11 @@ const DevToolsUtils = require("devtools/shared/DevToolsUtils");
  * in logging object. Should only be used for tests, as it collects all
  * action information, which will cause memory bloat.
  */
-exports.history = (log=[]) => ({ dispatch, getState }) => {
+exports.history = (log = []) => ({ dispatch, getState }) => {
   if (!DevToolsUtils.testing) {
-    console.warn(`Using history middleware stores all actions in state for testing\
-                  and devtools is not currently running in test mode. Be sure this is\
-                  intentional.`);
+    console.warn("Using history middleware stores all actions in state for " +
+                 "testing and devtools is not currently running in test " +
+                 "mode. Be sure this is intentional.");
   }
   return next => action => {
     log.push(action);

devtools/client/shared/redux/middleware/promise.js

@@ -6,11 +6,11 @@
 const uuidgen = require("sdk/util/uuid").uuid;
 const promise = require("promise");
 const {
-  entries, toObject, reportException, executeSoon
+  entries, toObject, executeSoon
 } = require("devtools/shared/DevToolsUtils");
 const PROMISE = exports.PROMISE = "@@dispatch/promise";
 
-function promiseMiddleware ({ dispatch, getState }) {
+function promiseMiddleware({ dispatch, getState }) {
   return next => action => {
     if (!(PROMISE in action)) {
       return next(action);

devtools/client/shared/redux/middleware/task.js

@@ -4,18 +4,18 @@
 "use strict";
 
 const { Task } = require("resource://gre/modules/Task.jsm");
-const { executeSoon, isGenerator, isPromise, reportException } = require("devtools/shared/DevToolsUtils");
+const { executeSoon, isGenerator, reportException } = require("devtools/shared/DevToolsUtils");
 const ERROR_TYPE = exports.ERROR_TYPE = "@@redux/middleware/task#error";
 
 /**
  * A middleware that allows generator thunks (functions) and promise
- * to be dispatched. If it's a generator, it is called with `dispatch` and `getState`,
- * allowing the action to create multiple actions (most likely
+ * to be dispatched. If it's a generator, it is called with `dispatch`
+ * and `getState`, allowing the action to create multiple actions (most likely
  * asynchronously) and yield on each. If called with a promise, calls `dispatch`
  * on the results.
  */
 
-function task ({ dispatch, getState }) {
+function task({ dispatch, getState }) {
   return next => action => {
     if (isGenerator(action)) {
       return Task.spawn(action.bind(null, dispatch, getState))
@@ -32,7 +32,7 @@ function task ({ dispatch, getState }) {
   };
 }
 
-function handleError (dispatch, error) {
+function handleError(dispatch, error) {
   executeSoon(() => {
     reportException(ERROR_TYPE, error);
     dispatch({ type: ERROR_TYPE, error });

devtools/client/shared/redux/middleware/test/head.js

@@ -9,14 +9,14 @@ var promise = require("promise");
 
 DevToolsUtils.testing = true;
 
-function waitUntilState (store, predicate) {
+function waitUntilState(store, predicate) {
   let deferred = promise.defer();
   let unsubscribe = store.subscribe(check);
 
-  function check () {
+  function check() {
     if (predicate(store.getState())) {
       unsubscribe();
-      deferred.resolve()
+      deferred.resolve();
     }
   }
 

devtools/client/shared/redux/middleware/test/test_middleware-task-01.js

@@ -14,7 +14,7 @@ function run_test() {
   run_next_test();
 }
 
-add_task(function *() {
+add_task(function* () {
   let store = applyMiddleware(task)(createStore)(reducer);
 
   store.dispatch(fetch1("generator"));
@@ -26,8 +26,8 @@ add_task(function *() {
   equal(store.getState()[1].data, "sync", "task middleware sync dispatches an action via sync");
 });
 
-function fetch1 (data) {
-  return function *(dispatch, getState) {
+function fetch1(data) {
+  return function* (dispatch, getState) {
     equal(getState().length, 0, "`getState` is accessible in a generator action");
     let moreData = yield new Promise(resolve => resolve(data));
     // Ensure it handles more than one yield
@@ -36,14 +36,14 @@ function fetch1 (data) {
   };
 }
 
-function fetch2 (data) {
+function fetch2(data) {
   return {
     type: "fetch2",
     data
-  }
+  };
 }
 
-function reducer (state=[], action) {
+function reducer(state = [], action) {
   do_print("Action called: " + action.type);
   if (["fetch1", "fetch2"].includes(action.type)) {
     state.push(action);

devtools/client/shared/redux/middleware/test/test_middleware-task-02.js

@@ -14,7 +14,7 @@ function run_test() {
   run_next_test();
 }
 
-add_task(function *() {
+add_task(function* () {
   let store = applyMiddleware(task)(createStore)(reducer);
 
   store.dispatch(comboAction());
@@ -28,21 +28,21 @@ add_task(function *() {
   equal(store.getState()[3].data.async, "async", "Return values of dispatched async values are correct");
 });
 
-function comboAction () {
-  return function *(dispatch, getState) {
+function comboAction() {
+  return function* (dispatch, getState) {
     let data = {};
     data.async = yield dispatch(fetchAsync("async"));
     data.sync = yield dispatch(fetchSync("sync"));
     dispatch({ type: "fetch-done", data });
-  }
+  };
 }
 
-function fetchSync (data) {
+function fetchSync(data) {
   return { type: "fetchSync", data };
 }
 
-function fetchAsync (data) {
-  return function *(dispatch) {
+function fetchAsync(data) {
+  return function* (dispatch) {
     dispatch({ type: "fetchAsync-start" });
     let val = yield new Promise(resolve => resolve(data));
     dispatch({ type: "fetchAsync-end" });
@@ -50,7 +50,7 @@ function fetchAsync (data) {
   };
 }
 
-function reducer (state=[], action) {
+function reducer(state = [], action) {
   do_print("Action called: " + action.type);
   if (/fetch/.test(action.type)) {
     state.push(action);

devtools/client/shared/redux/middleware/test/test_middleware-task-03.js

@@ -13,7 +13,7 @@ function run_test() {
   run_next_test();
 }
 
-add_task(function *() {
+add_task(function* () {
   let store = applyMiddleware(task)(createStore)(reducer);
 
   store.dispatch(generatorError());
@@ -22,13 +22,13 @@ add_task(function *() {
   equal(store.getState()[0].error, "task-middleware-error-generator", "generator errors dispatch ERROR_TYPE actions with error");
 });
 
-function generatorError () {
-  return function *(dispatch, getState) {
+function generatorError() {
+  return function* (dispatch, getState) {
     throw "task-middleware-error-generator";
   };
 }
 
-function reducer (state=[], action) {
+function reducer(state = [], action) {
   do_print("Action called: " + action.type);
   if (action.type === ERROR_TYPE) {
     state.push(action);

devtools/client/shared/redux/middleware/thunk.js

@@ -14,6 +14,6 @@ function thunk({ dispatch, getState }) {
     return (typeof action === "function")
       ? action(dispatch, getState)
       : next(action);
-  }
+  };
 }
 exports.thunk = thunk;

devtools/client/shared/redux/middleware/wait-service.js

@@ -40,8 +40,7 @@ function waitUntilService({ dispatch, getState }) {
     for (let request of pending) {
       if (request.predicate(action)) {
         readyRequests.push(request);
-      }
-      else {
+      } else {
         stillPending.push(request);
       }
     }
@@ -55,12 +54,11 @@ function waitUntilService({ dispatch, getState }) {
   return next => action => {
     if (action.type === NAME) {
       pending.push(action);
+      return null;
     }
-    else {
-      var result = next(action);
+    let result = next(action);
     checkPending(action);
     return result;
-    }
-  }
+  };
 }
 exports.waitUntilService = waitUntilService;

devtools/client/shared/redux/non-react-subscriber.js

@@ -90,7 +90,7 @@ function makeStateBroadcaster(stillAliveFunc) {
           enqueuedChanges.forEach(([name, payload]) => {
             if (listeners[name]) {
               listeners[name].forEach(listener => {
-                listener(payload)
+                listener(payload);
               });
             }
           });
@@ -115,7 +115,7 @@ function enhanceStoreWithBroadcaster(store, broadcaster) {
   store.onChange = broadcaster.onChange;
   store.offChange = broadcaster.offChange;
   return store;
-};
+}
 
 /**
  * Function that takes a hash of reducers, like `combineReducers`, and
@@ -132,17 +132,20 @@ function combineBroadcastingReducers(reducers, emitChange) {
   // Wrap each reducer with a wrapper function that calls
   // the reducer with a third argument, an `emitChange` function.
   // Use this rather than a new custom top level reducer that would ultimately
-  // have to replicate redux's `combineReducers` so we only pass in correct state,
-  // the error checking, and other edge cases.
+  // have to replicate redux's `combineReducers` so we only pass in correct
+  // state, the error checking, and other edge cases.
   function wrapReduce(newReducers, key) {
-    newReducers[key] = (state, action) => reducers[key](state, action, emitChange);
+    newReducers[key] = (state, action) => {
+      return reducers[key](state, action, emitChange);
+    };
     return newReducers;
   }
 
-  return combineReducers(Object.keys(reducers).reduce(wrapReduce, Object.create(null)));
+  return combineReducers(
+    Object.keys(reducers).reduce(wrapReduce, Object.create(null))
+  );
 }
 
-
 module.exports = {
   makeStateBroadcaster,
   enhanceStoreWithBroadcaster,