RDM Settings - clicking in Add Device fields should highlight placeholder input
Categories
(DevTools :: Responsive Design Mode, enhancement, P3)
Tracking
(firefox71 fixed)
Tracking | Status | |
---|---|---|
firefox71 | --- | fixed |
People
(Reporter: victoria, Assigned: megan, Mentored)
Details
(Keywords: good-first-bug, Whiteboard: [lang=js])
Attachments
(1 file)
(Lower priority than the Done button tweak :))
I'm assuming most people who are adding a new device want to completely change the sample field inputs. It would be easier for them if we auto-selected the placeholder content in each field when they clicked in the inputs.
After they create a custom device and go to edit it, it may make sense to change the behavior back to not selecting the text when focusing a field.
Updated•6 years ago
|
Comment 1•6 years ago
|
||
Thanks for filing, here are some steps to reproduce to clarify a bit:
- open Firefox on any page
- open the Responsive Design Mode
- click on the device drop-down (top left in the RDM toolbar)
- choose "edit list..."
- click "add custom device..."
- click inside one of the text fields to edit this new device's properties
Expected: the placeholder text inside the fields should auto-select on focus, so it's easy to just erase everything and enter something else.
Actual: the cursor appears where you clicked, but the text does not get selected.
I believe this might be a good first bug for anyone having a bit of JavaScript knowledge and wanting to get a first experience contributing to Firefox DevTools (and Mozilla!)
If that's you, you should make sure to read through our contribution docs at http://docs.firefox-dev.tools/ to learn how to get the code, make changes and test those changes.
In terms of where to start, I think you might want to look at this file: /devtools/client/responsive.html/components/DeviceForm.js. This is the React component that displays the device editing form, and all its input fields.
Assignee | ||
Comment 2•6 years ago
|
||
I took a look at the Component and think I could solve this. Just checking - I could create an onFocus method for the input fields, and use a similar if/then such as in the validateNameField method to either select all for new device names or not select all for existing device names. I noticed that you use bind(this) instead of arrow functions so I'll keep that in my mind when writing the code.
Comment 3•6 years ago
|
||
Thanks for your interest Megan. Let me assign the bug to you now.
I'm also going to set Micah as a mentor on this bug (I hope it's ok Micah), as she has worked on the UI recently and will be able to help you should you have any questions.
I believe your approach in comment 2 make sense, but Micah will know better.
Comment 4•6 years ago
|
||
Hi Megan, thanks for working on this! Your solution makes sense and I'd be happy to review the code once it's submitted. Of course, please don't hesitate to reach out if you run into any problems.
Assignee | ||
Comment 5•6 years ago
|
||
Comment 6•6 years ago
|
||
Hi Megan, I'm just checking in, do you still plan on working on this bug? I believe Micah had made a few comments on the code review in phabricator.
If you do intend to work on it and just need more time, that's fine. If not, let me know so we can make this bug available to others.
Assignee | ||
Comment 7•6 years ago
|
||
Thanks for checking in on this. I had a couple of clients whose workload increased but I am working on these this week. I'll reach our to Micah as I have a couple of questions.
Comment 9•5 years ago
|
||
bugherder |
Updated•5 years ago
|
Description
•