Closed Bug 856814 Opened 7 years ago Closed 7 years ago

[toolbox] Labels aren't centered in toolbox tabs


(DevTools :: Framework, defect)

Not set


(Not tracked)

Firefox 23


(Reporter: harth, Assigned: harth)




(6 files, 1 obsolete file)

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.
Duplicate of this bug: 856812
Assignee: nobody → fayearthur
This is a regression from bug 818151. Any guesses Mike?
Assignee: fayearthur → nobody
Depends on: 818151
Flags: needinfo?(mratcliffe)
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.
Flags: needinfo?(mratcliffe)
I vote for them being centered :)
(In reply to Victor Porof [:vp] from comment #4)
> I vote for them being centered :)

Along with the icon, right ?
(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.
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.
Looks Good, but a little 2 or 3 px to the right.
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.
Attachment #747027 - Attachment is obsolete: true
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).
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:

But if it's a few px off, we can always change later.
Assignee: nobody → fayearthur
Attachment #747670 - Flags: review?(mratcliffe)
Attachment #747670 - Flags: review?(mratcliffe) → review+
Attached image gear icon
This breaks the gear icon for the options tab :(
Depends on: 866138
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.
Fixed, with margin.
Closed: 7 years ago
Resolution: --- → FIXED
Whiteboard: [fixed-in-fx-team]
Target Milestone: --- → Firefox 23
Depends on: 872479
Product: Firefox → DevTools
You need to log in before you can comment on or make changes to this bug.