1200073 - [Computed view] Should NOT overlap elements

Status: VERIFIED FIXED

(DevTools :: Inspector, defect)

Description

[magicp]

Attachment: dom-inspector-computed-overlap-elements.png

User Agent: Mozilla/5.0 (Windows NT 10.0; WOW64; rv:43.0) Gecko/20100101 Firefox/43.0
Build ID: 20150830030224

Steps to reproduce:

1. Run Firefox 41.0 beta (and later)
2. Open DOM Inspector - Computed view
3. Change pane width narrowed


Actual results:

Search box and checkbox is overlapped.


Expected results:

Should NOT overlap elements. Firefox 40.0 works well.

Comment 1

[arni2033]

Regression between 40 and 41

Comment 2

[Ryan VanderMeulen [:RyanVM]]

Regression range: https://hg.mozilla.org/integration/fx-team/pushloghtml?fromchange=adfcc00a27344b20383a5550b90823325b0f9e51&tochange=28828f076fcac6fff033057602f2d2137659a742

Caused by bug 987365 from the looks of it. Thanks for the report!

Comment 3

[Ryan VanderMeulen [:RyanVM]]

Gabriel's internship is over, so redirecting the request to Brian.

Comment 4

[Brian Grinstead [:bgrins]]

Looks like it may be some weird interaction between css flex and xul flex with the text input and the checkbox

Comment 5

[Brian Grinstead [:bgrins]]

Attachment: MozReview Request: Bug 1200073 - Use extra space before the computed view checkbox so it's not touching the sibling text input;r=pbrosset

Bug 1200073 - Use extra space before the computed view checkbox so it's not touching the sibling text input;r=pbrosset

Comment 6

[Brian Grinstead [:bgrins]]

I don't fully get why this is happening, but this is a simple css change that fixes it for me locally

Comment 7

[Patrick Brosset <:pbro>]

Comment on attachment 8675168 [details]
MozReview Request: Bug 1200073 - Use extra space before the computed view checkbox so it's not touching the sibling text input;r=pbrosset

https://reviewboard.mozilla.org/r/22339/#review19955

Comment 8

[Pulsebot]

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

Comment 9

[Carsten Book [:Tomcat]]

https://hg.mozilla.org/mozilla-central/rev/c87fabaa02a5

Comment 10

[magicp]

Attachment: checkbox-overlaps-at-placeholder.png

Checkbox still overlaps at placeholder. Please find attached image.

Comment 11

[arni2033]

Ok I looked closely and found out that the same is happening with filter field in ruleview.
Currently inner input (.devtools-searchinput) has "margin: 1px 3px;", and .devtools-searchbox (parent element) has "padding:0px;".
Removing margin-left/right from search input and adding the same padding to searchbox solves the issue
Example of CSS which works for me:
>   .devtools-searchbox   { -moz-padding-start: 3px !important; }
>   .devtools-searchbox   { -moz-padding-end:   3px !important; }
>   .devtools-searchinput { -moz-margin-start:  0px !important; }
>   .devtools-searchinput { -moz-margin-end:    0px !important; }

Comment 12

[Brian Grinstead [:bgrins]]

(In reply to arni2033 from comment #11)
> Ok I looked closely and found out that the same is happening with filter
> field in ruleview.
> Currently inner input (.devtools-searchinput) has "margin: 1px 3px;", and
> .devtools-searchbox (parent element) has "padding:0px;".
> Removing margin-left/right from search input and adding the same padding to
> searchbox solves the issue
> Example of CSS which works for me:
> >   .devtools-searchbox   { -moz-padding-start: 3px !important; }
> >   .devtools-searchbox   { -moz-padding-end:   3px !important; }
> >   .devtools-searchinput { -moz-margin-start:  0px !important; }
> >   .devtools-searchinput { -moz-margin-end:    0px !important; }

Yeah I think Comment 10 this is a separate, existing bug unrelated to Bug 987365.  I'll file a new bug for that

Comment 13

[arni2033]

(In reply to Brian Grinstead [:bgrins] from comment #12)
> (In reply to arni2033 from comment #11)
> Yeah I think Comment 10 this is a separate, existing bug unrelated to Bug
> 987365.  I'll file a new bug for that
There was a misunderstanding, but now I understand what's happening.

Comment 14

[magicp]

Fixed by...
bug 1216569
bug 1216615

Thanks all!