Closed Bug 1545270 Opened 7 months ago Closed 6 months ago

Text in Settings input fields should be body color instead of grayed out

Categories

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

enhancement

Tracking

(firefox68 fixed)

RESOLVED FIXED
Firefox 68
Tracking Status
firefox68 --- fixed

People

(Reporter: victoria, Assigned: megan)

Details

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

Attachments

(2 files)

Attached image image.png

I realized the grayed out text here makes it look like placeholders. The can always just be the body color. The blue focus ring will be enough to indicate that the field is focused.

This sounds to me like a great way for someone new to start contributing to Firefox DevTools and Mozilla.
This seems like a CSS only bug that should be simple enough granted you know how to get the code, make changes, testing them and posting them for review. You can learn all about this here: http://docs.firefox-dev.tools/

Once you're set-up, try the following steps:

  • open Firefox
  • open Responsive Design Mode in a tab
  • click on the device selector drop-down in the top left corner of the RDM toolbar
  • select edit list ...
  • then click add custom device...

The fields in the form that just appeared are the ones we want to fix here.

The JavaScript file that generates those fields is /devtools/client/responsive.html/components/DeviceForm.js
And the CSS file that defines the styles for this is /devtools/client/responsive.html/index.css

What Victoria means by body color in comment 0 is probably --theme-body-color which is a custom property/CSS variable we have defined in the DevTools theme and that should be reused here for the text instead of the grayed-out text.

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

I can quickly handle this bug. I'm familiar with CSS variables. I am getting the files setup now in my dev setup and will be able to work on it this evening, if that's ok.

Hi Megan! Yes, that would be great!

Feel free to join our slack channel if you need help with setup, etc. https://devtools-html-slack.herokuapp.com/

Assignee: nobody → megan

I reviewed the change and accepted it. Victoria, can you take a look at the CSS variables used here and let us know if these are the ones we were wanting to use.
I can land the patch after that.

Flags: needinfo?(victoria)

Yep, that's the one I was thinking of! Thanks Megan :)

Flags: needinfo?(victoria)
Pushed by pbrosset@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/067fd517e656
Update CSS variable for Add Device Settings Input fields, r=victoria,pbro
Status: NEW → RESOLVED
Closed: 6 months ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 68
QA Whiteboard: [good first verify]
Whiteboard: [lang=css] → [lang=css] [good first verify]
You need to log in before you can comment on or make changes to this bug.