Radio buttons for callstacks(implementation filters) look like they are grayed out and disabled
Opened this issue · 6 comments
This came out during the profiling workshop with devtools team. It looks like our radio buttons are misleading and seem like they are grayed out and disabled. We should find a better styling for them to display.
┆Issue is synchronized with this Jira Task
Actually I have this PR #2063 that changes them a bit. Let's see if this is better :)
Basically we try to stick with photon styling here. The aforementioned PR is fixing a small error when we tried to apply photon initially.
I find this very surprising and would like to find out more.
PR #2106 landed with the aforementioned changes. I think it's now much more difficult to think they're grayed out.
Ideally we now should ask feedback from the devtools member who thought this. Do you recall who that was @canaltinova ?
Thanks for working on it Julien. I believe it was @loganfsmyth.
hey @loganfsmyth, I remember us talking about this checkbox problem during the workshop. Would you mind taking a look at the new radio buttons and telling us if you think it's fixed or what we should do to make it more explicit? Currently the PR is merged but we haven't deployed yet. You can use https://deploy-preview-2106--perf-html.netlify.com/ to test it. for example, here's an example profile to see the new radio buttons:
https://deploy-preview-2106--perf-html.netlify.com/public/d3fe49afc3127b547f84b4c901ea981b0830b418/
If I remember right, these are the buttons I was talking about: 
To me, the background of the radio and check boxes still looks disabled since it's not the same color as the background color of the context as it would be on a webpage with default styling:
It's at least made slightly better because they have a hover effect, but just from an initial glance, I think I'd still think those buttons were disabled.
Thanks for the useful feedback!
Because we follow the photon guidelines, I forwarded the problem there => FirefoxUX/photon#386.