Rethinking themes in Firefox

A couple of weeks ago Mike de Boer and I started work on a project to rethink themes in Firefox. At present day, Firefox offers two ways for users to theme their browser: XUL themes (also known as “complete themes”) and lightweight themes (also known as “themes”). We want to create something that gives more power than lightweight themes while also being easier to create and maintain than XUL themes.

Last week we published a survey asking theme authors and users what they like about themes and what they would change. To date, we have received over 250 detailed responses. We will be keeping the survey open and monitoring it for anybody that has not had a chance to reply yet. Here’s what we’ve learned:

Have you made a lightweight theme before?
21.8% yes

What do you like about lightweight themes?
A strong majority (70%) of lightweight theme authors said that they liked how lightweight themes were simple and easy to make. The next group, at 6%, said that they liked how lightweight themes always remain compatible after Firefox updates. 4% of users also liked that they were easy to install with no restart required. A couple people complained that they were too simple and there was too much spam in the themes section of the Add-ons website.

What do you feel was difficult to do or missing from lightweight themes?
A little less than (42%) half of responses would have liked to do more than just a couple of images with lightweight themes. They would like to apply background images to other parts of the browser, change icons, buttons, and the size-of and location of browser components. The next group of responses (10%) wanted more support for scaling, repetition, animation, and position of background images. Improved documentation (8%) and a lack of a development environment such as an in-browser editor followed (6%). The last two groups of responses wanted the ability for themes to change based on external factors (2%) and separate images for the tabs and tab toolbar (2%).

Have you made a XUL theme before?
23% yes

What do you like about XUL themes?
A strong majority of the respondents agreed firmly with 71.2% that XUL themes are awesome in allowing to touch and customize all the things. The second largest group of respondents seek out XUL themes because they offer more nuts and bolts to tinker with than lightweight themes at 11.5%, while the familiarity with the CSS styling language is the main reason to like them for 7.7% of the respondents. Two other notable groups are people who like dark themes, which are apparently only really available as XUL themes, and ones who feel that XUL themes are the easiest thing to make on this planet, each at 3.9%.

What do you feel was difficult to do or missing from XUL themes?
The largest amount of responses (29.8%) said that it is a real pain to keep these themes up-to-date and working, with the current fast release cycle of Firefox and the fast pace of development. 28.1% of the respondents rightfully complained that they need to use exotic, undocumented technologies and unknown CSS selectors in order to create a working XUL theme. Whilst 15.8% claimed there is nothing wrong with XUL themes and we should keep it as-is, another 12.3% is sad about the lack of documentation or any kind of manual to get started. Packaging and delivery of XUL themes is not considered optimal by 10.5% of respondents and that ultimately very few of these themes can be configured after installation (3.5%).

Why do you install themes?
About half (47%) of the survey responses want to personalize Firefox. These people said that they want to make Firefox “their own” and have fun showing it off. They enjoy having full control over the user interface through XUL themes and like the ability to set arbitrary CSS. The next set of responses (16%) asked for a “dark” Firefox, making it easier on the eyes at night. These responses were generally focused on the toolbars and menus of the browser being dark. At 12% of responses was closer integration with the operating system followed closely by 11% of responses saying that they felt the default theme was boring and bland. The last category of responses that received multiple votes was to allow themes to undo recent changes to the user interface, as an attempt to keep things the same that they’ve been for the past months/years.

What capabilities would you like themes to have?
More than half (56%) of the survey responses want full control over the browser UI. They would like to move and hide items, change tab shapes, replace icons, context menus, scrollbars, and more. Following this large group, we had close to 5% of respondents who wanted to simply change basic colors and another group, also close to 5%, that wanted to make it easy for users to make simple tweaks to their browser or an installed theme through a built-in menu or tool. Native OS integration, such as using platform-specific icons and scrollbars, followed closely at 3%. Also at 3% of responses were requests from users who require larger icons and improved readability of the browser’s user interface for improved accessibility. Not far behind, and ironically next in the order of responses, were requests for a smaller browser UI (2%). These users generally want to maximize the amount of screen space that web pages can use. Both “dark themes” and “themes not breaking with future releases” got 2% of responses. In our last group of responses at or above 1% was themes that could change based on external factors (time of day, season, month, web color, or a very slow animation), restartless and easy to trial, ability to apply multiple themes to create a “mash-up”, and to lighten the tab bar.

What parts of Firefox are most important to you to be able to change the appearance of? Why?
Almost 20% of the respondents can not make a choice between the parts of Firefox and thus want to customize the app in its entirety. Following closely with 16% is the group of respondents that think the tabs area is the most important part for themes, while half that number choose toolbars, (toolbar)button icons and the area above the tabs, including the window decoration and window controls. Interestingly, the wish to be able to theme in-content pages is as strong as that of the Awesomebar and respective navigation controls: 6.8%. Changing the colors, palette and fonts used for the UI are the other most notable choices from the community of respondents at 6.4% and 4%, respectively.

Are there theme-related features from other browser or apps that you would like to see incorporated into Firefox?
An overwhelming majority of the respondents insist that we don’t need to change a thing and that other apps don’t offer grand alternatives at 36.5%, or simply can’t think of any. The Vivaldi browser came up in our preliminary research and also takes a prominent position as device of inspiration for theming features at 11.2%. A dark theme like other apps already offer in their package (5.9%), applying tints of color on SVG icons and background masks (2.9%) on UI elements – most notably the titlebar – and take Opera’s about:newtab theming capabilities (2.4%). A notable response from 2.9% of respondents was to introduce a live theme editor in Firefox with sharing capabilities, so that theme creators can take existing themes to tweak to their own liking and (re-)share with others.

