Bug 1403977 - [WIP] Wrap reps in a non-flex layout parent.r=
MozReview-Commit-ID: BLQYsMAmgNP
--- 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;