Tab title in location bar (without replacing url) #62

Aris-t2 · 2021-12-17T12:42:40Z

Aris-t2
Dec 17, 2021
Maintainer

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 · 2021-12-20T23:32:31Z

Speravir
Dec 20, 2021

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. 😞

0 replies

Aris-t2 · 2021-12-21T13:05:54Z

Aris-t2
Dec 21, 2021
Maintainer Author

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:

0 replies

LeeBinder · 2021-12-21T19:52:46Z

LeeBinder
Dec 21, 2021

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'

0 replies

Speravir · 2021-12-22T01:00:06Z

Speravir
Dec 22, 2021

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.

0 replies

glennpc · 2021-12-22T07:04:31Z

glennpc
Dec 22, 2021

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;
}\

0 replies

Aris-t2 · 2021-12-22T09:39:15Z

Aris-t2
Dec 22, 2021
Maintainer Author

@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?

0 replies

glennpc · 2021-12-22T17:13:51Z

glennpc
Dec 22, 2021

@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:

0 replies

Aris-t2 · 2021-12-23T10:34:36Z

Aris-t2
Dec 23, 2021
Maintainer Author

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

0 replies

glennpc · 2021-12-23T18:02:45Z

glennpc
Dec 23, 2021

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

0 replies

Speravir · 2021-12-23T23:59:11Z

Speravir
Dec 23, 2021

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.

0 replies

Aris-t2 · 2021-12-24T14:06:28Z

Aris-t2
Dec 24, 2021
Maintainer Author

@Speravir

Here is the script version for the titlebar: #55

0 replies

Speravir · 2021-12-25T18:48:06Z

Speravir
Dec 25, 2021

Here is the script version for the titlebar

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

0 replies

peterwx · 2022-03-11T11:44:11Z

peterwx
Mar 11, 2022

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

1 reply

Speravir Apr 22, 2022

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

I know. I use this myself, too. @sdavidg announced his (?) scripts himself in #39. But thanks to your answer I noticed there’s an update. 😄

Edit: I mixed up the threads. I thought your answer was in #63. Here my reaction does not make that much sense.

LeeBinder · 2022-04-19T16:41:10Z

LeeBinder
Apr 19, 2022

Also there is Merci-chao's Page Title in URL Bar (thanks to xiaoxiaoflood for the hint).

0 replies

LeeBinder · 2022-12-18T19:45:37Z

LeeBinder
Dec 18, 2022

@Aris-t2 updated his script on 2022-12-13:

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

Changes see commit #180f4c20e3a692d38fba1291e9d1818bb1e277f6

~~The script stopped working in WaterFox G5, even the latest script update doesn't work. Trying right now to figure out why.~~

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Tab title in location bar (without replacing url) #62

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 15 comments 1 reply

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Select a reply

Tab title in location bar (without replacing url) #62

Aris-t2 Dec 17, 2021 Maintainer

Replies: 15 comments · 1 reply

Aris-t2 Dec 21, 2021 Maintainer Author

Aris-t2 Dec 22, 2021 Maintainer Author

Aris-t2 Dec 23, 2021 Maintainer Author

Aris-t2 Dec 24, 2021 Maintainer Author

Aris-t2
Dec 17, 2021
Maintainer

Replies: 15 comments 1 reply

Aris-t2
Dec 21, 2021
Maintainer Author

Aris-t2
Dec 22, 2021
Maintainer Author

Aris-t2
Dec 23, 2021
Maintainer Author

Aris-t2
Dec 24, 2021
Maintainer Author