Closed Bug 1343014 Opened 8 years ago Closed 6 years ago

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

Categories

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

49 Branch
enhancement

Tracking

(firefox68 fixed)

RESOLVED FIXED
Firefox 68
Tracking Status
firefox68 --- fixed

People

(Reporter: nachtigall, Assigned: bradwerth)

References

(Blocks 1 open bug)

Details

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

Attachments

(3 files)

Attached 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]
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.
Product: Firefox → DevTools
Blocks: rdm-ux
Severity: normal → enhancement
Priority: P3 → P2

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

Assignee: nobody → bwerth

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

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)

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

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
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
Status: NEW → RESOLVED
Closed: 6 years ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 68
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.

Attachment

General

Creator:
Created:
Updated:
Size: