Tab title in title bar (+ CustomCSSforFx compatibility)

[Aris-t2]

Tab title in title bar (+ CustomCSSforFx compatibility)

See https://github.com/Aris-t2/CustomJSforFx/issues/54#issuecomment-1000569450

Script: https://github.com/Aris-t2/CustomJSforFx/blob/master/scripts/tab_label_in_titlebar.uc.js

Use these two options inside the script to configure script for CustomCSSforFx setup.

// 0 = CustomCSSforFx not installed or tabs on top;
// 1 = tabs not on top;
// 2 = tabs not on top + alt menubar position;
var customcssforfx_tabs_position = 1; 

// 0 = CustomCSSforFx not installed / disabled; 
// 1 = default/large;
// 2 = icon only
var customcssforfx_appbutton_in_titlebar = 1; 

Examples: Default setup / CustomCSSforFx not installed; var customcssforfx_tabs_not_on_top = 0; // var customcssforfx_appbutton_in_titlebar = 0;

CustomCSSforFx installed / tabs on top / (big) appbutton in titlebar var customcssforfx_tabs_not_on_top = 1; // var customcssforfx_appbutton_in_titlebar = 1;

CustomCSSforFx installed / tabs not on top / (big) appbutton in titlebar var customcssforfx_tabs_not_on_top = 2; // var customcssforfx_appbutton_in_titlebar = 1;

---

Merry Christmas and a happy new year.

[Speravir]

Wow, you see me almost speechless!

Merry Christmas and a happy new year.

Same to you!

[Speravir]

I do not know, how it is for Unix/Linux (MacOS should not be affected I guess, because the menu is outside browser window), but in Windows the title string is layed over the menu which is by default hidden, but now covered by the string if enabled (embarrassing that I did forget about this). So I added this CSS:

#menubar-items {
    background-color: var(--lwt-accent-color);
    background-image: var(--lwt-header-image);
    position: relative; /* for z-index */
    z-index: 1;
}

For me using a theme this works fine. But I also tested code you provide with the addon bar script when not using a theme, and there seems to be some opacity setting necessary, but I did not check further.

[Aris-t2]

Could you state the case, when the menubar and the "title" overlap? I tried to avoid those cases in the code. Most likely there is some case when using this with CustomCSSforFx I did not think of yet.

[Speravir]

Oops, I only downloaded the file and adjusted the settings/variables:

var customcssforfx_tabs_not_on_top = 2;
var customcssforfx_appbutton_in_titlebar = 1;

Just to be safe: I did not speak about the panel menu.

[Aris-t2]

You are right. The code was not yer ready for the menubar ;-)

To stop overlapping and without increasing titlebar size I tried to move the menubar to the right. Could you test this code:

// 'Tab label in titlebar' script for Firefox by Aris

(function() {

  try {

    var customcssforfx_tabs_position = 0; // 0 = CustomCSSforFx not installed; 1 = tabs on top; 2 = tabs not on top;
    var customcssforfx_appbutton_in_titlebar = 0; // 0 = CustomCSSforFx not installed / disabled; 1 = default/big; 2 = icon only

    var titlebarlabelbox = document.createXULElement("hbox");
    titlebarlabelbox.setAttribute("id","tab_label_in_titlebar_box");

    var titlebarlabel = document.createXULElement("label");
    titlebarlabel.setAttribute("id","tab_label_in_titlebar");
    titlebarlabelbox.appendChild(titlebarlabel);
    document.getElementById("titlebar").insertBefore(titlebarlabelbox, document.getElementById("titlebar").firstChild);

    // catch cases where tab title can change
    document.addEventListener("TabAttrModified", updateLabel, false);
    document.addEventListener('TabSelect', updateLabel, false);
    document.addEventListener('TabOpen', updateLabel, false);
    document.addEventListener('TabClose', updateLabel, false);
    document.addEventListener('load', updateLabel, false);
    document.addEventListener("DOMContentLoaded", updateLabel, false);

    updateLabel();

    function updateLabel() {
      setTimeout(function(){
        titlebarlabel.setAttribute("value",gBrowser.selectedBrowser.contentTitle);
      },100);
    }

    var {Services} = Components.utils.import("resource://gre/modules/Services.jsm", {});
    var sss = Components.classes["@mozilla.org/content/style-sheet-service;1"].getService(Components.interfaces.nsIStyleSheetService);

    var customcssforfx_appbutton_in_titlebar_code = '';

    if(customcssforfx_appbutton_in_titlebar == 1)
      customcssforfx_appbutton_in_titlebar_code = ' \
      #tab_label_in_titlebar_box { \
        padding-inline-start: 95px !important; \
      } \
      ';
    else if(customcssforfx_appbutton_in_titlebar == 2)
      customcssforfx_appbutton_in_titlebar_code = ' \
      #tab_label_in_titlebar_box { \
        padding-inline-start: 40px !important; \
      } \
      ';

    var adjust_tabs_toolbar_position_code = ' \
      #toolbar-menubar { \
        padding-top: 20px !important; \
      } \
      #toolbar-menubar[inactive="true"] + #TabsToolbar { \
        padding-top: 26px !important; \
      } \
      .titlebar-spacer[type="pre-tabs"], \
      .titlebar-spacer[type="post-tabs"] { \
        display: none !important; \
      } \
      #main-window:not([sizemode="fullscreen"]) .titlebar-buttonbox-container { \
        position: absolute !important; \
        display: flex !important; \
        top: 0 !important; \
        right: 0 !important; \
      }\
      #main-window:not([sizemode="fullscreen"])[sizemode="maximized"] .titlebar-buttonbox-container { \
        top: 8px !important; \
      }\
      #main-window[tabsintitlebar] #TabsToolbar { \
        padding-inline-start: 2px !important; \
      } \
    ';

    if(customcssforfx_tabs_position == 2)
        adjust_tabs_toolbar_position_code = ' \
      #toolbar-menubar { \
        position: absolute !important; \
        display: flex !important; \
        top: 0 !important; \
        right: 0px !important; \
      } \
      #main-window:not([sizemode="fullscreen"])[sizemode="maximized"] #toolbar-menubar { \
        top: 8px !important; \
      }\
    ';

    var uri = Services.io.newURI("data:text/css;charset=utf-8," + encodeURIComponent('\
      \
      #tab_label_in_titlebar_box { \
        position: absolute !important; \
        display: flex !important; \
      }\
      '+adjust_tabs_toolbar_position_code+'\
      '+customcssforfx_appbutton_in_titlebar_code+'\
      \
    '), null, null);

    sss.loadAndRegisterSheet(uri, sss.AGENT_SHEET);

  } catch(e) {}

}());

