Add support for "theme_experiment" addons

[trickypr]

Background
Firefox has a process known as "Experiments" that are used to create new webextention apis. Depending on the popularity and quality of these APIs, they get uplifted to stable Firefox. For example, the top-sites api started as an experiment and has been uplifted into Firefox.

Is your feature request related to a problem? Please describe.
Currently, installing userchrome customizations is a finicky process that involves messing around in the Firefox.

Describe the solution you'd like
Firefox has an experimental theming option available to webextentions called theme_experiment, which allows the loading of custom css files as part of a theme. It would be more convenient for users to install a theme than to place files in their file system.

Describe alternatives you've considered
#69 tries to solve the same issue, however, its solution would require the installation of third party software, increasing the barrier to entry.

Additional context
Browser support is a bit iffy for this type of addon. Waterfox works flawlessly, so long as you move out of their compact UI mode. Firefox developer edition (and, in theory, firefox nightly) work so long as you disable xpinstall.signatures.required and enable extensions.experiments.enabled. Firefox Beta and Stable do not work at all.

Currently, the only addon that supports this form of theme is my fork of cascade I used for testing this. If you want to test it out, use one of the browsers above and install the XPI from this release.

For more information about packaging themes, see cascadefox/cascade#23

[unseen-ninja]

As mentioned on the Cascade Repo, as well as on Discord: I'm highly interested in this. Seeing this in mainline Firefox could open up the world of userChrome files to a whole new audience. I'll be playing around with this and spread the word whereever I can.

Btw: Fixed your broken link to your forked Repo of Cascade. ;)

[trickypr]

Oop, thanks

[BeyondMagic]

Will give a look as well when I have time. Hope it's not too complicated.

[trickypr]

It should hopefully just be serving one (maybe two for light theme and dark theme) .xpi files and install instructions. I would recommend leaving packaging up to the theme maintainers.

[BeyondMagic]

We're on the same page, I was thinking more about the files themselves, we'll have to offer some guidance on how to make them.

[trickypr]

I wrote a script to automate it, because it is very painful to do manually, and mdn has some (although not great) docs about how to use the manifest key.

https://github.com/trickypr/xpi-creator

[BeyondMagic]

Pretty cool and for being written on Node it is cross-platform :)

[trickypr]

It uses /tmp, so not that much. I will go fix that and a few other bugs tomorrow.

[Neikon]

I didn't know about this Firefox feature. It looks like an improved form of the official colour themes. Hopefully they will implement it, and it will be the explosion of Firefox customisation for everyone. It also seems like a good alternative to distributing the current CSS themes packaged as an extension. Too bad it's restricted to the developer and nightly version of Firefox though.

[trickypr]

Here are my thoughts on the implementation. We can add a key that each theme can specify to allow them to download a variant from a url. To get it to download, it should be as simple as redirecting to that page and Firefox will handle the rest.

{
    "title": "Cascade",
    ....
    "tags": [ "andreasgrafen", "one-line", "proton", "light", "dark", "v91" ],
    "experiment_xpi": {
          "Light": "https://github.com/andreasgrafen/cascade/releases/latest/download/light.xpi",
          "Dark": "https://github.com/andreasgrafen/cascade/releases/latest/download/dark.xpi",
    }
  },

This allows theme maintainers to make multiple variants, for example, if they wanted a compact variant and an expanded variant or a dark variant and light variant. If done correctly, it will also mean the theme maintainers do not have to submit a pull request every time they update.

[unseen-ninja]

I like the idea, and it seems to be working rather smoothly in browsers that support this. I don't mind adding this functionality to my projects, tho that means my lazy ass has to actively make releases instead of just pushing changes to the repo. ,__,

Since this is highly experimental adding the tag should def. be optional and as of rn prob. not be featured in the main UI as it might be confusing for users. That said; I'd opt for a hidden URL flag – like ?experimental – to also offer XPI download links. To guide users towards this potential feature we could have a little toast-notification that links to this issue and also the experimental version of the theme store?

[trickypr]

To get around theme maintainers being lazy, we could provide a Github action template that builds and releases their theme, reducing the load on them.

However, I don't think this api is experimental, as it has been around for long enough to have matured, and at least 2 other dev discovered this before me. The largest issue is probably that it locks a color scheme to a theme. I would recommend instead, providing different instructions for each browser, to reduce the complexity of installing a theme. So, if a user selected Firefox stable or beta, they would go back to old style-sheets, Dev and Nightly would be provided instructions for their browser and waterfox would just be given the installer.

I have made a wireframe to showcase what kind of ux I am thinking of, so you can play around and give feedback.

[unseen-ninja]

hmm. Yeah, that could be a possibility. This has one drawback tho, as it is adding another click for the user. This isn't too much of an issue, but maybe there is a way to avoid this somehow?

[trickypr]

I have created a pull request with an implementation. The code is a bit (read very) messy, the documentation surrounding it isn't complete, and it is probably a bit broken, but its a starting point.

[black7375]

Is it available with userContent.css too?
If it's a typical add-on, use the content_scripts.

However, As far as known that I do not work on some sites:

• https://addons.mozilla.org/en-US/firefox/
• https://accounts.firefox.com/

[GunGunGun]

Is it available with userContent.css too? If it's a typical add-on, use the content_scripts.

However, As far as known that I do not work on some sites:

* https://addons.mozilla.org/en-US/firefox/

* https://accounts.firefox.com/

It has always been possible with userContent, see Stylus addon, it allows us to apply userContent without restarting, because userContent = webpage.

[Ayanbasuli]

Still learning but looking like a wow