profile
viewpoint

Ask questions[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 image

Prior Art

Chrome Network

image

firefox-devtools/ux

Answer questions violasong

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

useful!

Related questions

No questions were found.
Github User Rank List