Ed,
Here's what I have, for what it's worth. It seems like you're past most of this already and just nailing down your last few edge cases.
My approach for apptabs came down to a few basics:
1 - Switch to using -moz-border-image instead of border. You still need a border-width, but the colors come from -moz-border-image.
2 - Don't use a margin on browsertabs at all. Mozilla code is doing math based on browsertab width, and it leaves margin out of that calc, which breaks things if you're actually using margin.
3 - If you want the visual appearance of a margin, add some transparent pixels in the -moz-border-image PNG and increase the border-width accordingly.
4 - Don't use vertical padding on browsertabs. Horizontal padding is OK. Vertical padding will fail when you have pinned tabs and also enough tabs to trigger tabstrip scrolling.
5 - Do set min-height on apptabs. I think this should always equal the height of the favicon ie 16px. More about this below.
6 - I'm also setting min-height on unpinned browsertabs, but this is the full height of the -moz-border-image rather than just the favicon height. I can't remember if or why I needed this.
7 - Also switch to -moz-border-image on the tab scroll arrows. Mozilla code is also doing math based on tab scrollarrow width, and it also leaves margin out of that calc, which breaks things if you're actually using margin on those, so also switch to -moz-border-image on the scroll arrows, again with transparent pixels to synthesize margins.
8 - Make sure the width of both scroll arrows is the same because Mozilla code is checking the width of the right scroll arrow to position things relative to the left arrow. It probably would have been better for us if that code measured the left arrow instead, but this doesn't make any difference in the default theme because they're both the same size. I'd been using different sizes to help with layout of the new tab and alltabs buttons. Had to quit that.
This is working with both Fx3.6 and Fx4. A couple caveats:
1 - If you're using a solid center image for the border image, there's a Mac bug where it doesn't always stretch all the way across, but that can be gotten around by using 'repeat stretch' on -moz-border-image, which actually works on all platforms. (This is what DMCrimson worked out.)
2 - You need to test both when you have enough tabs to trigger tabstrip scrolling, and when you don't, because Firefox code handles those separately. All the fancy apptab JS stuff is done when you have enough tabs to scroll.
3 - There are bugs with drop indicator positioning with apptabs; it's not your fault.
Everything else I saw while looking at this:
Code: Select all
observed:
- see tabbrowser.xml method _positionPinnedTabs(), this is where the action is
- handles pinned-tab positioning differently for the case of having an overflowing #tabbrowser-tabs vs. non-overflowing
- as of Bug 601228, sets attr [positionpinnedtabs] on #tabbrowser-tabs iff overflowing, triggering different layout
- content/browser.css sets display:block (as opposed to the previously-used display:-moz-box) on .tabbrowser-tab[pinned] in the [positionpinnedtabs] case
- no need to fix up display on child elements under .tabbrowser-tab[pinned] because display does not inherit
- JS sets large -moz-margin-start on #tabbrowser-tabs to make room for app tabs to the left of it
- JS sets large negative margins on app tabs (i.e., .tabbrowser-tab[pinned]) to position each to the left of the start of regular tabs in #tabbrowser-tabs
- JS uses width of right-most (down) browsertab scroll button in calculation of tab positions
- does not include margin in that calculation
- also assumes that left and right scroll buttons both have same width
- regarding height:
- in the overflowed-tabstrip case, height of app tabs does correctly handle an increase in font size
- in the overflowed-tabstrip case, height of app tabs does not handle other things in tabstrip which increase tab height, other than font size
- ie set min-height:40px!important on some non-app-tab or on #tabbrowser-tabs .. apptabs don't get any taller and look wrong
- although this is handled fine in the non-overflowing-tabstrip case
- from the border image, app tab has border-top 6px and border-bottom 4px and no padding
- favicon height should be 16px, with border-image adding 10px for resulting 26px visual height
- because favicon height not calculated correctly, instead setting min-height:16px on app tabs
conclusions:
- it's ok to solve horizontal settings separately from vertical .. they're separate issues
- wrt width
- you can set margins, but don't expect them to apply because they'll be overridden
- (by JS as el.style, which has specificity 1000, which will win)
- instead, use -moz-border-image with transparent pixels in it to get same effect as margin without actually using margin
- don't use !important when setting margins, else overrides the value set by JS and breaks layout
- be careful: easy to do this with stylish
- wrt apptab height
- for some reason, the favicon is not sufficient to support the height of the apptab
-- label and closebutton suppressed
- per dao in bug 601228 #c25: this may be an issue in layout (i.e. in core layout algorithms, not in UI code or CSS)
- however, an increase in font size is enough to increase the height of child elements (the label) within the apptab, and app tab height correctly increases in response
- so in other words, it works like you expect if you assume layout sees the favicon and tab close button having zero height
- so for NNL, apptab min-height should be set to desired resulting visual height - the height of any border image
- for apptabs with tabs on bottom, this is 28px-12px = 16px
- for apptabs with tabs on top, this is 27px-11px = 16px
- min-height on normal tabs should be the full border image height, ie 27px on top and 28px on bottom
- note that there's no design constraint giving tabsontop and tabsonbottom the same height .. they can be the same or not, as long as you adjust code separately for those two cases
