Improve highlighting of current plot

[meshgeneration]

Not so much a bug, but more of a request for improvement. When browsing through a large number of plots, it is barely possible to tell which plot we are currently viewing. Instead of a very thin light blue frame, I would recommend a thicker red line for emphasis. Thanks a lot!

[ccordoba12]

Hey @meshgeneration, thanks for the suggestion. We'll try to take address it in Spyder 6, to be released before the end of the year.

[jitseniesen]

I agree that it is not clear currently which plot is active, especially in dark mode:

It looks a lot better in light mode:

As suggested, I tried to change it to red, specifically SpyderPalette.ICON_4. Of course red normally is used to indicate an error, which is not the meaning here, so that is not ideal. However, it does make it clearer which plot is active:

For comparison, here is the light mode with red:

I think the difficulty here is that if you use Spyder in dark mode and plots with a white background (the default in Matplotlib), then the border is between a dark colour and a light colour so it is hard to put something contrasting in with just two pixels. It naturally works better if Spyder is in light mode. Perhaps we need another mechanism to indicate the active plot, like a border on the outside around the plot instead of on the inside, or something completely different like putting an icon on top of the thumbnail of the active plot (but that would partially occlude the thumnail). I'm not sure how easy these are to implement.

@spyder-ide/core-developers @conradolandia Any preferences or ideas on how to proceed? See #10255 for some earlier discussion on the same topic. At the moment, I'm thinking to use red as a quick fix for Spyder 6 and (hopefully) discuss in more detail after Spyder 6.

[conradolandia]

I think we have two options:

1. Use a darker orange-yellow color, with a 1px line. I could check what we have available on the pallete, or if needed, add another color. Using this color would be less aggresive than using red, and keeping the line thin would meake it less intrusive.
2. Use a middle gray with a 3px line. This would contrast well enough in both colors, and a thicker line will make it more noticable.

Any of these would probably solve the issue. Using a thin line with gray would not work because it will make it almost invisible, the same issue we have now. And using a thick line with a brighter color would be too much.

[ccordoba12]

Use a middle gray with a 3px line. This would contrast well enough in both colors, and a thicker line will make it more noticable.

I really like this option and would match very well with the rest of our theme.

[jitseniesen]

Following the suggestions, here are some more options.

A thin orange line; specifically, COLOR_WARN_2 at 1px:

A thick gray line; specifically, COLOR_BACKGROUND_4 at 3px:

The same thick gray line, but now on the outside:

An even thicker gray line (5px) on the outside:

For me, the last option is the only one which is clear but it takes up more space on the screen.

Here are the corresponding screenshots for the light theme:

What do you think?

[conradolandia]

I suggest (using color names from QDarkStyleSheet, Gray class): B90 for the dark theme, and B50 for the light theme. A 3px line should be more than enough.

[conradolandia]

Forgot to mention that these are from the Gray class from colorsystem.py