DevTools: fix console style formatter regressions
This CL addresses vertical alignment, horizontal overflow, and the
creation of newlines in Console logs that use the style formatter.
Very long fragments still break into their own block, due to the
`contain: paint` rule.
Screenshot: https://imgur.com/a/QiNbvIT
Bug: 810581
Change-Id: Iefb5533d5696a7b91e3ff9863af67740a8e07225
Reviewed-on: https://chromium-review.googlesource.com/1058394
Reviewed-by: Dmitry Gozman <[email protected]>
Commit-Queue: Erik Luo <[email protected]>
Cr-Original-Commit-Position: refs/heads/master@{#559700}
Cr-Mirrored-From: https://chromium.googlesource.com/chromium/src
Cr-Mirrored-Commit: cf20524aad95b76a21447a354926a313f6e618f4diff --git a/front_end/console/ConsoleViewMessage.js b/front_end/console/ConsoleViewMessage.js
index 4862be3..1ae2871 100644
--- a/front_end/console/ConsoleViewMessage.js
+++ b/front_end/console/ConsoleViewMessage.js
@@ -850,27 +850,36 @@
* @param {!Element} a
* @param {*} b
* @this {!Console.ConsoleViewMessage}
+ * @return {!Element}
*/
function append(a, b) {
if (b instanceof Node) {
a.appendChild(b);
- } else if (typeof b !== 'undefined') {
- let toAppend = Console.ConsoleViewMessage._linkifyStringAsFragment(String(b));
- if (currentStyle) {
- const wrapper = createElement('span');
- wrapper.style.setProperty('contain', 'paint');
- wrapper.style.setProperty('display', 'inline-block');
- wrapper.appendChild(toAppend);
- applyCurrentStyle(wrapper);
- for (const child of wrapper.children) {
- if (child.classList.contains('devtools-link'))
- this._applyForcedVisibleStyle(child);
- else
- applyCurrentStyle(child);
- }
- toAppend = wrapper;
+ return a;
+ }
+ if (typeof b === 'undefined')
+ return a;
+ if (!currentStyle) {
+ a.appendChild(Console.ConsoleViewMessage._linkifyStringAsFragment(String(b)));
+ return a;
+ }
+ const lines = String(b).split('\n');
+ for (let i = 0; i < lines.length; i++) {
+ const line = lines[i];
+ const lineFragment = Console.ConsoleViewMessage._linkifyStringAsFragment(line);
+ const wrapper = createElement('span');
+ wrapper.style.setProperty('contain', 'paint');
+ wrapper.style.setProperty('display', 'inline-block');
+ wrapper.style.setProperty('max-width', '100%');
+ wrapper.appendChild(lineFragment);
+ applyCurrentStyle(wrapper);
+ for (const child of wrapper.children) {
+ if (child.classList.contains('devtools-link'))
+ this._applyForcedVisibleStyle(child);
}
- a.appendChild(toAppend);
+ a.appendChild(wrapper);
+ if (i < lines.length - 1)
+ a.appendChild(createElement('br'));
}
return a;
}
