MozillaZine

How do I put tabs in title bar when not maximized?

Discuss application theming and theme development.
KLB

User avatar
 
Posts: 2282
Joined: December 21st, 2003, 9:25 am
Location: Saco Maine

Post Posted April 15th, 2011, 6:16 am

How do I get tabs to appear in the titlebar when Firefox is not maximized, but when menubar is turned off and tabs are on top?
Ken Barbalace - AMO Editor (I focus on reviewing themes)
I maintain Classic Compact, a very compact yet clean Firefox theme.
EnvironmentalChemistry.com (Periodic Table)

smsmith
Moderator

User avatar
 
Posts: 19359
Joined: December 7th, 2004, 8:51 pm
Location: Indiana

Post Posted April 15th, 2011, 7:05 pm

Give a man a fish, and he eats for a day. Teach a man to fish, and he eats for a lifetime.
I like poetry, long walks on the beach and poking dead things with a stick.
Please do not PM me for personal support. Keep posts here in the Forums instead and we all learn.

KLB

User avatar
 
Posts: 2282
Joined: December 21st, 2003, 9:25 am
Location: Saco Maine

Post Posted April 17th, 2011, 8:53 am

smsmith wrote:This might help you get started:
http://userstyles.org/styles/42417/ff4- ... red-window


Thanks, this is helpful for ideas.

One thing I've found in my experimenting is that Firefox sets the #main-window attribute "tabsintitlebar=true" when Firefox is maximized, tabs are on top and the menubar is hidden. What I'd like to figure out is a JavaScript to cause this attribute to be also set when Firefox is in "sizemode=normal". I think being able to manipulate the tabsintitlebar attribute would eliminate the need for a lot of style rules and make the option safer for different system configurations.

Does anyone know how Firefox sets and clears the tabsintitlebar attribute?
Ken Barbalace - AMO Editor (I focus on reviewing themes)
I maintain Classic Compact, a very compact yet clean Firefox theme.
EnvironmentalChemistry.com (Periodic Table)

KLB

User avatar
 
Posts: 2282
Joined: December 21st, 2003, 9:25 am
Location: Saco Maine

Post Posted April 17th, 2011, 9:32 am

I've partially answered by question above. Fortunately, the new tabs in titlebar feature is well documented in Bugzilla:
https://bugzilla.mozilla.org/show_bug.cgi?id=572160

Here is the code changes that cause the tabs to end up in the title bar:
https://bug572160.bugzilla.mozilla.org/ ... ?id=501824

What I need to do now is figure out how build my own JavaScript based off this code that would also put the tabs in title bar when the browser window is not maximized.
Ken Barbalace - AMO Editor (I focus on reviewing themes)
I maintain Classic Compact, a very compact yet clean Firefox theme.
EnvironmentalChemistry.com (Periodic Table)

KLB

User avatar
 
Posts: 2282
Joined: December 21st, 2003, 9:25 am
Location: Saco Maine

Post Posted April 17th, 2011, 2:21 pm

After digging and researching, I think I can pull this off pretty seamlessly if I could just figure out one thing. How to set an observer that will allow me to fire an event when the menubar is hidden or unhidden. If I could detect this then I could set an observer to the #main-window like maybe "cctabsintitlebar=true". In turn I could marry up every style rule that references "#main-window[tabsintitlebar]" with a second reference that started like "#main-window[cctabsintitlebar][tabsontop]". For instance:
Code: Select all
  #main-window[cctabsintitlebar][tabsontop]:not([inFullscreen]) #toolbar-menubar[inactive] ~ #TabsToolbar:not(:-moz-lwtheme) ,
  #main-window[tabsintitlebar]:not([inFullscreen]) #toolbar-menubar[inactive] ~ #TabsToolbar:not(:-moz-lwtheme) {
    background: none;
    color: CaptionText;
  }


BTW, why the "~" in the reference above? What does it mean/do?
Ken Barbalace - AMO Editor (I focus on reviewing themes)
I maintain Classic Compact, a very compact yet clean Firefox theme.
EnvironmentalChemistry.com (Periodic Table)

