Darkish Theme Darkening: Better Theming designed for Firefox Quantum

Dylan Stokes | July 3, 2018 | WEB DESIGN AGENCY MIAMI | No Comments

The Team

Project Dark Theme Darkening has been part of The state of michigan State University’ s Computer Technology capstone experience . Twenty-four categories of five students were each designated an industry sponsor based on preference plus skill set. We had the privilege associated with working with Mozilla on Firefox Quantum’ s Theming API. Our task increases an user’ s capability to customize the appearance of the Firefox internet browser.

(left to right)
Vivek Dhingra: MSU Student Contributor
Zhengyi Lian: MSU Student Contributor
Connor Masani: MSU Student Factor
Dylan Stokes : MSU Student Contributor
Bogdan Pozderca : MSU Student Contributor

Jared Wein : Mozilla Staff
Mike Conley : Mozilla Staff
Tim Nguyen : You are not selected Contributor

The particular Project

Our objective was to expand upon the present “ lightweight” Theming API within Quantum to allow for more areas of personalization. Themes had the ability to alter the look of the default toolbars, but failed to have the ability to style menus, or personalize auto-complete popups. Our team also labored on adding a more fluid transition whenever dynamic themes changed to allow for the smoother user experience.

Project Video

This particular video showcases a majority of the enhancements we added to the Theming API and gives a good explanation of exactly what our project was about. Enjoy — and then read on for the rest of the details:

[embedded content]

Experience

Prior to this particular project, none of us had experience of Firefox development. After downloading the particular mozilla-central repository plus exploring through the 40+ million outlines of source, it was a bit challenging for all of us. Our mentors: Jared, Paul, Tim, and the Mozilla community upon IRC all helped us via squashing our first bug.

Through the project, we discovered to ask questions sooner rather than later. Being developers, we were stubborn and wanted to determine our issues ourselves but might have solved them a lot faster if we simply asked in the Mozilla IRC. Everybody on there is extremely helpful and helpful!

All code composed was in JavaScript and CSS. It had been neat to see that the UI associated with Firefox is made in much the same method as other web pages. We obtained a great introduction to Mercurial by the end of the project and utilized some sweet tools to help the development process such as searchfox. org for indexed searching of mozilla-central, and janitor for web-based growth.

Auto-complete Popups

We added the ability to personalize the URL auto-complete popups. Using this addition, we had to take in account the written text color of the ac-url and ac-action tips related to each result. For example , if the history of the auto-complete popup was darkish, the text color of the tips are usually set to a light color so they can be observed.

We did this particular by calculating the luminance and comparing it to some threshold. The lwthemetextcolor attribute is set in order to either dark or bright depending on this luminance threshold:

 ["--lwt-text-color", 
     lwtProperty: "textcolor",
     processColor(rgbaChannels, element)  "black";
     
]

The top image displays the auto-complete popup with the indigenous default theme while the bottom picture shows the auto-complete popup using the Dark theme enabled. Notice that the particular ac-action (“ Switch To Tab” ) textual content color and ac-url are changed to allow them to be more easily seen on the Darkish background.

Theme Qualities Added

We additional many new theme properties that designers like you can use to customize a lot of browser. These properties include:

icons – The color of alexa plugin icons.
icons_attention – The color associated with toolbar icons in attention condition such as the starred bookmark icon or even finished download icon.
frame_inactive – color of the accent color once the window is not in the foreground
tab_loading – The color of the tab launching indicator and the tab loading burst open.
tab_selected – The background color of the particular selected tab.
popup – The setting color of popups (such as the web link bar dropdown and the arrow panels).
popup_text – The text color of popups.
popup_border – The border colour of popups.
popup_highlight – The background colour of items highlighted using the keyboard within popups (such as the selected WEB ADDRESS bar dropdown item)
popup_highlight_text – The text color of items highlighted utilizing the keyboard inside popups.
toolbar_field_focus – The focused background color pertaining to fields in the toolbar, such as the LINK bar.
toolbar_field_text_focus – The color associated with text in focused fields within the toolbar, such as the URL bar.
toolbar_field_border_focus – The focused border colour for fields in the toolbar.
button_background_active – The color of the background from the pressed toolbar buttons.
button_background_hover – The color of the background of the alexa plugin buttons on hover.

The toolbar_field , and toolbar_field_border properties now apply at the “ Find” toolbar.
Additionally , these new properties right now apply to the native Darkish theme.

 colors: 
    accentcolor: 'black',
    textcolor: 'white',
    toolbar: 'rgb(32,11,50)',
    toolbar_text: 'white',
    popup: "rgb(32,11,50)",
    popup_border: "rgb(32,11,50)",
    popup_text: "#FFFFFF",
    popup_highlight: "rgb(55,36,71)",
    icons: "white",
    icons_attention: "rgb(255,0,255)",
    frame_inactive: "rgb(32,11,50)",
    tab_loading: "#0000FF",
    tab_selected: "rgb(32,11,50)",

Above shows an example of some of the additional properties being set in a theme express file and what it looks like within the browser below:

Conclusion

All of us learned a lot about web browser advancement over the semester of our project, and had the opportunity to write and deliver real production-level code. All of the program code we wrote shipped with the current releases of Firefox Quantum 60 and sixty one and will impact a lot of users, which is an awesome feeling. We would like to thank everyone at Mozilla as well as the Mozilla community for giving all of us this opportunity and mentoring all of us through the process. We are looking forward to viewing what developers and Firefox fanatics create using the improved Theming API!

WEB DESIGN AGENCY MIAMI

Darkish Theme Darkening: Better Theming designed for Firefox Quantum

The Team