Note: There are a few cases of duplicates in user autocompletion which are being worked on.

Highlight the action buttons only when the mouse is directly over them

VERIFIED FIXED in Firefox 52

Status

()

Firefox
Downloads Panel
VERIFIED FIXED
7 months ago
6 months ago

People

(Reporter: rexboy, Assigned: rexboy)

Tracking

(Blocks: 1 bug)

unspecified
Firefox 53
x86_64
Linux
Points:
1
Dependency tree / graph

Firefox Tracking Flags

(firefox52 verified, firefox53 verified, firefox54 verified)

Details

MozReview Requests

()

Submitter Diff Changes Open Issues Last Updated
Loading...
Error loading review requests:

Attachments

(2 attachments, 1 obsolete attachment)

(Assignee)

Description

7 months ago
+++ This bug was initially created as a clone of Bug #950058 +++

After bug 950058 landed, the download item has separated into two areas: the main area and button area. The main area (which contains description, progressbar, etc.) for now is not highlighted (or dimmed) if user is not able to click it, for example when download is proceeding and when the item is deleted. This way we avoided any conflict with design and prevent user from thinking it's clickable. (see Bug 950058 comment 36)

But on the other hand, this also failed to introduce the visual's new proposal, which hope to also give a light highlight in the main area when mouse hovered. By doing this the list item can be treated as a whole component rather than giving an  feeling of highlighting a faraway area against cursor position. (see Bug 950058 comment 48)

Let's discuss if it's possible to introduce this design.
(Assignee)

Updated

7 months ago
Summary: Make download main area slightly highlighted on mouseover → Make main area of download item slightly highlighted on mouseover
(Assignee)

Comment 1

7 months ago
Paolo how do you think about this?
Flags: needinfo?(paolo.mozmail)

Comment 2

7 months ago
The basic rule in bug 950058 comment 36 still holds, areas that are not clickable should not be highlighted on hover, or the product will look broken. The reason this might not be apparent to us is that we already know what to expect, so we don't perceive the brokenness.

For instance, we had this issue in the past with the case where the file was removed from disk and we still highlighted the item. The fact that nothing happened when clicking was immediately perceived as a bug. The same effect would be there even if there is a clickable button on the side.

The modification of the text we're doing on hover in bug 1282662 would also add to the confusion, making this look like an active item.

On the other hand, if you're concerned about the action button being highlighted when the mouse is not located over it, this is something we can fix by only highlighting it when the mouse is over it, just like a normal button and exactly like we do for the Downloads Panel footer and for the buttons at the bottom of the Application Menu. I don't think this subtracts anything from the feeling of consistency of the list item. What do you think?
Flags: needinfo?(paolo.mozmail)
(Assignee)

Comment 3

6 months ago
Since this design is based on the new visual proposal, I think we need to have visual and UX team's opinion here before making a decision. Ni? Carol.
Flags: needinfo?(chuang)

Comment 4

6 months ago
Created attachment 8825709 [details]
Panel_hover.png

Hello Paolo, 
I had a discussion with Bryant about the hover state on the panel. Since current Firefox mostly has single highlight instead of selecting the whole list item with two highlight states, we decide to adjust the rules of the highlight. The rule is simple: only the item is actionable will has the highlight color. I also talked to Sean and Rex about the change this afternoon. They will investigate how much effort they need to make the change but they don't have problems about this design change. Please see the attachment examples and let me know what you think. Welcome to let us know if you have concerns or questions. 
I'll update the spec soon! thanks!
Flags: needinfo?(chuang) → needinfo?(paolo.mozmail)

Comment 5

6 months ago
Sounds good! Thanks!
Flags: needinfo?(paolo.mozmail)
Summary: Make main area of download item slightly highlighted on mouseover → Highlight the action buttons only when the mouse is directly over them

Comment 6

6 months ago
Sean, Rex, is one of you going to take this bug?

If we don't land and request uplift this week, it's likely to miss Aurora 52 and we might either have to ship the highlight behavior that we have now, or request a Beta uplift early in the cycle, which is sub-optimal.
Flags: needinfo?(selee)
Flags: needinfo?(rexboy)
(Assignee)

Comment 7

6 months ago
Maybe I can take it. But I'm not sure if I can complete it by release date since there are other works ongoing. Let's try.
Flags: needinfo?(selee)
Flags: needinfo?(rexboy)
(Assignee)

Updated

6 months ago
Assignee: nobody → rexboy

Comment 8

6 months ago
Thanks! I can review this over the week-end if needed.
Comment hidden (mozreview-request)
(Assignee)

Comment 10

6 months ago
It turns our that I need to only remove one rule! Simpler than I thought.
Paolo may you take a look on it?

Comment 11

