Bug 1418320 - JSON Viewer: Split HeadersToolbar, JsonToolbar and TextToolbar out to their own files r=Honza

MozReview-Commit-ID: KdGLYV4rHB9

--HG--
extra : rebase_source : b0a9e75236d2b840dc51df00097b364bf125bb6f

devtools/client/jsonview/components/HeadersPanel.js

@@ -7,14 +7,14 @@
 "use strict";
 
 define(function (require, exports, module) {
-  const { createFactory, Component } = require("devtools/client/shared/vendor/react");
+  const { Component } = require("devtools/client/shared/vendor/react");
   const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
   const dom = require("devtools/client/shared/vendor/react-dom-factories");
 
   const { createFactories } = require("devtools/client/shared/react-utils");
 
   const { Headers } = createFactories(require("./Headers"));
-  const { Toolbar, ToolbarButton } = createFactories(require("./reps/Toolbar"));
+  const { HeadersToolbar } = createFactories(require("./HeadersToolbar"));
 
   const { div } = dom;
 
@@ -43,7 +43,7 @@ define(function (require, exports, module) {
 
       return (
         div({className: "headersPanelBox tab-panel-inner"},
-          HeadersToolbarFactory({actions: this.props.actions}),
+          HeadersToolbar({actions: this.props.actions}),
           div({className: "panelContent"},
             Headers({data: data})
           )
@@ -52,41 +52,6 @@ define(function (require, exports, module) {
     }
   }
 
-  /**
-   * This template is responsible for rendering a toolbar
-   * within the 'Headers' panel.
-   */
-  class HeadersToolbar extends Component {
-    static get propTypes() {
-      return {
-        actions: PropTypes.object,
-      };
-    }
-
-    constructor(props) {
-      super(props);
-      this.onCopy = this.onCopy.bind(this);
-    }
-
-    // Commands
-
-    onCopy(event) {
-      this.props.actions.onCopyHeaders();
-    }
-
-    render() {
-      return (
-        Toolbar({},
-          ToolbarButton({className: "btn copy", onClick: this.onCopy},
-            JSONView.Locale.$STR("jsonViewer.Copy")
-          )
-        )
-      );
-    }
-  }
-
-  let HeadersToolbarFactory = createFactory(HeadersToolbar);
-
   // Exports from this module
   exports.HeadersPanel = HeadersPanel;
 });

devtools/client/jsonview/components/HeadersToolbar.js

@@ -0,0 +1,51 @@
+/* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- */
+/* vim: set ft=javascript ts=2 et sw=2 tw=80: */
+/* 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/. */
+
+ "use strict";
+
+ define(function (require, exports, module) {
+   const { Component } = require("devtools/client/shared/vendor/react");
+   const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
+   const { createFactories } = require("devtools/client/shared/react-utils");
+
+   const { Toolbar, ToolbarButton } = createFactories(require("./reps/Toolbar"));
+
+   /**
+    * This template is responsible for rendering a toolbar
+    * within the 'Headers' panel.
+    */
+   class HeadersToolbar extends Component {
+     static get propTypes() {
+       return {
+         actions: PropTypes.object,
+       };
+     }
+
+     constructor(props) {
+       super(props);
+       this.onCopy = this.onCopy.bind(this);
+     }
+
+     // Commands
+
+     onCopy(event) {
+       this.props.actions.onCopyHeaders();
+     }
+
+     render() {
+       return (
+         Toolbar({},
+           ToolbarButton({className: "btn copy", onClick: this.onCopy},
+             JSONView.Locale.$STR("jsonViewer.Copy")
+           )
+         )
+       );
+     }
+   }
+
+   // Exports from this module
+   exports.HeadersToolbar = HeadersToolbar;
+ });

devtools/client/jsonview/components/JsonPanel.js

@@ -10,16 +10,15 @@ define(function (require, exports, module) {
   const { createFactory, Component } = require("devtools/client/shared/vendor/react");
   const dom = require("devtools/client/shared/vendor/react-dom-factories");
   const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
+  const { createFactories } = require("devtools/client/shared/react-utils");
+
   const TreeView =
     createFactory(require("devtools/client/shared/components/tree/TreeView"));
+  const { JsonToolbar } = createFactories(require("./JsonToolbar"));
 
   const { REPS, MODE } = require("devtools/client/shared/components/reps/reps");
-  const { createFactories } = require("devtools/client/shared/react-utils");
   const { Rep } = REPS;
 
-  const { SearchBox } = createFactories(require("./SearchBox"));
-  const { Toolbar, ToolbarButton } = createFactories(require("./reps/Toolbar"));
-
   const { div } = dom;
 
   function isObject(value) {
@@ -130,7 +129,7 @@ define(function (require, exports, module) {
 
       return (
         div({className: "jsonPanelBox tab-panel-inner"},
-          JsonToolbarFactory({actions: this.props.actions}),
+          JsonToolbar({actions: this.props.actions}),
           div({className: "panelContent"},
             content
           )
@@ -139,51 +138,6 @@ define(function (require, exports, module) {
     }
   }
 
-  /**
-   * This template represents a toolbar within the 'JSON' panel.
-   */
-  class JsonToolbar extends Component {
-    static get propTypes() {
-      return {
-        actions: PropTypes.object,
-      };
-    }
-
-    constructor(props) {
-      super(props);
-      this.onSave = this.onSave.bind(this);
-      this.onCopy = this.onCopy.bind(this);
-    }
-
-    // Commands
-
-    onSave(event) {
-      this.props.actions.onSaveJson();
-    }
-
-    onCopy(event) {
-      this.props.actions.onCopyJson();
-    }
-
-    render() {
-      return (
-        Toolbar({},
-          ToolbarButton({className: "btn save", onClick: this.onSave},
-            JSONView.Locale.$STR("jsonViewer.Save")
-          ),
-          ToolbarButton({className: "btn copy", onClick: this.onCopy},
-            JSONView.Locale.$STR("jsonViewer.Copy")
-          ),
-          SearchBox({
-            actions: this.props.actions
-          })
-        )
-      );
-    }
-  }
-
-  let JsonToolbarFactory = createFactory(JsonToolbar);
-
   // Exports from this module
   exports.JsonPanel = JsonPanel;
 });

devtools/client/jsonview/components/JsonToolbar.js

@@ -0,0 +1,63 @@
+/* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- */
+/* vim: set ft=javascript ts=2 et sw=2 tw=80: */
+/* 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/. */
+
+"use strict";
+
+define(function (require, exports, module) {
+  const { Component } = require("devtools/client/shared/vendor/react");
+  const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
+
+  const { createFactories } = require("devtools/client/shared/react-utils");
+
+  const { SearchBox } = createFactories(require("./SearchBox"));
+  const { Toolbar, ToolbarButton } = createFactories(require("./reps/Toolbar"));
+
+  /**
+   * This template represents a toolbar within the 'JSON' panel.
+   */
+  class JsonToolbar extends Component {
+    static get propTypes() {
+      return {
+        actions: PropTypes.object,
+      };
+    }
+
+    constructor(props) {
+      super(props);
+      this.onSave = this.onSave.bind(this);
+      this.onCopy = this.onCopy.bind(this);
+    }
+
+    // Commands
+
+    onSave(event) {
+      this.props.actions.onSaveJson();
+    }
+
+    onCopy(event) {
+      this.props.actions.onCopyJson();
+    }
+
+    render() {
+      return (
+        Toolbar({},
+          ToolbarButton({className: "btn save", onClick: this.onSave},
+            JSONView.Locale.$STR("jsonViewer.Save")
+          ),
+          ToolbarButton({className: "btn copy", onClick: this.onCopy},
+            JSONView.Locale.$STR("jsonViewer.Copy")
+          ),
+          SearchBox({
+            actions: this.props.actions
+          })
+        )
+      );
+    }
+  }
+
+  // Exports from this module
+  exports.JsonToolbar = JsonToolbar;
+});

devtools/client/jsonview/components/TextPanel.js

@@ -7,11 +7,12 @@
 "use strict";
 
 define(function (require, exports, module) {
-  const { createFactory, Component } = require("devtools/client/shared/vendor/react");
+  const { Component } = require("devtools/client/shared/vendor/react");
   const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
   const dom = require("devtools/client/shared/vendor/react-dom-factories");
   const { createFactories } = require("devtools/client/shared/react-utils");
-  const { Toolbar, ToolbarButton } = createFactories(require("./reps/Toolbar"));
+  const { TextToolbar } = createFactories(require("./TextToolbar"));
+
   const { div, pre } = dom;
 
   /**
@@ -35,7 +36,7 @@ define(function (require, exports, module) {
     render() {
       return (
         div({className: "textPanelBox tab-panel-inner"},
-          TextToolbarFactory({
+          TextToolbar({
             actions: this.props.actions,
             isValidJson: this.props.isValidJson
           }),
@@ -49,66 +50,6 @@ define(function (require, exports, module) {
     }
   }
 
-  /**
-   * This object represents a toolbar displayed within the
-   * 'Raw Data' panel.
-   */
-  class TextToolbar extends Component {
-    static get propTypes() {
-      return {
-        actions: PropTypes.object,
-        isValidJson: PropTypes.bool
-      };
-    }
-
-    constructor(props) {
-      super(props);
-      this.onPrettify = this.onPrettify.bind(this);
-      this.onSave = this.onSave.bind(this);
-      this.onCopy = this.onCopy.bind(this);
-    }
-
-    // Commands
-
-    onPrettify(event) {
-      this.props.actions.onPrettify();
-    }
-
-    onSave(event) {
-      this.props.actions.onSaveJson();
-    }
-
-    onCopy(event) {
-      this.props.actions.onCopyJson();
-    }
-
-    render() {
-      return (
-        Toolbar({},
-          ToolbarButton({
-            className: "btn save",
-            onClick: this.onSave},
-            JSONView.Locale.$STR("jsonViewer.Save")
-          ),
-          ToolbarButton({
-            className: "btn copy",
-            onClick: this.onCopy},
-            JSONView.Locale.$STR("jsonViewer.Copy")
-          ),
-          this.props.isValidJson ?
-            ToolbarButton({
-              className: "btn prettyprint",
-              onClick: this.onPrettify},
-              JSONView.Locale.$STR("jsonViewer.PrettyPrint")
-            ) :
-            null
-        )
-      );
-    }
-  }
-
-  let TextToolbarFactory = createFactory(TextToolbar);
-
   // Exports from this module
   exports.TextPanel = TextPanel;
 });

devtools/client/jsonview/components/TextToolbar.js

@@ -0,0 +1,75 @@
+/* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- */
+/* vim: set ft=javascript ts=2 et sw=2 tw=80: */
+/* 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/. */
+
+ "use strict";
+
+ define(function (require, exports, module) {
+   const { Component } = require("devtools/client/shared/vendor/react");
+   const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
+   const { createFactories } = require("devtools/client/shared/react-utils");
+   const { Toolbar, ToolbarButton } = createFactories(require("./reps/Toolbar"));
+
+   /**
+    * This object represents a toolbar displayed within the
+    * 'Raw Data' panel.
+    */
+   class TextToolbar extends Component {
+     static get propTypes() {
+       return {
+         actions: PropTypes.object,
+         isValidJson: PropTypes.bool
+       };
+     }
+
+     constructor(props) {
+       super(props);
+       this.onPrettify = this.onPrettify.bind(this);
+       this.onSave = this.onSave.bind(this);
+       this.onCopy = this.onCopy.bind(this);
+     }
+
+     // Commands
+
+     onPrettify(event) {
+       this.props.actions.onPrettify();
+     }
+
+     onSave(event) {
+       this.props.actions.onSaveJson();
+     }
+
+     onCopy(event) {
+       this.props.actions.onCopyJson();
+     }
+
+     render() {
+       return (
+         Toolbar({},
+           ToolbarButton({
+             className: "btn save",
+             onClick: this.onSave},
+             JSONView.Locale.$STR("jsonViewer.Save")
+           ),
+           ToolbarButton({
+             className: "btn copy",
+             onClick: this.onCopy},
+             JSONView.Locale.$STR("jsonViewer.Copy")
+           ),
+           this.props.isValidJson ?
+             ToolbarButton({
+               className: "btn prettyprint",
+               onClick: this.onPrettify},
+               JSONView.Locale.$STR("jsonViewer.PrettyPrint")
+             ) :
+             null
+         )
+       );
+     }
+   }
+
+   // Exports from this module
+   exports.TextToolbar = TextToolbar;
+ });

devtools/client/jsonview/components/moz.build

@@ -11,8 +11,11 @@ DIRS += [
 DevToolsModules(
     'Headers.js',
     'HeadersPanel.js',
+    'HeadersToolbar.js',
     'JsonPanel.js',
+    'JsonToolbar.js',
     'MainTabbedArea.js',
     'SearchBox.js',
-    'TextPanel.js'
+    'TextPanel.js',
+    'TextToolbar.js'
 )