Bug 1207997 - about:debugging use factories/dom helpers instead of createElement;r=janx

Make about:debugging code less verbose:
- use component factories to avoid having to remove calls to createElement
- use React.DOM helpers
- components only module.export their class
  (require('my-component.js').MyComponent -> require('my-component.js'))

MozReview-Commit-ID: CBWLgcPUkMf

devtools/client/aboutdebugging/components/aboutdebugging.js

@@ -8,26 +8,33 @@
 
 const Services = require("Services");
 
-const React = require("devtools/client/shared/vendor/react");
-const { TabMenu } = require("./tab-menu");
+const { createFactory, createClass, DOM: dom } =
+  require("devtools/client/shared/vendor/react");
 
-loader.lazyRequireGetter(this, "AddonsTab", "./components/addons-tab", true);
-loader.lazyRequireGetter(this, "WorkersTab", "./components/workers-tab", true);
+const TabMenu = createFactory(require("./tab-menu"));
+loader.lazyGetter(this, "AddonsTab",
+  () => createFactory(require("./addons-tab")));
+loader.lazyGetter(this, "WorkersTab",
+  () => createFactory(require("./workers-tab")));
 
 const Strings = Services.strings.createBundle(
   "chrome://devtools/locale/aboutdebugging.properties");
 
-const tabs = [
-  { id: "addons", name: Strings.GetStringFromName("addons"),
-    icon: "chrome://devtools/skin/images/debugging-addons.svg",
-    component: AddonsTab },
-  { id: "workers", name: Strings.GetStringFromName("workers"),
-    icon: "chrome://devtools/skin/images/debugging-workers.svg",
-    component: WorkersTab },
-];
+const tabs = [{
+  id: "addons",
+  name: Strings.GetStringFromName("addons"),
+  icon: "chrome://devtools/skin/images/debugging-addons.svg",
+  component: AddonsTab
+}, {
+  id: "workers",
+  name: Strings.GetStringFromName("workers"),
+  icon: "chrome://devtools/skin/images/debugging-workers.svg",
+  component: WorkersTab
+}];
+
 const defaultTabId = "addons";
 
-exports.AboutDebuggingApp = React.createClass({
+module.exports = createClass({
   displayName: "AboutDebuggingApp",
 
   getInitialState() {
@@ -55,12 +62,11 @@ exports.AboutDebuggingApp = React.createClass({
 
     let selectedTab = tabs.find(t => t.id == selectedTabId);
 
-    return React.createElement(
-      "div", { className: "app"},
-        React.createElement(TabMenu, { tabs, selectedTabId, selectTab }),
-        React.createElement("div", { className: "main-content" },
-          React.createElement(selectedTab.component, { client }))
-        );
+    return dom.div({ className: "app" },
+      TabMenu({ tabs, selectedTabId, selectTab }),
+      dom.div({ className: "main-content" },
+        selectedTab.component({ client }))
+      );
   },
 
   onHashChange() {