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

Status: VERIFIED FIXED

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

Description

[Mihai Boldan, Desktop QA [:mboldan]]

Attachment: 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.

Comment 1

[Mihai Boldan, Desktop QA [:mboldan]]

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.

Comment 2

[J. Ryan Stinnett [:jryans] (Use needinfo, replies may be slow)]

Not really a regression, since bug 1241720 was what landed the checkboxes initially.

Comment 3

[Jaideep Bhoosreddy [:jbhoosreddy]]

Attachment: 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.

Comment 4

[Helen V. Holmes (:helenvholmes) (:✨)]

(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.

Comment 5

[Jaideep Bhoosreddy [:jbhoosreddy]]

Attachment: 1278909.patch [1.0]

This is a better solution, using flex. I also explicitly specified the font because different OS have different default font-size values.

Comment 6

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/fx-team/rev/cdf597c785e4
Realigning checkbox and label in RDM Device Modal; r=helenvholmes

Comment 7

[Carsten Book [:Tomcat]]

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

Comment 8

[Mihai Boldan, Desktop QA [:mboldan]]

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.