- [Narrator] Do your eyes ever have trouble adjusting
to bright lights while browsing the internet?
Does it bother you when the user experience
is not consistent across the entire platform?
Have you wondered if there's a better way?
- I was in your shoes once then I switched to Firefox.
- [Narrator] Firefox 61 includes a comprehensive dark
theme and gives developers the creative freedom
to theme all aspects of the browser.
That's why nine out of ten doctors recommend it.
- [Instructor] Mozilla is a global, not for profit
organization dedicated to improving the worldwide web.
They have an international community of developers
who contribute to open source software.
Mozilla's largest open source project, Firefox,
is one of the most popular web browsers globally.
Theme developers create themes using a manifest
dot J-son file and an associated Java script file.
Different browser properties can be set in either
the manifest or in the Java script file.
The Java script file is the brains beyond the theme.
Integration with Java script is what allows Firefox
themes to dynamically change throughout the day.
Once developers are satisfied with their themes,
they can submit them to the Mozilla add-ons website.
After they are uploaded to Firefox add-ons,
themes can be downloaded by one of
Firefox's millions of users.
One of the defining features that sets Firefox apart
from other browsers is it's customizability.
Firefox themes can be either dynamic or static.
Dynamic themes can change throughout the day
based on the time, location or even the weather outside.
Our team worked on adding a more fluid transition
when dynamic themes change.
Take the case where a theme changes
colors every few seconds.
Without a transition, this feels particularly
jarring and disruptive.
On the left, there's no transition on color change
while on the right the color change
feels cleaner and more fluid.
To add more consistency to theming, fine bars
now inherit the color scheme of the tool bar
and is no longer the default white
and gray text as seen underneath.
Before, theme developers did not have the ability
to theme the URL auto complete pop-ups.
They were stuck as the default, bland,
white background with black text.
Our team added several properties that changed that.
Developers now have the ability to enhance the user
experience by changing the background,
text and highlight colors of the URL auto completes.
As you can see, this theme changes the background
to a crisp orange and the text to a nice blue.
Another set of properties we added to Firefox themes
allows theme creators to customize
the sidebars of the browser.
Side bars include the bookmarks bar,
history bar and sync tab bar in addition
to any sidebar extension the user may have downloaded.
With the added properties,
users can customize the background color,
text color, border color and highlight
color of the sidebars.
These properties can be set to match other parts
of the theme or to any desired color to add
some variety to the theme.
Previously, themes were allowed to change the colors
of the tool bars but let the menu pop-ups
with the default, light background.
Allowing developers to theme the menu similarly
to the toolbars, allows for a more consistent experience
and prevents unnecessary eye strain when viewing
the browser in low light conditions.
As you can see, the customization of the pop-up menus
allows for a significantly more mersive experience.
The deep purple menus and pure white text really
compliments the tool bar colors.
A significant part of our project was improving
compatibility with Google chrome theme properties.
Improve support for chrome themes allows developers
to easily port their themes into Firefox.
One of the properties we added support for was
the frame and active property.
This allows users to set the frame color to something
different when the window is not selected.
The final part of our project involved
the native dark theme.
The current dark theme in Firefox 59 has a few
inconsistencies particularly with the auto
completes and the menus.
After our dark theme darkening and implementing
the additional properties into the native dark theme,
enabling the dark theme on Firefox 61,
you can see some immediate changes.
First, the auto completes are now themed.
As well as the menus, the new tab and content page
and some additional features which enhance
the user experience.
Although we were unable to showcase all the improvements
we've made, it is important to know that the features
we've added to the theming API will impact millions
of users in the near future and really
shows that Spartans will.
(light music)