Closed Bug 1278909 Opened 4 years ago Closed 4 years ago

The check-boxes and the devices names from the RDM "Edit list..." are misaligned

Categories

(DevTools :: Responsive Design Mode, defect, P1)

50 Branch
defect

Tracking

(firefox47 unaffected, firefox48 unaffected, firefox49 unaffected, firefox50 verified)

VERIFIED FIXED
Iteration:
50.2 - Jul 4
Tracking Status
firefox47 --- unaffected
firefox48 --- unaffected
firefox49 --- unaffected
firefox50 --- verified

People

(Reporter: mboldan, Assigned: jbhoosreddy)

References

Details

(Whiteboard: [multiviewport][reserve-rdm])

Attachments

(2 files, 1 obsolete file)

Attached image misaligned.png
[Affected versions]:
- Firefox 50.0a1 (2016-06-08)

[Affected platforms]:
- Windows 10 x64 and Ubuntu 14.04 x64

[Steps to reproduce]:
1. Launch Firefox.
2. From about:config, enable the devtools.responsive.html.enabled pref.
3. Enable RDM.
4. Click on the "no devices selected" button.
5.Scroll down to the bottom of the list, click on the "Edit list..." button and observe the displayed list.

[Expected result]:
- The list of the devices is correctly displayed.

[Actual result]:
- The check-boxes and the devices names are misaligned (see attached screenshot).

[Regression range]:
- I will search if this is a regression asap.

[Additional notes]:
- This issue is not reproducible on Mac OS X.
QA Whiteboard: [qe-rdm]
I managed to find the regression range:
Last good revision: c1a9497a212d54fda334e9174aac33926196df8e
First bad revision: be1fd1c7e43f3969243b8c768d5dbe6de17f4f7c
Pushlog:
https://hg.mozilla.org/integration/fx-team/pushloghtml?fromchange=c1a9497a212d54fda334e9174aac33926196df8e&tochange=be1fd1c7e43f3969243b8c768d5dbe6de17f4f7c

It seems that the Bug 1241720 caused this issue.
Keywords: regression
Flags: qe-verify+
Priority: -- → P3
Whiteboard: [multiviewport] [triage] → [multiviewport][reserve-rdm]
Not really a regression, since bug 1241720 was what landed the checkboxes initially.
Keywords: regression
Assignee: nobody → jaideepb
Status: NEW → ASSIGNED
Attached patch 1278909.patch (obsolete) — Splinter Review
So, in my opinion, this issue is caused by the font itself and there is not much I could do about that, as far as I know. But this changed makes it appear vertically aligned properly on Windows.
Attachment #8761899 - Flags: review?(gl)
Attachment #8761899 - Flags: ui-review?(hholmes)
(In reply to Jaideep Bhoosreddy [:jbhoosreddy] from comment #3)
> Created attachment 8761899 [details] [diff] [review]
> 1278909.patch
> 
> So, in my opinion, this issue is caused by the font itself and there is not
> much I could do about that, as far as I know. But this changed makes it
> appear vertically aligned properly on Windows.

Jaideep, did changing the line-height property affect it at all?

I feel like there must be other places in source where someone has encountered this issue and had to solve it.
This is a better solution, using flex. I also explicitly specified the font because different OS have different default font-size values.
Attachment #8761899 - Attachment is obsolete: true
Attachment #8761899 - Flags: ui-review?(hholmes)
Attachment #8761899 - Flags: review?(gl)
Attachment #8763692 - Flags: review?(hholmes)
Attachment #8763692 - Flags: review?(hholmes) → review+
Keywords: checkin-needed
Pushed by cbook@mozilla.com:
https://hg.mozilla.org/integration/fx-team/rev/cdf597c785e4
Realigning checkbox and label in RDM Device Modal; r=helenvholmes
Keywords: checkin-needed
Status: ASSIGNED → RESOLVED
Closed: 4 years ago
Resolution: --- → FIXED
Iteration: --- → 50.2 - Jul 4
Priority: P3 → P1
The issue is no longer reproducible on Firefox 50.0a1 (2016-07-03) and on Windows 10 x64, Mac OS X 10.11.1, Ubuntu 14.04 x86.
I am marking this issue Verified Fixed.
Status: RESOLVED → VERIFIED
Flags: qe-verify+
Product: Firefox → DevTools
You need to log in before you can comment on or make changes to this bug.