The grouping of the results and more details can be found in our meeting notes. Our full archive of meeting notes is also publicly viewable.

Outreachy Internship

This summer, I with the help of Mozilla, will be mentoring someone as they work on fixing some of the papercuts in the Firefox desktop user interface.

We know there are problems with Firefox when it comes to things “just working right”. Some involve the smoothness of entering and exiting Reader Mode, while others involve the fit and finish of our “getting started” tours.

If you know JavaScript & CSS and are looking for a summer internship, you can be the person that I mentor.

This is a paid internship and will run from May 23rd to August 23rd, 2016. A $5,500 stipend will be provided as compensation for the internship.

This internship is open to under-represented groups in the free and open-source software community. These groups include all women (cis and trans), trans men, and genderqueer people internationally, as well as all Black/African American, Hispanic/Latin@, American Indian, Alaska Native, Native Hawaiian, and Pacific Islander people in the US.

Requirements

The ideal student will have the following background and availability:

• Available to work on the project about 40 hours per week. This will not be a good project to work on while taking part in another internship program at the same time.
• A strong CSS background. Do you feel comfortable answering how the CSS box model works, and the order that elements are painted to the screen?
• A strong JavaScript background. Have you used JavaScript Promises before? Do you know the difference between bubbling and capturing event listeners?
• Not afraid to work with some C++ if necessary. Fixing some of the bugs below may require working with some of the Windows-specific platform widget code, and this is almost entirely written in C++. It’s not that scary, but has different nuances than the JS/CSS work.
• A productive work environment. Students in this internship will be “working from home” and will need to provide their own working environment.

Finding your way around

You’d mostly be writing JS and CSS, though being comfortable with the other technologies we use will be helpful.

To get a feel for things, you can open up the Browser Toolbox and “inspect” the UI of the browser. From there you can use MXR (http://mxr.mozilla.org/) to go from searching for some text on a button you see in the user interface to finding the code that is executed when the button is clicked.

Set up an “artifact” build. This is the simplest build setup that we have for Firefox, and should take less than 10 minutes. Once you’re up and running, you can use this artifact build to make changes to the JS & CSS of the browser.

Getting Started

I’ve put together a list of bugs that will be the focus of this internship. People wanting to apply to this should pick a bug off of the following list and begin working on it.

http://mzl.la/1UT0xRs

Each bug on the list has a number of “points” that are assigned to them. The more points a bug is worth, the harder the bug may be to get fixed.

There’s currently nine bugs on the list, but I may add more in the future when these get fixed.

Here’s the link again to the bug list: http://mzl.la/1UT0xRs. Go ahead, click on it, look for a bug that excites you, and see how you can use the tools from the “Finding your way around” section to fix the bug.

Interested and have questions?

Please reach out to me. I’m available via IRC during the US Eastern timezone (+5 GMT) working hours on irc://irc.mozilla.org in the #fx-team channel by the name of `jaws`. You can also email me at `jaws [at] mozilla [dot] com`.

More information about the Outreachy program can be found on the Mozilla wiki page, as well as the Gnome wiki page (the originators of the Outreachy program).

We knew unicorns could bounce, but now they spin?!

One of the hidden features of Firefox 29 was a unicorn that bounced around the Firefox menu when it was emptied. The LA Times covered it in their list of five great features of Firefox 29.

Building on the fun, Firefox 32 (released today) will now spin the unicorn when you press the mouse down in the area that unicorn is bouncing.

The really cool thing about the unicorns movement, both bouncing and spinning, and coloring is that this is all completed using pure CSS. There is no Javascript triggering the animation, direction, or events.

The unicorn is shown when the menu’s :empty pseudo-class is true. The direction and speed of the movement is controlled via a CSS animation that moves the unicorn in the X- and Y-direction, with both moving at different speeds. On :hover, the image of the unicorn gets swapped from grayscale to colorful. Finally, :active triggers the spinning.

New in Firefox Nightly: Recommended and easy theme switching through Customize mode

We shipped the Australis project with Firefox 29, but the Firefox team hasn’t stopped working on making Firefox the easiest browser to personalize. Firefox allows easy customizing through the new Customize mode, and now in Firefox Nightly people will find a quick and easy to way to set the theme of the browser.

After entering Customize mode, a new menu is shown at the footer of the window. Clicking on this menu will show any installed themes as well as a list of five recommended themes.

These recommended themes were picked from the Add-ons for Firefox website by members of the Firefox User Experience team. All of the themes are licensed through Creative Commons. Some are CC-BY and others are CC-BY-SA.

Hovering over a theme in the menu will preview the appearance of the theme. Clicking on one of the themes will change the applied theme.

We haven’t figured out yet what the rotation will be for recommended themes. Any input on how often or how we should go about putting together the next list is greatly appreciated.

Full management of themes and add-ons is still available through the Add-ons Manager. Recommended themes that have not been applied will not show up in the Add-ons Manager. Once a recommended theme is applied, it will appear in the Add-ons Manager and can be uninstalled from there.

My contribution to today’s Firefox release

I haven’t written up one of these blog posts in a while. The previous one was in August 2012 for Firefox 15. Coincidentally, that post mentioned a subtle change to the site identity area of the web browser.

In today’s release of Firefox, there is another subtle change to the site identity area of the browser. Pages that are a part of Firefox itself, whether it be the built-in home page (about:home), our troubleshooting page (about:support), or others now sport a special Firefox branding within the location bar. The goal of this branding is to increase awareness and trust with these pages.

Clicking on the Firefox name or the two-tone Firefox logo next to the name will show a popup notification that explains that this is a secure Firefox page.

These changes were previously announced when I introduced them to the Nightly channel of Firefox this past July.