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.

Here's a before & after comparison. Sorry for the ugly cropping.

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.

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

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!

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.

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.

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

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.

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.

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.

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.