Closed Bug 1534445 Opened 8 months ago Closed 3 months ago

DevTools Settings: Dark mode version of yellow deprecation messages

Categories

(DevTools :: General, enhancement, P3)

enhancement

Tracking

(firefox70 fixed)

RESOLVED FIXED
Firefox 70
Tracking Status
firefox70 --- fixed

People

(Reporter: victoria, Assigned: nchevobbe)

Details

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

Attachments

(7 files, 1 obsolete file)

Attached image current settings panel

Currently these messages look too bright in dark mode. Let's change it to the same styling as the warning messages in Console (bright yellow text on dark yellow background).

Keywords: good-first-bug
Whiteboard: [lang=css]
Summary: Dark mode version of yellow deprecation messages → DevTools Settings: Dark mode version of yellow deprecation messages

Hi Victoria, how are you?

I'd like to work on this, but I'll wait for other people to show interest, since it's not my first bug :)

Thanks!

Hi Mellina! I'd be happy for you to work on this, since I find the messages kind of blinding right now. (No offense to whoever was working on this before 😄)

Attached image depracation message v.1
Attached image depracation message v.2

Hi Victoria,

I have made two versions (see attachments please) of the messages using the Visual Colors Guide (https://design.firefox.com/photon/visuals/color.html).

Let me know what you think.

Thanks!

Priority: -- → P3
Attached image image.png

Hi Mellina! These look good, but I was actually thinking it would be best to match the Console warning colors as attached. They're a little less brown/gold and more yellow, which is the shade we want.

Hey Mellina and Victoria,

I am still looking for my first contribution and just found this one could be a perfect start for me (I just find where the background and font colors are :p). I know it might be impolite to ask this when somebody has already started working on this issue, so I won't feel any discomfort if I am not eligible for this issue anymore. I am just trying to look somewhere easy to start with, as mozilla source code is quite big and I don't wanna jump into hardcore coding and mess it up at the very beginning.

best regards,
xiaoyun

Hi Victoria,

Sure, I agree wit you. That looks better!


Hi Xiaoyun,

Sure, you can take it over.

Some insights:

  • It's probably a good idea to use the Browser Toolbox to inspect the DevTools code (it really looks like inception).

  • The screenshot Victoria mentioned is in the Console Tab. You can see this kind of message on most websites, but I have tested with Reddit and there are a lot of Warning messages there.

  • Inspect the code, and you will see that those colors are in the WebConsole Style Sheet. You can use them as a reference.


The message that needs to be changed actually lives in the Settings (or press F1 with your DevTools on).
You can inspect it as well. The code lives in the Option Panel Style Sheet. You will need to change background-color and the box-shadow color value with the one you saw in the Web Console.


Hope that helps. Let me know if you need further information.

Sounds good Xiaoyun - and Mellina, thanks for passing this over and writing this helpful first-bug comment :D

Hey Mellina,

Thank you so much for passing me this bug! That's a really detailed guide. I couldn't say how helpful your input is :)

best, xiaoyun.

Hi Victoria,

I changed the deprecation message color as the one in the Web Console.

I noticed the way Web Console handling colors is by importing variables that are set in themes/webconsole.css, but I am concerned about importing from that file for the deprecation message, as it seems colors in webconsole.css are designed for Web Console specifically.

The way I handled it is by setting hsl colors directly for deprecation message. The other way I know is to declare variables in themes/variables.css and then I can import it to set colors.

I am not sure if I did the right way. Let me know if there are better solutions!

best, xiaoyun

Hi Xiaoyun,

That looks good :)

About the color variable, this bug might be related. They are working on removing the hard-coded colors (so the hsl value) and setting up a new color nomenclature.

Maybe we could use some help here on how to proceed.

Should Xiaoyun write a hard-coded color and we change it later in the other bug or create a variable for it?

Flags: needinfo?(balbeza)

Hi Mellina,

Thank you for your mention of the change, but it seems there hasn't a response from them yet. Do you have any idea about the next step? I should try to find another bug to work on while waiting the decision for this one.

