1343014 - Change dimension's input field to type=number so I can use the mousewheel to decrease/increase

Status: RESOLVED FIXED

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

Description

[Jens]

Attachment: Auswahl_065.png

Would be great if the dimensions' input field could be of type=number so that one  could use the mousewheel to decrease or increase the value more easily. It would also semantically be more correct.

See attachment.

Comment 1

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

Thanks for the report!  Seems like a good idea in general.

I'm not sure we'd want the up / down arrows that I think this triggers, but perhaps we can hide those.

Comment 2

[Jens]

Thanks for considering!

(In reply to J. Ryan Stinnett [:jryans] (use ni?) from comment #1)
> I'm not sure we'd want the up / down arrows

Actually, why not? Of course it shouldn't look awful. But very often I just increase/decrease by small numbers to hit a breakpoint. Currently, the fastest way of doing this is by entering the whole number by hand. The typical up / down arrows would make this easier too – same benefit as using mousewheel somehow.

Comment 3

[Brad Werth [:bradwerth]]

Attachment: Bug 1343014 Part 1: Make RDM viewport dimension inputs have input type "number".

Comment 4

[Brad Werth [:bradwerth]]

I'm not sure this even needs a test. I'll seek review as-is.

Comment 5

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

I don't think a test is necessary for a built-in input feature.

Comment 6

[Brad Werth [:bradwerth]]

Attachment: 3em vs 4em with spinners screenshots.zip

Victoria, we need a user experience judgment, please. It seems like we have two UX options:

1. Keep the fields at width of 3em, and set the appearance to that of a textfield so no spinners are visible. This matches the current appearance of the fields, but gives the UI affordances like mousewheel adjustment.
2. Adjust the fields to width of at least 4em, and show the spinners.

I've posted two screenshots of each option that show what this looks like with different numbers up to 4 digits.

Comment 7

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

(In reply to Brad Werth [:bradwerth] from comment #6)

Created attachment 9052092 [details]
3em vs 4em with spinners screenshots.zip

Victoria, we need a user experience judgment, please. It seems like we have two UX options:

1. Keep the fields at width of 3em, and set the appearance to that of a textfield so no spinners are visible. This matches the current appearance of the fields, but gives the UI affordances like mousewheel adjustment.
2. Adjust the fields to width of at least 4em, and show the spinners.

I've posted two screenshots of each option that show what this looks like with different numbers up to 4 digits.

I think we went with #1 in new settings design implementation.

Comment 8

[Victoria Wang [:victoria]]

Thanks Brad for the screenshots - yep, #1 sounds good.

(For background, I did have something like #2 in my original plans, but the eventual consensus (lead by Martin/Razvan I believe) was that it looked overly hideous in Windows' native UI.)

Comment 9

[Brad Werth [:bradwerth]]

(In reply to Victoria Wang [:victoria] from comment #8)

Thanks Brad for the screenshots - yep, #1 sounds good.

Okay, I've updated the patch to implement this. The fields are unchanged in size, but are number type and have textfield styling.

Comment 10

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/8d9b4e8dce57
Part 1: Make RDM viewport dimension inputs have input type "number". r=gl

Comment 11

[Andreea Pavel [:apavel]]

Backed out for failing dt at browser_device_width.js

Push with failures: https://treeherder.mozilla.org/#/jobs?repo=autoland&resultStatus=testfailed%2Cbusted%2Cexception%2Cretry%2Cusercancel%2Crunnable&revision=8d9b4e8dce578a417cc0f2f98eaebe3cef47370f&selectedJob=234855653

Failure log: https://treeherder.mozilla.org/logviewer.html#/jobs?job_id=234855653&repo=autoland&lineNumber=5701

Backout: https://hg.mozilla.org/integration/autoland/rev/b29882123ec6753ce6292d1affec84669711d3bf

Comment 12

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/6728cf304a8b
Part 1: Make RDM viewport dimension inputs have input type "number". r=gl

Comment 13

[Natalia Csoregi [:nataliaCs]]

https://hg.mozilla.org/mozilla-central/rev/6728cf304a8b