From f95d017126fcc5cc0c974e646d93a812a5f96d8d Mon Sep 17 00:00:00 2001 From: Lin Clark Date: Tue, 20 Sep 2016 11:37:03 -0700 Subject: [PATCH] Bug 1302873 - New console frontend: Remove quotes around strings. r=nchevobbe MozReview-Commit-ID: JKw5URD5nkV --- .../client/shared/components/reps/string.js | 14 +++++++++++-- .../test/mochitest/test_reps_string.html | 10 ++++----- .../components/grip-message-body.js | 21 ++++++++++++++----- .../message-types/console-api-call.js | 18 ++++++++++++++-- .../test/components/console-api-call.test.js | 3 +-- 5 files changed, 50 insertions(+), 16 deletions(-) diff --git a/devtools/client/shared/components/reps/string.js b/devtools/client/shared/components/reps/string.js index 506b4c3e957c9..beb15b127367a 100644 --- a/devtools/client/shared/components/reps/string.js +++ b/devtools/client/shared/components/reps/string.js @@ -21,6 +21,16 @@ define(function (require, exports, module) { const StringRep = React.createClass({ displayName: "StringRep", + propTypes: { + useQuotes: React.PropTypes.bool, + }, + + getDefaultProps: function () { + return { + useQuotes: true, + }; + }, + render: function () { let text = this.props.object; let member = this.props.member; @@ -35,8 +45,8 @@ define(function (require, exports, module) { let croppedString = this.props.cropLimit ? cropMultipleLines(text, this.props.cropLimit) : cropMultipleLines(text); - let formattedString = this.props.omitQuotes ? - croppedString : "\"" + croppedString + "\""; + let formattedString = this.props.useQuotes ? + "\"" + croppedString + "\"" : croppedString; return ( span({className: "objectBox objectBox-string"}, formattedString diff --git a/devtools/client/shared/components/test/mochitest/test_reps_string.html b/devtools/client/shared/components/test/mochitest/test_reps_string.html index 82bcd72fb60a8..77366f27d6442 100644 --- a/devtools/client/shared/components/test/mochitest/test_reps_string.html +++ b/devtools/client/shared/components/test/mochitest/test_reps_string.html @@ -27,7 +27,7 @@ yield testMultiline(); yield testMultilineOpen(); yield testMultilineLimit(); - yield testOmitQuotes(); + yield testUseQuotes(); } catch(e) { ok(false, "Got an error: " + DevToolsUtils.safeErrorString(e)); } finally { @@ -49,9 +49,9 @@ is(renderedComponent.textContent, "\"aaaaaaaaaaaaaaaaaaaaa\nbbbbbbbbbbbbbbbbbbb\ncccccccccccccccc\n\"", "String rep has expected text content for multiline string when open"); } - function testOmitQuotes(){ - const renderedComponent = renderComponent(StringRep.rep, { object: getGripStub("testOmitQuotes"), omitQuotes: true }); - is(renderedComponent.textContent, "abc","String rep has expected to omit quotes"); + function testUseQuotes(){ + const renderedComponent = renderComponent(StringRep.rep, { object: getGripStub("testUseQuotes"), useQuotes: false }); + is(renderedComponent.textContent, "abc","String rep was expected to omit quotes"); } function getGripStub(name) { @@ -59,7 +59,7 @@ case "testMultiline": return "aaaaaaaaaaaaaaaaaaaaa\nbbbbbbbbbbbbbbbbbbb\ncccccccccccccccc\n"; break; - case "testOmitQuotes": + case "testUseQuotes": return "abc"; } } diff --git a/devtools/client/webconsole/new-console-output/components/grip-message-body.js b/devtools/client/webconsole/new-console-output/components/grip-message-body.js index 67cc443014bb7..d7d180461a74a 100644 --- a/devtools/client/webconsole/new-console-output/components/grip-message-body.js +++ b/devtools/client/webconsole/new-console-output/components/grip-message-body.js @@ -19,6 +19,7 @@ const { } = require("devtools/client/shared/vendor/react"); const { createFactories } = require("devtools/client/shared/components/reps/rep-utils"); const { Rep } = createFactories(require("devtools/client/shared/components/reps/rep")); +const StringRep = createFactories(require("devtools/client/shared/components/reps/string").StringRep).rep; const VariablesViewLink = createFactory(require("devtools/client/webconsole/new-console-output/components/variables-view-link").VariablesViewLink); const { Grip } = require("devtools/client/shared/components/reps/grip"); @@ -33,11 +34,21 @@ GripMessageBody.propTypes = { }; function GripMessageBody(props) { - return Rep({ - object: props.grip, - objectLink: VariablesViewLink, - defaultRep: Grip - }); + const { grip } = props; + + return ( + // @TODO once there is a longString rep, also turn off quotes for those. + typeof grip === "string" + ? StringRep({ + object: grip, + useQuotes: false + }) + : Rep({ + object: grip, + objectLink: VariablesViewLink, + defaultRep: Grip + }) + ); } module.exports.GripMessageBody = GripMessageBody; diff --git a/devtools/client/webconsole/new-console-output/components/message-types/console-api-call.js b/devtools/client/webconsole/new-console-output/components/message-types/console-api-call.js index 3367e5d8e05da..83fc616166bc0 100644 --- a/devtools/client/webconsole/new-console-output/components/message-types/console-api-call.js +++ b/devtools/client/webconsole/new-console-output/components/message-types/console-api-call.js @@ -41,10 +41,10 @@ function ConsoleApiCall(props) { if (type === "trace") { messageBody = dom.span({ className: "cm-variable" }, "console.trace()"); } else if (type === "assert") { - let reps = parameters.map((grip, key) => GripMessageBody({ grip, key })); + let reps = formatReps(parameters); messageBody = dom.span({ className: "cm-variable" }, "Assertion failed: ", reps); } else if (parameters) { - messageBody = parameters.map((grip, key) => GripMessageBody({ grip, key })); + messageBody = formatReps(parameters); } else { messageBody = message.messageText; } @@ -117,4 +117,18 @@ function ConsoleApiCall(props) { ); } +function formatReps(parameters) { + return ( + parameters + // Get all the grips. + .map((grip, key) => GripMessageBody({ grip, key })) + // Interleave spaces. + .reduce((arr, v, i) => { + return i + 1 < parameters.length + ? arr.concat(v, dom.span({}, " ")) + : arr.concat(v); + }, []) + ); +} + module.exports.ConsoleApiCall = ConsoleApiCall; diff --git a/devtools/client/webconsole/new-console-output/test/components/console-api-call.test.js b/devtools/client/webconsole/new-console-output/test/components/console-api-call.test.js index 93690e52e2037..b07fc4908080d 100644 --- a/devtools/client/webconsole/new-console-output/test/components/console-api-call.test.js +++ b/devtools/client/webconsole/new-console-output/test/components/console-api-call.test.js @@ -24,8 +24,7 @@ describe("ConsoleAPICall component:", () => { const message = stubPreparedMessages.get("console.log('foobar', 'test')"); const wrapper = render(ConsoleApiCall({ message, onViewSourceInDebugger })); - // @TODO should output: foobar test - expect(wrapper.find(".message-body").text()).toBe("\"foobar\"\"test\""); + expect(wrapper.find(".message-body").text()).toBe("foobar test"); expect(wrapper.find(".objectBox-string").length).toBe(2); expect(wrapper.find("div.message.cm-s-mozilla span span.message-flex-body span.message-body.devtools-monospace").length).toBe(1); });