Btw, thank you for your first bug comments again! It's really helpful for my first step diving into the mozillian community!

best, xiaoyun

Hello! It seems like it's best to create a variable for it for now, and then we can file a separate bug to merge the variables later. Most colors in webconsole probably belong in variables.css but that sounds like a bigger project.

(Belén, feel free to correct me if this is wrong, but I'll unblock this for now)

Flags: needinfo?(balbeza)

Hi Xiaoyun,

You're very welcome :) I've been there too.

It seems like, according to Victoria, you can create and insert the variables in the options-panel.css, in the same fashion that they were created in the themes/webconsole.css.

This may be wrong, but a reviewer will probably tell you before landing the patch.

Anyway, to submit a patch for review, please check this link. This may be overwhelming, but I promise it gets easier as you get used to it.
If you need any help, please feel free to message me in Slack.

The old deprecation messages in DevTools Settings look too bright in dark mode. This patch changes its styling the same as the warning messages in Console (bright yellow test on dark yellow background).

It changes the color in a way by setting color varaibles at the top instead of just changing hardcoded ones, as this way is suggested in Bug 1055311.

Hey Mellina,

Thank you for the guide you posted there! It did looks overwhelming at first and I was amazed by how rigorous this process is (then I understand why firefox can be this great :D)

I am falling in love with mozilla community. People are extremely helpful and friendly 😂.

best regards, xiaoyun

Hello, sorry to be the bearer of bad news here, but we've actually removed the panels and the code, so it doesn't make sense to keep working on this bug. I'm really sorry! There's been a bit of miscoordination on our side.

Perhaps Victoria can guide you towards another suitable bug.

Sorry again!

Yes, I'm so sorry Xiaoyun and Mellina — turns out the deprecation process ended up going faster than expected, so these warnings won't need to be in the Firefox release after all.

However! I found another place that needs this same dark yellow background color. I filed a new bug and I think this would be a great task for you Xiaoyun, if you don't mind switching over!

https://bugzilla.mozilla.org/show_bug.cgi?id=1536928

Hey, Never mind! It happens in such a big project :P Should I close that PR on Phabricator?

Thank you Victoria and I would love to fix that haha. As I have gone the process under the guideline of Mellina, I should fix the new issue much faster :)

Closing this bug. Thanks again to Xiaoyun and Mellina!

Status: NEW → RESOLVED
Closed: 7 months ago
Resolution: --- → INVALID

Reopening this bug, as we now have a new need for it! Scratchpad is being deprecated, and the same yellow warning will be landing in Firefox 70 (it can currently be seen in the settings in Nightly).

Is the previous patch made by Xiaoyun still usable for this? Either way, the dark mode colors should match the current dark mode console warning colors (which seem to be different than in the screenshot earlier in this bug).

I'm not sure who was reviewer/triager on this bug. Need-infoing Nicolas for triage help :)

Flags: needinfo?(nchevobbe)
Status: RESOLVED → REOPENED
Resolution: INVALID → ---
Assignee: nobody → nchevobbe
Status: REOPENED → ASSIGNED
Flags: needinfo?(nchevobbe)
Attachment #9052187 - Attachment is obsolete: true

Here's a patch with the webconsole colors

In order to do this properly, we create new variable in
variables.css that hold the same values as the console-warning-*
variables we have in webconsole.css.
We take this as an opportunity to replace the box shadow on
the deprecation label by an outline. I think this was done
so the border doesn't take additional height, and outline
seems perfect for this job.

Attachment #9089004 - Attachment description: Bug 1534445 - Use same colors as webconsole warning messages in settings panel deprecation label. . → Bug 1534445 - Use same colors as webconsole warning messages in settings panel deprecation label. r=rcaliman .
Pushed by nchevobbe@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/6b78b362900b
Use same colors as webconsole warning messages in settings panel deprecation label. r=rcaliman .

Awesome, thanks Nicolas!

Status: ASSIGNED → RESOLVED
Closed: 7 months ago3 months ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 70
QA Whiteboard: [good first verify]
You need to log in before you can comment on or make changes to this bug.