[Computed view] Should NOT overlap elements

VERIFIED FIXED in Firefox 44

Status

--
minor
VERIFIED FIXED
3 years ago
6 months ago

People

(Reporter: magicp.jp, Assigned: bgrins)

Tracking

({regression})

43 Branch
Firefox 44
regression

Firefox Tracking Flags

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

Details

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

Attachments

(3 attachments)

(Reporter)

Description

3 years ago
Created attachment 8654674 [details]
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.
(Reporter)

Updated

3 years ago
Component: Untriaged → Developer Tools: Inspector

Comment 1

3 years ago
Regression between 40 and 41
Severity: normal → minor
Status: UNCONFIRMED → NEW
status-firefox41: --- → affected
status-firefox42: --- → affected
status-firefox43: --- → affected
status-firefox44: --- → affected
Ever confirmed: true
Keywords: regression, regressionwindow-wanted
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!
Blocks: 987365
status-firefox41: affected → wontfix
Flags: needinfo?(gabriel.luong)
Keywords: regressionwindow-wanted
(Assignee)

Updated

3 years ago
Whiteboard: [polish-backlog][difficulty=easy]
Gabriel's internship is over, so redirecting the request to Brian.
Flags: needinfo?(gabriel.luong) → needinfo?(bgrinstead)
(Assignee)

Comment 4

3 years ago
Looks like it may be some weird interaction between css flex and xul flex with the text input and the checkbox
(Assignee)

Comment 5

3 years ago
Created 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

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)
(Assignee)

Comment 6

3 years ago
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+
(Assignee)

Updated

3 years ago
Keywords: checkin-needed
https://hg.mozilla.org/mozilla-central/rev/c87fabaa02a5
Status: ASSIGNED → RESOLVED
Last Resolved: 3 years ago
status-firefox44: affected → fixed
Resolution: --- → FIXED
Target Milestone: --- → Firefox 44
(Reporter)

Comment 10

3 years ago
Created attachment 8675989 [details]
checkbox-overlaps-at-placeholder.png

Checkbox still overlaps at placeholder. Please find attached image.
(Reporter)

Updated

3 years ago
Status: RESOLVED → REOPENED
status-firefox44: fixed → affected
Resolution: FIXED → ---

Comment 11

3 years ago
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; }
(Assignee)

Comment 12

3 years ago
(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
Last Resolved: 3 years ago3 years ago
Resolution: --- → FIXED
(Assignee)

Updated

3 years ago
See Also: → bug 1216569

Comment 13

3 years ago
(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: → bug 1216615
(Reporter)

Comment 14

3 years ago
Fixed by...
bug 1216569
bug 1216615

Thanks all!
Status: RESOLVED → VERIFIED

Updated

6 months ago
Product: Firefox → DevTools
You need to log in before you can comment on or make changes to this bug.