Sad face from unmatched search UI is overly sad, and red text is too bright

[violasong]

Sad face: I don't see an unmatched search as an error or something worthy of this much sadness. It could be a positive result (e.g. when making sure some old code no longer exists). However, I can see why the color change and icon change are helpful as a quick, bolder indicator than the pale "No results" message. I can also appreciate the whimsy factor, similar to Berror, seen at about:asdk.

boring replacement ideas

counteroffer to offset loss of whimsy stick this happy fox face somewhere, such as to introduce a new feature, or to applaud some use of special advanced functionality:

Text color: Currently the red color seems to have an orange tone that doesn't match Photon. I recommend the darker red text color used in Console errors.

[darkwing]

@violasong Where can I find the warning icon? Do we use it anywhere else?

[violasong]

We're using it console, and it's also here https://design.firefox.com/icons/viewer/#warning

Although I think my favorite solution would be https://design.firefox.com/icons/viewer/#info plus the console dark red error text color

[darkwing]

Could we go with a yellow? Red seems harsh, like there's an error

[nchevobbe]

Whatever we decide here, let's also have a follow up for the reverse search on the console. We used red to match the debugger when there's no result, so we should keep it in sync :)

[baronKilljoy]

I am new but would like to give this a try, assuming a final decision is made on icon and color.

[violasong]

Ah, I was still thinking red was fine because its what is used for Firefox in-page search, but I know what you mean about the error part. Even yellow/warning is a little wrong.

What if it looked like this? The other searches could follow suit, so instead of "0 results" way to the right of the input in find in file, it would be pretty front and center.

(sort of matches the [black main text /grayed out path/] pattern of the result rows)

[yparam98]

I was thinking Orange? Specifically this: color: #FF850B;

Let me know...

[violasong]

(Oh and the text could say 0 results instead of not found of course)

I was thinking Orange? Specifically this: color: #FF850B;

We're trying to choose a more neutral design for this so that it doesn't look like an error/warning - so I think just a prominent Gray50 message could do it

[darkwing]

@violasong I love this not found screenshot! Yes!

[yparam98]

We're trying to choose a more neutral design for this so that it doesn't look like an error/warning - so I think just a prominent Gray50 message could do it

So something like a #7f7f7f ?

[yparam98]

I don't see an unmatched search as an error or something worthy of this much sadness

I don't know... late night compilation errors in college certainly comes close...

[violasong]

There’s a variables.css that has the gray50 token which I think is #737373

[darkwing]

@baronKilljoy Would you like to take this now? I think we'd like to go with the --no results found option! 👍

[nagpalm7]

/claim

[claim[bot]]

Thanks for claiming the issue! :wave:

Here are some links for getting setup, contributing, and developing. We're always happy to answer questions in slack! If you become busy, feel free to /unclaim it.

:fox_face: Debugger team!