830182 - cancel button should be aligned with progress bar in Downloads panel

Status: NEW

(Firefox :: Downloads Panel, defect)

Description

[Cameron McCormack (:heycam)]

Attachment: screen shot

The cancel button (that looks like an "x") seems misaligned when the progress bar is shown next to it.  They should be vertically aligned IMO.

Comment 1

[Marco Bonardo [:mak]]

I noticed this on Saturday, it's the progressbar that is likely not in center. Should also be verified across all themes.
We won't block the feature on this but it's a good polish bug.

Comment 2

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

Attachment: Patch v1

So each download item is a horizontally oriented -moz-box, with the download item icon, a vbox (containing the description, progress bar, and details), and the button stack.

Each item in the -moz-box is correctly centered vertically - but the problem is (as Marco suspected) that the progress bar is not in the center of the vbox. The margin for the download description is pushing it out of the way.

However, instead of removing that margin (which crunches up all of the contents in an ugly way), or adding another margin to the bottom of the details node (which brings the entire vbox up a number of pixels, which looks odd), I propose simply adding a number of pixels to the margin-top of the downloadButton class.

This patch does this. I'll have some screenshots up in a second.

Comment 3

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

Attachment: Patch v1 on Windows 7

Comment 4

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

Attachment: Patch v1 on Windows XP

Comment 5

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

Attachment: Patch v1 on Ubuntu

Comment 6

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

Attachment: Patch v1.1

Noticed that pinstripe needed a 1px increase on that margin-top when getting the screenshot. No changes to winstripe or gnomestripe.

Comment 7

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

Attachment: Patch v1 on OSX

Comment 8

[Marco Bonardo [:mak]]

(In reply to Mike Conley (:mconley) from comment #2)
> Each item in the -moz-box is correctly centered vertically - but the problem
> is (as Marco suspected) that the progress bar is not in the center of the
> vbox. The margin for the download description is pushing it out of the way.

I'm not sure, but to me the bottom margin on the description looks quite bad (https://bug830182.bugzilla.mozilla.org/attachment.cgi?id=712481), it's like the description is floating and there's no vertical rithm, especially on Mac and Windows.
I'm not saying we should remove all of it, but maybe finding a compromise between that margin and the button top margin would be better.
I think you should ask Stephen first, the review is trivial but the ui-r is not

Comment 9

[Marco Bonardo [:mak]]

and maybe there is some more balancing to do, when the progress bar is not shown things "look" aligned

Comment 10

[Marco Bonardo [:mak]]

Stephen, could you please verify the vertical rhythm in these screenshots and provide your thoughts?

Comment 11

[Marco Bonardo [:mak]]

Comment on attachment 712480 [details] [diff] [review]
Patch v1.1

clearing until we get definition of how it should appear.

Comment 12

[Stephen Horlander [:shorlander]]

Attachment: Panel Alignment Spec

Comment 13

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

Attachment: WIP Patch v2.0

WIP patch that updates OSX theme

Comment 14

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

Attachment: WIP Patch v2.1

Further progress...

Comment 15

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

Attachment: WIP Patch v2.2

Changes for Windows

Comment 16

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

Attachment: Patch v2.3 (for mozilla-central)

Ok, and Linux is done.

This patch will only apply to mozilla-central. I'll have to backport for mozilla-aurora and mozilla-beta (if we want to take this patch there) due to the theme name changes.

I'll have some screenshots up in the next few hours.

Comment 17

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

Attachment: Patch v2 on OSX

Comment 18

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

Attachment: Patch v2 on Ubuntu

Comment 19

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

Attachment: Patch v2 on OSX

Showing more state variety in this screenshot.

Comment 20

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

Attachment: Patch v2 on Windows 7

Comment 21

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

Attachment: Patch v2 on Windows XP

Comment 22

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

Comment on attachment 719537 [details] [diff] [review]
Patch v2.3 (for mozilla-central)

I've been staring at these panels for too long, and I think I need a second set of eyes. Check out the screenshots - am I acceptably close? (The alignment spec only took into account OSX, but I did my best to adapt the values for the other platforms).

Comment 23

[Stephen Horlander [:shorlander]]

Attachment: Panel Alignment Spec - i02

I messed up the previous version. Fixed version.

Comment 24

[Stephen Horlander [:shorlander]]

Comment on attachment 719537 [details] [diff] [review]
Patch v2.3 (for mozilla-central)

Cancelling review for now.

Comment 25

[Siddartha L K [:siddu]]

As my first bug to start up with would u please assign me this bug.