MozillaZine

FF 58 - Auothide last tab

User Help for Mozilla Firefox
ejm_dc
 
Posts: 54
Joined: December 20th, 2003, 4:12 pm

Post Posted February 20th, 2018, 1:16 pm

Does anyone know if there is any CSS that would hide the tab bar if there is only one tab?

The following from http://forums.mozillazine.org/viewtopic.php?f=23&t=2706317, hides the tab but leaves the bar with the new tab button (plus sign). Is this doable?

Code: Select all
#TabsToolbar { border : none !important;}
#TabsToolbar { min-height: 0px !important;}
#tabbrowser-tabs tab[first-tab='true'][last-tab='true'] { display:none !important; }


Any options? for getting ride of the tab bar when there is only one tab open (FF 58)?

Thanks!
Last edited by ejm_dc on February 20th, 2018, 8:12 pm, edited 1 time in total.

morat
 
Posts: 2949
Joined: February 3rd, 2009, 6:29 pm

Post Posted February 20th, 2018, 5:51 pm

Try this:

Code: Select all
/* Firefox userChrome.css */

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

#TabsToolbar {
  border: none !important;
  min-height: 0px !important;
}
#tabbrowser-tabs tab[first-visible-tab="true"][last-visible-tab="true"] {
  display: none !important;
}

http://kb.mozillazine.org/UserChrome.css

CustomCSSforFx
http://github.com/Aris-t2/CustomCSSforFx

tab_close_hidden_for_only_one_visible_tab.css
http://github.com/Aris-t2/CustomCSSforF ... le_tab.css

ejm_dc
 
Posts: 54
Joined: December 20th, 2003, 4:12 pm

Post Posted February 20th, 2018, 7:23 pm

Thanks! Unfortunately, that doesn't seem to work for me. I'm using CustomCSSforFX and included it in my_userChrome.css, but it does not remove the last tab (or any tabs) at all.

morat
 
Posts: 2949
Joined: February 3rd, 2009, 6:29 pm

Post Posted February 20th, 2018, 7:37 pm

Did you try the first tweak I posted?

Aris' tweak hides the tab close button if there is only one tab.

ejm_dc
 
Posts: 54
Joined: December 20th, 2003, 4:12 pm

Post Posted February 20th, 2018, 7:41 pm

morat wrote:Did you try the first tweak I posted? Aris' tweak hides the tab close button if there is only one tab.


Yes. I did. It didn't work even when there was only one tab, possibly because I was using CustomCSSforFX and had the tabs below the bookmark bar.

So, I tried it without CustomCSSforFX (i.e., just using a blank userChrome.css file with the code) and it does remove the tab but like the tweak I copied above the new tab button plus sign remains.

The code I copied in my first post works with (and without) CustomCSSforFX but again it leaves the new tab button and the tab bar.

Any ideas for code that will also remove the new tab button and the tab bar itself.

morat
 
Posts: 2949
Joined: February 3rd, 2009, 6:29 pm

Post Posted February 21st, 2018, 7:01 am

Sorry, I misread the post.

I think what you are asking is not possible with css.

aborix
 
Posts: 25
Joined: October 23rd, 2017, 1:23 pm

Post Posted February 21st, 2018, 10:45 am

So let's try it with JavaScript.

Put this code into the userChrome.css:

Code: Select all
toolbarbutton#alltabs-button {
  -moz-binding: url(userChrome.xml#execute_javascript_code);
}

Also create another text file, name it "userChrome.xml" and put this code into it:

Code: Select all
<?xml version="1.0"?>

<bindings id="generalBindings"
  xmlns="http://www.mozilla.org/xbl"
  xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
  xmlns:xbl="http://www.mozilla.org/xbl">

  <binding id="execute_javascript_code" extends="chrome://global/content/bindings/toolbarbutton.xml#menu">
    <implementation>
      <constructor>
        <![CDATA[

          (function() {
            if (window.ucjsExecuted)
              return;
            ucjsExecuted = true;
            function showHideTabbar() {
              document.getElementById('TabsToolbar').style.visibility =
                (gBrowser.visibleTabs.length == 1) ? 'collapse' : '';
            };
            showHideTabbar();
            let observer = new MutationObserver(showHideTabbar);
            observer.observe(document.getElementById('tabbrowser-tabs'), {childList: true});
          })();

        ]]>
      </constructor>
    </implementation>
  </binding>
