Closed Bug 895270 Opened 7 years ago Closed 7 years ago

only show black boxing checkboxes on hover

Categories

(DevTools :: Debugger, defect)

25 Branch
x86
macOS
defect
Not set

Tracking

(Not tracked)

RESOLVED FIXED
Firefox 25

People

(Reporter: fitzgen, Assigned: fitzgen)

References

(Blocks 1 open bug)

Details

Attachments

(1 file, 2 obsolete files)

Depends on: 877686
Assignee: nobody → nfitzgerald
Did we consider showing the icons on hover? ISTR that either Photoshop or Gimp did that and it was OK.
(In reply to Panos Astithas [:past] from comment #1)
> Did we consider showing the icons on hover? ISTR that either Photoshop or
> Gimp did that and it was OK.

I think this is a splendid idea, and suddenly feel a bit stupid for having not thought about this in the first place. It's what we do in the Rules view as well, so that's a good (and accepted) precedent.
Summary: only show black boxing checkboxes when we enter a "choose things to black box" mode in the UI → only show black boxing checkboxes on hover
Attached patch v1 (obsolete) — Splinter Review
Attachment #777995 - Flags: review?(vporof)
Comment on attachment 777995 [details] [diff] [review]
v1

Review of attachment 777995 [details] [diff] [review]:
-----------------------------------------------------------------

With this patch, there's a huge empty space on the left side of each source's label. I think this is very ugly and wastes around 35 pixels, which is a lot. This might be alleviated by the fact that the eyes will become a bit smaller, but it's still noticeable. Let's readdress this after that bug.

I would also have went with opacity and a subtle transition instead of bluntly changing visibility, but you might disagree.
Attachment #777995 - Flags: review?(vporof)
Attached patch v2 (obsolete) — Splinter Review
Using a .25s fade in/out, except fading in doesn't seem to be working (it just shows immediately). I'm sure it is something glaringly obvious, but I'm not seeing why this is.
Attachment #777995 - Attachment is obsolete: true
Attachment #780034 - Flags: review?(vporof)
Comment on attachment 780034 [details] [diff] [review]
v2

Review of attachment 780034 [details] [diff] [review]:
-----------------------------------------------------------------

One usability problem I found while playing with the patch is that it's hard to figure out what sources are blackboxed if all eyeballs are hidden. Case in point:
1. Open browser debugger
2. Blackbox a source
3. Move your mouse somewhere else.

Now if you have a great memory that's awesome, but it's easy to forget what's going on and which sources were blackboxed. Let's always show the dimmed eyeball for blackboxed sources. r+ with this change.

::: browser/themes/linux/devtools/debugger.css
@@ +21,5 @@
>   -moz-appearance: none;
>    padding: 0;
>    margin: 0 -4px 0 4px;
> +  opacity: 0;
> +  transition: opactiy .25s ease 0s;

opactiy? :)

::: browser/themes/osx/devtools/debugger.css
@@ +23,5 @@
>   -moz-appearance: none;
>    padding: 0;
>    margin: 0 -4px 0 4px;
> +  opacity: 0;
> +  transition: opacity .25s ease 0s;

I think transition: opacity .25s ease-out; would be better in this case.

@@ +30,5 @@
> +/* Only show the checkbox when the source is hovered over. */
> +.side-menu-widget-item:hover > .side-menu-widget-item-checkbox,
> +.side-menu-widget-item.selected > .side-menu-widget-item-checkbox {
> +  opacity: 1;
> +  transition: opactiy .25s ease 0s;

Remove this transition re-declaration here for fade-in to work.

::: browser/themes/windows/devtools/debugger.css
@@ +21,5 @@
>   -moz-appearance: none;
>    padding: 0;
>    margin: 0 -4px 0 4px;
> +  opacity: 0;
> +  transition: opactiy .25s ease 0s;

O-P-A-C-I-T-Y.

To bad for those windows and linux users. But their UIs suck anyway, so a missing transition won't be noticeable.
Attachment #780034 - Flags: review?(vporof) → review+
Attached patch v3Splinter Review
Updating with victor's feedback
Attachment #780034 - Attachment is obsolete: true
https://hg.mozilla.org/mozilla-central/rev/5899a4649b35
Status: NEW → RESOLVED
Closed: 7 years ago
Resolution: --- → FIXED
Whiteboard: [fixed-in-fx-team]
Target Milestone: --- → Firefox 25
Product: Firefox → DevTools
You need to log in before you can comment on or make changes to this bug.