[Toolbox] "Active Footgun" icon in panel tabs

digitarald commented 5 years ago

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

janodvarko commented 5 years ago

The suggestion looks good to me. So, from my perspective, I only need the icon (or set of icons). Honza

digitarald commented 5 years ago

@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.

violasong commented 5 years ago

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

violasong commented 5 years ago

Well now that I'm thinking about this I really want Inspector (has changes) and Console (has errors) to look like this :)

digitarald commented 5 years ago

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)

digitarald commented 5 years ago

@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.

violasong commented 5 years ago

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 :)

digitarald commented 5 years ago

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).

violasong commented 5 years ago

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.

karlcow commented 5 years ago

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.

darkwing commented 5 years ago

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!

violasong commented 5 years ago

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:

digitarald commented 5 years ago

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.

karlcow commented 5 years ago

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

Reset

fvsch commented 5 years ago

@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.

fvsch commented 5 years ago

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.

screenshot

digitarald commented 5 years ago

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.

violasong commented 5 years ago

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.

violasong commented 5 years ago

Tried the container look for Console, and I think I do like this for the clearer separation from selected state.

violasong commented 5 years ago

(🙀 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 :)

karlcow commented 5 years ago

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.

violasong commented 5 years ago

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.

digitarald commented 5 years ago

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.

violasong commented 5 years ago

Updated design with simpler indicator circles for Inspector/Accessibility.

Invision link: https://mozilla.invisionapp.com/share/J5RPDXHHAS8#/screens

violasong commented 5 years ago

One more test: Upper right indicators. Matches the main Firefox indicators, but this style for Network/Debugger doesn't look as good to me.

violasong commented 5 years ago

Ah, and the extension icons all use lower-right style.

violasong commented 4 years ago

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 :))

darkwing commented 4 years ago

This is something I would be super interested in trying to implement when the icons were ready and all states defined. cc @digitarald @janodvarko

fvsch commented 4 years ago

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.

violasong commented 4 years ago

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.

digitarald commented 4 years ago

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.)

Yes, they look great and keep the icon "readable"!

We now have request blocking as well. With throttling, those 2 would be important footguns to highlight. Not sure if we have engineers to work on this atm, though, but I will update the bug.

digitarald commented 4 years ago

Updated https://bugzilla.mozilla.org/show_bug.cgi?id=1545739#c3 , maybe somebody from this thread is interested.

violasong commented 4 years ago

@digitarald Should this issue should be turned into separate bugzilla bugs for each panel?

digitarald commented 4 years ago

@violasong yes, trying to catch up on this as we now got more and more footgun features like resource blocking.

darkwing commented 4 years ago

Adding to this, we're actively working on adding a icon/dropdown menu in the debugger to expose disabling JavaScript:

https://phabricator.services.mozilla.com/D71365

Should we make the icon red when JS is disabled? Should we show a different notifier?

violasong commented 4 years ago

For disabled, what about a yellow warning sign? Same as the Network warning sign for throttling. To me red signals that something is wrong, but since disabling is from user action, it doesn't seem to need as much prominence. (Just checked and Chrome also uses a yellow warning sign for disabled JS.)

darkwing commented 4 years ago

Where do we want to place this icon? We also use yellow for the "pause reason" block so I just want to make sure I'm understanding correctly.

violasong commented 4 years ago

I was thinking it would look like this:

violasong commented 4 years ago

This invision doc has the latest styles (added example with Debugger warning)

fvsch commented 4 years ago

We may need to add something in the Debugger panel itself too.

Because otherwise it will be:

"Hmm there's a warning in the Debugger" -> switch to Debugger
"I'm not seeing anything strange here, what was the warning about?"

Should we reuse the "pause reason" block (WhyPaused component)? To say something like "Hey, JavaScript is disabled. Want to enable it again?"

darkwing commented 4 years ago

@fvsch Yep. I'm thinking we could add a message and this icon in the Sources pane. The first inclination that there's something unexpected is the user looking at the sources tree and seeing nothing, so seems like a perfect spot.

digitarald commented 4 years ago

To say something like "Hey, JavaScript is disabled. Want to enable it again?"

This is a very specific user opt-in (compared to pausing, which can happen async later due to some latent toggles), so I am not sure if it needs a specific callout beyond the footgun icon on the Debugger icon and then on the Settings button. Similarly, throttling in Network would also generate a warning and highlight the toolbar element – without a warning anywhere.

violasong commented 4 years ago

Either way, it would be great to have tooltips on any of the footgun icons.

firefox-devtools / ux