Firefox support

[r-a-y]

It should be relatively easy to support Firefox now that Firefox supports WebExtensions, which is an API that is compatible with Chrome's model: https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Porting_a_Google_Chrome_extension

I tested Stylus briefly (using Chrome Store Foxified to install it in Firefox) and it works pretty good.

One minor thing I've found is the popup that appears when clicking on the Stylus toolbar button has scrollbars.

[schomery]

@narcolepticinsomniac, havent got any email from you.

[narcolepticinsomniac]

My bad. Should be sent now.

[ivysrono]

Would you support sync styles? Sync by browser like https://addons.mozilla.org/en-US/firefox/addon/stylishsync/ Sync by Dropbox/OneDrive like https://github.com/violentmonkey/violentmonkey

[tophf]

Syncing is a separate issue. Personally I'm not interested in working on it, but I agree it's a useful feature for many people and hence should be implemented so hopefully it'll happen.

[tophf]

@schomery, the "can't communicate" issue in Firefox upon installation can be apparently solved with a super-ugly hack in onInstalled listener:

if (FIREFOX) {
  chrome.runtime.reload();
}

Hopefully, this FF bug will be fixed eventually, but using this hack is not a big deal AFAICT.

[Keith94]

Can it support styling the Firefox UI (tabs, navigation bar, etc) just like classic Stylish or userChrome.css can?

[tophf]

@Keith94, no, WebExtensions API can't do that.

[narcolepticinsomniac]

I'm not a big fan of Firefox, but my take on it would be that some users may prefer the UI and/or features of Stylus, so they may prefer to use it as their main userstyles manager for basic website styles. DB backups being interchangeable between FF and Chrome is particularly convenient.

Stylus will continue working once Mozilla bans extensions like the legacy Stylish-for-Firefox. In the meantime, or even afterward if using a final ESR which I guess will be v56, I haven't seen any reason you can't use them alongside each other. Stylus as a regular userstyles manager, and the legacy Stylish for any UI styles. When installing regular styles, just dismiss the Stylish dialogue and install in Stylus.

It's all a matter of how much the Stylus UI and features appeal to you. AFAICT, the injection of styles is just as seamless. Another huge advantage IMO, is that Stylus correctly detects pushState URL changes, and can change CSS accordingly if specified. The legacy Stylish-for-FF cannot. Pretty sure this was unique to Stylish-for-Chrome, and therefore Stylus as well. Even other style managers in Chrome, or TamperMonkey stylesheet injections don't account for pushState, AFAIK.

All that said, there's still a few kinks to work out in FF. Tophf appears to have a hack for the "Could not communicate" bug after install, which is good news. The biggest issue currently is advanced style settings not working on installs from US.o. After that, if there's any way to speed up the population of the list of installed styles in the style manager, that'd be great. Currently, it's pretty slow compared to Chrome. Maybe that's just the way things are in FF. I suppose without Chrome as a comparison, the speed might seem more adequate/acceptable.

[schomery]

Can anyone verify if "advanced settings" for styles are working in FF?

Apparently Vivaldi is affected too. @narcolepticinsomniac and @TayliaM c6293a8e882c930642070530103c75c807752f17 should have fixed this

[narcolepticinsomniac]

Advanced settings appear to be working as expected now. Nicely done! How bout the "Could not communicate" hack?

[narcolepticinsomniac]

Obviously clicked "assign yourself" accidentally. We'd all be pretty screwed if we were counting on me.

[schomery]

Guys, I am not having this "Could not communicate" issue! If I install Stylus as a temporary add-on and install a new style for instance for an already opened google page, it successfully applies the style to this page and panel displays the installed style. Am I missing something here? I am using FF 53.0.2

[narcolepticinsomniac]

I saw that as well. I figured the "temporary addon" installation doesn't cause the bug. Installing from Mozilla does.

[narcolepticinsomniac]

I suppose it's also possible it was fixed by something else changed. IDK.

[schomery]

How do you even install from Mozilla when it is not yet signed?

[narcolepticinsomniac]

WaterFox.

[schomery]

so if I install the extension on WaterFox from AMO website I'll get this "Could not communicate" message inside panel?

[narcolepticinsomniac]

Yup. In the popup.

[schomery]

I just installed Waterfox 53.0.1 along with the Stylus version we have in AMO. I get this "Could not communicate" only on AMO page not the other tabs. This is expected behaviour as WebExtension has no access to AMO.

[narcolepticinsomniac]

I'm not sure that AMO is off-limits, but even if so, that'd be the wrong message. It'd be "Stylus doesn't work on pages like this."

[schomery]

So can you confirm Stylus is working fine on the other tabs without the need to restart?

[schomery]

I'm not sure that AMO is off-limits

@narcolepticinsomniac on Waterfox even after a restart, I still get "Could not communicate" on AMO

AMO is like chrome.google.com/webstore/ in Firefox. It is a protected domain and no WebExtension addon can inject script into it due to security concerns.

[narcolepticinsomniac]

Yup, confirmed. AMO does appear to be off limits. It's still the wrong message. Should be:

[narcolepticinsomniac]

@tophf Assuming we get the right warning to show up, we might wanna update that message to let users know that AMO is also off-limits.

[schomery]

@narcolepticinsomniac, possible fix

