Closed Bug 1542369 Opened 5 years ago Closed 4 years ago

RDM Settings - clicking in Add Device fields should highlight placeholder input


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



(firefox71 fixed)

Firefox 71
Tracking Status
firefox71 --- fixed


(Reporter: victoria, Assigned: megan, Mentored)


(Keywords: good-first-bug, Whiteboard: [lang=js])


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

Type: defect → enhancement

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

Keywords: good-first-bug
Priority: -- → P3
Whiteboard: [lang=js]

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.

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.

Assignee: nobody → megan
Mentor: mtigley

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.

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.

Flags: needinfo?(megan)

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.

Flags: needinfo?(megan)
Pushed by
Add method to highlight text if formTypes equals add. r=mtigley
Closed: 4 years ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 71
QA Whiteboard: [qa-71b-p2]
You need to log in before you can comment on or make changes to this bug.