</bindings>

Copying from the code box may add spaces at the beginning of each line. Remove the spaces from the first line.
Then put the file into the chrome directory too.
Last edited by aborix on February 22nd, 2018, 12:03 am, edited 1 time in total.

ejm_dc
 
Posts: 54
Joined: December 20th, 2003, 4:12 pm

Post Posted February 21st, 2018, 1:20 pm

Oh, Brilliant!!! That works perfectly! Thanks so much!!!

aborix wrote:So let's try it with JavaScript.

Put this code into the userChrome.css:

Code: Select all
toolbarbutton#alltabs-button {
  -moz-binding: url(userChrome.xml#execute_javascript_code);
}

Also create another text file, name it "userChrome.xml" and put this code into it:

Code: Select all
<?xml version="1.0"?>

<bindings id="generalBindings"
  xmlns="http://www.mozilla.org/xbl"
  xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
  xmlns:xbl="http://www.mozilla.org/xbl">

  <binding id="execute_javascript_code" extends="chrome://global/content/bindings/toolbarbutton.xml#menu">
    <implementation>
      <constructor>
        <![CDATA[

          (function() {
            if (window.ucjsExecuted)
              return;
            ucjsExecuted = true;
            function showHideTabbar() {
              document.getElementById('TabsToolbar').style.visibility =
                (gBrowser.visibleTabs.length == 1) ? 'collapse' : '';
            };
            showHideTabbar();
            let observer = new MutationObserver(showHideTabbar);
            observer.observe(document.getElementById('tabbrowser-tabs'), {childList: true});
          })();

        ]]>
      </constructor>
    </implementation>
  </binding>
</bindings>

Copying from the code box may add spaces at the begin of each line. Remove the spaces from the first line.
Then put the file into the chrome directory too.

aborix
 
Posts: 25
Joined: October 23rd, 2017, 1:23 pm

Post Posted February 22nd, 2018, 12:05 am

You're welcome.

GKnight
 
Posts: 18
Joined: November 7th, 2013, 8:51 am

Post Posted March 2nd, 2018, 10:28 am

@ aborix - thanks for the JavaScript code! It works, but on Windows 10 it also hides the Window control buttons (minimize/maximize/close). The buttons still work but become hidden (kind of placeholders if it makes sense).

aborix
 
Posts: 25
Joined: October 23rd, 2017, 1:23 pm

Post Posted March 2nd, 2018, 2:43 pm

Do you have the titlebar shown or hidden? Same question also for the menubar.
In which bar shall the control buttons be shown and are not?

ejm_dc
 
Posts: 54
Joined: December 20th, 2003, 4:12 pm

Post Posted March 2nd, 2018, 4:13 pm

FWIW, I have the titlebar and menubars shown, and the javascript does not affect the window control buttons.

GKnight
 
Posts: 18
Joined: November 7th, 2013, 8:51 am

Post Posted March 2nd, 2018, 5:57 pm

aborix wrote:Do you have the titlebar shown or hidden? Same question also for the menubar.
In which bar shall the control buttons be shown and are not?


Both are hidden. If I enable the title bar, then this works well. Interesting. With Title bar disabled, I just see the black bar on top of the window with no control buttons but there are place holders for them which activate (change color to grey) if I hover mouse over them, and they still work if I click the mouse.

With Title bar activated, this only looks good with the single tab (which is now hidden). If I have multiple tabs open, it adds the title bar on top of the window which is a waste of space.

aborix
 
Posts: 25
Joined: October 23rd, 2017, 1:23 pm

Post Posted March 3rd, 2018, 4:36 am

GKnight wrote:With Title bar disabled, I just see the black bar on top of the window with no control buttons

May I see a screenshot of this, please?

GKnight
 
Posts: 18
Joined: November 7th, 2013, 8:51 am

Post Posted March 3rd, 2018, 11:53 am

aborix wrote:
GKnight wrote:With Title bar disabled, I just see the black bar on top of the window with no control buttons

May I see a screenshot of this, please?


Here's the window with single tab (maximized):

Image

Here's what happens when I hover the mouse where minimize button should be (and it actually works, you just don't see the button):

Image

It gets weird if I open another tab. It adds a black bar on top (see below). If I minimize & maximize the window, black bar disappears and it looks normal (with visible window control buttons).

Image

Return to Firefox Support


Who is online

Users browsing this forum: Google [Bot] and 17 guests