Upcoming changes for themes

Firefox

Theming capabilities on addons.mozilla.org (AMO) will undergo significant changes in the coming weeks. We will be switching to a new theme technology that will give designers more flexibility to create their themes. It includes support for multiple background images, and styling of toolbars and tabs. We will migrate all existing themes to this new format, and their users should not notice any changes.

As part of this upgrade, we need to remove the theme preview feature on AMO. This feature allowed you to hover over the theme image and see it applied on your browser toolbar. It doesn’t work very reliably because image sizes and network speed can make it slow and unpredictable.

Given that the new themes are potentially more complex, the user experience is likely to worsen. Thus, we decided to drop this in favor of a simpler install and uninstall experience (which is also coming soon). The preview feature will be disabled starting today.

It’s only a matter of weeks before we release the new theme format on AMO. Keep following this blog for that announcement.

The post Upcoming changes for themes appeared first on Mozilla Add-ons Blog.

Extensions in Firefox 62

Firefox

Last week Firefox 62 moved into the Beta channel. This version has fewer additions and changes to the WebExtensions API than the last several releases. Part of that is due to the maturing nature of the API as we get farther away from the WebExtension API cutover back in release 57, now over seven months ago. Part of it was a focus on cleaning up some internal features — code changes that increase the maintainability of Firefox but are not visible to external developers. And, let’s be honest, part of it is the arrival of summer in the Northern hemisphere, resulting in happy people taking time to enjoy life outside of browser development.

User Interface Improvements

Extensions with a toolbar button (browser action) can now be managed directly from the context menu of the button.  This is very similar to the behavior with page actions – simply right click on the toolbar button for an extension and select Manage Extension from the context menu.  This will take you to the extension’s page in about:addons.

Manage Extension Context Menu

You can now manage hidden tabs, introduced in Firefox 61, via a down-arrow that is added to the end of the tab strip. When clicked, this icon will show all of your tabs, hidden and visible.  Firefox 62 introduces a new way get to that same menu via the History item on the menu bar. If you have hidden tabs and select the History menu, it will display a submenu item called “Hidden Tabs.”  Selecting that will take you to the normal hidden tabs menu panel.

Hidden Tabs Menu

API Improvements

A few enhancements to the WebExtensions API are now available in Firefox 62, including:

Theme Improvements

A couple of changes to the WebExtensions theme API landed in this release:

Tab Background Separator

Bug Fixes

A few noticeable bug fixes landed in Firefox release 62, including:

Thank You

A total of 48 features and improvements landed as part of Firefox 62. As always, a sincere thank you to every contributor for this release, especially our community volunteers including Tim Nguyen, Jörg Knobloch, Oriol Brufau, and Tomislav Jovanovic. It is only through the combined efforts of Mozilla and our amazing community that we can ensure continued access to the open web. If you are interested in contributing to the WebExtensions ecosystem, please take a look at our wiki.

 

The post Extensions in Firefox 62 appeared first on Mozilla Add-ons Blog.

Extensions in Firefox 60

Firefox

Many people read this blog because they’ve written extensions for Firefox in the past. Others, though, know some HTML, CSS, and JavaScript and have been thinking about writing their first extension. Either way, now is the perfect time to jump into the WebExtensions ecosystem.

That’s because we’re having a contest! Develop an extension for Firefox and enter it into the Firefox Quantum Extensions Challenge by April 15, 2018. Your extension could win you a brand-new Apple iPad Pro or a $250 gift card to Amazon.

And if you want to make your extension even better, consider using some of the new WebExtensions API discussed below. These new and improved API are available in Firefox 60, recently released to the Beta Channel.

A Profusion of Theme Properties

Since “Best Dynamic Theme” is one of the award categories for the Firefox Quantum Extension Challenge, let’s start with improvements to Themes. Release 60 adds a pile of new items to the list of elements that can be themed, doubling the number of individual components.  These include:

  • tab_line – Line color of the selected tab.
  • tab_selected – Background color of the selected tab.
  • popup – The background color of popups (such as the arrow panels).
  • popup_border – The border color of popups.
  • popup_text – The text color of popups.
  • tab_loading – The color of the tab loading indicator and the tab loading burst.
  • icons – The color of toolbar icons.
  • icons_attention – The color of toolbar icons in attention state such as the starred bookmark icon or finished download icon.
  • frame_inactive – The same as “accentcolor”, but only applied to inactive windows, provided for Chrome compatibility.
  • button_background_active – The color of the background of pressed toolbar buttons.
  • button_background_hover – The color of the background of toolbar buttons on hover.
  • toolbar_field_separator – The color of separators inside the URL bar (also available in Firefox 59; note that in Firefox 58 it was implemented under toolbar_vertical_separator)
  • toolbar_vertical_separator – The color of the separator next to the application menu icon (also available in Firefox 59; note that in Firefox 58 it corresponds to the color of separators inside the URL bar).

Also new for Firefox 60, the headerURL property is no longer mandatory, removing a somewhat arbitrary condition that made themes a bit clunky in the past.

