Bug 1307906 - add newline and spaces in console msg for clipboard;r=nchevobbe

MozReview-Commit-ID: 51djydkJx4R

--HG--
extra : rebase_source : e324081347a647e27f276d0cedd3f5f2268203f2

devtools/client/webconsole/new-console-output/components/message.js

@@ -201,13 +201,17 @@ const Message = createClass({
       collapse,
       dom.span({ className: "message-body-wrapper" },
         dom.span({ className: "message-flex-body" },
-          dom.span({ className: "message-body devtools-monospace" },
+          // Add whitespaces for formatting when copying to the clipboard.
+          " ", dom.span({ className: "message-body devtools-monospace" },
             messageBody,
             learnMore
           ),
-          repeat,
-          location
+          " ", repeat,
+          " ", location
         ),
+        // Add a newline for formatting when copying to the clipboard.
+        "\n",
+        // If an attachment is displayed, the final newline is handled by the attachment.
         attachment
       )
     );

devtools/client/webconsole/new-console-output/test/mochitest/browser_webconsole_context_menu_copy_entire_message.js

@@ -5,10 +5,18 @@
 
 "use strict";
 
+// RegExp that validates copied text for log lines.
+const LOG_FORMAT = /^[\d:.]+ .+ \d+ .+:\d+$/;
+// RegExp that validates copied text for stacktrace lines.
+const TRACE_FORMAT = /^\t.+ .+:\d+:\d+$/;
+
 const TEST_URI = `data:text/html;charset=utf-8,<script>
   window.logStuff = function () {
     console.log("simple text message");
+    function wrapper() {
       console.trace();
+    }
+    wrapper();
   };
 </script>`;
 
@@ -19,47 +27,52 @@ add_task(function* () {
   let hud = yield openNewTabAndConsole(TEST_URI);
   hud.jsterm.clearOutput();
 
+  info("Call the log function defined in the test page");
   yield ContentTask.spawn(gBrowser.selectedBrowser, null, () => {
     content.wrappedJSObject.logStuff();
   });
 
-  let messages = [];
-  for (let s of ["simple text message", "console.trace()"]) {
-    messages.push(yield waitFor(() => findMessage(hud, s)));
-  }
+  info("Test copy menu item for the simple log");
+  let message = yield waitFor(() => findMessage(hud, "simple text message"));
+  let clipboardText = yield copyMessageContent(hud, message);
+  ok(true, "Clipboard text was found and saved");
 
-  for (let message of messages) {
+  info("Check copied text for simple log message");
+  let lines = clipboardText.split("\n");
+  ok(lines.length, 2, "There are 2 lines in the copied text");
+  is(lines[1], "", "The last line is an empty new line");
+  ok(LOG_FORMAT.test(lines[0]), "Log line has the right format:\n" + lines[0]);
+
+  info("Test copy menu item for the stack trace message");
+  message = yield waitFor(() => findMessage(hud, "console.trace"));
+  clipboardText = yield copyMessageContent(hud, message);
+  ok(true, "Clipboard text was found and saved");
+
+  info("Check copied text for stack trace message");
+  lines = clipboardText.split("\n");
+  ok(lines.length, 4, "There are 4 lines in the copied text");
+  is(lines[3], "", "The last line is an empty new line");
+  ok(LOG_FORMAT.test(lines[0]), "Log line has the right format:\n" + lines[0]);
+  ok(TRACE_FORMAT.test(lines[1]), "Stacktrace line has the right format:\n" + lines[1]);
+  ok(TRACE_FORMAT.test(lines[2]), "Stacktrace line has the right format:\n" + lines[2]);
+});
+
+/**
+ * Simple helper method to open the context menu on a given message, and click on the copy
+ * menu item.
+ */
+function* copyMessageContent(hud, message) {
   let menuPopup = yield openContextMenu(hud, message);
   let copyMenuItem = menuPopup.querySelector("#console-menu-copy");
   ok(copyMenuItem, "copy menu item is enabled");
 
+  let clipboardText;
   yield waitForClipboardPromise(
     () => copyMenuItem.click(),
-      data => data === message.textContent
-    );
-
-    ok(true, "Clipboard text was found and saved");
-
-    // TODO: The copy menu item & this test should be improved for the new console.
-    // This is tracked by https://bugzilla.mozilla.org/show_bug.cgi?id=1329606 .
-
-    // The rest of this test was copied from the old console frontend. The copy menu item
-    // logic is not on par with the one from the old console yet.
-
-    // let lines = clipboardText.split("\n");
-    // ok(lines.length > 0, "There is at least one newline in the message");
-    // is(lines.pop(), "", "There is a newline at the end");
-    // is(lines.length, result.lines, `There are ${result.lines} lines in the message`);
-
-    // // Test the first line for "timestamp message repeat file:line"
-    // let firstLine = lines.shift();
-    // ok(/^[\d:.]+ .+ \d+ .+:\d+$/.test(firstLine),
-    //   "The message's first line has the right format:\n" + firstLine);
-
-    // // Test the remaining lines (stack trace) for "TABfunctionName sourceURL:line:col"
-    // for (let line of lines) {
-    //   ok(/^\t.+ .+:\d+:\d+$/.test(line),
-    //     "The stack trace line has the right format:\n" + line);
-    // }
+    data => {
+      clipboardText = data;
+      return data === message.textContent;
     }
-});
+  );
+  return clipboardText;
+}