A pretty puzzle

[ehume]

OK, so I'm putting things in order for fx 4 when this shows up with Scribblies Kids:



Lest you think I can't code my way out of a paper bag, here's Aeon:



The code in scrollbox.css and browser.css is more or less the same.

Anyone seen anything like this?

Or more importantly, anyone know what I might be doing wrong?

Thanks.

[mcdavis]

I don't know exactly, but a couple bugs have been filed about overlapping app tabs. Here's one:

https://bugzilla.mozilla.org/show_bug.cgi?id=579869

Maybe some good clues in there.

[patrickjdempsey]

Make sure you aren't using any negative margins anywhere in your tabs for formatting purposes. I've looked around and unfortunately I can't get DOMi to display DOM information on just app-tabs. The default theme doesn't appear to really have anything app-tab specific other than wider margins for tabs that are not app-tabs.

[CatThief]

It has something to do with this property inside inside browser/content/browser.css:

Code: Select all

.tabbrowser-tab[pinned] {
  position: fixed;
}

While "fixed" keeps pinned tabs in place, it causes them to behave rather strangely. In my case they move down by 1px if normal tabs are all closed, they change height according to font size (where unpinned tabs obey the theme's rules), and all margin rules are ignored causing them to squeeze up against each other with no spacing in between.

I tested "relative", "static", or "inherit" for the position with mixed results. I believe it was "relative" that removed the 1px downward movement and forced them to obey other .tabbrowser-tab rules including margins inside the theme, but it also caused them to be positioned away from the left edge of the toolbar leaving a large blank space. "static" and "inherit" caused them to either overlap or disappear all together.

Using a combination of height and/or min-height/max-height rules for .tabbrowser-tab and #TabsToolbar ensures that pinned and normal tabs match regardless of font size, and pinned tabs stay put if normal tabs are all closed, but unfortunately it doesn't address the left and right margin issues. I know it's a hack, but here's what I did until some property other than "position: fixed" can be used.

Code: Select all

/* begin pinned tabs hacks */
.tabbrowser-tab[pinned] {
  max-width: 24px !important;
  min-width: 24px !important;
  width: 24px !important;
  max-height: 22px !important;
  min-height: 22px !important;
  height: 22px !important;
}
.tabbrowser-tab:not([pinned]) {
  max-height: 22px !important;
  min-height: 22px !important;
  height: 22px !important;
}
#navigator-toolbox[tabsontop="true"] #TabsToolbar {
  min-height: 28px !important;
}
#navigator-toolbox:not([tabsontop="true"]) #TabsToolbar {
  min-height: 27px !important;  /* this is less by 1px because there is no bottom border when on top */
}
/* end pinned tabs hacks */

Perhaps you can extract something from this that will help in some way.

[patrickjdempsey]

Interesting... I wonder if anyone is experiencing related issues with the default theme.

[CatThief]

Interesting... I wonder if anyone is experiencing related issues with the default theme.

I can confirm the bit about the pinned tabs moving down by 1px if normal tabs are all closed, yet the spacing between them is unaffected.

[patrickjdempsey]

I've made a few discoveries on this front for you to look at CatThief:

viewtopic.php?f=18&t=1949789&start=0

It would appear that Firefox is calculating the beginning margin of the tabs and using a unique negative margin for each one to position it at the beginning of the strip. If you have *any* beginning margins either for App tabs or .tabbrowser-tab[first-tab="true"] it will cause them to be scrambled up. Secondly, you can set the width of the App tabs using the left and right margins of the .tab-icon-image.

Hope that's helpful.

[CatThief]

Thanks for the info, Patrick. Actually I do apply a margin to tabs. Since I don't extensively style the tabbrowser tabs, they pick up most of their default properties from tabbox.css:

Code: Select all

tab {
  margin: 1px;
}

tab[first-tab="true"]:not(.tabbrowser-tab) {
  margin-left: 0px;
}

Then inside browser.css I have this, although it most likely is not needed:

Code: Select all

.tabbrowser-tab {
  margin: 1px;
}

Even though I don't specifically use .tabbrowser-tab[first-tab="true"] there would indeed be a 1px margin that is applied. Naturally that gets lost in pinned tabs. The 1px margin remains to the left of the first tabbrowser-tab, but the pinned tabs have no margin between them whatsoever. I can live with how I tweaked the vertical movement by applying rules for height, but this left/right margin issue looks just plain sloppy.

I'll play around with it some more, but geeezzze the devs sure are making things difficult with something that should be so simple.

[patrickjdempsey]

I think the only way to have a margin between the App Tabs is to have transparent borders, which usually end up being fugly, and you have to have less margin at the top and more radius to make it work.

[CatThief]

I'm not using a radius, but I may attempt the transparent border idea just to see if it works. Currently I have a 1px colored border all the way around. Maybe I can apply a 2px border to left and right and make one of those px transparent. If it looks fugly and messes up the top and bottom borders I'll just forget about it.

[patrickjdempsey]

It might be difficult to convince your background color or image to play nice with transparent borders, I know I've had that problem before. Another possibility is to make the tab border invisible and create a border around the .tab-icon-image artificially simulating a tab... that would certainly allow you to create a margin between tabs but might require some weird changes.

[patrickjdempsey]

OK, this is some pretty bizarre stuff. I got my idea about using the .tab-icon-image to work. Basically I'm killing off all of the data contained in .tabbrowser-tab[pinned], and transferring that to the .tab-icon-image. So now all borders, margins, padding, and border radii in .tabbrowser-tab[pinned] are set to 0 so you have an empty box to work in. Sizing the App tabs is weird because the size of .tab-icon-image is set at 16x16, so you need to work from there to determine your sizes:

min-width = left-border-width + left-padding-width + 16px + right-padding-width + right-border-width.
min-height = top-border-width + top-padding-height + 16px + bottom-padding-height + bottom-border-width.

So if I have a tab border of 1px and I want an App tab that is 32px wide and 22px tall with 4px margin between them I use:

Code: Select all

.tabbrowser-tab[pinned="true"] .tab-icon-image {
min-width: 32;
border-left: 1px solid threedshadow;
padding-left: 7px;  
padding-right: 7px;
border-right: 1px solid threedshadow;

min-height: 22;
border-top: 1px solid threedshadow;
padding-top: 3px;  
padding-bottom: 2px;
border-bottom: 0px;

-moz-margin-start: 2px;
-moz-margin-end: 2px;

background-image: whatever;
background-color: whatever;
-moz-border-radius-topleft: 2px;
 -moz-border-radius-topright: 2px;
}

If I have an offset in my main tabs from the top down to the tab, I use the top margin, and if I want the tab to expand when selected I use the margin and the padding:

Code: Select all

.tabbrowser-tab[pinned="true"] .tab-icon-image {
  margin-top: 1px;
.... rest same as above
}

.tabbrowser-tab[pinned="true"][selected="true"] .tab-icon-image {
  margin-top: 0px;
 min-height: 24;
 padding-top: 4px;  
 padding-bottom: 3px;
-moz-border-radius-topleft: 4px;
-moz-border-radius-topright: 4px;
}

I might add this to my tutorial if you think it's a worth-while method.

[patrickjdempsey]

A sample of what that does in Stratini Padded:

[patrickjdempsey]

Conversely, we could make an appeal to the Gods and file a bug about app tabs ignoring -moz-margin-end.

[patrickjdempsey]

I filed a bug, but this late in the game I wonder if anyone will care?

https://bugzilla.mozilla.org/show_bug.cgi?id=589493