Bug 1264063 - 1 - Disable prop-types eslint rule and fix sort-comp errors; r=ochameau
authorPatrick Brosset <pbrosset@mozilla.com>
Wed, 13 Apr 2016 10:24:48 +0200
changeset 316831 bba6594effdccba983c33cad79471ffca76c6938
parent 316830 64cba8d398a38470ece1fe50be8210fff82fc272
child 316832 ac23c193d06abf24cec53133fe7220450801ed85
push id9480
push userjlund@mozilla.com
push dateMon, 25 Apr 2016 17:12:58 +0000
treeherdermozilla-aurora@0d6a91c76a9e [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersochameau
bugs1264063
milestone48.0a1
Bug 1264063 - 1 - Disable prop-types eslint rule and fix sort-comp errors; r=ochameau MozReview-Commit-ID: 26NMWUWiKdi
devtools/.eslintrc
devtools/client/aboutdebugging/components/aboutdebugging.js
devtools/client/aboutdebugging/components/addon-target.js
devtools/client/aboutdebugging/components/addons-controls.js
devtools/client/aboutdebugging/components/addons-tab.js
devtools/client/aboutdebugging/components/service-worker-target.js
devtools/client/aboutdebugging/components/tab-menu-entry.js
devtools/client/aboutdebugging/components/worker-target.js
devtools/client/aboutdebugging/components/workers-tab.js
devtools/client/responsive.html/app.js
devtools/client/responsive.html/components/browser.js
devtools/client/responsive.html/components/device-selector.js
devtools/client/responsive.html/components/global-toolbar.js
devtools/client/responsive.html/components/resizable-viewport.js
devtools/client/responsive.html/components/viewport-dimension.js
devtools/client/responsive.html/components/viewport-toolbar.js
devtools/client/responsive.html/components/viewport.js
devtools/client/responsive.html/components/viewports.js
--- a/devtools/.eslintrc
+++ b/devtools/.eslintrc
@@ -34,25 +34,26 @@
     "mozilla/mark-test-function-used": 1,
     "mozilla/no-aArgs": 1,
     "mozilla/no-cpows-in-tests": 1,
     // See bug 1224289.
     "mozilla/reject-importGlobalProperties": 1,
     "mozilla/var-only-at-top-level": 1,
 
     // Rules from the React plugin
-    "react/display-name": 1,
-    "react/no-danger": 1,
-    "react/no-did-mount-set-state": 1,
-    "react/no-did-update-set-state": 1,
-    "react/no-direct-mutation-state": 1,
-    "react/no-unknown-property": 1,
+    "react/display-name": 2,
+    "react/no-danger": 2,
+    "react/no-did-mount-set-state": 2,
+    "react/no-did-update-set-state": 2,
+    "react/no-direct-mutation-state": 2,
+    "react/no-unknown-property": 2,
     "react/prefer-es6-class": [1, "never"],
-    "react/prop-types": 1,
-    "react/sort-comp": [1, {
+    // Disabled temporarily until errors are fixed.
+    "react/prop-types": 0,
+    "react/sort-comp": [2, {
       order: [
         "propTypes",
         "everything-else",
         "render"
       ]
     }],
 
     // Disallow using variables outside the blocks they are defined (especially
--- a/devtools/client/aboutdebugging/components/aboutdebugging.js
+++ b/devtools/client/aboutdebugging/components/aboutdebugging.js
@@ -51,40 +51,40 @@ module.exports = createClass({
   },
 
   componentWillUnmount() {
     window.removeEventListener("hashchange", this.onHashChange);
     this.props.telemetry.toolClosed("aboutdebugging");
     this.props.telemetry.destroy();
   },
 
-  render() {
-    let { client } = this.props;
-    let { selectedTabId } = this.state;
-    let selectTab = this.selectTab;
-
-    let selectedTab = tabs.find(t => t.id == selectedTabId);
-
-    return dom.div({ className: "app" },
-      TabMenu({ tabs, selectedTabId, selectTab }),
-      dom.div({ className: "main-content" },
-        selectedTab.component({ client })
-      )
-    );
-  },
-
   onHashChange() {
     let tabId = window.location.hash.substr(1);
 
     let isValid = tabs.some(t => t.id == tabId);
     if (isValid) {
       this.setState({ selectedTabId: tabId });
     } else {
       // If the current hash matches no valid category, navigate to the default
       // tab.
       this.selectTab(defaultTabId);
     }
   },
 
   selectTab(tabId) {
     window.location.hash = "#" + tabId;
+  },
+
+  render() {
+    let { client } = this.props;
+    let { selectedTabId } = this.state;
+    let selectTab = this.selectTab;
+
+    let selectedTab = tabs.find(t => t.id == selectedTabId);
+
+    return dom.div({ className: "app" },
+      TabMenu({ tabs, selectedTabId, selectTab }),
+      dom.div({ className: "main-content" },
+        selectedTab.component({ client })
+      )
+    );
   }
 });
--- a/devtools/client/aboutdebugging/components/addon-target.js
+++ b/devtools/client/aboutdebugging/components/addon-target.js
@@ -15,16 +15,21 @@ const { createClass, DOM: dom } =
 const Services = require("Services");
 
 const Strings = Services.strings.createBundle(
   "chrome://devtools/locale/aboutdebugging.properties");
 
 module.exports = createClass({
   displayName: "AddonTarget",
 
+  debug() {
+    let { target } = this.props;
+    BrowserToolboxProcess.init({ addonID: target.addonID });
+  },
+
   render() {
     let { target, debugDisabled } = this.props;
 
     return dom.div({ className: "target-container" },
       dom.img({
         className: "target-icon",
         role: "presentation",
         src: target.icon
@@ -33,15 +38,10 @@ module.exports = createClass({
         dom.div({ className: "target-name" }, target.name)
       ),
       dom.button({
         className: "debug-button",
         onClick: this.debug,
         disabled: debugDisabled,
       }, Strings.GetStringFromName("debug"))
     );
-  },
-
-  debug() {
-    let { target } = this.props;
-    BrowserToolboxProcess.init({ addonID: target.addonID });
-  },
+  }
 });
--- a/devtools/client/aboutdebugging/components/addons-controls.js
+++ b/devtools/client/aboutdebugging/components/addons-controls.js
@@ -27,16 +27,45 @@ module.exports = createClass({
   displayName: "AddonsControls",
 
   getInitialState() {
     return {
       installError: null,
     };
   },
 
+  onEnableAddonDebuggingChange(event) {
+    let enabled = event.target.checked;
+    Services.prefs.setBoolPref("devtools.chrome.enabled", enabled);
+    Services.prefs.setBoolPref("devtools.debugger.remote-enabled", enabled);
+  },
+
+  loadAddonFromFile() {
+    this.setState({ installError: null });
+    let fp = Cc["@mozilla.org/filepicker;1"].createInstance(Ci.nsIFilePicker);
+    fp.init(window,
+      Strings.GetStringFromName("selectAddonFromFile2"),
+      Ci.nsIFilePicker.modeOpen);
+    let res = fp.show();
+    if (res == Ci.nsIFilePicker.returnCancel || !fp.file) {
+      return;
+    }
+    let file = fp.file;
+    // AddonManager.installTemporaryAddon accepts either
+    // addon directory or final xpi file.
+    if (!file.isDirectory() && !file.leafName.endsWith(".xpi")) {
+      file = file.parent;
+    }
+
+    AddonManager.installTemporaryAddon(file)
+      .catch(e => {
+        this.setState({ installError: e.message });
+      });
+  },
+
   render() {
     let { debugDisabled } = this.props;
 
     return dom.div({ className: "addons-top" },
       dom.div({ className: "addons-controls" },
         dom.div({ className: "addons-options" },
           dom.input({
             id: "enable-addon-debugging",
@@ -55,39 +84,10 @@ module.exports = createClass({
           ")"
         ),
         dom.button({
           id: "load-addon-from-file",
           onClick: this.loadAddonFromFile,
         }, Strings.GetStringFromName("loadTemporaryAddon"))
       ),
       AddonsInstallError({ error: this.state.installError }));
-  },
-
-  onEnableAddonDebuggingChange(event) {
-    let enabled = event.target.checked;
-    Services.prefs.setBoolPref("devtools.chrome.enabled", enabled);
-    Services.prefs.setBoolPref("devtools.debugger.remote-enabled", enabled);
-  },
-
-  loadAddonFromFile() {
-    this.setState({ installError: null });
-    let fp = Cc["@mozilla.org/filepicker;1"].createInstance(Ci.nsIFilePicker);
-    fp.init(window,
-      Strings.GetStringFromName("selectAddonFromFile2"),
-      Ci.nsIFilePicker.modeOpen);
-    let res = fp.show();
-    if (res == Ci.nsIFilePicker.returnCancel || !fp.file) {
-      return;
-    }
-    let file = fp.file;
-    // AddonManager.installTemporaryAddon accepts either
-    // addon directory or final xpi file.
-    if (!file.isDirectory() && !file.leafName.endsWith(".xpi")) {
-      file = file.parent;
-    }
-
-    AddonManager.installTemporaryAddon(file)
-      .catch(e => {
-        this.setState({ installError: e.message });
-      });
-  },
+  }
 });
--- a/devtools/client/aboutdebugging/components/addons-tab.js
+++ b/devtools/client/aboutdebugging/components/addons-tab.js
@@ -46,38 +46,16 @@ module.exports = createClass({
   componentWillUnmount() {
     AddonManager.removeAddonListener(this);
     Services.prefs.removeObserver(CHROME_ENABLED_PREF,
       this.updateDebugStatus);
     Services.prefs.removeObserver(REMOTE_ENABLED_PREF,
       this.updateDebugStatus);
   },
 
-  render() {
-    let { client } = this.props;
-    let { debugDisabled, extensions: targets } = this.state;
-    let name = Strings.GetStringFromName("extensions");
-    let targetClass = AddonTarget;
-
-    return dom.div({
-      id: "tab-addons",
-      className: "tab",
-      role: "tabpanel",
-      "aria-labelledby": "tab-addons-header-name"
-    },
-    TabHeader({
-      id: "tab-addons-header-name",
-      name: Strings.GetStringFromName("addons")
-    }),
-    AddonsControls({ debugDisabled }),
-    dom.div({ id: "addons" },
-      TargetList({ name, targets, client, debugDisabled, targetClass })
-    ));
-  },
-
   updateDebugStatus() {
     let debugDisabled =
       !Services.prefs.getBoolPref(CHROME_ENABLED_PREF) ||
       !Services.prefs.getBoolPref(REMOTE_ENABLED_PREF);
 
     this.setState({ debugDisabled });
   },
 
@@ -117,9 +95,31 @@ module.exports = createClass({
   },
 
   /**
    * Mandatory callback as AddonManager listener.
    */
   onDisabled() {
     this.updateAddonsList();
   },
+
+  render() {
+    let { client } = this.props;
+    let { debugDisabled, extensions: targets } = this.state;
+    let name = Strings.GetStringFromName("extensions");
+    let targetClass = AddonTarget;
+
+    return dom.div({
+      id: "tab-addons",
+      className: "tab",
+      role: "tabpanel",
+      "aria-labelledby": "tab-addons-header-name"
+    },
+    TabHeader({
+      id: "tab-addons-header-name",
+      name: Strings.GetStringFromName("addons")
+    }),
+    AddonsControls({ debugDisabled }),
+    dom.div({ id: "addons" },
+      TargetList({ name, targets, client, debugDisabled, targetClass })
+    ));
+  }
 });
--- a/devtools/client/aboutdebugging/components/service-worker-target.js
+++ b/devtools/client/aboutdebugging/components/service-worker-target.js
@@ -12,59 +12,16 @@ const { debugWorker } = require("../modu
 const Services = require("Services");
 
 const Strings = Services.strings.createBundle(
   "chrome://devtools/locale/aboutdebugging.properties");
 
 module.exports = createClass({
   displayName: "ServiceWorkerTarget",
 
-  render() {
-    let { target, debugDisabled } = this.props;
-    let isRunning = this.isRunning();
-
-    return dom.div({ className: "target-container" },
-      dom.img({
-        className: "target-icon",
-        role: "presentation",
-        src: target.icon
-      }),
-      dom.div({ className: "target" },
-        dom.div({ className: "target-name" }, target.name),
-        dom.ul({ className: "target-details" },
-          dom.li({ className: "target-detail" },
-            dom.strong(null, Strings.GetStringFromName("scope")),
-            dom.span({ className: "service-worker-scope" }, target.scope),
-            dom.a({
-              onClick: this.unregister,
-              className: "unregister-link"
-            }, Strings.GetStringFromName("unregister"))
-          )
-        )
-      ),
-      (isRunning ?
-        [
-          dom.button({
-            className: "push-button",
-            onClick: this.push
-          }, Strings.GetStringFromName("push")),
-          dom.button({
-            className: "debug-button",
-            onClick: this.debug,
-            disabled: debugDisabled
-          }, Strings.GetStringFromName("debug"))
-        ] :
-        dom.button({
-          className: "start-button",
-          onClick: this.start
-        }, Strings.GetStringFromName("start"))
-      )
-    );
-  },
-
   debug() {
     if (!this.isRunning()) {
       // If the worker is not running, we can't debug it.
       return;
     }
 
     let { client, target } = this.props;
     debugWorker(client, target.workerActor);
@@ -103,9 +60,52 @@ module.exports = createClass({
       type: "unregister"
     });
   },
 
   isRunning() {
     // We know the target is running if it has a worker actor.
     return !!this.props.target.workerActor;
   },
+
+  render() {
+    let { target, debugDisabled } = this.props;
+    let isRunning = this.isRunning();
+
+    return dom.div({ className: "target-container" },
+      dom.img({
+        className: "target-icon",
+        role: "presentation",
+        src: target.icon
+      }),
+      dom.div({ className: "target" },
+        dom.div({ className: "target-name" }, target.name),
+        dom.ul({ className: "target-details" },
+          dom.li({ className: "target-detail" },
+            dom.strong(null, Strings.GetStringFromName("scope")),
+            dom.span({ className: "service-worker-scope" }, target.scope),
+            dom.a({
+              onClick: this.unregister,
+              className: "unregister-link"
+            }, Strings.GetStringFromName("unregister"))
+          )
+        )
+      ),
+      (isRunning ?
+        [
+          dom.button({
+            className: "push-button",
+            onClick: this.push
+          }, Strings.GetStringFromName("push")),
+          dom.button({
+            className: "debug-button",
+            onClick: this.debug,
+            disabled: debugDisabled
+          }, Strings.GetStringFromName("debug"))
+        ] :
+        dom.button({
+          className: "start-button",
+          onClick: this.start
+        }, Strings.GetStringFromName("start"))
+      )
+    );
+  }
 });
--- a/devtools/client/aboutdebugging/components/tab-menu-entry.js
+++ b/devtools/client/aboutdebugging/components/tab-menu-entry.js
@@ -5,27 +5,27 @@
 "use strict";
 
 const { createClass, DOM: dom } =
   require("devtools/client/shared/vendor/react");
 
 module.exports = createClass({
   displayName: "TabMenuEntry",
 
+  onClick() {
+    this.props.selectTab(this.props.tabId);
+  },
+
   render() {
     let { icon, name, selected } = this.props;
 
     // Here .category, .category-icon, .category-name classnames are used to
     // apply common styles defined.
     let className = "category" + (selected ? " selected" : "");
     return dom.div({
       "aria-selected": selected,
       className,
       onClick: this.onClick,
       role: "tab" },
     dom.img({ className: "category-icon", src: icon, role: "presentation" }),
     dom.div({ className: "category-name" }, name));
-  },
-
-  onClick() {
-    this.props.selectTab(this.props.tabId);
   }
 });
--- a/devtools/client/aboutdebugging/components/worker-target.js
+++ b/devtools/client/aboutdebugging/components/worker-target.js
@@ -12,16 +12,21 @@ const { debugWorker } = require("../modu
 const Services = require("Services");
 
 const Strings = Services.strings.createBundle(
   "chrome://devtools/locale/aboutdebugging.properties");
 
 module.exports = createClass({
   displayName: "WorkerTarget",
 
+  debug() {
+    let { client, target } = this.props;
+    debugWorker(client, target.workerActor);
+  },
+
   render() {
     let { target, debugDisabled } = this.props;
 
     return dom.div({ className: "target-container" },
       dom.img({
         className: "target-icon",
         role: "presentation",
         src: target.icon
@@ -30,15 +35,10 @@ module.exports = createClass({
         dom.div({ className: "target-name" }, target.name)
       ),
       dom.button({
         className: "debug-button",
         onClick: this.debug,
         disabled: debugDisabled
       }, Strings.GetStringFromName("debug"))
     );
-  },
-
-  debug() {
-    let { client, target } = this.props;
-    debugWorker(client, target.workerActor);
   }
 });
--- a/devtools/client/aboutdebugging/components/workers-tab.js
+++ b/devtools/client/aboutdebugging/components/workers-tab.js
@@ -43,55 +43,16 @@ module.exports = createClass({
 
   componentWillUnmount() {
     let client = this.props.client;
     client.removeListener("processListChanged", this.update);
     client.removeListener("serviceWorkerRegistrationListChanged", this.update);
     client.removeListener("workerListChanged", this.update);
   },
 
-  render() {
-    let { client } = this.props;
-    let { workers } = this.state;
-
-    return dom.div({
-      id: "tab-workers",
-      className: "tab",
-      role: "tabpanel",
-      "aria-labelledby": "tab-workers-header-name"
-    },
-    TabHeader({
-      id: "tab-workers-header-name",
-      name: Strings.GetStringFromName("workers")
-    }),
-    dom.div({ id: "workers", className: "inverted-icons" },
-      TargetList({
-        client,
-        id: "service-workers",
-        name: Strings.GetStringFromName("serviceWorkers"),
-        targetClass: ServiceWorkerTarget,
-        targets: workers.service
-      }),
-      TargetList({
-        client,
-        id: "shared-workers",
-        name: Strings.GetStringFromName("sharedWorkers"),
-        targetClass: WorkerTarget,
-        targets: workers.shared
-      }),
-      TargetList({
-        client,
-        id: "other-workers",
-        name: Strings.GetStringFromName("otherWorkers"),
-        targetClass: WorkerTarget,
-        targets: workers.other
-      })
-    ));
-  },
-
   update() {
     let workers = this.getInitialState().workers;
 
     getWorkerForms(this.props.client).then(forms => {
       forms.registrations.forEach(form => {
         workers.service.push({
           icon: WorkerIcon,
           name: form.url,
@@ -131,10 +92,49 @@ module.exports = createClass({
       });
 
       // XXX: Filter out the service worker registrations for which we couldn't
       // find the scriptSpec.
       workers.service = workers.service.filter(reg => !!reg.url);
 
       this.setState({ workers });
     });
+  },
+
+  render() {
+    let { client } = this.props;
+    let { workers } = this.state;
+
+    return dom.div({
+      id: "tab-workers",
+      className: "tab",
+      role: "tabpanel",
+      "aria-labelledby": "tab-workers-header-name"
+    },
+    TabHeader({
+      id: "tab-workers-header-name",
+      name: Strings.GetStringFromName("workers")
+    }),
+    dom.div({ id: "workers", className: "inverted-icons" },
+      TargetList({
+        client,
+        id: "service-workers",
+        name: Strings.GetStringFromName("serviceWorkers"),
+        targetClass: ServiceWorkerTarget,
+        targets: workers.service
+      }),
+      TargetList({
+        client,
+        id: "shared-workers",
+        name: Strings.GetStringFromName("sharedWorkers"),
+        targetClass: WorkerTarget,
+        targets: workers.shared
+      }),
+      TargetList({
+        client,
+        id: "other-workers",
+        name: Strings.GetStringFromName("otherWorkers"),
+        targetClass: WorkerTarget,
+        targets: workers.other
+      })
+    ));
   }
 });
--- a/devtools/client/responsive.html/app.js
+++ b/devtools/client/responsive.html/app.js
@@ -16,26 +16,25 @@ const {
   rotateViewport
 } = require("./actions/viewports");
 const { takeScreenshot } = require("./actions/screenshot");
 const Types = require("./types");
 const Viewports = createFactory(require("./components/viewports"));
 const GlobalToolbar = createFactory(require("./components/global-toolbar"));
 
 let App = createClass({
-
-  displayName: "App",
-
   propTypes: {
     devices: PropTypes.shape(Types.devices).isRequired,
     location: Types.location.isRequired,
     viewports: PropTypes.arrayOf(PropTypes.shape(Types.viewport)).isRequired,
     screenshot: PropTypes.shape(Types.screenshot).isRequired,
   },
 
+  displayName: "App",
+
   onBrowserMounted() {
     window.postMessage({ type: "browser-mounted" }, "*");
   },
 
   onChangeViewportDevice(id, device) {
     this.props.dispatch(changeDevice(id, device));
   },
 
--- a/devtools/client/responsive.html/components/browser.js
+++ b/devtools/client/responsive.html/components/browser.js
@@ -11,33 +11,32 @@ const DevToolsUtils = require("devtools/
 const { getToplevelWindow } = require("sdk/window/utils");
 const { DOM: dom, createClass, addons, PropTypes } =
   require("devtools/client/shared/vendor/react");
 
 const Types = require("../types");
 const { waitForMessage } = require("../utils/e10s");
 
 module.exports = createClass({
-
-  displayName: "Browser",
-
-  mixins: [ addons.PureRenderMixin ],
-
   /**
    * This component is not allowed to depend directly on frequently changing
    * data (width, height) due to the use of `dangerouslySetInnerHTML` below.
    * Any changes in props will cause the <iframe> to be removed and added again,
    * throwing away the current state of the page.
    */
   propTypes: {
     location: Types.location.isRequired,
     onBrowserMounted: PropTypes.func.isRequired,
     onContentResize: PropTypes.func.isRequired,
   },
 
+  displayName: "Browser",
+
+  mixins: [ addons.PureRenderMixin ],
+
   /**
    * Once the browser element has mounted, load the frame script and enable
    * various features, like floating scrollbars.
    */
   componentDidMount: Task.async(function* () {
     let { onContentResize } = this;
     let browser = this.refs.browserContainer.querySelector("iframe.browser");
     let mm = browser.frameLoader.messageManager;
--- a/devtools/client/responsive.html/components/device-selector.js
+++ b/devtools/client/responsive.html/components/device-selector.js
@@ -6,26 +6,25 @@
 
 const { getStr } = require("../utils/l10n");
 const { DOM: dom, createClass, PropTypes, addons } =
   require("devtools/client/shared/vendor/react");
 
 const Types = require("../types");
 
 module.exports = createClass({
-
-  displayName: "DeviceSelector",
-
   propTypes: {
     devices: PropTypes.shape(Types.devices).isRequired,
     selectedDevice: PropTypes.string.isRequired,
     onChangeViewportDevice: PropTypes.func.isRequired,
     onResizeViewport: PropTypes.func.isRequired,
   },
 
+  displayName: "DeviceSelector",
+
   mixins: [ addons.PureRenderMixin ],
 
   onSelectChange({ target }) {
     let {
       devices,
       onChangeViewportDevice,
       onResizeViewport,
     } = this.props;
--- a/devtools/client/responsive.html/components/global-toolbar.js
+++ b/devtools/client/responsive.html/components/global-toolbar.js
@@ -5,25 +5,24 @@
 "use strict";
 
 const { getStr } = require("../utils/l10n");
 const { DOM: dom, createClass, PropTypes, addons } =
   require("devtools/client/shared/vendor/react");
 const Types = require("../types");
 
 module.exports = createClass({
-
-  displayName: "GlobalToolbar",
-
   propTypes: {
     onExit: PropTypes.func.isRequired,
     onScreenshot: PropTypes.func.isRequired,
     screenshot: PropTypes.shape(Types.screenshot).isRequired,
   },
 
+  displayName: "GlobalToolbar",
+
   mixins: [ addons.PureRenderMixin ],
 
   render() {
     let {
       onExit,
       onScreenshot,
       screenshot,
     } = this.props;
--- a/devtools/client/responsive.html/components/resizable-viewport.js
+++ b/devtools/client/responsive.html/components/resizable-viewport.js
@@ -13,31 +13,30 @@ const Constants = require("../constants"
 const Types = require("../types");
 const Browser = createFactory(require("./browser"));
 const ViewportToolbar = createFactory(require("./viewport-toolbar"));
 
 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,
     screenshot: PropTypes.shape(Types.screenshot).isRequired,
     viewport: PropTypes.shape(Types.viewport).isRequired,
     onBrowserMounted: PropTypes.func.isRequired,
     onChangeViewportDevice: PropTypes.func.isRequired,
     onContentResize: PropTypes.func.isRequired,
     onResizeViewport: PropTypes.func.isRequired,
     onRotateViewport: PropTypes.func.isRequired,
   },
 
+  displayName: "ResizableViewport",
+
   getInitialState() {
     return {
       isResizing: false,
       lastClientX: 0,
       lastClientY: 0,
       ignoreX: false,
       ignoreY: false,
     };
--- a/devtools/client/responsive.html/components/viewport-dimension.js
+++ b/devtools/client/responsive.html/components/viewport-dimension.js
@@ -6,25 +6,24 @@
 
 const { DOM: dom, createClass, PropTypes } =
   require("devtools/client/shared/vendor/react");
 
 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;
 
     return {
       width,
       height,
       isEditing: false,
       isInvalid: false,
--- a/devtools/client/responsive.html/components/viewport-toolbar.js
+++ b/devtools/client/responsive.html/components/viewport-toolbar.js
@@ -6,29 +6,28 @@
 
 const { DOM: dom, createClass, createFactory, PropTypes, addons } =
   require("devtools/client/shared/vendor/react");
 
 const Types = require("../types");
 const DeviceSelector = createFactory(require("./device-selector"));
 
 module.exports = createClass({
-
-  displayName: "ViewportToolbar",
-
-  mixins: [ addons.PureRenderMixin ],
-
   propTypes: {
     devices: PropTypes.shape(Types.devices).isRequired,
     selectedDevice: PropTypes.string.isRequired,
     onChangeViewportDevice: PropTypes.func.isRequired,
     onResizeViewport: PropTypes.func.isRequired,
     onRotateViewport: PropTypes.func.isRequired,
   },
 
+  displayName: "ViewportToolbar",
+
+  mixins: [ addons.PureRenderMixin ],
+
   render() {
     let {
       devices,
       selectedDevice,
       onChangeViewportDevice,
       onResizeViewport,
       onRotateViewport,
     } = this.props;
--- a/devtools/client/responsive.html/components/viewport.js
+++ b/devtools/client/responsive.html/components/viewport.js
@@ -7,31 +7,30 @@
 const { DOM: dom, createClass, createFactory, PropTypes } =
   require("devtools/client/shared/vendor/react");
 
 const Types = require("../types");
 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,
     screenshot: PropTypes.shape(Types.screenshot).isRequired,
     viewport: PropTypes.shape(Types.viewport).isRequired,
     onBrowserMounted: PropTypes.func.isRequired,
     onChangeViewportDevice: PropTypes.func.isRequired,
     onContentResize: PropTypes.func.isRequired,
     onResizeViewport: PropTypes.func.isRequired,
     onRotateViewport: PropTypes.func.isRequired,
   },
 
+  displayName: "Viewport",
+
   onChangeViewportDevice(device) {
     let {
       viewport,
       onChangeViewportDevice,
     } = this.props;
 
     onChangeViewportDevice(viewport.id, device);
   },
--- a/devtools/client/responsive.html/components/viewports.js
+++ b/devtools/client/responsive.html/components/viewports.js
@@ -6,31 +6,30 @@
 
 const { DOM: dom, createClass, createFactory, PropTypes } =
   require("devtools/client/shared/vendor/react");
 
 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,
     screenshot: PropTypes.shape(Types.screenshot).isRequired,
     viewports: PropTypes.arrayOf(PropTypes.shape(Types.viewport)).isRequired,
     onBrowserMounted: PropTypes.func.isRequired,
     onChangeViewportDevice: PropTypes.func.isRequired,
     onContentResize: PropTypes.func.isRequired,
     onResizeViewport: PropTypes.func.isRequired,
     onRotateViewport: PropTypes.func.isRequired,
   },
 
+  displayName: "Viewports",
+
   render() {
     let {
       devices,
       location,
       screenshot,
       viewports,
       onBrowserMounted,
       onChangeViewportDevice,