Bug 1418320 - JSON Viewer: Split HeadersToolbar, JsonToolbar and TextToolbar out to their own files r?honza
MozReview-Commit-ID: KdGLYV4rHB9
--- 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'
)