Tabs in Titlebar (Hide settings button, title bar and remove blank gaps)

[eggplanter]

Hello,

I'm using Pale Moon (a fork of firefox), which is based of an older firefox code. Using userChrome.css is possible.
Right now I want to hide the settings button, the title bar and set my tabs as close as possible to the top window.

In default, Pale Moon looks like this:



I used following syntax to hide the settings button and the title bar:

Hide settings button

Code: Select all

#appmenu-button, #appmenu-toolbar-button { display:none !important; }

Hide title bar

Code: Select all

#main-window:after {
  display:none !important;
}

Afterwards, Pale Moon looks like this:


As you can see, there is still a blank gap above my tabs. Could someone tell me how to remove this gap via userChrome.css?

Thanks!

[_yuyu_]

The straight way is to set browser.tabs.drawInTitlebar in about:config to true.

[eggplanter]

Hello,

the value browser.tabs.drawInTitlebar is set to true per default and doesn't solve my problem.
Is this possible to achieve via userChrome.css?

[_yuyu_]

Try to maximize Palemoon window, the titlebar should disappear. Sorry, don't know about userChrome.css.

[CraigPD]

That about:config setting applies to maximized windows only. For unmaximized (restored) windows you can use Tabs Always in Titlebar 1.2.1-signed.1-signed and then hide the appmenu button entirely (if that's your preference) in userChrome.css. I wasn't able to achieve it entirely otherwise.

[Goodydino]

That gap above the tabs is not exactly blank. It has the close, maximize and minimize buttons in it. Presumably that is standard for Windows?

[eggplanter]

Thanks for the interesting replies, I played with the userChrome.css and was able to achieve what I want without an addon.
But it's not perfect, since I can't click the windows buttons (minimize, maximize, close) afterwards.
These buttons are only clickable above the tabs.

My userChrome.css looks like following:

Code: Select all

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

/* hide firefox button */

#appmenu-button, #appmenu-toolbar-button { display:none !important; }

#main-window:after {
  display:none !important;
}

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

/*[[firefoxbtn]]*/#appmenu-button .button-menu-dropmarker
{
  display: none !important;
}

#main-window[sizemode=normal][tabsontop=true] #toolbar-menubar[autohide=true]
{
  -moz-padding-start: 55px !important;
  margin-top: -22px;
}

#main-window[sizemode=normal] #navigator-toolbox[tabsontop=true] > #toolbar-menubar[autohide=true] ~ #TabsToolbar
{
  -moz-padding-start: 4px !important;
  -moz-padding-end: 135px !important;
}

What inspired me was following user style:
https://userstyles.org/styles/42417/tab ... red-window

Is it possible to exclude the top right corner via userChrome.css? The whole row seems to be handled like tabs.
Probably there is a syntax to exclude the padding at the top right.