[Speravir]

Could you test this code:

It works until the tab title reaches a certain length. For an extreme example check Lopado­temacho­selacho­galeo­kranio­leipsano­drim…. I do not like, though, that the menu is to the right, now. I’d actually prefer that the tab title fully disappeared when the menu was blended in, but I did not get a working method to set a width of 100%. Something must be not well adjusted or even wrong in my style (I’ve only added width:100%; to the style seen above, display: -moz-box; according to devtools looks to me like a box which should set this, though).

Actually I loved the way it worked in Firefox versions before v.57 with an addon Hide Caption Titlebar Plus, but this was more sophisticated. I do not know whether this still is possible with Webextension API, but if you are interested in the code, download it: hide_caption_titlebar_plus_4-4.1.1-fx.xpi (I may delete this in the future). It did more than the menu stuff and has quite a lot style files, but in regards to this it was a flying layer, and the tab title was set after the menu.

[Aris-t2]

I posted a new file with more configuration options.

Hiding the label, when menubar is visible, would defeat the purpose of this feature in my opinion. Maybe moving title and menubar a bit and decreasing their top and bottom padding/margin/'space' values can lead to a more acceptable result?

Test the new file, once you have some free time. ;-)

https://github.com/Aris-t2/CustomJSforFx/blob/master/scripts/tab_label_in_titlebar.uc.js

    // 0 = CustomCSSforFx not installed or tabs on top;
    // 1 = tabs not on top;
    // 2 = tabs not on top + alt menubar position;
    var customcssforfx_tabs_position = 1; 

    // 0 = CustomCSSforFx not installed / disabled; 
    // 1 = default/large;
    // 2 = icon only
    var customcssforfx_appbutton_in_titlebar = 1; 

[Speravir]

I posted a new file with more configuration options.

Nice. I opted for 1 twice.

Test the new file, once you have some free time.

I assume, no, I am sure you tested with a default profile, and it works there. For me there are small glitches, but these will come from custom style settings on my side, and it will just need some time to adjust these.

[Aris-t2]

You are right, I did not run many different tests.

1. Default browser appearance without CustommCSSforFx.
2. CustomCSSforFx (+ appbutton large/small).
3. CustomCSSforFx: tabs below navigation toolbar (+ appbutton large/small).

Many CustomCSSforFx might interfere and create glitches.

Further more testing became somehow harder than usual. Changes sometime only seem to work after clearing Startup cache and restarting Firefox (closing, starting, not via "Restart" button).

[Speravir]

I wanted to say that noone can expect you to test for every possible constellation. This said this works for me:

#main-window #titlebar #tab_label_in_titlebar {
    margin-top: 4px !important;
}
#tab_label_in_titlebar_box {
    z-index: 6; /* larger by 1 than for menu */
    /* position: absolute;/* already set in script */
}
#titlebar #toolbar-menubar #menubar-items {
    background-color: var(--lwt-accent-color);
    background-image: var(--lwt-header-image);
    padding: 5px;
    margin-top: 10px;
    position: relative; /* for z-index */
    z-index: 5; /* larger by 1 than in a custom style for URL bar colouring */
}

The margins settings are due to other adjustments. The z-index stuff is in reaction to using the style you can find in this forum posting written by me in Camp Firefox.

Further more testing became somehow harder than usual. Changes sometime only seem to work after clearing Startup cache and restarting Firefox (closing, starting, not via "Restart" button).

Didn’t notice this yet, but I had to notice that temporal style adjustments that work instantly in devtools sometimes do afterwards only work with increasing the specifity of rules, sometimes even !important does not seem to work reliably. The shadow root stuff makes everything harder, I guess.

[Speravir]

This shows how rarely I use the panel menu so this took a while getting aware of it: With enabled script this menu is not displayed for me. As mentioned above:

var customcssforfx_appbutton_in_titlebar = 1;

Update 1: I have no solution, but noticed that this is a consequence of setting the z-index and maybe the position property.

Update 2: The isssue is only caused by this rule:

#tab_label_in_titlebar_box {
    z-index: 6;
}

I had to remove it and following this also changing the other one to

#titlebar #toolbar-menubar #menubar-items {
    background-color: transparent;
    position: relative; /* for z-index */
    z-index: 5; /* larger by 1 than in a custom style for URL bar colouring */
}

Note the transparent background-color.