PR: Make the font used by the application configurable and other UI fixes

[ccordoba12]

Description of Changes

Font related changes

• Replace Rich text entry in Preferences by Interface and rename Plain text to Monospace.
• Add option to be able to change the app font. That was done so that Spyder follows the same font used by other programs in the system by default.
• Make this change to require a restart because it can't be applied while the app is running.
• Add SpyderFontType enum to access the different fonts we have in Spyder.
• Add SpyderFontsMixin to get those fonts as QFont objects to be used in Qt widgets or other objects.
• Make Online Help use the font size of the rest of the app (this was not working).
• Remove setting font for labels of status bar widgets (this was different from the app font).
• Add a new monospace interface font type, which is the same monospace font selected by users in Preferences, but with a size that matches the rest of the interface.
• Use monospace font for the Index column in our dataframe editor. This was reported by a user to be a UI inconsistency and I agree with them.

Other changes

• Fix pixelated splash screen when using scale factors greater than 1 (this happens for certain screen aspect ratios).
• Switch setting sizes from em's to pixels in most places. That's because I discovered that Qt adjusts em sizes according to the app font, but that's not what we want to have (for instance) in the main and pane toolbars.
• Remove hard-coded font sizes in the "Report error" dialog and improve its style a bit by correctly aligning its widgets to the left and right.
• Re-add the previous cell icon because it's used in the Outline pane and rename the one to create cells to new_cell.
• Remove vertical header in the Variable Explorer because it's not really necessary. Also, adjust its columns size when shown so that it looks good at startup.
• Fix setting the thumbnail scroll bar's size when Plots is shown (the previous hack was not working anymore).

---

Visual changes:

• Replace the previous Rich text entry in Preferences with an Interface one:

  

• Fonts and layout of the "Report error" dialog were not the best

  Before

  

  After

  

• Restore cell icon in the Outline pane

  Before

  

  After

  

• Resize Variable Explorer columns at startup

  Before

  

  After

  

• Hide vertical header in Variable Explorer because it's not necessary.

  Before

  

  After

  

• Use the monospace font for the Index column in our Dataframe editor

  Before

  

  After

  

• Scale size of monospace font to match the interface one when the latter is changed. That's applied to plugins that are not directly related to code, like the Variable Explorer.

  

Issue(s) Resolved

Fixes #20960
Fixes #5942

Affirmation

By submitting this Pull Request or typing my (user)name below,
I affirm the Developer Certificate of Origin
with respect to all commits and content included in this PR,
and understand I am releasing the same under Spyder's MIT (Expat) license.

I certify the above statement is true and correct:

[dalthviz]

Thanks for the work here @ccordoba12 ! Quick question, could this be related with spyder-ide/ux-improvements#31 ?

[ccordoba12]

Good point @dalthviz! I think it is. I mean, that issue was about packaging in our installers and setting by default a nice monospaced font for the Editor and IPython console.

With the work I did here, it will be possible to do the same but for the entire application. That way Spyder will look exactly the same in all operating systems, regardless of the font set by users for the other apps.

[ccordoba12]

Another important point I forgot to mention is that this will be useful for users of languages like Chinese, Japanese or Korean on Windows because they could select the font they want for the app, instead of being forced to use some ugly Latin font. I've seen that in a lot of screenshots (e.g. the first one on issue #5942) when users want to use Spyder in English but the OS is in one of those languages.

[dalthviz]

Thanks @ccordoba12 ! Left a couple of comments and I'm missing to test this locally but overall LGTM 👍

[dalthviz]

Giving the application font a local check seems like there are some elements (like dialog/window titles, menus and tooltips) that aren't affected with the font change:

Maybe there is some missing logic to apply the font to such elements or is that expected?

[ccordoba12]

Giving the application font a local check seems like there are some elements (like dialog/window titles, menus and tooltips) that aren't affected with the font change

That's not the case for me on Linux, i.e. all elements change their font. So, I'll have to check on Windows.

But did you restart Spyder? Perhaps Spyder didn't ask you to do it, which could be the problem in your case.

[dalthviz]

