diff --git a/devtools/client/jsonview/components/json-panel.js b/devtools/client/jsonview/components/json-panel.js index e6ca467c41d9..c0001a5c2357 100644 --- a/devtools/client/jsonview/components/json-panel.js +++ b/devtools/client/jsonview/components/json-panel.js @@ -59,10 +59,19 @@ define(function(require, exports, module) { return json.indexOf(this.props.searchFilter) >= 0; }, - render: function() { - let content; - let data = this.props.data; + 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(props); + }, + + renderTree: function() { // Append custom column for displaying values. This column // Take all available horizontal space. let columns = [{ @@ -70,18 +79,23 @@ define(function(require, exports, module) { width: "100%" }]; + // Render tree component. + return TreeView({ + object: this.props.data, + mode: "tiny", + onFilter: this.onFilter.bind(this), + columns: columns, + renderValue: this.renderValue + }); + }, + + render: function() { + let content; + let data = this.props.data; + try { if (typeof data == "object") { - // Render tree component. Use Reps to render JSON values. - content = TreeView({ - object: this.props.data, - mode: "tiny", - onFilter: this.onFilter.bind(this), - columns: columns, - renderValue: props => { - return Rep(props); - } - }); + content = this.renderTree(); } else { content = div({className: "jsonParseError"}, data + "" diff --git a/devtools/client/jsonview/test/browser_jsonview_valid_json.js b/devtools/client/jsonview/test/browser_jsonview_valid_json.js index 7541233ad7e8..87dab3cabd18 100644 --- a/devtools/client/jsonview/test/browser_jsonview_valid_json.js +++ b/devtools/client/jsonview/test/browser_jsonview_valid_json.js @@ -19,4 +19,12 @@ add_task(function* () { let countAfter = yield getElementCount(".jsonPanelBox .treeTable .treeRow"); ok(countAfter == 3, "There must be three rows"); + + let objectCellCount = yield getElementCount( + ".jsonPanelBox .treeTable .objectCell"); + ok(objectCellCount == 1, "There must be one object cell"); + + let objectCellText = yield getElementText( + ".jsonPanelBox .treeTable .objectCell"); + ok(objectCellText == "", "The summary is hidden when object is expanded"); }); diff --git a/devtools/client/shared/components/tree/tree-view.css b/devtools/client/shared/components/tree/tree-view.css index 0b39cee1e319..36a22b8f2275 100644 --- a/devtools/client/shared/components/tree/tree-view.css +++ b/devtools/client/shared/components/tree/tree-view.css @@ -19,7 +19,7 @@ .treeTable .treeLabelCell { padding: 2px 0 2px 0px; - vertical-align: middle; + vertical-align: top; white-space: nowrap; }