Bug 1418320 - JSON Viewer: Split HeadersToolbar, JsonToolbar and TextToolbar out to their own files r?honza draft
authorMichael Ratcliffe <mratcliffe@mozilla.com>
Fri, 17 Nov 2017 13:59:12 +0000
changeset 699659 b6629779f881c36209605ff6b64d06849ae7c967
parent 699658 e3eda3b2fd856bd59381fff97d5c8da79c647eab
child 740686 6cfd3e517725f708819a5b3af29f331a2039754d
push id89633
push userbmo:mratcliffe@mozilla.com
push dateFri, 17 Nov 2017 14:02:13 +0000
reviewershonza
bugs1418320
milestone59.0a1
Bug 1418320 - JSON Viewer: Split HeadersToolbar, JsonToolbar and TextToolbar out to their own files r?honza MozReview-Commit-ID: KdGLYV4rHB9
devtools/client/jsonview/components/HeadersPanel.js
devtools/client/jsonview/components/HeadersToolbar.js
devtools/client/jsonview/components/JsonPanel.js
devtools/client/jsonview/components/JsonToolbar.js
devtools/client/jsonview/components/TextPanel.js
devtools/client/jsonview/components/TextToolbar.js
devtools/client/jsonview/components/moz.build
--- a/devtools/client/jsonview/components/HeadersPanel.js
+++ b/devtools/client/jsonview/components/HeadersPanel.js
@@ -2,24 +2,24 @@
 /* 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 { 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;
 
   /**
    * This template represents the 'Headers' panel
    * s responsible for rendering its content.
    */
   class HeadersPanel extends Component {
@@ -38,55 +38,20 @@ define(function (require, exports, modul
       };
     }
 
     render() {
       let data = this.props.data;
 
       return (
         div({className: "headersPanelBox tab-panel-inner"},
-          HeadersToolbarFactory({actions: this.props.actions}),
+          HeadersToolbar({actions: this.props.actions}),
           div({className: "panelContent"},
             Headers({data: data})
           )
         )
       );
     }
   }
 
-  /**
-   * 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;
 });
new file mode 100644
--- /dev/null
+++ b/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;
+ });
--- a/devtools/client/jsonview/components/JsonPanel.js
+++ b/devtools/client/jsonview/components/JsonPanel.js
@@ -5,26 +5,25 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 "use strict";
 
 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) {
     return Object(value) === value;
   }
 
   /**
    * This template represents the 'JSON' panel. The panel is
@@ -125,65 +124,20 @@ define(function (require, exports, modul
           data + ""
         );
       } else {
         content = this.renderTree();
       }
 
       return (
         div({className: "jsonPanelBox tab-panel-inner"},
-          JsonToolbarFactory({actions: this.props.actions}),
+          JsonToolbar({actions: this.props.actions}),
           div({className: "panelContent"},
             content
           )
         )
       );
     }
   }
 
-  /**
-   * 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;
 });
new file mode 100644
--- /dev/null
+++ b/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;
+});
--- a/devtools/client/jsonview/components/TextPanel.js
+++ b/devtools/client/jsonview/components/TextPanel.js
@@ -2,21 +2,22 @@
 /* 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 { 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;
 
   /**
    * This template represents the 'Raw Data' panel displaying
    * JSON as a text received from the server.
    */
   class TextPanel extends Component {
     static get propTypes() {
@@ -30,85 +31,25 @@ define(function (require, exports, modul
     constructor(props) {
       super(props);
       this.state = {};
     }
 
     render() {
       return (
         div({className: "textPanelBox tab-panel-inner"},
-          TextToolbarFactory({
+          TextToolbar({
             actions: this.props.actions,
             isValidJson: this.props.isValidJson
           }),
           div({className: "panelContent"},
             pre({className: "data"},
               this.props.data
             )
           )
         )
       );
     }
   }
 
-  /**
-   * 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;
 });
new file mode 100644
--- /dev/null
+++ b/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;
+ });
--- a/devtools/client/jsonview/components/moz.build
+++ b/devtools/client/jsonview/components/moz.build
@@ -6,13 +6,16 @@
 
 DIRS += [
     'reps'
 ]
 
 DevToolsModules(
     'Headers.js',
     'HeadersPanel.js',
+    'HeadersToolbar.js',
     'JsonPanel.js',
+    'JsonToolbar.js',
     'MainTabbedArea.js',
     'SearchBox.js',
-    'TextPanel.js'
+    'TextPanel.js',
+    'TextToolbar.js'
 )