But did you restart Spyder? Perhaps Spyder didn't ask you to do it, which could be the problem in your case.

Applying the preference showed me the dialog to restart and Spyder was restarted succesfully.

Checked on macOS and seems like there are elements which font is still different from the one set. Seems like more elements are affected like labels, buttons and the status bar with macOS 🤔:

Also, I closed and reopened Spyder but the partial font change behavior is still there. Maybe some Qt setting needs to be enabled for Windows/macOS?

[ccordoba12]

I gave this a new check on Windows and seems like something is happening when applying the font to the elements in the Variable Explorer. Creating a new variable after changing the font to MS Serif gives you this

I think I fixed that in my last commit. Please check again.

Also, seems like the font in tree-like widgets still doesn't change? Is that expected or something that still missing?

It was missing but it should be fixed now too.

Checking on macOS, seems like the variables in the Variable Explorer are okay and seems like, as on Windows, tree-like widgets are not getting the new font setting. Besides that, a couple of other elements still are not getting set the new font like the status bar, buttons and the Editor top text

It seems that making this work on Mac is either really difficult (I was not expecting that the issues you found were still present after my last changes) or not possible at all (I'm not sure how to fix them). So, I'd say for now we should disable this feature on Mac, if that's ok for you (that would be helpful for me too because I've invested a lot of time on this and I'd like to move on).

In addition, I think this would be mainly useful for Chinese, Japanese and Korean users on Windows (they requested it), and Linux ones (for testing and also because it works almost without issues there).

[dalthviz]

Checked again and seems like there is still a thing regarding the size of the Variable Explorer header not expanding as stayed in the OP:

But other than that seems like things are working on Windows 👍

Regarding macOS, I guess that is an option, but then on macOS things will work as before regarding the rich text font? And then users will not see the new preference regarding an Interface font but the old Rich text font setting, right?

[ccordoba12]

Checked again and seems like there is still a thing regarding the size of the Variable Explorer header not expanding as stayed in the OP

That's odd because it works for me with MS Serif

However, the solution I implemented seems to work for some fonts and fonts sizes, but not for others (this is with the same font at two different sizes):

So, I guess this depends on the algorithm used by Qt to adjust the columns width to their headers' contents, which should use QFontMetrics to compute the length of each header. And that probably doesn't work very well for some fonts and sizes.

However, if we'd try to implement the algorithm ourselves, I think we'd arrive at something very similar to what Qt already does. So, I guess what I did in this PR is the best we can do to improve the situation, although it's not perfect (and it'll probably never be).

But other than that seems like things are working on Windows

Great! That's really good news.

Regarding macOS, I guess that is an option, but then on macOS things will work as before regarding the rich text font? And then users will not see the new preference regarding an Interface font but the old Rich text font setting, right?

Nop, we'd simply won't allow users to uncheck the Use the system default interface font checkbox. This is how things would look (screenshot taken on Windows because I don't have a Mac):

I pushed a commit that implements that solution, so let me know if it works for you after resetting Spyder options.

[dalthviz]

So, I guess this depends on the algorithm used by Qt to adjust the columns width to their headers' contents, which should use QFontMetrics to compute the length of each header. And that probably doesn't work very well for some fonts and sizes.

However, if we'd try to implement the algorithm ourselves, I think we'd arrive at something very similar to what Qt already does. So, I guess what I did in this PR is the best we can do to improve the situation, although it's not perfect (and it'll probably never be).

Probably even further it depends on the display dpi or something like that. Following that maybe adding some link to the discussion here around the code that parcially fixes the headers could be nice so there is a reference indicating that there is not much else to do about the header situation.

I pushed a commit that implements that solution, so let me know if it works for you after resetting Spyder options.

Seems like that is working 👍 Not sure if there is something else that could be done to improve the UX to handle the application font option in a cross platform way. Maybe @conradolandia could assess if what we have here is okay/makes sense? Or maybe you have already discussed this PR during the UX/UI meetings @ccordoba12 ?

Also, a CI job was failing so I re-runned it, hopefully it will pass 🤞🏼

[conradolandia]

