ux
ux copied to clipboard
firefox-devtools
[Toolbox] "Active Footgun" icon in panel tabs
tl;dr: Tabs with options enabled that are potential footguns should have warnings on them – to avoid surprises and provide similar UX to Chrome. MVP should cover Network panel.
Implementation: Bug 1545739.
cc @janodvarko @violasong
User Story: When enabling options for a task that I could potentially forget while they keep impacting my debugging/browsing experience, I want the tool's tab to give me a warning, so that I can keep the option in mind and disable it when I am done with my task.
Considerations
- For Network the warning should show when throttling or request blocking is active (which seems to be the same in Chrome)
- A tooltip on the tab should provide the warning's reason
- The icon should use the existing tab's icon space (top, within, or combined), so that we don't shift the tab layout around like Chrome does when showing/hiding the icon
- This could even have some fun with an animation (like the tracking protection shield), to focus users on the icon when the right options are toggled.
- Debugger wants to represent state in their panel icon, bug 1544967
- A11Y panel turns green when its enabled
Prior Art
Chrome Network
The suggestion looks good to me. So, from my perspective, I only need the icon (or set of icons). Honza
@violasong could you chime in here? The warning icon seems a low-hanging fruit – but we also got other panels that want to communicate state in their icon; like https://bugzilla.mozilla.org/show_bug.cgi?id=1544967#c6 and the green state of the enabled Accessibility icon. Maybe we want to solve them all in unison; or we decide to keep it simple and continue diverging.
Ah good idea - we talked about this before but probably failed to capture it.
There's an existing icon that shows warning combined with extension:
We could do that monochrome style though I think going with a yellow icon looks a lot more clear:
In the same vein, the Debugger icon could look like this. Maybe a darker yellow but yellow 70 is too dark.
I don't think we need to solve them all in unison :)
CC @fvsch
Well now that I'm thinking about this I really want Inspector (has changes) and Console (has errors) to look like this :)
I like where this is going @violasong – a lot!
The UI is similar to tab and app badges and the badges are large enough to include enough meaning. Color can be used to switch from warning to error.
How would enabled A11Y look?
Another tweak to improve the visibility of the footgun state could be to add a yellow line to the tab (similar to the blue highlight for selected tab, or how Container tabs are flagged)
@darkwing brought up that the paused state would even benefit from a colored tab. There is probably some high severity state (footguns like paused debugger, tracked changes and throttled connection) that would benefit from this while low severity (enabled a11y, errors in console) don't need to draw too that kind of attention.
Yellow tab border looks nice, though it might get confused with the selected tab
I could play around with colored tab more, but at first try I'm not if I can make it look good
Hm maybe a brighter yellow for the tab border:
Ideally I'd like all the icons to be the same color to help cut down on color chaos :)
Would the selected tab get a blue warning badge or also yellow?
Hm maybe a brighter yellow for the tab border:
I like the light yellow bar as highlight, subtle yet warning. If we get the colors documented for dark and light mode, we might be good to implement (pending other input).
Ah oops, I was thinking yellow for the selected tab as well
I like the light yellow bar as highlight, subtle yet warning. If we get the colors documented for dark and light mode, we might be good to implement (pending other input).
Cool! Are we doing the icon overlay in css? If so the footgun icons just need to be yellow 60. Yellow 50 for the top line. I can look into dark mode soon.
It has happened to me that I forgot I had something activated. I guess it depends on what is considered options that needs to be highlighted. I can imagine if one is always in a specific scenario then the visual reminder could become annoying.
I even wonder if a single panel highlighting all changed configurations by category would be useful, basically a summary of the changes, with even a button for a reset. Difficult to know without testing one or the other.
I really like these mockups @violasong! The icons and the attention to action in each tab feels great! Maybe I'm looking at the mockups through rose-tinted glasses, but I don't know that each tab needs its own action color and icon. The debugger literally halts everything which has the ability to cause confusion, so I somewhat worry that the other icons could draw away attention. Overall, however, I love this!
I can imagine if one is always in a specific scenario then the visual reminder could become annoying.
Seems like some tools (Console, Debugger, Accessibility) could omit the icon when they're currently selected. The Inspector and Network panels seem to need them always, as they don't have a strong indicator of footgun state inside the panel (though they probably should).
I even wonder if a single panel highlighting all changed configurations by category would be useful, basically a summary of the changes, with even a button for a reset.
(🙀 hmm so a unified SMART DEVTOOLS panel, cc @captainbrosset @martinbalfanz just for lol)
I like the idea of a home panel with 'interesting' info from each panel which could also have release notes like Chrome, plus extension recommendations and tips. I'll have to file this in my Someday-Maybe meta PRD :)
I don't know that each tab needs its own action color and icon. The debugger literally halts everything which has the ability to cause confusion, so I somewhat worry that the other icons could draw away attention.
I was thinking all the icons would be yellow to tone them down, and hopefully the bright yellow top border makes the Debugger stand out. The above mockup is showing a pretty unlikely state of everything being footgun but I expect it would usually look more like this when folks are doing JS stuff:
Seems like some tools (Console, Debugger, Accessibility) could omit the icon when they're currently selected.
If the Console icon ends up with the last discussed option in #58 , I would argue to not have an icon on the tab. Having a counter makes it much more actionable than just a warning state.
When users have footguns in all tabs enabled, we as a product have used this wrong indeed ;) . A case where more would be enabled, could be a user being paused in debugger while network resources are throttled or blocked – which sounds like a power user but also somebody who has a lot on their hands and probably likes to see which of the panels still has state that they might want to reset. Most likely footguns are enabled independently for most users.
Related, A11y should probably not be a warning by default, as there are many users out there that have a11y enabled without it being a footgun. Maybe it should only be shown for users who manually enabled the option.
I even wonder if a single panel highlighting all changed configurations by category would be useful, basically a summary of the changes, with even a button for a reset.
(🙀 hmm so a unified SMART DEVTOOLS panel, cc @captainbrosset @martinbalfanz just for lol)
That doesn't sound what I had in mind 🤣 but to try to clarify my ill phrased thought and taking the example given by @digitarald
For Network the warning should show when throttling or request blocking is active (which seems to be the same in Chrome)
Network
- [ ] Throttling
- [x] Request Blocking
RDM
- [x] Touch
- [x] UA changed
@violasong The current toolbox icons are in this Figma document: https://www.figma.com/file/SvG26G5QeMmQ4iM6BMrfrmrh/DevTools-Toolbox-Icons
Re. badges on the RDM icon: since it's just an icon and not a tab, we could get icon/information overload quicker there. I'm also concerned that having a changed UA is a common situation because once you select a profile (e.g. "iPhone 6/7/8") it changes the UA. We would end up having a warning all the time on that icon, which I'm not fond of.
The RDM icon is just an icon, not a full tab, and activating Touch Events and changing the UA (which happens every time you select a preconfigured profile like "iPhone 6/7/8" is very common. I'm afraid we would end up always showing the RDM icon with a badge of some sort and that could be distracting.
Hm maybe a brighter yellow for the tab border
Maybe an inset bottom border a bit like Container Tabs do? That could limit confusion between this warning border and the selected tab state.
Re. badges on the RDM icon: since it's just an icon and not a tab
Agreed, out of scope but can take inspiration from this work. RDM needs its own highlighting system in its own UI, as it can be opened without DevTools.
That could limit confusion between this warning border and the selected tab state.
With the light yellow bar, confusion should be limited (pending review of the dark colors) – but its an option to explore for sure (also as it acts more as an underline, which is nice).
Next step: @violasong to provide colors for the dark theme.
If the Console icon ends up with the last discussed option in #58 , I would argue to not have an icon on the tab. Having a counter makes it much more actionable than just a warning state.
When users have footguns in all tabs enabled, we as a product have used this wrong indeed ;) .
Yeah, makes sense :D
Related, A11y should probably not be a warning by default, as there are many users out there that have a11y enabled without it being a footgun. Maybe it should only be shown for users who manually enabled the option.
You mean some folks have A11y on always, so we should have a setting to turn off the indicator? The yellow dot actually looks less prominent than the green icon, so I'm not sure if it's that much of a warning.
Tried the container look for Console, and I think I do like this for the clearer separation from selected state.
(🙀 hmm so a unified SMART DEVTOOLS panel...That doesn't sound what I had in mind 🤣 but to try to clarify my ill phrased thought and taking the example given by @digitarald
Yes, I understand - I was expanding on this idea to new futuristic heights, wherein it gets on the same wavelength as the Smart 3rd Panel idea I've been raving about to the Layout Tools team for a while :)
btw, what's the UX story, when the user changes website in the same window/tab, aka the settings are still changed but the site is different.
Potential dark mode - Same Yellow 60 for the icon, Yellow 50 at 40% for the underline
Here's the Invision link for all the mockups together.
btw, what's the UX story, when the user changes website in the same window/tab, aka the settings are still changed but the site is different.
Good question, @karlcow . If the network is still throttled, the warning would still be shown – doesn't seem too different.
Updated design with simpler indicator circles for Inspector/Accessibility.
Invision link: https://mozilla.invisionapp.com/share/J5RPDXHHAS8#/screens
One more test: Upper right indicators. Matches the main Firefox indicators, but this style for Network/Debugger doesn't look as good to me.
Just wanted to check in on this bug :) and the semi-related Show the number of errors in the toolbox. Is this issue simply awaiting updated icons with the cut-outs? (If so, I wanted to ask Florens if they'd be interested in modifying their own icons :))
This is something I would be super interested in trying to implement when the icons were ready and all states defined. cc @digitarald @janodvarko
I'm interested. What icons do we need exactly?
For the cutouts, looking at the design from https://github.com/firefox-devtools/ux/issues/60#issuecomment-487227150 I'm seeing three shapes: triangle (warning), big circle (error / paused), small circle (dot).
I'd rather avoid creating 3 cutout SVG variants for each tool, so instead I think we can probably use CSS masking with 3 masks.
E.g. if we implement the tab icons as something like:
<span class="devtools-tab-icon" data-state="warning">
<span class="devtools-tab-icon-img"></span>
</span>
We can apply the main icon and a mask to the inner span, and overlay an ::after pseudo-element. So we only need to produce SVG images for the small icons + the masks.
Sorry for the delay on this! I think what we still want is the lower-right designs linked in this comment. (cc: @digitarald to confirm.)
The CSS masking idea seems great! And I think you could reuse the tiny warning icon you made recently.