const URLS = {
  ownOrigin: chrome.runtime.getURL(''),

  optionsUI: [
    chrome.runtime.getURL('options/index.html'),
    'chrome://extensions/?options=' + chrome.runtime.id,
  ],

  configureCommands:
    OPERA ? 'opera://settings/configureCommands'
          : 'chrome://extensions/configureCommands',

  // CWS cannot be scripted in chromium, see ChromeExtensionsClient::IsScriptableURL
  // https://cs.chromium.org/chromium/src/chrome/common/extensions/chrome_extensions_client.cc
  chromeWebStore: FIREFOX ? 'https://addons.mozilla.org/' : 'https://chrome.google.com/webstore/',

  supported: new RegExp(
    '^(file|ftps?|http)://|' +
    `^https://${FIREFOX ? '(?!addons\\.mozilla\\.org)' : '(?!chrome\\.google\\.com/webstore)'}|` +
    '^' + chrome.runtime.getURL('')),
};

[narcolepticinsomniac]

possible fix

LGTM. It certainly seems to do the trick. Nice work!

[narcolepticinsomniac]

@schomery We gonna swap it out? Also, how bout this for the updated message:

[narcolepticinsomniac]

I tested in both browsers, and everything seems to work as expected. My only observation is that I don't see any option to restrict access to file URLS at all in FF. If there's not, maybe that'd change the approach. Maybe not. Like I said, it works fine.

[schomery]

I added support for both AMO and addons.opera.com

how bout this for the updated message

Each browser protects its own web store. So maybe something like

This restriction also applies to the browser extensions gallery (like Chrome Web Store or AMO) ...

[narcolepticinsomniac]

How bout:

Each browser also restricts access to its own extensions gallery (like Chrome Web Store or AMO).

I can switch it up and and remove completed translations if that's good.

[schomery]

Thanks! do we need to remove the completed translations?

[narcolepticinsomniac]

do we need to remove the completed translations?

For the popup message, I would think so. It's a fairly significant addition to the message. NBD to me personally, just figured they'd need an update. If you think they're close enough, that's fine by me.

[schomery]

That's right. Please remove the completed translations then.

[narcolepticinsomniac]

Message is edited, and completed translation entries should all be removed.

[narcolepticinsomniac]

@tophf I just tested in Nightly, and the issue with the style list speed on the manage page seems resolved. Pretty damn close to being on par with Chrome anyway.

@schomery I figured 1.0.8.1 contained those bug fixes, but it doesn't. Looks like Stylus has finally been approved by Mozilla, so we might wanna push those.

[BangDroid]

I see that Stylus is finally available for FF which is awesome. Not able to write and save a new style yet. Save button doesn't seem to work. Also tried importing styles from Chrome, but FF Stylus tab just hangs, Not sure if you guys know about this, or if it's a conflict with my install; vanilla FF up-to-date with NoScript & uBlock Origin.

[narcolepticinsomniac]

I saw another report like this, but I haven't been able to replicate. Everything works fine. Have you tried without NoScript enabled? I just tried to install NoScript in WaterFox to test, and after installing, it's now crashing the whole browser every time I launch it.

[narcolepticinsomniac]

Finally got Waterfox working with NoScript. and I already had UBo. I have no issues importing or saving. Double-checked in FF stable portable. Installed NoScript, then UBo, then Stylus. No issues there either.

You're not the only one reporting this though. I saw another comment here. I know NoScript is pretty powerful, but moz-extension is whitelisted anyway. Somebody who's experiencing this will need to figure out what's causing it, if it's ever gonna get fixed.

[narcolepticinsomniac]

@BangDroid You have FF set to "never remember history"? Another user with the same issues figured out that was what was causing it here. Don't know if there's much that we could do about this. Seems like a FF bug to me.

[schomery]

so we might wanna push those.

@narcolepticinsomniac I am preparing the FF version right now.

[BangDroid]

@narcolepticinsomniac I use FF with the same settings as private mode - but not an actual 'private window'. Changing FF to remember history fixed the issue with Stylus; I can write and import. I've imported all my styles, and reverted back to my previous settings and Stylus was broken again. So it seems Stylus with anything like private mode is an issue.

Other observations, I opened a Private Window to see if anything differed. The popup is non-functional - none of the buttons work and where it would normally say the URL was blank.

[schomery]

@BangDroid Firefox's storage is pretty messed up at the moment. Chrome provides isolated storage for extensions so even in the private mode, extensions still can read/write to the window.localStorage. In Firefox though they simply can't! and hence Stylus is not able to store its internal preferences. I don't see any workaround to this issue.

[BangDroid]

@schomery Ok. I have Stylus working now, I had to de-select "never remember history" and use custom setting for history. I de-selected "Remember my browsing and download history" and Stylus is still working fine even after restart.

[strel]

I found this happening for accented characters on Stylish for Firefox only on that panel message "Stylus doesn't work on pages like this": @schomery When you update spanish locale, please update all strings to get latests adjusments (unrelated to this).

[schomery]

@strel es locale is updated to the latest; 19754a5a900c9564c47d574ba9957f629e76ed5b

[stonecrusher]

Same goes with german locale. Umlauts "ä ö ü Ä Ö Ü" and sharp s "ß". And it would be cool if the button resizes according to the label length (I think it is "Verwalten").

[schomery]

it seems that the localized strings written to moz-extension://812e069f-0f48-1c40-989e-52f1c0055a5f/popup.css have encoding issue. Can somebody opens a bug in bugzilla?

[tophf]

Added a workaround for the FF bug with CSS messages in 2687d1e1671eadb858259cdc81b04d7b50ec3e9a

[tophf]

@schomery, now that FF is supported, can we close this issue? I think new problems should be submitted as new issues. Also, it is possible to add a new version on AMO before it gets their review under the "Versions" at the bottom of the addon page?

[r-a-y]

I would say close it. Stylus works well on Firefox.