Minor visual glitch when hovering tabs of the Editor.

[jnsebgosselin]

Problem Description

There is a little glitch when hovering tabs of the Editor. As we can see in the animation below, the first letter of the tab name gets clipped when the tab is hovered, except when it is selected.

I think that we need to set left and right padding values in the stylesheet that take into account the width of the border when the tabs are in the hover state.

Adding the following lines :

        css['QTabBar::tab:hover'].setValues(
            paddingLeft='3px' if is_macos else '9px',
            paddingRight='9px' if is_macos else '3px'
        )
        css['QTabBar::tab:selected'].setValues(
            paddingLeft='4px' if is_macos else '10px',
            paddingRight='10px' if is_macos else '4px'
        )

below the following block in stylesheet.py

spyder/spyder/utils/stylesheet.py

Lines 265 to 271 in 7f119b2

	css['QTabBar::tab'].setValues(
	marginTop=self.TOP_MARGIN,
	paddingTop='4px',
	paddingBottom='4px',
	paddingLeft='4px' if is_macos else '10px',
	paddingRight='10px' if is_macos else '4px'
	)

seems to solve the problem for me.

Versions

• Spyder version: 5.1.0.dev0 2d27b62
• Python version: 3.8.8 64-bit
• Qt version: 5.12.9
• PyQt5 version: 5.12.3
• Operating System: Windows 10

Dependencies

# Mandatory:
atomicwrites >=1.2.0          :  1.4.0 (OK)
chardet >=2.0.0               :  4.0.0 (OK)
cloudpickle >=0.5.0           :  1.6.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.22.0 (OK)
jedi =0.17.2                  :  0.17.2 (OK)
jsonschema >=3.2.0            :  3.2.0 (OK)
keyring >=17.0.0              :  23.0.1 (OK)
nbconvert >=4.0               :  6.0.7 (OK)
numpydoc >=0.6.0              :  1.1.0 (OK)
paramiko >=2.4.0              :  2.7.2 (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.8.0 (OK)
pygments >=2.0                :  2.8.1 (OK)
pylint >=1.0                  :  2.7.2 (OK)
pyls >=0.36.2;<1.0.0          :  v5.0.1+4.gcde398286.dirty (NOK)
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 (NOK)
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.7 (OK)
setuptools >=39.0.0           :  49.6.0.post20210108 (OK)
sphinx >=0.6.6                :  3.5.4 (OK)
spyder_kernels >=2.0.1;<2.1.0 :  2.1.0.dev0 (OK)
textdistance >=4.2.0          :  4.2.1 (OK)
three_merge >=0.1.1           :  0.1.1 (OK)
watchdog >=0.10.3;<2.0.0      :  1.0.2 (OK)
zmq >=17                      :  22.0.3 (OK)

# Optional:
cython >=0.21                 :  None (NOK)
matplotlib >=2.0.0            :  None (NOK)
numpy >=1.7                   :  None (NOK)
pandas >=1.1.1                :  None (NOK)
scipy >=0.17.0                :  None (NOK)
sympy >=0.7.3                 :  None (NOK)

[jnsebgosselin]

Even though it doesn't really cause any visual glitch, I think we the border of the tabs should also be taken into account in the values use for the vertical padding (this becomes apparent though when we add icons to the tabs).

So to cover all cases, I think we should have in PanesTabBarStyleSheet:

css['QTabBar::tab'].setValues(
    marginTop=self.TOP_MARGIN,
    paddingTop='4px',
    paddingBottom='4px',
    paddingLeft='4px' if is_macos else '10px',
    paddingRight='10px' if is_macos else '4px'
)
css['QTabBar::tab:hover'].setValues(
    paddingTop='3px',
    paddingBottom='3px',
    paddingLeft='3px' if is_macos else '9px',
    paddingRight='9px' if is_macos else '3px'
)
css['QTabBar::tab:selected'].setValues(
    paddingTop='4px',
    paddingBottom='3px',
    paddingLeft='4px' if is_macos else '10px',
    paddingRight='10px' if is_macos else '4px'
)
css['QTabBar::tab:selected:hover'].setValues(
    paddingTop='4px',
    paddingBottom='3px',
    paddingLeft='4px' if is_macos else '10px',
    paddingRight='10px' if is_macos else '4px'
)

[juanis2112]

HI @jnsebgosselin thanks for reporting this. @dalthviz can you test if this code fixes the issue on Windows so @jnsebgosselin or I can open a PR?

[dalthviz]

@juanis2112 @jnsebgosselin I was able to reproduce and the changes proposed seem to work for me 👍

[ccordoba12]

@jnsebgosselin, instead of making an entry for each style, you could set QTabBar::tab:selected and QTabBar::tab:selected:hover in a for loop because they are exactly the same.

[jnsebgosselin]

@jnsebgosselin, instead of making an entry for each style, you could set QTabBar::tab:selected and QTabBar::tab:selected:hover in a for loop because they are exactly the same.

Oh yeah, nice catch.

So I am going to open a PR with these changes against the 5.x branch.

[ccordoba12]

Thanks @jnsebgosselin! If you do that before the end of the week, it'll be part of 5.0.2