MozillaZine

A pretty puzzle

Discuss application theming and theme development.
ehume

User avatar
 
Posts: 6743
Joined: November 17th, 2002, 12:33 pm
Location: Princeton, NJ, USA

Post Posted August 7th, 2010, 9:00 pm

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

Image

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

Image

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.
Firefox: Sic transit gloria mundi.

mcdavis

User avatar
 
Posts: 3195
Joined: December 9th, 2005, 5:51 am

Post Posted August 8th, 2010, 11:01 am

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.
Theme Development is Radical Participation.
NNL Beta Builds for Current and Up-coming Firefox
Dear User: Your Help is Needed

patrickjdempsey

User avatar
 
Posts: 23734
Joined: October 23rd, 2008, 11:43 am
Location: Asheville NC

Post Posted August 8th, 2010, 2:45 pm

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.
Tip of the day: If it has "toolbar" in the name, it's crap.
What my avatar is about: https://addons.mozilla.org/en-US/seamonkey/addon/sea-fox/

CatThief

User avatar
 
Posts: 1854
Joined: January 19th, 2004, 12:19 am
Location: Northeast USA

Post Posted August 10th, 2010, 12:53 pm

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.
Still passionate for Mozilla themes and extensions, just not actively developing them for public release anymore.

patrickjdempsey

User avatar
 
Posts: 23734
Joined: October 23rd, 2008, 11:43 am
Location: Asheville NC

Post Posted August 10th, 2010, 3:00 pm

Interesting... I wonder if anyone is experiencing related issues with the default theme.
Tip of the day: If it has "toolbar" in the name, it's crap.
What my avatar is about: https://addons.mozilla.org/en-US/seamonkey/addon/sea-fox/

CatThief

User avatar
 
Posts: 1854
Joined: January 19th, 2004, 12:19 am
Location: Northeast USA

Post Posted August 10th, 2010, 5:29 pm

patrickjdempsey wrote: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.
Still passionate for Mozilla themes and extensions, just not actively developing them for public release anymore.

patrickjdempsey

User avatar
 
Posts: 23734
Joined: October 23rd, 2008, 11:43 am
Location: Asheville NC

Post Posted August 21st, 2010, 3:30 am

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.
Tip of the day: If it has "toolbar" in the name, it's crap.
What my avatar is about: https://addons.mozilla.org/en-US/seamonkey/addon/sea-fox/

CatThief

User avatar
 
Posts: 1854
Joined: January 19th, 2004, 12:19 am
Location: Northeast USA

Post Posted August 21st, 2010, 1:45 pm

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.
Still passionate for Mozilla themes and extensions, just not actively developing them for public release anymore.

patrickjdempsey

User avatar
 
Posts: 23734
Joined: October 23rd, 2008, 11:43 am
Location: Asheville NC

Post Posted August 21st, 2010, 1:50 pm

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.
Tip of the day: If it has "toolbar" in the name, it's crap.
What my avatar is about: https://addons.mozilla.org/en-US/seamonkey/addon/sea-fox/

CatThief

User avatar
 
Posts: 1854
Joined: January 19th, 2004, 12:19 am
Location: Northeast USA

Post Posted August 21st, 2010, 3:00 pm

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.
Still passionate for Mozilla themes and extensions, just not actively developing them for public release anymore.

patrickjdempsey

User avatar
 
Posts: 23734
Joined: October 23rd, 2008, 11:43 am
Location: Asheville NC

Post Posted August 21st, 2010, 4:24 pm

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.
Tip of the day: If it has "toolbar" in the name, it's crap.
What my avatar is about: https://addons.mozilla.org/en-US/seamonkey/addon/sea-fox/

patrickjdempsey

User avatar
 
Posts: 23734
Joined: October 23rd, 2008, 11:43 am
Location: Asheville NC

Post Posted August 21st, 2010, 5:24 pm

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.
Last edited by patrickjdempsey on August 21st, 2010, 5:35 pm, edited 1 time in total.
Tip of the day: If it has "toolbar" in the name, it's crap.
What my avatar is about: https://addons.mozilla.org/en-US/seamonkey/addon/sea-fox/

patrickjdempsey

User avatar
 
Posts: 23734
Joined: October 23rd, 2008, 11:43 am
Location: Asheville NC

Post Posted August 21st, 2010, 5:33 pm

A sample of what that does in Stratini Padded:

Image
Tip of the day: If it has "toolbar" in the name, it's crap.
What my avatar is about: https://addons.mozilla.org/en-US/seamonkey/addon/sea-fox/

patrickjdempsey

User avatar
 
Posts: 23734
Joined: October 23rd, 2008, 11:43 am
Location: Asheville NC

Post Posted August 21st, 2010, 5:55 pm

Conversely, we could make an appeal to the Gods and file a bug about app tabs ignoring -moz-margin-end.
Tip of the day: If it has "toolbar" in the name, it's crap.
What my avatar is about: https://addons.mozilla.org/en-US/seamonkey/addon/sea-fox/

patrickjdempsey

User avatar
 
Posts: 23734
Joined: October 23rd, 2008, 11:43 am
Location: Asheville NC

Post Posted August 21st, 2010, 6:08 pm

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
Tip of the day: If it has "toolbar" in the name, it's crap.
What my avatar is about: https://addons.mozilla.org/en-US/seamonkey/addon/sea-fox/

Return to Theme Development


Who is online

Users browsing this forum: No registered users and 1 guest