6 months ago
mozreview-review
Comment on attachment 8828742 [details]
Bug 1325574 - Highlight the action buttons only when the mouse is directly over them.

https://reviewboard.mozilla.org/r/106040/#review106992

I can take care of the review today if you want.

::: browser/themes/shared/downloads/downloads.inc.css:265
(Diff revision 1)
> -}
> -
>  @itemFinished@[exists] .downloadMainArea:hover,
>  @item@:not([verdict]) > .downloadButtonArea:hover,
>  @item@[verdict]:hover {
>    background-color: var(--arrowpanel-dimmed-further);

I believe you should now use --arrowpanel-dimmed here.

::: browser/themes/shared/downloads/downloads.inc.css:271
(Diff revision 1)
>  }
>  
>  @itemFinished@[exists] > .downloadMainArea:hover:active,
>  @item@:not([verdict]) > .downloadButtonArea:hover:active,
>  @item@[verdict]:hover:active {
>    background-color: var(--arrowpanel-dimmed-even-further);

And --arrowpanel-dimmed-further here.

Comment 12

6 months ago
mozreview-review
Comment on attachment 8828742 [details]
Bug 1325574 - Highlight the action buttons only when the mouse is directly over them.

https://reviewboard.mozilla.org/r/106040/#review106998

With the changes Dão suggested, this is good enough, and less risky for uplift. I'll push the updated version.

We need input from UX on what to do for the toolbarseparator for cases like failed downloads. Since we don't highlight the button anymore, I believe it shouldn't expand when the mouse is over an inactive area.

We should have a separate bug for the issue, because it might need either a mouseover listener or a restructure of the item to use a border on the button instead. The latter would lose the one pixel grace area we have for completed downloads though.
Attachment #8828742 - Flags: review?(paolo.mozmail) → review+
Comment hidden (mozreview-request)

Comment 14

6 months ago
Pushed by paolo.mozmail@amadzone.org:
https://hg.mozilla.org/integration/mozilla-inbound/rev/db3c474e3c68
Highlight the action buttons only when the mouse is directly over them. r=paolo

Updated

6 months ago
Attachment #8828755 - Flags: review?(paolo.mozmail) → review+

Comment 15

6 months ago
Comment on attachment 8828755 [details]
Bug 1325574 - Highlight the action buttons only when the mouse is directly over them.

Approval Request Comment
[Feature/Bug causing the regression]: Downloads Panel redesign
[User impact if declined]: Downloads Panel not matching the final design
[Is this code covered by automated tests?]: No, front-end CSS changes only
[Has the fix been verified in Nightly?]: No
[Needs manual test from QE? If yes, steps to reproduce]: Ensure you have a completed download and a failed download in the Downloads Panel. Put the mouse pointer over the file name, and check that the action button is not highlighted. For completeness, check that there aren't regressions with other download states.
[List of other uplifts needed for the feature/fix]: None
[Is the change risky?]: I'll call this medium risk, but I'd call this very low risk if we were earlier in the cycle
[Why is the change risky/not risky?]: A little bit of risk is due to the fact that we didn't try this change in Nightly yet, and there are several possible states of the download item. On the other hand, the CSS change is really limited in scope and possible regressions are quite easy to fix even in early Beta. Moreover, this is a cosmetic change only.
[String changes made/needed]: None
Attachment #8828755 - Flags: approval-mozilla-aurora?

Updated

6 months ago
Attachment #8828742 - Attachment is obsolete: true
https://hg.mozilla.org/mozilla-central/rev/db3c474e3c68
Status: NEW → RESOLVED
Last Resolved: 6 months ago
status-firefox53: --- → fixed
Resolution: --- → FIXED
Target Milestone: --- → Firefox 53
Comment on attachment 8828755 [details]
Bug 1325574 - Highlight the action buttons only when the mouse is directly over them.

download panel css change for aurora52
Attachment #8828755 - Flags: approval-mozilla-aurora? → approval-mozilla-aurora+

Comment 18

6 months ago
bugherderuplift
https://hg.mozilla.org/releases/mozilla-aurora/rev/ed405e870c7b
status-firefox52: --- → fixed
I reproduced this issue using 53.0a1, build ID: 20161223030226, on Windows 10 x64.
I can confirm this issue is fixed, I verified using:
-Fx 52.0b1, build ID: 20170124094647 
-Fx 53.0a2, build ID: 20170130004003
-Fx 54.0a1, build ID: 20170130030205
On Windows 10 x64, Mac OS X 10.11 and Ubuntu 14.04 LTS.

Cheers!
Status: RESOLVED → VERIFIED
status-firefox52: fixed → verified
status-firefox53: fixed → verified
status-firefox54: --- → verified

Updated

6 months ago
Blocks: 1335403
You need to log in before you can comment on or make changes to this bug.