Closed Bug 1386551 Opened 5 years ago Closed 5 years ago

Stacktrace isn't styled properly


(DevTools :: Console, defect, P1)



(firefox55 unaffected, firefox56- verified, firefox57 verified)

Firefox 57
57.1 - Aug 15
Tracking Status
firefox55 --- unaffected
firefox56 - verified
firefox57 --- verified


(Reporter: nchevobbe, Assigned: nchevobbe)


(Whiteboard: [reserve-console-html])


(2 files)

Steps to reproduce:
1. Go to data:text/html,<script>x = () => y(); y = () =>; x();</script>
2. Open the console
2.b There should be an error (foo is not defined)
3. Expand the stacktrace

Expected results:
The stacktrace is nicely formatted like 
> y           data:text/html,<script>x%20=%20()%20=>%20y();%20y%20=%20()%20=>;%20x();</script>:1:26 
> x           data:text/html,<script>x%20=%20()%20=>%20y();%20y%20=%20()%20=>;%20x();</script>:1:11 
> <anonymous> data:text/html,<script>x%20=%20()%20=>%20y();%20y%20=%20()%20=>;%20x();</script>:1:35

Actual results:
Frames are not in a dedicated line (see attachment)


Inspecting the code, it looks like we are not loading the components-frame.css which takes care of the layout for the stack trace.
The file was probably omitted in Bug 1326937.

As part of this bug, maybe we could enhance the mozscreenshot example (or have multiple ones) to catch those bugs
Flags: qe-verify+
Priority: -- → P2
Whiteboard: [console-html][triage]
Assignee: nobody → nchevobbe
Priority: P2 → P1
Comment on attachment 8892801 [details]
Bug 1386551 - Import component-frame.css in new frontend; .

Attachment #8892801 - Flags: review?(bgrinstead) → review+
Iteration: --- → 57.1 - Aug 15
QA Contact: iulia.cristescu
Whiteboard: [console-html][triage] → [reserve-console-html]
Pushed by
Import component-frame.css in new frontend; r=bgrins.
[Tracking Requested - why for this release]: This patch fixes a visual regression on stack traces in the new webconsole UI (which is on in Dev Edition but off in Beta).
Closed: 5 years ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 57
Comment on attachment 8892801 [details]
Bug 1386551 - Import component-frame.css in new frontend; .

Approval Request Comment
[Feature/Bug causing the regression]: Bug 1381630
[User impact if declined]: In Dev Edition, stack traces in the webconsole won't be styled properly
[Is this code covered by automated tests?]: No, this is including a missing CSS file
[Has the fix been verified in Nightly?]: Yes
[Needs manual test from QE? If yes, steps to reproduce]: 
[List of other uplifts needed for the feature/fix]: No
[Is the change risky?]: No
[Why is the change risky/not risky?]: It's affecting only the new webconsole iframe. And it's only loaded in Dev Edition, not beta 
[String changes made/needed]: none
Attachment #8892801 - Flags: approval-mozilla-beta?
Managed to reproduce the initial issue on 57.0a1 (2017-07-13). I can confirm the issue is verified fixed on 57.0a1 (2017-08-09) using Windows 10 x64, Ubuntu 16.04 x64 and Mac OS 10.11.6.
Flags: qe-verify+
Comment on attachment 8892801 [details]
Bug 1386551 - Import component-frame.css in new frontend; .

Nicer stack traces sounds very useful for developers. Let's uplift this to beta. 2.
Attachment #8892801 - Flags: approval-mozilla-beta? → approval-mozilla-beta+
QA Whiteboard: [good first verify]
Also confirm that the issue is fixed on 56.0b2 Devedition (20170810180547) and on 56.0b2 build1 (20170810180547) using Windows 10 x64, Ubuntu 14.04 x64 and Mac OS 10.11.6.
QA Whiteboard: [good first verify]
Since this was verified in 56, no need to track for 56.
Product: Firefox → DevTools
You need to log in before you can comment on or make changes to this bug.