856814 - [toolbox] Labels aren't centered in toolbox tabs

Status: RESOLVED FIXED

(DevTools :: Framework, defect)

Description

[Heather Arthur [:harth]]

Attachment: screenshot of justification

The label and icon of a tool aren't centered in each toolbox tab. They're left-justified (at least on my LTR OS X build).

It doesn't look as nice, I think they should be centered.

Comment 2

[Heather Arthur [:harth]]

This is a regression from bug 818151. Any guesses Mike?

Comment 3

[Mike Ratcliffe [:miker] [:mratcliffe] [:mikeratcliffe]]

Yes, there was some debate whilst I was implementing side docking and we settled on left aligning them. To be honest I don't care either way.

It would be a simple change if you wanted to center them.

Comment 4

[Victor Porof [:vporof][:vp]]

I vote for them being centered :)

Comment 5

[Girish Sharma [:Optimizer]]

(In reply to Victor Porof [:vp] from comment #4)
> I vote for them being centered :)

Along with the icon, right ?

Comment 6

[Heather Arthur [:harth]]

(In reply to Girish Sharma [:Optimizer] from comment #5)
> (In reply to Victor Porof [:vp] from comment #4)
> > I vote for them being centered :)
> 
> Along with the icon, right ?

Yeah, like it was before.

Comment 7

[Heather Arthur [:harth]]

Attachment: Spacer to center icon and label in toolbox tab

This was the only way I could figure out how to do it. It adds a <spacer flex="1"> in front of the icon and label. I would just remove the flex="1" on the label, but then the cropping wouldn't work when docking to the side.

I haven't seen what it looks like on Win and Linux yet.

Comment 8

[Girish Sharma [:Optimizer]]

Attachment: Screenshot of the patch on Windows

Looks Good, but a little 2 or 3 px to the right.

Comment 9

[Heather Arthur [:harth]]

Attachment: spacer + reduced icon margin

Thanks Girish for trying it out. The extra space appears on OS X too. I reduced the margin-start of the icon to mitigate it. I'm waiting for a Windows build, but don't have Linux right now.

Comment 10

[Mike Ratcliffe [:miker] [:mratcliffe] [:mikeratcliffe]]

Ah, this all makes sense now.

When I made the labels flex in order to have ellipses on overflow it meant that the label always filled the remaining space in the tab, which makes the tabs look like they are not centered.

Using spacers here makes sense as long as it doesn't break overflow behavior. This also means that you should remove -moz-box-align: center from .devtools-tab (toolbox.css:164).

Comment 11

[Heather Arthur [:harth]]

Attachment: Add spacer to center icon and label

Okay, took out the -moz-box-align, it indeed wasn't doing anything. The spacer makes both the expanded and sidebar cases work.

Try builds: http://ftp.mozilla.org/pub/mozilla.org/firefox/try-builds/[e-mail]-efd28b2eff90/

But if it's a few px off, we can always change later.

Comment 13

[Victor Porof [:vporof][:vp]]

Attachment: gear icon

This breaks the gear icon for the options tab :(

Comment 14

[Girish Sharma [:Optimizer]]

To avoid this either :

1) Do not add a spacer when no label is there.
2) Add flex="1" to the icon when no label is there.

Comment 15

[Heather Arthur [:harth]]

Attachment: Patch, with settings gear fixed

Fixed, with margin.

Comment 16

[Heather Arthur [:harth]]

https://hg.mozilla.org/integration/fx-team/rev/740fbcaa9880

Comment 17

[Joe Walker [:jwalker]]

https://hg.mozilla.org/mozilla-central/rev/740fbcaa9880