Bug 1302873 - New console frontend: Remove quotes around strings. r=n…

…chevobbe MozReview-Commit-ID: JKw5URD5nkV
dothq · Sep 20, 2016 · f95d017 · f95d017
1 parent f65c22b
commit f95d017
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 16 deletions.
diff --git 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
@@ -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,17 +49,17 @@
     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) {
     switch (name) {
       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
@@ -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
@@ -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
@@ -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);
     });