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

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

useful!

Related questions

No questions were found.
Github User Rank List