The Tor Browser / file revision

 /* -*- Mode: javascript; tab-width: 2; indent-tabs-mode: nil; c-basic-offset: 2 -*- */

 /* vim: set ft=javascript ts=2 et sw=2 tw=80: */

 /* 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 HTML_NS = "http://www.w3.org/1999/xhtml";

 const EPSILON = 0.001;

 const SOURCE_SYNTAX_HIGHLIGHT_MAX_FILE_SIZE = 102400; // 100 KB in bytes

 const RESIZE_REFRESH_RATE = 50; // ms

 const REQUESTS_REFRESH_RATE = 50; // ms

 const REQUESTS_HEADERS_SAFE_BOUNDS = 30; // px

 const REQUESTS_TOOLTIP_POSITION = "topcenter bottomleft";

 const REQUESTS_TOOLTIP_IMAGE_MAX_DIM = 400; // px

 const REQUESTS_WATERFALL_SAFE_BOUNDS = 90; // px

 const REQUESTS_WATERFALL_HEADER_TICKS_MULTIPLE = 5; // ms

 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 = {

   "/ecmascript": Editor.modes.js,

   "/javascript": Editor.modes.js,

   "/x-javascript": Editor.modes.js,

   "/html": Editor.modes.html,

   "/xhtml": Editor.modes.html,

   "/xml": Editor.modes.html,

   "/atom": Editor.modes.html,

   "/soap": Editor.modes.html,

   "/rdf": Editor.modes.css,

   "/rss": Editor.modes.css,

   "/css": Editor.modes.css

 };

 const DEFAULT_EDITOR_CONFIG = {

   mode: Editor.modes.text,

   readOnly: true,

   lineNumbers: true

 };

 const GENERIC_VARIABLES_VIEW_SETTINGS = {

   lazyEmpty: true,

   lazyEmptyDelay: 10, // ms

   searchEnabled: true,

   editableValueTooltip: "",

   editableNameTooltip: "",

   preventDisableOnChange: true,

   preventDescriptorModifiers: true,

   eval: () => {}

 };

 const NETWORK_ANALYSIS_PIE_CHART_DIAMETER = 200; // px

 /**

  * Object defining the network monitor view components.

  */

 let NetMonitorView = {

   /**

    * Initializes the network monitor view.

    */

   initialize: function() {

     this._initializePanes();

     this.Toolbar.initialize();

     this.RequestsMenu.initialize();

     this.NetworkDetails.initialize();

     this.CustomRequest.initialize();

   },

   /**

    * Destroys the network monitor view.

    */

   destroy: function() {

     this.Toolbar.destroy();

     this.RequestsMenu.destroy();

     this.NetworkDetails.destroy();

     this.CustomRequest.destroy();

     this._destroyPanes();

   },

   /**

    * Initializes the UI for all the displayed panes.

    */

   _initializePanes: function() {

     dumpn("Initializing the NetMonitorView panes");

     this._body = $("#body");

     this._detailsPane = $("#details-pane");

     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");

     Prefs.networkDetailsWidth = this._detailsPane.getAttribute("width");

     Prefs.networkDetailsHeight = this._detailsPane.getAttribute("height");

     this._detailsPane = null;

     this._detailsPaneToggleButton = null;

   },

   /**

    * Gets the visibility state of the network details pane.

    * @return boolean

    */

   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

    *        - delayed: true to wait a few cycles before toggle

    *        - callback: a function to invoke when the toggle finishes

    * @param number aTabIndex [optional]

    *        The index of the intended selected tab in the details pane.

    */

   toggleDetailsPane: function(aFlags, aTabIndex) {

     let pane = this._detailsPane;

     let button = this._detailsPaneToggleButton;

     ViewHelpers.togglePane(aFlags, pane);

     if (aFlags.visible) {

       this._body.removeAttribute("pane-collapsed");

       button.removeAttribute("pane-collapsed");

       button.setAttribute("tooltiptext", this._collapsePaneString);

     } else {

       this._body.setAttribute("pane-collapsed", "");

       button.setAttribute("pane-collapsed", "");

       button.setAttribute("tooltiptext", this._expandPaneString);

     }

     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) {

     dumpn("Getting a NetMonitorView editor: " + aId);

     if (this._editorPromises.has(aId)) {

       return this._editorPromises.get(aId);

     }

     let deferred = promise.defer();

     this._editorPromises.set(aId, deferred.promise);

     // Initialize the source editor and store the newly created instance

     // in the ether of a resolved promise's value.

     let editor = new Editor(DEFAULT_EDITOR_CONFIG);

     editor.appendTo($(aId)).then(() => deferred.resolve(editor));

     return deferred.promise;

   },

   _body: null,

   _detailsPane: null,

   _detailsPaneToggleButton: null,

   _collapsePaneString: "",

   _expandPaneString: "",

   _editorPromises: new Map()

 };

 /**

  * Functions handling the toolbar view: expand/collapse button etc.

  */

 function ToolbarView() {

   dumpn("ToolbarView was instantiated");

   this._onTogglePanesPressed = this._onTogglePanesPressed.bind(this);

 }

 ToolbarView.prototype = {

   /**

    * Initialization function, called when the debugger is started.

    */

   initialize: function() {

     dumpn("Initializing the ToolbarView");

     this._detailsPaneToggleButton = $("#details-pane-toggle");

     this._detailsPaneToggleButton.addEventListener("mousedown", this._onTogglePanesPressed, false);

   },

   /**

    * Destruction function, called when the debugger is closed.

    */

   destroy: function() {

     dumpn("Destroying the ToolbarView");

     this._detailsPaneToggleButton.removeEventListener("mousedown", this._onTogglePanesPressed, false);

   },

   /**

    * Listener handling the toggle button click event.

    */

   _onTogglePanesPressed: function() {

     let requestsMenu = NetMonitorView.RequestsMenu;

     let selectedIndex = requestsMenu.selectedIndex;

     // Make sure there's a selection if the button is pressed, to avoid

     // showing an empty network details pane.

     if (selectedIndex == -1 && requestsMenu.itemCount) {

       requestsMenu.selectedIndex = 0;

     } else {

       requestsMenu.selectedIndex = -1;

     }

   },

   _detailsPaneToggleButton: null

 };

 /**

  * Functions handling the requests menu (containing details about each request,

  * like status, method, file, domain, as well as a waterfall representing

  * timing imformation).

  */

 function RequestsMenuView() {

   dumpn("RequestsMenuView was instantiated");

   this._flushRequests = this._flushRequests.bind(this);

   this._onHover = this._onHover.bind(this);

   this._onSelect = this._onSelect.bind(this);

   this._onSwap = this._onSwap.bind(this);

   this._onResize = this._onResize.bind(this);

   this._byFile = this._byFile.bind(this);

   this._byDomain = this._byDomain.bind(this);

   this._byType = this._byType.bind(this);

 }

 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 = $("#network-inspector-view-splitter");

     this._summary = $("#requests-menu-network-summary-label");

     this._summary.setAttribute("value", L10N.getStr("networkMenu.empty"));

     Prefs.filters.forEach(type => this.filterOn(type));

     this.sortContents(this._byTiming);

     this.allowFocusOnRightClick = true;

     this.maintainSelectionVisible = true;

     this.widget.autoscrollWithAppendedItems = true;

     this.widget.addEventListener("select", this._onSelect, false);

     this.widget.addEventListener("swap", this._onSwap, 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.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.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);

     window.once("connected", this._onConnect.bind(this));

   },

   _onConnect: function() {

     if (NetMonitorController.supportsCustomRequest) {

       $("#request-menu-context-resend").addEventListener("command", this._onContextResendCommand, 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);

     } else {

       $("#request-menu-context-resend").hidden = true;

       $("#headers-summary-resend").hidden = true;

     }

     if (NetMonitorController.supportsPerfStats) {

       $("#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);

       $("#network-statistics-back-button").addEventListener("command", this._onContextPerfCommand, false);

     } else {

       $("#notice-perf-message").hidden = true;

       $("#request-menu-context-perf").hidden = true;

       $("#requests-menu-network-summary-button").hidden = true;

       $("#requests-menu-network-summary-label").hidden = true;

     }

   },

   /**

    * Destruction function, called when the network monitor is closed.

    */

   destroy: function() {

     dumpn("Destroying the SourcesView");

     Prefs.filters = this._activeFilters;

     this.widget.removeEventListener("select", this._onSelect, false);

     this.widget.removeEventListener("swap", this._onSwap, 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.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);

     $("#network-statistics-back-button").removeEventListener("command", 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._firstRequestStartedMillis = -1;

     this._lastRequestEndedMillis = -1;

   },

   /**

    * Specifies if this view may be updated lazily.

    */

   lazyUpdate: true,

   /**

    * Adds a network request to this container.

    *

    * @param string aId

    *        An identifier coming from the network monitor controller.

    * @param string aStartedDateTime

    *        A string representation of when the request was started, which

    *        can be parsed by Date (for example "2012-09-17T19:50:03.699Z").

    * @param string aMethod

    *        Specifies the request method (e.g. "GET", "POST", etc.)

    * @param string aUrl

    *        Specifies the request's url.

    * @param boolean aIsXHR

    *        True if this request was initiated via XHR.

    */

   addRequest: function(aId, aStartedDateTime, aMethod, aUrl, aIsXHR) {

     // Convert the received date/time string to a unix timestamp.

     let unixTime = Date.parse(aStartedDateTime);

     // Create the element node for the network request item.

     let menuView = this._createMenuView(aMethod, aUrl);

     // Remember the first and last event boundaries.

     this._registerFirstRequestStart(unixTime);

     this._registerLastRequestEnd(unixTime);

     // Append a network request item to this container.

     let requestItem = this.push([menuView, aId], {

       attachment: {

         startedDeltaMillis: unixTime - this._firstRequestStartedMillis,

         startedMillis: unixTime,

         method: aMethod,

         url: aUrl,

         isXHR: aIsXHR

       }

     });

     // Create a tooltip for the newly appended network request item.

     let requestTooltip = requestItem.attachment.tooltip = new Tooltip(document, {

       closeOnEvents: [{

         emitter: $("#requests-menu-contents"),

         event: "scroll",

         useCapture: true

       }]

     });

     $("#details-pane-toggle").disabled = false;

     $("#requests-menu-empty-notice").hidden = true;

     this.refreshSummary();

     this.refreshZebra();

     this.refreshTooltip(requestItem);

     if (aId == this._preferredItemId) {

       this.selectedItem = requestItem;

     }

   },

   /**

    * Opens selected item in a new tab.

    */

   openRequestInTab: function() {

     let win = Services.wm.getMostRecentWindow("navigator:browser");

     let selected = this.selectedItem.attachment;

     win.openUILinkIn(selected.url, "tab", { relatedToCurrent: true });

   },

   /**

    * Copy the request url from the currently selected item.

    */

   copyUrl: function() {

     let selected = this.selectedItem.attachment;

     clipboardHelper.copyString(selected.url, document);

   },

   /**

    * Copy a cURL command from the currently selected item.

    */

   copyAsCurl: function() {

     let selected = this.selectedItem.attachment;

     Task.spawn(function*() {

       // Create a sanitized object for the Curl command generator.

       let data = {

         url: selected.url,

         method: selected.method,

         headers: [],

         httpVersion: selected.httpVersion,

         postDataText: null

       };

       // Fetch header values.

       for (let { name, value } of selected.requestHeaders.headers) {

         let text = yield gNetwork.getString(value);

         data.headers.push({ name: name, value: text });

       }

       // Fetch the request payload.

       if (selected.requestPostData) {

         let postData = selected.requestPostData.postData.text;

         data.postDataText = yield gNetwork.getString(postData);

       }

       clipboardHelper.copyString(Curl.generateCommand(data), 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);

     });

   },

   /**

    * Create a new custom request form populated with the data from

    * 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;

   },

   /**

    * Send a new HTTP request using the data in the custom request form.

    */

   sendCustomRequest: function() {

     let selected = this.selectedItem.attachment;

     let data = {

       url: selected.url,

       method: selected.method,

       httpVersion: selected.httpVersion,

     };

     if (selected.requestHeaders) {

       data.headers = selected.requestHeaders.headers;

     }

     if (selected.requestPostData) {

       data.body = selected.requestPostData.postData.text;

     }

     NetMonitorController.webConsoleClient.sendHTTPRequest(data, aResponse => {

       let id = aResponse.eventActor.actor;

       this._preferredItemId = id;

     });

     this.closeCustomRequest();

   },

   /**

    * Remove the currently selected custom request.

    */

   closeCustomRequest: function() {

     this.remove(this.selectedItem);

     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"

    *        "flash" or "other".

    */

   filterOn: function(aType = "all") {

     if (aType === "all") {

       // The filter "all" is special as it doesn't toggle.

       // - If some filters are selected and 'all' is clicked, the previously

       //   selected filters will be disabled and 'all' is the only active one.

       // - If 'all' is already selected, do nothing.

       if (this._activeFilters.indexOf("all") !== -1) {

         return;

       }

       // Uncheck all other filters and select 'all'. Must create a copy as

       // _disableFilter removes the filters from the list while it's being

       // iterated. 'all' will be enabled automatically by _disableFilter once

       // the last filter is disabled.

       this._activeFilters.slice().forEach(this._disableFilter, this);

     }

     else if (this._activeFilters.indexOf(aType) === -1) {

       this._enableFilter(aType);

     }

     else {

       this._disableFilter(aType);

     }

     this.filterContents(this._filterPredicate);

     this.refreshSummary();

     this.refreshZebra();

   },

   /**

    * Same as `filterOn`, except that it only allows a single type exclusively.

    *

    * @param string aType

    *        @see RequestsMenuView.prototype.fitlerOn

    */

   filterOnlyOn: function(aType = "all") {

     this._activeFilters.slice().forEach(this._disableFilter, this);

     this.filterOn(aType);

   },

   /**

    * Disables the given filter, its button and toggles 'all' on if the filter to

    * be disabled is the last one active.

    *

    * @param string aType

    *        Either "all", "html", "css", "js", "xhr", "fonts", "images", "media"

    *        "flash" or "other".

    */

   _disableFilter: function (aType) {

     // Remove the filter from list of active filters.

     this._activeFilters.splice(this._activeFilters.indexOf(aType), 1);

     // Remove the checked status from the filter.

     let target = $("#requests-menu-filter-" + aType + "-button");

     target.removeAttribute("checked");

     // Check if the filter disabled was the last one. If so, toggle all on.

     if (this._activeFilters.length === 0) {

       this._enableFilter("all");

     }

   },

   /**

    * Enables the given filter, its button and toggles 'all' off if the filter to

    * be enabled is the first one active.

    *

    * @param string aType

    *        Either "all", "html", "css", "js", "xhr", "fonts", "images", "media"

    *        "flash" or "other".

    */

   _enableFilter: function (aType) {

     // Make sure this is a valid filter type.

     if (Object.keys(this._allFilterPredicates).indexOf(aType) == -1) {

       return;

     }

     // Add the filter to the list of active filters.

     this._activeFilters.push(aType);

     // Add the checked status to the filter button.

     let target = $("#requests-menu-filter-" + aType + "-button");

     target.setAttribute("checked", true);

     // Check if 'all' was selected before. If so, disable it.

     if (aType !== "all" && this._activeFilters.indexOf("all") !== -1) {

       this._disableFilter("all");

     }

   },

   /**

    * Returns a predicate that can be used to test if a request matches any of

    * the active filters.

    */

   get _filterPredicate() {

     let filterPredicates = this._allFilterPredicates;

      if (this._activeFilters.length === 1) {

        // The simplest case: only one filter active.

        return filterPredicates[this._activeFilters[0]].bind(this);

      } else {

        // Multiple filters active.

        return requestItem => {

          return this._activeFilters.some(filterName => {

            return filterPredicates[filterName].call(this, requestItem);

          });

        };

      }

   },

   /**

    * Returns an object with all the filter predicates as [key: function] pairs.

    */

   get _allFilterPredicates() ({

     all: () => true,

     html: this.isHtml,

     css: this.isCss,

     js: this.isJs,

     xhr: this.isXHR,

     fonts: this.isFont,

     images: this.isImage,

     media: this.isMedia,

     flash: this.isFlash,

     other: this.isOther

   }),

   /**

    * Sorts all network requests in this container by a specified detail.

    *

    * @param string aType

    *        Either "status", "method", "file", "domain", "type", "size" or

    *        "waterfall".

    */

   sortBy: function(aType = "waterfall") {

     let target = $("#requests-menu-" + aType + "-button");

     let headers = document.querySelectorAll(".requests-menu-header-button");

     for (let header of headers) {

       if (header != target) {

         header.removeAttribute("sorted");

         header.removeAttribute("tooltiptext");

       }

     }

     let direction = "";

     if (target) {

       if (target.getAttribute("sorted") == "ascending") {

         target.setAttribute("sorted", direction = "descending");

         target.setAttribute("tooltiptext", L10N.getStr("networkMenu.sortedDesc"));

       } else {

         target.setAttribute("sorted", direction = "ascending");

         target.setAttribute("tooltiptext", L10N.getStr("networkMenu.sortedAsc"));

       }

     }

     // Sort by whatever was requested.

     switch (aType) {

       case "status":

         if (direction == "ascending") {

           this.sortContents(this._byStatus);

         } else {

           this.sortContents((a, b) => !this._byStatus(a, b));

         }

         break;

       case "method":

         if (direction == "ascending") {

           this.sortContents(this._byMethod);

         } else {

           this.sortContents((a, b) => !this._byMethod(a, b));

         }

         break;

       case "file":

         if (direction == "ascending") {

           this.sortContents(this._byFile);

         } else {

           this.sortContents((a, b) => !this._byFile(a, b));

         }

         break;

       case "domain":

         if (direction == "ascending") {

           this.sortContents(this._byDomain);

         } else {

           this.sortContents((a, b) => !this._byDomain(a, b));

         }

         break;

       case "type":

         if (direction == "ascending") {

           this.sortContents(this._byType);

         } else {

           this.sortContents((a, b) => !this._byType(a, b));

         }

         break;

       case "size":

         if (direction == "ascending") {

           this.sortContents(this._bySize);

         } else {

           this.sortContents((a, b) => !this._bySize(a, b));

         }

         break;

       case "waterfall":

         if (direction == "ascending") {

           this.sortContents(this._byTiming);

         } else {

           this.sortContents((a, b) => !this._byTiming(a, b));

         }

         break;

     }

     this.refreshSummary();

     this.refreshZebra();

   },

   /**

    * Removes all network requests and closes the sidebar if open.

    */

   clear: function() {

     NetMonitorView.Sidebar.toggle(false);

     $("#details-pane-toggle").disabled = true;

     this.empty();

     this.refreshSummary();

   },

   /**

    * Predicates used when filtering items.

    *

    * @param object aItem

    *        The filtered item.

    * @return boolean

    *         True if the item should be visible, false otherwise.

    */

   isHtml: function({ attachment: { mimeType } })

     mimeType && mimeType.contains("/html"),

   isCss: function({ attachment: { mimeType } })

     mimeType && mimeType.contains("/css"),

   isJs: function({ attachment: { mimeType } })

     mimeType && (

       mimeType.contains("/ecmascript") ||

       mimeType.contains("/javascript") ||

       mimeType.contains("/x-javascript")),

   isXHR: function({ attachment: { isXHR } })

     isXHR,

   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"),

   isImage: function({ attachment: { mimeType } })

     mimeType && mimeType.contains("image/"),

   isMedia: function({ attachment: { mimeType } }) // Not including images.

     mimeType && (

       mimeType.contains("audio/") ||

       mimeType.contains("video/") ||

       mimeType.contains("model/")),

   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

    *         -1 to sort aFirst to a lower index than aSecond

    *          0 to leave aFirst and aSecond unchanged with respect to each other

    *          1 to sort aSecond to a lower index than aFirst

    */

   _byTiming: function({ attachment: first }, { attachment: second })

     first.startedMillis > second.startedMillis,

   _byStatus: function({ attachment: first }, { attachment: second })

     first.status == second.status

       ? first.startedMillis > second.startedMillis

       : first.status > second.status,

   _byMethod: function({ attachment: first }, { attachment: second })

     first.method == second.method

       ? first.startedMillis > second.startedMillis

       : first.method > second.method,

   _byFile: function({ attachment: first }, { attachment: second }) {

     let firstUrl = this._getUriNameWithQuery(first.url).toLowerCase();

     let secondUrl = this._getUriNameWithQuery(second.url).toLowerCase();

     return firstUrl == secondUrl

       ? first.startedMillis > second.startedMillis

       : firstUrl > secondUrl;

   },

   _byDomain: function({ attachment: first }, { attachment: second }) {

     let firstDomain = this._getUriHostPort(first.url).toLowerCase();

     let secondDomain = this._getUriHostPort(second.url).toLowerCase();

     return firstDomain == secondDomain

       ? first.startedMillis > second.startedMillis

       : firstDomain > secondDomain;

   },

   _byType: function({ attachment: first }, { attachment: second }) {

     let firstType = this._getAbbreviatedMimeType(first.mimeType).toLowerCase();

     let secondType = this._getAbbreviatedMimeType(second.mimeType).toLowerCase();

     return firstType == secondType

       ? first.startedMillis > second.startedMillis

       : firstType > secondType;

   },

   _bySize: function({ attachment: first }, { attachment: second })

     first.contentSize > second.contentSize,

   /**

    * Refreshes the status displayed in this container's footer, providing

    * concise information about all requests.

    */

   refreshSummary: function() {

     let visibleItems = this.visibleItems;

     let visibleRequestsCount = visibleItems.length;

     if (!visibleRequestsCount) {

       this._summary.setAttribute("value", L10N.getStr("networkMenu.empty"));

       return;

     }

     let totalBytes = this._getTotalBytesOfRequests(visibleItems);

     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, 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;

     for (let i = 0, len = visibleItems.length; i < len; i++) {

       let requestItem = visibleItems[i];

       let requestTarget = requestItem.target;

       if (i % 2 == 0) {

         requestTarget.setAttribute("even", "");

         requestTarget.removeAttribute("odd");

       } else {

         requestTarget.setAttribute("odd", "");

         requestTarget.removeAttribute("even");

       }

     }

   },

   /**

    * Refreshes the toggling anchor for the specified item's tooltip.

    *

    * @param object aItem

    *        The network request item in this container.

    */

   refreshTooltip: function(aItem) {

     let tooltip = aItem.attachment.tooltip;

     tooltip.hide();

     tooltip.startTogglingOnHover(aItem.target, this._onHover);

     tooltip.defaultPosition = REQUESTS_TOOLTIP_POSITION;

   },

   /**

    * Schedules adding additional information to a network request.

    *

    * @param string aId

    *        An identifier coming from the network monitor controller.

    * @param object aData

    *        An object containing several { key: value } tuples of network info.

    *        Supported keys are "httpVersion", "status", "statusText" etc.

    */

   updateRequest: function(aId, aData) {

     // Prevent interference from zombie updates received after target closed.

     if (NetMonitorView._isDestroyed) {

       return;

     }

     this._updateQueue.push([aId, aData]);

     // Lazy updating is disabled in some tests.

     if (!this.lazyUpdate) {

       return void this._flushRequests();

     }

     // Allow requests to settle down first.

     setNamedTimeout(

       "update-requests", REQUESTS_REFRESH_RATE, () => this._flushRequests());

   },

   /**

    * Starts adding all queued additional information about network requests.

    */

   _flushRequests: function() {

     // For each queued additional information packet, get the corresponding

     // request item in the view and update it based on the specified data.

     for (let [id, data] of this._updateQueue) {

       let requestItem = this.getItemByValue(id);

       if (!requestItem) {

         // Packet corresponds to a dead request item, target navigated.

         continue;

       }

       // Each information packet may contain several { key: value } tuples of

       // network info, so update the view based on each one.

       for (let key in data) {

         let value = data[key];

         if (value === undefined) {

           // The information in the packet is empty, it can be safely ignored.

           continue;

         }

         switch (key) {

           case "requestHeaders":

             requestItem.attachment.requestHeaders = value;

             break;

           case "requestCookies":

             requestItem.attachment.requestCookies = value;

             break;

           case "requestPostData":

             // Search the POST data upload stream for request headers and add

             // them to a separate store, different from the classic headers.

             // XXX: Be really careful here! We're creating a function inside

             // a loop, so remember the actual request item we want to modify.

             let currentItem = requestItem;

             let currentStore = { headers: [], headersSize: 0 };

             Task.spawn(function*() {

               let postData = yield gNetwork.getString(value.postData.text);

               let payloadHeaders = CurlUtils.getHeadersFromMultipartText(postData);

               currentStore.headers = payloadHeaders;

               currentStore.headersSize = payloadHeaders.reduce(

                 (acc, { name, value }) => acc + name.length + value.length + 2, 0);

               // The `getString` promise is async, so we need to refresh the

               // information displayed in the network details pane again here.

               refreshNetworkDetailsPaneIfNecessary(currentItem);

             });

             requestItem.attachment.requestPostData = value;

             requestItem.attachment.requestHeadersFromUploadStream = currentStore;

             break;

           case "responseHeaders":

             requestItem.attachment.responseHeaders = value;

             break;

           case "responseCookies":

             requestItem.attachment.responseCookies = value;

             break;

           case "httpVersion":

             requestItem.attachment.httpVersion = value;

             break;

           case "status":

             requestItem.attachment.status = value;

             this.updateMenuView(requestItem, key, value);

             break;

           case "statusText":

             requestItem.attachment.statusText = value;

             this.updateMenuView(requestItem, key,

               requestItem.attachment.status + " " +

               requestItem.attachment.statusText);

             break;

           case "headersSize":

             requestItem.attachment.headersSize = value;

             break;

           case "contentSize":

             requestItem.attachment.contentSize = value;

             this.updateMenuView(requestItem, key, value);

             break;

           case "mimeType":

             requestItem.attachment.mimeType = value;

             this.updateMenuView(requestItem, key, value);

             break;

           case "responseContent":

             // 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");

             }

             requestItem.attachment.responseContent = value;

             this.updateMenuView(requestItem, key, value);

             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":

             requestItem.attachment.eventTimings = value;

             this._createWaterfallView(requestItem, value.timings);

             break;

         }

       }

       refreshNetworkDetailsPaneIfNecessary(requestItem);

     }

     /**

      * Refreshes the information displayed in the sidebar, in case this update

      * may have additional information about a request which isn't shown yet

      * in the network details pane.

      *

      * @param object aRequestItem

      *        The item to repopulate the sidebar with in case it's selected in

      *        this requests menu.

      */

     function refreshNetworkDetailsPaneIfNecessary(aRequestItem) {

       let selectedItem = NetMonitorView.RequestsMenu.selectedItem;

       if (selectedItem == aRequestItem) {

         NetMonitorView.NetworkDetails.populate(selectedItem.attachment);

       }

     }

     // We're done flushing all the requests, clear the update queue.

     this._updateQueue = [];

     // Make sure all the requests are sorted and filtered.

     // Freshly added requests may not yet contain all the information required

     // for sorting and filtering predicates, so this is done each time the

     // network requests table is flushed (don't worry, events are drained first

     // so this doesn't happen once per network event update).

     this.sortContents();

     this.filterContents();

     this.refreshSummary();

     this.refreshZebra();

     // Rescale all the waterfalls so that everything is visible at once.

     this._flushWaterfallViews();

   },

   /**

    * Customization function for creating an item's UI.

    *

    * @param string aMethod

    *        Specifies the request method (e.g. "GET", "POST", etc.)

    * @param string aUrl

    *        Specifies the request's url.

    * @return nsIDOMNode

    *         The network request view.

    */

   _createMenuView: function(aMethod, aUrl) {

     let template = $("#requests-menu-item-template");

     let fragment = document.createDocumentFragment();

     this.updateMenuView(template, 'method', aMethod);

     this.updateMenuView(template, 'url', aUrl);

     let waterfall = $(".requests-menu-waterfall", template);

     waterfall.style.backgroundImage = this._cachedWaterfallBackground;

     // Flatten the DOM by removing one redundant box (the template container).

     for (let node of template.childNodes) {

       fragment.appendChild(node.cloneNode(true));

     }

     return fragment;

   },

   /**

    * Updates the information displayed in a network request item view.

    *

    * @param object aItem

    *        The network request item in this container.

    * @param string aKey

    *        The type of information that is to be updated.

    * @param any aValue

    *        The new value to be shown.

    * @return object

    *         A promise that is resolved once the information is displayed.

    */

   updateMenuView: Task.async(function*(aItem, aKey, aValue) {

     let target = aItem.target || aItem;

     switch (aKey) {

       case "method": {

         let node = $(".requests-menu-method", target);

         node.setAttribute("value", aValue);

         break;

       }

       case "url": {

         let uri;

         try {

           uri = nsIURL(aValue);

         } catch(e) {

           break; // User input may not make a well-formed url yet.

         }

         let nameWithQuery = this._getUriNameWithQuery(uri);

         let hostPort = this._getUriHostPort(uri);

         let file = $(".requests-menu-file", target);

         file.setAttribute("value", nameWithQuery);

         file.setAttribute("tooltiptext", nameWithQuery);

         let domain = $(".requests-menu-domain", target);

         domain.setAttribute("value", hostPort);

         domain.setAttribute("tooltiptext", hostPort);

         break;

       }

       case "status": {

         let node = $(".requests-menu-status", target);

         let codeNode = $(".requests-menu-status-code", target);

         codeNode.setAttribute("value", aValue);

         node.setAttribute("code", aValue);

         break;

       }

       case "statusText": {

         let node = $(".requests-menu-status-and-method", target);

         node.setAttribute("tooltiptext", aValue);

         break;

       }

       case "contentSize": {

         let kb = aValue / 1024;

         let size = L10N.numberWithDecimals(kb, CONTENT_SIZE_DECIMALS);

         let node = $(".requests-menu-size", target);

         let text = L10N.getFormatStr("networkMenu.sizeKB", size);

         node.setAttribute("value", text);

         node.setAttribute("tooltiptext", text);

         break;

       }

       case "mimeType": {

         let type = this._getAbbreviatedMimeType(aValue);

         let node = $(".requests-menu-type", target);

         let text = CONTENT_MIME_TYPE_ABBREVIATIONS[type] || type;

         node.setAttribute("value", text);

         node.setAttribute("tooltiptext", aValue);

         break;

       }

       case "responseContent": {

         let { mimeType } = aItem.attachment;

         let { text, encoding } = aValue.content;

         if (mimeType.contains("image/")) {

           let responseBody = yield gNetwork.getString(text);

           let node = $(".requests-menu-icon", aItem.target);

           node.src = "data:" + mimeType + ";" + encoding + "," + responseBody;

           node.setAttribute("type", "thumbnail");

           node.removeAttribute("hidden");

           window.emit(EVENTS.RESPONSE_IMAGE_THUMBNAIL_DISPLAYED);

         }

         break;

       }

       case "totalTime": {

         let node = $(".requests-menu-timings-total", target);

         let text = L10N.getFormatStr("networkMenu.totalMS", aValue); // integer

         node.setAttribute("value", text);

         node.setAttribute("tooltiptext", text);

         break;

       }

     }

   }),

   /**

    * Creates a waterfall representing timing information in a network request item view.

    *

    * @param object aItem

    *        The network request item in this container.

    * @param object aTimings

    *        An object containing timing information.

    */

   _createWaterfallView: function(aItem, aTimings) {

     let { target, attachment } = aItem;

     let sections = ["dns", "connect", "send", "wait", "receive"];

     // Skipping "blocked" because it doesn't work yet.

     let timingsNode = $(".requests-menu-timings", target);

     let timingsTotal = $(".requests-menu-timings-total", timingsNode);

     // Add a set of boxes representing timing information.

     for (let key of sections) {

       let width = aTimings[key];

       // Don't render anything if it surely won't be visible.

       // One millisecond == one unscaled pixel.

       if (width > 0) {

         let timingBox = document.createElement("hbox");

         timingBox.className = "requests-menu-timings-box " + key;

         timingBox.setAttribute("width", width);

         timingsNode.insertBefore(timingBox, timingsTotal);

       }

     }

   },

   /**

    * Rescales and redraws all the waterfall views in this container.

    *

    * @param boolean aReset

    *        True if this container's width was changed.

    */

   _flushWaterfallViews: function(aReset) {

     // Don't paint things while the waterfall view isn't even visible,

     // or there are no items added to this container.

     if (NetMonitorView.currentFrontendMode != "network-inspector-view" || !this.itemCount) {

       return;

     }

     // To avoid expensive operations like getBoundingClientRect() and

     // rebuilding the waterfall background each time a new request comes in,

     // stuff is cached. However, in certain scenarios like when the window

     // is resized, this needs to be invalidated.

     if (aReset) {

       this._cachedWaterfallWidth = 0;

     }

     // Determine the scaling to be applied to all the waterfalls so that

     // everything is visible at once. One millisecond == one unscaled pixel.

     let availableWidth = this._waterfallWidth - REQUESTS_WATERFALL_SAFE_BOUNDS;

     let longestWidth = this._lastRequestEndedMillis - this._firstRequestStartedMillis;

     let scale = Math.min(Math.max(availableWidth / longestWidth, EPSILON), 1);

     // Redraw and set the canvas background for each waterfall view.

     this._showWaterfallDivisionLabels(scale);

     this._drawWaterfallBackground(scale);

     this._flushWaterfallBackgrounds();

     // Apply CSS transforms to each waterfall in this container totalTime

     // accurately translate and resize as needed.

     for (let { target, attachment } of this) {

       let timingsNode = $(".requests-menu-timings", target);

       let totalNode = $(".requests-menu-timings-total", target);

       let direction = window.isRTL ? -1 : 1;

       // Render the timing information at a specific horizontal translation

       // based on the delta to the first monitored event network.

       let translateX = "translateX(" + (direction * attachment.startedDeltaMillis) + "px)";

       // Based on the total time passed until the last request, rescale

       // all the waterfalls to a reasonable size.

       let scaleX = "scaleX(" + scale + ")";

       // Certain nodes should not be scaled, even if they're children of

       // another scaled node. In this case, apply a reversed transformation.

       let revScaleX = "scaleX(" + (1 / scale) + ")";

       timingsNode.style.transform = scaleX + " " + translateX;

       totalNode.style.transform = revScaleX;

     }

   },

   /**

    * Creates the labels displayed on the waterfall header in this container.

    *

    * @param number aScale

    *        The current waterfall scale.

    */

   _showWaterfallDivisionLabels: function(aScale) {

     let container = $("#requests-menu-waterfall-button");

     let availableWidth = this._waterfallWidth - REQUESTS_WATERFALL_SAFE_BOUNDS;

     // Nuke all existing labels.

     while (container.hasChildNodes()) {

       container.firstChild.remove();

     }

     // Build new millisecond tick labels...

     let timingStep = REQUESTS_WATERFALL_HEADER_TICKS_MULTIPLE;

     let optimalTickIntervalFound = false;

     while (!optimalTickIntervalFound) {

       // Ignore any divisions that would end up being too close to each other.

       let scaledStep = aScale * timingStep;

       if (scaledStep < REQUESTS_WATERFALL_HEADER_TICKS_SPACING_MIN) {

         timingStep <<= 1;

         continue;

       }

       optimalTickIntervalFound = true;

       // Insert one label for each division on the current scale.

       let fragment = document.createDocumentFragment();

       let direction = window.isRTL ? -1 : 1;

       for (let x = 0; x < availableWidth; x += scaledStep) {

         let translateX = "translateX(" + ((direction * x) | 0) + "px)";

         let millisecondTime = x / aScale;

         let normalizedTime = millisecondTime;

         let divisionScale = "millisecond";

         // If the division is greater than 1 minute.

         if (normalizedTime > 60000) {

           normalizedTime /= 60000;

           divisionScale = "minute";

         }

         // If the division is greater than 1 second.

         else if (normalizedTime > 1000) {

           normalizedTime /= 1000;

           divisionScale = "second";

         }

         // Showing too many decimals is bad UX.

         if (divisionScale == "millisecond") {

           normalizedTime |= 0;

         } else {

           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;

         node.setAttribute("value", text);

         fragment.appendChild(node);

       }

       container.appendChild(fragment);

     }

   },

   /**

    * Creates the background displayed on each waterfall view in this container.

    *

    * @param number aScale

    *        The current waterfall scale.

    */

   _drawWaterfallBackground: function(aScale) {

     if (!this._canvas || !this._ctx) {

       this._canvas = document.createElementNS(HTML_NS, "canvas");

       this._ctx = this._canvas.getContext("2d");

     }

     let canvas = this._canvas;

     let ctx = this._ctx;

     // Nuke the context.

     let canvasWidth = canvas.width = this._waterfallWidth;

     let canvasHeight = canvas.height = 1; // Awww yeah, 1px, repeats on Y axis.

     // Start over.

     let imageData = ctx.createImageData(canvasWidth, canvasHeight);

     let pixelArray = imageData.data;

     let buf = new ArrayBuffer(pixelArray.length);

     let buf8 = new Uint8ClampedArray(buf);

     let data32 = new Uint32Array(buf);

     // Build new millisecond tick lines...

     let timingStep = REQUESTS_WATERFALL_BACKGROUND_TICKS_MULTIPLE;

     let [r, g, b] = REQUESTS_WATERFALL_BACKGROUND_TICKS_COLOR_RGB;

     let alphaComponent = REQUESTS_WATERFALL_BACKGROUND_TICKS_OPACITY_MIN;

     let optimalTickIntervalFound = false;

     while (!optimalTickIntervalFound) {

       // Ignore any divisions that would end up being too close to each other.

       let scaledStep = aScale * timingStep;

       if (scaledStep < REQUESTS_WATERFALL_BACKGROUND_TICKS_SPACING_MIN) {

         timingStep <<= 1;

         continue;

       }

       optimalTickIntervalFound = true;

       // Insert one pixel for each division on each scale.

       for (let i = 1; i <= REQUESTS_WATERFALL_BACKGROUND_TICKS_SCALES; i++) {

         let increment = scaledStep * Math.pow(2, i);

         for (let x = 0; x < canvasWidth; x += increment) {

           let position = (window.isRTL ? canvasWidth - x : x) | 0;

           data32[position] = (alphaComponent << 24) | (b << 16) | (g << 8) | r;

         }

         alphaComponent += REQUESTS_WATERFALL_BACKGROUND_TICKS_OPACITY_ADD;

       }

     }

     // Flush the image data and cache the waterfall background.

     pixelArray.set(buf8);

     ctx.putImageData(imageData, 0, 0);

     this._cachedWaterfallBackground = "url(" + canvas.toDataURL() + ")";

   },

   /**

    * Reapplies the current waterfall background on all request items.

    */

   _flushWaterfallBackgrounds: function() {

     for (let { target } of this) {

       let waterfallNode = $(".requests-menu-waterfall", target);

       waterfallNode.style.backgroundImage = this._cachedWaterfallBackground;

     }

   },

   /**

    * The selection listener for this container.

    */

   _onSelect: function({ detail: item }) {

     if (item) {

       NetMonitorView.Sidebar.populate(item.attachment);

       NetMonitorView.Sidebar.toggle(true);

     } else {

       NetMonitorView.Sidebar.toggle(false);

     }

   },

   /**

    * The swap listener for this container.

    * Called when two items switch places, when the contents are sorted.

    */

   _onSwap: function({ detail: [firstItem, secondItem] }) {

     // Sorting will create new anchor nodes for all the swapped request items

     // in this container, so it's necessary to refresh the Tooltip instances.

     this.refreshTooltip(firstItem);

     this.refreshTooltip(secondItem);

   },

   /**

    * The predicate used when deciding whether a popup should be shown

    * over a request item or not.

    *

    * @param nsIDOMNode aTarget

    *        The element node currently being hovered.

    * @param object aTooltip

    *        The current tooltip instance.

    */

   _onHover: function(aTarget, aTooltip) {

     let requestItem = this.getItemForElement(aTarget);

     if (!requestItem || !requestItem.attachment.responseContent) {

       return;

     }

     let hovered = requestItem.attachment;

     let { url } = hovered;

     let { mimeType, text, encoding } = hovered.responseContent.content;

     if (mimeType && mimeType.contains("image/") && (

       aTarget.classList.contains("requests-menu-icon") ||

       aTarget.classList.contains("requests-menu-file")))

     {

       return gNetwork.getString(text).then(aString => {

         let anchor = $(".requests-menu-icon", requestItem.target);

         let src = "data:" + mimeType + ";" + encoding + "," + aString;

         aTooltip.setImageContent(src, { maxDim: REQUESTS_TOOLTIP_IMAGE_MAX_DIM });

         return anchor;

       });

     }

   },

   /**

    * The resize listener for this container's window.

    */

   _onResize: function(e) {

     // 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 = !NetMonitorController.supportsCustomRequest ||

       !selectedItem || selectedItem.attachment.isCustom;

     let copyUrlElement = $("#request-menu-context-copy-url");

     copyUrlElement.hidden = !selectedItem;

     let copyAsCurlElement = $("#request-menu-context-copy-as-curl");

     copyAsCurlElement.hidden = !selectedItem || !selectedItem.attachment.responseContent;

     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 = !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.

    */

   _registerFirstRequestStart: function(aUnixTime) {

     if (this._firstRequestStartedMillis == -1) {

       this._firstRequestStartedMillis = aUnixTime;

     }

   },

   /**

    * Checks if the specified unix time is the last one to be known of,

    * and saves it if so.

    *

    * @param number aUnixTime

    *        The milliseconds to check and save.

    */

   _registerLastRequestEnd: function(aUnixTime) {

     if (this._lastRequestEndedMillis < aUnixTime) {

       this._lastRequestEndedMillis = aUnixTime;

     }

   },

   /**

    * Helpers for getting details about an nsIURL.

    *

    * @param nsIURL | string aUrl

    * @return string

    */

   _getUriNameWithQuery: function(aUrl) {

     if (!(aUrl instanceof Ci.nsIURL)) {

       aUrl = nsIURL(aUrl);

     }

     let name = NetworkHelper.convertToUnicode(unescape(aUrl.fileName)) || "/";

     let query = NetworkHelper.convertToUnicode(unescape(aUrl.query));

     return name + (query ? "?" + query : "");

   },

   _getUriHostPort: function(aUrl) {

     if (!(aUrl instanceof Ci.nsIURL)) {

       aUrl = nsIURL(aUrl);

     }

     return NetworkHelper.convertToUnicode(unescape(aUrl.hostPort));

   },

   /**

    * Helper for getting an abbreviated string for a mime type.

    *

    * @param string aMimeType

    * @return string

    */

   _getAbbreviatedMimeType: function(aMimeType) {

     if (!aMimeType) {

       return "";

     }

     return (aMimeType.split(";")[0].split("/")[1] || "").split("+")[0];

   },

   /**

    * Gets the total number of bytes representing the cumulated content size of

    * a set of requests. Returns 0 for an empty set.

    *

    * @param array aItemsArray

    * @return number

    */

   _getTotalBytesOfRequests: function(aItemsArray) {

     if (!aItemsArray.length) {

       return 0;

     }

     return aItemsArray.reduce((prev, curr) => prev + curr.attachment.contentSize || 0, 0);

   },

   /**

    * Gets the oldest (first performed) request in a set. Returns null for an

    * empty set.

    *

    * @param array aItemsArray

    * @return object

    */

   _getOldestRequest: function(aItemsArray) {

     if (!aItemsArray.length) {

       return null;

     }

     return aItemsArray.reduce((prev, curr) =>

       prev.attachment.startedMillis < curr.attachment.startedMillis ? prev : curr);

   },

   /**

    * Gets the newest (latest performed) request in a set. Returns null for an

    * empty set.

    *

    * @param array aItemsArray

    * @return object

    */

   _getNewestRequest: function(aItemsArray) {

     if (!aItemsArray.length) {

       return null;

     }

     return aItemsArray.reduce((prev, curr) =>

       prev.attachment.startedMillis > curr.attachment.startedMillis ? prev : curr);

   },

   /**

    * Gets the available waterfall width in this container.

    * @return number

    */

   get _waterfallWidth() {

     if (this._cachedWaterfallWidth == 0) {

       let container = $("#requests-menu-toolbar");

       let waterfall = $("#requests-menu-waterfall-header-box");

       let containerBounds = container.getBoundingClientRect();

       let waterfallBounds = waterfall.getBoundingClientRect();

       if (!window.isRTL) {

         this._cachedWaterfallWidth = containerBounds.width - waterfallBounds.left;

       } else {

         this._cachedWaterfallWidth = waterfallBounds.right;

       }

     }

     return this._cachedWaterfallWidth;

   },

   _splitter: null,

   _summary: null,

   _canvas: null,

   _ctx: null,

   _cachedWaterfallWidth: 0,

   _cachedWaterfallBackground: "",

   _firstRequestStartedMillis: -1,

   _lastRequestEndedMillis: -1,

   _updateQueue: [],

   _updateTimeout: null,

   _resizeTimeout: null,

   _activeFilters: ["all"]

 });

 /**

  * Functions handling the sidebar details view.

  */

 function SidebarView() {

   dumpn("SidebarView was instantiated");

 }

 SidebarView.prototype = {

   /**

    * Sets this view hidden or visible. It's visible by default.

    *

    * @param boolean aVisibleFlag

    *        Specifies the intended visibility.

    */

   toggle: function(aVisibleFlag) {

     NetMonitorView.toggleDetailsPane({ visible: aVisibleFlag });

     NetMonitorView.RequestsMenu._flushWaterfallViews(true);

   },

   /**

    * Populates this view with the specified data.

    *

    * @param object aData

    *        The data source (this should be the attachment of a request item).

    * @return object

    *        Returns a promise that resolves upon population of the subview.

    */

   populate: Task.async(function*(aData) {

     let isCustom = aData.isCustom;

     let view = isCustom ?

       NetMonitorView.CustomRequest :

       NetMonitorView.NetworkDetails;

     yield view.populate(aData);

     $("#details-pane").selectedIndex = isCustom ? 0 : 1;

     window.emit(EVENTS.SIDEBAR_POPULATED);

   })

 }

 /**

  * Functions handling the custom request view.

  */

 function CustomRequestView() {

   dumpn("CustomRequestView was instantiated");

 }

 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");

     $("#custom-pane").removeEventListener("input", this.updateCustomRequestEvent, false);

   },

   /**

    * Populates this view with the specified data.

    *

    * @param object aData

    *        The data source (this should be the attachment of a request item).

    * @return object

    *        Returns a promise that resolves upon population the view.

    */

   populate: Task.async(function*(aData) {

     $("#custom-url-value").value = aData.url;

     $("#custom-method-value").value = aData.method;

     this.updateCustomQuery(aData.url);

     if (aData.requestHeaders) {

       let headers = aData.requestHeaders.headers;

       $("#custom-headers-value").value = writeHeaderText(headers);

     }

     if (aData.requestPostData) {

       let postData = aData.requestPostData.postData.text;

       $("#custom-postdata-value").value = yield gNetwork.getString(postData);

     }

     window.emit(EVENTS.CUSTOMREQUESTVIEW_POPULATED);

   }),

   /**

    * Handle user input in the custom request form.

    *

    * @param object aField

    *        the field that the user updated.

    */

   onUpdate: function(aField) {

     let selectedItem = NetMonitorView.RequestsMenu.selectedItem;

     let field = aField;

     let value;

     switch(aField) {

       case 'method':

         value = $("#custom-method-value").value.trim();

         selectedItem.attachment.method = value;

         break;

       case 'url':

         value = $("#custom-url-value").value;

         this.updateCustomQuery(value);

         selectedItem.attachment.url = value;

         break;

       case 'query':

         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 } };

         break;

       case 'headers':

         let headersText = $("#custom-headers-value").value;

         value = parseHeadersText(headersText);

         selectedItem.attachment.requestHeaders = { headers: value };

         break;

     }

     NetMonitorView.RequestsMenu.updateMenuView(selectedItem, field, value);

   },

   /**

    * Update the query string field based on the url.

    *

    * @param object aUrl

    *        The URL to extract query string from.

    */

   updateCustomQuery: function(aUrl) {

     let paramsArray = parseQueryString(nsIURL(aUrl).query);

     if (!paramsArray) {

       $("#custom-query").hidden = true;

       return;

     }

     $("#custom-query").hidden = false;

     $("#custom-query-value").value = writeQueryText(paramsArray);

   },

   /**

    * Update the url based on the query string field.

    *

    * @param object aQueryText

    *        The contents of the query string field.

    */

   updateCustomUrl: function(aQueryText) {

     let params = parseQueryText(aQueryText);

     let queryString = writeQueryString(params);

     let url = $("#custom-url-value").value;

     let oldQuery = nsIURL(url).query;

     let path = url.replace(oldQuery, queryString);

     $("#custom-url-value").value = path;

   }

 }

 /**

  * Functions handling the requests details view.

  */

 function NetworkDetailsView() {

   dumpn("NetworkDetailsView was instantiated");

   this._onTabSelect = this._onTabSelect.bind(this);

 };

 NetworkDetailsView.prototype = {

   /**

    * Initialization function, called when the network monitor is started.

    */

   initialize: function() {

     dumpn("Initializing the NetworkDetailsView");

     this.widget = $("#event-details-pane");

     this._headers = new VariablesView($("#all-headers"),

       Heritage.extend(GENERIC_VARIABLES_VIEW_SETTINGS, {

         emptyText: L10N.getStr("headersEmptyText"),

         searchPlaceholder: L10N.getStr("headersFilterText")

       }));

     this._cookies = new VariablesView($("#all-cookies"),

       Heritage.extend(GENERIC_VARIABLES_VIEW_SETTINGS, {

         emptyText: L10N.getStr("cookiesEmptyText"),

         searchPlaceholder: L10N.getStr("cookiesFilterText")

       }));

     this._params = new VariablesView($("#request-params"),

       Heritage.extend(GENERIC_VARIABLES_VIEW_SETTINGS, {

         emptyText: L10N.getStr("paramsEmptyText"),

         searchPlaceholder: L10N.getStr("paramsFilterText")

       }));

     this._json = new VariablesView($("#response-content-json"),

       Heritage.extend(GENERIC_VARIABLES_VIEW_SETTINGS, {

         onlyEnumVisible: true,

         searchPlaceholder: L10N.getStr("jsonFilterText")

       }));

     VariablesViewController.attach(this._json);

     this._paramsQueryString = L10N.getStr("paramsQueryString");

     this._paramsFormData = L10N.getStr("paramsFormData");

     this._paramsPostPayload = L10N.getStr("paramsPostPayload");

     this._requestHeaders = L10N.getStr("requestHeaders");

     this._requestHeadersFromUpload = L10N.getStr("requestHeadersFromUpload");

     this._responseHeaders = L10N.getStr("responseHeaders");

     this._requestCookies = L10N.getStr("requestCookies");

     this._responseCookies = L10N.getStr("responseCookies");

     $("tabpanels", this.widget).addEventListener("select", this._onTabSelect);

   },

   /**

    * Destruction function, called when the network monitor is closed.

    */

   destroy: function() {

     dumpn("Destroying the NetworkDetailsView");

   },

   /**

    * Populates this view with the specified data.

    *

    * @param object aData

    *        The data source (this should be the attachment of a request item).

    * @return object

    *        Returns a promise that resolves upon population the view.

    */

   populate: function(aData) {

     $("#request-params-box").setAttribute("flex", "1");

     $("#request-params-box").hidden = false;

     $("#request-post-data-textarea-box").hidden = true;

     $("#response-content-info-header").hidden = true;

     $("#response-content-json-box").hidden = true;

     $("#response-content-textarea-box").hidden = true;

     $("#response-content-image-box").hidden = true;

     let isHtml = RequestsMenuView.prototype.isHtml({ attachment: aData });

     // Show the "Preview" tabpanel only for plain HTML responses.

     $("#preview-tab").hidden = !isHtml;

     $("#preview-tabpanel").hidden = !isHtml;

     // Switch to the "Headers" tabpanel if the "Preview" previously selected

     // and this is not an HTML response.

     if (!isHtml && this.widget.selectedIndex == 5) {

       this.widget.selectedIndex = 0;

     }

     this._headers.empty();

     this._cookies.empty();

     this._params.empty();

     this._json.empty();

     this._dataSrc = { src: aData, populated: [] };

     this._onTabSelect();

     window.emit(EVENTS.NETWORKDETAILSVIEW_POPULATED);

     return promise.resolve();

   },

   /**

    * Listener handling the tab selection event.

    */

   _onTabSelect: function() {

     let { src, populated } = this._dataSrc || {};

     let tab = this.widget.selectedIndex;

     let view = this;

     // Make sure the data source is valid and don't populate the same tab twice.

     if (!src || populated[tab]) {

       return;

     }

     Task.spawn(function*() {

       switch (tab) {

         case 0: // "Headers"

           yield view._setSummary(src);

           yield view._setResponseHeaders(src.responseHeaders);

           yield view._setRequestHeaders(

             src.requestHeaders,

             src.requestHeadersFromUploadStream);

           break;

         case 1: // "Cookies"

           yield view._setResponseCookies(src.responseCookies);

           yield view._setRequestCookies(src.requestCookies);

           break;

         case 2: // "Params"

           yield view._setRequestGetParams(src.url);

           yield view._setRequestPostParams(

             src.requestHeaders,

             src.requestHeadersFromUploadStream,

             src.requestPostData);

           break;

         case 3: // "Response"

           yield view._setResponseBody(src.url, src.responseContent);

           break;

         case 4: // "Timings"

           yield view._setTimingsInformation(src.eventTimings);

           break;

         case 5: // "Preview"

           yield view._setHtmlPreview(src.responseContent);

           break;

       }

       populated[tab] = true;

       window.emit(EVENTS.TAB_UPDATED);

       NetMonitorView.RequestsMenu.ensureSelectedItemIsVisible();

     });

   },

   /**

    * Sets the network request summary shown in this view.

    *

    * @param object aData

    *        The data source (this should be the attachment of a request item).

    */

   _setSummary: function(aData) {

     if (aData.url) {

       let unicodeUrl = NetworkHelper.convertToUnicode(unescape(aData.url));

       $("#headers-summary-url-value").setAttribute("value", unicodeUrl);

       $("#headers-summary-url-value").setAttribute("tooltiptext", unicodeUrl);

       $("#headers-summary-url").removeAttribute("hidden");

     } else {

       $("#headers-summary-url").setAttribute("hidden", "true");

     }

     if (aData.method) {

       $("#headers-summary-method-value").setAttribute("value", aData.method);

       $("#headers-summary-method").removeAttribute("hidden");

     } else {

       $("#headers-summary-method").setAttribute("hidden", "true");

     }

     if (aData.status) {

       $("#headers-summary-status-circle").setAttribute("code", aData.status);

       $("#headers-summary-status-value").setAttribute("value", aData.status + " " + aData.statusText);

       $("#headers-summary-status").removeAttribute("hidden");

     } else {

       $("#headers-summary-status").setAttribute("hidden", "true");

     }

     if (aData.httpVersion && aData.httpVersion != DEFAULT_HTTP_VERSION) {

       $("#headers-summary-version-value").setAttribute("value", aData.httpVersion);

       $("#headers-summary-version").removeAttribute("hidden");

     } else {

       $("#headers-summary-version").setAttribute("hidden", "true");

     }

   },

   /**

    * Sets the network request headers shown in this view.

    *

    * @param object aHeadersResponse

    *        The "requestHeaders" message received from the server.

    * @param object aHeadersFromUploadStream

    *        The "requestHeadersFromUploadStream" inferred from the POST payload.

    * @return object

    *        A promise that resolves when request headers are set.

    */

   _setRequestHeaders: Task.async(function*(aHeadersResponse, aHeadersFromUploadStream) {

     if (aHeadersResponse && aHeadersResponse.headers.length) {

       yield this._addHeaders(this._requestHeaders, aHeadersResponse);

     }

     if (aHeadersFromUploadStream && aHeadersFromUploadStream.headers.length) {

       yield this._addHeaders(this._requestHeadersFromUpload, aHeadersFromUploadStream);

     }

   }),

   /**

    * Sets the network response headers shown in this view.

    *

    * @param object aResponse

    *        The message received from the server.

    * @return object

    *        A promise that resolves when response headers are set.

    */

   _setResponseHeaders: Task.async(function*(aResponse) {

     if (aResponse && aResponse.headers.length) {

       aResponse.headers.sort((a, b) => a.name > b.name);

       yield this._addHeaders(this._responseHeaders, aResponse);

     }

   }),

   /**

    * Populates the headers container in this view with the specified data.

    *

    * @param string aName

    *        The type of headers to populate (request or response).

    * @param object aResponse

    *        The message received from the server.

    * @return object

    *        A promise that resolves when headers are added.

    */

   _addHeaders: Task.async(function*(aName, aResponse) {

     let kb = aResponse.headersSize / 1024;

     let size = L10N.numberWithDecimals(kb, HEADERS_SIZE_DECIMALS);

     let text = L10N.getFormatStr("networkMenu.sizeKB", size);

     let headersScope = this._headers.addScope(aName + " (" + text + ")");

     headersScope.expanded = true;

     for (let header of aResponse.headers) {

       let headerVar = headersScope.addItem(header.name, {}, true);

       let headerValue = yield gNetwork.getString(header.value);

       headerVar.setGrip(headerValue);

     }

   }),

   /**

    * Sets the network request cookies shown in this view.

    *

    * @param object aResponse

    *        The message received from the server.

    * @return object

    *        A promise that is resolved when the request cookies are set.

    */

   _setRequestCookies: Task.async(function*(aResponse) {

     if (aResponse && aResponse.cookies.length) {

       aResponse.cookies.sort((a, b) => a.name > b.name);

       yield this._addCookies(this._requestCookies, aResponse);

     }

   }),

   /**

    * Sets the network response cookies shown in this view.

    *

    * @param object aResponse

    *        The message received from the server.

    * @return object

    *        A promise that is resolved when the response cookies are set.

    */

   _setResponseCookies: Task.async(function*(aResponse) {

     if (aResponse && aResponse.cookies.length) {

       yield this._addCookies(this._responseCookies, aResponse);

     }

   }),

   /**

    * Populates the cookies container in this view with the specified data.

    *

    * @param string aName

    *        The type of cookies to populate (request or response).

    * @param object aResponse

    *        The message received from the server.

    * @return object

    *        Returns a promise that resolves upon the adding of cookies.

    */

   _addCookies: Task.async(function*(aName, aResponse) {

     let cookiesScope = this._cookies.addScope(aName);

     cookiesScope.expanded = true;

     for (let cookie of aResponse.cookies) {

       let cookieVar = cookiesScope.addItem(cookie.name, {}, true);

       let cookieValue = yield gNetwork.getString(cookie.value);

       cookieVar.setGrip(cookieValue);

       // By default the cookie name and value are shown. If this is the only

       // information available, then nothing else is to be displayed.

       let cookieProps = Object.keys(cookie);

       if (cookieProps.length == 2) {

         return;

       }

       // Display any other information other than the cookie name and value

       // which may be available.

       let rawObject = Object.create(null);

       let otherProps = cookieProps.filter(e => e != "name" && e != "value");

       for (let prop of otherProps) {

         rawObject[prop] = cookie[prop];

       }

       cookieVar.populate(rawObject);

       cookieVar.twisty = true;

       cookieVar.expanded = true;

     }

   }),

   /**

    * Sets the network request get params shown in this view.

    *

    * @param string aUrl

    *        The request's url.

    */

   _setRequestGetParams: function(aUrl) {

     let query = nsIURL(aUrl).query;

     if (query) {

       this._addParams(this._paramsQueryString, query);

     }

   },

   /**

    * Sets the network request post params shown in this view.

    *

    * @param object aHeadersResponse

    *        The "requestHeaders" message received from the server.

    * @param object aHeadersFromUploadStream

    *        The "requestHeadersFromUploadStream" inferred from the POST payload.

    * @param object aPostDataResponse

    *        The "requestPostData" message received from the server.

    * @return object

    *        A promise that is resolved when the request post params are set.

    */

   _setRequestPostParams: Task.async(function*(aHeadersResponse, aHeadersFromUploadStream, aPostDataResponse) {

     if (!aHeadersResponse || !aHeadersFromUploadStream || !aPostDataResponse) {

       return;

     }

     let { headers: requestHeaders } = aHeadersResponse;

     let { headers: payloadHeaders } = aHeadersFromUploadStream;

     let allHeaders = [...payloadHeaders, ...requestHeaders];

     let contentTypeHeader = allHeaders.find(e => e.name.toLowerCase() == "content-type");

     let contentTypeLongString = contentTypeHeader ? contentTypeHeader.value : "";

     let postDataLongString = aPostDataResponse.postData.text;

     let postData = yield gNetwork.getString(postDataLongString);

     let contentType = yield gNetwork.getString(contentTypeLongString);

     // Handle query strings (e.g. "?foo=bar&baz=42").

     if (contentType.contains("x-www-form-urlencoded")) {

       for (let section of postData.split(/\r\n|\r|\n/)) {

         // Before displaying it, make sure this section of the POST data

         // isn't a line containing upload stream headers.

         if (payloadHeaders.every(header => !section.startsWith(header.name))) {

           this._addParams(this._paramsFormData, section);

         }

       }

     }

     // Handle actual forms ("multipart/form-data" content type).

     else {

       // This is really awkward, but hey, it works. Let's show an empty

       // scope in the params view and place the source editor containing

       // the raw post data directly underneath.

       $("#request-params-box").removeAttribute("flex");

       let paramsScope = this._params.addScope(this._paramsPostPayload);

       paramsScope.expanded = true;

       paramsScope.locked = true;

       $("#request-post-data-textarea-box").hidden = false;

       let editor = yield NetMonitorView.editor("#request-post-data-textarea");

       // Most POST bodies are usually JSON, so they can be neatly

       // syntax highlighted as JS. Otheriwse, fall back to plain text.

       try {

         JSON.parse(postData);

         editor.setMode(Editor.modes.js);

       } catch (e) {

         editor.setMode(Editor.modes.text);

       } finally {

         editor.setText(postData);

       }

     }

     window.emit(EVENTS.REQUEST_POST_PARAMS_DISPLAYED);

   }),

   /**

    * Populates the params container in this view with the specified data.

    *

    * @param string aName

    *        The type of params to populate (get or post).

    * @param string aQueryString

    *        A query string of params (e.g. "?foo=bar&baz=42").

    */

   _addParams: function(aName, aQueryString) {

     let paramsArray = parseQueryString(aQueryString);

     if (!paramsArray) {

       return;

     }

     let paramsScope = this._params.addScope(aName);

     paramsScope.expanded = true;

     for (let param of paramsArray) {

       let paramVar = paramsScope.addItem(param.name, {}, true);

       paramVar.setGrip(param.value);

     }

   },

   /**

    * Sets the network response body shown in this view.

    *

    * @param string aUrl

    *        The request's url.

    * @param object aResponse

    *        The message received from the server.

    * @return object

    *         A promise that is resolved when the response body is set.

    */

   _setResponseBody: Task.async(function*(aUrl, aResponse) {

     if (!aResponse) {

       return;

     }

     let { mimeType, text, encoding } = aResponse.content;

     let responseBody = yield gNetwork.getString(text);

     // Handle json, which we tentatively identify by checking the MIME type

     // for "json" after any word boundary. This works for the standard

     // "application/json", and also for custom types like "x-bigcorp-json".

     // Additionally, we also directly parse the response text content to

     // verify whether it's json or not, to handle responses incorrectly

     // labeled as text/plain instead.

     let jsonMimeType, jsonObject, jsonObjectParseError;

     try {

       jsonMimeType = /\bjson/.test(mimeType);

       jsonObject = JSON.parse(responseBody);

     } catch (e) {

       jsonObjectParseError = e;

     }

     if (jsonMimeType || jsonObject) {

       // Extract the actual json substring in case this might be a "JSONP".

       // This regex basically parses a function call and captures the

       // function name and arguments in two separate groups.

       let jsonpRegex = /^\s*([\w$]+)\s*\(\s*([^]*)\s*\)\s*;?\s*$/;

       let [_, callbackPadding, jsonpString] = responseBody.match(jsonpRegex) || [];

       // Make sure this is a valid JSON object first. If so, nicely display

       // the parsing results in a variables view. Otherwise, simply show

       // the contents as plain text.

       if (callbackPadding && jsonpString) {

         try {

           jsonObject = JSON.parse(jsonpString);

         } catch (e) {

           jsonObjectParseError = e;

         }

       }

       // Valid JSON or JSONP.

       if (jsonObject) {

         $("#response-content-json-box").hidden = false;

         let jsonScopeName = callbackPadding

           ? L10N.getFormatStr("jsonpScopeName", callbackPadding)

           : L10N.getStr("jsonScopeName");

         let jsonVar = { label: jsonScopeName, rawObject: jsonObject };

         yield this._json.controller.setSingleVariable(jsonVar).expanded;

       }

       // Malformed JSON.

       else {

         $("#response-content-textarea-box").hidden = false;

         let infoHeader = $("#response-content-info-header");

         infoHeader.setAttribute("value", jsonObjectParseError);

         infoHeader.setAttribute("tooltiptext", jsonObjectParseError);

         infoHeader.hidden = false;

         let editor = yield NetMonitorView.editor("#response-content-textarea");

         editor.setMode(Editor.modes.js);

         editor.setText(responseBody);

       }

     }

     // Handle images.

     else if (mimeType.contains("image/")) {

       $("#response-content-image-box").setAttribute("align", "center");

       $("#response-content-image-box").setAttribute("pack", "center");

       $("#response-content-image-box").hidden = false;

       $("#response-content-image").src =

         "data:" + mimeType + ";" + encoding + "," + responseBody;

       // Immediately display additional information about the image:

       // file name, mime type and encoding.

       $("#response-content-image-name-value").setAttribute("value", nsIURL(aUrl).fileName);

       $("#response-content-image-mime-value").setAttribute("value", mimeType);

       $("#response-content-image-encoding-value").setAttribute("value", encoding);

       // Wait for the image to load in order to display the width and height.

       $("#response-content-image").onload = e => {

         // XUL images are majestic so they don't bother storing their dimensions

         // in width and height attributes like the rest of the folk. Hack around

         // this by getting the bounding client rect and subtracting the margins.

         let { width, height } = e.target.getBoundingClientRect();

         let dimensions = (width - 2) + " x " + (height - 2);

         $("#response-content-image-dimensions-value").setAttribute("value", dimensions);

       };

     }

     // Handle anything else.

     else {

       $("#response-content-textarea-box").hidden = false;

       let editor = yield NetMonitorView.editor("#response-content-textarea");

       editor.setMode(Editor.modes.text);

       editor.setText(responseBody);

       // Maybe set a more appropriate mode in the Source Editor if possible,

       // but avoid doing this for very large files.

       if (responseBody.length < SOURCE_SYNTAX_HIGHLIGHT_MAX_FILE_SIZE) {

         let mapping = Object.keys(CONTENT_MIME_TYPE_MAPPINGS).find(key => mimeType.contains(key));

         if (mapping) {

           editor.setMode(CONTENT_MIME_TYPE_MAPPINGS[mapping]);

         }

       }

     }

     window.emit(EVENTS.RESPONSE_BODY_DISPLAYED);

   }),

   /**

    * Sets the timings information shown in this view.

    *

    * @param object aResponse

    *        The message received from the server.

    */

   _setTimingsInformation: function(aResponse) {

     if (!aResponse) {

       return;

     }

     let { blocked, dns, connect, send, wait, receive } = aResponse.timings;

     let tabboxWidth = $("#details-pane").getAttribute("width");

     let availableWidth = tabboxWidth / 2; // Other nodes also take some space.

     let scale = Math.max(availableWidth / aResponse.totalTime, 0);

     $("#timings-summary-blocked .requests-menu-timings-box")

       .setAttribute("width", blocked * scale);

     $("#timings-summary-blocked .requests-menu-timings-total")

       .setAttribute("value", L10N.getFormatStr("networkMenu.totalMS", blocked));

     $("#timings-summary-dns .requests-menu-timings-box")

       .setAttribute("width", dns * scale);

     $("#timings-summary-dns .requests-menu-timings-total")

       .setAttribute("value", L10N.getFormatStr("networkMenu.totalMS", dns));

     $("#timings-summary-connect .requests-menu-timings-box")

       .setAttribute("width", connect * scale);

     $("#timings-summary-connect .requests-menu-timings-total")

       .setAttribute("value", L10N.getFormatStr("networkMenu.totalMS", connect));

     $("#timings-summary-send .requests-menu-timings-box")

       .setAttribute("width", send * scale);

     $("#timings-summary-send .requests-menu-timings-total")

       .setAttribute("value", L10N.getFormatStr("networkMenu.totalMS", send));

     $("#timings-summary-wait .requests-menu-timings-box")

       .setAttribute("width", wait * scale);

     $("#timings-summary-wait .requests-menu-timings-total")

       .setAttribute("value", L10N.getFormatStr("networkMenu.totalMS", wait));

     $("#timings-summary-receive .requests-menu-timings-box")

       .setAttribute("width", receive * scale);

     $("#timings-summary-receive .requests-menu-timings-total")

       .setAttribute("value", L10N.getFormatStr("networkMenu.totalMS", receive));

     $("#timings-summary-dns .requests-menu-timings-box")

       .style.transform = "translateX(" + (scale * blocked) + "px)";

     $("#timings-summary-connect .requests-menu-timings-box")

       .style.transform = "translateX(" + (scale * (blocked + dns)) + "px)";

     $("#timings-summary-send .requests-menu-timings-box")

       .style.transform = "translateX(" + (scale * (blocked + dns + connect)) + "px)";

     $("#timings-summary-wait .requests-menu-timings-box")

       .style.transform = "translateX(" + (scale * (blocked + dns + connect + send)) + "px)";

     $("#timings-summary-receive .requests-menu-timings-box")

       .style.transform = "translateX(" + (scale * (blocked + dns + connect + send + wait)) + "px)";

     $("#timings-summary-dns .requests-menu-timings-total")

       .style.transform = "translateX(" + (scale * blocked) + "px)";

     $("#timings-summary-connect .requests-menu-timings-total")

       .style.transform = "translateX(" + (scale * (blocked + dns)) + "px)";

     $("#timings-summary-send .requests-menu-timings-total")

       .style.transform = "translateX(" + (scale * (blocked + dns + connect)) + "px)";

     $("#timings-summary-wait .requests-menu-timings-total")

       .style.transform = "translateX(" + (scale * (blocked + dns + connect + send)) + "px)";

     $("#timings-summary-receive .requests-menu-timings-total")

       .style.transform = "translateX(" + (scale * (blocked + dns + connect + send + wait)) + "px)";

   },

   /**

    * Sets the preview for HTML responses shown in this view.

    *

    * @param object aResponse

    *        The message received from the server.

    * @return object

    *        A promise that is resolved when the html preview is rendered.

    */

   _setHtmlPreview: Task.async(function*(aResponse) {

     if (!aResponse) {

       return promise.resolve();

     }

     let { text } = aResponse.content;

     let responseBody = yield gNetwork.getString(text);

     // Always disable JS when previewing HTML responses.

     let iframe = $("#response-preview");

     iframe.contentDocument.docShell.allowJavascript = false;

     iframe.contentDocument.documentElement.innerHTML = responseBody;

     window.emit(EVENTS.RESPONSE_HTML_PREVIEW_DISPLAYED);

   }),

   _dataSrc: null,

   _headers: null,

   _cookies: null,

   _params: null,

   _json: null,

   _paramsQueryString: "",

   _paramsFormData: "",

   _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),

       strings: this._commonChartStrings,

       totals: this._commonChartTotals,

       sorted: true

     });

     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),

       strings: this._commonChartStrings,

       totals: this._commonChartTotals,

       sorted: true

     });

     window.emit(EVENTS.EMPTY_CACHE_CHART_DISPLAYED);

   },

   /**

    * Common stringifier predicates used for items and totals in both the

    * "primed" and "empty" cache charts.

    */

   _commonChartStrings: {

     size: value => {

       let string = L10N.numberWithDecimals(value / 1024, CONTENT_SIZE_DECIMALS);

       return L10N.getFormatStr("charts.sizeKB", string);

     },

     time: value => {

       let string = L10N.numberWithDecimals(value / 1000, REQUEST_TIME_DECIMALS);

       return L10N.getFormatStr("charts.totalS", string);

     }

   },

   _commonChartTotals: {

     size: total => {

       let string = L10N.numberWithDecimals(total / 1024, CONTENT_SIZE_DECIMALS);

       return L10N.getFormatStr("charts.totalSize", string);

     },

     time: total => {

       let seconds = total / 1000;

       let string = L10N.numberWithDecimals(seconds, REQUEST_TIME_DECIMALS);

       return PluralForm.get(seconds, L10N.getStr("charts.totalSeconds")).replace("#1", string);

     },

     cached: total => {

       return L10N.getFormatStr("charts.totalCached", total);

     },

     count: total => {