themerdev/themer

Firefox theme

kinduff opened this issue Β· 21 comments

If anyone else interested, I can take over and submit a PR to provide a Firefox theme.

Firefox and Chrome extensions have almost the same APIs https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Browser_support_for_JavaScript_APIs

and here are the themes https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/theme

also this might help with the theme preview https://color.firefox.com/ much easier than chrome load unpack extension

not sure about Chrome but in Firefox you can make themes borderless (new tab and toolbars blend into each other. same with the sidebar) example https://addons.mozilla.org/en-US/firefox/addon/borderless-dark/

Example:
image

image

https://github.com/andreicristianpetcu/firefox_themes/blob/master/borderless_dark/manifest.json

https://github.com/mjswensen/themer/blob/fdb49f6282be0893c5f01e21bc9e798f7fcd3c58/cli/packages/themer-chrome/lib/index.js#L15-L52

Firefox supported properties:

  • bookmark_text
  • frame
  • ntp_background
  • ntp_text
  • tab_background_text
  • tab_text
  • toolbar

Not supported:

  • tab_background_text_inactive (???)
  • tab_background_text_incognito (???)
  • tab_background_text_incognito_inactive (???)
  • omnibox_text (maps to toolbar_field_text)
  • omnibox_background (maps to toolbar_field)
  • tints (probably no alternative)

I'll edit this comment as I do my research. I did not code anything yet, I'm just trying to see what's missing here.

Are you still interested in implementing this kinduff ?

I am but seems like you're super informed on how to achieve this, so feel free to start! I'll chime in if required :) all yours my friend.

πŸ₯ πŸŽ‰ we have a PR #51

This should be going live shortly! πŸŽ‰

I spent a few hours this morning trying to figure out a smooth path for installing locally built extensions. Turns out it's a rather convoluted process that I don't think themer users will want to do (you have to set up an FF developer account, upload your theme package and wait for Mozilla to verify your theme, etc., etc.β€”or always run FF in temporary dev mode).

But there is the excellent Firefox Color addon that you pointed out in #54 , @andreicristianpetcu (thank you!!!) that just makes the whole process a lot easier.

So instead of generating a full theme, we just generate a URL to color.firefox.com (using a subset of the mappings @andreicristianpetcu had defined on the dev branch), at which point users can apply their theme with one click (again, credit for the excellent idea goes to @andreicristianpetcu πŸ™).

I renamed our package to themer-firefox-color for clarity and included it in the web UI. If we want to continue pursuing a full-fledged addon generator, let's do it over in @j4nr6n 's themer-firefox package. At which point I'd be totally happy to list it as an alternative Firefox theme in README.md if desired.

I wanted to generate a real ff theme to publish it. That is why I wanted to contribute to this. You are not a ff user and you don't understand ff users.

If I had to pick between ff color and ff theme I would pick ff theme. Nobody searches themes on ff color. Everybody searches on https://addons.mozilla.org/en-US/themes/

Chrome gets real themes while ff gets only color. If you want to make an official/community duo you sould make theme-official/color-community. The ff theme generator shares most of the code with chrome but it's not on the web UI.

The process for loading Chrome and Firefox themes is identical, how is it convoluted?

It's all my fault since I mentioned color as a nice to have. I'm sad of how unsupported are official ff themes yet again.

As the other ff user here, please tell me if I'm wrong @kinduff

or here's an idea: why not generate the theme just like chrome AND link the url of the theme in the readme. Same package.

This is the Chrome theme vs the Firefox Colors theme for Solarized dark :(

image

Now compare them to the Solarized dark that I made.

79725025-33711680-82f1-11ea-86c3-05fd36a7cd2d

I would say that maybe it's better not to include Firefox Color as offical at all since the themes are really crippled compared to Chrome. If it's included by default in any way it will give the wrong impression to theme authors that Firefox supports fewer theme APIs than Chrome when in fact it's the opposite.

Firefox Theme - default and in the web UI
Firefox Color - community (or at least not visible in the UI)

Sorry for changing my point of view here.

I wanted to generate a real ff theme to publish it.

I hear you. But that is not the primary use case for themer, which is for people to create personal themes for their tools.

The process for loading Chrome and Firefox themes is identical, how is it convoluted?

Chrome allows you to easily load unpacked (and unsigned) extensions indefinitelyβ€”Firefox only allows you to do this in a temporary way. Therefore, the only way to use a themer-generated theme is:

  • Set up a Mozilla account, and go through the process of verification and publication of the generated package. For people who don't have a Mozilla account, this process takes time and is asynchronous as you have to wait on Mozilla to approve your package, even if you plan to use it just for yourself.
  • Always load your generated theme package as a temporary add-on, every time you launch Firefox.

Let me know if I'm wrong and there are other options!

I love Firefox and used it for many years when it first came out. If there is a way to load and use generated packages that (1) don't rely on having an account with a third-party for code signing, and (2) don't require users to load extensions in temporary mode, I am more than happy to include the full-fledged extension version in both the CLI and the web UI.

Chrome gets real themes while ff gets only color
Chrome theme vs the Firefox Colors
compared to Chrome

This isn't a Chrome vs. Firefox battleβ€”let's just focus on making the best possible user experience for Firefox. Let's keep the discussion going on how we can make a fully fledged Firefox extension a seamless user experience for themer users. Will love to hear all ideas.

Let your users choose!
Generate the manifest (like in my initial implementation) and include in the readme a link to the color project and mention the differences between the two: color (no account but does not look as good as in Chrome) vs theme (looks really nice but you need a Firefox account). Both should be in the same generator.

BTW I had trouble opening both the .url file on both Fedora and Windows. Both OSes showed the "open with" dialog and the text editor was waaaay at the bottom. I tried to open the file directly from the extension, without unziping.

My two cents:

I see why Firefox Colors is convenient, and that's actually the main reason of why it exist. It's also very simple to implement, install, and share. Even for regular users. Chrome doesn't have something like this.

In the other hand, as a power user, and probably the most common user in Themer, I will always prefer a plugin, instead of Firefox Colors, because I like to own my system and I will probably modify further - just like I did with a couple of the exports from Themer.

Also:
image

Sounds like a good plan to just ship both then. Thanks for your input, @andreicristianpetcu and @kinduff !

Will finish up the plumbing on the dev branch and get it merged as soon as I get a chance.

do you want to implement this, or should I?

I'll take care of it. Just need to combine the FF Colors work with your implementation and deprecate the old package.

Also, if @j4nr6n sees this thread and would like to re-use the themer-firefox package, we'll do that, otherwise I'll release it under a different name.

Maybe we can fix the problem upstream also πŸ˜„ mozilla/FirefoxColor#923

Deploying now! πŸŽ‰

Now there is a single checkbox in the web UI, "Firefox", and users will get both the full-featured add-on package source, and the URL for Firefox Color.

Thanks @andreicristianpetcu and @kinduff for your work and input on this.

@mjswensen Awesome Matt, thanks a lot for your openness regarding this issue. And congrats @andreicristianpetcu, great work! See you in the next issue!

@mjswensen I've added you as a maintainer on themer-firefox if you want to release a 2.0 or something and take over the package. I'll re-publish mine if I ever need it but, I think this extension ended up being the better solution.

Thanks a ton, @j4nr6n ! It actually turned out to be simpler to just keep the two packages separate in the end, so we'll leave everything as is for nowβ€”but I really appreciate you being willing to tag-team on the package.