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

Paolo how do you think about this?

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?

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.

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!

Sounds good! Thanks!

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.

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.

Thanks! I can review this over the week-end if needed.

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

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

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

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

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

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!