Simulate slow connections with the network throttling tool

Network throttling UI

Firefox DevTools has now a network throttling tool to simulate slow connections, so you can get a rough idea of the user experience under different connection types (bug #1283453).

This is extremely important when building responsive sites, which are meant to perform well on many different devices and scenarios.

To access this tool, make sure you’re running an updated version of Nightly, then open the Responsive Design Mode tool via ToolsWeb DeveloperResponsive Design Mode. You can then select the desired simulated speed with the dropdown menu to the right of “Responsive Design Mode”, and reload the page to see the effect of the changes.

And if you want to find out what is being loaded, use this tool in combination with the Network inspector:

These Weeks in Firefox: Issue 4

The Firefox Desktop engineering team met together last Tuesday to chat about what they’re working on. Here are some juicy tidbits from that meeting:

Highlights

Contributor(s) of the Week

Project Updates

Add-ons

Content Handling

Electrolysis (e10s)

Firefox Core Engineering

Form Auto-fill

Go Faster

  • Next areas of focus are likely to be improving the system add-on roll-out facilities (tools to make publishing easier) & update times (time from publish to when a user is running with the update).
    • Restartless system add-ons likely to land soon
    • Other issues being discussed in this bug

Localization

Platform UI and Other Platform Audibles

  • daleharvey fixed a bug that was preventing GMP installation for 64-bit OS’s
  • mconley is working with Layout to make it easier to style checkbox / radio boxes
  • Simplify Page feature for Print Preview has been disabled in a few areas:
    • Only enabled on Nightly for Linux until this bug is fixed
    • Enabled on Windows up to early beta until these two bugs are fixed

Privacy / Security

Quality of Experience

Search

Video Controls

Here are the raw meeting notes that were used to derive this list.

Want to help us build Firefox? Get started here!

Here’s a tool to find some mentored, good first bugs to hack on.

These Weeks in Firefox: Issue 3

The Firefox Desktop team met yet again last Tuesday to share updates. Here are some fresh updates that we think you might find interesting:

Highlights

Contributor(s) of the Week

Project Updates

Context Graph

Electrolysis (e10s)

Platform UI

Privacy / Security

Search

Here are the raw meeting notes that were used to derive this list.

Want to help us build Firefox? Get started here!

Here’s a tool to find some mentored, good first bugs to hack on.

Better default bookmarks for Nightly

Because software defaults matter, we have just changed the default bookmarks for the Nightly channel to be more useful to power-users deeply interested in day to day progress of Firefox and potentially willing to help Mozilla improve their browser through bug and crash reports, shared telemetry data and technical feedback.

Users on the Nightly channels had the same bookmarks than users on the release channel, these bookmarks target end-users with limited technical knowledge and link to Mozilla sites providing end-user support, add-ons or propose a tour of Firefox features. Not very compelling for a tech-savvy audience that installed pre-alpha software!

As of last week, new Nightly users or existing Nightly users creating a new profile have a different set of bookmarks that are more likely to meet their interest in the technical side of Mozilla and contributing to Firefox as an alpha tester. Here is what the default bookmarks are:

New Nightly Bookmarks

There are links to this blog of course, to Planet Mozilla, to the Mozilla Developer Network, to the Nightly Testers Tools add-on, to about:crashes and to the IRC #nightly channel in case you find a bug and would like to talk to other Nightly users about it and of course a link to Bugzilla. The Firefox tour link was also replaced by a link to the contribute page on mozilla.org.

It’s a minor change to the profile data as we don’t want to make of Nightly a different product from Firefox, but I hope another small step in the direction of empowering our more technical user base to help Mozilla build the most stable and reliable browser for hundreds of millions of people!

DevTools now display white space text nodes in the DOM inspector

Web developers don’t write all their code in just one line of text. They use white space between their HTML elements because it makes markup more readable: spaces, returns, tabs.

In most instances, this white space seems to have no effect and no visual output, but the truth is that when a browser parses HTML it will automatically generate anonymous text nodes for elements not contained in a node. This includes white space (which is, after all a type of text).

If these auto generated text nodes are inline level, browsers will give them a non-zero width and height, and you will find strange gaps between the elements in the context, even if you haven’t set any margin or padding on nearby elements.

This behaviour can be hard to debug, but Firefox DevTools are now able to display these whitespace nodes, so you can quickly spot where do the gaps come from in your markup, and fix the issues.

Demo

Whitespace debugging in DevTools in action

The demo shows two examples with slightly different markup to highlight the differences both in browser rendering and what DevTools are showing.

The first example has one img per line, so the markup is readable, but the browser renders gaps between the images:

<img src="..." />
<img src="..." />

The second example has all the img tags in one line, which makes the markup unreadable, but it also doesn’t have gaps in the output:

<img src="..." /><img src="..." />

If you inspect the nodes in the first example, you’ll find a new whitespace indicator that denotes the text nodes created for the browser for the whitespace in the code. No more guessing! You can even delete the node from the inspector, and see if that removes mysterious gaps you might have in your website.

Found a regression in Firefox? Give us details with mozregression!

One of the most useful things you can do to help improve the quality for Firefox is to warn developers about regressions and give them all the details that will turn your issue into a useful actionable bug report.

This is actually the raison d’être of Nightly builds: parallelizing the work done by our communities of testers and developpers so as to catch regressions as early as possible and provide a feedback loop to developers in the early stages of development.

Complementary to nighly builds, we also have a nifty Python command line tool called mozregression (with an experimental GUI version but that will be for another post…) that allows a tester to easily find when a regression happened and what code changes are likely to have introduced the regression. This tool is largely the result of the awesome work of Julien Pagès, William Lachance, Heather Arthur and Mike Ling!

How do I install that cool tool?

tl;dr for people that do Python:
mozregression is a python package installable via pip, preferably in a virtualenv.

The installation steps detailed for mozregression on their documentation site are a bit short on details and tell you to install the tool with admin rights on linux/mac (sudo) which is not necessarily a good idea since we don’t want to potentially create conflicts with other python tools installed on your system and that may have different dependencies.

I would instead install mozregression in a virtualenv so as to isolate it from your OS, it works the same, avoids breaking something else on your OS and AFAIK, there is no advantage to having mozregression installed as a global package except of course having it available for all accounts on your system.

The installation steps in a terminal are those:

sudo apt install python-pip virtualenvwrapper
echo 'export WORKON_HOME=~/.virtualenvs' >> ~/.bashrc
source ~/.bashrc
mkvirtualenv mozreg
pip install mozregression
mozregression --write-config

Here are line by line explanations because understanding is always better than copy-pasting and you may want to adapt those steps with your own preferences:

sudo apt install python-pip virtualenvwrapper

» Install the software needed to install python packages (pip) as well as the tool to create virtual environments for Python, the packae names here are for Debian-based distros.

echo 'export WORKON_HOME=~/.virtualenvs' >> ~/.bashrc

» Add to your bash config (adapt the destination if you use another shell) an environment variable indicating where your virtualenvs are stored in your home.

source ~/.bashrc

» Reload your updated .bashrc settings

mkvirtualenv mozreg

» Create a virtualenv called mozreg in ~/.virtualenvs/mozreg/. Your terminal should get the name of this virtualenv prepended to your terminal prompt such as (mozreg) ~ $>, that means you are in this virtualenv now.

pip install mozregression

» The previous step activated the mozreg virtualenv automatically, this step installs mozregression in ~/.virtualenvs/mozreg/lib/python2.7/site-packages/mozregression

mozregression --write-config

» In this final installation step, we are creating a configuration file for mozregression, the defaults are fine and detailed here.

I am set up, how do I use the tool?

Now that mozregression is installed in a virtualenv, first you need to know how to activate/deactivate your virtualenv.

As said previously, if you are already in your virtualenv, your terminal prompt will have (mozreg) mentionned. If you want to exit your virtualenv, type:

deactivate

If you are not in your virtualenv, you can enter it with this command:

workon mozreg

You can now use mozregression following the Quick Start steps in the documentation but basically it boils down to indicating a good and a bad date for Firefox and the bad date is optional, so if you found a regression in Nightly that you know didn’t exist in say Firefox 49, launching mozregression is as easy as:

mozregression --good 49 

Then test the nightly builds that mozregression downloads for you and indicate in the terminal ‘good’ or ‘bad’ for every build you try until the regression is found and you will get a message such as:

INFO: Last good revision: e3cff5e3ae3cc1b20d4861e7934e54c9e407a750
INFO: First bad revision: 5194eeb6ca2d34b5fca72d2a78d6a9ec95a36763
INFO: Pushlog:
https://hg.mozilla.org/integration/autoland/pushloghtml?fromchange=e3cff5e3ae3cc1b20d4861e7934e54c9e407a750&tochange=5194eeb6ca2d34b5fca72d2a78d6a9ec95a36763

INFO: Looks like the following bug has the changes which introduced the regression:
https://bugzilla.mozilla.org/show_bug.cgi?id=1296280

The above text is what you should paste in the bug (for the record, this specific example is copied from bug 1307060), this is the information that will make your bug report actionable by a developer.

In a nutshell

Mozregression is a tool that allows power-users with no development skills to participate actively in the development of Firefox.

Providing such information to developers saves them a lot of time and most importantly, it allows bugzilla triagers to put the right developers in copy of the bug (“Hey Anne, it seems your patch in Bug XXX caused the regression described in this bug, could you have a look please?”)

Being a developer is not the only way you can help Firefox being a better browser, any advanced user able to use a terminal on his machine can participate, so don’t hesitate, file bugs and become a regression range finder!

These Weeks in Firefox: Issue 2

As is fortnightly tradition, the Firefox Desktop team rallied together last Tuesday to share notes and ramblings on things that are going on. Here are some hand-picked, artisinal updates from your friendly neighbourhood Firefox team:

Highlights

Contributor(s) of the Week

Project Updates

 

Add-ons

Context Graph

Firefox Core Engineering

Form Auto-fill

Privacy / Security

Quality of Experience

Storage Management

Here are the raw meeting notes that were used to derive this list.

Want to help us build Firefox? Get started here!

Here’s a tool to find some mentored, good first bugs to hack on.

Firefox Nightly got its “What’s New” page back last week!

Years ago, every time we were releasing a new version of Firefox and bumped the version number for all Firefox channels, nightly builds were also getting a “What’s New” page displayed at restart after that major version number change (this old page is still available on the WayBack Machine and you can even see a video with ex-QA team lead Juan Becerra).

Then, at some point (Bug 748503), the call to that What’s New page was redirected to the First Run page. It made sense at the time as nobody was actively maintaining that content and it had not been updated in years, but it was also shutting down one of the few direct communication channels with our Nightly users.

Kohei Yoshino and myself worked on resurrecting that page and turn it into a simple yet effective communication channel with our Nightly users where they can get news about what’s new in the Nightly world.

What's New page for Nightly

Unlike the old page we had, this new updated version is integrated correctly into mozilla.org framework (bedrock) which means that we inherit from the nice templates they create and have a workflow which allows localization of that page (see the French and Japanese version of the page) and we might even be able to provide conditional content based on geolocation in the future.

We have created this page with the objective of increasing participation and communication with our core technical users and we intend to update it periodically and make it useful not only to Mozilla with calls to feedback and testing of recently landed features but also to Nightly users (how about having a monthly power-user tip there for example?).

If you have ideas on what information could be part of this What’s New page, don’t hesitate to leave a comment on the blog or to reach out to me directly (pascal At mozilla Dot com)!

CREDITS

Many thanks to Kohei for his great work on the design and the quality of his code. Thanks to the rest of the Release Management team and in particular to Liz Henry and Marcia Knous for helping fix my English! Many thanks to the mozilla.org webdev team for helping with reviews and suggesting nice visual tricks such as the responsive multi-column layout and improved typography tips for readability. Finally, thanks to the localizers that took the time to translate that page in a couple of days before we shipped it even though the expected audience is very small!

BONUS

We were asked via our @FirefoxNightly Twitter account if we could provide the nice background on the What’s New page as a wallpaper for desktop. Instead of providing the file, I am showing you in the following video tutorial how you can do it by yourself with Firefox Nightly Developer Tools, enjoy hacking with your browser and the Web, that’s what Nightly is for!

These Weeks in Firefox: Issue 1

Every two weeks, engineering teams working on Firefox Desktop get together and update each other on things that they’re working on. These meetings are public. Details on how to join, as well as meeting notes, are available here.

We feel that the bleeding edge development state captured in those meeting notes might be interesting to our Nightly blog audience. To that end, we’re taking a page out of the Rust and Servo playbook, and offering you handpicked updates about what’s going on at the forefront of Firefox development!

Expect these every two weeks or so.

Thanks for using Nightly, and keep on rocking the free web!

Highlights

Contributor(s) of the Week

  • The team has nominated Adam (adamgj.wong), who has helped clean-up some of our Telemetry APIs. Great work, Adam!

Project Updates

 

Add-ons

  • andym wants to remind everybody that the Add-ons team is still triaging and fixing SDK bugs (like this one, for example).

Electrolysis (e10s)

Core Engineering

  • ksteuber rewrote the Snappy Symbolication Server (mainly used for the Gecko Profiler for Windows builds) and this will be deployed soon.
  • felipe is in the process of designing experiment mechanisms for testing different behaviours for Flash (allowing some, denying some, click-to-play some, based on heuristics)

Platform UI and other Platform Audibles

Quality of Experience

Sync / Firefox Accounts

Uncategorized

Here are the raw meeting notes that were used to derive this list.

Want to help us build Firefox? Get started here!

Here’s a tool to find some mentored, good first bugs to hack on.