1564913 - Blackboxed state is a bit too subtle and can cause confusion for users

Status: NEW

(DevTools :: Debugger, enhancement, P3)

Description

[Nicolas Chevobbe [:nchevobbe]]

We got a report (in French: https://discourse.mozilla.org/t/partially-broken-devtools/42378/4) from someone saying that they couldn't put a breakpoint on their file and that it was le souk in the debugger :D

Turned out that the file was blackboxed, which explains why they couldn't put a breakpoint on it.

But looking at it it's true that we don't surface much that a file is blackboxed, and what it actually means.

A user could click on it "just to see" what it does, and forget about it, without getting much insights.

Furthermore, the "eye" icon works the opposite way? Like, this is an opened eye, blue when blackboxed, so one could expect that the file is being "watched" or something like that?
I think Florens had mockups with closed eyes when the file is blackboxed, I can't remember why we didn't go that way?

The thing that we could do right now to make it more obvious:

• the icon title should describe what it means for a file to be blackboxed
• all the lines in the gutter should be disabled
• the whole gutter could have a title attribute saying that the file is blackboxed, and that as a result we can't set breakpoint in it. Maybe indicate how to unblackbox the file, or better provide a super fast way to remove the blackboxing without moving the mouse too much. (e.g. the title could say : This file is blackboxed, which means you can't set breakpoints on it. Do a Shift+Click on the gutter to add a breakpoint anyway and unblackbox the file.)

Comment 1

[Nicolas Chevobbe [:nchevobbe]]

Florens, I tried to find your mockups but couldn't find anything on the ux repo, nor on the debugger one.
Would you remember where the discussion happened? Thanks!

Comment 2

[Florens Verschelde :fvsch]

Attachment: DevTools Misc Icons.svg

I had a two-state eye icon (open and closed eye) in this document:
https://www.figma.com/file/gZ2qwGfvs35fbvYtrb2uL41m/DevTools-Misc-Icons?node-id=0%3A1

Victoria's feedback was that the Photon convention for disabled or disallowed stuff is to use a diagonal bar to strike-out the original icon:
https://design.firefox.com/icons/viewer/#permissions

So we could have:

1. Open eye: not blackboxed, Debugger has the permission to set breakpoints
2. Crossed-out eye: blackboxed, Debugger cannot set breakpoints

I'm just not sure about making the icon blue when "active" (second state). Our blue highlight color for "active" buttons has a positive meaning and the crossed-out icon would have a negative meaning, so there's a message clash here.

Maybe we should have a secondary highlight color, like a shade of red, for "active" buttons which signal a "negative" or "something is disabled/paused" state?

Comment 3

[Victoria Wang [:victoria]]

Sorry for the late response!

Ah yes, the ol' "button shows both state and action" problem 😅, like in this other bug that is also using your eye icon.

If we're going to move towards using the phrase "library code" instead of blackbox (Harald was talking about Edge (?) doing this in an effort to move past inclusiveness issues with black/white wording)... what is the verb? (Trying to understand if the eye icon would still make sense)

In addition to an icon change, I like the idea of showing text for the state in which Debugger can't set breakpoints, as it sounds like an important mode change, similar to paused on breakpoints and deactivated breakpoints.

Comment 4

[:Harald Kirschner :digitarald]

Seems like this question is being answered in https://github.com/firefox-devtools/ux/issues/84 – we'll bring back the decision to this bug.