help for my thin advanced tab bar style

Discuss application theming and theme development.
Post Reply
fred_gaou
Posts: 25
Joined: April 27th, 2008, 3:55 pm
Location: France

help for my thin advanced tab bar style

Post by fred_gaou »

HI,

I use stylish to customize the xul and I'm fronting a problem. I'm trying to customize the tabs. This style will be compatible with "Classic Theme Restorer" & its app button, "TabMixPlus", "UnloadTab". So each tab has its own style according to its state: "loaded, unloaded, active, unactive, visisted, unread".

Here is the default xul renderer for my tab bar (Australis from FX 29.0.1):
Image

Here is my style applied:
Image

Here is what happen when I press ALT key to show menu (it's fine):
Image

Here is what happen when I press the key again to hide the menu:
Image

The tab bar is not restored to its original position. I have the same problem but less obvious when I un-maximize, re-maximize the window. Position not really restored. I don't understand why since the default style has no issue.

In my CSS code, the bug occur between line 38 and 45. If you delete the height and margin properties, no bug but no style either. I try to use the navbar margin instead but the result was not fine when the window was in normal state.

I try the addon "Hide Caption Titlebar Plus". It solve this issue but it is not compatible with the app button from "Classic Theme Restorer" and it's got a serious bug that make every flash animation/video, etc very slow on pages.

Here is my style: here

Help appreciated to make this style fully compatible with the menu autohide and window state.
User avatar
patrickjdempsey
Posts: 23686
Joined: October 23rd, 2008, 11:43 am
Location: Asheville NC
Contact:

Re: help for my thin advanced tab bar style

Post by patrickjdempsey »

Who knows? The Firefox default theme does more than a few crazy things by itself and then you've got all of those tab-modifying extensions... phew. That looks like an enormous headache. Especially TabMixPlus does many weird things expecting certain heights of the tab strip. What happens with all of your tab-modifying extensions disabled?
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/
User avatar
mcdavis
Posts: 3195
Joined: December 9th, 2005, 5:51 am

Re: help for my thin advanced tab bar style

Post by mcdavis »

This looks the same as an issue I've run into.

http://mcdavis.dreamhosters.com/imgshar ... 140608.png

There's code in browser.js which adjusts the height of the synthetic titlebar DOM by setting margins on it, when the native system titlebar is hidden. That code's behavior depends on the relative heights of the Tabs Toolbar, the Menu Bar and the titlebar. It works great with the default theme with its taller tabs but has issues when people use smaller tabs heights, like me and you. If the Tabs Toolbar height is too small, margin-bottom isn't cleared from #titlebar-content after hiding the menubar.

Code: Select all

      if (tabAndMenuHeight > titlebarContentHeight) {
        // We need to increase the titlebar content's outer height (ie including margins)
        // to match the tab and menu height:
        let extraMargin = tabAndMenuHeight - titlebarContentHeight;
        // We need to reduce the height by the amount of navbar overlap
        // (this value is 0 or negative):
        extraMargin += navbarMarginTop;
        // On non-OSX, we can just use bottom margin:
//@line 4606 "c:\builds\moz2_slave\rel-m-rel-w32_bld-000000000000\build\browser\base\content\browser.js"
        titlebarContent.style.marginBottom = extraMargin + "px";
//@line 4608 "c:\builds\moz2_slave\rel-m-rel-w32_bld-000000000000\build\browser\base\content\browser.js"
        titlebarContentHeight += extraMargin;
      }
Theme Development is Radical Participation.
NNL Beta Builds for Current and Up-coming Firefox
Dear User: Your Help is Needed
fred_gaou
Posts: 25
Joined: April 27th, 2008, 3:55 pm
Location: France

Re: help for my thin advanced tab bar style

Post by fred_gaou »

patrickjdempsey wrote:What happens with all of your tab-modifying extensions disabled?


Same thing. Though, the style is compliant with other tab addons, you have to turn off the features that change the tabs appearance in TMP and CTR.
fred_gaou
Posts: 25
Joined: April 27th, 2008, 3:55 pm
Location: France

Re: help for my thin advanced tab bar style

Post by fred_gaou »

mcdavis wrote:This looks the same as an issue I've run into.


So, I guess we should deal with it unless we want to create an addon with some js code. Nope for me.
User avatar
patrickjdempsey
Posts: 23686
Joined: October 23rd, 2008, 11:43 am
Location: Asheville NC
Contact:

Re: help for my thin advanced tab bar style

Post by patrickjdempsey »

Yeah this is all silliness that Firefox does to support the ultra-silly default theme. Awhile back I created a "userStyle" theme for Australis that sets all of the toolbars back to "OS defaults" and ran into all kinds of problems with the titlebar. The following set of rules pulls the tabs out of the titlebar and removes the crazy things with the JS calculations:


Code: Select all

/* PJD - AUSTRALIS TABS AND TITLEBAR FIX */
#titlebar-content {
   margin-bottom: 40px!important;
}
#titlebar {
   margin-bottom: -40px!important;
}
#TabsToolbar {
   margin:unset!important;
}
#TabsToolbar .titlebar-placeholder {
   display:none!important;
}
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/
fred_gaou
Posts: 25
Joined: April 27th, 2008, 3:55 pm
Location: France

