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

Status: RESOLVED FIXED

(Firefox :: Downloads Panel, defect, P2)

Description

[Blair McBride [:Unfocused] (UNAVAILABLE)]

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.

Comment 1

[Marco Bonardo [:mak]]

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.

Comment 2

[Mike Conley (:mconley) (:⚙️)]

We should resolve this soon.

Comment 3

[Marco Bonardo [:mak]]

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.

Comment 4

[Mike Conley (:mconley) (:⚙️)]

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

Comment 5

[Marco Bonardo [:mak]]

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

Comment 6

[Stephen Horlander [:shorlander]]

I am going to slightly alter the icons to appear easier to target but we shouldn't block on this.

Comment 7

[u428464]

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

Comment 8

[Stephen Horlander [:shorlander]]

Attachment: Enhance Stop/Resume/Open Icons on Hover

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.

Comment 9

[Stephen Horlander [:shorlander]]

Attachment: Updated Download Panel Icons - OSX

Comment 10

[Stephen Horlander [:shorlander]]

Attachment: Updated Download Panel Icons - Windows (Aero)

Comment 11

[Stephen Horlander [:shorlander]]

Attachment: Updated Download Panel Icons - Windows (XP)

Comment 12

[Stephen Horlander [:shorlander]]

Attachment: Updated Download Panel Icons - Linux

Comment 13

[Mike Conley (:mconley) (:⚙️)]

Excellent, thanks Stephen! I'll take it from here.

Comment 14

[Mike Conley (:mconley) (:⚙️)]

Note to self - from left to right:

Normal, download item hover, icon hover, pressed

Comment 15

[Mike Conley (:mconley) (:⚙️)]

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

Comment 16

[Stephen Horlander [:shorlander]]

Attachment: Updated Download Panel Icons - OSX - 02

Added inverted icons

Comment 17

[Stephen Horlander [:shorlander]]

Attachment: Updated Download Panel Icons - Windows (XP) - 02

Added Inverted Icons

Comment 18

[Mike Conley (:mconley) (:⚙️)]

(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

Comment 19

[Stephen Horlander [:shorlander]]

Attachment: Updated Download Panel Icons - OSX - 03

Comment 20

[Stephen Horlander [:shorlander]]

Attachment: Updated Download Panel Icons - Windows (XP) - 03

Comment 21

[Mike Conley (:mconley) (:⚙️)]

Attachment: WIP Patch 1

Checkpointing while I work on pinstripe and gnomestripe.

Comment 22

[Mike Conley (:mconley) (:⚙️)]

Attachment: WIP Patch 2

Pinstripe is done. Moving on to gnomestripe.

Comment 23

[Stephen Horlander [:shorlander]]

Attachment: Updated Download Panel Icons - Linux - 02

Comment 24

[Mike Conley (:mconley) (:⚙️)]

Attachment: WIP Patch 3

Ok, I think this is everybody. Going to put up some screenshots, and then request review.

Comment 25

[Tetsuharu OHZEKI [:tetsuharu] (UTC+9)]

> attachment 697624 [details]
Why OSX's "open" icon is loupe? I feel this may confuse user...

Comment 26

[Mike Conley (:mconley) (:⚙️)]

Attachment: WIP Patch 4

Comment 27

[Mike Conley (:mconley) (:⚙️)]

Attachment: Patch v1

Comment 28

[Mike Conley (:mconley) (:⚙️)]

Attachment: Windows 7 - panel icons

Comment 29

[Mike Conley (:mconley) (:⚙️)]

Attachment: Windows 7 - Places icons

Comment 30

[Mike Conley (:mconley) (:⚙️)]

Attachment: Windows XP - panel icons

Comment 31

[Mike Conley (:mconley) (:⚙️)]

Attachment: Windows XP - Places icons

Comment 32

[Mike Conley (:mconley) (:⚙️)]

Attachment: OSX - panel icons

Comment 33

[Mike Conley (:mconley) (:⚙️)]

Attachment: OSX - Places icons

Comment 34

[Mike Conley (:mconley) (:⚙️)]

Attachment: Ubuntu - panel icons

Comment 35

[Mike Conley (:mconley) (:⚙️)]

Attachment: Ubuntu - Places icons

Comment 36

[Mike Conley (:mconley) (:⚙️)]

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

Comment 37

[Marco Bonardo [:mak]]

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

Comment 38

[Marco Bonardo [:mak]]

https://hg.mozilla.org/mozilla-central/rev/f95b927bce6c

in case it's not going to make the cut will need approval