I've been reading QFontMetrics documentation, and this called my attention, regarding this issue (emphasis mine):

Calling the QFontMetrics constructor with a QFont creates a font metrics object for a screen-compatible font, i.e. the font cannot be a printer font. If the font is changed later, the font metrics object is not updated.

Maybe the font metric object needs to be updated after a font change?

[conradolandia]

Seems like that is working +1 Not sure if there is something else that could be done to improve the UX to handle the application font option in a cross platform way. Maybe @conradolandia could assess if what we have here is okay/makes sense? Or maybe you have already discussed this PR during the UX/UI meetings @ccordoba12 ?

I think it makes sense. It's a very cool feature to be able to choose how Spyder can be themed, and this is a significant feature towards that. It seems strange some elements don't take the change into account, tho. I think unifying Font sources is important.

[ccordoba12]

Probably even further it depends on the display dpi or something like that. Following that maybe adding some link to the discussion here around the code that parcially fixes the headers could be nice so there is a reference indicating that there is not much else to do about the header situation.

Ok, I'll add a comment about it.

Seems like that is working

Great!

Maybe the font metric object needs to be updated after a font change?

Yep, we already do that. But it seems some widgets on Mac don't pick the font selected for the rest of Spyder, and I don't know why. In addition, I don't have a Mac to try to fix that.

I think it makes sense. It's a very cool feature to be able to choose how Spyder can be themed, and this is a significant feature towards that. It seems strange some elements don't take the change into account, tho. I think unifying Font sources is important.

Thanks @conradolandia for your feedback! I totally agree with you. However, I'd prefer to be a bit more pragmatic here to keep things moving. If later Mac users request this feature loudly, then I could spend more time to make it work there. But for now, I think having it on Windows and Linux is a huge improvement for the project, as you said.

[dalthviz]

Thanks @ccordoba12 ! Left some comments and a suggestion but other than that this LGTM 👍

[dalthviz]

Thanks @ccordoba12 ! Gave another check with the latest changes and this LGTM

However, seems like changing the font makes some errors regarding cache appear in the console that I used to launch Spyder:

[6120:15964:0626/163529.150:ERROR:cache_util_win.cc(20)] Unable to move the cache: Acceso denegado. (0x5)
[6120:15964:0626/163529.151:ERROR:cache_util.cc(140)] Unable to move cache folder C:\Users\dalth\AppData\Local\Spyder\cache\QtWebEngine\Default\Cache to C:\Users\dalth\AppData\Local\Spyder\cache\QtWebEngine\Default\old_Cache_000
[6120:15964:0626/163529.152:ERROR:disk_cache.cc(184)] Unable to create cache
qt.gui.icc: fromIccProfile: failed minimal tag size sanity

Also, when you select again the Use the system default interface font after changing the values is like those values reset (font and size) and get replaced with the default values. So seems like you can't have a previous selection for the application font and size while using the default system font, right?

I don't have any strong opinion about the font and size selection, and not totally sure if the cache error messages are something to address or just something transient or that can be ignore but letting you know just in case.

Anyhow, I'm approving so if you are good with the things above feel free to merge or let me know and I can click the merge button 👍

[ccordoba12]

However, seems like changing the font makes some errors regarding cache appear in the console that I used to launch Spyder

Those errors seem unrelated to this and I didn't see them myself when testing on Windows. I'd say they are probably caused because at some point you launched Spyder as admin in your user account.

Also, when you select again the Use the system default interface font after changing the values is like those values reset (font and size) and get replaced with the default values. So seems like you can't have a previous selection for the application font and size while using the default system font, right?

Yeah, that's the behavior I decided to implement for several reasons:

• We show the system font when users haven't changed it for another one yet. So, I think rechecking that checkbox should restore things to that state.
• I think it'd be confusing to display a different font on that combobox and claim that Spyder is actually using the system one.
• We use the interface font internally to make several adjustments. So, we need the right value for it and not the one previously set by users.

Anyhow, I'm approving so if you are good with the things above feel free to merge

Thanks @dalthviz! I'll merge then to keep things moving.