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

RESOLVED FIXED in Firefox 68

Status

enhancement
P2
normal
RESOLVED FIXED
2 years ago
18 days ago

People

(Reporter: nachtigall, Assigned: bradwerth)

Tracking

(Blocks 1 bug)

49 Branch
Firefox 68
Dependency tree / graph

Firefox Tracking Flags

(firefox68 fixed)

Details

(Whiteboard: [rdm-v2], [good first verify] )

Attachments

(3 attachments)

Reporter

Description

2 years ago
Posted image 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.
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.
Priority: -- → P3
Whiteboard: [rdm-v2]
Reporter

Comment 2

2 years ago
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.

Updated

Last year
Product: Firefox → DevTools
Assignee

Updated

5 months ago
Blocks: rdm-ux
Severity: normal → enhancement
Priority: P3 → P2
Assignee

Comment 4

3 months ago

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

Assignee

Updated

3 months ago
Assignee: nobody → bwerth

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

Assignee

Comment 6

3 months ago

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.

Flags: needinfo?(victoria)

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

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

Flags: needinfo?(victoria)
Assignee

Comment 9

3 months ago

(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

3 months ago
Pushed by bwerth@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/8d9b4e8dce57
Part 1: Make RDM viewport dimension inputs have input type "number". r=gl

Comment 12

3 months ago
Pushed by bwerth@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/6728cf304a8b
Part 1: Make RDM viewport dimension inputs have input type "number". r=gl

Comment 13

3 months ago
bugherder
Status: NEW → RESOLVED
Closed: 3 months ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 68
Assignee

Updated

3 months ago
Flags: needinfo?(bwerth)
QA Whiteboard: [good first verify]
Whiteboard: [rdm-v2] → [rdm-v2], [good first verify]
You need to log in before you can comment on or make changes to this bug.