Closed Bug 787285 Opened 7 years ago Closed 7 years ago

Button-within-a-button in downloads panel feels confusing

Categories

(Firefox :: Downloads Panel, defect, P2)

x86_64
All
defect

Tracking

()

RESOLVED FIXED
Firefox 20

People

(Reporter: Unfocused, Assigned: mconley)

References

Details

Attachments

(14 files, 9 obsolete files)

747.80 KB, image/jpeg
Details
4.10 KB, image/png
Details
6.51 KB, image/png
Details
6.72 KB, image/png
Details
4.97 KB, image/png
Details
48.05 KB, patch
mak
: review+
Details | Diff | Splinter Review
81.77 KB, image/png
Details
117.90 KB, image/png
Details
49.20 KB, image/png
Details
69.46 KB, image/png
Details
129.67 KB, image/png
Details
170.71 KB, image/png
Details
113.33 KB, image/png
Details
165.45 KB, image/png
Details
Bug 760607 (I think) made it so the "open containing folder" button is within the main button for that download item  - this creates a button-within-a-button effect that feels rather confusing and wrong. Because of how the whole item is highlighted on hover, its not obvious which action will happen when clicking either the item, or the "open containing folder" button.

A compromise between the old style and the new style might be to use something similar to the expandable menu-items in the app menu, where there's a separating line to clearly differentiate two actions. And when hovering over that main part of the item, the second part of the item (open containing folder) is only partially highlighted.
Flags: needinfo?(shorlander)
This is bad, sure, but don't think we should block releasing the panel on this, since doesn't hurt the functionality. Regardless I don't think we are going back to the old "smaller" selection that was even more confusing than this, the right suggestion could be the splitmenu appearance Blair suggested.
We should resolve this soon.
I disagree, if we think this blocks the feature basically any filed bug blocks it, unless you think we should fix this soon to work on the definitive binding.