Remember, the contest awards a prize for the best Dynamic Theme, so use the theme API to control and change the various UI elements in creative ways. Want an awesome tutorial that talks about Dynamic Themes? Check out the video below.

More Tab Features

Consistent with each release since Quantum 57, tabs remain a focus of WebExtension growth and improvement. Several bigger features will land in release 61 (expert Bugzilla miners are likely aware of them already), but Firefox 60 still offers a number of important items:

Improving Debugging and Development

Several new additions landed that make the debugging and development of extensions easier, including:

Proxy Improvements

The proxy API is quickly maturing, and Firefox 60 adds more functionality by adding the asynchronous proxy.onRequest API.  This API is ideal for extensions looking to deal with proxy requests in a background script.  Details are still being documented on MDN at the time of this writing but should be available soon.

Network Extensions Get DNS

Extensions now have access to Firefox’s DNS service to resolve hostnames. The new browser.dns() API takes a hostname string (with optional parameters) and resolves it to a DNS record for that hostname. To use this new API, your extension must declare the “dns” permission.

Dynamic Keyboard Shortcuts

Two new API were added to the Commands namespace that allow extensions to change their keyboard shortcuts at runtime. The first, commands.update, allows an extension to change the shortcut key and/or description associated with a command, while the second, commands.reset, reverts a command back to the keyboard shortcut and description originally specified in the manifest file.

Keeping Users Informed

In keeping with our mission to ensure that users are always informed and in control of what extensions are doing, a few new messages have been added to the browser interface:

Enhancing All the Action

The browserAction, pageAction, and sidebarAction are three of the most commonly used WebExtension features, and all three get some improvement in Firefox 60:

Other Improvements

The items mentioned above highlight some of the bigger and/or more visible changes that appear in Firefox 60. As always, though, many other minor or less visible improvements to WebExtensions also landed, including:

Thank You

A total of 63 features or improvements were landed for WebExtensions as part of Firefox 60 Beta. Thank you to our many contributors for this release, especially our community volunteers including: Tim Nguyen, Oriol Brufau, Richard Marti, Prathiksha Guruprasad, Vinicius Costa e Silva, Vivek Dhingra, Zhengyi Lian, Connor Masini, DW-dev, Bogdan Podzerca, and Dylan Stokes. As always, we sincerely appreciate you helping ensure that individuals have the ability to shape the Internet and their own experiences on it. If you are interested in contributing to the WebExtensions ecosystem, please take a look at our wiki.

This post is going up a bit later than normal and there are already several additions and changes to the WebExtensions API in progress for Firefox 61, so continue watching this space for more information. In the meantime, please continue to send us your feedback.

Correction
An earlier version of this article incorrectly stated that the theme properties popup_highlight and popup_highlight_text were available in Firefox 60, and that popup and popup_text could be used to style the URL and search bar autocomplete panels. All four of those things will actually appear in Firefox 61 (which is available in the Firefox Nightly channel right now).

The post Extensions in Firefox 60 appeared first on Mozilla Add-ons Blog.

Theme API Update

This article is written by Michael de Boer, Mozilla Engineering Manager working on the Firefox Frontend team. Mike has been actively involved in themes for a long time and is excited to share the improvements coming to the WebExtensions Theme API.

Last spring we announced our plans to improve themes in Firefox and today I’d like to share our progress and what you can expect in the next few releases!

We started off with laying the groundwork to get a new type of Theme supported; a new ‘theme’ WebExtension namespace was created and we made the Addon Manager aware of WebExtension Themes.

Our first milestone was to completely support the LightWeight Theme (LWT) features, because they’re so simple. This way we had our first new-style themes that are able to change the background image, background color and foreground text color working very quickly. We continued to implement more properties on top of this solid base and are moving toward Chrome compatibility at a good pace.

If you’ve created an extension before, writing your new Theme will be a walk in the park; you can use about:debugging and an extensive toolbox to load up and inspect your manifest-based theme or WebExtension that uses the ‘theme’ JavaScript API and has obtained the ‘theme’ permission.

What you can use today

Since Firefox 55, extension developers have been able to create extensions that can request permission to change the theme that’s currently active and use a number of JavaScript APIs provided by the `browser.theme` namespace.

We fondly call them ‘dynamic themes’, because you can mix and match WebExtension APIs to create wholly unique browser experiences that may reactively update parts of the browser theme.

In Firefox Quantum 57 you can use the following methods:

  • theme.update([windowId]), with which you can update the browser’s’ theme and optionally do that only for a specific window.
  • theme.reset([windowId]), which removes any theme updates made in a call to `theme.update()`. The optional windowId argument allows you to reset a specific window.

And in Firefox 58 you can use these:

As you might have noticed, the theme.update() method is where the magic happens. But it only does something pretty when you feed it a bag of properties that you want it to change.

