--- a/addon-sdk/source/app-extension/install.rdf
+++ b/addon-sdk/source/app-extension/install.rdf
@@ -13,17 +13,17 @@
     <em:bootstrap>true</em:bootstrap>
     <em:unpack>false</em:unpack>
 
     <!-- Firefox -->
     <em:targetApplication>
       <Description>
         <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
         <em:minVersion>21.0</em:minVersion>
-        <em:maxVersion>25.0a1</em:maxVersion>
+        <em:maxVersion>29.0a1</em:maxVersion>
       </Description>
     </em:targetApplication>
 
     <!-- Front End MetaData -->
     <em:name>Test App</em:name>
     <em:description>Harness for tests.</em:description>
     <em:creator>Mozilla Corporation</em:creator>
     <em:homepageURL></em:homepageURL>

--- a/addon-sdk/source/lib/sdk/event/utils.js
+++ b/addon-sdk/source/lib/sdk/event/utils.js
@@ -261,15 +261,15 @@ exports.Reactor = Reactor;
  * used to be called `require('sdk/event/core').setListeners` on.
  * This strips all keys that would trigger a listener to be set.
  * 
  * @params {Object} object
  * @return {Object}
  */
 
 function stripListeners (object) {
-  return Object.keys(object).reduce((agg, key) => {
+  return Object.keys(object || {}).reduce((agg, key) => {
     if (!EVENT_TYPE_PATTERN.test(key))
       agg[key] = object[key];
     return agg;
   }, {});
 }
 exports.stripListeners = stripListeners;

--- a/addon-sdk/source/lib/sdk/l10n/prefs.js
+++ b/addon-sdk/source/lib/sdk/l10n/prefs.js
@@ -4,17 +4,17 @@
 "use strict";
 
 const { on } = require("../system/events");
 const core = require("./core");
 const { id: jetpackId} = require('../self');
 
 const OPTIONS_DISPLAYED = "addon-options-displayed";
 
-function onOptionsDisplayed({ subjec: document, data: addonId }) {
+function onOptionsDisplayed({ subject: document, data: addonId }) {
   if (addonId !== jetpackId)
     return;
   let query = 'setting[data-jetpack-id="' + jetpackId + '"][pref-name], ' +
               'button[data-jetpack-id="' + jetpackId + '"][pref-name]';
   let nodes = document.querySelectorAll(query);
   for (let node of nodes) {
     let name = node.getAttribute("pref-name");
     if (node.tagName == "setting") {

--- a/addon-sdk/source/lib/toolkit/loader.js
+++ b/addon-sdk/source/lib/toolkit/loader.js
@@ -688,17 +688,19 @@ exports.unload = unload;
 //   If `resolve` does not returns `uri` string exception will be thrown by
 //   an associated `require` call.
 const Loader = iced(function Loader(options) {
   let {
     modules, globals, resolve, paths, rootURI, manifest, requireMap, isNative
   } = override({
     paths: {},
     modules: {},
-    globals: {},
+    globals: {
+      console: console
+    },
     resolve: options.isNative ?
       exports.nodeResolve :
       exports.resolve,
   }, options);
 
   // We create an identity object that will be dispatched on an unload
   // event as subject. This way unload listeners will be able to assert
   // which loader is unloaded. Please note that we intentionally don't

new file mode 100644
--- /dev/null
+++ b/addon-sdk/source/test/addons/simple-prefs-l10n/locale/en.properties
@@ -0,0 +1,5 @@
+# This Source Code Form is subject to the terms of the Mozilla Public
+# License, v. 2.0. If a copy of the MPL was not distributed with this
+# file, You can obtain one at http://mozilla.org/MPL/2.0/.
+
+somePreference_title=A

new file mode 100644
--- /dev/null
+++ b/addon-sdk/source/test/addons/simple-prefs-l10n/main.js
@@ -0,0 +1,57 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+'use strict';
+
+const { Cu } = require('chrome');
+const sp = require('sdk/simple-prefs');
+const app = require('sdk/system/xul-app');
+const self = require('sdk/self');
+const tabs = require('sdk/tabs');
+const { preferencesBranch } = require('sdk/self');
+
+const { AddonManager } = Cu.import('resource://gre/modules/AddonManager.jsm', {});
+
+exports.testAOMLocalization = function(assert, done) {
+    tabs.open({
+    	url: 'about:addons',
+    	onReady: function(tab) {
+        tab.attach({
+          contentScriptWhen: 'end',
+        	contentScript: 'function onLoad() {\n' +
+                           'unsafeWindow.removeEventListener("load", onLoad, false);\n' +
+                           'AddonManager.getAddonByID("' + self.id + '", function(aAddon) {\n' +
+                             'unsafeWindow.gViewController.viewObjects.detail.node.addEventListener("ViewChanged", function whenViewChanges() {\n' +
+                               'unsafeWindow.gViewController.viewObjects.detail.node.removeEventListener("ViewChanged", whenViewChanges, false);\n' +
+                               'setTimeout(function() {\n' + // TODO: figure out why this is necessary..
+                                   'self.postMessage({\n' +
+                                     'somePreference: getAttributes(unsafeWindow.document.querySelector("setting[data-jetpack-id=\'' + self.id + '\']"))\n' +
+                                   '});\n' +
+                               '}, 250);\n' +
+                             '}, false);\n' +
+                             'unsafeWindow.gViewController.commands.cmd_showItemDetails.doCommand(aAddon, true);\n' +
+                           '});\n' +
+                           'function getAttributes(ele) {\n' +
+                             'if (!ele) return {};\n' +
+                             'return {\n' +
+                               'title: ele.getAttribute("title")\n' +
+                             '}\n' +
+                           '}\n' +
+                         '}\n' +
+                         // Wait for the load event ?
+                         'if (document.readyState == "complete") {\n' +
+                           'onLoad()\n' +
+                         '} else {\n' +
+                           'unsafeWindow.addEventListener("load", onLoad, false);\n' +
+                         '}\n',
+          onMessage: function(msg) {
+            // test somePreference
+            assert.equal(msg.somePreference.title, 'A', 'somePreference title is correct');
+            tab.close(done);
+          }
+        });
+    	}
+    });
+}
+
+require('sdk/test/runner').runTestsFromModule(module);

new file mode 100644
--- /dev/null
+++ b/addon-sdk/source/test/addons/simple-prefs-l10n/package.json
@@ -0,0 +1,10 @@
+{
+  "id": "test-simple-prefs-l10n",
+  "preferences": [{
+    "name": "somePreference",
+    "title": "some-title",
+    "description": "Some short description for the preference",
+    "type": "string",
+    "value": "TEST"
+  }]
+}
\ No newline at end of file

new file mode 100644
--- /dev/null
+++ b/addon-sdk/source/test/fixtures/loader/globals/main.js
@@ -0,0 +1,6 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+'use strict';
+exports.console = console;

--- a/addon-sdk/source/test/test-loader.js
+++ b/addon-sdk/source/test/test-loader.js
@@ -322,9 +322,25 @@ exports['test invisibleToDebugger: true'
   try {
     dbg.addDebuggee(sandbox);
     assert.fail('debugger added invisible value');
   } catch(e) {
     assert.ok(true, 'debugger did not add invisible value');
   }
 };
 
+exports['test console global by default'] = function (assert) {
+  let uri = root + '/fixtures/loader/globals/';
+  let loader = Loader({ paths: { '': uri }});
+  let program = main(loader, 'main');
+ 
+  assert.ok(typeof program.console === 'object', 'global `console` exists');
+  assert.ok(typeof program.console.log === 'function', 'global `console.log` exists');
+
+  let loader2 = Loader({ paths: { '': uri }, globals: { console: fakeConsole }});
+  let program2 = main(loader2, 'main');
+
+  assert.equal(program2.console, fakeConsole,
+    'global console can be overridden with Loader options');
+  function fakeConsole () {};
+};
+
 require('test').run(exports);

--- a/addon-sdk/source/test/test-panel.js
+++ b/addon-sdk/source/test/test-panel.js
@@ -960,16 +960,23 @@ exports['test emits on url changes'] = f
   panel.port.emit('hi', 'hi')
   panel.port.on('bye', function(uri) {
     assert.equal(uri, uriB, 'message was delivered to new uri');
     loader.unload();
     done();
   });
 };
 
+exports['test panel can be constructed without any arguments'] = function (assert) {
+  const { Panel } = require('sdk/panel');
+
+  let panel = Panel();
+  assert.ok(true, "Creating a panel with no arguments does not throw");
+};
+
 if (isWindowPBSupported) {
   exports.testGetWindow = function(assert, done) {
     let activeWindow = getMostRecentBrowserWindow();
     open(null, { features: {
       toolbar: true,
       chrome: true,
       private: true
     } }).then(function(window) {

--- a/browser/app/profile/firefox.js
+++ b/browser/app/profile/firefox.js
@@ -1136,16 +1136,17 @@ pref("devtools.profiler.enabled", true);
 pref("devtools.profiler.ui.show-platform-data", false);
 
 // Enable the Network Monitor
 pref("devtools.netmonitor.enabled", true);
 
 // The default Network Monitor UI settings
 pref("devtools.netmonitor.panes-network-details-width", 450);
 pref("devtools.netmonitor.panes-network-details-height", 450);
+pref("devtools.netmonitor.statistics", true);
 
 // Enable the Tilt inspector
 pref("devtools.tilt.enabled", true);
 pref("devtools.tilt.intro_transition", true);
 pref("devtools.tilt.outro_transition", true);
 
 // Scratchpad settings
 // - recentFileMax: The maximum number of recently-opened files

--- a/browser/base/content/browser.xul
+++ b/browser/base/content/browser.xul
@@ -994,17 +994,17 @@
                      class="toolbarbutton-1 chromeclass-toolbar-additional"
                      label="&syncToolbarButton.label;"
                      oncommand="gSyncUI.handleToolbarButton()"/>
 #endif
 
       <toolbarbutton id="tabview-button" class="toolbarbutton-1 chromeclass-toolbar-additional"
                      label="&tabGroupsButton.label;"
                      command="Browser:ToggleTabView"
-                     tooltiptext="&tabGroupsButton.tooltip;"
+                     tooltip="dynamic-shortcut-tooltip"
                      observes="tabviewGroupsNumber"/>
     </toolbarpalette>
   </toolbox>
 
   <hbox id="fullscr-toggler" collapsed="true"/>
 
   <deck id="content-deck" flex="1">
     <hbox flex="1" id="browser">

--- a/browser/components/customizableui/src/CustomizableUI.jsm
+++ b/browser/components/customizableui/src/CustomizableUI.jsm
@@ -1309,23 +1309,39 @@ let CustomizableUIInternal = {
       }
       let isInteractive = this._isOnInteractiveElement(aEvent);
       LOG("maybeAutoHidePanel: interactive ? " + isInteractive);
       if (isInteractive) {
         return;
       }
     }
 
-    if (aEvent.originalTarget.getAttribute("closemenu") == "none" ||
-        aEvent.originalTarget.getAttribute("widget-type") == "view") {
+    // We can't use event.target because we might have passed a panelview
+    // anonymous content boundary as well, and so target points to the
+    // panelmultiview in that case. Unfortunately, this means we get
+    // anonymous child nodes instead of the real ones, so looking for the 
+    // 'stoooop, don't close me' attributes is more involved.
+    let target = aEvent.originalTarget;
+    let closemenu = "auto";
+    let widgetType = "button";
+    while (target.localName != "panel") {
+      closemenu = target.getAttribute("closemenu");
+      widgetType = target.getAttribute("widget-type");
+      if (closemenu == "none" || closemenu == "single" ||
+          widgetType == "view") {
+        break;
+      }
+      target = target.parentNode;
+    }
+    if (closemenu == "none" || widgetType == "view") {
       return;
     }
 
-    if (aEvent.originalTarget.getAttribute("closemenu") == "single") {
-      let panel = this._getPanelForNode(aEvent.originalTarget);
+    if (closemenu == "single") {
+      let panel = this._getPanelForNode(target);
       let multiview = panel.querySelector("panelmultiview");
       if (multiview.showingSubView) {
         multiview.showMainView();
         return;
       }
     }
 
     // If we get here, we can actually hide the popup:

--- a/browser/components/customizableui/test/browser.ini
+++ b/browser/components/customizableui/test/browser.ini
@@ -20,20 +20,24 @@ skip-if = os == "mac"
 [browser_887438_currentset_shim.js]
 [browser_888817_currentset_updating.js]
 [browser_889120_customize_tab_merging.js]
 [browser_890140_orphaned_placeholders.js]
 [browser_890262_destroyWidget_after_add_to_panel.js]
 [browser_892955_isWidgetRemovable_for_removed_widgets.js]
 [browser_892956_destroyWidget_defaultPlacements.js]
 [browser_909779_overflow_toolbars_new_window.js]
+skip-if = os == "linux"
+
 [browser_901207_searchbar_in_panel.js]
 [browser_913972_currentset_overflow.js]
+skip-if = os == "linux"
 
 [browser_914138_widget_API_overflowable_toolbar.js]
+skip-if = os == "linux"
 
 [browser_914863_disabled_help_quit_buttons.js]
 [browser_918049_skipintoolbarset_dnd.js]
 [browser_923857_customize_mode_event_wrapping_during_reset.js]
 [browser_927717_customize_drag_empty_toolbar.js]
 [browser_932928_show_notice_when_palette_empty.js]
 
 [browser_934113_menubar_removable.js]

--- a/browser/devtools/debugger/debugger-panes.js
+++ b/browser/devtools/debugger/debugger-panes.js
@@ -1725,49 +1725,54 @@ let SourceUtils = {
 /**
  * Functions handling the variables bubble UI.
  */
 function VariableBubbleView() {
   dumpn("VariableBubbleView was instantiated");
 
   this._onMouseMove = this._onMouseMove.bind(this);
   this._onMouseLeave = this._onMouseLeave.bind(this);
-  this._onMouseScroll = this._onMouseScroll.bind(this);
   this._onPopupHiding = this._onPopupHiding.bind(this);
 }
 
 VariableBubbleView.prototype = {
   /**
    * Initialization function, called when the debugger is started.
    */
   initialize: function() {
     dumpn("Initializing the VariableBubbleView");
 
-    this._tooltip = new Tooltip(document);
     this._editorContainer = document.getElementById("editor");
-
+    this._editorContainer.addEventListener("mousemove", this._onMouseMove, false);
+    this._editorContainer.addEventListener("mouseleave", this._onMouseLeave, false);
+
+    this._tooltip = new Tooltip(document, {
+      closeOnEvents: [{
+        emitter: DebuggerController._toolbox,
+        event: "select"
+      }, {
+        emitter: this._editorContainer,
+        event: "scroll",
+        useCapture: true
+      }]
+    });
     this._tooltip.defaultPosition = EDITOR_VARIABLE_POPUP_POSITION;
     this._tooltip.defaultShowDelay = EDITOR_VARIABLE_HOVER_DELAY;
-
     this._tooltip.panel.addEventListener("popuphiding", this._onPopupHiding);
-    this._editorContainer.addEventListener("mousemove", this._onMouseMove, false);
-    this._editorContainer.addEventListener("mouseleave", this._onMouseLeave, false);
-    this._editorContainer.addEventListener("scroll", this._onMouseScroll, true);
   },
 
   /**
    * Destruction function, called when the debugger is closed.
    */
   destroy: function() {
     dumpn("Destroying the VariableBubbleView");
 
     this._tooltip.panel.removeEventListener("popuphiding", this._onPopupHiding);
     this._editorContainer.removeEventListener("mousemove", this._onMouseMove, false);
     this._editorContainer.removeEventListener("mouseleave", this._onMouseLeave, false);
-    this._editorContainer.removeEventListener("scroll", this._onMouseScroll, true);
   },
 
   /**
    * Searches for an identifier underneath the specified position in the
    * source editor, and if found, opens a VariablesView inspection popup.
    *
    * @param number x, y
    *        The left/top coordinates where to look for an identifier.
@@ -1903,17 +1908,17 @@ VariableBubbleView.prototype = {
         }
       }, [{
         label: L10N.getStr("addWatchExpressionButton"),
         className: "dbg-expression-button",
         command: () => {
           DebuggerView.VariableBubble.hideContents();
           DebuggerView.WatchExpressions.addExpression(evalPrefix, true);
         }
-      }]);
+      }], DebuggerController._toolbox);
     }
 
     this._tooltip.show(this._markedText.anchor);
   },
 
   /**
    * Hides the inspection popup.
    */
@@ -1970,23 +1975,16 @@ VariableBubbleView.prototype = {
   /**
    * The mouseleave listener for the source editor container node.
    */
   _onMouseLeave: function() {
     clearNamedTimeout("editor-mouse-move");
   },
 
   /**
-   * The mousescroll listener for the source editor container node.
-   */
-  _onMouseScroll: function() {
-    this.hideContents();
-  },
-
-  /**
    * Listener handling the popup hiding event.
    */
   _onPopupHiding: function({ target }) {
     if (this._tooltip.panel != target) {
       return;
     }
     if (this._markedText) {
       this._markedText.clear();

--- a/browser/devtools/debugger/debugger-view.js
+++ b/browser/devtools/debugger/debugger-view.js
@@ -164,16 +164,20 @@ let DebuggerView = {
       searchEnabled: Prefs.variablesSearchboxVisible,
       eval: (variable, value) => {
         let string = variable.evaluationMacro(variable, value);
         DebuggerController.StackFrames.evaluate(string);
       },
       lazyEmpty: true
     });
 
+    // Attach the current toolbox to the VView so it can link DOMNodes to
+    // the inspector/highlighter
+    this.Variables.toolbox = DebuggerController._toolbox;
+
     // Attach a controller that handles interfacing with the debugger protocol.
     VariablesViewController.attach(this.Variables, {
       getEnvironmentClient: aObject => gThreadClient.environment(aObject),
       getObjectClient: aObject => {
         return aObject instanceof DebuggerController.Tracer.WrappedObject
           ? DebuggerController.Tracer.syncGripClient(aObject.object)
           : gThreadClient.pauseGrip(aObject)
       }

--- a/browser/devtools/debugger/panel.js
+++ b/browser/devtools/debugger/panel.js
@@ -15,16 +15,17 @@ function DebuggerPanel(iframeWindow, too
   this.panelWin = iframeWindow;
   this._toolbox = toolbox;
   this._destroyer = null;
 
   this._view = this.panelWin.DebuggerView;
   this._controller = this.panelWin.DebuggerController;
   this._view._hostType = this._toolbox.hostType;
   this._controller._target = this.target;
+  this._controller._toolbox = this._toolbox;
 
   this.handleHostChanged = this.handleHostChanged.bind(this);
   this.highlightWhenPaused = this.highlightWhenPaused.bind(this);
   this.unhighlightWhenResumed = this.unhighlightWhenResumed.bind(this);
 
   EventEmitter.decorate(this);
 };
 

--- a/browser/devtools/debugger/test/browser.ini
+++ b/browser/devtools/debugger/test/browser.ini
@@ -31,16 +31,17 @@ support-files =
   doc_auto-pretty-print-01.html
   doc_auto-pretty-print-02.html
   doc_binary_search.html
   doc_blackboxing.html
   doc_closures.html
   doc_cmd-break.html
   doc_cmd-dbg.html
   doc_conditional-breakpoints.html
+  doc_domnode-variables.html
   doc_editor-mode.html
   doc_empty-tab-01.html
   doc_empty-tab-02.html
   doc_event-listeners.html
   doc_event-listeners-02.html
   doc_frame-parameters.html
   doc_function-display-name.html
   doc_function-search.html
@@ -242,16 +243,17 @@ support-files =
 [browser_dbg_variables-view-popup-05.js]
 [browser_dbg_variables-view-popup-06.js]
 [browser_dbg_variables-view-popup-07.js]
 [browser_dbg_variables-view-popup-08.js]
 [browser_dbg_variables-view-popup-09.js]
 [browser_dbg_variables-view-popup-10.js]
 [browser_dbg_variables-view-popup-11.js]
 [browser_dbg_variables-view-popup-12.js]
+[browser_dbg_variables-view-popup-13.js]
 [browser_dbg_variables-view-reexpand-01.js]
 [browser_dbg_variables-view-reexpand-02.js]
 [browser_dbg_variables-view-webidl.js]
 [browser_dbg_watch-expressions-01.js]
 [browser_dbg_watch-expressions-02.js]
 [browser_dbg_chrome-create.js]
 skip-if = os == "linux" # Bug 847558
 [browser_dbg_on-pause-raise.js]

--- a/browser/devtools/debugger/test/browser_dbg_variables-view-frame-parameters-01.js
+++ b/browser/devtools/debugger/test/browser_dbg_variables-view-frame-parameters-01.js
@@ -95,17 +95,17 @@ function testExpandVariables() {
     ok(thisVar.get("window").target.querySelector(".value").className.contains("token-other"),
       "Should have the right token class for 'window'.");
 
     is(thisVar.get("document").target.querySelector(".name").getAttribute("value"), "document",
       "Should have the right property name for 'document'.");
     is(thisVar.get("document").target.querySelector(".value").getAttribute("value"),
       "HTMLDocument \u2192 doc_frame-parameters.html",
       "Should have the right property value for 'document'.");
-    ok(thisVar.get("document").target.querySelector(".value").className.contains("token-other"),
+    ok(thisVar.get("document").target.querySelector(".value").className.contains("token-domnode"),
       "Should have the right token class for 'document'.");
 
     let argsProps = argsVar.target.querySelectorAll(".variables-view-property");
     is(argsProps.length, 8,
       "The 'arguments' variable should contain 5 enumerable and 3 non-enumerable properties");
 
     is(argsProps[0].querySelector(".name").getAttribute("value"), "0",
       "Should have the right property name for '0'.");

new file mode 100644
--- /dev/null
+++ b/browser/devtools/debugger/test/browser_dbg_variables-view-popup-13.js
@@ -0,0 +1,62 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+/**
+ * Tests that the variable inspection popup has inspector links for DOMNode
+ * properties and that the popup closes when the link is clicked
+ */
+
+const TAB_URL = EXAMPLE_URL + "doc_domnode-variables.html";
+
+function test() {
+  Task.spawn(function() {
+    let [tab, debuggee, panel] = yield initDebugger(TAB_URL);
+    let win = panel.panelWin;
+    let bubble = win.DebuggerView.VariableBubble;
+    let tooltip = bubble._tooltip.panel;
+    let toolbox = gDevTools.getToolbox(panel.target);
+
+    function getDomNodeInTooltip(propertyName) {
+      let domNodeProperties = tooltip.querySelectorAll(".token-domnode");
+      for (let prop of domNodeProperties) {
+        let propName = prop.parentNode.querySelector(".name");
+        if (propName.getAttribute("value") === propertyName) {
+          ok(true, "DOMNode " + propertyName + " was found in the tooltip");
+          return prop;
+        }
+      }
+      ok(false, "DOMNode " + propertyName + " wasn't found in the tooltip");
+    }
+
+    // Allow this generator function to yield first.
+    executeSoon(() => debuggee.start());
+    yield waitForSourceAndCaretAndScopes(panel, ".html", 19);
+
+    // Inspect the div DOM variable.
+    yield openVarPopup(panel, { line: 17, ch: 38 }, true);
+    let property = getDomNodeInTooltip("firstElementChild");
+
+    // Simulate mouseover on the property value
+    let highlighted = once(toolbox, "node-highlight");
+    EventUtils.sendMouseEvent({ type: "mouseover" }, property,
+      property.ownerDocument.defaultView);
+    yield highlighted;
+    ok(true, "The node-highlight event was fired on hover of the DOMNode");
+
+    // Simulate a click on the "select in inspector" button
+    let button = property.parentNode.querySelector(".variables-view-open-inspector");
+    ok(button, "The select-in-inspector button is present");
+    let inspectorSelected = once(toolbox, "inspector-selected");
+    EventUtils.sendMouseEvent({ type: "mousedown" }, button,
+      button.ownerDocument.defaultView);
+    yield inspectorSelected;
+    ok(true, "The inspector got selected when clicked on the select-in-inspector");
+
+    // Make sure the inspector's initialization is finalized before ending the test
+    // Listening to the event *after* triggering the switch to the inspector isn't
+    // a problem as the inspector is asynchronously loaded.
+    yield once(toolbox.getPanel("inspector"), "inspector-updated");
+
+    yield resumeDebuggerThenCloseAndFinish(panel);
+  });
+}

--- a/browser/devtools/debugger/test/browser_dbg_variables-view-webidl.js
+++ b/browser/devtools/debugger/test/browser_dbg_variables-view-webidl.js
@@ -59,32 +59,32 @@ function performTest() {
   let buttonVar = globalScope.get("button");
   let buttonAsProtoVar = globalScope.get("buttonAsProto");
   let documentVar = globalScope.get("document");
 
   is(buttonVar.target.querySelector(".name").getAttribute("value"), "button",
     "Should have the right property name for 'button'.");
   is(buttonVar.target.querySelector(".value").getAttribute("value"), "<button>",
     "Should have the right property value for 'button'.");
-  ok(buttonVar.target.querySelector(".value").className.contains("token-other"),
+  ok(buttonVar.target.querySelector(".value").className.contains("token-domnode"),
     "Should have the right token class for 'button'.");
 
   is(buttonAsProtoVar.target.querySelector(".name").getAttribute("value"), "buttonAsProto",
     "Should have the right property name for 'buttonAsProto'.");
   is(buttonAsProtoVar.target.querySelector(".value").getAttribute("value"), "Object",
     "Should have the right property value for 'buttonAsProto'.");
   ok(buttonAsProtoVar.target.querySelector(".value").className.contains("token-other"),
     "Should have the right token class for 'buttonAsProto'.");
 
   is(documentVar.target.querySelector(".name").getAttribute("value"), "document",
     "Should have the right property name for 'document'.");
   is(documentVar.target.querySelector(".value").getAttribute("value"),
     "HTMLDocument \u2192 doc_frame-parameters.html",
     "Should have the right property value for 'document'.");
-  ok(documentVar.target.querySelector(".value").className.contains("token-other"),
+  ok(documentVar.target.querySelector(".value").className.contains("token-domnode"),
     "Should have the right token class for 'document'.");
 
   is(buttonVar.expanded, false,
     "The buttonVar should not be expanded at this point.");
   is(buttonAsProtoVar.expanded, false,
     "The buttonAsProtoVar should not be expanded at this point.");
   is(documentVar.expanded, false,
     "The documentVar should not be expanded at this point.");
@@ -142,17 +142,17 @@ function performTest() {
       "Should have the right property value for '__proto__'.");
     ok(buttonProtoVar.target.querySelector(".value").className.contains("token-other"),
       "Should have the right token class for '__proto__'.");
 
     is(buttonAsProtoProtoVar.target.querySelector(".name").getAttribute("value"), "__proto__",
       "Should have the right property name for '__proto__'.");
     is(buttonAsProtoProtoVar.target.querySelector(".value").getAttribute("value"), "<button>",
       "Should have the right property value for '__proto__'.");
-    ok(buttonAsProtoProtoVar.target.querySelector(".value").className.contains("token-other"),
+    ok(buttonAsProtoProtoVar.target.querySelector(".value").className.contains("token-domnode"),
       "Should have the right token class for '__proto__'.");
 
     is(documentProtoVar.target.querySelector(".name").getAttribute("value"), "__proto__",
       "Should have the right property name for '__proto__'.");
     is(documentProtoVar.target.querySelector(".value").getAttribute("value"), "HTMLDocumentPrototype",
       "Should have the right property value for '__proto__'.");
     ok(documentProtoVar.target.querySelector(".value").className.contains("token-other"),
       "Should have the right token class for '__proto__'.");

new file mode 100644
--- /dev/null
+++ b/browser/devtools/debugger/test/doc_domnode-variables.html
@@ -0,0 +1,24 @@
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!doctype html>
+
+<html>
+  <head>
+    <meta charset="utf-8"/>
+    <title>Debugger test page</title>
+  </head>
+
+  <body>
+    <div>Look at this DIV! Just look at it!</div>
+
+    <script type="text/javascript">
+      function start() {
+        var theDiv = document.querySelector("div");
+        var theBody = document.body;
+        var manyDomNodes = [theDiv, theBody];
+        debugger;
+      }
+    </script>
+  </body>
+
+</html>

--- a/browser/devtools/framework/test/browser_keybindings.js
+++ b/browser/devtools/framework/test/browser_keybindings.js
@@ -59,32 +59,16 @@ function test()
 
     gDevTools.once("toolbox-ready", (e, toolbox) => {
       inspectorShouldBeOpenAndHighlighting(toolbox.getCurrentPanel(), toolbox)
     });
 
     keysetMap.inspector.synthesizeKey();
   }
 
-  function moveMouseOver(aElement, aInspector, cb)
-  {
-    EventUtils.synthesizeMouse(aElement, 2, 2, {type: "mousemove"},
-      aElement.ownerDocument.defaultView);
-    aInspector.toolbox.once("picker-node-hovered", () => {
-      executeSoon(cb);
-    });
-  }
-
-  function isHighlighting()
-  {
-    let outline = gBrowser.selectedBrowser.parentNode
-      .querySelector(".highlighter-container .highlighter-outline");
-    return outline && !outline.hasAttribute("hidden");
-  }
-
   function inspectorShouldBeOpenAndHighlighting(aInspector, aToolbox)
   {
     is (aToolbox.currentToolId, "inspector", "Correct tool has been loaded");
 
     aToolbox.once("picker-started", () => {
       ok(true, "picker-started event received, highlighter started");
       keysetMap.inspector.synthesizeKey();
 

--- a/browser/devtools/framework/toolbox.js
+++ b/browser/devtools/framework/toolbox.js
@@ -68,17 +68,17 @@ function Toolbox(target, selectedTool, h
   this._toolPanels = new Map();
   this._telemetry = new Telemetry();
 
   this._toolRegistered = this._toolRegistered.bind(this);
   this._toolUnregistered = this._toolUnregistered.bind(this);
   this._refreshHostTitle = this._refreshHostTitle.bind(this);
   this._splitConsoleOnKeypress = this._splitConsoleOnKeypress.bind(this)
   this.destroy = this.destroy.bind(this);
-  this.stopPicker = this.stopPicker.bind(this);
+  this.highlighterUtils = new ToolboxHighlighterUtils(this);
 
   this._target.on("close", this.destroy);
 
   if (!hostType) {
     hostType = Services.prefs.getCharPref(this._prefs.LAST_HOST);
   }
   if (!selectedTool) {
     selectedTool = Services.prefs.getCharPref(this._prefs.LAST_TOOL);
@@ -187,17 +187,17 @@ Toolbox.prototype = {
     return parseFloat(Services.prefs.getCharPref(ZOOM_PREF));
   },
 
   /**
    * Get the toolbox highlighter front. Note that it may not always have been
    * initialized first. Use `initInspector()` if needed.
    */
   get highlighter() {
-    if (this.isRemoteHighlightable) {
+    if (this.highlighterUtils.isRemoteHighlightable) {
       return this._highlighter;
     } else {
       return null;
     }
   },
 
   /**
    * Get the toolbox's inspector front. Note that it may not always have been
@@ -552,18 +552,18 @@ Toolbox.prototype = {
     this._pickerButton = this.doc.createElement("toolbarbutton");
     this._pickerButton.id = "command-button-pick";
     this._pickerButton.className = "command-button";
     this._pickerButton.setAttribute("tooltiptext", toolboxStrings("pickButton.tooltip"));
 
     let container = this.doc.querySelector("#toolbox-buttons");
     container.appendChild(this._pickerButton);
 
-    this.togglePicker = this.togglePicker.bind(this);
-    this._pickerButton.addEventListener("command", this.togglePicker, false);
+    this._togglePicker = this.highlighterUtils.togglePicker.bind(this.highlighterUtils);
+    this._pickerButton.addEventListener("command", this._togglePicker, false);
   },
 
   /**
    * Build a tab for one tool definition and add to the toolbox
    *
    * @param {string} toolDefinition
    *        Tool definition of the tool to build a tab for.
    */
@@ -1031,17 +1031,17 @@ Toolbox.prototype = {
   initInspector: function() {
     let deferred = promise.defer();
 
     if (!this._inspector) {
       this._inspector = InspectorFront(this._target.client, this._target.form);
       this._inspector.getWalker().then(walker => {
         this._walker = walker;
         this._selection = new Selection(this._walker);
-        if (this.isRemoteHighlightable) {
+        if (this.highlighterUtils.isRemoteHighlightable) {
           this._inspector.getHighlighter().then(highlighter => {
             this._highlighter = highlighter;
             deferred.resolve();
           });
         } else {
           deferred.resolve();
         }
       });
@@ -1081,108 +1081,16 @@ Toolbox.prototype = {
     } else {
       deferred.resolve();
     }
 
     return deferred.promise;
   },
 
   /**
-   * Start/stop the element picker on the debuggee target.
-   */
-  togglePicker: function() {
-    if (this._isPicking) {
-      return this.stopPicker();
-    } else {
-      return this.startPicker();
-    }
-  },
-
-  get isRemoteHighlightable() {
-    return this._target.client.traits.highlightable;
-  },
-
-  /**
-   * Start the element picker on the debuggee target.
-   * This will request the inspector actor to start listening for mouse/touch
-   * events on the target to highlight the hovered/picked element.
-   * Depending on the server-side capabilities, this may fire events when nodes
-   * are hovered.
-   * @return A promise that resolves when the picker has started
-   */
-  startPicker: function() {
-    let deferred = promise.defer();
-
-    let done = () => {
-      this.emit("picker-started");
-      this.on("select", this.stopPicker);
-      deferred.resolve();
-    };
-
-    promise.all([
-      this.initInspector(),
-      this.selectTool("inspector")
-    ]).then(() => {
-      this._isPicking = true;
-      this._pickerButton.setAttribute("checked", "true");
-
-      if (this.isRemoteHighlightable) {
-        this.highlighter.pick().then(done);
-
-        this._onPickerNodeHovered = res => {
-          this.emit("picker-node-hovered", res.node);
-        };
-        this.walker.on("picker-node-hovered", this._onPickerNodeHovered);
-
-        this._onPickerNodePicked = res => {
-          this.selection.setNodeFront(res.node, "picker-node-picked");
-          this.stopPicker();
-        };
-        this.walker.on("picker-node-picked", this._onPickerNodePicked);
-      } else {
-        this.walker.pick().then(node => {
-          this.selection.setNodeFront(node, "picker-node-picked");
-          this.stopPicker();
-        });
-        done();
-      }
-    });
-
-    return deferred.promise;
-  },
-
-  /**
-   * Stop the element picker
-   * @return A promise that resolves when the picker has stopped
-   */
-  stopPicker: function() {
-    let deferred = promise.defer();
-
-    let done = () => {
-      this.emit("picker-stopped");
-      this.off("select", this.stopPicker);
-      deferred.resolve();
-    };
-
-    this.initInspector().then(() => {
-      this._isPicking = false;
-      this._pickerButton.removeAttribute("checked");
-      if (this.isRemoteHighlightable) {
-        this.highlighter.cancelPick().then(done);
-        this.walker.off("picker-node-hovered", this._onPickerNodeHovered);
-        this.walker.off("picker-node-picked", this._onPickerNodePicked);
-      } else {
-        this.walker.cancelPick().then(done);
-      }
-    });
-
-    return deferred.promise;
-  },
-
-  /**
    * Get the toolbox's notification box
    *
    * @return The notification box element.
    */
   getNotificationBox: function() {
     return this.doc.getElementById("toolbox-notificationbox");
   },
 
@@ -1223,17 +1131,17 @@ Toolbox.prototype = {
         console.error("Panel " + id + ":", e);
       }
     }
 
     // Destroying the walker and inspector fronts
     outstanding.push(this.destroyInspector());
 
     // Removing buttons
-    this._pickerButton.removeEventListener("command", this.togglePicker, false);
+    this._pickerButton.removeEventListener("command", this._togglePicker, false);
     this._pickerButton = null;
     let container = this.doc.getElementById("toolbox-buttons");
     while (container.firstChild) {
       container.removeChild(container.firstChild);
     }
 
     outstanding.push(this.destroyHost());
 
@@ -1255,8 +1163,189 @@ Toolbox.prototype = {
       this.emit("destroyed");
       // Free _host after the call to destroyed in order to let a chance
       // to destroyed listeners to still query toolbox attributes
       this._host = null;
       this._toolPanels.clear();
     }).then(null, console.error);
   }
 };
+
+/**
+ * The ToolboxHighlighterUtils is what you should use for anything related to
+ * node highlighting and picking.
+ * It encapsulates the logic to connecting to the HighlighterActor.
+ */
+function ToolboxHighlighterUtils(toolbox) {
+  this.toolbox = toolbox;
+  this._onPickerNodeHovered = this._onPickerNodeHovered.bind(this);
+  this._onPickerNodePicked = this._onPickerNodePicked.bind(this);
+  this.stopPicker = this.stopPicker.bind(this);
+}
+
+ToolboxHighlighterUtils.prototype = {
+  /**
+   * Indicates whether the highlighter actor exists on the server.
+   */
+  get isRemoteHighlightable() {
+    return this.toolbox._target.client.traits.highlightable;
+  },
+
+  /**
+   * Start/stop the element picker on the debuggee target.
+   */
+  togglePicker: function() {
+    if (this._isPicking) {
+      return this.stopPicker();
+    } else {
+      return this.startPicker();
+    }
+  },
+
+  _onPickerNodeHovered: function(res) {
+    this.toolbox.emit("picker-node-hovered", res.node);
+  },
+
+  _onPickerNodePicked: function(res) {
+    this.toolbox.selection.setNodeFront(res.node, "picker-node-picked");
+    this.stopPicker();
+  },
+
+  /**
+   * Start the element picker on the debuggee target.
+   * This will request the inspector actor to start listening for mouse/touch
+   * events on the target to highlight the hovered/picked element.
+   * Depending on the server-side capabilities, this may fire events when nodes
+   * are hovered.
+   * @return A promise that resolves when the picker has started
+   */
+  startPicker: function() {
+    let deferred = promise.defer();
+
+    let done = () => {
+      this.toolbox.emit("picker-started");
+      this.toolbox.on("select", this.stopPicker);
+      deferred.resolve();
+    };
+
+    promise.all([
+      this.toolbox.initInspector(),
+      this.toolbox.selectTool("inspector")
+    ]).then(() => {
+      this._isPicking = true;
+      this.toolbox._pickerButton.setAttribute("checked", "true");
+
+      if (this.isRemoteHighlightable) {
+        this.toolbox.highlighter.pick().then(done);
+
+        this.toolbox.walker.on("picker-node-hovered", this._onPickerNodeHovered);
+        this.toolbox.walker.on("picker-node-picked", this._onPickerNodePicked);
+      } else {
+        this.toolbox.walker.pick().then(node => {
+          this.toolbox.selection.setNodeFront(node, "picker-node-picked");
+          this.stopPicker();
+        });
+        done();
+      }
+    });
+
+    return deferred.promise;
+  },
+
+  /**
+   * Stop the element picker
+   * @return A promise that resolves when the picker has stopped
+   */
+  stopPicker: function() {
+    let deferred = promise.defer();
+
+    let done = () => {
+      this.toolbox.emit("picker-stopped");
+      this.toolbox.off("select", this.stopPicker);
+      deferred.resolve();
+    };
+
+    this.toolbox.initInspector().then(() => {
+      this._isPicking = false;
+      this.toolbox._pickerButton.removeAttribute("checked");
+      if (this.isRemoteHighlightable) {
+        this.toolbox.highlighter.cancelPick().then(done);
+        this.toolbox.walker.off("picker-node-hovered", this._onPickerNodeHovered);
+        this.toolbox.walker.off("picker-node-picked", this._onPickerNodePicked);
+      } else {
+        this.toolbox.walker.cancelPick().then(done);
+      }
+    });
+
+    return deferred.promise;
+  },
+
+  /**
+   * Show the box model highlighter on a node, given its NodeFront (this type
+   * of front is normally returned by the WalkerActor).
+   * @return a promise that resolves to the nodeFront when the node has been
+   * highlit
+   */
+  highlightNodeFront: function(nodeFront, options={}) {
+    let deferred = promise.defer();
+
+    // If the remote highlighter exists on the target, use it
+    if (this.isRemoteHighlightable) {
+      this.toolbox.initInspector().then(() => {
+        this.toolbox.highlighter.showBoxModel(nodeFront, options).then(() => {
+          this.toolbox.emit("node-highlight", nodeFront);
+          deferred.resolve(nodeFront);
+        });
+      });
+    }
+    // Else, revert to the "older" version of the highlighter in the walker
+    // actor
+    else {
+      this.toolbox.walker.highlight(nodeFront).then(() => {
+        this.toolbox.emit("node-highlight", nodeFront);
+        deferred.resolve(nodeFront);
+      });
+    }
+
+    return deferred.promise;
+  },
+
+  /**
+   * This is a convenience method in case you don't have a nodeFront but a
+   * valueGrip. This is often the case with VariablesView properties.
+   * This method will simply translate the grip into a nodeFront and call
+   * highlightNodeFront
+   * @return a promise that resolves to the nodeFront when the node has been
+   * highlit
+   */
+  highlightDomValueGrip: function(valueGrip, options={}) {
+    return this._translateGripToNodeFront(valueGrip).then(nodeFront => {
+      if (nodeFront) {
+        return this.highlightNodeFront(nodeFront, options);
+      } else {
+        return promise.reject();
+      }
+    });
+  },
+
+  _translateGripToNodeFront: function(grip) {
+    return this.toolbox.initInspector().then(() => {
+      return this.toolbox.walker.getNodeActorFromObjectActor(grip.actor);
+    });
+  },
+
+  /**
+   * Hide the highlighter.
+   * @return a promise that resolves when the highlighter is hidden
+   */
+  unhighlight: function() {
+    if (this.isRemoteHighlightable) {
+      // If the remote highlighter exists on the target, use it
+      return this.toolbox.initInspector().then(() => {
+        return this.toolbox.highlighter.hideBoxModel();
+      });
+    } else {
+      // If not, no need to unhighlight as the older highlight method uses a
+      // setTimeout to hide itself
+      return promise.resolve();
+    }
+  }
+};

--- a/browser/devtools/inspector/test/browser_inspector_basic_highlighter.js
+++ b/browser/devtools/inspector/test/browser_inspector_basic_highlighter.js
@@ -42,17 +42,17 @@ function test() {
   }
 
   function hoverH1InMarkupView() {
     let deferred = promise.defer();
 
     let container = getContainerForRawNode(inspector.markup, doc.querySelector("h1"));
     EventUtils.synthesizeMouse(container.tagLine, 2, 2, {type: "mousemove"},
       inspector.markup.doc.defaultView);
-    inspector.markup.once("node-highlight", deferred.resolve);
+    inspector.toolbox.once("node-highlight", deferred.resolve);
 
     return deferred.promise;
   }
 
   function assertH1Highlighted() {
     ok(isHighlighting(), "The highlighter is shown on a markup container hover");
     is(getHighlitNode(), doc.querySelector("h1"), "The highlighter highlights the right node");
     return promise.resolve();

--- a/browser/devtools/inspector/test/browser_inspector_bug_674871.js
+++ b/browser/devtools/inspector/test/browser_inspector_bug_674871.js
@@ -53,17 +53,17 @@ function test()
         getHighlighterOutline().setAttribute("disable-transitions", "true");
         runTests();
       });
     });
   }
 
   function runTests()
   {
-    inspector.toolbox.startPicker().then(() => {
+    inspector.toolbox.highlighterUtils.startPicker().then(() => {
       moveMouseOver(iframeNode, 1, 1, isTheIframeHighlighted);
     });
   }
 
   function isTheIframeHighlighted()
   {
     let outlineRect = getHighlighterOutlineRect();
     let iframeRect = iframeNode.getBoundingClientRect();
@@ -81,17 +81,17 @@ function test()
   function isTheIframeContentHighlighted()
   {
     is(getHighlitNode(), iframeBodyNode, "highlighter shows the right node");
 
     // 184 == 200 + 11(border) + 13(padding) - 40(scroll)
     let outlineRect = getHighlighterOutlineRect();
     is(outlineRect.height, 184, "highlighter height");
 
-    inspector.toolbox.stopPicker().then(() => {
+    inspector.toolbox.highlighterUtils.stopPicker().then(() => {
       let target = TargetFactory.forTab(gBrowser.selectedTab);
       gDevTools.closeToolbox(target);
       finishUp();
     });
   }
 
   function finishUp()
   {

--- a/browser/devtools/inspector/test/browser_inspector_bug_699308_iframe_navigation.js
+++ b/browser/devtools/inspector/test/browser_inspector_bug_699308_iframe_navigation.js
@@ -10,17 +10,17 @@ function test() {
   function startTest() {
     openInspector(aInspector => {
       inspector = aInspector;
       runInspectorTests();
     });
   }
 
   function showHighlighter(cb) {
-    inspector.toolbox.startPicker().then(() => {
+    inspector.toolbox.highlighterUtils.startPicker().then(() => {
       EventUtils.synthesizeMouse(content.document.body, 1, 1,
         {type: "mousemove"}, content);
       inspector.toolbox.once("picker-node-hovered", () => {
         executeSoon(() => {
           getHighlighterOutline().setAttribute("disable-transitions", "true");
           cb();
         });
       });
@@ -58,17 +58,17 @@ function test() {
 
     finishTest();
   }
 
   function finishTest() {
     is(iframeLoads, 2, "iframe loads");
     ok(checksAfterLoads, "the Inspector tests got the chance to run after iframe reloads");
 
-    inspector.toolbox.stopPicker().then(() => {
+    inspector.toolbox.highlighterUtils.stopPicker().then(() => {
       iframe = null;
       gBrowser.removeCurrentTab();
       executeSoon(finish);
     });
   }
 
   waitForExplicitFinish();
 

--- a/browser/devtools/inspector/test/browser_inspector_bug_958169_switch_to_inspector_on_pick.js
+++ b/browser/devtools/inspector/test/browser_inspector_bug_958169_switch_to_inspector_on_pick.js
@@ -19,17 +19,17 @@ function test() {
 
   content.location = "data:text/html,<p>Switch to inspector on pick</p>";
 }
 
 function startTests() {
   Task.spawn(function() {
     yield openToolbox();
     yield startPickerAndAssertSwitchToInspector();
-    yield toolbox.stopPicker();
+    yield toolbox.highlighterUtils.stopPicker();
 
     finishTests();
   }).then(null, Cu.reportError);
 }
 
 function openToolbox() {
   let target = TargetFactory.forTab(gBrowser.selectedTab);
   return gDevTools.showToolbox(target, "webconsole").then(aToolbox => {

--- a/browser/devtools/inspector/test/browser_inspector_bug_958456_highlight_comments.js
+++ b/browser/devtools/inspector/test/browser_inspector_bug_958456_highlight_comments.js
@@ -82,17 +82,17 @@ function prepareHighlighter() {
   });
   return deferred.promise;
 }
 
 function hoverContainer(container) {
   let deferred = promise.defer();
   EventUtils.synthesizeMouse(container.tagLine, 2, 2, {type: "mousemove"},
       markupView.doc.defaultView);
-  inspector.markup.once("node-highlight", deferred.resolve);
+  inspector.toolbox.once("node-highlight", deferred.resolve);
   return deferred.promise;
 }
 
 function hoverElement(selector) {
   info("Hovering node " + selector + " in the markup view");
   let container = getContainerForRawNode(markupView, doc.querySelector(selector));
   return hoverContainer(container);
 }

--- a/browser/devtools/inspector/test/browser_inspector_bug_961771_picker_stops_on_tool_select.js
+++ b/browser/devtools/inspector/test/browser_inspector_bug_961771_picker_stops_on_tool_select.js
@@ -28,17 +28,17 @@ function test() {
       inspector = aInspector;
 
       toolbox.once("picker-stopped", () => {
         ok(true, "picker-stopped event fired after switch tools, so picker is closed");
         finishUp();
       });
 
       Task.spawn(function() {
-        yield toolbox.startPicker();
+        yield toolbox.highlighterUtils.startPicker();
         yield toolbox.selectNextTool();
       }).then(null, Cu.reportError);
     });
   }
 
   function finishUp() {
     inspector = doc = toolbox = null;
     gBrowser.removeCurrentTab();

--- a/browser/devtools/inspector/test/browser_inspector_highlighter.js
+++ b/browser/devtools/inspector/test/browser_inspector_highlighter.js
@@ -47,17 +47,17 @@ function createDocument() {
   doc.body.appendChild(div2);
   doc.body.appendChild(div3);
 
   openInspector(aInspector => {
     inspector = aInspector;
     inspector.selection.setNode(div, null);
     inspector.once("inspector-updated", () => {
       getHighlighterOutline().setAttribute("disable-transitions", "true");
-      inspector.toolbox.startPicker().then(testMouseOverH1Highlights);
+      inspector.toolbox.highlighterUtils.startPicker().then(testMouseOverH1Highlights);
     });
   });
 }
 
 function testMouseOverH1Highlights() {
   inspector.toolbox.once("picker-node-hovered", () => {
     ok(isHighlighting(), "Highlighter is shown");
     is(getHighlitNode(), h1, "Highlighter's outline correspond to the selected node");
@@ -104,17 +104,17 @@ function testOutlineDimensions() {
     is(outlineWidth, h1Width, "outline width matches dimensions of element (zoomed)");
     is(outlineHeight, h1Height, "outline height matches dimensions of element (zoomed)");
 
     executeSoon(finishUp);
   }, 500);
 }
 
 function finishUp() {
-  inspector.toolbox.stopPicker().then(() => {
+  inspector.toolbox.highlighterUtils.stopPicker().then(() => {
     doc = h1 = inspector = null;
     let target = TargetFactory.forTab(gBrowser.selectedTab);
     gDevTools.closeToolbox(target);
     gBrowser.removeCurrentTab();
     finish();
   });
 }
 

--- a/browser/devtools/inspector/test/browser_inspector_iframeTest.js
+++ b/browser/devtools/inspector/test/browser_inspector_iframeTest.js
@@ -29,17 +29,17 @@ function createDocument() {
       iframe2.removeEventListener("load", arguments.callee, false);
 
       div2 = iframe2.contentDocument.createElement('div');
       div2.textContent = 'nested div';
       iframe2.contentDocument.body.appendChild(div2);
       // Open the inspector, start the picker mode, and start the tests
       openInspector(aInspector => {
         inspector = aInspector;
-        inspector.toolbox.startPicker().then(runTests);
+        inspector.toolbox.highlighterUtils.startPicker().then(runTests);
       });
     }, false);
 
     iframe2.src = 'data:text/html,nested iframe';
     iframe1.contentDocument.body.appendChild(iframe2);
   }, false);
 
   iframe1.src = 'data:text/html,little iframe';
@@ -70,33 +70,33 @@ function testDiv2Highlighter() {
   moveMouseOver(div2, () => {
     is(getHighlitNode(), div2, "highlighter matches selection");
     selectRoot();
   });
 }
 
 function selectRoot() {
   // Select the root document element to clear the breadcrumbs.
-  inspector.selection.setNode(doc.documentElement);
+  inspector.selection.setNode(doc.documentElement, null);
   inspector.once("inspector-updated", selectIframe);
 }
 
 function selectIframe() {
   // Directly select an element in an iframe (without navigating to it
   // with mousemoves).
-  inspector.selection.setNode(div2);
+  inspector.selection.setNode(div2, null);
   inspector.once("inspector-updated", () => {
     let breadcrumbs = inspector.breadcrumbs;
     is(breadcrumbs.nodeHierarchy.length, 9, "Should have 9 items");
     finishUp();
   });
 }
 
 function finishUp() {
-  inspector.toolbox.stopPicker().then(() => {
+  inspector.toolbox.highlighterUtils.stopPicker().then(() => {
     doc = div1 = div2 = iframe1 = iframe2 = inspector = null;
     let target = TargetFactory.forTab(gBrowser.selectedTab);
     gDevTools.closeToolbox(target);
     gBrowser.removeCurrentTab();
     finish();
   });
 }
 

--- a/browser/devtools/main.js
+++ b/browser/devtools/main.js
@@ -104,17 +104,17 @@ Tools.inspector = {
   icon: "chrome://browser/skin/devtools/tool-inspector.svg",
   url: "chrome://browser/content/devtools/inspector/inspector.xul",
   label: l10n("inspector.label", inspectorStrings),
   tooltip: l10n("inspector.tooltip", inspectorStrings),
   inMenu: true,
 
   preventClosingOnKey: true,
   onkey: function(panel) {
-    panel.toolbox.togglePicker();
+    panel.toolbox.highlighterUtils.togglePicker();
   },
 
   isTargetSupported: function(target) {
     return true;
   },
 
   build: function(iframeWindow, toolbox) {
     let panel = new InspectorPanel(iframeWindow, toolbox);

--- a/browser/devtools/markupview/markup-view.js
+++ b/browser/devtools/markupview/markup-view.js
@@ -49,20 +49,16 @@ loader.lazyGetter(this, "AutocompletePop
 /**
  * The markup tree.  Manages the mapping of nodes to MarkupContainers,
  * updating based on mutations, and the undo/redo bindings.
  *
  * @param Inspector aInspector
  *        The inspector we're watching.
  * @param iframe aFrame
  *        An iframe in which the caller has kindly loaded markup-view.xhtml.
- *
- * Fires the following events:
- * - node-highlight: When a node in the markup-view is hovered and the
- *   corresponding node in the content gets highlighted
  */
 function MarkupView(aInspector, aFrame, aControllerWindow) {
   this._inspector = aInspector;
   this.walker = this._inspector.walker;
   this._frame = aFrame;
   this.doc = this._frame.contentDocument;
   this._elt = this.doc.querySelector("#root");
   this.htmlEditor = new HTMLEditor(this.doc);
@@ -169,51 +165,21 @@ MarkupView.prototype = {
     }
   },
 
   _onMouseLeave: function() {
     this._hideBoxModel();
   },
 
   _showBoxModel: function(nodeFront, options={}) {
-    let toolbox = this._inspector.toolbox;
-
-    // If the remote highlighter exists on the target, use it
-    if (toolbox.isRemoteHighlightable) {
-      toolbox.initInspector().then(() => {
-        toolbox.highlighter.showBoxModel(nodeFront, options).then(() => {
-          this.emit("node-highlight", nodeFront);
-        });
-      });
-    }
-    // Else, revert to the "older" version of the highlighter in the walker
-    // actor
-    else {
-      this.walker.highlight(nodeFront).then(() => {
-        this.emit("node-highlight", nodeFront);
-      });
-    }
+    this._inspector.toolbox.highlighterUtils.highlightNodeFront(nodeFront, options);
   },
 
   _hideBoxModel: function() {
-    let deferred = promise.defer();
-    let toolbox = this._inspector.toolbox;
-
-    // If the remote highlighter exists on the target, use it
-    if (toolbox.isRemoteHighlightable) {
-      toolbox.initInspector().then(() => {
-        toolbox.highlighter.hideBoxModel().then(deferred.resolve);
-      });
-    } else {
-      deferred.resolve();
-    }
-    // If not, no need to unhighlight as the older highlight method uses a
-    // setTimeout to hide itself
-
-    return deferred.promise;
+    this._inspector.toolbox.highlighterUtils.unhighlight();
   },
 
   _briefBoxModelTimer: null,
   _brieflyShowBoxModel: function(nodeFront, options) {
     let win = this._frame.contentWindow;
 
     if (this._briefBoxModelTimer) {
       win.clearTimeout(this._briefBoxModelTimer);

--- a/browser/devtools/netmonitor/netmonitor-controller.js
+++ b/browser/devtools/netmonitor/netmonitor-controller.js
@@ -52,45 +52,74 @@ const EVENTS = {
   RECEIVED_RESPONSE_CONTENT: "NetMonitor:NetworkEventUpdated:ResponseContent",
 
   // When the request post params are displayed in the UI.
   REQUEST_POST_PARAMS_DISPLAYED: "NetMonitor:RequestPostParamsAvailable",
 
   // When the response body is displayed in the UI.
   RESPONSE_BODY_DISPLAYED: "NetMonitor:ResponseBodyAvailable",
 
-  // When `onTabSelect` is fired and subsequently rendered
+  // When `onTabSelect` is fired and subsequently rendered.
   TAB_UPDATED: "NetMonitor:TabUpdated",
 
-  // Fired when Sidebar is finished being populated
+  // Fired when Sidebar has finished being populated.
   SIDEBAR_POPULATED: "NetMonitor:SidebarPopulated",
 
-  // Fired when NetworkDetailsView is finished being populated
+  // Fired when NetworkDetailsView has finished being populated.
   NETWORKDETAILSVIEW_POPULATED: "NetMonitor:NetworkDetailsViewPopulated",
 
-  // Fired when NetworkDetailsView is finished being populated
-  CUSTOMREQUESTVIEW_POPULATED: "NetMonitor:CustomRequestViewPopulated"
+  // Fired when CustomRequestView has finished being populated.
+  CUSTOMREQUESTVIEW_POPULATED: "NetMonitor:CustomRequestViewPopulated",
+
+  // Fired when charts have been displayed in the PerformanceStatisticsView.
+  PLACEHOLDER_CHARTS_DISPLAYED: "NetMonitor:PlaceholderChartsDisplayed",
+  PRIMED_CACHE_CHART_DISPLAYED: "NetMonitor:PrimedChartsDisplayed",
+  EMPTY_CACHE_CHART_DISPLAYED: "NetMonitor:EmptyChartsDisplayed"
+};
+
+// Descriptions for what this frontend is currently doing.
+const ACTIVITY_TYPE = {
+  // Standing by and handling requests normally.
+  NONE: 0,
+
+  // Forcing the target to reload with cache enabled or disabled.
+  RELOAD: {
+    WITH_CACHE_ENABLED: 1,
+    WITH_CACHE_DISABLED: 2
+  },
+
+  // Enabling or disabling the cache without triggering a reload.
+  ENABLE_CACHE: 3,
+  DISABLE_CACHE: 4
 };
 
 Cu.import("resource://gre/modules/Services.jsm");
 Cu.import("resource://gre/modules/XPCOMUtils.jsm");
-Cu.import("resource://gre/modules/Task.jsm");
-Cu.import("resource:///modules/devtools/shared/event-emitter.js");
 Cu.import("resource:///modules/devtools/SideMenuWidget.jsm");
 Cu.import("resource:///modules/devtools/VariablesView.jsm");
 Cu.import("resource:///modules/devtools/VariablesViewController.jsm");
 Cu.import("resource:///modules/devtools/ViewHelpers.jsm");
-const { Promise: promise } = Cu.import("resource://gre/modules/Promise.jsm", {});
 
 const require = Cu.import("resource://gre/modules/devtools/Loader.jsm", {}).devtools.require;
+const promise = Cu.import("resource://gre/modules/Promise.jsm", {}).Promise;
+const EventEmitter = require("devtools/shared/event-emitter");
 const Editor = require("devtools/sourceeditor/editor");
 
+XPCOMUtils.defineLazyModuleGetter(this, "Chart",
+  "resource:///modules/devtools/Chart.jsm");
+
+XPCOMUtils.defineLazyModuleGetter(this, "Task",
+  "resource://gre/modules/Task.jsm");
+
 XPCOMUtils.defineLazyModuleGetter(this, "PluralForm",
   "resource://gre/modules/PluralForm.jsm");
 
+XPCOMUtils.defineLazyModuleGetter(this, "DevToolsUtils",
+  "resource://gre/modules/devtools/DevToolsUtils.jsm");
+
 XPCOMUtils.defineLazyModuleGetter(this, "devtools",
   "resource://gre/modules/devtools/Loader.jsm");
 
 Object.defineProperty(this, "NetworkHelper", {
   get: function() {
     return devtools.require("devtools/toolkit/webconsole/network-helper");
   },
   configurable: true,
@@ -250,19 +279,91 @@ let NetMonitorController = {
 
         if (aCallback) {
           aCallback();
         }
       });
     });
   },
 
+  /**
+   * Gets the activity currently performed by the frontend.
+   * @return number
+   */
+  getCurrentActivity: function() {
+    return this._currentActivity || ACTIVITY_TYPE.NONE;
+  },
+
+  /**
+   * Triggers a specific "activity" to be performed by the frontend. This can be,
+   * for example, triggering reloads or enabling/disabling cache.
+   *
+   * @param number aType
+   *        The activity type. See the ACTIVITY_TYPE const.
+   * @return object
+   *         A promise resolved once the activity finishes and the frontend
+   *         is back into "standby" mode.
+   */
+  triggerActivity: function(aType) {
+    // Puts the frontend into "standby" (when there's no particular activity).
+    let standBy = () => {
+      this._currentActivity = ACTIVITY_TYPE.NONE;
+    };
+
+    // Waits for a series of "navigation start" and "navigation stop" events.
+    let waitForNavigation = () => {
+      let deferred = promise.defer();
+      this._target.once("will-navigate", () => {
+        this._target.once("navigate", () => {
+          deferred.resolve();
+        });
+      });
+      return deferred.promise;
+    };
+
+    // Reconfigures the tab, optionally triggering a reload.
+    let reconfigureTab = aOptions => {
+      let deferred = promise.defer();
+      this._target.activeTab.reconfigure(aOptions, deferred.resolve);
+      return deferred.promise;
+    };
+
+    // Reconfigures the tab and waits for the target to finish navigating.
+    let reconfigureTabAndWaitForNavigation = aOptions => {
+      aOptions.performReload = true;
+      let navigationFinished = waitForNavigation();
+      return reconfigureTab(aOptions).then(() => navigationFinished);
+    }
+
+    if (aType == ACTIVITY_TYPE.RELOAD.WITH_CACHE_ENABLED) {
+      this._currentActivity = ACTIVITY_TYPE.ENABLE_CACHE;
+      this._target.once("will-navigate", () => this._currentActivity = aType);
+      return reconfigureTabAndWaitForNavigation({ cacheEnabled: true }).then(standBy);
+    }
+    if (aType == ACTIVITY_TYPE.RELOAD.WITH_CACHE_DISABLED) {
+      this._currentActivity = ACTIVITY_TYPE.DISABLE_CACHE;
+      this._target.once("will-navigate", () => this._currentActivity = aType);
+      return reconfigureTabAndWaitForNavigation({ cacheEnabled: false }).then(standBy);
+    }
+    if (aType == ACTIVITY_TYPE.ENABLE_CACHE) {
+      this._currentActivity = aType;
+      return reconfigureTab({ cacheEnabled: true, performReload: false }).then(standBy);
+    }
+    if (aType == ACTIVITY_TYPE.DISABLE_CACHE) {
+      this._currentActivity = aType;
+      return reconfigureTab({ cacheEnabled: false, performReload: false }).then(standBy);
+    }
+    this._currentActivity = ACTIVITY_TYPE.NONE;
+    return promise.reject(new Error("Invalid activity type"));
+  },
+
   _startup: null,
   _shutdown: null,
   _connection: null,
+  _currentActivity: null,
   client: null,
   tabClient: null,
   webConsoleClient: null
 };
 
 /**
  * Functions handling target-related lifetime events.
  */
@@ -309,16 +410,21 @@ TargetEventsHandler.prototype = {
   _onTabNavigated: function(aType, aPacket) {
     switch (aType) {
       case "will-navigate": {
         // Reset UI.
         NetMonitorView.RequestsMenu.reset();
         NetMonitorView.Sidebar.reset();
         NetMonitorView.NetworkDetails.reset();
 
+        // Switch to the default network traffic inspector view.
+        if (NetMonitorController.getCurrentActivity() == ACTIVITY_TYPE.NONE) {
+          NetMonitorView.showNetworkInspectorView();
+        }
+
         window.emit(EVENTS.TARGET_WILL_NAVIGATE);
         break;
       }
       case "navigate": {
         window.emit(EVENTS.TARGET_DID_NAVIGATE);
         break;
       }
     }
@@ -378,17 +484,16 @@ NetworkEventsHandler.prototype = {
    * @param string aType
    *        Message type.
    * @param object aPacket
    *        The message received from the server.
    */
   _onNetworkEvent: function(aType, aPacket) {
     let { actor, startedDateTime, method, url, isXHR } = aPacket.eventActor;
     NetMonitorView.RequestsMenu.addRequest(actor, startedDateTime, method, url, isXHR);
-
     window.emit(EVENTS.NETWORK_EVENT);
   },
 
   /**
    * The "networkEventUpdate" message type handler.
    *
    * @param string aType
    *        Message type.
@@ -580,17 +685,18 @@ NetworkEventsHandler.prototype = {
  */
 let L10N = new ViewHelpers.L10N(NET_STRINGS_URI);
 
 /**
  * Shortcuts for accessing various network monitor preferences.
  */
 let Prefs = new ViewHelpers.Prefs("devtools.netmonitor", {
   networkDetailsWidth: ["Int", "panes-network-details-width"],
-  networkDetailsHeight: ["Int", "panes-network-details-height"]
+  networkDetailsHeight: ["Int", "panes-network-details-height"],
+  statistics: ["Bool", "statistics"]
 });
 
 /**
  * Returns true if this is document is in RTL mode.
  * @return boolean
  */
 XPCOMUtils.defineLazyGetter(window, "isRTL", function() {
   return window.getComputedStyle(document.documentElement, null).direction == "rtl";
@@ -612,16 +718,49 @@ NetMonitorController.NetworkEventsHandle
  */
 Object.defineProperties(window, {
   "gNetwork": {
     get: function() NetMonitorController.NetworkEventsHandler
   }
 });
 
 /**
+ * Makes sure certain properties are available on all objects in a data store.
+ *
+ * @param array aDataStore
+ *        A list of objects for which to check the availability of properties.
+ * @param array aMandatoryFields
+ *        A list of strings representing properties of objects in aDataStore.
+ * @return object
+ *         A promise resolved when all objects in aDataStore contain the
+ *         properties defined in aMandatoryFields.
+ */
+function whenDataAvailable(aDataStore, aMandatoryFields) {
+  let deferred = promise.defer();
+
+  let interval = setInterval(() => {
+    if (aDataStore.every(item => aMandatoryFields.every(field => field in item))) {
+      clearInterval(interval);
+      clearTimeout(timer);
+      deferred.resolve();
+    }
+  }, WDA_DEFAULT_VERIFY_INTERVAL);
+
+  let timer = setTimeout(() => {
+    clearInterval(interval);
+    deferred.reject(new Error("Timed out while waiting for data"));
+  }, WDA_DEFAULT_GIVE_UP_TIMEOUT);
+
+  return deferred.promise;
+};
+
+const WDA_DEFAULT_VERIFY_INTERVAL = 50; // ms
+const WDA_DEFAULT_GIVE_UP_TIMEOUT = 2000; // ms
+
+/**
  * Helper method for debugging.
  * @param string
  */
 function dumpn(str) {
   if (wantLogging) {
     dump("NET-FRONTEND: " + str + "\n");
   }
 }

--- a/browser/devtools/netmonitor/netmonitor-view.js
+++ b/browser/devtools/netmonitor/netmonitor-view.js
@@ -16,16 +16,17 @@ const REQUESTS_WATERFALL_HEADER_TICKS_MU
 const REQUESTS_WATERFALL_HEADER_TICKS_SPACING_MIN = 60; // px
 const REQUESTS_WATERFALL_BACKGROUND_TICKS_MULTIPLE = 5; // ms
 const REQUESTS_WATERFALL_BACKGROUND_TICKS_SCALES = 3;
 const REQUESTS_WATERFALL_BACKGROUND_TICKS_SPACING_MIN = 10; // px
 const REQUESTS_WATERFALL_BACKGROUND_TICKS_COLOR_RGB = [128, 136, 144];
 const REQUESTS_WATERFALL_BACKGROUND_TICKS_OPACITY_MIN = 32; // byte
 const REQUESTS_WATERFALL_BACKGROUND_TICKS_OPACITY_ADD = 32; // byte
 const DEFAULT_HTTP_VERSION = "HTTP/1.1";
+const REQUEST_TIME_DECIMALS = 2;
 const HEADERS_SIZE_DECIMALS = 3;
 const CONTENT_SIZE_DECIMALS = 2;
 const CONTENT_MIME_TYPE_ABBREVIATIONS = {
   "ecmascript": "js",
   "javascript": "js",
   "x-javascript": "js"
 };
 const CONTENT_MIME_TYPE_MAPPINGS = {
@@ -52,16 +53,17 @@ const GENERIC_VARIABLES_VIEW_SETTINGS = 
   searchEnabled: true,
   editableValueTooltip: "",
   editableNameTooltip: "",
   preventDisableOnChange: true,
   preventDescriptorModifiers: true,
   eval: () => {},
   switch: () => {}
 };
+const NETWORK_ANALYSIS_PIE_CHART_DIAMETER = 200; // px
 
 /**
  * Object defining the network monitor view components.
  */
 let NetMonitorView = {
   /**
    * Initializes the network monitor view.
    */
@@ -97,16 +99,24 @@ let NetMonitorView = {
     this._detailsPaneToggleButton = $("#details-pane-toggle");
 
     this._collapsePaneString = L10N.getStr("collapseDetailsPane");
     this._expandPaneString = L10N.getStr("expandDetailsPane");
 
     this._detailsPane.setAttribute("width", Prefs.networkDetailsWidth);
     this._detailsPane.setAttribute("height", Prefs.networkDetailsHeight);
     this.toggleDetailsPane({ visible: false });
+
+    // Disable the performance statistics mode.
+    if (!Prefs.statistics) {
+      $("#request-menu-context-perf").hidden = true;
+      $("#notice-perf-message").hidden = true;
+      $("#requests-menu-network-summary-button").hidden = true;
+      $("#requests-menu-network-summary-label").hidden = true;
+    }
   },
 
   /**
    * Destroys the UI for all the displayed panes.
    */
   _destroyPanes: function() {
     dumpn("Destroying the NetMonitorView panes");
 
@@ -116,18 +126,19 @@ let NetMonitorView = {
     this._detailsPane = null;
     this._detailsPaneToggleButton = null;
   },
 
   /**
    * Gets the visibility state of the network details pane.
    * @return boolean
    */
-  get detailsPaneHidden()
-    this._detailsPane.hasAttribute("pane-collapsed"),
+  get detailsPaneHidden() {
+    return this._detailsPane.hasAttribute("pane-collapsed");
+  },
 
   /**
    * Sets the network details pane hidden or visible.
    *
    * @param object aFlags
    *        An object containing some of the following properties:
    *        - visible: true if the pane should be shown, false to hide
    *        - animated: true to display an animation on toggle
@@ -153,16 +164,76 @@ let NetMonitorView = {
     }
 
     if (aTabIndex !== undefined) {
       $("#event-details-pane").selectedIndex = aTabIndex;
     }
   },
 
   /**
+   * Gets the current mode for this tool.
+   * @return string (e.g, "network-inspector-view" or "network-statistics-view")
+   */
+  get currentFrontendMode() {
+    return this._body.selectedPanel.id;
+  },
+
+  /**
+   * Toggles between the frontend view modes ("Inspector" vs. "Statistics").
+   */
+  toggleFrontendMode: function() {
+    if (this.currentFrontendMode != "network-inspector-view") {
+      this.showNetworkInspectorView();
+    } else {
+      this.showNetworkStatisticsView();
+    }
+  },
+
+  /**
+   * Switches to the "Inspector" frontend view mode.
+   */
+  showNetworkInspectorView: function() {
+    this._body.selectedPanel = $("#network-inspector-view");
+    this.RequestsMenu._flushWaterfallViews(true);
+  },
+
+  /**
+   * Switches to the "Statistics" frontend view mode.
+   */
+  showNetworkStatisticsView: function() {
+    this._body.selectedPanel = $("#network-statistics-view");
+
+    let controller = NetMonitorController;
+    let requestsView = this.RequestsMenu;
+    let statisticsView = this.PerformanceStatistics;
+
+    Task.spawn(function() {
+      statisticsView.displayPlaceholderCharts();
+      yield controller.triggerActivity(ACTIVITY_TYPE.RELOAD.WITH_CACHE_ENABLED);
+
+      try {
+        // • The response headers and status code are required for determining
+        // whether a response is "fresh" (cacheable).
+        // • The response content size and request total time are necessary for
+        // populating the statistics view.
+        // • The response mime type is used for categorization.
+        yield whenDataAvailable(requestsView.attachments, [
+          "responseHeaders", "status", "contentSize", "mimeType", "totalTime"
+        ]);
+      } catch (ex) {
+        // Timed out while waiting for data. Continue with what we have.
+        DevToolsUtils.reportException("showNetworkStatisticsView", ex);
+      }
+
+      statisticsView.createPrimedCacheChart(requestsView.items);
+      statisticsView.createEmptyCacheChart(requestsView.items);
+    });
+  },
+
+  /**
    * Lazily initializes and returns a promise for a Editor instance.
    *
    * @param string aId
    *        The id of the editor placeholder node.
    * @return object
    *         A promise that is resolved when the editor is available.
    */
   editor: function(aId) {
@@ -258,46 +329,55 @@ function RequestsMenuView() {
 RequestsMenuView.prototype = Heritage.extend(WidgetMethods, {
   /**
    * Initialization function, called when the network monitor is started.
    */
   initialize: function() {
     dumpn("Initializing the RequestsMenuView");
 
     this.widget = new SideMenuWidget($("#requests-menu-contents"));
-    this._splitter = $('#splitter');
-    this._summary = $("#request-menu-network-summary");
+    this._splitter = $("#network-inspector-view-splitter");
+    this._summary = $("#requests-menu-network-summary-label");
+    this._summary.setAttribute("value", L10N.getStr("networkMenu.empty"));
 
     this.allowFocusOnRightClick = true;
     this.widget.maintainSelectionVisible = false;
     this.widget.autoscrollWithAppendedItems = true;
 
     this.widget.addEventListener("select", this._onSelect, false);
     this._splitter.addEventListener("mousemove", this._onResize, false);
     window.addEventListener("resize", this._onResize, false);
 
     this.requestsMenuSortEvent = getKeyWithEvent(this.sortBy.bind(this));
     this.requestsMenuFilterEvent = getKeyWithEvent(this.filterOn.bind(this));
-    this.clearEvent = this.clear.bind(this);
+    this.reqeustsMenuClearEvent = this.clear.bind(this);
     this._onContextShowing = this._onContextShowing.bind(this);
     this._onContextNewTabCommand = this.openRequestInTab.bind(this);
     this._onContextCopyUrlCommand = this.copyUrl.bind(this);
+    this._onContextCopyImageAsDataUriCommand = this.copyImageAsDataUri.bind(this);
     this._onContextResendCommand = this.cloneSelectedRequest.bind(this);
+    this._onContextPerfCommand = () => NetMonitorView.toggleFrontendMode();
 
     this.sendCustomRequestEvent = this.sendCustomRequest.bind(this);
     this.closeCustomRequestEvent = this.closeCustomRequest.bind(this);
     this.cloneSelectedRequestEvent = this.cloneSelectedRequest.bind(this);
 
     $("#toolbar-labels").addEventListener("click", this.requestsMenuSortEvent, false);
     $("#requests-menu-footer").addEventListener("click", this.requestsMenuFilterEvent, false);
-    $("#requests-menu-clear-button").addEventListener("click", this.clearEvent, false);
+    $("#requests-menu-clear-button").addEventListener("click", this.reqeustsMenuClearEvent, false);
     $("#network-request-popup").addEventListener("popupshowing", this._onContextShowing, false);
     $("#request-menu-context-newtab").addEventListener("command", this._onContextNewTabCommand, false);
     $("#request-menu-context-copy-url").addEventListener("command", this._onContextCopyUrlCommand, false);
+    $("#request-menu-context-copy-image-as-data-uri").addEventListener("command", this._onContextCopyImageAsDataUriCommand, false);
     $("#request-menu-context-resend").addEventListener("command", this._onContextResendCommand, false);
+    $("#request-menu-context-perf").addEventListener("command", this._onContextPerfCommand, false);
+
+    $("#requests-menu-perf-notice-button").addEventListener("command", this._onContextPerfCommand, false);
+    $("#requests-menu-network-summary-button").addEventListener("command", this._onContextPerfCommand, false);
+    $("#requests-menu-network-summary-label").addEventListener("click", this._onContextPerfCommand, false);
 
     $("#custom-request-send-button").addEventListener("click", this.sendCustomRequestEvent, false);
     $("#custom-request-close-button").addEventListener("click", this.closeCustomRequestEvent, false);
     $("#headers-summary-resend").addEventListener("click", this.cloneSelectedRequestEvent, false);
   },
 
   /**
    * Destruction function, called when the network monitor is closed.
@@ -306,32 +386,39 @@ RequestsMenuView.prototype = Heritage.ex
     dumpn("Destroying the SourcesView");
 
     this.widget.removeEventListener("select", this._onSelect, false);
     this._splitter.removeEventListener("mousemove", this._onResize, false);
     window.removeEventListener("resize", this._onResize, false);
 
     $("#toolbar-labels").removeEventListener("click", this.requestsMenuSortEvent, false);
     $("#requests-menu-footer").removeEventListener("click", this.requestsMenuFilterEvent, false);
-    $("#requests-menu-clear-button").removeEventListener("click", this.clearEvent, false);
+    $("#requests-menu-clear-button").removeEventListener("click", this.reqeustsMenuClearEvent, false);
     $("#network-request-popup").removeEventListener("popupshowing", this._onContextShowing, false);
     $("#request-menu-context-newtab").removeEventListener("command", this._onContextNewTabCommand, false);
     $("#request-menu-context-copy-url").removeEventListener("command", this._onContextCopyUrlCommand, false);
+    $("#request-menu-context-copy-image-as-data-uri").removeEventListener("command", this._onContextCopyImageAsDataUriCommand, false);
     $("#request-menu-context-resend").removeEventListener("command", this._onContextResendCommand, false);
+    $("#request-menu-context-perf").removeEventListener("command", this._onContextPerfCommand, false);
+
+    $("#requests-menu-perf-notice-button").removeEventListener("command", this._onContextPerfCommand, false);
+    $("#requests-menu-network-summary-button").removeEventListener("command", this._onContextPerfCommand, false);
+    $("#requests-menu-network-summary-label").removeEventListener("click", this._onContextPerfCommand, false);
 
     $("#custom-request-send-button").removeEventListener("click", this.sendCustomRequestEvent, false);
     $("#custom-request-close-button").removeEventListener("click", this.closeCustomRequestEvent, false);
     $("#headers-summary-resend").removeEventListener("click", this.cloneSelectedRequestEvent, false);
   },
 
   /**
    * Resets this container (removes all the networking information).
    */
   reset: function() {
     this.empty();
+    this.filterOn("all");
     this._firstRequestStartedMillis = -1;
     this._lastRequestEndedMillis = -1;
   },
 
   /**
    * Specifies if this view may be updated lazily.
    */
   lazyUpdate: true,
@@ -389,16 +476,17 @@ RequestsMenuView.prototype = Heritage.ex
    * the currently selected request.
    */
   cloneSelectedRequest: function() {
     let selected = this.selectedItem.attachment;
 
     // Create the element node for the network request item.
     let menuView = this._createMenuView(selected.method, selected.url);
 
+    // Append a network request item to this container.
     let newItem = this.push([menuView], {
       attachment: Object.create(selected, {
         isCustom: { value: true }
       })
     });
 
     // Immediately switch to new request pane.
     this.selectedItem = newItem;
@@ -417,16 +505,28 @@ RequestsMenuView.prototype = Heritage.ex
    * Copy the request url from the currently selected item.
    */
   copyUrl: function() {
     let selected = this.selectedItem.attachment;
     clipboardHelper.copyString(selected.url, document);
   },
 
   /**
+   * Copy image as data uri.
+   */
+  copyImageAsDataUri: function() {
+    let selected = this.selectedItem.attachment;
+    let { mimeType, text, encoding } = selected.responseContent.content;
+    gNetwork.getString(text).then(aString => {
+      let data = "data:" + mimeType + ";" + encoding + "," + aString;
+      clipboardHelper.copyString(data, document);
+    });
+  },
+
+  /**
    * Send a new HTTP request using the data in the custom request form.
    */
   sendCustomRequest: function() {
     let selected = this.selectedItem.attachment;
 
     let data = Object.create(selected, {
       headers: { value: selected.requestHeaders.headers }
     });
@@ -452,17 +552,17 @@ RequestsMenuView.prototype = Heritage.ex
     NetMonitorView.Sidebar.toggle(false);
    },
 
   /**
    * Filters all network requests in this container by a specified type.
    *
    * @param string aType
    *        Either "all", "html", "css", "js", "xhr", "fonts", "images", "media"
-   *        or "flash".
+   *        "flash" or "other".
    */
   filterOn: function(aType = "all") {
     let target = $("#requests-menu-filter-" + aType + "-button");
     let buttons = document.querySelectorAll(".requests-menu-footer-button");
 
     for (let button of buttons) {
       if (button != target) {
         button.removeAttribute("checked");
@@ -472,38 +572,41 @@ RequestsMenuView.prototype = Heritage.ex
     }
 
     // Filter on whatever was requested.
     switch (aType) {
       case "all":
         this.filterContents(() => true);
         break;
       case "html":
-        this.filterContents(this._onHtml);
+        this.filterContents(e => this.isHtml(e));
         break;
       case "css":
-        this.filterContents(this._onCss);
+        this.filterContents(e => this.isCss(e));
         break;
       case "js":
-        this.filterContents(this._onJs);
+        this.filterContents(e => this.isJs(e));
         break;
       case "xhr":
-        this.filterContents(this._onXhr);
+        this.filterContents(e => this.isXHR(e));
         break;
       case "fonts":
-        this.filterContents(this._onFonts);
+        this.filterContents(e => this.isFont(e));
         break;
       case "images":
-        this.filterContents(this._onImages);
+        this.filterContents(e => this.isImage(e));
         break;
       case "media":
-        this.filterContents(this._onMedia);
+        this.filterContents(e => this.isMedia(e));
         break;
       case "flash":
-        this.filterContents(this._onFlash);
+        this.filterContents(e => this.isFlash(e));
+        break;
+      case "other":
+        this.filterContents(e => this.isOther(e));
         break;
     }
 
     this.refreshSummary();
     this.refreshZebra();
   },
 
   /**
@@ -606,56 +709,60 @@ RequestsMenuView.prototype = Heritage.ex
   /**
    * Predicates used when filtering items.
    *
    * @param object aItem
    *        The filtered item.
    * @return boolean
    *         True if the item should be visible, false otherwise.
    */
-  _onHtml: function({ attachment: { mimeType } })
+  isHtml: function({ attachment: { mimeType } })
     mimeType && mimeType.contains("/html"),
 
-  _onCss: function({ attachment: { mimeType } })
+  isCss: function({ attachment: { mimeType } })
     mimeType && mimeType.contains("/css"),
 
-  _onJs: function({ attachment: { mimeType } })
+  isJs: function({ attachment: { mimeType } })
     mimeType && (
       mimeType.contains("/ecmascript") ||
       mimeType.contains("/javascript") ||
       mimeType.contains("/x-javascript")),
 
-  _onXhr: function({ attachment: { isXHR } })
+  isXHR: function({ attachment: { isXHR } })
     isXHR,
 
-  _onFonts: function({ attachment: { url, mimeType } }) // Fonts are a mess.
+  isFont: function({ attachment: { url, mimeType } }) // Fonts are a mess.
     (mimeType && (
       mimeType.contains("font/") ||
       mimeType.contains("/font"))) ||
     url.contains(".eot") ||
     url.contains(".ttf") ||
     url.contains(".otf") ||
     url.contains(".woff"),
 
-  _onImages: function({ attachment: { mimeType } })
+  isImage: function({ attachment: { mimeType } })
     mimeType && mimeType.contains("image/"),
 
-  _onMedia: function({ attachment: { mimeType } }) // Not including images.
+  isMedia: function({ attachment: { mimeType } }) // Not including images.
     mimeType && (
       mimeType.contains("audio/") ||
       mimeType.contains("video/") ||
       mimeType.contains("model/")),
 
-  _onFlash: function({ attachment: { url, mimeType } }) // Flash is a mess.
+  isFlash: function({ attachment: { url, mimeType } }) // Flash is a mess.
     (mimeType && (
       mimeType.contains("/x-flv") ||
       mimeType.contains("/x-shockwave-flash"))) ||
     url.contains(".swf") ||
     url.contains(".flv"),
 
+  isOther: function(e)
+    !this.isHtml(e) && !this.isCss(e) && !this.isJs(e) && !this.isXHR(e) &&
+    !this.isFont(e) && !this.isImage(e) && !this.isMedia(e) && !this.isFlash(e),
+
   /**
    * Predicates used when sorting items.
    *
    * @param object aFirst
    *        The first item used in the comparison.
    * @param object aSecond
    *        The second item used in the comparison.
    * @return number
@@ -719,18 +826,18 @@ RequestsMenuView.prototype = Heritage.ex
     let totalMillis =
       this._getNewestRequest(visibleItems).attachment.endedMillis -
       this._getOldestRequest(visibleItems).attachment.startedMillis;
 
     // https://developer.mozilla.org/en-US/docs/Localization_and_Plurals
     let str = PluralForm.get(visibleRequestsCount, L10N.getStr("networkMenu.summary"));
     this._summary.setAttribute("value", str
       .replace("#1", visibleRequestsCount)
-      .replace("#2", L10N.numberWithDecimals((totalBytes || 0) / 1024, 2))
-      .replace("#3", L10N.numberWithDecimals((totalMillis || 0) / 1000, 2))
+      .replace("#2", L10N.numberWithDecimals((totalBytes || 0) / 1024, CONTENT_SIZE_DECIMALS))
+      .replace("#3", L10N.numberWithDecimals((totalMillis || 0) / 1000, REQUEST_TIME_DECIMALS))
     );
   },
 
   /**
    * Adds odd/even attributes to all the visible items in this container.
    */
   refreshZebra: function() {
     let visibleItems = this.visibleItems;
@@ -833,16 +940,22 @@ RequestsMenuView.prototype = Heritage.ex
             this.updateMenuView(requestItem, key, value);
             break;
           case "mimeType":
             requestItem.attachment.mimeType = value;
             this.updateMenuView(requestItem, key, value);
             break;
           case "responseContent":
             requestItem.attachment.responseContent = value;
+            // If there's no mime type available when the response content
+            // is received, assume text/plain as a fallback.
+            if (!requestItem.attachment.mimeType) {
+              requestItem.attachment.mimeType = "text/plain";
+              this.updateMenuView(requestItem, "mimeType", "text/plain");
+            }
             break;
           case "totalTime":
             requestItem.attachment.totalTime = value;
             requestItem.attachment.endedMillis = requestItem.attachment.startedMillis + value;
             this.updateMenuView(requestItem, key, value);
             this._registerLastRequestEnd(requestItem.attachment.endedMillis);
             break;
           case "eventTimings":
@@ -1016,16 +1129,21 @@ RequestsMenuView.prototype = Heritage.ex
       }
     }
 
     // Since at least one timing box should've been rendered, unhide the
     // start and end timing cap nodes.
     startCapNode.hidden = false;
     endCapNode.hidden = false;
 
+    // Don't paint things while the waterfall view isn't even visible.
+    if (NetMonitorView.currentFrontendMode != "network-inspector-view") {
+      return;
+    }
+
     // Rescale all the waterfalls so that everything is visible at once.
     this._flushWaterfallViews();
   },
 
   /**
    * Rescales and redraws all the waterfall views in this container.
    *
    * @param boolean aReset
@@ -1129,17 +1247,17 @@ RequestsMenuView.prototype = Heritage.ex
           normalizedTime /= 1000;
           divisionScale = "second";
         }
 
         // Showing too many decimals is bad UX.
         if (divisionScale == "millisecond") {
           normalizedTime |= 0;
         } else {
-          normalizedTime = L10N.numberWithDecimals(normalizedTime, 2);
+          normalizedTime = L10N.numberWithDecimals(normalizedTime, REQUEST_TIME_DECIMALS);
         }
 
         let node = document.createElement("label");
         let text = L10N.getFormatStr("networkMenu." + divisionScale, normalizedTime);
         node.className = "plain requests-menu-timings-division";
         node.setAttribute("division-scale", divisionScale);
         node.style.transform = translateX;
 
@@ -1258,33 +1376,45 @@ RequestsMenuView.prototype = Heritage.ex
       NetMonitorView.Sidebar.toggle(false);
     }
   },
 
   /**
    * The resize listener for this container's window.
    */
   _onResize: function(e) {
+    // Don't paint things while the waterfall view isn't even visible.
+    if (NetMonitorView.currentFrontendMode != "network-inspector-view") {
+      return;
+    }
+
     // Allow requests to settle down first.
     setNamedTimeout(
       "resize-events", RESIZE_REFRESH_RATE, () => this._flushWaterfallViews(true));
   },
 
   /**
    * Handle the context menu opening. Hide items if no request is selected.
    */
   _onContextShowing: function() {
+    let selectedItem = this.selectedItem;
+
     let resendElement = $("#request-menu-context-resend");
-    resendElement.hidden = !this.selectedItem || this.selectedItem.attachment.isCustom;
+    resendElement.hidden = !selectedItem || selectedItem.attachment.isCustom;
 
     let copyUrlElement = $("#request-menu-context-copy-url");
-    copyUrlElement.hidden = !this.selectedItem;
+    copyUrlElement.hidden = !selectedItem;
+
+    let copyImageAsDataUriElement = $("#request-menu-context-copy-image-as-data-uri");
+    copyImageAsDataUriElement.hidden = !selectedItem ||
+      !selectedItem.attachment.responseContent ||
+      !selectedItem.attachment.responseContent.content.mimeType.contains("image/");
 
     let newTabElement = $("#request-menu-context-newtab");
-    newTabElement.hidden = !this.selectedItem;
+    newTabElement.hidden = !selectedItem;
   },
 
   /**
    * Checks if the specified unix time is the first one to be known of,
    * and saves it if so.
    *
    * @param number aUnixTime
    *        The milliseconds to check and save.
@@ -1448,17 +1578,17 @@ SidebarView.prototype = {
   populate: function(aData) {
     let isCustom = aData.isCustom;
     let view = isCustom ?
       NetMonitorView.CustomRequest :
       NetMonitorView.NetworkDetails;
 
     return view.populate(aData).then(() => {
       $("#details-pane").selectedIndex = isCustom ? 0 : 1
-      window.emit(EVENTS.SIDEBAR_POPULATED)
+      window.emit(EVENTS.SIDEBAR_POPULATED);
     });
   },
 
   /**
    * Hides this container.
    */
   reset: function() {
     this.toggle(false);
@@ -1475,17 +1605,16 @@ function CustomRequestView() {
 CustomRequestView.prototype = {
   /**
    * Initialization function, called when the network monitor is started.
    */
   initialize: function() {
     dumpn("Initializing the CustomRequestView");
 
     this.updateCustomRequestEvent = getKeyWithEvent(this.onUpdate.bind(this));
-
     $("#custom-pane").addEventListener("input", this.updateCustomRequestEvent, false);
   },
 
   /**
    * Destruction function, called when the network monitor is closed.
    */
   destroy: function() {
     dumpn("Destroying the CustomRequestView");
@@ -1550,28 +1679,22 @@ CustomRequestView.prototype = {
         let query = $("#custom-query-value").value;
         this.updateCustomUrl(query);
         field = 'url';
         value = $("#custom-url-value").value
         selectedItem.attachment.url = value;
         break;
       case 'body':
         value = $("#custom-postdata-value").value;
-        selectedItem.attachment.requestPostData = {
-          postData: {
-            text: value
-          }
-        };
+        selectedItem.attachment.requestPostData = { postData: { text: value } };
         break;
       case 'headers':
         let headersText = $("#custom-headers-value").value;
         value = parseHeaderText(headersText);
-        selectedItem.attachment.requestHeaders = {
-          headers: value
-        };
+        selectedItem.attachment.requestHeaders = { headers: value };
         break;
     }
 
     NetMonitorView.RequestsMenu.updateMenuView(selectedItem, field, value);
   },
 
   /**
    * Update the query string field based on the url.
@@ -2168,16 +2291,180 @@ NetworkDetailsView.prototype = {
   _paramsPostPayload: "",
   _requestHeaders: "",
   _responseHeaders: "",
   _requestCookies: "",
   _responseCookies: ""
 };
 
 /**
+ * Functions handling the performance statistics view.
+ */
+function PerformanceStatisticsView() {
+}
+
+PerformanceStatisticsView.prototype = {
+  /**
+   * Initializes and displays empty charts in this container.
+   */
+  displayPlaceholderCharts: function() {
+    this._createChart({
+      id: "#primed-cache-chart",
+      title: "charts.cacheEnabled"
+    });
+    this._createChart({
+      id: "#empty-cache-chart",
+      title: "charts.cacheDisabled"
+    });
+    window.emit(EVENTS.PLACEHOLDER_CHARTS_DISPLAYED);
+  },
+
+  /**
+   * Populates and displays the primed cache chart in this container.
+   *
+   * @param array aItems
+   *        @see this._sanitizeChartDataSource
+   */
+  createPrimedCacheChart: function(aItems) {
+    this._createChart({
+      id: "#primed-cache-chart",
+      title: "charts.cacheEnabled",
+      data: this._sanitizeChartDataSource(aItems),
+      sorted: true,
+      totals: {
+        size: L10N.getStr("charts.totalSize"),
+        time: L10N.getStr("charts.totalTime"),
+        cached: L10N.getStr("charts.totalCached"),
+        count: L10N.getStr("charts.totalCount")
+      }
+    });
+    window.emit(EVENTS.PRIMED_CACHE_CHART_DISPLAYED);
+  },
+
+  /**
+   * Populates and displays the empty cache chart in this container.
+   *
+   * @param array aItems
+   *        @see this._sanitizeChartDataSource
+   */
+  createEmptyCacheChart: function(aItems) {
+    this._createChart({
+      id: "#empty-cache-chart",
+      title: "charts.cacheDisabled",
+      data: this._sanitizeChartDataSource(aItems, true),
+      sorted: true,
+      totals: {
+        size: L10N.getStr("charts.totalSize"),
+        time: L10N.getStr("charts.totalTime"),
+        cached: L10N.getStr("charts.totalCached"),
+        count: L10N.getStr("charts.totalCount")
+      }
+    });
+    window.emit(EVENTS.EMPTY_CACHE_CHART_DISPLAYED);
+  },
+
+  /**
+   * Adds a specific chart to this container.
+   *
+   * @param object
+   *        An object containing all or some the following properties:
+   *          - id: either "#primed-cache-chart" or "#empty-cache-chart"
+   *          - title/data/sorted/totals: @see Chart.jsm for details
+   */
+  _createChart: function({ id, title, data, sorted, totals }) {
+    let container = $(id);
+
+    // Nuke all existing charts of the specified type.
+    while (container.hasChildNodes()) {
+      container.firstChild.remove();
+    }
+
+    // Create a new chart.
+    let chart = Chart.PieTable(document, {
+      diameter: NETWORK_ANALYSIS_PIE_CHART_DIAMETER,
+      title: L10N.getStr(title),
+      data: data,
+      sorted: sorted,
+      totals: totals
+    });
+
+    chart.on("click", (_, item) => {
+      NetMonitorView.RequestsMenu.filterOn(item.label);
+      NetMonitorView.showNetworkInspectorView();
+    });
+
+    container.appendChild(chart.node);
+  },
+
+  /**
+   * Sanitizes the data source used for creating charts, to follow the
+   * data format spec defined in Chart.jsm.
+   *
+   * @param array aItems
+   *        A collection of request items used as the data source for the chart.
+   * @param boolean aEmptyCache
+   *        True if the cache is considered enabled, false for disabled.
+   */
+  _sanitizeChartDataSource: function(aItems, aEmptyCache) {
+    let data = [
+      "html", "css", "js", "xhr", "fonts", "images", "media", "flash", "other"
+    ].map(e => ({
+      cached: 0,
+      count: 0,
+      label: e,
+      size: 0,
+      time: 0
+    }));
+
+    for (let requestItem of aItems) {
+      let details = requestItem.attachment;
+      let type;
+
+      if (RequestsMenuView.prototype.isHtml(requestItem)) {
+        type = 0; // "html"
+      } else if (RequestsMenuView.prototype.isCss(requestItem)) {
+        type = 1; // "css"
+      } else if (RequestsMenuView.prototype.isJs(requestItem)) {
+        type = 2; // "js"
+      } else if (RequestsMenuView.prototype.isFont(requestItem)) {
+        type = 4; // "fonts"
+      } else if (RequestsMenuView.prototype.isImage(requestItem)) {
+        type = 5; // "images"
+      } else if (RequestsMenuView.prototype.isMedia(requestItem)) {
+        type = 6; // "media"
+      } else if (RequestsMenuView.prototype.isFlash(requestItem)) {
+        type = 7; // "flash"
+      } else if (RequestsMenuView.prototype.isXHR(requestItem)) {
+        // Verify XHR last, to categorize other mime types in their own blobs.
+        type = 3; // "xhr"
+      } else {
+        type = 8; // "other"
+      }
+
+      if (aEmptyCache || !responseIsFresh(details)) {
+        data[type].time += details.totalTime || 0;
+        data[type].size += details.contentSize || 0;
+      } else {
+        data[type].cached++;
+      }
+      data[type].count++;
+    }
+
+    for (let chartItem of data) {
+      let size = L10N.numberWithDecimals(chartItem.size / 1024, CONTENT_SIZE_DECIMALS);
+      let time = L10N.numberWithDecimals(chartItem.time / 1000, REQUEST_TIME_DECIMALS);
+      chartItem.size = L10N.getFormatStr("charts.sizeKB", size);
+      chartItem.time = L10N.getFormatStr("charts.totalMS", time);
+    }
+
+    return data.filter(e => e.count > 0);
+  },
+};
+
+/**
  * DOM query helper.
  */
 function $(aSelector, aTarget = document) aTarget.querySelector(aSelector);
 function $all(aSelector, aTarget = document) aTarget.querySelectorAll(aSelector);
 
 /**
  * Helper for getting an nsIURL instance out of a string.
  */
@@ -2189,18 +2476,18 @@ function nsIURL(aUrl, aStore = nsIURL.st
   aStore.set(aUrl, uri);
   return uri;
 }
 nsIURL.store = new Map();
 
 /**
  * Parse a url's query string into its components
  *
- * @param  string aQueryString
- *         The query part of a url
+ * @param string aQueryString
+ *        The query part of a url
  * @return array
  *         Array of query params {name, value}
  */
 function parseQueryString(aQueryString) {
   // Make sure there's at least one param available.
   if (!aQueryString || !aQueryString.contains("=")) {
     return;
   }
@@ -2211,43 +2498,43 @@ function parseQueryString(aQueryString) 
       value: NetworkHelper.convertToUnicode(unescape(param[1]))
     });
   return paramsArray;
 }
 
 /**
  * Parse text representation of HTTP headers.
  *
- * @param  string aText
- *         Text of headers
+ * @param string aText
+ *        Text of headers
  * @return array
  *         Array of headers info {name, value}
  */
 function parseHeaderText(aText) {
   return parseRequestText(aText, ":");
 }
 
 /**
  * Parse readable text list of a query string.
  *
- * @param  string aText
- *         Text of query string represetation
+ * @param string aText
+ *        Text of query string represetation
  * @return array
  *         Array of query params {name, value}
  */
 function parseQueryText(aText) {
   return parseRequestText(aText, "=");
 }
 
 /**
  * Parse a text representation of a name:value list with
  * the given name:value divider character.
  *
- * @param  string aText
- *         Text of list
+ * @param string aText
+ *        Text of list
  * @return array
  *         Array of headers info {name, value}
  */
 function parseRequestText(aText, aDivider) {
   let regex = new RegExp("(.+?)\\" + aDivider + "\\s*(.+)");
   let pairs = [];
   for (let line of aText.split("\n")) {
     let matches;
@@ -2291,16 +2578,54 @@ function writeQueryText(aParams) {
  * @return string
  *         Query string that can be appended to a url.
  */
 function writeQueryString(aParams) {
   return [(name + "=" + value) for ({name, value} of aParams)].join("&");
 }
 
 /**
+ * Checks if the "Expiration Calculations" defined in section 13.2.4 of the
+ * "HTTP/1.1: Caching in HTTP" spec holds true for a collection of headers.
+ *
+ * @param object
+ *        An object containing the { responseHeaders, status } properties.
+ * @return boolean
+ *         True if the response is fresh and loaded from cache.
+ */
+function responseIsFresh({ responseHeaders, status }) {
+  // Check for a "304 Not Modified" status and response headers availability.
+  if (status != 304 || !responseHeaders) {
+    return false;
+  }
+
+  let list = responseHeaders.headers;
+  let cacheControl = list.filter(e => e.name.toLowerCase() == "cache-control")[0];
+  let expires = list.filter(e => e.name.toLowerCase() == "expires")[0];
+
+  // Check the "Cache-Control" header for a maximum age value.
+  if (cacheControl) {
+    let maxAgeMatch =
+      cacheControl.value.match(/s-maxage\s*=\s*(\d+)/) ||
+      cacheControl.value.match(/max-age\s*=\s*(\d+)/);
+
+    if (maxAgeMatch && maxAgeMatch.pop() > 0) {
+      return true;
+    }
+  }
+
+  // Check the "Expires" header for a valid date.
+  if (expires && Date.parse(expires.value)) {
+    return true;
+  }
+
+  return false;
+}
+
+/**
  * Helper method to get a wrapped function which can be bound to as an event listener directly and is executed only when data-key is present in event.target.
  *
  * @param function callback
  *          Function to execute execute when data-key is present in event.target.
  * @return function
  *          Wrapped function with the target data-key as the first argument.
  */
 function getKeyWithEvent(callback) {
@@ -2315,8 +2640,9 @@ function getKeyWithEvent(callback) {
 /**
  * Preliminary setup for the NetMonitorView object.
  */
 NetMonitorView.Toolbar = new ToolbarView();
 NetMonitorView.RequestsMenu = new RequestsMenuView();
 NetMonitorView.Sidebar = new SidebarView();
 NetMonitorView.CustomRequest = new CustomRequestView();
 NetMonitorView.NetworkDetails = new NetworkDetailsView();
+NetMonitorView.PerformanceStatistics = new PerformanceStatisticsView();

--- a/browser/devtools/netmonitor/netmonitor.css
+++ b/browser/devtools/netmonitor/netmonitor.css
@@ -7,51 +7,51 @@
   overflow: hidden;
 }
 
 #details-pane-toggle[disabled] {
   /* Don't use display: none; to avoid collapsing #requests-menu-toolbar */
   visibility: hidden;
 }
 
-#response-content-image-box {
+#custom-pane {
   overflow: auto;
 }
 
-#custom-pane {
+#response-content-image-box {
   overflow: auto;
 }
 
 #timings-summary-blocked {
   display: none; /* This doesn't work yet. */
 }
 
+#network-statistics-charts {
+  overflow: auto;
+}
+
 /* Responsive sidebar */
 @media (max-width: 700px) {
   #toolbar-spacer,
   #details-pane-toggle,
   #details-pane[pane-collapsed],
   .requests-menu-waterfall,
   .requests-menu-footer-label {
     display: none;
   }
 }
 
-@media (min-width: 701px) and (max-width: 1024px) {
-  #body:not([pane-collapsed]) .requests-menu-footer-button,
+@media (min-width: 701px) and (max-width: 1280px) {
+  #body:not([pane-collapsed]) .requests-menu-filter-button,
   #body:not([pane-collapsed]) .requests-menu-footer-spacer {
     display: none;
   }
 }
 
 @media (min-width: 701px) {
-  #requests-menu-spacer-start {
-    display: none;
-  }
-
   #network-table[waterfall-overflows] .requests-menu-waterfall {
     display: none;
   }
 
   #network-table[size-overflows] .requests-menu-size {
     display: none;
   }
 

--- a/browser/devtools/netmonitor/netmonitor.xul
+++ b/browser/devtools/netmonitor/netmonitor.xul
@@ -23,25 +23,32 @@
   <popupset id="networkPopupSet">
     <menupopup id="network-request-popup">
       <menuitem id="request-menu-context-newtab"
                 label="&netmonitorUI.context.newTab;"
                 accesskey="&netmonitorUI.context.newTab.accesskey;"/>
       <menuitem id="request-menu-context-copy-url"
                 label="&netmonitorUI.context.copyUrl;"
                 accesskey="&netmonitorUI.context.copyUrl.accesskey;"/>
+      <menuitem id="request-menu-context-copy-image-as-data-uri"
+                label="&netmonitorUI.context.copyImageAsDataUri;"
+                accesskey="&netmonitorUI.context.copyImageAsDataUri.accesskey;"/>
       <menuitem id="request-menu-context-resend"
                 label="&netmonitorUI.summary.editAndResend;"
                 accesskey="&netmonitorUI.summary.editAndResend.accesskey;"/>
+      <menuseparator/>
+      <menuitem id="request-menu-context-perf"
+                label="&netmonitorUI.context.perfTools;"
+                accesskey="&netmonitorUI.context.perfTools.accesskey;"/>
     </menupopup>
   </popupset>
 
-  <box id="body"
-       class="devtools-responsive-container theme-sidebar"
-       flex="1">
+  <deck id="body" class="theme-sidebar" flex="1">
+
+  <box id="network-inspector-view" class="devtools-responsive-container">
     <vbox id="network-table" flex="1">
       <toolbar id="requests-menu-toolbar"
                class="devtools-toolbar"
                align="center">
         <hbox id="toolbar-labels" flex="1">
           <hbox id="requests-menu-status-and-method-header-box"
                 class="requests-menu-header requests-menu-status-and-method"
                 align="center">
@@ -113,19 +120,30 @@
           </hbox>
         </hbox>
         <toolbarbutton id="details-pane-toggle"
                        class="devtools-toolbarbutton"
                        tooltiptext="&netmonitorUI.panesButton.tooltip;"
                        disabled="true"
                        tabindex="0"/>
       </toolbar>
-      <label id="requests-menu-empty-notice"
-             class="side-menu-widget-empty-text"
-             value="&netmonitorUI.emptyNotice2;"/>
+
+      <vbox id="requests-menu-empty-notice"
+            class="side-menu-widget-empty-text">
+        <hbox id="notice-perf-message" align="center">
+          <label value="&netmonitorUI.perfNotice1;"/>
+          <button id="requests-menu-perf-notice-button"
+                  class="devtools-toolbarbutton"/>
+          <label value="&netmonitorUI.perfNotice2;"/>
+        </hbox>
+        <hbox id="notice-reload-message" align="center">
+          <label value="&netmonitorUI.emptyNotice3;"/>
+        </hbox>
+      </vbox>
+
       <vbox id="requests-menu-contents" flex="1" context="network-request-popup">
         <hbox id="requests-menu-item-template" hidden="true">
           <hbox class="requests-menu-subitem requests-menu-status-and-method"
                 align="center">
             <box class="requests-menu-status"/>
             <label class="plain requests-menu-method"
                    crop="end"
                    flex="1"/>
@@ -146,80 +164,80 @@
               <hbox class="start requests-menu-timings-cap" hidden="true"/>
               <hbox class="end requests-menu-timings-cap" hidden="true"/>
               <label class="plain requests-menu-timings-total"/>
             </hbox>
           </hbox>
         </hbox>
       </vbox>
       <hbox id="requests-menu-footer">
-        <spacer id="requests-menu-spacer-start"
-                class="requests-menu-footer-spacer"
-                flex="100"/>
         <button id="requests-menu-filter-all-button"
-                class="requests-menu-footer-button"
+                class="requests-menu-filter-button requests-menu-footer-button"
                 checked="true"
                 data-key="all"
                 label="&netmonitorUI.footer.filterAll;">
         </button>
         <button id="requests-menu-filter-html-button"
-                class="requests-menu-footer-button"
+                class="requests-menu-filter-button requests-menu-footer-button"
                 data-key="html"
                 label="&netmonitorUI.footer.filterHTML;">
         </button>
         <button id="requests-menu-filter-css-button"
-                class="requests-menu-footer-button"
+                class="requests-menu-filter-button requests-menu-footer-button"
                 data-key="css"
                 label="&netmonitorUI.footer.filterCSS;">
         </button>
         <button id="requests-menu-filter-js-button"
-                class="requests-menu-footer-button"
+                class="requests-menu-filter-button requests-menu-footer-button"
                 data-key="js"
                 label="&netmonitorUI.footer.filterJS;">
         </button>
         <button id="requests-menu-filter-xhr-button"
-                class="requests-menu-footer-button"
+                class="requests-menu-filter-button requests-menu-footer-button"
                 data-key="xhr"
                 label="&netmonitorUI.footer.filterXHR;">
         </button>
         <button id="requests-menu-filter-fonts-button"
-                class="requests-menu-footer-button"
+                class="requests-menu-filter-button requests-menu-footer-button"
                 data-key="fonts"
                 label="&netmonitorUI.footer.filterFonts;">
         </button>
         <button id="requests-menu-filter-images-button"
-                class="requests-menu-footer-button"
+                class="requests-menu-filter-button requests-menu-footer-button"
                 data-key="images"
                 label="&netmonitorUI.footer.filterImages;">
         </button>
         <button id="requests-menu-filter-media-button"
-                class="requests-menu-footer-button"
+                class="requests-menu-filter-button requests-menu-footer-button"
                 data-key="media"
                 label="&netmonitorUI.footer.filterMedia;">
         </button>
         <button id="requests-menu-filter-flash-button"
-                class="requests-menu-footer-button"
+                class="requests-menu-filter-button requests-menu-footer-button"
                 data-key="flash"
                 label="&netmonitorUI.footer.filterFlash;">
         </button>
-        <spacer id="requests-menu-spacer-end"
+        <spacer id="requests-menu-spacer"
                 class="requests-menu-footer-spacer"
                 flex="100"/>
-        <label id="request-menu-network-summary"
+        <button id="requests-menu-network-summary-button"
+                class="requests-menu-footer-button"
+                tooltiptext="&netmonitorUI.footer.perf;"/>
+        <label id="requests-menu-network-summary-label"
                class="plain requests-menu-footer-label"
-               flex="1"
-               crop="end"/>
+               crop="end"
+               tooltiptext="&netmonitorUI.footer.perf;"/>
         <button id="requests-menu-clear-button"
-               class="requests-menu-footer-button"
-               label="&netmonitorUI.footer.clear;">
-        </button>
+                class="requests-menu-footer-button"
+                label="&netmonitorUI.footer.clear;"/>
       </hbox>
     </vbox>
 
-    <splitter id="splitter" class="devtools-side-splitter"/>
+    <splitter id="network-inspector-view-splitter"
+              class="devtools-side-splitter"/>
 
     <deck id="details-pane"
           hidden="true">
       <vbox id="custom-pane"
             class="tabpanel-content">
         <hbox align="baseline">
           <label value="&netmonitorUI.custom.newRequest;"
                  class="plain tabpanel-summary-label
@@ -455,9 +473,29 @@
               </hbox>
             </vbox>
           </tabpanel>
         </tabpanels>
       </tabbox>
     </deck>
   </box>
 
+  <box id="network-statistics-view">
+    <toolbar id="network-statistics-toolbar"
+             class="devtools-toolbar">
+      <button id="network-statistics-back-button"
+              class="devtools-toolbarbutton"
+              onclick="NetMonitorView.toggleFrontendMode()"
+              label="&netmonitorUI.backButton;"/>
+    </toolbar>
+    <box id="network-statistics-charts"
+         class="devtools-responsive-container"
+         flex="1">
+      <vbox id="primed-cache-chart" pack="center" flex="1"/>
+      <splitter id="network-statistics-view-splitter"
+                class="devtools-side-splitter"/>
+      <vbox id="empty-cache-chart" pack="center" flex="1"/>
+    </box>
+  </box>
+
+  </deck>
+
 </window>

--- a/browser/devtools/netmonitor/test/browser.ini
+++ b/browser/devtools/netmonitor/test/browser.ini
@@ -1,39 +1,47 @@
 [DEFAULT]
 support-files =
   head.js
   html_content-type-test-page.html
+  html_content-type-without-cache-test-page.html
   html_custom-get-page.html
   html_cyrillic-test-page.html
   html_filter-test-page.html
   html_infinite-get-page.html
   html_json-custom-mime-test-page.html
   html_json-long-test-page.html
   html_json-malformed-test-page.html
   html_jsonp-test-page.html
   html_navigate-test-page.html
   html_post-data-test-page.html
   html_post-raw-test-page.html
   html_simple-test-page.html
   html_sorting-test-page.html
+  html_statistics-test-page.html
   html_status-codes-test-page.html
   sjs_content-type-test-server.sjs
   sjs_simple-test-server.sjs
   sjs_sorting-test-server.sjs
   sjs_status-codes-test-server.sjs
   test-image.png
 
 [browser_net_aaa_leaktest.js]
 [browser_net_accessibility-01.js]
 [browser_net_accessibility-02.js]
 [browser_net_autoscroll.js]
+[browser_net_charts-01.js]
+[browser_net_charts-02.js]
+[browser_net_charts-03.js]
+[browser_net_charts-04.js]
+[browser_net_charts-05.js]
 [browser_net_clear.js]
 [browser_net_content-type.js]
 [browser_net_copy_url.js]
+[browser_net_copy_image_as_data_uri.js]
 [browser_net_cyrillic-01.js]
 [browser_net_cyrillic-02.js]
 [browser_net_filter-01.js]
 [browser_net_filter-02.js]
 [browser_net_filter-03.js]
 [browser_net_footer-summary.js]
 [browser_net_json-long.js]
 [browser_net_json-malformed.js]
@@ -52,11 +60,13 @@ support-files =
 [browser_net_resend.js]
 [browser_net_simple-init.js]
 [browser_net_simple-request-data.js]
 [browser_net_simple-request-details.js]
 [browser_net_simple-request.js]
 [browser_net_sort-01.js]
 [browser_net_sort-02.js]
 [browser_net_sort-03.js]
+[browser_net_statistics-01.js]
+[browser_net_statistics-02.js]
 [browser_net_status-codes.js]
 [browser_net_timeline_ticks.js]
 [browser_net_timing-division.js]

new file mode 100644
--- /dev/null
+++ b/browser/devtools/netmonitor/test/browser_net_charts-01.js
@@ -0,0 +1,70 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+/**
+ * Makes sure Pie Charts have the right internal structure.
+ */
+
+function test() {
+  initNetMonitor(SIMPLE_URL).then(([aTab, aDebuggee, aMonitor]) => {
+    info("Starting test... ");
+
+    let { document, Chart } = aMonitor.panelWin;
+    let container = document.createElement("box");
+
+    let pie = Chart.Pie(document, {
+      width: 100,
+      height: 100,
+      data: [{
+        size: 1,
+        label: "foo"
+      }, {
+        size: 2,
+        label: "bar"
+      }, {
+        size: 3,
+        label: "baz"
+      }]
+    });
+
+    let node = pie.node;
+    let slices = node.querySelectorAll(".pie-chart-slice.chart-colored-blob");
+    let labels = node.querySelectorAll(".pie-chart-label");
+
+    ok(node.classList.contains("pie-chart-container") &&
+       node.classList.contains("generic-chart-container"),
+      "A pie chart container was created successfully.");
+
+    is(slices.length, 3,
+      "There should be 3 pie chart slices created.");
+    ok(slices[0].getAttribute("d").match(/\s*M 50,50 L 49\.\d+,97\.\d+ A 47\.5,47\.5 0 0 1 49\.\d+,2\.5\d* Z/),
+      "The first slice has the correct data.");
+    ok(slices[1].getAttribute("d").match(/\s*M 50,50 L 91\.\d+,26\.\d+ A 47\.5,47\.5 0 0 1 49\.\d+,97\.\d+ Z/),
+      "The second slice has the correct data.");
+    ok(slices[2].getAttribute("d").match(/\s*M 50,50 L 50\.\d+,2\.5\d* A 47\.5,47\.5 0 0 1 91\.\d+,26\.\d+ Z/),
+      "The third slice has the correct data.");
+
+    ok(slices[0].hasAttribute("largest"),
+      "The first slice should be the largest one.");
+    ok(slices[2].hasAttribute("smallest"),
+      "The third slice should be the smallest one.");
+
+    ok(slices[0].getAttribute("name"), "baz",
+      "The first slice's name is correct.");
+    ok(slices[1].getAttribute("name"), "bar",
+      "The first slice's name is correct.");
+    ok(slices[2].getAttribute("name"), "foo",
+      "The first slice's name is correct.");
+
+    is(labels.length, 3,
+      "There should be 3 pie chart labels created.");
+    is(labels[0].textContent, "baz",
+      "The first label's text is correct.");
+    is(labels[1].textContent, "bar",
+      "The first label's text is correct.");
+    is(labels[2].textContent, "foo",
+      "The first label's text is correct.");
+
+    teardown(aMonitor).then(finish);
+  });
+}

new file mode 100644
--- /dev/null
+++ b/browser/devtools/netmonitor/test/browser_net_charts-02.js
@@ -0,0 +1,49 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+/**
+ * Makes sure Pie Charts have the right internal structure when
+ * initialized with empty data.
+ */
+
+function test() {
+  initNetMonitor(SIMPLE_URL).then(([aTab, aDebuggee, aMonitor]) => {
+    info("Starting test... ");
+
+    let { document, L10N, Chart } = aMonitor.panelWin;
+    let container = document.createElement("box");
+
+    let pie = Chart.Pie(document, {
+      data: null,
+      width: 100,
+      height: 100
+    });
+
+    let node = pie.node;
+    let slices = node.querySelectorAll(".pie-chart-slice.chart-colored-blob");
+    let labels = node.querySelectorAll(".pie-chart-label");
+
+    ok(node.classList.contains("pie-chart-container") &&
+       node.classList.contains("generic-chart-container"),
+      "A pie chart container was created successfully.");
+
+    is(slices.length, 1,
+      "There should be 1 pie chart slice created.");
+    ok(slices[0].getAttribute("d").match(/\s*M 50,50 L 50\.\d+,2\.5\d* A 47\.5,47\.5 0 1 1 49\.\d+,2\.5\d* Z/),
+      "The first slice has the correct data.");
+
+    ok(slices[0].hasAttribute("largest"),
+      "The first slice should be the largest one.");
+    ok(slices[0].hasAttribute("smallest"),
+      "The first slice should also be the smallest one.");
+    ok(slices[0].getAttribute("name"), L10N.getStr("pieChart.empty"),
+      "The first slice's name is correct.");
+
+    is(labels.length, 1,
+      "There should be 1 pie chart label created.");
+    is(labels[0].textContent, "Loading",
+      "The first label's text is correct.");
+
+    teardown(aMonitor).then(finish);
+  });
+}

new file mode 100644
--- /dev/null
+++ b/browser/devtools/netmonitor/test/browser_net_charts-03.js
@@ -0,0 +1,100 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+/**
+ * Makes sure Table Charts have the right internal structure.
+ */
+
+function test() {
+  initNetMonitor(SIMPLE_URL).then(([aTab, aDebuggee, aMonitor]) => {
+    info("Starting test... ");
+
+    let { document, Chart } = aMonitor.panelWin;
+    let container = document.createElement("box");
+
+    let table = Chart.Table(document, {
+      title: "Table title",
+      data: [{
+        label1: 1,
+        label2: "11.1foo"
+      }, {
+        label1: 2,
+        label2: "12.2bar"
+      }, {
+        label1: 3,
+        label2: "13.3baz"
+      }],
+      totals: {
+        label1: "Hello %S",
+        label2: "World %S"
+      }
+    });
+
+    let node = table.node;
+    let title = node.querySelector(".table-chart-title");
+    let grid = node.querySelector(".table-chart-grid");
+    let totals = node.querySelector(".table-chart-totals");
+    let rows = grid.querySelectorAll(".table-chart-row");
+    let sums = node.querySelectorAll(".table-chart-summary-label");
+
+    ok(node.classList.contains("table-chart-container") &&
+       node.classList.contains("generic-chart-container"),
+      "A table chart container was created successfully.");
+
+    ok(title,
+      "A title node was created successfully.");
+    is(title.getAttribute("value"), "Table title",
+      "The title node displays the correct text.");
+
+    is(rows.length, 3,
+      "There should be 3 table chart rows created.");
+
+    ok(rows[0].querySelector(".table-chart-row-box.chart-colored-blob"),
+      "A colored blob exists for the firt row.");
+    is(rows[0].querySelectorAll("label")[0].getAttribute("name"), "label1",
+      "The first column of the first row exists.");
+    is(rows[0].querySelectorAll("label")[1].getAttribute("name"), "label2",
+      "The second column of the first row exists.");
+    is(rows[0].querySelectorAll("label")[0].getAttribute("value"), "1",
+      "The first column of the first row displays the correct text.");
+    is(rows[0].querySelectorAll("label")[1].getAttribute("value"), "11.1foo",
+      "The second column of the first row displays the correct text.");
+
+    ok(rows[1].querySelector(".table-chart-row-box.chart-colored-blob"),
+      "A colored blob exists for the second row.");
+    is(rows[1].querySelectorAll("label")[0].getAttribute("name"), "label1",
+      "The first column of the second row exists.");
+    is(rows[1].querySelectorAll("label")[1].getAttribute("name"), "label2",
+      "The second column of the second row exists.");
+    is(rows[1].querySelectorAll("label")[0].getAttribute("value"), "2",
+      "The first column of the second row displays the correct text.");
+    is(rows[1].querySelectorAll("label")[1].getAttribute("value"), "12.2bar",
+      "The second column of the first row displays the correct text.");
+
+    ok(rows[2].querySelector(".table-chart-row-box.chart-colored-blob"),
+      "A colored blob exists for the third row.");
+    is(rows[2].querySelectorAll("label")[0].getAttribute("name"), "label1",
+      "The first column of the third row exists.");
+    is(rows[2].querySelectorAll("label")[1].getAttribute("name"), "label2",
+      "The second column of the third row exists.");
+    is(rows[2].querySelectorAll("label")[0].getAttribute("value"), "3",
+      "The first column of the third row displays the correct text.");
+    is(rows[2].querySelectorAll("label")[1].getAttribute("value"), "13.3baz",
+      "The second column of the third row displays the correct text.");
+
+    is(sums.length, 2,
+      "There should be 2 total summaries created.");
+
+    is(totals.querySelectorAll(".table-chart-summary-label")[0].getAttribute("name"), "label1",
+      "The first sum's type is correct.");
+    is(totals.querySelectorAll(".table-chart-summary-label")[0].getAttribute("value"), "Hello 6",
+      "The first sum's value is correct.");
+
+    is(totals.querySelectorAll(".table-chart-summary-label")[1].getAttribute("name"), "label2",
+      "The second sum's type is correct.");
+    is(totals.querySelectorAll(".table-chart-summary-label")[1].getAttribute("value"), "World 36.60",
+      "The second sum's value is correct.");
+
+    teardown(aMonitor).then(finish);
+  });
+}

new file mode 100644
--- /dev/null
+++ b/browser/devtools/netmonitor/test/browser_net_charts-04.js
@@ -0,0 +1,70 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+/**
+ * Makes sure Pie Charts have the right internal structure when
+ * initialized with empty data.
+ */
+
+function test() {
+  initNetMonitor(SIMPLE_URL).then(([aTab, aDebuggee, aMonitor]) => {
+    info("Starting test... ");
+
+    let { document, L10N, Chart } = aMonitor.panelWin;
+    let container = document.createElement("box");
+
+    let table = Chart.Table(document, {
+      title: "Table title",
+      data: null,
+      totals: {
+        label1: "Hello %S",
+        label2: "World %S"
+      }
+    });
+
+    let node = table.node;
+    let title = node.querySelector(".table-chart-title");
+    let grid = node.querySelector(".table-chart-grid");
+    let totals = node.querySelector(".table-chart-totals");
+    let rows = grid.querySelectorAll(".table-chart-row");
+    let sums = node.querySelectorAll(".table-chart-summary-label");
+
+    ok(node.classList.contains("table-chart-container") &&
+       node.classList.contains("generic-chart-container"),
+      "A table chart container was created successfully.");
+
+    ok(title,
+      "A title node was created successfully.");
+    is(title.getAttribute("value"), "Table title",
+      "The title node displays the correct text.");
+
+    is(rows.length, 1,
+      "There should be 1 table chart row created.");
+
+    ok(rows[0].querySelector(".table-chart-row-box.chart-colored-blob"),
+      "A colored blob exists for the firt row.");
+    is(rows[0].querySelectorAll("label")[0].getAttribute("name"), "size",
+      "The first column of the first row exists.");
+    is(rows[0].querySelectorAll("label")[1].getAttribute("name"), "label",
+      "The second column of the first row exists.");
+    is(rows[0].querySelectorAll("label")[0].getAttribute("value"), "",
+      "The first column of the first row displays the correct text.");
+    is(rows[0].querySelectorAll("label")[1].getAttribute("value"), L10N.getStr("tableChart.empty"),
+      "The second column of the first row displays the correct text.");
+
+    is(sums.length, 2,
+      "There should be 2 total summaries created.");
+
+    is(totals.querySelectorAll(".table-chart-summary-label")[0].getAttribute("name"), "label1",
+      "The first sum's type is correct.");
+    is(totals.querySelectorAll(".table-chart-summary-label")[0].getAttribute("value"), "Hello 0",
+      "The first sum's value is correct.");
+
+    is(totals.querySelectorAll(".table-chart-summary-label")[1].getAttribute("name"), "label2",
+      "The second sum's type is correct.");
+    is(totals.querySelectorAll(".table-chart-summary-label")[1].getAttribute("value"), "World 0",
+      "The second sum's value is correct.");
+
+    teardown(aMonitor).then(finish);
+  });
+}

new file mode 100644
--- /dev/null
+++ b/browser/devtools/netmonitor/test/browser_net_charts-05.js
@@ -0,0 +1,60 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+/**
+ * Makes sure Pie+Table Charts have the right internal structure.
+ */
+
+function test() {
+  initNetMonitor(SIMPLE_URL).then(([aTab, aDebuggee, aMonitor]) => {
+    info("Starting test... ");
+
+    let { document, Chart } = aMonitor.panelWin;
+    let container = document.createElement("box");
+
+    let chart = Chart.PieTable(document, {
+      title: "Table title",
+      data: [{
+        size: 1,
+        label: "11.1foo"
+      }, {
+        size: 2,
+        label: "12.2bar"
+      }, {
+        size: 3,
+        label: "13.3baz"
+      }],
+      totals: {
+        size: "Hello %S",
+        label: "World %S"
+      }
+    });
+
+    ok(chart.pie, "The pie chart proxy is accessible.");
+    ok(chart.table, "The table chart proxy is accessible.");
+
+    let node = chart.node;
+    let slices = node.querySelectorAll(".pie-chart-slice");
+    let rows = node.querySelectorAll(".table-chart-row");
+    let sums = node.querySelectorAll(".table-chart-summary-label");
+
+    ok(node.classList.contains("pie-table-chart-container"),
+      "A pie+table chart container was created successfully.");
+
+    ok(node.querySelector(".table-chart-title"),
+      "A title node was created successfully.");
+    ok(node.querySelector(".pie-chart-container"),
+      "A pie chart was created successfully.");
+    ok(node.querySelector(".table-chart-container"),
+      "A table chart was created successfully.");
+
+    is(rows.length, 3,
+      "There should be 3 pie chart slices created.");
+    is(rows.length, 3,
+      "There should be 3 table chart rows created.");
+    is(sums.length, 2,
+      "There should be 2 total summaries created.");
+
+    teardown(aMonitor).then(finish);
+  });
+}

new file mode 100644
--- /dev/null
+++ b/browser/devtools/netmonitor/test/browser_net_copy_image_as_data_uri.js
@@ -0,0 +1,38 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+/**
+ * Tests if copying an image as data uri works.
+ */
+
+function test() {
+  initNetMonitor(CONTENT_TYPE_WITHOUT_CACHE_URL).then(([aTab, aDebuggee, aMonitor]) => {
+    info("Starting test... ");
+
+    let { NetMonitorView } = aMonitor.panelWin;
+    let { RequestsMenu } = NetMonitorView;
+    RequestsMenu.lazyUpdate = false;
+    let imageDataUri = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABGdBTUEAAK/INwWK6QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAHWSURBVHjaYvz//z8DJQAggJiQOe/fv2fv7Oz8rays/N+VkfG/iYnJfyD/1+rVq7ffu3dPFpsBAAHEAHIBCJ85c8bN2Nj4vwsDw/8zQLwKiO8CcRoQu0DxqlWrdsHUwzBAAIGJmTNnPgYa9j8UqhFElwPxf2MIDeIrKSn9FwSJoRkAEEAM0DD4DzMAyPi/G+QKY4hh5WAXGf8PDQ0FGwJ22d27CjADAAIIrLmjo+MXA9R2kAHvGBA2wwx6B8W7od6CeQcggKCmCEL8bgwxYCbUIGTDVkHDBia+CuotgACCueD3TDQN75D4xmAvCoK9ARMHBzAw0AECiBHkAlC0Mdy7x9ABNA3obAZXIAa6iKEcGlMVQHwWyjYuL2d4v2cPg8vZswx7gHyAAAK7AOif7SAbOqCmn4Ha3AHFsIDtgPq/vLz8P4MSkJ2W9h8ggBjevXvHDo4FQUQg/kdypqCg4H8lUIACnQ/SOBMYI8bAsAJFPcj1AAEEjwVQqLpAbXmH5BJjqI0gi9DTAAgDBBCcAVLkgmQ7yKCZxpCQxqUZhAECCJ4XgMl493ug21ZD+aDAXH0WLM4A9MZPXJkJIIAwTAR5pQMalaCABQUULttBGCCAGCnNzgABBgAMJ5THwGvJLAAAAABJRU5ErkJggg==";
+
+    waitForNetworkEvents(aMonitor, 6).then(() => {
+      let requestItem = RequestsMenu.getItemAtIndex(5);
+      RequestsMenu.selectedItem = requestItem;
+
+      waitForClipboard(imageDataUri, function setup() {
+        RequestsMenu.copyImageAsDataUri();
+      }, function onSuccess() {
+        ok(true, "Clipboard contains the currently selected image as data uri.");
+        cleanUp();
+      }, function onFailure() {
+        ok(false, "Copying the currently selected image as data uri was unsuccessful.");
+        cleanUp();
+      });
+    });
+
+    aDebuggee.performRequests();
+
+    function cleanUp(){
+      teardown(aMonitor).then(finish);
+    }
+  });
+}

--- a/browser/devtools/netmonitor/test/browser_net_footer-summary.js
+++ b/browser/devtools/netmonitor/test/browser_net_footer-summary.js
@@ -75,32 +75,26 @@ function test() {
 
       EventUtils.sendMouseEvent({ type: "click" }, $("#requests-menu-filter-flash-button"));
       testStatus();
 
       teardown(aMonitor).then(finish);
     })
 
     function testStatus() {
-      let summary = $("#request-menu-network-summary");
+      let summary = $("#requests-menu-network-summary-label");
       let value = summary.getAttribute("value");
       info("Current summary: " + value);
 
       let visibleItems = RequestsMenu.visibleItems;
       let visibleRequestsCount = visibleItems.length;
       let totalRequestsCount = RequestsMenu.itemCount;
       info("Current requests: " + visibleRequestsCount + " of " + totalRequestsCount + ".");
 
-      if (!totalRequestsCount) {
-        is(value, "",
-          "The current summary text is incorrect, expected an empty string.");
-        return;
-      }
-
-      if (!visibleRequestsCount) {
+      if (!totalRequestsCount || !visibleRequestsCount) {
         is(value, L10N.getStr("networkMenu.empty"),
           "The current summary text is incorrect, expected an 'empty' label.");
         return;
       }
 
       let totalBytes = RequestsMenu._getTotalBytesOfRequests(visibleItems);
       let totalMillis =
         RequestsMenu._getNewestRequest(visibleItems).attachment.endedMillis -

new file mode 100644
--- /dev/null
+++ b/browser/devtools/netmonitor/test/browser_net_statistics-01.js
@@ -0,0 +1,57 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+/**
+ * Tests if the statistics view is populated correctly.
+ */
+
+function test() {
+  initNetMonitor(STATISTICS_URL).then(([aTab, aDebuggee, aMonitor]) => {
+    info("Starting test... ");
+
+    let panel = aMonitor.panelWin;
+    let { document, $, $all, EVENTS, NetMonitorView } = panel;
+
+    is(NetMonitorView.currentFrontendMode, "network-inspector-view",
+      "The initial frontend mode is correct.");
+
+    is($("#primed-cache-chart").childNodes.length, 0,
+      "There should be no primed cache chart created yet.");
+    is($("#empty-cache-chart").childNodes.length, 0,
+      "There should be no empty cache chart created yet.");
+
+    waitFor(panel, EVENTS.PLACEHOLDER_CHARTS_DISPLAYED).then(() => {
+      is($("#primed-cache-chart").childNodes.length, 1,
+        "There should be a placeholder primed cache chart created now.");
+      is($("#empty-cache-chart").childNodes.length, 1,
+        "There should be a placeholder empty cache chart created now.");
+
+      is($all(".pie-chart-container[placeholder=true]").length, 2,
+        "Two placeholder pie chart appear to be rendered correctly.");
+      is($all(".table-chart-container[placeholder=true]").length, 2,
+        "Two placeholder table chart appear to be rendered correctly.");
+
+      promise.all([
+        waitFor(panel, EVENTS.PRIMED_CACHE_CHART_DISPLAYED),
+        waitFor(panel, EVENTS.EMPTY_CACHE_CHART_DISPLAYED)
+      ]).then(() => {
+        is($("#primed-cache-chart").childNodes.length, 1,
+          "There should be a real primed cache chart created now.");
+        is($("#empty-cache-chart").childNodes.length, 1,
+          "There should be a real empty cache chart created now.");
+
+        is($all(".pie-chart-container:not([placeholder=true])").length, 2,
+          "Two real pie chart appear to be rendered correctly.");
+        is($all(".table-chart-container:not([placeholder=true])").length, 2,
+          "Two real table chart appear to be rendered correctly.");
+
+        teardown(aMonitor).then(finish);
+      });
+    });
+
+    NetMonitorView.toggleFrontendMode();
+
+    is(NetMonitorView.currentFrontendMode, "network-statistics-view",
+      "The current frontend mode is correct.");
+  });
+}

new file mode 100644
--- /dev/null
+++ b/browser/devtools/netmonitor/test/browser_net_statistics-02.js
@@ -0,0 +1,43 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+/**
+ * Tests if the network inspector view is shown when the target navigates
+ * away while in the statistics view.
+ */
+
+function test() {
+  initNetMonitor(STATISTICS_URL).then(([aTab, aDebuggee, aMonitor]) => {
+    info("Starting test... ");
+
+    let panel = aMonitor.panelWin;
+    let { document, EVENTS, NetMonitorView } = panel;
+
+    is(NetMonitorView.currentFrontendMode, "network-inspector-view",
+      "The initial frontend mode is correct.");
+
+    promise.all([
+      waitFor(panel, EVENTS.PRIMED_CACHE_CHART_DISPLAYED),
+      waitFor(panel, EVENTS.EMPTY_CACHE_CHART_DISPLAYED)
+    ]).then(() => {
+      is(NetMonitorView.currentFrontendMode, "network-statistics-view",
+        "The frontend mode is currently in the statistics view.");
+
+      waitFor(panel, EVENTS.TARGET_WILL_NAVIGATE).then(() => {
+        is(NetMonitorView.currentFrontendMode, "network-inspector-view",
+          "The frontend mode switched back to the inspector view.");
+
+        waitFor(panel, EVENTS.TARGET_DID_NAVIGATE).then(() => {
+          is(NetMonitorView.currentFrontendMode, "network-inspector-view",
+            "The frontend mode is still in the inspector view.");
+
+          teardown(aMonitor).then(finish);
+        });
+      });
+
+      aDebuggee.location.reload();
+    });
+
+    NetMonitorView.toggleFrontendMode();
+  });
+}

--- a/browser/devtools/netmonitor/test/head.js
+++ b/browser/devtools/netmonitor/test/head.js
@@ -12,28 +12,30 @@ let { devtools } = Cu.import("resource:/
 let TargetFactory = devtools.TargetFactory;
 let Toolbox = devtools.Toolbox;
 
 const EXAMPLE_URL = "http://example.com/browser/browser/devtools/netmonitor/test/";
 
 const SIMPLE_URL = EXAMPLE_URL + "html_simple-test-page.html";
 const NAVIGATE_URL = EXAMPLE_URL + "html_navigate-test-page.html";
 const CONTENT_TYPE_URL = EXAMPLE_URL + "html_content-type-test-page.html";
+const CONTENT_TYPE_WITHOUT_CACHE_URL = EXAMPLE_URL + "html_content-type-without-cache-test-page.html";
 const CYRILLIC_URL = EXAMPLE_URL + "html_cyrillic-test-page.html";
 const STATUS_CODES_URL = EXAMPLE_URL + "html_status-codes-test-page.html";
 const POST_DATA_URL = EXAMPLE_URL + "html_post-data-test-page.html";
 const POST_RAW_URL = EXAMPLE_URL + "html_post-raw-test-page.html";
 const JSONP_URL = EXAMPLE_URL + "html_jsonp-test-page.html";
 const JSON_LONG_URL = EXAMPLE_URL + "html_json-long-test-page.html";
 const JSON_MALFORMED_URL = EXAMPLE_URL + "html_json-malformed-test-page.html";
 const JSON_CUSTOM_MIME_URL = EXAMPLE_URL + "html_json-custom-mime-test-page.html";
 const SORTING_URL = EXAMPLE_URL + "html_sorting-test-page.html";
 const FILTERING_URL = EXAMPLE_URL + "html_filter-test-page.html";
 const INFINITE_GET_URL = EXAMPLE_URL + "html_infinite-get-page.html";
 const CUSTOM_GET_URL = EXAMPLE_URL + "html_custom-get-page.html";
+const STATISTICS_URL = EXAMPLE_URL + "html_statistics-test-page.html";
 
 const SIMPLE_SJS = EXAMPLE_URL + "sjs_simple-test-server.sjs";
 const CONTENT_TYPE_SJS = EXAMPLE_URL + "sjs_content-type-test-server.sjs";
 const STATUS_CODES_SJS = EXAMPLE_URL + "sjs_status-codes-test-server.sjs";
 const SORTING_SJS = EXAMPLE_URL + "sjs_sorting-test-server.sjs";
 
 const TEST_IMAGE = EXAMPLE_URL + "test-image.png";
 

new file mode 100644
--- /dev/null
+++ b/browser/devtools/netmonitor/test/html_content-type-without-cache-test-page.html
@@ -0,0 +1,45 @@
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!doctype html>
+
+<html>
+  <head>
+    <meta charset="utf-8"/>
+    <title>Network Monitor test page</title>
+  </head>
+
+  <body>
+    <p>Content type test</p>
+
+    <script type="text/javascript">
+      function get(aAddress, aCallback) {
+        var xhr = new XMLHttpRequest();
+        xhr.open("GET", aAddress, true);
+
+        xhr.onreadystatechange = function() {
+          if (this.readyState == this.DONE) {
+            aCallback();
+          }
+        };
+        xhr.send(null);
+      }
+
+      function performRequests() {
+        get("sjs_content-type-test-server.sjs?fmt=xml", function() {
+          get("sjs_content-type-test-server.sjs?fmt=css", function() {
+            get("sjs_content-type-test-server.sjs?fmt=js", function() {
+              get("sjs_content-type-test-server.sjs?fmt=json", function() {
+                get("sjs_content-type-test-server.sjs?fmt=bogus", function() {
+                  get("test-image.png?v=" + Math.random(), function() {
+                    // Done.
+                  });
+                });
+              });
+            });
+          });
+        });
+      }
+    </script>
+  </body>
+
+</html>

new file mode 100644
--- /dev/null
+++ b/browser/devtools/netmonitor/test/html_statistics-test-page.html
@@ -0,0 +1,37 @@
+<!-- Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/ -->
+<!doctype html>
+
+<html>
+  <head>
+    <meta charset="utf-8"/>
+    <title>Network Monitor test page</title>
+  </head>
+
+  <body>
+    <p>Statistics test</p>
+
+    <script type="text/javascript">
+      function get(aAddress) {
+        var xhr = new XMLHttpRequest();
+        xhr.open("GET", aAddress, true);
+        xhr.send(null);
+      }
+
+      get("sjs_content-type-test-server.sjs?sts=304&fmt=txt");
+      get("sjs_content-type-test-server.sjs?sts=304&fmt=xml");
+      get("sjs_content-type-test-server.sjs?sts=304&fmt=html");
+      get("sjs_content-type-test-server.sjs?sts=304&fmt=css");
+      get("sjs_content-type-test-server.sjs?sts=304&fmt=js");
+      get("sjs_content-type-test-server.sjs?sts=304&fmt=json");
+      get("sjs_content-type-test-server.sjs?sts=304&fmt=jsonp");
+      get("sjs_content-type-test-server.sjs?sts=304&fmt=font");
+      get("sjs_content-type-test-server.sjs?sts=304&fmt=image");
+      get("sjs_content-type-test-server.sjs?sts=304&fmt=audio");
+      get("sjs_content-type-test-server.sjs?sts=304&fmt=video");
+      get("sjs_content-type-test-server.sjs?sts=304&fmt=flash");
+      get("test-image.png");
+    </script>
+  </body>
+
+</html>

--- a/browser/devtools/netmonitor/test/sjs_content-type-test-server.sjs
+++ b/browser/devtools/netmonitor/test/sjs_content-type-test-server.sjs
@@ -2,128 +2,161 @@
    http://creativecommons.org/publicdomain/zero/1.0/ */
 
 const { classes: Cc, interfaces: Ci } = Components;
 
 function handleRequest(request, response) {
   response.processAsync();
 
   let params = request.queryString.split("&");
-  let format = params.filter((s) => s.contains("fmt="))[0].split("=")[1];
+  let format = (params.filter((s) => s.contains("fmt="))[0] || "").split("=")[1];
+  let status = (params.filter((s) => s.contains("sts="))[0] || "").split("=")[1] || 200;
+
+  let cachedCount = 0;
+  let cacheExpire = 60; // seconds
+
+  function maybeMakeCached() {
+    if (status != 304) {
+      return;
+    }
+    // Spice things up a little!
+    if (cachedCount % 2) {
+      response.setHeader("Cache-Control", "max-age=" + cacheExpire, false);
+    } else {
+      response.setHeader("Expires", Date(Date.now() + cacheExpire * 1000), false);
+    }
+    cachedCount++;
+  }
 
   Cc["@mozilla.org/timer;1"].createInstance(Ci.nsITimer).initWithCallback(() => {
     switch (format) {
       case "txt": {
-        response.setStatusLine(request.httpVersion, 200, "DA DA DA");
+        response.setStatusLine(request.httpVersion, status, "DA DA DA");
         response.setHeader("Content-Type", "text/plain", false);
+        maybeMakeCached();
         response.write("Братан, ты вообще качаешься?");
         response.finish();
         break;
       }
       case "xml": {
-        response.setStatusLine(request.httpVersion, 200, "OK");
+        response.setStatusLine(request.httpVersion, status, "OK");
         response.setHeader("Content-Type", "text/xml; charset=utf-8", false);
+        maybeMakeCached();
         response.write("<label value='greeting'>Hello XML!</label>");
         response.finish();
         break;
       }
       case "html": {
         let content = params.filter((s) => s.contains("res="))[0].split("=")[1];
-        response.setStatusLine(request.httpVersion, 200, "OK");
+        response.setStatusLine(request.httpVersion, status, "OK");
         response.setHeader("Content-Type", "text/html; charset=utf-8", false);
+        maybeMakeCached();
         response.write(content || "<p>Hello HTML!</p>");
         response.finish();
         break;
       }
       case "html-long": {
         let str = new Array(102400 /* 100 KB in bytes */).join(".");
-        response.setStatusLine(request.httpVersion, 200, "OK");
+        response.setStatusLine(request.httpVersion, status, "OK");
         response.setHeader("Content-Type", "text/html; charset=utf-8", false);
+        maybeMakeCached();
         response.write("<p>" + str + "</p>");
         response.finish();
         break;
       }
       case "css": {
-        response.setStatusLine(request.httpVersion, 200, "OK");
+        response.setStatusLine(request.httpVersion, status, "OK");
         response.setHeader("Content-Type", "text/css; charset=utf-8", false);
+        maybeMakeCached();
         response.write("body:pre { content: 'Hello CSS!' }");
         response.finish();
         break;
       }
       case "js": {
-        response.setStatusLine(request.httpVersion, 200, "OK");
+        response.setStatusLine(request.httpVersion, status, "OK");
         response.setHeader("Content-Type", "application/javascript; charset=utf-8", false);
+        maybeMakeCached();
         response.write("function() { return 'Hello JS!'; }");
         response.finish();
         break;
       }
       case "json": {
-        response.setStatusLine(request.httpVersion, 200, "OK");
+        response.setStatusLine(request.httpVersion, status, "OK");
         response.setHeader("Content-Type", "application/json; charset=utf-8", false);
+        maybeMakeCached();
         response.write("{ \"greeting\": \"Hello JSON!\" }");
         response.finish();
         break;
       }
       case "jsonp": {
         let fun = params.filter((s) => s.contains("jsonp="))[0].split("=")[1];
-        response.setStatusLine(request.httpVersion, 200, "OK");
+        response.setStatusLine(request.httpVersion, status, "OK");
         response.setHeader("Content-Type", "text/json; charset=utf-8", false);
+        maybeMakeCached();
         response.write(fun + "({ \"greeting\": \"Hello JSONP!\" })");
         response.finish();
         break;
       }
       case "json-long": {
         let str = "{ \"greeting\": \"Hello long string JSON!\" },";
-        response.setStatusLine(request.httpVersion, 200, "OK");
+        response.setStatusLine(request.httpVersion, status, "OK");
         response.setHeader("Content-Type", "text/json; charset=utf-8", false);
+        maybeMakeCached();
         response.write("[" + new Array(2048).join(str).slice(0, -1) + "]");
         response.finish();
         break;
       }
       case "json-malformed": {
-        response.setStatusLine(request.httpVersion, 200, "OK");
+        response.setStatusLine(request.httpVersion, status, "OK");
         response.setHeader("Content-Type", "text/json; charset=utf-8", false);
+        maybeMakeCached();
         response.write("{ \"greeting\": \"Hello malformed JSON!\" },");
         response.finish();
         break;
       }
       case "json-custom-mime": {
-        response.setStatusLine(request.httpVersion, 200, "OK");
+        response.setStatusLine(request.httpVersion, status, "OK");
         response.setHeader("Content-Type", "text/x-bigcorp-json; charset=utf-8", false);
+        maybeMakeCached();
         response.write("{ \"greeting\": \"Hello oddly-named JSON!\" }");
         response.finish();
         break;
       }
       case "font": {
-        response.setStatusLine(request.httpVersion, 200, "OK");
+        response.setStatusLine(request.httpVersion, status, "OK");
         response.setHeader("Content-Type", "font/woff", false);
+        maybeMakeCached();
         response.finish();
         break;
       }
       case "image": {
-        response.setStatusLine(request.httpVersion, 200, "OK");
+        response.setStatusLine(request.httpVersion, status, "OK");
         response.setHeader("Content-Type", "image/png", false);
+        maybeMakeCached();
         response.finish();
         break;
       }
       case "audio": {
-        response.setStatusLine(request.httpVersion, 200, "OK");
+        response.setStatusLine(request.httpVersion, status, "OK");
         response.setHeader("Content-Type", "audio/ogg", false);
+        maybeMakeCached();
         response.finish();
         break;
       }
       case "video": {
-        response.setStatusLine(request.httpVersion, 200, "OK");
+        response.setStatusLine(request.httpVersion, status, "OK");
         response.setHeader("Content-Type", "video/webm", false);
+        maybeMakeCached();
         response.finish();
         break;
       }
       case "flash": {
-        response.setStatusLine(request.httpVersion, 200, "OK");
+        response.setStatusLine(request.httpVersion, status, "OK");
         response.setHeader("Content-Type", "application/x-shockwave-flash", false);
+        maybeMakeCached();
         response.finish();
         break;
       }
       default: {
         response.setStatusLine(request.httpVersion, 404, "Not Found");
         response.setHeader("Content-Type", "text/html; charset=utf-8", false);
         response.write("<blink>Not Found</blink>");
         response.finish();