Closed Bug 1403977 Opened 3 years ago Closed 3 years ago

Multiple styled messages lose line breaks

Categories

(DevTools :: Console, defect, P1)

55 Branch
defect

Tracking

(Not tracked)

RESOLVED FIXED
Firefox 59

People

(Reporter: gregtatum, Assigned: bgrins)

References

Details

(Whiteboard: [reserve-console-html])

Attachments

(4 files, 1 obsolete file)

Doing multiple %c styles in a console.log message does not use the line breaks. This is particularly bad in a library that spits out nicely formatted messages.

Correct:
  console.log(
    "%cfoo \n%cbar"
  )
  ➡ %cfoo 
  ➡ %cbar

Correct:
  console.log(
    "%cfoo \nbar",
    "color: red"
  )
  ➡ foo 
  ➡ bar

Incorrect:
  console.log(
    "%cfoo \n%cbar",
    "color: red", "color: blue"
  )
  ➡ foo bar

Expected behavior
  console.log(
    "%cfoo \n%cbar",
    "color: red", "color: blue"
  )
  ➡ foo
  ➡ bar
This is new frontend / reps specific - the packet looks fine and it renders as expected in the Browser Console
Whiteboard: [console-html]
Whiteboard: [console-html] → [console-html] [triage]
Priority: -- → P4
Whiteboard: [console-html] [triage] → [reserve-console-html]
Attached image newline-params.png
When looking at this I found another weird case without custom styling:

console.log(
    "foo",
    "bar"
  )

Logs bar before foo
(In reply to Brian Grinstead [:bgrins] from comment #3)
> Created attachment 8925715 [details]
> newline-params.png
> 
> When looking at this I found another weird case without custom styling:
> 
> console.log(
>     "foo",
>     "bar"
>   )
> 
> Logs bar before foo

"bar" is not really before foo, the html element *is* after bar, but it is aligned top : 
```
+----+-----+
|"   |"bar"|
|foo"|     |
+----+-----+

```

Adding `align-items: end;` in http://searchfox.org/mozilla-central/rev/7e090b227f7a0ec44d4ded604823d48823158c51/devtools/client/themes/webconsole.css#925-929 fix this issue, but we have to check that it does not affect other types of messages.
Nicolas, this is more of a feedback request as I haven't done a lot of manual testing beyond the fix for this bug and am still awaiting screenshot results. If you notice any logs that are broken let me know and I'll add it into the screenshots job.
Comment on attachment 8926943 [details]
Bug 1403977 - Show taller toolbox for tool-specific screenshots;

https://reviewboard.mozilla.org/r/198194/#review203500

Thanks
Attachment #8926943 - Flags: review?(MattN+bmo) → review+
Assignee: nobody → bgrinstead
Status: NEW → ASSIGNED
Priority: P4 → P1
Not sure what's going on with the Windows 7 changes in the second push - it looks like the two builds were running with different system themes
Comment on attachment 8927046 [details]
Bug 1403977 - Switch to inline-block for message-body and children;

https://reviewboard.mozilla.org/r/198258/#review204056

Did some testing and everything seems good
Attachment #8927046 - Flags: review?(nchevobbe) → review+
(In reply to Nicolas Chevobbe [:nchevobbe] from comment #14)
> Did some testing and everything seems good

Thanks for testing. Let's land it after the merge today just in case something comes up.
Attachment #8920529 - Attachment is obsolete: true
Pushed by bgrinstead@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/45ee82268d2d
Show taller toolbox for tool-specific screenshots;r=MattN
https://hg.mozilla.org/integration/autoland/rev/43948076a0a6
Switch to inline-block for message-body and children;r=nchevobbe
https://hg.mozilla.org/mozilla-central/rev/45ee82268d2d
https://hg.mozilla.org/mozilla-central/rev/43948076a0a6
Status: ASSIGNED → RESOLVED
Closed: 3 years ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 59
Duplicate of this bug: 1428294
Product: Firefox → DevTools
You need to log in before you can comment on or make changes to this bug.