Re: help for my thin advanced tab bar style

Post by fred_gaou »

Oh man, you made my day! This code solve the issue. I updated my style. Thanks a lot.
User avatar
Aris
Posts: 3248
Joined: February 27th, 2011, 10:14 am

Re: help for my thin advanced tab bar style

Post by Aris »

For me the ghost menubar "glitch" also goes away once the main code looses the outcommented line (margin-top:-2px !important;):

Code: Select all

.....
/*  apparence de la barre d'onglets  */
#tabbrowser-tabs {
   padding-top:0 !important;
   border:none !important;
   background:none !important;
   min-height: 24px;
   height: 24px;
   /*margin-top:-2px !important;*/
}
.....


I would recommend to use #toolbar-menubar and its autohide/inactive states for changing titlebars and tab toolbars top/bottom margins/paddings over modifying #titlebar, #TabsToolbar or #tabbrowser-tabs. You will get much cleaner results. (Look into browser.css to see how autohide and inactive states work, if needed).

There are plenty different states and sometimes it is required to use different values for normal and maximized mode.

Code: Select all

   #main-window[tabsintitlebar]:not([inFullscreen])[sizemode="normal"] #navigator-toolbox #toolbar-menubar[inactive="true"]:not([autohide="true"]),
   #main-window[tabsintitlebar]:not([inFullscreen])[sizemode="normal"] #navigator-toolbox #toolbar-menubar[inactive="true"][autohide="false"],
   #main-window[tabsintitlebar]:not([inFullscreen])[sizemode="normal"] #navigator-toolbox #toolbar-menubar[autohide="true"]:not([inactive="true"]),
   #main-window[tabsintitlebar]:not([inFullscreen])[sizemode="normal"] #navigator-toolbox #toolbar-menubar:not([autohide="true"]),
   #main-window[tabsintitlebar]:not([inFullscreen])[sizemode="maximized"] #navigator-toolbox #toolbar-menubar[inactive="true"][autohide="false"],
   #main-window[tabsintitlebar]:not([inFullscreen])[sizemode="maximized"] #navigator-toolbox #toolbar-menubar[autohide="true"]:not([inactive="true"]),
   #main-window[tabsintitlebar]:not([inFullscreen])[sizemode="maximized"] #navigator-toolbox #toolbar-menubar:not([autohide="true"])


Beware, there is no [inactive=false]. The "inactive" attribute gets completely removed, so accessing that stage is only possible with ":not([inactive="true"])".
User avatar
patrickjdempsey
Posts: 23686
Joined: October 23rd, 2008, 11:43 am
Location: Asheville NC
Contact:

Re: help for my thin advanced tab bar style

Post by patrickjdempsey »

You are welcome. And don't even ask me how it works because I've scrubbed my brain a few times with good strong bleach to try to unremember as much about Australis as I can.
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/
fred_gaou
Posts: 25
Joined: April 27th, 2008, 3:55 pm
Location: France

Re: help for my thin advanced tab bar style

Post by fred_gaou »

I tried the [autohide="true"] trick once but it got nowhere with my style.
fred_gaou
Posts: 25
Joined: April 27th, 2008, 3:55 pm
Location: France

Re: help for my thin advanced tab bar style

Post by fred_gaou »

patrickjdempsey wrote:You are welcome. And don't even ask me how it works because I've scrubbed my brain a few times with good strong bleach to try to unremember as much about Australis as I can.


Do you use firefox or seamonkey? Did seamonkey adopted australis too?
User avatar
patrickjdempsey
Posts: 23686
Joined: October 23rd, 2008, 11:43 am
Location: Asheville NC
Contact:

Re: help for my thin advanced tab bar style

Post by patrickjdempsey »

I used to develop Themes for Firefox, but have now switched over full-time to SeaMonkey. SeaMonkey will never get "Australis", although it may pick up some of the more useful backend stuff eventually. I've considered building themes for SeaMonkey, but for now I'm taking a much-deserved vacation from it.

FYI: this section of the forum is really for installable Theme development and not really for CSS hacks, but the information in this thread is useful and pertains to Themes just as well as hacks, so it's OK here.
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/
Post Reply