Fix Titlebar Button Tooltips stopped working in the latest Nightly

[VitalSkib]

Every day new surprises.. Now I noticed that the fixTitlebarTooltips.uc.js script stopped working in the latest Nightly (v118.0a1). Some of the tooltips are not displaying properly again. And again, it still works fine in latest FF Stable (v116.01), with the same set of js scripts and settings. Any ideas to fix this? Thanks in advance.

https://github.com/aminomancer/uc.css.js/assets/43848892/b7c515e9-8a36-4e9e-9c5b-edad0b4ccc60

[aminomancer]

I think you might be misunderstanding what that script does. All it does is replace the native tooltips shown for the window controls in the titlebar with XUL tooltips, so that they can be styled like other XUL tooltips. It's referring to the tooltips that appear when you hover the minimize, maximize, and close buttons in the top right corner of the window.

The tooltips you're showing in your video are unrelated. Those are simply normal XUL tooltips. The script doesn't style them. Whatever is styling the other tooltips in your video correctly, it's failing to style the default native-anonymous tooltip correctly.

There are 2 types of tooltips in the chrome window. The first is the generic tooltip. This shows up at the bottom of the DOM, <tooltip default="true" page="true".../>. It's used for all elements that have a tooltiptext attribute. Whatever text is in the tooltiptext attribute gets copied into that generic tooltip.

The other type is different. There's a limited number of special tooltips, that are permanent elements in the DOM. For example, the tooltip for the back button is one such example. Instead of a tooltiptext attribute containing just the tooltip's intended text, the back button has a tooltip attribute that refers to the ID of its permanent tooltip element, back-button-tooltip. So when you hover it, that unique tooltip is opened instead. That's done because the back button's tooltip has 2 rows of uniquely styled text, so the generic tooltip presentation wouldn't be sufficient.

It's a lot easier to style the unique tooltips because they are permanent elements that you can style in ordinary user CSS. So your own userChrome.css file can say for example:

#back-button-tooltip {
  background: red !important;
}

Conversely, if you try to do that with the generic tooltip, it will have no effect:

tooltip {
  /* no effect */
  background: red !important;
}

The only way the generic tooltip can be styled is with a user agent stylesheet. That same rule above, if moved into a user agent stylesheet instead of userChrome.css, will work just fine. See my agent sheet for example.

If you maintain your own stylesheets, then you should make a user agent stylesheet. The readme for this repo goes into quite a lot of detail about my recommended way to do this.

If you're using another author's theme, then you should file a bug on their repo. As far as I know, between 116 and 118, nothing has changed with how agent sheets are processed, nor with how tooltips can be styled. So this is more likely a regression with your theme. If it was working before, then the theme must have had an agent sheet. So if I were you, I would look into what may have changed about the agent sheet or how it's loaded.

[VitalSkib]

Oh man, thanks for the detailed explanation, I really appreciate it. Sure, I have very superficial knowledge in CSS (I am 3D artist), and I can confuse something and I apologize for that. However, you helped to configure this (post on Reddit) and it worked perfectly, but ceased for some reason recently. It was a year ago.. So, if you say that there were no significant changes in this, then perhaps something else changed and started to interfere with this to work. I will try to set up on a fresh installation, without other scripts and addons, let's see. Thanks.

[aminomancer]

I can see in your video that you have a script userChrome_agent_css. Send me that script

[VitalSkib]

Not sure if it's this script? userChrome_ag_css.zip

[VitalSkib]

Also, can I ask you to write a simple step by step guide (or give a link to an already existing one) what and how to install to fix and be able to style these tooltips. I mean, I'll install a fresh FF and want to test just that, without any other (not necessary) scripts or addons installed. I'm just a little confused already and can't figure out how to do it, although I already did it a year ago, but completely forgot how.. I understand that it is annoying to explain to every idiot on the Internet the same thing every time, so if you don't have the time or mood for it - I understand it.. But please..

[aminomancer]

That's not a script, that's a CSS file. I'm talking about javascript files. Look at the video you sent me, it's showing in the user scripts menu along with my script.

I already wrote what to do above. You never answered any of my questions, like who made your tooltip styles, where are you getting all this code from? And your issue doesn't have anything to do with other scripts or addons. But there's not much I can do if you can't show me the scripts and files in your chrome folder.

[aminomancer]

Anyway... you should open your userChrome.css file and look for tooltip in it. Find whatever styles you're using for tooltip in userChrome.css and copy them into your userChrome.ag.css.

Also, the CSS rule that's in that file is just an example. It doesn't actually do anything, since html|tooltip refers to nothing. So you want to replace that with a rule like

tooltip {
  /*...same styles you have for tooltips in userChrome.css...*/
}

[VitalSkib]

Hmm, you asked for a userChrome_agent_css and I send it, you probably just didn't open that archive. There are two files, one userChrome_ag_css.uc.js and the second userChrome.ag.css (just in case). Although on my video it's called userChrome_author_css instead (not agent).

[VitalSkib]

Obviously something has been broken recently and I don't have enough knowledge to find the reason or clearly explain it to you. However, if I install your userChromeAgentAuthorSheetLoader.uc.js (into a chrome/JS folder) and then copy the userChrome.ag.css script from resources folder to chrome folder, then everything works fine again and all the tooltips look the same and good again.. So, to me it looks like the userChrome_ag_css.uc.js script can't load the userChrome.ag.css file for some reason, although it used to work fine in Nightly and still works in Stable. Not sure if this is the right solution, but I'll leave it like that for now. Thanks for the help.

[aminomancer]

Ok the problem is the {Services} in the script. Open the script in text editor and replace it all with this

// ==UserScript==
// @name           userChrome_agent_css
// @namespace      userChrome_Agent_Sheet_CSS
// @version        0.0.6
// @description    Load userChrome.ag.css as agent sheet from resources folder using chrome: uri
// @backgroundmodule
// ==/UserScript==

let EXPORTED_SYMBOLS = [];
(function () {
    let sss = Cc['@mozilla.org/content/style-sheet-service;1'].getService(Ci.nsIStyleSheetService);

  // Try to load userChrome.ag.css as agent sheet
  // WARNING - agent sheets loaded like this affect each and every document you load including web sites. So be careful with your custom styles.

  try{
    sss.loadAndRegisterSheet(Services.io.newURI("chrome://userChrome/content/userChrome.ag.css"), sss.AGENT_SHEET);
  }catch(e){
    console.error(`Could not load userChrome.ag.css: ${e.name}`)
  }
})();

[VitalSkib]

Yes, it works too.. 😎👍 Thanks a lot.