KLB

User avatar
 
Posts: 2282
Joined: December 21st, 2003, 9:25 am
Location: Saco Maine

Post Posted April 17th, 2011, 2:38 pm

Well I'll be damn, I just searched W3C for CSS selectors and discovered the "~" is a "general sibling combinator". What it does is set the style rule for an object if it is preceded by the referenced sibling. For instance "E ~ T" would set the style rule for object "T" when it appeared after object "E". How slick is that.

This still doesn't help me as I the Titlebar comes well before the menubar so I can't qualify it using "#toolbar-menubar[inactive]". So I still need a way to change the state of my attribute "cctabsintitlebar" when the menubar is hidden/unhidden.

(I feel like I'm having a conversation with myself, but hopefully if I post what I find as I research, someone will have a spark of brilliance they will share with me that helps me accomplish my goal.
Ken Barbalace - AMO Editor (I focus on reviewing themes)
I maintain Classic Compact, a very compact yet clean Firefox theme.
EnvironmentalChemistry.com (Periodic Table)

patrickjdempsey

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

Post Posted April 18th, 2011, 1:45 am

Ha! Yeah, ~ is a nice selector. I like to use it instead of + just in case some extension decides to comes along and add an element between my selectors. It is pretty trivial to use a binding to create an observer. Try binding this to #main-window:

#main-window { -moz-binding: url("chrome://browser/skin/browser.xml#menuhiddenobserver");}

And put this into browser.xml:

Code: Select all
  <binding id="menuhiddenobserver"
           extends="chrome://global/content/bindings/general.xml#root-element">
    <content>
      <xul:observes element="toolbar-menubar" attribute="inactive"/>
      <children/>
    </content>
  </binding>


So using that your selector would look like:

#main-window[inactive="true"][tabsontop="true"] { stuff; }
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/

KLB

User avatar
 
Posts: 2282
Joined: December 21st, 2003, 9:25 am
Location: Saco Maine

Post Posted April 18th, 2011, 5:39 am

Is there a way to change the name of the menubar attribute "inactive" as it is set to #main-window? The reason I ask is that setting the attribute to "inactive" seems really generic and could easily cause future conflicts if Mozilla decided to use that attribute name for something else.
Ken Barbalace - AMO Editor (I focus on reviewing themes)
I maintain Classic Compact, a very compact yet clean Firefox theme.
EnvironmentalChemistry.com (Periodic Table)

KLB

User avatar
 
Posts: 2282
Joined: December 21st, 2003, 9:25 am
Location: Saco Maine

Post Posted April 18th, 2011, 6:10 am

patrickjdempsey wrote:And put this into browser.xml:

Code: Select all
  <binding id="menuhiddenobserver"
           extends="chrome://global/content/bindings/general.xml#root-element">
    <content>
      <xul:observes element="toolbar-menubar" attribute="inactive"/>
      <children/>
    </content>
  </binding>



So where do I put this if I don't have a "browser.xml" file in my theme? :?
Ken Barbalace - AMO Editor (I focus on reviewing themes)
I maintain Classic Compact, a very compact yet clean Firefox theme.
EnvironmentalChemistry.com (Periodic Table)

KLB

User avatar
 
Posts: 2282
Joined: December 21st, 2003, 9:25 am
Location: Saco Maine

Post Posted April 18th, 2011, 7:32 am

I figured out the answer to my "browser.xml" question by cracking open your theme Stratini 2.1.

For the benefit of others. If you don't have a browser.xml file in your browser folder create one and add the following code to it to make Patrick's solution work:
Code: Select all
<?xml version="1.0"?>

<bindings id="globalBindings"
          xmlns="http://www.mozilla.org/xbl"
          xmlns:html="http://www.w3.org/1999/xhtml"
          xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
          xmlns:xbl="http://www.mozilla.org/xbl">

  <!-- :::/ widgets \ ::::::::::::::::::::::::::::::::::::::::::::::::::::: -->

  <binding id="menuhiddenobserver" extends="chrome://global/content/bindings/general.xml#root-element">
    <content>
      <xul:observes element="toolbar-menubar" attribute="autohide"/>
      <children/>
    </content>
  </binding>
Ken Barbalace - AMO Editor (I focus on reviewing themes)
I maintain Classic Compact, a very compact yet clean Firefox theme.
EnvironmentalChemistry.com (Periodic Table)

KLB

User avatar
 
Posts: 2282
Joined: December 21st, 2003, 9:25 am
Location: Saco Maine

Post Posted April 18th, 2011, 10:27 am

I'm getting real close with this, I just can't figure out how Firefox moves the tabs to fit between the Firefox app button and the title bar buttons when tabs are in the titlebar.
Ken Barbalace - AMO Editor (I focus on reviewing themes)
I maintain Classic Compact, a very compact yet clean Firefox theme.
EnvironmentalChemistry.com (Periodic Table)

patrickjdempsey

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

Post Posted April 18th, 2011, 11:43 am

Hmm... maybe something like this?:

Code: Select all
  <binding id="menuhiddenobserver" extends="chrome://global/content/bindings/general.xml#root-element">
    <content>
       <xul:hbox hidden="true">
          <xul:observes element="toolbar-menubar" attribute="inactive"/>
          <xul:hbox id="CC_menuhiddenobserver"  xbl:inherits="menuhidden=inactive"/>
       </xul:hbox>
       <xul:observes element="CC_menuhiddenobserver" attribute="menuhidden"/>
       <children/>
    </content>
  </binding>


I have no idea if this will work, but it's a theory I've been thinking about for some time now.
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 April 18th, 2011, 11:52 am

KLB wrote:I'm getting real close with this, I just can't figure out how Firefox moves the tabs to fit between the Firefox app button and the title bar buttons when tabs are in the titlebar.


If you inspect the menubar and tabs toolbar, you will see four new elements, called .titlebar-placeholder. These hold the space for the appbutton and the window-control-buttons. This line in content/browser.css controls their visibility:

Code: Select all
#main-window[inFullscreen] > #titlebar,
#main-window[inFullscreen] .titlebar-placeholder,
#main-window:not([tabsintitlebar]) .titlebar-placeholder {
  display: none;
}


