Closed Bug 1200073 Opened 6 years ago Closed 6 years ago

[Computed view] Should NOT overlap elements

Categories

(DevTools :: Inspector, defect)

43 Branch
defect
Not set
minor

Tracking

(firefox41 wontfix, firefox42 affected, firefox43 affected, firefox44 affected)

VERIFIED FIXED
Firefox 44
Tracking Status
firefox41 --- wontfix
firefox42 --- affected
firefox43 --- affected
firefox44 --- affected

People

(Reporter: magicp.jp, Assigned: bgrins)

References

Details

(Keywords: regression, Whiteboard: [polish-backlog][difficulty=easy])

Attachments

(3 files)

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.
Component: Untriaged → Developer Tools: Inspector
Regression between 40 and 41
Severity: normal → minor
Status: UNCONFIRMED → NEW
Ever confirmed: true
Whiteboard: [polish-backlog][difficulty=easy]
Gabriel's internship is over, so redirecting the request to Brian.
Flags: needinfo?(gabriel.luong) → needinfo?(bgrinstead)
Looks like it may be some weird interaction between css flex and xul flex with the text input and the checkbox
Bug 1200073 - Use extra space before the computed view checkbox so it's not touching the sibling text input;r=pbrosset
Attachment #8675168 - Flags: review?(pbrosset)
I don't fully get why this is happening, but this is a simple css change that fixes it for me locally
Assignee: nobody → bgrinstead
Status: NEW → ASSIGNED
Flags: needinfo?(bgrinstead)
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
Attachment #8675168 - Flags: review?(pbrosset) → review+
Keywords: checkin-needed
https://hg.mozilla.org/mozilla-central/rev/c87fabaa02a5
Status: ASSIGNED → RESOLVED
Closed: 6 years ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 44
Checkbox still overlaps at placeholder. Please find attached image.
Status: RESOLVED → REOPENED
Resolution: FIXED → ---
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; }
(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
Status: REOPENED → RESOLVED
Closed: 6 years ago6 years ago
Resolution: --- → FIXED
See Also: → 1216569
(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.
See Also: → 1216615
Fixed by...
bug 1216569
bug 1216615

Thanks all!
Status: RESOLVED → VERIFIED
Product: Firefox → DevTools
You need to log in before you can comment on or make changes to this bug.