The companion add-on is also built using Webpack and acts as an expansion cartridge for the theme editor on the website. The browser location represents the current theme, while back & forward buttons double as undo & redo. I’ve also been able to work this into the location bar with the HTML5 History API and Redux middleware. When the page loads and sees the ?theme URL, it unpacks the data and loads it into editor’s Redux store. You can even link to themes from a blog post, if you wanted to! This approach enables folks to simply copy & paste a URL to share a theme they’ve made. Rather than come up with a bespoke scheme, I use this json-url module to compress JSON and encode it as Base64, which makes for a long URL but not unreasonably so. Though we plan to move to a Mozilla-owned production server on launch, I’ve been deploying builds to GitHub Pages during development.Īnother interesting feature of the website is that we encode themes as a parameter in the URL. When you save a theme, it ends up in your browser’s localStorage. The website is just a static page - there’s no real server-side application. And, by way of some simple Redux middleware, I was able to easily add a hook to push every theme changes into the browser via the add-on. Adding undo & redo buttons is easy, thanks to redux-undo. I’m also a terrible visual designer with weak CSS-fu - but using Webpack to bundle assets from per-component directories makes it easier for teammates to step in where I fall short.įurther under the hood, Redux offers a clean way to manage theme data and UI state. Personally, I really like working with stateless functional components - they’re kind of what tipped me over into becoming a React convert a few years ago. React offers a solid foundation for composing the editor.
The site is built using Webpack, React, and Redux. The add-on grants special powers to the website, applying changes from the theme in the editor onto the browser itself. The website offers a theme editor with a paper doll preview - you can click on parts of a simulated browser interface and dress it up however you like. To explore these new APIs, Firefox Themer consists of a website and a companion add-on for Firefox. You could even build themes that use data from external HTTP services - e.g. VivaldiFox reflects the sites you’re visiting. These APIs take inspiration from static themes in Google Chrome, building from there to enable the creation of dynamic themes.įor example, Quantum Lights changes based on the time of day. New theme APIs are funĪt the core of this experiment are new theme APIs for add-ons shipping with Firefox. TL DR: Last year, I started work on a new Test Pilot experiment playing with themes in Firefox. Fun with Themes in Firefox - It's all spinning wheels & self-doubt until the first pot of coffee.
0 kommentar(er)
