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

Status: RESOLVED FIXED

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

Description

[Victoria Wang [:victoria]]

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

Comment 1

[Patrick Brosset <:pbro>]

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.

Comment 2

[Megan Bailey]

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.

Comment 3

[Victoria Wang [:victoria]]

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/

Comment 4

[Megan Bailey]

Attachment: Bug 1545270 - Update CSS variable for Add Device Settings Input fields, r=victoria

Comment 5

[Patrick Brosset <:pbro>]

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.

Comment 6

[Victoria Wang [:victoria]]

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

Comment 7

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/067fd517e656
Update CSS variable for Add Device Settings Input fields, r=victoria,pbro

Comment 8

[Stefan Hindli [:stefan_hindli]]

https://hg.mozilla.org/mozilla-central/rev/067fd517e656