Pane toolbar buttons are not sized properly

[jnsebgosselin]

Problem Description

The icon size is scaled as expected, but not the tool buttons size. We thus end up with "big" tool buttons with small icons. Enabling or disabling auto high dpi scaling does not change anything.

Paste Traceback/Error Below (if applicable)

I suspect that this due to the fact that we are setting the icon size for the panes with Qt, but are setting a fixed size for the toolbuttons in the stylesheet.

In MainWidgetToolbar.set_icon_size, we are using the QToolbar.setIconSize method to set the icon size of the toolbars. This effectively scale the icons as expected.

https://github.com/spyder-ide/spyder/blob/0bebf0f181af88c26a057268f604268619fc7294/spyder/api/widgets/toolbars.py#L185-L187

However, the size of the buttons remains unchanged because it is fixed in the stylesheet.

https://github.com/spyder-ide/spyder/blob/0bebf0f181af88c26a057268f604268619fc7294/spyder/utils/stylesheet.py#L231-L235

Versions

• Spyder version: 5.1.0.dev0 5648cfa74
• Python version: 3.7.6 64-bit
• Qt version: 5.12.5
• PyQt5 version: 5.12.3
• Operating System: Windows 10

Dependencies

Mandatory:

atomicwrites >=1.2.0 : 1.4.0 (OK) chardet >=2.0.0 : 3.0.4 (OK) cloudpickle >=0.5.0 : 1.5.0 (OK) cookiecutter >=1.6.0 : 1.7.2 (OK) diff_match_patch >=20181111 : 20200713 (OK) intervaltree >=3.0.2 : 3.0.2 (OK) IPython >=7.6.0 : 7.16.1 (OK) jedi =0.17.2 : 0.17.2 (OK) jsonschema >=3.2.0 : 3.2.0 (OK) keyring >=17.0.0 : 21.2.1 (OK) nbconvert >=4.0 : 5.6.1 (OK) numpydoc >=0.6.0 : 1.1.0 (OK) paramiko >=2.4.0 : 2.7.1 (OK) parso =0.7.0 : 0.7.0 (OK) pexpect >=4.4.0 : 4.8.0 (OK) pickleshare >=0.4 : 0.7.5 (OK) psutil >=5.3 : 5.7.2 (OK) pygments >=2.0 : 2.6.1 (OK) pylint >=1.0 : 2.5.3 (OK) pyls >=0.36.2;<1.0.0 : v5.0.0+75.g5648cfa74 (OK) pyls_black >=0.4.6 : 0.4.6 (OK) pyls_spyder >=0.3.2 : 0.3.2 (OK) qdarkstyle =3.0.2 : 3.0.dev (OK) qstylizer >=0.1.10 : 0.1.10 (OK) qtawesome >=1.0.2 : 1.1.0.dev0 (OK) qtconsole >=5.0.3 : 5.0.3 (OK) qtpy >=1.5.0 : 1.9.0 (OK) rtree >=0.8.3 : 0.9.4 (OK) setuptools >=39.0.0 : 49.6.0.post20210108 (OK) sphinx >=0.6.6 : 3.1.2 (OK) spyder_kernels >=2.0.1;<2.1.0 : 2.1.0.dev0 (OK) textdistance >=4.2.0 : 4.2.0 (OK) three_merge >=0.1.1 : 0.1.1 (OK) watchdog >=0.10.3;<2.0.0 : 0.10.3 (OK) zmq >=17 : 19.0.1 (OK)

Optional:

cython >=0.21 : 0.29.21 (OK) matplotlib >=2.0.0 : 3.2.1 (OK) numpy >=1.7 : 1.20.2 (OK) pandas >=1.1.1 : 1.1.4 (OK) scipy >=0.17.0 : 1.5.3 (OK) sympy >=0.7.3 : None (NOK)

[dalthviz]

Hi @jnsebgosselin thanks for the feedback! Pinging @ccordoba12 @juanis2112 @steff456 just in case

[ccordoba12]

This is by design @jnsebgosselin, as described here: spyder-ide/ux-improvements#28.

[jnsebgosselin]

This is by design @jnsebgosselin, as described here: spyder-ide/ux-improvements#28.

Ah, thanks for the clarification. This adds so much empty space, this is an interesting design...

[ccordoba12]

