Bug 1311266 - Preserve line breaks for comment node rep in short mode. r=Honza;

Use `cropString` instead of `cropMultipleLines` to keep line breaks.
Edit tests accordingly.

MozReview-Commit-ID: 1fBVqtH0lb

--HG--
extra : rebase_source : deb27449c4e24f8d9258957e32fc1a958f4bc975

devtools/client/shared/components/reps/comment-node.js

@@ -9,7 +9,7 @@
 define(function (require, exports, module) {
   // ReactJS
   const React = require("devtools/client/shared/vendor/react");
-  const { isGrip, cropMultipleLines } = require("./rep-utils");
+  const { isGrip, cropString, cropMultipleLines } = require("./rep-utils");
 
   // Utils
   const nodeConstants = require("devtools/shared/dom-node-constants");
@@ -28,10 +28,6 @@ define(function (require, exports, module) {
       mode: React.PropTypes.string,
     },
 
-    getCroppedTextContent: function (textContent, limit) {
-      return cropMultipleLines(textContent, limit);
-    },
-
     render: function () {
       let {object} = this.props;
 
@@ -39,9 +35,9 @@ define(function (require, exports, module) {
 
       let {textContent} = object.preview;
       if (mode === "tiny") {
-        textContent = this.getCroppedTextContent(textContent, 30);
+        textContent = cropMultipleLines(textContent, 30);
       } else if (mode === "short") {
-        textContent = this.getCroppedTextContent(textContent);
+        textContent = cropString(textContent, 50);
       }
 
       return span({className: "objectBox theme-comment"}, `<!-- ${textContent} -->`);

devtools/client/shared/components/test/mochitest/test_reps_comment-node.html

@@ -33,7 +33,7 @@ window.onload = Task.async(function* () {
         "kind": "DOMNode",
         "nodeType": 8,
         "nodeName": "#comment",
-        "textContent": "test\nand test\nand test\nand test\nand test"
+        "textContent": "test\nand test\nand test\nand test\nand test\nand test\nand test"
       }
     };
 
@@ -47,7 +47,7 @@ window.onload = Task.async(function* () {
     is(renderedComponent.className, "objectBox theme-comment",
       "CommentNode rep has expected class names");
     is(renderedComponent.textContent,
-      `<!-- test\\nand test\\nand test\\nand test\\nand test -->`,
+      `<!-- test\nand test\nand test\nan…d test\nand test\nand test -->`,
       "CommentNode rep has expected text content");
 
     // Test tiny rendering.
@@ -55,7 +55,8 @@ window.onload = Task.async(function* () {
       object: gripStub,
       mode: "tiny"
     });
-    is(tinyRenderedComponent.textContent, `<!-- test\\nand test\\na… test\\nand test -->`,
+    is(tinyRenderedComponent.textContent,
+      `<!-- test\\nand test\\na… test\\nand test -->`,
       "CommentNode rep has expected text content in tiny mode");
 
     // Test long rendering.