Bug 1403977 - [WIP] Wrap reps in a non-flex layout parent.r= draft
authorNicolas Chevobbe <nchevobbe@mozilla.com>
Fri, 20 Oct 2017 12:15:17 +0200
changeset 683869 be96efa0009e9b55129bf048291df9e4712b578b
parent 683099 341422bad661f6045b299a968e272c11758e243c
child 736739 5cfe26906d8471070e09b3a90a9a012e7d095728
push id85476
push userbmo:nchevobbe@mozilla.com
push dateFri, 20 Oct 2017 10:15:57 +0000
bugs1403977
milestone58.0a1
Bug 1403977 - [WIP] Wrap reps in a non-flex layout parent.r= MozReview-Commit-ID: BLQYsMAmgNP
devtools/client/webconsole/new-console-output/components/message-types/ConsoleApiCall.js
--- a/devtools/client/webconsole/new-console-output/components/message-types/ConsoleApiCall.js
+++ b/devtools/client/webconsole/new-console-output/components/message-types/ConsoleApiCall.js
@@ -70,17 +70,23 @@ function ConsoleApiCall(props) {
     messageBody = dom.span({className: "cm-variable"}, "console.trace()");
   } else if (type === "assert") {
     let reps = formatReps(messageBodyConfig);
     messageBody = dom.span({ className: "cm-variable" }, "Assertion failed: ", reps);
   } else if (type === "table") {
     // TODO: Chrome does not output anything, see if we want to keep this
     messageBody = dom.span({className: "cm-variable"}, "console.table()");
   } else if (parameters) {
-    messageBody = formatReps(messageBodyConfig);
+    const reps = formatReps(messageBodyConfig);
+    // Wraps reps if there are more than 1 so strings are not using a flex layout.
+    // This is important to respect the original formatting of messages when using
+    // custom styles. See Bug 1403977.
+    messageBody = reps.length > 1
+      ? dom.span({className: "parameters-wrapper"}, reps)
+      : reps;
   } else {
     messageBody = messageText;
   }
 
   let attachment = null;
   if (type === "table") {
     attachment = ConsoleTable({
       dispatch,
@@ -146,17 +152,22 @@ function formatReps(options = {}) {
         serviceContainer,
         useQuotes: false,
         loadedObjectProperties,
         loadedObjectEntries,
         type,
       }))
       // Interleave spaces.
       .reduce((arr, v, i) => {
-        return i + 1 < parameters.length
+        // We need to interleave a space if we are not on the last element AND
+        // if we are not between 2 messages with user provided style.
+        const needSpace = i + 1 < parameters.length &&
+          (!userProvidedStyles || !userProvidedStyles[i] || !userProvidedStyles[i + 1]);
+
+        return needSpace
           ? arr.concat(v, dom.span({}, " "))
           : arr.concat(v);
       }, [])
   );
 }
 
 module.exports = ConsoleApiCall;