MozillaZine

Strange behaviour with tab style

Discuss application theming and theme development.
XTAL256
 
Posts: 189
Joined: December 8th, 2008, 4:30 pm
Location: Somewhere in Australia...

Post Posted July 14th, 2014, 5:11 am

Hi,

I'm having trouble getting the tabs to look right in my theme. I want it to look like this:
Image

I've almost got it, but I'm seeing something weird with the padding/positioning of the inside of the tab.
Image

The unselected tab has a 2px top border, but the DOM Inspector shows one px extra between border and inner xul:stack. I cannot see any rule which would cause that extra space.
ImageImage

Giving tab 1px bottom border pushes xul:stack up, but I don't know why I would need to do that.

Here is my CSS for the tab bar (part of browser.css):
http://pastebin.com/1656bNVr

I have a feeling that TabMixPlus is interfering somewhere, but I have looked at it's style sheets and cannot see it overriding margin or padding or height on any of the elements I care about.


Environment: PaleMoon 24, Windows 7
(Ok, I know you guys don't support PaleMoon, but my question is more about CSS, which should work the same on either browser)

mcdavis

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

Post Posted July 14th, 2014, 11:02 pm

XTAL256 wrote:I'm having trouble getting the tabs to look right in my theme.


Hi,

Maybe this suggestion I gave to Ken S would help:

viewtopic.php?p=13579247#p13579247

His problem was basically the same as yours, trying to figure out what is causing height to be what it is. My suggestion was to remove elements so you get to the point where you understand the influence of height from each element on its own, then combine that knowledge into a big picture of how they all work together. Usually for me, doing this will get me to the point where the light bulb goes on.
Theme Development is Radical Participation.
NNL Beta Builds for Current and Up-coming Firefox
Dear User: Your Help is Needed

XTAL256
 
Posts: 189
Joined: December 8th, 2008, 4:30 pm
Location: Somewhere in Australia...

Post Posted July 15th, 2014, 12:24 am

Thanks, I'll try that.

XTAL256
 
Posts: 189
Joined: December 8th, 2008, 4:30 pm
Location: Somewhere in Australia...

Post Posted July 15th, 2014, 4:08 am

Ok, I've hidden most, if not all, of the tab's inner:
Code: Select all
.tabbrowser-tab .tab-stack .tab-background {
  display: none !important;
}
.tabbrowser-tab .tab-stack .tab-progress-container .tab-progress .progress-bar {
  display: none !important;
}
.tabbrowser-tab .tab-stack .tab-progress-container .tab-progress .progress-remainder {
  display: none !important;
}
.tabbrowser-tab .tab-stack .tab-content .tab-close-button {
  display: none !important;
}
.tabbrowser-tab .tab-stack .tab-content .tab-close-button .toolbarbutton-icon {
  display: none !important;
}
.tabbrowser-tab .tab-stack .tab-content .tab-icon {
  display: none !important;
}
.tabbrowser-tab .tab-stack .tab-content .tab-text-stack .tab-text,
.tabbrowser-tab .tab-stack .tab-content .tab-text-stack .tab-label {
  display: none !important;
}
.tabbrowser-tab .tab-stack .tab-content .tab-text-stack .showhover-box {
  display: none !important;
}


But this is what I see:
.tabbrowser-tab - Image
.tab-stack - Image
The inner xul:stack has no height, yet the outer tab still has the same height.

And I know it cannot be the height of the tab bar that's controlling each tab's height, because when I increase it's height the tabs stay the same height:
Image

Any ideas?

mcdavis

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

Post Posted July 15th, 2014, 10:43 pm

XTAL256 wrote:Any ideas?


If you look at the rules applying to the tab itself, the part that's still visible after you hid all its interior elements, do you see any setting height or min-height? I looked at your pastebin, so I assume that's a no.

What about that -1px bottom margin:

.tabbrowser-tabs {
margin-bottom: -1px;
}

What happens if you take that off, set the bottom margin to 0px? What effect does that have? Maybe if you're going to use that negative margin, you need to increase either top or bottom padding by 1px to make the tab 1px taller?

How about -moz-box-align? Is that being used?

Is it the same with Tab Mix Plus completely disabled?

That's probably a silly question, I'm sure you've already looked for that.
Theme Development is Radical Participation.
NNL Beta Builds for Current and Up-coming Firefox
Dear User: Your Help is Needed

XTAL256
 
Posts: 189
Joined: December 8th, 2008, 4:30 pm
Location: Somewhere in Australia...

Post Posted July 16th, 2014, 12:34 am

Thanks for the tips.

Actually, i haven't yet tried disabling TMP, I only looked at it's CSS rules.

I will also play around with the -1 margin. It's used to make the active tab move down to cover the upper part of the bottom border. But i have no idea how that actually works.

XTAL256
 
Posts: 189
Joined: December 8th, 2008, 4:30 pm
Location: Somewhere in Australia...

Post Posted July 16th, 2014, 3:43 am

I disabled TMP, but it did not affect the style. It did change the DOM, apparently TMP adds a .tab-text-stack element.

I did not see -moz-box-align anywhere, so that shouldn't affect it.

Changing the bottom margin of .tabbrowser-tabs does not increase the height of each tab. If i make the margin positive, and large enough, it will cut off the bottom of the tabs. But it does not seem to compress it (i.e. change it's height), it just clips it.

XTAL256
 
Posts: 189
Joined: December 8th, 2008, 4:30 pm
Location: Somewhere in Australia...

Post Posted July 20th, 2014, 8:06 pm

I eventually got the tabs looking how I want them, but I still can't figure out what controls the height of each tab. Ideally, I would like the whole tab bar to be one or two pixels taller, but I can't do that without screwing everything up again.

mcdavis

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

Post Posted July 20th, 2014, 9:38 pm

XTAL256 wrote:I eventually got the tabs looking how I want them, but I still can't figure out what controls the height of each tab. Ideally, I would like the whole tab bar to be one or two pixels taller, but I can't do that without screwing everything up again.


That's good news. (I was out of ideas, I guess you could tell. :) )
Theme Development is Radical Participation.
NNL Beta Builds for Current and Up-coming Firefox
Dear User: Your Help is Needed

XTAL256
 
Posts: 189
Joined: December 8th, 2008, 4:30 pm
Location: Somewhere in Australia...

Post Posted July 21st, 2014, 4:38 pm

There is one thing I haven't tried is setting the min and max height of the tabs. I'm not sure if it's possible, but some JavaScript might be setting the height, so I would not see any CSS rules for it.

XTAL256
 
Posts: 189
Joined: December 8th, 2008, 4:30 pm
Location: Somewhere in Australia...

Post Posted July 23rd, 2014, 4:01 pm

Nope, that didn't work either.

I set the following styles (using Stylish):
Code: Select all
#TabsToolbar {
    height: 35px !important;
}
.tabbrowser-tab {
    min-height: 30px !important;
    max-height: 30px !important;
    height: 30px !important;
}


The immediate parent of the tabs (xul:box) is 33px high, but DOM Inspector still says that .tabbrowser-tab box height is 22px.

What the hell else could control the height like that? Some XUL voodoo? JavaScript?

mcdavis

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

Post Posted July 24th, 2014, 12:38 am

I can't really add any more without getting hands-on which is hard since you're not on Firefox.

The one thing I would try next that might work is to use my domtreeproperties add-on (the one I pointed out to Ken S earlier) and get a full report of all available layout-related CSS properties and their used values for all the Tabs Toolbar-related elements.

I don't know if Pale Moon allows installing add-ons written for Firefox. If you want, I could add the Pale Moon application ID to domtreeproperties to make it installable there. You'd need to tell me what Pale Moon's app ID is; Firefox's is {ec8030f7-c20a-464f-9b0e-13a3a9e97384}.
Theme Development is Radical Participation.
NNL Beta Builds for Current and Up-coming Firefox
Dear User: Your Help is Needed

XTAL256
 
Posts: 189
Joined: December 8th, 2008, 4:30 pm
Location: Somewhere in Australia...

Post Posted July 24th, 2014, 5:52 pm

mcdavis wrote:I can't really add any more without getting hands-on which is hard since you're not on Firefox.

Ok, well I just tried the same thing on Firefox 31, and I get the same problem. Increasing the height of #TabsToolbar does not increase the height of each tab.

Code: Select all
#TabsToolbar {
  height: 35px !important;
}
#TabsToolbar .box-inherit {
  min-height: 30px !important;
  max-height: 30px !important;
  height: 30px !important;
  border: 1px solid red !important;
}
.tabbrowser-tab {
  min-height: 30px !important;
  max-height: 30px !important;
  height: 30px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid blue !important;
}
.tabbrowser-tab * {
  display: none !important;
}

Image

mcdavis

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

Post Posted July 25th, 2014, 1:11 am

I'd be happy to take a look on Firefox if there's a link to your theme available. You could send it to me privately if that's what you need.
Theme Development is Radical Participation.
NNL Beta Builds for Current and Up-coming Firefox
Dear User: Your Help is Needed

XTAL256
 
Posts: 189
Joined: December 8th, 2008, 4:30 pm
Location: Somewhere in Australia...

Post Posted July 26th, 2014, 4:12 am

You can download the xpi here.

Return to Theme Development


Who is online

Users browsing this forum: No registered users and 1 guest