So when you push the tabs up you need to switch this to display: -moz-box!important; and that should make the spaces. Also remember to press the Alt button and make sure you are allowing the menu to be shown. But if you are able to set tabsintitlebar attribute then all of this should be automatic.

Edit: I just remembered it isn't inactive=true you need to monitor, it's autohide=true. When you press Alt, inactive will disappear. So the autohide attribute should be descriptive enough without changing the name:

Code: Select all
  <binding id="menuhiddenobserver"
           extends="chrome://global/content/bindings/general.xml#root-element">
    <content>
      <xul:observes element="toolbar-menubar" attribute="autohide"/>
      <children/>
    </content>
  </binding>
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 April 18th, 2011, 12:26 pm

And of course, this stuff will only work in Windows, so be sure to wrap this in a media query for windows-default-theme, windows-classic, and zune.
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/

KLB

User avatar
 
Posts: 2282
Joined: December 21st, 2003, 9:25 am
Location: Saco Maine

Post Posted April 18th, 2011, 12:42 pm

The placeholders only affect the menubar, however, I did figure out how to measure the width of the app button and title bar button box dynamically and apply it to a stylesheet. It works slick as snot.

Here is my first test version of pushing tabs into the title bar when not maximized (both the theme CC and extension CCO are needed):

CC v4.0.9b1 http://EnvironmentalChemistry.com/classiccompact4.0.jar
CCO v4.0.9b1 http://EnvironmentalChemistry.com/class ... ons4.0.xpi

To enable this behavior go to the "menus & tabs" tab in the CCO options panel and change the setting "display tabs in title bar" to "always". My feeling is this is a pretty radical feature so it is best for it to be an optional setting.
Ken Barbalace - AMO Editor (I focus on reviewing themes)
I maintain Classic Compact, a very compact yet clean Firefox theme.
EnvironmentalChemistry.com (Periodic Table)

Return to Theme Development


Who is online

Users browsing this forum: No registered users and 1 guest