Firefox breaking many add-ons soon

[cellio]

I found out today, via a notice provided by one of my add-ons (Stylish), that the next version of Firefox (57) is going to break most add-ons, which they are now designating "legacy". Firefox, like Chrome, automatically updates itself (I'm not sure that can be turned off any more), and these changes are coming "in November". I found this blog post from Mozilla from August, but I never received any sort of notification as a user and I don't make a habit of seeking out blog posts from vendors of software I use.

Why the hell didn't I get some sort of notification from Firefox? Is this news to you, too?

So now, the hunt for replacements commences. Gee thanks, guys.

Here's what I've found so far, untested unless otherwise noted:

• Stylish replacement (notice pushed by Stylish, apparently): Stylus. Listed as beta. I don't know whether styles will just work (after being manually imported, it appears) or if changes will be needed. ETA: I needed to rework one style, which had several blocks applying to different sets of (related) sites. I had to break that up. The style I was using to make tooltips bigger doesn't work (not supported by Mozilla's new API), but I found a workaround. The day after I got all this migrated to Stylus, I got a Stylish update -- but it couldn't read my existing scripts either, so I would have had to migrate to it in exactly the same way I'd just migrated to Stylus. (The UI was even the same.) So I punted that; I've already got Stylus working.

• Greasemonkey: Google led me to ViolentMonkey. Ditto about not knowing if things just work or require adjustments. ETA: ViolentMonkey is slow and times out about a third of the time for me, but TamperMonkey (which I already know from Chrome) exists and works fine. I had to manually add each of my scripts (to either), but I didn't need to modify them.

• NoScript: it looks like they're migrating, but I don't know if I'll have to do anything. ETA:* Seems to be broken in 57; supposedly they're working on it.

• Session Manager: is this built into Firefox now? It's very important that when I restart Firefox, I get the tabs and windows I had before. Can anybody who doesn't use an add-on for that confirm whether that works out of the box now?

• AdBlock Plus: this is my one extension not listed as legacy, so I assume it will keep working.

• Classic Theme Restorer: um, I found this github repository; haven't waded too far into the readme yet. ETA: this page explains how to move the tabs below the URL/extensions bar where they belong. The other look&feel stuff it did isn't as critical. (One could make a good argument that the URL bar belongs below the tabs, but all the other stuff the browser puts in that horizontal slice is more global, and having those reversed confuses me.)

Comments

is there a CSS person in the house?

[cellio]

In Stylish I had this global style to make tooltips more readable (mainly bigger), which I downloaded, err, somewhere, way back when. Most of my Stylish styles seem to work fine in Stylus, the will-still-work-with-Firefox replacement for Stylish. But one of them doesn't. Stylus says the style is active, but it's not taking effect. I've tried commenting out everything except the size setting and then changing that around; no effect. So that makes me think the problem is in the set of stuff to match on, which is the part of this I know least about. (That list of classes and IDs came with the style. I don't know from tooltips and CSS.)

If anybody reading this can spot the problem in the following CSS and suggest a fix, I'd be grateful!

#btTooltip,
#un-toolbar-tooltip,
#tooltip,
.tooltip,
#aHTMLTooltip,
#urlTooltip,
tooltip
{
  font-size: 16px !important; 
  background-color: #FFFFE0 !important;
  color: #000000 !important;
  -moz-appearance: none !important;
  border-color: #000000 !important ;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-attachment: scroll !important;
}

Re: is there a CSS person in the house?

[metahacker]

Hmm.

So the selectors (the stuff before the {}s) are a mix of IDs (#whatever) and classes (.whatever), plus an entity (tooltip). The IDs and classes try to match what various sites call their tooltips, plus the html entity tooltip, which probably isn't all you want. Another easy way to get tooltips in HTML is to use the "title" attribute:

<a href="the link" title="this is the tooltip">the display text</a>

This question talks about it:
https://stackoverflow.com/questions/2011142/how-to-change-the-style-of-title-attribute-inside-the-anchor-tag

Sadly, you can't use CSS to fix such tooltips; they're rendered by the browser, which makes them system dependent. But the top answer talks about copying the contents of the tooltip into a CSS-created tooltip (CSS now lets you add content directly--very odd). You see both tooltips, but for me if I hover, then move onto the "new" tooltip, the second tooltip doesn't obscure the first.

The following snippet should make there be a tooltip for any element ("*") that has a title attribute ("[title]") when you hover over it (":hover"), by putting a new element after it (":after"). The contents of this new tooltip are sourced from the title attribute of the existing tooltip (..."content: attr(title)"). The rest is positioning and style to make it look okay; feel free to tinker with color, background, padding, etc. to make it how you like it.

*[title]:hover:after {
  content: attr(title);
  position: absolute;

  padding: 0.5em;
  left: 0;
  top: 100%;
  background: white;
  color: black;
  border: 1px solid black;
  white-space: nowrap;
}

edit: Since this is a new element, you don't need the !important part; you're not overruling the webpage's particulars (and !important doesn't always win, either...)

Re: is there a CSS person in the house?

[cellio]

Thanks. adding tooltips for titles sounds like a win. I suspect I wasn't clear enough about one thing: that CSS I showed works in Stylish and does not work in Stylus. This made me wonder if, as with browsers, there's more and less pedantic and the thing that works in Stylish isn't actually *correct* but is liberally interpreted by the add-on, or something like that.

(Thanks also for telling me what the category name is for those classes and IDs that say what the CSS applies to.)

Re: is there a CSS person in the house?

[metahacker]

The CSS inside the {}s all seems fine (other than some vendor-specific prefixes that may not be necessary any more), which is why I ended up focusing on the selectors.

Looking through the Stylish source, I think "tooltip" (without a class or id) is a Stylish invention. It's not a standard HTML tag/entity, so I suspect Stylish is doing some preprocessing similar to the above--or Firefox gave them access to some underlying presentation (XUL?) that can't be expressed in CSS.

Re: is there a CSS person in the house?

[cellio]

Ah, apparently the problem is that Stylus can't modify the browser itself, only page content. (Response to my support request.) I did see that in the Stylus doc but didn't make the connection that these tooltips, which I think of as coming from the page content (so should be ok), are actually internal browser elements that cannot be modified.

The hunt is on for some other way to solve my tooltip problem in FF 57. "Don't update" isn't a long-term solution, after all, though "switch to a different browser" could be. I need to evaluate my browsing ecosystem both at home and at work...

Thanks for the help!

Update: Firefox has a hook for user-supplied CSS (link from the answer to my Super User question). That works in 56. Mozilla hasn't added any warnings of doom to that page, so it seems plausible that it will continue to work in 57.