help for my thin advanced tab bar style
-
- Posts: 25
- Joined: April 27th, 2008, 3:55 pm
- Location: France
help for my thin advanced tab bar style
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):
Here is my style applied:
Here is what happen when I press ALT key to show menu (it's fine):
Here is what happen when I press the key again to hide the menu:
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.
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):
Here is my style applied:
Here is what happen when I press ALT key to show menu (it's fine):
Here is what happen when I press the key again to hide the menu:
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.
- patrickjdempsey
- Posts: 23686
- Joined: October 23rd, 2008, 11:43 am
- Location: Asheville NC
- Contact:
Re: help for my thin advanced tab bar style
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/
What my avatar is about: https://addons.mozilla.org/en-US/seamonkey/addon/sea-fox/
- mcdavis
- Posts: 3195
- Joined: December 9th, 2005, 5:51 am
Re: help for my thin advanced tab bar style
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.
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
NNL Beta Builds for Current and Up-coming Firefox
Dear User: Your Help is Needed
-
- Posts: 25
- Joined: April 27th, 2008, 3:55 pm
- Location: France
Re: help for my thin advanced tab bar style
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.
-
- Posts: 25
- Joined: April 27th, 2008, 3:55 pm
- Location: France
Re: help for my thin advanced tab bar style
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.
- patrickjdempsey
- Posts: 23686
- Joined: October 23rd, 2008, 11:43 am
- Location: Asheville NC
- Contact:
Re: help for my thin advanced tab bar style
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/
What my avatar is about: https://addons.mozilla.org/en-US/seamonkey/addon/sea-fox/
-
- Posts: 25
- Joined: April 27th, 2008, 3:55 pm
- Location: France
Re: help for my thin advanced tab bar style
Oh man, you made my day! This code solve the issue. I updated my style. Thanks a lot.
- Aris
- Posts: 3248
- Joined: February 27th, 2011, 10:14 am
Re: help for my thin advanced tab bar style
For me the ghost menubar "glitch" also goes away once the main code looses the outcommented line (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.
Beware, there is no [inactive=false]. The "inactive" attribute gets completely removed, so accessing that stage is only possible with ":not([inactive="true"])".
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"])".
- patrickjdempsey
- Posts: 23686
- Joined: October 23rd, 2008, 11:43 am
- Location: Asheville NC
- Contact:
Re: help for my thin advanced tab bar style
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/
What my avatar is about: https://addons.mozilla.org/en-US/seamonkey/addon/sea-fox/
-
- Posts: 25
- Joined: April 27th, 2008, 3:55 pm
- Location: France
Re: help for my thin advanced tab bar style
I tried the [autohide="true"] trick once but it got nowhere with my style.
-
- Posts: 25
- Joined: April 27th, 2008, 3:55 pm
- Location: France
Re: help for my thin advanced tab bar style
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?
- patrickjdempsey
- Posts: 23686
- Joined: October 23rd, 2008, 11:43 am
- Location: Asheville NC
- Contact:
Re: help for my thin advanced tab bar style
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.
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/
What my avatar is about: https://addons.mozilla.org/en-US/seamonkey/addon/sea-fox/