(GitHub Files Filter) make the toggle buttons change background color when clicked, not when mouseaway (especially when using 'GitHub Dark' userstyle)

[darkred]

Regarding the 'GitHub Files' Filter script:
currently when clicking a toggle button, its background color changes after moving the mouse away, not when clicked.
I find it confusing, and difficult to tell whether I've pressed the button or depressed it, especially in conjunction with the 'GitHub Dark' userstyle
I believe it would be more practical if its background color was changed when clicked, i.e. instantly.

What's your opinion, @Mottie ?

Current screenshot:

[Mottie]

Hi @darkred!

Yeah, the hover and selected background colors for those plain buttons are too similar. Even with GitHub-Dark turned off, it's subtle.

I was toying with the idea of making the selected button change the font somehow. I tried bold, but didn't like it much, then I made the selected button show small caps.

.gff-filter .btn.selected {
  font-variant: small-caps;
}

What do you think?... I'll work on GitHub-Dark's hover style for those buttons and make it have better contrast as well.

I'll be out of town this weekend. I'll look forward to your ideas.

[darkred]

I like a lot your idea changing capitalization as you toggle the filters 👍

In addition to the above, here are my suggestions (always in my humble opinion!) :

• The existing matching files counter that's displayed while hovering each filter button is great already: just the counter should appear quicker/almost instantly at hover - now (it seems like) it has some 0.5-1.0 sec delay.
• When the "all" filter is active (and so all subfilters are active), there shouldn't be any buttons background-color change as you hover the buttons, because it causes more confusion than clarity, especially with GitHub-Dark --> maybe just change the buttons border-color at hover, but that's it, no extra styling. The existing counter that appears as you hover the buttons is enough/suits perfectly already.
• The buttons background color should change immediately after toggling(activating/deactivating) a filter, not after hover ends, i.e. regardless of the hover status.

[Mottie]

Hi @darkred!

I'm back! Good ideas!...

• I removed the 0.4s inherent animation delay on the tooltips that were set by GitHub.

• When "all" is selected, there is no hover styling on the buttons.

• Button background colors are actually set by GitHub and GitHub-Dark... I didn't want to change then within the userscript as that adds more code to detect if the theme is light or dark. Instead I added a brighter border on hover (for GitHub-Dark, it's not as noticeable when GitHub-Dark isn't applied).

• The filters now include sub-categories... so in this repo, "user.js" and "js" are separate.

  

[darkred]

Awesome, @Mottie !!! Thank you!

Just one thing:
with the new version, the counter that appears as you hover the buttons (and the 'Toggle all files' text that appears after you have clicked the "all" button)
now stays there forever, until you click another filter:

Could you please make it so that it only appears during the mouse hover on the relevant button?

[Mottie]

GitHub will show a tooltip when you have the element focused.

[darkred]

OK, so, if there's no way to programmatically bypass this (I mean to "hide" every such tooltip after moving the mouse away from them -- that's the only thing I could think to solve this)
please feel free to close the issue 🙂
(but I believe you'll agree with me that those persistent tooltips are quite confusing).

[Mottie]

you'll agree with me that those persistent tooltips are quite confusing

Yeah, but I wouldn't want to programmically remove the focus because of people that use keyboard navigation to navigate the page... press the Tab to see what I mean.

I'll apply the hover styling to the button while focused as well...

[darkred]

Yeah, but I wouldn't want to programmically remove the focus because of people that use keyboard navigation to navigate the page... press the Tab to see what I mean.

You're absolute right 👍

I'll apply the hover styling to the button while focused as well...

Great! Thanks again for everything 👍