@isabela-pf advised us to do it for accessibility reasons: the minimal clickable area of buttons is 44 x 44px according to most accessibility standards.

However, you're welcome to add options in Preferences to control that because we agree we can have smaller sizes, as long as the default remains 44x44 (see spyder-ide/ux-improvements#41).

[jnsebgosselin]

I understand. I agree that accessibility is important and I applaud you for taking that into consideration in the new design. I am not sure however that using these standards as default is a good idea... I mean, if we follow that logic, we would also use a high contrast theme by default in spyder with larger fonts and larger icons, not large buttons with small icons that are not very accessible visually...

Anyway, I don't want to sound confrontational. Though I do not agree with this design decision, I respect it and I welcome the fact that you are open to add an option to make the interface look "slimmer".

[ccordoba12]

I mean, if we follow that logic, we would also use a high contrast theme by default in spyder with larger fonts and larger icons

The contrast of all colors in our new dark and light themes was carefully designed too (see https://github.com/spyder-ide/ux-improvements/issues/13). I mean, it's not high contrast, but it's way better than before.

not large buttons with small icons that are not very accessible visually...

You can discuss that with @isabela-pf, we just followed her recommendations.

Though I do not agree with this design decision, I respect it and I welcome the fact that you are open to add an option to make the interface look "slimmer".

Sure, you're welcome to contribute in that regard.

[jnsebgosselin]

You clearly put a lot of work and thoughts into this, this is really impressive.

I am willing to help adding a new option in the preferences that would allow users to make the toolbar of the panes more compact.

I used the "Find" and "Outline" panes to illustrate what I would like this option to do. What do you think?

[jnsebgosselin]

Should I open a new issue titled "Feature request: add an option for compact panes toolbar in the preferences" or I can reopen this one and simply change the title?

[ccordoba12]

I am willing to help adding a new option in the preferences that would allow users to make the toolbar of the panes more compact.

I agree with adding an option called something like Use compact toolbars to Preferences > Application > Interface.

Should I open a new issue?

We already have an issue for that: spyder-ide/ux-improvements#41.

[isabela-pf]

Hi there! I'm a little late, but I'm here to explain. I understand having more open space in toolbars isn’t everyone’s first choice, but for context it was a combination of needing larger clickable areas for accessibility regions and responding to feedback that Spyder 4 had a lot of buttons in not too much space. While the pane toolbars are in most cases not the areas that are hurting for space, the team wanted to maintain a visual difference between the main toolbar and the pane toolbars so we kept them smaller overall. I also wanted to give Spyder a little more breathing room between elements so they felt more like individual buttons instead of one big group of icons.

Accessibility should be the default, and while Spyder is definitely a work in progress on that front we’re trying to make it the standard. Button sizes and color are some of the places we are starting on. You’ll see on the issue that @ccordoba12 pointed you to that even though accessibility should be default, I think it’s fine to work on an enable-able feature that doesn't follow that.

Thanks so much for being willing to work on this @jnsebgosselin! Let me know if I can do anything to help you!

[jnsebgosselin]

Thank you very much for you answer @isabela-pf, it is much appreciated!

I think for the main toolbar, what you did looks great.

It is only in the panes toolbar where I think the buttons are a bit too big. I understand that according to some standards, the minimal clickable area of buttons should be 44px x 44px. From what I understand though, this standard seems mostly for web and mobile apps that are meant to be accessed with touchscreens. I am not sure this is fully necessary/applicable in the context of a desktop application, where we use the mouse pointer to click.

I think what is bothering me is that overall, the buttons in the panes toolbar are kind of looking out of place with the rest of the UI. Most of Spyder interface does not follow the 44px standard, e.g. the height of the QComboBox, QListWidget, QLineEdit, QTabBar, etc.

I am concerned that if you decide to apply the 44 px standard everywhere in Spyder for consistency, we are going to lose so much screen real-estate.

For example, in MS Office 365, which has very complex toolbars, the buttons are smaller than 44px and, most importantly, their size is consistent with the rest the UI. In comparison, the "Find" panes in Spyder 5 looks quite inconsistent, which is in contrast with the "Find and Replace" toolbar, which looks great in my opinion.

Anyway, this is just my opinion as an avid enthusiast and daily user of Spyder, I am by no means a UI/UX expert. I almost live in Spyder and MS Word, so that is why I have provided these examples for comparison.