763865 - Layout tool is not positioned correctly when it is collapsed

Status: VERIFIED FIXED

(DevTools :: General, defect, P1)

Description

[Paul Silaghi, QA [:pauly]]

Attachment: layout-bad

STR:
1. Open the Inspector
2. Click on "Style"

Actual results:
The Layout tool is collapsed too much - see layout-bad.png

Expected results:
layout-good.png
Expanding and then collapsing again the tool fix the problem

Comment 1

[Paul Silaghi, QA [:pauly]]

Attachment: layout-good

Comment 2

[Paul Rouget [:paul]]

Can you reproduce on Firefox Nightly?
Did it happen once or it happens every time?

Comment 3

[Paul Rouget [:paul]]

I can't reproduce here. Can you reproduce on Mac and/or Linux?

Comment 4

[Paul Silaghi, QA [:pauly]]

I can always reproduce it on all platforms. Same behavior on Nightly.

Comment 5

[Paul Silaghi, QA [:pauly]]

In order to reproduce this, make sure the Layout tool didn't remain expanded from a previous use. It should be collapsed when opening the inspector/style, this happens only then.

Comment 6

[Loic]

(In reply to Paul Rouget [:paul] from comment #3)
> I can't reproduce here. Can you reproduce on Mac and/or Linux?

My STR on Win 7 with Nightly:

1) Open about:home
2) Enable Web Developer > Responsive Mode (or Ctrl+Shift+M)
3) Enable Web Developer > Inspect (or Ctrl+Shift+I)

The footer of the layout tool is collapsed too much.
Click on a page element to inspect, the footer returns to its normal height.

Comment 7

[Paul Rouget [:paul]]

Attachment: v1

Comment 8

[Paul Rouget [:paul]]

Comment on attachment 634917 [details] [diff] [review]
v1

That works. I would prefer to do that in CSS, but not sure how.

Comment 9

[Dave Camp (:dcamp)]

What does this do, exactly?

Comment 10

[Paul Rouget [:paul]]

(In reply to Dave Camp (:dcamp) from comment #9)
> What does this do, exactly?

This adds an inline element, forcing its parents to get the correct height.
But I guess we don't need to have the full height, only the correct position.

Comment 11

[Paul Rouget [:paul]]

Attachment: v2

Comment 12

[Paul Rouget [:paul]]

So apparently, using `vertical-align:top` works.

But I don't understand why there's a gap in the first place.
See http://bl.ocks.org/d/2964774/bug.html (gap between the red line and the dotted line).
As soon as you add content to the span or use vertical-align:top, the gap disappears.

Comment 13

[Paul Rouget [:paul]]

And we probably want to get that in Aurora as well.

Comment 14

[Paul Rouget [:paul]]

Comment on attachment 635226 [details] [diff] [review]
v2

[Approval Request Comment]
Bug caused by (feature/regressing bug #): new feature
User impact if declined: layout view UI looks weird
Testing completed (on m-c, etc.): local
Risk to taking this patch (and alternatives if risky): One CSS line 
String or UUID changes made by this patch: no

Comment 15

[Paul Rouget [:paul]]

https://hg.mozilla.org/integration/fx-team/rev/848ac784a4ba

Comment 16

[Panos Astithas (he/him) [:past] (please ni?)]

https://hg.mozilla.org/mozilla-central/rev/848ac784a4ba

Comment 17

[Paul Silaghi, QA [:pauly]]

Verified fixed on Nightly 16.0a1 (2012-06-26) on Win 7, Ubuntu 12.04 and Mac OS X 10.6.

Comment 18

[Alex Keybl [:akeybl]]

Comment on attachment 635226 [details] [diff] [review]
v2

[Triage Comment]
Looks super low risk. Approved for Aurora 15.

Comment 19

[Panos Astithas (he/him) [:past] (please ni?)]

https://hg.mozilla.org/releases/mozilla-aurora/rev/1c5edd36d1fd

Comment 20

[Paul Silaghi, QA [:pauly]]

Verified fixed on Aurora 15.0a2 (2012-07-01) on Win 7, Ubuntu 12.04 and Mac OS X 10.6.