Btw note that Safari does the same (if you select a download you have the whole thing selected and buttons into it) and their users don't seem to care. Surely we can do better but doesn't look high prio.
(In reply to Marco Bonardo [:mak] from comment #3)
> I disagree, if we think this blocks the feature basically any filed bug
> blocks it, unless you think we should fix this soon to work on the
> definitive binding.
> 

I marked it blocking because it seemed to be blocking our decision on icons for OSX. Perhaps I misunderstood. I'll remove the block.
No longer blocks: ReleaseDownloadsPane
(In reply to Mike Conley (:mconley) from comment #4)
> I marked it blocking because it seemed to be blocking our decision on icons
> for OSX. Perhaps I misunderstood. I'll remove the block.

We can fix icons when will be the time, imo. Not that complicated to do and icons can be ported to aurora/beta with almost no regression risks.
I am going to slightly alter the icons to appear easier to target but we shouldn't block on this.
Flags: needinfo?(shorlander)
(In reply to Stephen Horlander from comment #6)
> I am going to slightly alter the icons to appear easier to target but we
> shouldn't block on this.

"Real" buttons with Australis on hover styling could be a good solution.
Mockup for enhancing the presence of the stop/resume/open icons on hover by adding a shape for more weight. Intent is to make it more obvious that it is in fact something you can press and give it more visual weight.
Excellent, thanks Stephen! I'll take it from here.
Assignee: nobody → mconley
Priority: -- → P2
Note to self - from left to right:

Normal, download item hover, icon hover, pressed
Hey Stephen:

The on-download-item-hover and icon hover icons for Windows XP (second from the left) assume a dark background...

We don't have a dark background in the panel or the Downloads View in Places. Are we supposed to be doing some kind of hover-effect for download items that I don't know about?

-Mike
Flags: needinfo?(shorlander)
Attached image Updated Download Panel Icons - OSX - 02 (obsolete) —
Added inverted icons
Attachment #694440 - Attachment is obsolete: true
Flags: needinfo?(shorlander)
(In reply to Stephen Horlander from comment #17)
> Created attachment 694513 [details]
> Updated Download Panel Icons - Windows (XP) - 02
> 
> Added Inverted Icons

Hey Stephen - I think we're missing a state for XP - we're missing the state where the item is selected, but not hovered (so, an inverted icon, but no surrounding circle).

I think we're missing that state for OSX as well.

-Mike
Flags: needinfo?(shorlander)
Attached patch WIP Patch 1 (obsolete) — Splinter Review
Checkpointing while I work on pinstripe and gnomestripe.
Attached patch WIP Patch 2 (obsolete) — Splinter Review
Pinstripe is done. Moving on to gnomestripe.
Attachment #697918 - Attachment is obsolete: true
Attached patch WIP Patch 3 (obsolete) — Splinter Review
Ok, I think this is everybody. Going to put up some screenshots, and then request review.
Attachment #697932 - Attachment is obsolete: true
> attachment 697624 [details]
Why OSX's "open" icon is loupe? I feel this may confuse user...
Attached patch WIP Patch 4 (obsolete) — Splinter Review
Attachment #698085 - Attachment is obsolete: true
OS: Windows 7 → All
Attached patch Patch v1Splinter Review
Attachment #698208 - Attachment is obsolete: true
Attached image OSX - panel icons
Attached image OSX - Places icons
Attachment #698368 - Flags: review?(mak77)
(In reply to Tetsuharu OHZEKI [:saneyuki_s] from comment #25)
> > attachment 697624 [details]
> Why OSX's "open" icon is loupe? I feel this may confuse user...

I believe this is OSX's native "Finder" icon. You can see a similar icon being used for the same purpose in other Apple apps, like Safari, so I don't think this will confuse OSX users.
Attachment #698368 - Flags: review?(mak77) → review?(mano)
Blocks: 812255
Comment on attachment 698368 [details] [diff] [review]
Patch v1

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

Very very nice!

::: browser/themes/gnomestripe/downloads/allDownloadsViewOverlay.css
@@ +60,5 @@
> +richlistitem.download:hover > .downloadButton.downloadCancel:active {
> +  -moz-image-region: rect(0px, 64px, 16px, 48px);
> +}
> +richlistitem.download[selected] > .downloadButton.downloadCancel {
> +  -moz-image-region: rect(0px, 80px, 16px, 64px); 

trailing space

@@ +85,5 @@
> +richlistitem.download:hover > .downloadButton.downloadShow:active {
> +  -moz-image-region: rect(16px, 64px, 32px, 48px);
> +}
> +richlistitem.download[selected] > .downloadButton.downloadShow {
> +  -moz-image-region: rect(16px, 80px, 32px, 64px); 

trailing space

@@ +110,5 @@
> +richlistitem.download:hover > .downloadButton.downloadRetry:active {
> +  -moz-image-region: rect(32px, 64px, 48px, 48px);
> +}
> +richlistitem.download[selected] > .downloadButton.downloadRetry {
> +  -moz-image-region: rect(32px, 80px, 48px, 64px); 

trailing space

::: browser/themes/pinstripe/downloads/allDownloadsViewOverlay.css
@@ +60,5 @@
> +richlistitem.download:hover > .downloadButton.downloadCancel:active {
> +  -moz-image-region: rect(0px, 64px, 16px, 48px);
> +}
> +richlistitem.download[selected] > .downloadButton.downloadCancel {
> +  -moz-image-region: rect(0px, 80px, 16px, 64px); 

trailing space

@@ +85,5 @@
> +richlistitem.download:hover > .downloadButton.downloadShow:active {
> +  -moz-image-region: rect(16px, 64px, 32px, 48px);
> +}
> +richlistitem.download[selected] > .downloadButton.downloadShow {
> +  -moz-image-region: rect(16px, 80px, 32px, 64px); 

trailing space

@@ +110,5 @@
> +richlistitem.download:hover > .downloadButton.downloadRetry:active {
> +  -moz-image-region: rect(32px, 64px, 48px, 48px);
> +}
> +richlistitem.download[selected] > .downloadButton.downloadRetry {
> +  -moz-image-region: rect(32px, 80px, 48px, 64px); 

trailing space
Attachment #698368 - Flags: review?(mano) → review+
https://hg.mozilla.org/mozilla-central/rev/f95b927bce6c

in case it's not going to make the cut will need approval
Status: NEW → RESOLVED
Closed: 7 years ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 20
You need to log in before you can comment on or make changes to this bug.