about:memory for real people aims to convey memory consumption statistics to web-developers as well as normal users. This was a project I did for Mozilla but never ended up submitting it for the summer of code.

The current about:memory page is primarily used by Firefox developers for various debugging purposes. Though the information provided on the page is exhaustive and full of tech jargon (which is awesome if you understand it), but its hard to interpret for everyday users. The plan was to use various forms of data visualizations for expressing the exhaustive details in a concise manner to users, while giving power users the option to view all the unabridged data.

The primary objectives in this project were to –

  1. Express information and functionalities in the easiest possible manner.
  2. Keep the data unabridged.
  3. Make the new page itself consume as less memory as possible. (this was a bummer considering visualizations are very memory-philic).

Visualizing the memory tree

This is the current about:memory page –

Previous about:memory

Nick Nethercote and Felipe Gomes from Mozilla helped me understand the structuring of the page.

The new design uses 3 primary forms of data visualizations – donut charts, line charts and sunburst charts to account for both basic as well as verbose views. It is kept visually in sync with the about:healthreport page.

Features of the new design

HEADER

  • The new header allows users to switch between the Raw Data view and the new Memory Report view. The Raw data section would display a similar text based memory tree like the one on the current about:memory page. The Memory Report section is illustrated below.
  • The three buttons on the header in the top right corner, will account for GC (garbage collection), CC (cycle collection) and minimize memory usage functionalities.

KEY STATS AND FUNCTIONS

Refer to the left sidebar shown below.

  • Functionalities to load and save reports.
  • Combined statistics about memory consumption by Tabs, Add Ons and System. “System” here will be a bucket for all the memory compartments, allocations and listings that do not contribute to either Tabs or Add-Ons.
  • Functionalities to close inactive tabs (i.e. tabs that are still about:blank in the memory because of the “Do not load tabs until selected” feature).
  • Functionalities to disable add-ons, extensions and plugins.

THE GROUPED VIEW

Three main views – Grouped, Live and Verbose will be used to display the various visualizations.

In the Grouped view, users can see two major categories namely – the tabs and the Add-Ons. Donut charts are used to illustrate the same because they give an abstract view of the proportions of memory used by each tabs just like pie-charts. Hovering over a partition of the donut chart will reveal more information about the consumption statistics by that partition. In the case of a large number of tabs or add-ons, people can alternatively switch to a list-view just in order to view precise data related to all the tabs in a more convenient manner. The list view will also allow users to sort tabs in ascending or descending orders and also to selectively close tabs.

Grouped View for about:memory

Grouped view for about:memory

THE VERBOSE VIEW

The Verbose view is essentially a sunburst chart showing the details of the verbose memory allocation tree. A sunburst chart is a hierarchical form of a donut chart that allows users to drill down to see metadata about each partition. A sunburst chart is a visualization that allows comprehensive details to be accommodated in abstract forms in order to reduce the so-called cognitive friction . As above, hovering over the partitions of the chart will reveal more information about the consumption statistics.

Verbose view for about:memory

Verbose view for about:memory

THE LIVE VIEW

The Live View enables people to view real-time information about Firefox’s overall memory consumption. Line charts as shown below would be used for the same. The update frequency is arbitrarily chosen to be 1.5s.

Live view for about:memory

Live view for about:memory

From several posts on the MemShrink project blog, I observed that developers were keen to find out memory leaks due to pages/add-ons/extensions from the memory tree on about:memory. Though this project focuses more on everyday users, power users and developers can always benefit if there is an option of an advanced view that can point out possible memory leaks, identify and aggregate extensions’ compartments or highlight entities that consume disproportionately large amounts of memory or portray abnormal behavior.

Mike Bostock‘s D3.js was chosen to be used because of my previous experience with the same. Some of the graphs above are from the D3.js samples.