Bug 1410071 - Remove space between user styled messages parts; r=bgrins.

The %c marker is only valid for the first argument, so if we find ourselves
between two parameters with user-styled messages, it means we should respect
the original formatting.

MozReview-Commit-ID: 4GORZyvvxRN

--HG--
extra : rebase_source : 11adda5e3a18a7e52a02bdbcf1a18a5bfee6ee2c

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

@@ -151,7 +151,12 @@ function formatReps(options = {}) {
       }))
       // 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);
       }, [])

devtools/client/webconsole/new-console-output/test/components/console-api-call.test.js

@@ -220,9 +220,9 @@ describe("ConsoleAPICall component:", () => {
     it("renders group with custom style", () => {
       const message = stubPreparedMessages.get("console.group(%cfoo%cbar)");
       const wrapper = render(ConsoleApiCall({ message, serviceContainer }));
+      expect(wrapper.find(".message-body").text()).toBe("foobar");
 
       const elements = wrapper.find(".objectBox-string");
-      expect(elements.text()).toBe("foobar");
       expect(elements.length).toBe(2);
 
       const firstElementStyle = elements.eq(0).prop("style");