These properties are defined in the schema and the current set is:

  • images
    • additional_backgrounds: This is a list (JavaScript Array) of image URLs that will be used as the background of a browser window. Each image will be tiled relative to its predecessor.
    • headerURL: Some of you might recognise this property from LWTs; it may be used to set the topmost background image of a browser window.
    • theme_frame: Alias for the ‘headerURL’ property, which is there for compatibility with Chrome themes.
  • colors
    • accentcolor: Use this property to change the background color of a browser window. Usually, this will be set to look pretty next to the ‘headerURL’ you provide. This is also a property that comes from LWTs.
    • tab_background_text: Alias for the ‘textcolor’ property, providing compatibility with Chrome Themes. (Since Firefox 59.)
    • bookmark_text: Alias for the ‘toolbartext’ property, providing compatibility with Chrome themes. (Since Firefox 58.)
    • frame: Alias for the ‘accentcolor’ property, providing compatibility with Chrome themes.
    • tab_text: Alias for the ‘textcolor’ property, providing compatibility with Chrome themes.
    • textcolor: Use this property to change the foreground color of a browser window and is used for the tab titles, for example. This is also a property the comes from LWTs.
    • toolbar: Change the background color of browser toolbars using this property. This property is also supported by Chrome themes.
    • toolbar_text: And this property can be used to change the foreground color inside browser toolbars, like button captions.
    • toolbar_field: Use this property to change the background color of the Awesomebar. This property is also supported by Chrome themes.
    • toolbar_field_text: Use this property to change the foreground color of the Awesomebar, thus the text you type in it. This property is also supported by Chrome themes.
    • toolbar_field_border: Use this property to change the color of border of textboxes other than the Awesomebar inside toolbars. (Since Firefox 59.)
    • toolbar_top_separator: Use this property to change the color of the top border of a toolbar that visually separates it from other toolbars above it. (Since Firefox 58.)
    • toolbar_bottom_separator: Use this property to change the color of the bottom border of a toolbar, that visually separates it from other toolbars below it. (Since Firefox 58.)
    • toolbar_vertical_separator: The color of the separator next to the application menu icon. (Since Firefox 58.)
    • toolbar_field_separator: The color of separators inside the URL bar.
  • properties
    • additional_backgrounds_alignment: Paired with the ‘additional_backgrounds’ property, you can specify the preferred position for each of the images you specified, in a JavaScript Array.
    • additional_backgrounds_tiling: Paired with the ‘addition_backgrounds’ property, you can specify the preferred tiling mode for each of the images you specified, in a JavaScript Array.

You can find a fantastic primer on browser themes and plenty of examples on MDN and https://github.com/mdn/webextensions-examples/tree/master/themes.

I would like to highlight the VivaldiFox extension in particular, created by Tim Nguyen; he not only worked on this extension but also stepped up to implement some of the missing properties that he needed! Also read his excellent Mozilla Hacks article.

Do you want a more playful introduction to all this tech talk and wish you could fiddle with these properties interactively? Your wish may be granted by our very own John Gruen:

What you can use in the future

Static themes, which only contain a manifest and image resources, will be supported on addons.mozilla.org (AMO) early this year. These will replace LightWeight Themes in a backward and forward compatible way. Until that time comes you will be able to experiment locally using about:debugging and by submitting dynamic themes that use the JavaScript API as explained above.

At this moment of writing, we’ve implemented most of the properties that Chrome supports to theme the browser. Going beyond that, we’re looking to add support for about:home custom themes and possibly for other in-content pages as well.

A group of students from Michigan State University (MSU) will be working on adding the remainder of Chrome properties and more.

One of the most exciting things to come in the near future is the ‘Theme Experiments’ API: on the Nightly channel, you can write an extension that is able to style a part of the browser UI that we haven’t implemented yet, using CSS selectors to make up your properties for it. This way it’s possible to propose new manifest properties to be added to the current set and have them become a part of Firefox, so every theme author can use it and every user may enjoy it!

Our hope is that with this in place the Theming API will evolve continuously to adapt to your needs, because we know that a good API is never ‘done’.

Get involved

If you want to help us out – yes please! – the easiest thing to start with is file bug reports with the things you think are missing today, blocking this bug: https://bugzilla.mozilla.org/show_bug.cgi?id=themingapi.

Don’t worry about duplicate bug reports too much, we’re actively pruning the list and rather have too many than an incomplete API.

If you want to implement the next property or API method yourself, please join us on IRC in the #teamaddons channel or send a message to the dev-addons mailing list!

The post Theme API Update appeared first on Mozilla Add-ons Blog.

Become a Featured Themes Collection Curator

Firefox

The Featured Themes collection is a great place to start if you’re looking for nice lightweight themes to personalize your Firefox. From kittens to foxes, winter snowscapes to sunny beaches, it is a continually rotating collection of high-quality themes in a variety of colors, images, and moods.

Currently, volunteer theme reviewers are invited to help curate this collection, but we’d like to open it to more community participation. We invite theme creators with a keen eye for design to apply to become featured themes curators. Over a six-month period, volunteer curators will join a small group of theme reviewers and staff members to add 3 – 5 themes each week to the collection and to remove any themes that have been featured for longer than two weeks.

To learn more about becoming a featured themes curator and what it entails please take a look at the wiki. If you would like to apply to become a curator, please email cneiman [at] mozilla [dot] com with a link to your AMO profile, a brief statement about why you would make a strong curator, and a link to a collection of at least five themes that you feel are feature-worthy.