1414159 - Device modal shouldn't scroll horizontally after adding custom devices

Status: RESOLVED FIXED

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

Description

[Karl Dubost💡 :karlcow]

Attachment: device list in responsive design mode

Click on Responsive Design Mode, Choose the Edit list for devices.
The custom devices are cut out on the right side.

Tested Firefox Nightly 58.0a1 (2017-11-02) (64-bit)

Comment 1

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

Hmm, that is quite interesting...  I can't seem to reproduce it here on macOS, which it seems like you are using?

Do you see the same thing in Beta / 57?

Comment 2

[Karl Dubost💡 :karlcow]

Let me check.

Nope on Firefox 57, the custom list is not in a separate column, but under watches.
I just realized the are can be scrolled vertically or horizontally, but it's a bit weird.

Comment 3

[Karl Dubost💡 :karlcow]

Is there a way to inspect the DOM of this pop up?

Comment 4

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

(In reply to Karl Dubost :karlcow from comment #3)
> Is there a way to inspect the DOM of this pop up?

Yes, you can use the Browser Toolbox to reach the UI like the device modal here.

https://developer.mozilla.org/docs/Tools/Browser_Toolbox

(In reply to Karl Dubost :karlcow from comment #2)
> Nope on Firefox 57, the custom list is not in a separate column, but under
> watches.
> I just realized the are can be scrolled vertically or horizontally, but it's
> a bit weird.

Very curious.  I am aware it somewhat awkwardly scrolls vertically (because it is a fixed size, and the phone column is now too long), but the horizontal scrolling is new to me in this bug, so hopefully we can find the cause!

Comment 5

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

Okay, I see what's happening now.  Once you have at least 7 custom devices defined, it wraps to the next column.

I expect past versions also behave the same, as long as you have that many custom devices.

Comment 6

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

Attachment: Bug 1414159 - Extra modal width for RDM custom devices.

As you add more than 7 or so custom devices, the modal will eventually wrap to
a 4th column.  Adding some more width allows that to happen without a horizontal
scroll bar.

This width looks natural without custom devices as well, and its not too large
for the most popular screen size (1366 x 768).

Review commit: https://reviewboard.mozilla.org/r/197818/diff/#index_header
See other reviews: https://reviewboard.mozilla.org/r/197818/

Comment 8

[Gabriel Luong [:gl] (ΦωΦ)]

Comment on attachment 8926583 [details]
Bug 1414159 - Extra modal width for RDM custom devices.

https://reviewboard.mozilla.org/r/197818/#review204010

Comment 9

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/0dc2628668b2
Extra modal width for RDM custom devices. r=gl

Comment 10

[Natalia Csoregi [:nataliaCs]]

https://hg.mozilla.org/mozilla-central/rev/0dc2628668b2

Comment 11

[Gerry Chang [:gchang]]

Mass won't fix for 58. Let it ride the train.