The Tor Browser: browser/devtools/netmonitor/netmonitor-view.js@6474c204b198 (annotated)

browser/devtools/netmonitor/netmonitor-view.js@6474c204b198 (annotated)

browser/devtools/netmonitor/netmonitor-view.js

Wed, 31 Dec 2014 06:09:35 +0100

author: Michael Schloh von Bennewitz <michael@schloh.com>
date: Wed, 31 Dec 2014 06:09:35 +0100
changeset 0: 6474c204b198
permissions: -rw-r--r--

Cloned upstream origin tor-browser at tor-browser-31.3.0esr-4.5-1-build1
revision ID fc1c9ff7c1b2defdbc039f12214767608f46423f for hacking purpose.

 /* -*- 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 => {
       return L10N.getFormatStr("charts.totalCount", total);
     }
   },
   /**
    * Adds a specific chart to this container.
    *
    * @param object
    *        An object containing all or some the following properties:
    *          - id: either "#primed-cache-chart" or "#empty-cache-chart"
    *          - title/data/strings/totals/sorted: @see Chart.jsm for details
    */
   _createChart: function({ id, title, data, strings, totals, sorted }) {
     let container = $(id);
     // Nuke all existing charts of the specified type.
     while (container.hasChildNodes()) {
       container.firstChild.remove();
     }
     // Create a new chart.
     let chart = Chart.PieTable(document, {
       diameter: NETWORK_ANALYSIS_PIE_CHART_DIAMETER,
       title: L10N.getStr(title),
       data: data,
       strings: strings,
       totals: totals,
       sorted: sorted
     });
     chart.on("click", (_, item) => {
       NetMonitorView.RequestsMenu.filterOnlyOn(item.label);
       NetMonitorView.showNetworkInspectorView();
     });
     container.appendChild(chart.node);
   },
   /**
    * Sanitizes the data source used for creating charts, to follow the
    * data format spec defined in Chart.jsm.
    *
    * @param array aItems
    *        A collection of request items used as the data source for the chart.
    * @param boolean aEmptyCache
    *        True if the cache is considered enabled, false for disabled.
    */
   _sanitizeChartDataSource: function(aItems, aEmptyCache) {
     let data = [
       "html", "css", "js", "xhr", "fonts", "images", "media", "flash", "other"
     ].map(e => ({
       cached: 0,
       count: 0,
       label: e,
       size: 0,
       time: 0
     }));
     for (let requestItem of aItems) {
       let details = requestItem.attachment;
       let type;
       if (RequestsMenuView.prototype.isHtml(requestItem)) {
         type = 0; // "html"
       } else if (RequestsMenuView.prototype.isCss(requestItem)) {
         type = 1; // "css"
       } else if (RequestsMenuView.prototype.isJs(requestItem)) {
         type = 2; // "js"
       } else if (RequestsMenuView.prototype.isFont(requestItem)) {
         type = 4; // "fonts"
       } else if (RequestsMenuView.prototype.isImage(requestItem)) {
         type = 5; // "images"
       } else if (RequestsMenuView.prototype.isMedia(requestItem)) {
         type = 6; // "media"
       } else if (RequestsMenuView.prototype.isFlash(requestItem)) {
         type = 7; // "flash"
       } else if (RequestsMenuView.prototype.isXHR(requestItem)) {
         // Verify XHR last, to categorize other mime types in their own blobs.
         type = 3; // "xhr"
       } else {
         type = 8; // "other"
       }
       if (aEmptyCache || !responseIsFresh(details)) {
         data[type].time += details.totalTime || 0;
         data[type].size += details.contentSize || 0;
       } else {
         data[type].cached++;
       }
       data[type].count++;
     }
     return data.filter(e => e.count > 0);
   },
 };
 /**
  * DOM query helper.
  */
 function $(aSelector, aTarget = document) aTarget.querySelector(aSelector);
 function $all(aSelector, aTarget = document) aTarget.querySelectorAll(aSelector);
 /**
  * Helper for getting an nsIURL instance out of a string.
  */
 function nsIURL(aUrl, aStore = nsIURL.store) {
   if (aStore.has(aUrl)) {
     return aStore.get(aUrl);
   }
   let uri = Services.io.newURI(aUrl, null, null).QueryInterface(Ci.nsIURL);
   aStore.set(aUrl, uri);
   return uri;
 }
 nsIURL.store = new Map();
 /**
  * Parse a url's query string into its components
  *
  * @param string aQueryString
  *        The query part of a url
  * @return array
  *         Array of query params {name, value}
  */
 function parseQueryString(aQueryString) {
   // Make sure there's at least one param available.
   // Be careful here, params don't necessarily need to have values, so
   // no need to verify the existence of a "=".
   if (!aQueryString) {
     return;
   }
   // Turn the params string into an array containing { name: value } tuples.
   let paramsArray = aQueryString.replace(/^[?&]/, "").split("&").map(e =>
     let (param = e.split("=")) {
       name: param[0] ? NetworkHelper.convertToUnicode(unescape(param[0])) : "",
       value: param[1] ? NetworkHelper.convertToUnicode(unescape(param[1])) : ""
     });
   return paramsArray;
 }
 /**
  * Parse text representation of multiple HTTP headers.
  *
  * @param string aText
  *        Text of headers
  * @return array
  *         Array of headers info {name, value}
  */
 function parseHeadersText(aText) {
   return parseRequestText(aText, "\\S+?", ":");
 }
 /**
  * Parse readable text list of a query string.
  *
  * @param string aText
  *        Text of query string represetation
  * @return array
  *         Array of query params {name, value}
  */
 function parseQueryText(aText) {
   return parseRequestText(aText, ".+?", "=");
 }
 /**
  * Parse a text representation of a name[divider]value list with
  * the given name regex and divider character.
  *
  * @param string aText
  *        Text of list
  * @return array
  *         Array of headers info {name, value}
  */
 function parseRequestText(aText, aName, aDivider) {
   let regex = new RegExp("(" + aName + ")\\" + aDivider + "\\s*(.+)");
   let pairs = [];
   for (let line of aText.split("\n")) {
     let matches;
     if (matches = regex.exec(line)) {
       let [, name, value] = matches;
       pairs.push({name: name, value: value});
     }
   }
   return pairs;
 }
 /**
  * Write out a list of headers into a chunk of text
  *
  * @param array aHeaders
  *        Array of headers info {name, value}
  * @return string aText
  *         List of headers in text format
  */
 function writeHeaderText(aHeaders) {
   return [(name + ": " + value) for ({name, value} of aHeaders)].join("\n");
 }
 /**
  * Write out a list of query params into a chunk of text
  *
  * @param array aParams
  *        Array of query params {name, value}
  * @return string
  *         List of query params in text format
  */
 function writeQueryText(aParams) {
   return [(name + "=" + value) for ({name, value} of aParams)].join("\n");
 }
 /**
  * Write out a list of query params into a query string
  *
  * @param array aParams
  *        Array of query  params {name, value}
  * @return string
  *         Query string that can be appended to a url.
  */
 function writeQueryString(aParams) {
   return [(name + "=" + value) for ({name, value} of aParams)].join("&");
 }
 /**
  * Checks if the "Expiration Calculations" defined in section 13.2.4 of the
  * "HTTP/1.1: Caching in HTTP" spec holds true for a collection of headers.
  *
  * @param object
  *        An object containing the { responseHeaders, status } properties.
  * @return boolean
  *         True if the response is fresh and loaded from cache.
  */
 function responseIsFresh({ responseHeaders, status }) {
   // Check for a "304 Not Modified" status and response headers availability.
   if (status != 304 || !responseHeaders) {
     return false;
   }
   let list = responseHeaders.headers;
   let cacheControl = list.filter(e => e.name.toLowerCase() == "cache-control")[0];
   let expires = list.filter(e => e.name.toLowerCase() == "expires")[0];
   // Check the "Cache-Control" header for a maximum age value.
   if (cacheControl) {
     let maxAgeMatch =
       cacheControl.value.match(/s-maxage\s*=\s*(\d+)/) ||
       cacheControl.value.match(/max-age\s*=\s*(\d+)/);
     if (maxAgeMatch && maxAgeMatch.pop() > 0) {
       return true;
     }
   }
   // Check the "Expires" header for a valid date.
   if (expires && Date.parse(expires.value)) {
     return true;
   }
   return false;
 }
 /**
  * Helper method to get a wrapped function which can be bound to as an event listener directly and is executed only when data-key is present in event.target.
  *
  * @param function callback
  *          Function to execute execute when data-key is present in event.target.
  * @return function
  *          Wrapped function with the target data-key as the first argument.
  */
 function getKeyWithEvent(callback) {
   return function(event) {
     var key = event.target.getAttribute("data-key");
     if (key) {
       callback.call(null, key);
     }
   };
 }
 /**
  * Preliminary setup for the NetMonitorView object.
  */
 NetMonitorView.Toolbar = new ToolbarView();
 NetMonitorView.RequestsMenu = new RequestsMenuView();
 NetMonitorView.Sidebar = new SidebarView();
 NetMonitorView.CustomRequest = new CustomRequestView();
 NetMonitorView.NetworkDetails = new NetworkDetailsView();
 NetMonitorView.PerformanceStatistics = new PerformanceStatisticsView();