Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Radio buttons for callstacks(implementation filters) look like they are grayed out and disabled #2088

Open
canova opened this issue Jun 19, 2019 · 6 comments
Labels
call tree Related to the call tree panel polish Small features or changes that do not require planning to work on. These help out our end users. ux-needed Needs help with UX

Comments

@canova
Copy link
Member

canova commented Jun 19, 2019

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

@canova canova added polish Small features or changes that do not require planning to work on. These help out our end users. call tree Related to the call tree panel help wanted Things ready to be worked on by anyone. Issues must include instructions on how to complete the task labels Jun 19, 2019
@julienw
Copy link
Contributor

julienw commented Jun 19, 2019

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.

@gregtatum
Copy link
Member

I find this very surprising and would like to find out more.

@julienw
Copy link
Contributor

julienw commented Jun 27, 2019

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 ?

@canova
Copy link
Member Author

canova commented Jun 27, 2019

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/

@loganfsmyth
Copy link

If I remember right, these are the buttons I was talking about: Screen Shot 2020-02-18 at 9 51 22 PM

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:
Screen Shot 2020-02-18 at 9 57 34 PM

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.

@julienw
Copy link
Contributor

julienw commented Feb 18, 2020

Thanks for the useful feedback!
Because we follow the photon guidelines, I forwarded the problem there => FirefoxUX/photon#386.

@julienw julienw added ux-needed Needs help with UX and removed help wanted Things ready to be worked on by anyone. Issues must include instructions on how to complete the task labels Mar 4, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
call tree Related to the call tree panel polish Small features or changes that do not require planning to work on. These help out our end users. ux-needed Needs help with UX
Projects
None yet
Development

No branches or pull requests

5 participants
@loganfsmyth @julienw @canova @gregtatum and others