Keep downloads button contents from overlapping its border

RESOLVED FIXED in Firefox 19

Status

()

defect
RESOLVED FIXED
7 years ago
7 years ago

People

(Reporter: fryn, Assigned: fryn)

Tracking

Trunk
Firefox 19
All
macOS
Points:
---
Dependency tree / graph

Firefox Tracking Flags

(Not tracked)

Details

()

Attachments

(2 attachments, 1 obsolete attachment)

Assignee

Description

7 years ago
When clicking the downloads toolbar button (#downloads-button), it gets replaced with a wider button (#downloads-indicator), which is perceived as the button awkwardly expanding.

We're already locking #downloads-indicator to its maximum width (so it doesn't change size when its label changes value). Let's lock #downloads-button to that width.

Also, the vertical alignment of the button is wrong. The progress bar is too tall, so it overlaps the bottom border of the toolbar button.
Assignee

Comment 1

7 years ago
Attachment #670206 - Flags: review?(mak77)
Assignee

Comment 2

7 years ago
Here's a before & after comparison. Sorry for the ugly cropping.
Attachment #670207 - Flags: ui-review?(shorlander)
Assignee

Comment 3

7 years ago
Comment on attachment 670206 [details] [diff] [review]
patch for OS X

I'll check later tonight to see if Windows & Linux also need this fix.
Attachment #670206 - Attachment description: patch → patch for OS X

Comment 4

7 years ago
The button doesn't seem to expand when clicked on Windows 7

Comment 5

7 years ago
Comment on attachment 670206 [details] [diff] [review]
patch for OS X

> #downloads-indicator-progress {
>   width: 16px;
>-  height: 6px;
>+  height: 4px;

We used to have a 4px high progress bar, but this was perceived as being barely visible by some people. Now, the improved contrast might help, but maybe we should try to work on other characteristics of the button to find the required vertical space?
Comment on attachment 670207 [details]
screenshot - before & after

Looks good to me. The progress design does need to be rethought but this is an improvement right now.

Thanks!
Attachment #670207 - Flags: ui-review?(shorlander) → ui-review+
Comment on attachment 670206 [details] [diff] [review]
patch for OS X

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

yes the progress bar is barely visible, but since stephen said we should redesign it I'm not going to nitpick now.
Attachment #670206 - Flags: review?(mak77) → review+
Assignee

Comment 8

7 years ago
https://hg.mozilla.org/integration/mozilla-inbound/rev/6a994799088b

(In reply to david.smitmanis from comment #4)
> The button doesn't seem to expand when clicked on Windows 7

That's good! :)

(In reply to Paolo Amadini [:paolo] from comment #5)
> We used to have a 4px high progress bar, but this was perceived as being
> barely visible by some people. Now, the improved contrast might help, but
> maybe we should try to work on other characteristics of the button to find
> the required vertical space?

Duly noted. I defer to Stephen for now.

What about turning the entire toolbar button background into a progress bar? I suppose that would only work for OS X, because we don't have toolbar button borders (in their default state) on Windows anymore.
Target Milestone: --- → Firefox 19
https://hg.mozilla.org/mozilla-central/rev/6a994799088b
Status: ASSIGNED → RESOLVED
Closed: 7 years ago
Resolution: --- → FIXED
(In reply to Frank Yan (:fryn) from comment #8)
> What about turning the entire toolbar button background into a progress bar?
> I suppose that would only work for OS X, because we don't have toolbar
> button borders (in their default state) on Windows anymore.

That was exactly the problem, no borders in Australis means no way to use the background. Maybe we should just drop colors from the progress and have sort of black/white one, would be a visibility win due to high contrast.

Comment 11

7 years ago
Why don't use this mockup : http://people.mozilla.com/~shorlander/files/download-button/download-button.html It looks pretty good to me.
 
Another solution would be to implement first mockups with a circular progress button, but it would look out of place in Australis.
Assignee

Comment 12

7 years ago
Posted patch followup (obsolete) — Splinter Review
I just realized that my patch didn't totally work, because we don't always apply downloads.css, so I moved the line to browser.css.
Also added a comment to emphasize that this line of code is temporary.
Attachment #671746 - Flags: review?(mak77)
Assignee

Comment 13

7 years ago
Comment on attachment 671746 [details] [diff] [review]
followup

Never mind. I don't think this is worth inserting. We should just get that redesign in.
Attachment #671746 - Attachment is obsolete: true
Attachment #671746 - Flags: review?(mak77)
Assignee

Comment 14

7 years ago
Given that we're redesigning this, I don't think it's worth attempting to fix the button width problem for now. I backed out #downloads-button line from downloads.css.

https://hg.mozilla.org/integration/mozilla-inbound/rev/23794d765b02

Renaming the bug to reflect that. Kinda messy in terms of bug history, but less messy than attempting to add some temporary hacks while waiting for a redesign.
Summary: Do not appear to expand downloads toolbar button when clicking it → Keep downloads button contents from overlapping its border
You need to log in before you can comment on or make changes to this bug.