Bug 1258353 - Refactor devtools react components. r=janx

devtools/.eslintrc

@@ -42,7 +42,7 @@
     "react/prefer-es6-class": [1, "never"],
     // Disabled temporarily until errors are fixed.
     "react/prop-types": 0,
-    "react/sort-comp": [1, {
+    "react/sort-comp": [2, {
       order: [
         "lifecycle",
         "everything-else",

devtools/client/dom/content/components/dom-tree.js

@@ -26,6 +26,8 @@ const PropTypes = React.PropTypes;
  * Renders DOM panel tree.
  */
 var DomTree = React.createClass({
+  displayName: "DomTree",
+
   propTypes: {
     object: PropTypes.any,
     filter: PropTypes.string,
@@ -33,8 +35,6 @@ var DomTree = React.createClass({
     grips: PropTypes.object,
   },
 
-  displayName: "DomTree",
-
   /**
    * Filter DOM properties. Return true if the object
    * should be visible in the tree.

devtools/client/dom/content/components/main-frame.js

@@ -22,14 +22,14 @@ const PropTypes = React.PropTypes;
  * from two main parts: toolbar and tree.
  */
 var MainFrame = React.createClass({
+  displayName: "MainFrame",
+
   propTypes: {
     object: PropTypes.any,
     filter: PropTypes.string,
     dispatch: PropTypes.func.isRequired,
   },
 
-  displayName: "MainFrame",
-
   /**
    * Render DOM panel content
    */

devtools/client/dom/content/components/main-toolbar.js

@@ -28,13 +28,13 @@ const PropTypes = React.PropTypes;
  * within the 'Headers' panel.
  */
 var MainToolbar = React.createClass({
+  displayName: "MainToolbar",
+
   propTypes: {
     object: PropTypes.any.isRequired,
     dispatch: PropTypes.func.isRequired,
   },
 
-  displayName: "MainToolbar",
-
   onRefresh: function () {
     this.props.dispatch(fetchProperties(this.props.object));
   },

devtools/client/dom/content/components/search-box.js

@@ -21,12 +21,12 @@ const PropTypes = React.PropTypes;
  * top right corner of the application.
  */
 var SearchBox = React.createClass({
+  displayName: "SearchBox",
+
   propTypes: {
     onSearch: PropTypes.func,
   },
 
-  displayName: "SearchBox",
-
   componentWillUnmount: function () {
     // Clean up an existing timeout.
     if (this.searchTimeout) {

devtools/client/jsonview/components/headers-panel.js

@@ -19,13 +19,13 @@ define(function (require, exports, module) {
    * s responsible for rendering its content.
    */
   let HeadersPanel = createClass({
+    displayName: "HeadersPanel",
+
     propTypes: {
       actions: PropTypes.object,
       data: PropTypes.object,
     },
 
-    displayName: "HeadersPanel",
-
     getInitialState: function () {
       return {
         data: {}
@@ -51,12 +51,12 @@ define(function (require, exports, module) {
    * within the 'Headers' panel.
    */
   let HeadersToolbar = createFactory(createClass({
+    displayName: "HeadersToolbar",
+
     propTypes: {
       actions: PropTypes.object,
     },
 
-    displayName: "HeadersToolbar",
-
     // Commands
 
     onCopy: function (event) {

devtools/client/jsonview/components/headers.js

@@ -17,12 +17,12 @@ define(function (require, exports, module) {
    * received or response headers.
    */
   let Headers = createClass({
+    displayName: "Headers",
+
     propTypes: {
       data: PropTypes.object,
     },
 
-    displayName: "Headers",
-
     getInitialState: function () {
       return {};
     },
@@ -58,6 +58,8 @@ define(function (require, exports, module) {
    * name + value pairs.
    */
   let HeaderList = createFactory(createClass({
+    displayName: "HeaderList",
+
     propTypes: {
       headers: PropTypes.arrayOf(PropTypes.shape({
         name: PropTypes.string,
@@ -65,8 +67,6 @@ define(function (require, exports, module) {
       }))
     },
 
-    displayName: "HeaderList",
-
     getInitialState: function () {
       return {
         headers: []

devtools/client/jsonview/components/json-panel.js

@@ -24,6 +24,8 @@ define(function (require, exports, module) {
    * inspection of JSON structure.
    */
   let JsonPanel = createClass({
+    displayName: "JsonPanel",
+
     propTypes: {
       data: PropTypes.oneOfType([
         PropTypes.string,
@@ -35,8 +37,6 @@ define(function (require, exports, module) {
       actions: PropTypes.object,
     },
 
-    displayName: "JsonPanel",
-
     getInitialState: function () {
       return {};
     },
@@ -154,12 +154,12 @@ define(function (require, exports, module) {
    * This template represents a toolbar within the 'JSON' panel.
    */
   let JsonToolbar = createFactory(createClass({
+    displayName: "JsonToolbar",
+
     propTypes: {
       actions: PropTypes.object,
     },
 
-    displayName: "JsonToolbar",
-
     // Commands
 
     onSave: function (event) {

devtools/client/jsonview/components/main-tabbed-area.js

@@ -19,6 +19,8 @@ define(function (require, exports, module) {
    * responsible for rendering the basic tab layout.
    */
   let MainTabbedArea = createClass({
+    displayName: "MainTabbedArea",
+
     propTypes: {
       jsonText: PropTypes.string,
       tabActive: PropTypes.number,
@@ -32,8 +34,6 @@ define(function (require, exports, module) {
       ])
     },
 
-    displayName: "MainTabbedArea",
-
     getInitialState: function () {
       return {
         json: {},

devtools/client/jsonview/components/reps/tabs.js

@@ -31,6 +31,8 @@ define(function (require, exports, module) {
    * <div>
    */
   let Tabs = React.createClass({
+    displayName: "Tabs",
+
     propTypes: {
       className: React.PropTypes.oneOfType([
         React.PropTypes.array,
@@ -47,8 +49,6 @@ define(function (require, exports, module) {
       ]).isRequired
     },
 
-    displayName: "Tabs",
-
     getDefaultProps: function () {
       return {
         tabActive: 1
@@ -168,6 +168,8 @@ define(function (require, exports, module) {
    * Renders simple tab 'panel'.
    */
   let Panel = React.createClass({
+    displayName: "Panel",
+
     propTypes: {
       title: React.PropTypes.string.isRequired,
       children: React.PropTypes.oneOfType([
@@ -176,8 +178,6 @@ define(function (require, exports, module) {
       ]).isRequired
     },
 
-    displayName: "Panel",
-
     render: function () {
       return DOM.div({},
         this.props.children

devtools/client/jsonview/components/reps/toolbar.js

@@ -14,6 +14,8 @@ define(function (require, exports, module) {
    * Renders a simple toolbar.
    */
   let Toolbar = React.createClass({
+    displayName: "Toolbar",
+
     propTypes: {
       children: React.PropTypes.oneOfType([
         React.PropTypes.array,
@@ -21,8 +23,6 @@ define(function (require, exports, module) {
       ])
     },
 
-    displayName: "Toolbar",
-
     render: function () {
       return (
         DOM.div({className: "toolbar"},
@@ -36,14 +36,14 @@ define(function (require, exports, module) {
    * Renders a simple toolbar button.
    */
   let ToolbarButton = React.createClass({
+    displayName: "ToolbarButton",
+
     propTypes: {
       active: React.PropTypes.bool,
       disabled: React.PropTypes.bool,
       children: React.PropTypes.string,
     },
 
-    displayName: "ToolbarButton",
-
     render: function () {
       let props = Object.assign({className: "btn"}, this.props);
       return (

devtools/client/jsonview/components/search-box.js

@@ -19,12 +19,12 @@ define(function (require, exports, module) {
    * top right corner of the application.
    */
   let SearchBox = createClass({
+    displayName: "SearchBox",
+
     propTypes: {
       actions: PropTypes.object,
     },
 
-    displayName: "SearchBox",
-
     onSearch: function (event) {
       let searchBox = event.target;
       let win = searchBox.ownerDocument.defaultView;

devtools/client/jsonview/components/text-panel.js

@@ -17,13 +17,13 @@ define(function (require, exports, module) {
    * JSON as a text received from the server.
    */
   let TextPanel = createClass({
+    displayName: "TextPanel",
+
     propTypes: {
       actions: PropTypes.object,
       data: PropTypes.string
     },
 
-    displayName: "TextPanel",
-
     getInitialState: function () {
       return {};
     },
@@ -47,12 +47,12 @@ define(function (require, exports, module) {
    * 'Raw Data' panel.
    */
   let TextToolbar = createFactory(createClass({
+    displayName: "TextToolbar",
+
     propTypes: {
       actions: PropTypes.object,
     },
 
-    displayName: "TextToolbar",
-
     // Commands
 
     onPrettify: function (event) {

devtools/client/responsive.html/app.js

@@ -28,6 +28,8 @@ const { updateDeviceList } = require("./devices");
 const Types = require("./types");
 
 let App = createClass({
+  displayName: "App",
+
   propTypes: {
     devices: PropTypes.shape(Types.devices).isRequired,
     location: Types.location.isRequired,
@@ -36,8 +38,6 @@ let App = createClass({
     viewports: PropTypes.arrayOf(PropTypes.shape(Types.viewport)).isRequired,
   },
 
-  displayName: "App",
-
   onBrowserMounted() {
     window.postMessage({ type: "browser-mounted" }, "*");
   },

devtools/client/responsive.html/components/browser.js

@@ -22,14 +22,14 @@ module.exports = createClass({
    * Any changes in props will cause the <iframe> to be removed and added again,
    * throwing away the current state of the page.
    */
+  displayName: "Browser",
+
   propTypes: {
     location: Types.location.isRequired,
     onBrowserMounted: PropTypes.func.isRequired,
     onContentResize: PropTypes.func.isRequired,
   },
 
-  displayName: "Browser",
-
   mixins: [ addons.PureRenderMixin ],
 
   /**

devtools/client/responsive.html/components/device-modal.js

@@ -10,6 +10,8 @@ const { getStr } = require("../utils/l10n");
 const Types = require("../types");
 
 module.exports = createClass({
+  displayName: "DeviceModal",
+
   propTypes: {
     devices: PropTypes.shape(Types.devices).isRequired,
     onDeviceListUpdate: PropTypes.func.isRequired,
@@ -17,8 +19,6 @@ module.exports = createClass({
     onUpdateDeviceModalOpen: PropTypes.func.isRequired,
   },
 
-  displayName: "DeviceModal",
-
   mixins: [ addons.PureRenderMixin ],
 
   getInitialState() {

devtools/client/responsive.html/components/device-selector.js

@@ -12,6 +12,8 @@ const Types = require("../types");
 const OPEN_DEVICE_MODAL_VALUE = "OPEN_DEVICE_MODAL";
 
 module.exports = createClass({
+  displayName: "DeviceSelector",
+
   propTypes: {
     devices: PropTypes.shape(Types.devices).isRequired,
     selectedDevice: PropTypes.string.isRequired,
@@ -20,8 +22,6 @@ module.exports = createClass({
     onUpdateDeviceModalOpen: PropTypes.func.isRequired,
   },
 
-  displayName: "DeviceSelector",
-
   mixins: [ addons.PureRenderMixin ],
 
   onSelectChange({ target }) {

devtools/client/responsive.html/components/global-toolbar.js

@@ -10,6 +10,8 @@ const { DOM: dom, createClass, PropTypes, addons } =
 const Types = require("../types");
 
 module.exports = createClass({
+  displayName: "GlobalToolbar",
+
   propTypes: {
     screenshot: PropTypes.shape(Types.screenshot).isRequired,
     touchSimulation: PropTypes.shape(Types.touchSimulation).isRequired,
@@ -18,8 +20,6 @@ module.exports = createClass({
     onUpdateTouchSimulationEnabled: PropTypes.func.isRequired,
   },
 
-  displayName: "GlobalToolbar",
-
   mixins: [ addons.PureRenderMixin ],
 
   render() {

devtools/client/responsive.html/components/resizable-viewport.js

@@ -18,6 +18,8 @@ const VIEWPORT_MIN_WIDTH = Constants.MIN_VIEWPORT_DIMENSION;
 const VIEWPORT_MIN_HEIGHT = Constants.MIN_VIEWPORT_DIMENSION;
 
 module.exports = createClass({
+  displayName: "ResizableViewport",
+
   propTypes: {
     devices: PropTypes.shape(Types.devices).isRequired,
     location: Types.location.isRequired,
@@ -31,8 +33,6 @@ module.exports = createClass({
     onUpdateDeviceModalOpen: PropTypes.func.isRequired,
   },
 
-  displayName: "ResizableViewport",
-
   getInitialState() {
     return {
       isResizing: false,

devtools/client/responsive.html/components/viewport-dimension.js

@@ -11,14 +11,14 @@ const Constants = require("../constants");
 const Types = require("../types");
 
 module.exports = createClass({
+  displayName: "ViewportDimension",
+
   propTypes: {
     viewport: PropTypes.shape(Types.viewport).isRequired,
     onChangeViewportDevice: PropTypes.func.isRequired,
     onResizeViewport: PropTypes.func.isRequired,
   },
 
-  displayName: "ViewportDimension",
-
   getInitialState() {
     let { width, height } = this.props.viewport;
 

devtools/client/responsive.html/components/viewport-toolbar.js

@@ -11,6 +11,8 @@ const Types = require("../types");
 const DeviceSelector = createFactory(require("./device-selector"));
 
 module.exports = createClass({
+  displayName: "ViewportToolbar",
+
   propTypes: {
     devices: PropTypes.shape(Types.devices).isRequired,
     selectedDevice: PropTypes.string.isRequired,
@@ -20,8 +22,6 @@ module.exports = createClass({
     onUpdateDeviceModalOpen: PropTypes.func.isRequired,
   },
 
-  displayName: "ViewportToolbar",
-
   mixins: [ addons.PureRenderMixin ],
 
   render() {

devtools/client/responsive.html/components/viewport.js

@@ -12,6 +12,8 @@ const ResizableViewport = createFactory(require("./resizable-viewport"));
 const ViewportDimension = createFactory(require("./viewport-dimension"));
 
 module.exports = createClass({
+  displayName: "Viewport",
+
   propTypes: {
     devices: PropTypes.shape(Types.devices).isRequired,
     location: Types.location.isRequired,
@@ -25,8 +27,6 @@ module.exports = createClass({
     onUpdateDeviceModalOpen: PropTypes.func.isRequired,
   },
 
-  displayName: "Viewport",
-
   onChangeViewportDevice(device) {
     let {
       viewport,

devtools/client/responsive.html/components/viewports.js

@@ -11,6 +11,8 @@ const Types = require("../types");
 const Viewport = createFactory(require("./viewport"));
 
 module.exports = createClass({
+  displayName: "Viewports",
+
   propTypes: {
     devices: PropTypes.shape(Types.devices).isRequired,
     location: Types.location.isRequired,
@@ -24,8 +26,6 @@ module.exports = createClass({
     onUpdateDeviceModalOpen: PropTypes.func.isRequired,
   },
 
-  displayName: "Viewports",
-
   render() {
     let {
       devices,