Tab title in location bar (without replacing url)

[Aris-t2]

I received a few requests about adding tab title to location bar in the past.
Instead of replacing the url, the script adds the tab title into 'page action buttons' box.

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

2021-12-21 update

• minor position adjustments (fixes normal and touch modes)
• hide item, if urlabar is open, focused or hovered

[Speravir]

requests about adding tab title to location bar

Hmm, I am interested in having the label right beside the Panel UI button that I have moved to top left (with Custom CSS for Fx) and much free space right of it. I used to have the tab label there in the past, but it stooped working after some Firefox code changes.

Since there is no insertAfter I tried replacing the inserBefore part in line #10 with append or appendChild(and the id of the Panel UI button, of course), but I wasn’t successful. 😞

[Aris-t2]

You will have to run some tests, but in general it is possible to move that title item anywhere.

Replace
document.getElementById("page-action-buttons").insertBefore(tablabel, document.getElementById("page-action-buttons").firstChild);

with

document.getElementById("titlebar").insertBefore(tablabel, document.getElementById("titlebar").firstChild);

and add this to your userChrome.css/my_userChrome.css:

#tab_label_in_urlbar {
  position: absolute !important;
  display: flex !important;
  padding-inline-start: 95px !important;
  margin-bottom: -18px !important;
}

I also enabled tabs_below_titlebar_above_navigation_toolbar.css in CustomCSSforFx.

Looks in normal window mode like this:

[LeeBinder]

Mighty cool. I somewhat know CSS and JS a bit myself, so I can say: impressive 🥇 !

For my style in WaterFox macOS, I'm using margin-top: 4px !important;\ for best looks. That's easy to tweak for anybody. IMPORTANT: after any change to the script, clear startup cache via 'Help -> More Troubleshooting Information'

[Speravir]

Replace document.getElementById("page-action-buttons").insertBefore(tablabel, document.getElementById("page-action-buttons").firstChild);

with

document.getElementById("titlebar").insertBefore(tablabel, document.getElementById("titlebar").firstChild);

Ha, using titlebar is the trick, so simple.

Interestingly, applying this to the first version of the script does work here without any CSS.

But, there is an annoying and strange new issue with both versions: The window control buttons are not visible anymore, but do still work (the mouse over shows it, and I also tested with minimize and maximize), only the box behind them is moved to the bottom partly hiding some buttons, cf. image:

Left is the Firefox window, right is an explorer window showing, how the controls should look. Apparently, I am still on Windows 7.

I hope this is not important, but:

I also enabled tabs_below_titlebar_above_navigation_toolbar.css in CustomCSSforFx.

I use tabs_below_navigation_toolbar.css.

[glennpc]

I made a slight modification in the code to make the title line up better with the URL:

It was this:

#tab_label_in_urlbar {
margin-block: unset !important;
margin-inline: unset !important;
margin-top: -2px !important;
}\

I changed it to this:

#tab_label_in_urlbar {
margin-block: unset !important;
margin-inline: unset !important;
margin-top: -1px !important;
margin-bottom: -2px !important;
}\

[Aris-t2]

@Speravir
I can not test on Win7 atm, but I know about this glitch with Win7 + AeroGlass + LW-themes.
It is present since Firefox 4 I guess and I remember issues occurred when I was working on Noia 4 back then.

On Win7 (AeroGlass) caption buttons are hard coded and adding another item to titlebar vertical box causes the caption buttons to shift. Therefor the themes area for them shifts too. But Win7 buttons stay where the belong and the result can be seen on your screenshot. We have to solve this using position absolute.

In my tests (currently on Win 10) caption buttons do not shift. Try this code:

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

(function() {
	
  try {

	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);

	updateLabel();
  
	// 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);
  
	function updateLabel() {
	  titlebarlabel.setAttribute("value",gBrowser.selectedBrowser.contentTitle);
	}
	
	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 uri = Services.io.newURI("data:text/css;charset=utf-8," + encodeURIComponent('\
	  \
	  #tab_label_in_titlebar_box { \
		position: absolute !important; \
		display: flex !important; \
		padding-inline-start: 95px !important; \
	  }\
	  \
	'), null, null);
  
	sss.loadAndRegisterSheet(uri, sss.AGENT_SHEET);
  
  } catch(e) {}
	
}());

(works with CustomCSSforFx options tabs_below_navigation_toolbar.css and tabs_below_titlebar_above_navigation_toolbar.css)

@glennpc
I tested this on two Systems and get same result in compact, normal and touch modes as before. Maybe there is another combination of CSS/JS code forcing different results here?

[glennpc]

@Aris-t2
I don't think it's a conflict with any other CSS or JS scripts. I've tested it both ways with everything else disabled, still the same. What I did notice is, the modified script does not take effect until the startupCache folder is cleared out.

Here is what I am seeing.

Before the modifications:

After the modifications:

[Aris-t2]

I see this on your screenshot.
Does the same happen in normal and touch modes too?

[glennpc]

@Aris-t2
Yes, looks the same with normal and touch.

[Speravir]

I can not test on Win7 atm, but I know about this glitch with Win7 + AeroGlass + LW-themes.
It is present since Firefox 4 I guess and I remember issues occurred when I was working on Noia 4 back then.

And now that you speak of it I suddenly remember that I once had asked you already something in regards to these buttons (blushing 😊). Should be somewhere in the closed threads of CustomCSSforFx.

Try this code

Works great! Thank you. I assume there are too much preconditions for styling to add it as regular script, right?

(At least I saved the url and will certainly notice updates on the titlebar_in_urlbar script).

(works with CustomCSSforFx options tabs_below_navigation_toolbar.css and tabs_below_titlebar_above_navigation_toolbar.css)

And with appbutton_in_titlebar styles, as well, which is why you supposedly have added the start-padding.

[Aris-t2]

@Speravir

Here is the script version for the titlebar: #55

[Speravir]

Here is the script version for the titlebar

👍 👍 I am blushing even more, especially for your idea with var settings.

[peterwx]

There is this tab_title_url.uc.js script (by sdavidg) that displays a tooltip on the address bar.