define(function (require, exports, module) {
const { render } = require("devtools/client/shared/vendor/react-dom");
const { createFactories } = require("devtools/client/shared/components/reps/reps");
const { MainTabbedArea } = createFactories(require("./components/main-tabbed-area"));
const json = document.getElementById("json");
const headers = document.getElementById("headers");
let jsonData;
try {
jsonData = JSON.parse(json.textContent);
} catch (err) {
jsonData = err + "";
}
// Application state object.
let input = {
jsonText: json.textContent,
jsonPretty: null,
json: jsonData,
headers: JSON.parse(headers.textContent),
tabActive: 0,
prettified: false
};
json.remove();
headers.remove();
/**
* Application actions/commands. This list implements all commands
* available for the JSON viewer.
*/
input.actions = {
onCopyJson: function () {
dispatchEvent("copy", input.prettified ? input.jsonPretty : input.jsonText);
},
onSaveJson: function () {
dispatchEvent("save", input.prettified ? input.jsonPretty : input.jsonText);
},
onCopyHeaders: function () {
dispatchEvent("copy-headers", input.headers);
},
onSearch: function (value) {
theApp.setState({searchFilter: value});
},
onPrettify: function (data) {
if (input.prettified) {
theApp.setState({jsonText: input.jsonText});
} else {
if (!input.jsonPretty) {
input.jsonPretty = JSON.stringify(jsonData, null, " ");
}
theApp.setState({jsonText: input.jsonPretty});
}
input.prettified = !input.prettified;
},
};
/**
* Helper for dispatching an event. It's handled in chrome scope.
*
* @param {String} type Event detail type
* @param {Object} value Event detail value
*/
function dispatchEvent(type, value) {
let data = {
detail: {
type,
value,
}
};
let contentMessageEvent = new CustomEvent("contentMessage", data);
window.dispatchEvent(contentMessageEvent);
}
/**
* Render the main application component. It's the main tab bar displayed
* at the top of the window. This component also represents ReacJS root.
*/
let content = document.getElementById("content");
let theApp = render(MainTabbedArea(input), content);
let onResize = event => {
window.document.body.style.height = window.innerHeight + "px";
window.document.body.style.width = window.innerWidth + "px";
};
window.addEventListener("resize", onResize);
onResize();
// Send notification event to the window. Can be useful for
// tests as well as extensions.
let event = new CustomEvent("JSONViewInitialized", {});
window.jsonViewInitialized = true;
window.dispatchEvent(event);
});
if (typeof define === "undefined") {
require("amd-loader");
}
// React
const {
createFactory,
PropTypes
} = require("devtools/client/shared/vendor/react");
const VariablesViewLink = createFactory(require("devtools/client/webconsole/new-console-output/components/variables-view-link"));
const { REPS, MODE, createFactories } = require("devtools/client/shared/components/reps/reps");
const Rep = createFactory(REPS.Rep);
const Grip = REPS.Grip;
const StringRep = createFactories(REPS.StringRep).rep;
GripMessageBody.displayName = "GripMessageBody";
GripMessageBody.propTypes = {
grip: PropTypes.oneOfType([
PropTypes.string,
PropTypes.number,
PropTypes.object,
]).isRequired,
serviceContainer: PropTypes.shape({
createElement: PropTypes.func.isRequired,
}),
userProvidedStyle: PropTypes.string,
useQuotes: PropTypes.bool,
};
define(function (require, exports, module) {
const { DOM: dom, createFactory, createClass, PropTypes } = require("devtools/client/shared/vendor/react");
const TreeView = createFactory(require("devtools/client/shared/components/tree/tree-view"));
const { REPS, createFactories, MODE } = require("devtools/client/shared/components/reps/reps");
const Rep = createFactory(REPS.Rep);
const { SearchBox } = createFactories(require("./search-box"));
const { Toolbar, ToolbarButton } = createFactories(require("./reps/toolbar"));
const { div } = dom;
const AUTO_EXPAND_MAX_SIZE = 100 * 1024;
const AUTO_EXPAND_MAX_LEVEL = 7;
/**
* This template represents the 'JSON' panel. The panel is
* responsible for rendering an expandable tree that allows simple
* inspection of JSON structure.
*/
let JsonPanel = createClass({
displayName: "JsonPanel",
propTypes: {
data: PropTypes.oneOfType([
PropTypes.string,
PropTypes.array,
PropTypes.object
]),
jsonTextLength: PropTypes.number,
searchFilter: PropTypes.string,
actions: PropTypes.object,
},
getInitialState: function () {
return {};
},
componentDidMount: function () {
document.addEventListener("keypress", this.onKeyPress, true);
},
componentWillUnmount: function () {
document.removeEventListener("keypress", this.onKeyPress, true);
},
onKeyPress: function (e) {
// XXX shortcut for focusing the Filter field (see Bug 1178771).
},
onFilter: function (object) {
if (!this.props.searchFilter) {
return true;
}
let json = object.name + JSON.stringify(object.value);
return json.toLowerCase().indexOf(this.props.searchFilter.toLowerCase()) >= 0;
},
getExpandedNodes: function (object, path = "", level = 0) {
if (typeof object != "object") {
return null;
}
if (level > AUTO_EXPAND_MAX_LEVEL) {
return null;
}
let expandedNodes = new Set();
for (let prop in object) {
let nodePath = path + "/" + prop;
expandedNodes.add(nodePath);
let nodes = this.getExpandedNodes(object[prop], nodePath, level + 1);
if (nodes) {
expandedNodes = new Set([...expandedNodes, ...nodes]);
}
}
return expandedNodes;
},
renderValue: props => {
let member = props.member;
// Hide object summary when object is expanded (bug 1244912).
if (typeof member.value == "object" && member.open) {
return null;
}
// Render the value (summary) using Reps library.
return Rep(Object.assign({}, props, {
cropLimit: 50,
}));
},
renderTree: function () {
// Append custom column for displaying values. This column
// Take all available horizontal space.
let columns = [{
id: "value",
width: "100%"
}];
// Expand the document by default if its size isn't bigger than 100KB.
let expandedNodes = new Set();
if (this.props.jsonTextLength <= AUTO_EXPAND_MAX_SIZE) {
expandedNodes = this.getExpandedNodes(this.props.data);
}
// Render tree component.
return TreeView({
object: this.props.data,
mode: MODE.TINY,
onFilter: this.onFilter,
columns: columns,
renderValue: this.renderValue,
expandedNodes: expandedNodes,
});
},
render: function () {
let content;
let data = this.props.data;
try {
if (typeof data == "object") {
content = this.renderTree();
} else {
content = div({className: "jsonParseError"},
data + ""
);
}
} catch (err) {
content = div({className: "jsonParseError"},
err + ""
);
}
return (
div({className: "jsonPanelBox"},
JsonToolbar({actions: this.props.actions}),
div({className: "panelContent"},
content
)
)
);
}
});
/**
* This template represents a toolbar within the 'JSON' panel.
*/
let JsonToolbar = createFactory(createClass({
displayName: "JsonToolbar",
propTypes: {
actions: PropTypes.object,
},
// Commands
onSave: function (event) {
this.props.actions.onSaveJson();
},
onCopy: function (event) {
this.props.actions.onCopyJson();
},
render: function () {
return (
Toolbar({},
ToolbarButton({className: "btn save", onClick: this.onSave},
Locale.$STR("jsonViewer.Save")
),
ToolbarButton({className: "btn copy", onClick: this.onCopy},
Locale.$STR("jsonViewer.Copy")
),
SearchBox({
actions: this.props.actions
})
)
);
},
}));
// Exports from this module
exports.JsonPanel = JsonPanel;
});