The Tor Browser / file revision

 /* -*- js2-basic-offset: 2; indent-tabs-mode: nil; -*- */

 /* vim: set 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 {Cc, Ci, Cu} = require("chrome");

 let WebConsoleUtils = require("devtools/toolkit/webconsole/utils").Utils;

 loader.lazyServiceGetter(this, "clipboardHelper",

                          "@mozilla.org/widget/clipboardhelper;1",

                          "nsIClipboardHelper");

 loader.lazyImporter(this, "Services", "resource://gre/modules/Services.jsm");

 loader.lazyImporter(this, "promise", "resource://gre/modules/Promise.jsm", "Promise");

 loader.lazyGetter(this, "EventEmitter", () => require("devtools/toolkit/event-emitter"));

 loader.lazyGetter(this, "AutocompletePopup",

                   () => require("devtools/shared/autocomplete-popup").AutocompletePopup);

 loader.lazyGetter(this, "ToolSidebar",

                   () => require("devtools/framework/sidebar").ToolSidebar);

 loader.lazyGetter(this, "NetworkPanel",

                   () => require("devtools/webconsole/network-panel").NetworkPanel);

 loader.lazyGetter(this, "ConsoleOutput",

                   () => require("devtools/webconsole/console-output").ConsoleOutput);

 loader.lazyGetter(this, "Messages",

                   () => require("devtools/webconsole/console-output").Messages);

 loader.lazyImporter(this, "EnvironmentClient", "resource://gre/modules/devtools/dbg-client.jsm");

 loader.lazyImporter(this, "ObjectClient", "resource://gre/modules/devtools/dbg-client.jsm");

 loader.lazyImporter(this, "VariablesView", "resource:///modules/devtools/VariablesView.jsm");

 loader.lazyImporter(this, "VariablesViewController", "resource:///modules/devtools/VariablesViewController.jsm");

 loader.lazyImporter(this, "PluralForm", "resource://gre/modules/PluralForm.jsm");

 loader.lazyImporter(this, "gDevTools", "resource:///modules/devtools/gDevTools.jsm");

 const STRINGS_URI = "chrome://browser/locale/devtools/webconsole.properties";

 let l10n = new WebConsoleUtils.l10n(STRINGS_URI);

 const XHTML_NS = "http://www.w3.org/1999/xhtml";

 const MIXED_CONTENT_LEARN_MORE = "https://developer.mozilla.org/docs/Security/MixedContent";

 const INSECURE_PASSWORDS_LEARN_MORE = "https://developer.mozilla.org/docs/Security/InsecurePasswords";

 const STRICT_TRANSPORT_SECURITY_LEARN_MORE = "https://developer.mozilla.org/docs/Security/HTTP_Strict_Transport_Security";

 const HELP_URL = "https://developer.mozilla.org/docs/Tools/Web_Console/Helpers";

 const VARIABLES_VIEW_URL = "chrome://browser/content/devtools/widgets/VariablesView.xul";

 const CONSOLE_DIR_VIEW_HEIGHT = 0.6;

 const IGNORED_SOURCE_URLS = ["debugger eval code", "self-hosted"];

 // The amount of time in milliseconds that we wait before performing a live

 // search.

 const SEARCH_DELAY = 200;

 // The number of lines that are displayed in the console output by default, for

 // each category. The user can change this number by adjusting the hidden

 // "devtools.hud.loglimit.{network,cssparser,exception,console}" preferences.

 const DEFAULT_LOG_LIMIT = 200;

 // The various categories of messages. We start numbering at zero so we can

 // use these as indexes into the MESSAGE_PREFERENCE_KEYS matrix below.

 const CATEGORY_NETWORK = 0;

 const CATEGORY_CSS = 1;

 const CATEGORY_JS = 2;

 const CATEGORY_WEBDEV = 3;

 const CATEGORY_INPUT = 4;   // always on

 const CATEGORY_OUTPUT = 5;  // always on

 const CATEGORY_SECURITY = 6;

 // The possible message severities. As before, we start at zero so we can use

 // these as indexes into MESSAGE_PREFERENCE_KEYS.

 const SEVERITY_ERROR = 0;

 const SEVERITY_WARNING = 1;

 const SEVERITY_INFO = 2;

 const SEVERITY_LOG = 3;

 // The fragment of a CSS class name that identifies each category.

 const CATEGORY_CLASS_FRAGMENTS = [

   "network",

   "cssparser",

   "exception",

   "console",

   "input",

   "output",

   "security",

 ];

 // The fragment of a CSS class name that identifies each severity.

 const SEVERITY_CLASS_FRAGMENTS = [

   "error",

   "warn",

   "info",

   "log",

 ];

 // The preference keys to use for each category/severity combination, indexed

 // first by category (rows) and then by severity (columns).

 //

 // Most of these rather idiosyncratic names are historical and predate the

 // division of message type into "category" and "severity".

 const MESSAGE_PREFERENCE_KEYS = [

 //  Error         Warning       Info      Log

   [ "network",    "netwarn",    null,     "networkinfo", ],  // Network

   [ "csserror",   "cssparser",  null,     "csslog",      ],  // CSS

   [ "exception",  "jswarn",     null,     "jslog",       ],  // JS

   [ "error",      "warn",       "info",   "log",         ],  // Web Developer

   [ null,         null,         null,     null,          ],  // Input

   [ null,         null,         null,     null,          ],  // Output

   [ "secerror",   "secwarn",    null,     null,          ],  // Security

 ];

 // A mapping from the console API log event levels to the Web Console

 // severities.

 const LEVELS = {

   error: SEVERITY_ERROR,

   exception: SEVERITY_ERROR,

   assert: SEVERITY_ERROR,

   warn: SEVERITY_WARNING,

   info: SEVERITY_INFO,

   log: SEVERITY_LOG,

   trace: SEVERITY_LOG,

   debug: SEVERITY_LOG,

   dir: SEVERITY_LOG,

   group: SEVERITY_LOG,

   groupCollapsed: SEVERITY_LOG,

   groupEnd: SEVERITY_LOG,

   time: SEVERITY_LOG,

   timeEnd: SEVERITY_LOG,

   count: SEVERITY_LOG

 };

 // The lowest HTTP response code (inclusive) that is considered an error.

 const MIN_HTTP_ERROR_CODE = 400;

 // The highest HTTP response code (inclusive) that is considered an error.

 const MAX_HTTP_ERROR_CODE = 599;

 // Constants used for defining the direction of JSTerm input history navigation.

 const HISTORY_BACK = -1;

 const HISTORY_FORWARD = 1;

 // The indent of a console group in pixels.

 const GROUP_INDENT = 12;

 // The number of messages to display in a single display update. If we display

 // too many messages at once we slow the Firefox UI too much.

 const MESSAGES_IN_INTERVAL = DEFAULT_LOG_LIMIT;

 // The delay between display updates - tells how often we should *try* to push

 // new messages to screen. This value is optimistic, updates won't always

 // happen. Keep this low so the Web Console output feels live.

 const OUTPUT_INTERVAL = 50; // milliseconds

 // When the output queue has more than MESSAGES_IN_INTERVAL items we throttle

 // output updates to this number of milliseconds. So during a lot of output we

 // update every N milliseconds given here.

 const THROTTLE_UPDATES = 1000; // milliseconds

 // The preference prefix for all of the Web Console filters.

 const FILTER_PREFS_PREFIX = "devtools.webconsole.filter.";

 // The minimum font size.

 const MIN_FONT_SIZE = 10;

 const PREF_CONNECTION_TIMEOUT = "devtools.debugger.remote-timeout";

 const PREF_PERSISTLOG = "devtools.webconsole.persistlog";

 const PREF_MESSAGE_TIMESTAMP = "devtools.webconsole.timestampMessages";

 /**

  * A WebConsoleFrame instance is an interactive console initialized *per target*

  * that displays console log data as well as provides an interactive terminal to

  * manipulate the target's document content.

  *

  * The WebConsoleFrame is responsible for the actual Web Console UI

  * implementation.

  *

  * @constructor

  * @param object aWebConsoleOwner

  *        The WebConsole owner object.

  */

 function WebConsoleFrame(aWebConsoleOwner)

 {

   this.owner = aWebConsoleOwner;

   this.hudId = this.owner.hudId;

   this.window = this.owner.iframeWindow;

   this._repeatNodes = {};

   this._outputQueue = [];

   this._pruneCategoriesQueue = {};

   this._networkRequests = {};

   this.filterPrefs = {};

   this.output = new ConsoleOutput(this);

   this._toggleFilter = this._toggleFilter.bind(this);

   this._onPanelSelected = this._onPanelSelected.bind(this);

   this._flushMessageQueue = this._flushMessageQueue.bind(this);

   this._onToolboxPrefChanged = this._onToolboxPrefChanged.bind(this);

   this._outputTimer = Cc["@mozilla.org/timer;1"].createInstance(Ci.nsITimer);

   this._outputTimerInitialized = false;

   EventEmitter.decorate(this);

 }

 exports.WebConsoleFrame = WebConsoleFrame;

 WebConsoleFrame.prototype = {

   /**

    * The WebConsole instance that owns this frame.

    * @see hudservice.js::WebConsole

    * @type object

    */

   owner: null,

   /**

    * Proxy between the Web Console and the remote Web Console instance. This

    * object holds methods used for connecting, listening and disconnecting from

    * the remote server, using the remote debugging protocol.

    *

    * @see WebConsoleConnectionProxy

    * @type object

    */

   proxy: null,

   /**

    * Getter for the xul:popupset that holds any popups we open.

    * @type nsIDOMElement

    */

   get popupset() this.owner.mainPopupSet,

   /**

    * Holds the initialization promise object.

    * @private

    * @type object

    */

   _initDefer: null,

   /**

    * Holds the network requests currently displayed by the Web Console. Each key

    * represents the connection ID and the value is network request information.

    * @private

    * @type object

    */

   _networkRequests: null,

   /**

    * Last time when we displayed any message in the output.

    *

    * @private

    * @type number

    *       Timestamp in milliseconds since the Unix epoch.

    */

   _lastOutputFlush: 0,

   /**

    * Message nodes are stored here in a queue for later display.

    *

    * @private

    * @type array

    */

   _outputQueue: null,

   /**

    * Keep track of the categories we need to prune from time to time.

    *

    * @private

    * @type array

    */

   _pruneCategoriesQueue: null,

   /**

    * Function invoked whenever the output queue is emptied. This is used by some

    * tests.

    *

    * @private

    * @type function

    */

   _flushCallback: null,

   /**

    * Timer used for flushing the messages output queue.

    *

    * @private

    * @type nsITimer

    */

   _outputTimer: null,

   _outputTimerInitialized: null,

   /**

    * Store for tracking repeated nodes.

    * @private

    * @type object

    */

   _repeatNodes: null,

   /**

    * Preferences for filtering messages by type.

    * @see this._initDefaultFilterPrefs()

    * @type object

    */

   filterPrefs: null,

   /**

    * Prefix used for filter preferences.

    * @private

    * @type string

    */

   _filterPrefsPrefix: FILTER_PREFS_PREFIX,

   /**

    * The nesting depth of the currently active console group.

    */

   groupDepth: 0,

   /**

    * The current target location.

    * @type string

    */

   contentLocation: "",

   /**

    * The JSTerm object that manage the console's input.

    * @see JSTerm

    * @type object

    */

   jsterm: null,

   /**

    * The element that holds all of the messages we display.

    * @type nsIDOMElement

    */

   outputNode: null,

   /**

    * The ConsoleOutput instance that manages all output.

    * @type object

    */

   output: null,

   /**

    * The input element that allows the user to filter messages by string.

    * @type nsIDOMElement

    */

   filterBox: null,

   /**

    * Getter for the debugger WebConsoleClient.

    * @type object

    */

   get webConsoleClient() this.proxy ? this.proxy.webConsoleClient : null,

   _destroyer: null,

   // Used in tests.

   _saveRequestAndResponseBodies: false,

   // Chevron width at the starting of Web Console's input box.

   _chevronWidth: 0,

   // Width of the monospace characters in Web Console's input box.

   _inputCharWidth: 0,

   /**

    * Tells whether to save the bodies of network requests and responses.

    * Disabled by default to save memory.

    *

    * @return boolean

    *         The saveRequestAndResponseBodies pref value.

    */

   getSaveRequestAndResponseBodies:

   function WCF_getSaveRequestAndResponseBodies() {

     let deferred = promise.defer();

     let toGet = [

       "NetworkMonitor.saveRequestAndResponseBodies"

     ];

     // Make sure the web console client connection is established first.

     this.webConsoleClient.getPreferences(toGet, aResponse => {

       if (!aResponse.error) {

         this._saveRequestAndResponseBodies = aResponse.preferences[toGet[0]];

         deferred.resolve(this._saveRequestAndResponseBodies);

       }

       else {

         deferred.reject(aResponse.error);

       }

     });

     return deferred.promise;

   },

   /**

    * Setter for saving of network request and response bodies.

    *

    * @param boolean aValue

    *        The new value you want to set.

    */

   setSaveRequestAndResponseBodies:

   function WCF_setSaveRequestAndResponseBodies(aValue) {

     if (!this.webConsoleClient) {

       // Don't continue if the webconsole disconnected.

       return promise.resolve(null);

     }

     let deferred = promise.defer();

     let newValue = !!aValue;

     let toSet = {

       "NetworkMonitor.saveRequestAndResponseBodies": newValue,

     };

     // Make sure the web console client connection is established first.

     this.webConsoleClient.setPreferences(toSet, aResponse => {

       if (!aResponse.error) {

         this._saveRequestAndResponseBodies = newValue;

         deferred.resolve(aResponse);

       }

       else {

         deferred.reject(aResponse.error);

       }

     });

     return deferred.promise;

   },

   /**

    * Getter for the persistent logging preference.

    * @type boolean

    */

   get persistLog() {

     return Services.prefs.getBoolPref(PREF_PERSISTLOG);

   },

   /**

    * Initialize the WebConsoleFrame instance.

    * @return object

    *         A promise object for the initialization.

    */

   init: function WCF_init()

   {

     this._initUI();

     return this._initConnection();

   },

   /**

    * Connect to the server using the remote debugging protocol.

    *

    * @private

    * @return object

    *         A promise object that is resolved/reject based on the connection

    *         result.

    */

   _initConnection: function WCF__initConnection()

   {

     if (this._initDefer) {

       return this._initDefer.promise;

     }

     this._initDefer = promise.defer();

     this.proxy = new WebConsoleConnectionProxy(this, this.owner.target);

     this.proxy.connect().then(() => { // on success

       this._initDefer.resolve(this);

     }, (aReason) => { // on failure

       let node = this.createMessageNode(CATEGORY_JS, SEVERITY_ERROR,

                                         aReason.error + ": " + aReason.message);

       this.outputMessage(CATEGORY_JS, node);

       this._initDefer.reject(aReason);

     }).then(() => {

       let id = WebConsoleUtils.supportsString(this.hudId);

       Services.obs.notifyObservers(id, "web-console-created", null);

     });

     return this._initDefer.promise;

   },

   /**

    * Find the Web Console UI elements and setup event listeners as needed.

    * @private

    */

   _initUI: function WCF__initUI()

   {

     this.document = this.window.document;

     this.rootElement = this.document.documentElement;

     this._initDefaultFilterPrefs();

     // Register the controller to handle "select all" properly.

     this._commandController = new CommandController(this);

     this.window.controllers.insertControllerAt(0, this._commandController);

     this._contextMenuHandler = new ConsoleContextMenu(this);

     let doc = this.document;

     this.filterBox = doc.querySelector(".hud-filter-box");

     this.outputNode = doc.getElementById("output-container");

     this.completeNode = doc.querySelector(".jsterm-complete-node");

     this.inputNode = doc.querySelector(".jsterm-input-node");

     this._setFilterTextBoxEvents();

     this._initFilterButtons();

     let fontSize = this.owner._browserConsole ?

                    Services.prefs.getIntPref("devtools.webconsole.fontSize") : 0;

     if (fontSize != 0) {

       fontSize = Math.max(MIN_FONT_SIZE, fontSize);

       this.outputNode.style.fontSize = fontSize + "px";

       this.completeNode.style.fontSize = fontSize + "px";

       this.inputNode.style.fontSize = fontSize + "px";

     }

     if (this.owner._browserConsole) {

       for (let id of ["Enlarge", "Reduce", "Reset"]) {

         this.document.getElementById("cmd_fullZoom" + id)

                      .removeAttribute("disabled");

       }

     }

     // Update the character width and height needed for the popup offset

     // calculations.

     this._updateCharSize();

     let updateSaveBodiesPrefUI = (aElement) => {

       this.getSaveRequestAndResponseBodies().then(aValue => {

         aElement.setAttribute("checked", aValue);

         this.emit("save-bodies-ui-toggled");

       });

     }

     let reverseSaveBodiesPref = ({ target: aElement }) => {

       this.getSaveRequestAndResponseBodies().then(aValue => {

         this.setSaveRequestAndResponseBodies(!aValue);

         aElement.setAttribute("checked", aValue);

         this.emit("save-bodies-pref-reversed");

       });

     }

     let saveBodies = doc.getElementById("saveBodies");

     saveBodies.addEventListener("command", reverseSaveBodiesPref);

     saveBodies.disabled = !this.getFilterState("networkinfo") &&

                           !this.getFilterState("network");

     let saveBodiesContextMenu = doc.getElementById("saveBodiesContextMenu");

     saveBodiesContextMenu.addEventListener("command", reverseSaveBodiesPref);

     saveBodiesContextMenu.disabled = !this.getFilterState("networkinfo") &&

                                      !this.getFilterState("network");

     saveBodies.parentNode.addEventListener("popupshowing", () => {

       updateSaveBodiesPrefUI(saveBodies);

       saveBodies.disabled = !this.getFilterState("networkinfo") &&

                             !this.getFilterState("network");

     });

     saveBodiesContextMenu.parentNode.addEventListener("popupshowing", () => {

       updateSaveBodiesPrefUI(saveBodiesContextMenu);

       saveBodiesContextMenu.disabled = !this.getFilterState("networkinfo") &&

                                        !this.getFilterState("network");

     });

     let clearButton = doc.getElementsByClassName("webconsole-clear-console-button")[0];

     clearButton.addEventListener("command", () => {

       this.owner._onClearButton();

       this.jsterm.clearOutput(true);

     });

     this.jsterm = new JSTerm(this);

     this.jsterm.init();

     let toolbox = gDevTools.getToolbox(this.owner.target);

     if (toolbox) {

       toolbox.on("webconsole-selected", this._onPanelSelected);

     }

     /*

      * Focus input line whenever the output area is clicked.

      * Reusing _addMEssageLinkCallback since it correctly filters

      * drag and select events.

      */

     this._addFocusCallback(this.outputNode, (evt) => {

       if ((evt.target.nodeName.toLowerCase() != "a") &&

           (evt.target.parentNode.nodeName.toLowerCase() != "a")) {

         this.jsterm.inputNode.focus();

       }

     });

     // Toggle the timestamp on preference change

     gDevTools.on("pref-changed", this._onToolboxPrefChanged);

     this._onToolboxPrefChanged("pref-changed", {

       pref: PREF_MESSAGE_TIMESTAMP,

       newValue: Services.prefs.getBoolPref(PREF_MESSAGE_TIMESTAMP),

     });

     // focus input node

     this.jsterm.inputNode.focus();

   },

   /**

    * Sets the focus to JavaScript input field when the web console tab is

    * selected or when there is a split console present.

    * @private

    */

   _onPanelSelected: function WCF__onPanelSelected(evt, id)

   {

     this.jsterm.inputNode.focus();

   },

   /**

    * Initialize the default filter preferences.

    * @private

    */

   _initDefaultFilterPrefs: function WCF__initDefaultFilterPrefs()

   {

     let prefs = ["network", "networkinfo", "csserror", "cssparser", "csslog",

                  "exception", "jswarn", "jslog", "error", "info", "warn", "log",

                  "secerror", "secwarn", "netwarn"];

     for (let pref of prefs) {

       this.filterPrefs[pref] = Services.prefs

                                .getBoolPref(this._filterPrefsPrefix + pref);

     }

   },

   /**

    * Attach / detach reflow listeners depending on the checked status

    * of the `CSS > Log` menuitem.

    *

    * @param function [aCallback=null]

    *        Optional function to invoke when the listener has been

    *        added/removed.

    *

    */

   _updateReflowActivityListener:

     function WCF__updateReflowActivityListener(aCallback)

   {

     if (this.webConsoleClient) {

       let pref = this._filterPrefsPrefix + "csslog";

       if (Services.prefs.getBoolPref(pref)) {

         this.webConsoleClient.startListeners(["ReflowActivity"], aCallback);

       } else {

         this.webConsoleClient.stopListeners(["ReflowActivity"], aCallback);

       }

     }

   },

   /**

    * Sets the events for the filter input field.

    * @private

    */

   _setFilterTextBoxEvents: function WCF__setFilterTextBoxEvents()

   {

     let timer = Cc["@mozilla.org/timer;1"].createInstance(Ci.nsITimer);

     let timerEvent = this.adjustVisibilityOnSearchStringChange.bind(this);

     let onChange = function _onChange() {

       // To improve responsiveness, we let the user finish typing before we

       // perform the search.

       timer.cancel();

       timer.initWithCallback(timerEvent, SEARCH_DELAY,

                              Ci.nsITimer.TYPE_ONE_SHOT);

     };

     this.filterBox.addEventListener("command", onChange, false);

     this.filterBox.addEventListener("input", onChange, false);

   },

   /**

    * Creates one of the filter buttons on the toolbar.

    *

    * @private

    * @param nsIDOMNode aParent

    *        The node to which the filter button should be appended.

    * @param object aDescriptor

    *        A descriptor that contains info about the button. Contains "name",

    *        "category", and "prefKey" properties, and optionally a "severities"

    *        property.

    */

   _initFilterButtons: function WCF__initFilterButtons()

   {

     let categories = this.document

                      .querySelectorAll(".webconsole-filter-button[category]");

     Array.forEach(categories, function(aButton) {

       aButton.addEventListener("click", this._toggleFilter, false);

       let someChecked = false;

       let severities = aButton.querySelectorAll("menuitem[prefKey]");

       Array.forEach(severities, function(aMenuItem) {

         aMenuItem.addEventListener("command", this._toggleFilter, false);

         let prefKey = aMenuItem.getAttribute("prefKey");

         let checked = this.filterPrefs[prefKey];

         aMenuItem.setAttribute("checked", checked);

         someChecked = someChecked || checked;

       }, this);

       aButton.setAttribute("checked", someChecked);

     }, this);

     if (!this.owner._browserConsole) {

       // The Browser Console displays nsIConsoleMessages which are messages that

       // end up in the JS category, but they are not errors or warnings, they

       // are just log messages. The Web Console does not show such messages.

       let jslog = this.document.querySelector("menuitem[prefKey=jslog]");

       jslog.hidden = true;

     }

     if (Services.appinfo.OS == "Darwin") {

       let net = this.document.querySelector("toolbarbutton[category=net]");

       let accesskey = net.getAttribute("accesskeyMacOSX");

       net.setAttribute("accesskey", accesskey);

       let logging = this.document.querySelector("toolbarbutton[category=logging]");

       logging.removeAttribute("accesskey");

     }

   },

   /**

    * Increase, decrease or reset the font size.

    *

    * @param string size

    *        The size of the font change. Accepted values are "+" and "-".

    *        An unmatched size assumes a font reset.

    */

   changeFontSize: function WCF_changeFontSize(aSize)

   {

     let fontSize = this.window

                    .getComputedStyle(this.outputNode, null)

                    .getPropertyValue("font-size").replace("px", "");

     if (this.outputNode.style.fontSize) {

       fontSize = this.outputNode.style.fontSize.replace("px", "");

     }

     if (aSize == "+" || aSize == "-") {

       fontSize = parseInt(fontSize, 10);

       if (aSize == "+") {

         fontSize += 1;

       }

       else {

         fontSize -= 1;

       }

       if (fontSize < MIN_FONT_SIZE) {

         fontSize = MIN_FONT_SIZE;

       }

       Services.prefs.setIntPref("devtools.webconsole.fontSize", fontSize);

       fontSize = fontSize + "px";

       this.completeNode.style.fontSize = fontSize;

       this.inputNode.style.fontSize = fontSize;

       this.outputNode.style.fontSize = fontSize;

     }

     else {

       this.completeNode.style.fontSize = "";

       this.inputNode.style.fontSize = "";

       this.outputNode.style.fontSize = "";

       Services.prefs.clearUserPref("devtools.webconsole.fontSize");

     }

     this._updateCharSize();

   },

   /**

    * Calculates the width and height of a single character of the input box.

    * This will be used in opening the popup at the correct offset.

    *

    * @private

    */

   _updateCharSize: function WCF__updateCharSize()

   {

     let doc = this.document;

     let tempLabel = doc.createElementNS(XHTML_NS, "span");

     let style = tempLabel.style;

     style.position = "fixed";

     style.padding = "0";

     style.margin = "0";

     style.width = "auto";

     style.color = "transparent";

     WebConsoleUtils.copyTextStyles(this.inputNode, tempLabel);

     tempLabel.textContent = "x";

     doc.documentElement.appendChild(tempLabel);

     this._inputCharWidth = tempLabel.offsetWidth;

     tempLabel.parentNode.removeChild(tempLabel);

     // Calculate the width of the chevron placed at the beginning of the input

     // box. Remove 4 more pixels to accomodate the padding of the popup.

     this._chevronWidth = +doc.defaultView.getComputedStyle(this.inputNode)

                              .paddingLeft.replace(/[^0-9.]/g, "") - 4;

   },

   /**

    * The event handler that is called whenever a user switches a filter on or

    * off.

    *

    * @private

    * @param nsIDOMEvent aEvent

    *        The event that triggered the filter change.

    */

   _toggleFilter: function WCF__toggleFilter(aEvent)

   {

     let target = aEvent.target;

     let tagName = target.tagName;

     if (tagName != aEvent.currentTarget.tagName) {

       return;

     }

     switch (tagName) {

       case "toolbarbutton": {

         let originalTarget = aEvent.originalTarget;

         let classes = originalTarget.classList;

         if (originalTarget.localName !== "toolbarbutton") {

           // Oddly enough, the click event is sent to the menu button when

           // selecting a menu item with the mouse. Detect this case and bail

           // out.

           break;

         }

         if (!classes.contains("toolbarbutton-menubutton-button") &&

             originalTarget.getAttribute("type") === "menu-button") {

           // This is a filter button with a drop-down. The user clicked the

           // drop-down, so do nothing. (The menu will automatically appear

           // without our intervention.)

           break;

         }

         // Toggle on the targeted filter button, and if the user alt clicked,

         // toggle off all other filter buttons and their associated filters.

         let state = target.getAttribute("checked") !== "true";

         if (aEvent.getModifierState("Alt")) {

           let buttons = this.document

                         .querySelectorAll(".webconsole-filter-button");

           Array.forEach(buttons, (button) => {

             if (button !== target) {

               button.setAttribute("checked", false);

               this._setMenuState(button, false);

             }

           });

           state = true;

         }

         target.setAttribute("checked", state);

         // This is a filter button with a drop-down, and the user clicked the

         // main part of the button. Go through all the severities and toggle

         // their associated filters.

         this._setMenuState(target, state);

         // CSS reflow logging can decrease web page performance.

         // Make sure the option is always unchecked when the CSS filter button is selected.

         // See bug 971798.

         if (target.getAttribute("category") == "css" && state) {

           let csslogMenuItem = target.querySelector("menuitem[prefKey=csslog]");

           csslogMenuItem.setAttribute("checked", false);

           this.setFilterState("csslog", false);

         }

         break;

       }

       case "menuitem": {

         let state = target.getAttribute("checked") !== "true";

         target.setAttribute("checked", state);

         let prefKey = target.getAttribute("prefKey");

         this.setFilterState(prefKey, state);

         // Disable the log response and request body if network logging is off.

         if (prefKey == "networkinfo" || prefKey == "network") {

           let checkState = !this.getFilterState("networkinfo") &&

                            !this.getFilterState("network");

           this.document.getElementById("saveBodies").disabled = checkState;

           this.document.getElementById("saveBodiesContextMenu").disabled = checkState;

         }

         // Adjust the state of the button appropriately.

         let menuPopup = target.parentNode;

         let someChecked = false;

         let menuItem = menuPopup.firstChild;

         while (menuItem) {

           if (menuItem.hasAttribute("prefKey") &&

               menuItem.getAttribute("checked") === "true") {

             someChecked = true;

             break;

           }

           menuItem = menuItem.nextSibling;

         }

         let toolbarButton = menuPopup.parentNode;

         toolbarButton.setAttribute("checked", someChecked);

         break;

       }

     }

   },

   /**

    * Set the menu attributes for a specific toggle button.

    *

    * @private

    * @param XULElement aTarget

    *        Button with drop down items to be toggled.

    * @param boolean aState

    *        True if the menu item is being toggled on, and false otherwise.

    */

   _setMenuState: function WCF__setMenuState(aTarget, aState)

   {

     let menuItems = aTarget.querySelectorAll("menuitem");

     Array.forEach(menuItems, (item) => {

       item.setAttribute("checked", aState);

       let prefKey = item.getAttribute("prefKey");

       this.setFilterState(prefKey, aState);

     });

   },

   /**

    * Set the filter state for a specific toggle button.

    *

    * @param string aToggleType

    * @param boolean aState

    * @returns void

    */

   setFilterState: function WCF_setFilterState(aToggleType, aState)

   {

     this.filterPrefs[aToggleType] = aState;

     this.adjustVisibilityForMessageType(aToggleType, aState);

     Services.prefs.setBoolPref(this._filterPrefsPrefix + aToggleType, aState);

     this._updateReflowActivityListener();

   },

   /**

    * Get the filter state for a specific toggle button.

    *

    * @param string aToggleType

    * @returns boolean

    */

   getFilterState: function WCF_getFilterState(aToggleType)

   {

     return this.filterPrefs[aToggleType];

   },

   /**

    * Check that the passed string matches the filter arguments.

    *

    * @param String aString

    *        to search for filter words in.

    * @param String aFilter

    *        is a string containing all of the words to filter on.

    * @returns boolean

    */

   stringMatchesFilters: function WCF_stringMatchesFilters(aString, aFilter)

   {

     if (!aFilter || !aString) {

       return true;

     }

     let searchStr = aString.toLowerCase();

     let filterStrings = aFilter.toLowerCase().split(/\s+/);

     return !filterStrings.some(function (f) {

       return searchStr.indexOf(f) == -1;

     });

   },

   /**

    * Turns the display of log nodes on and off appropriately to reflect the

    * adjustment of the message type filter named by @aPrefKey.

    *

    * @param string aPrefKey

    *        The preference key for the message type being filtered: one of the

    *        values in the MESSAGE_PREFERENCE_KEYS table.

    * @param boolean aState

    *        True if the filter named by @aMessageType is being turned on; false

    *        otherwise.

    * @returns void

    */

   adjustVisibilityForMessageType:

   function WCF_adjustVisibilityForMessageType(aPrefKey, aState)

   {

     let outputNode = this.outputNode;

     let doc = this.document;

     // Look for message nodes (".message") with the given preference key

     // (filter="error", filter="cssparser", etc.) and add or remove the

     // "filtered-by-type" class, which turns on or off the display.

     let xpath = ".//*[contains(@class, 'message') and " +

       "@filter='" + aPrefKey + "']";

     let result = doc.evaluate(xpath, outputNode, null,

       Ci.nsIDOMXPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null);

     for (let i = 0; i < result.snapshotLength; i++) {

       let node = result.snapshotItem(i);

       if (aState) {

         node.classList.remove("filtered-by-type");

       }

       else {

         node.classList.add("filtered-by-type");

       }

     }

   },

   /**

    * Turns the display of log nodes on and off appropriately to reflect the

    * adjustment of the search string.

    */

   adjustVisibilityOnSearchStringChange:

   function WCF_adjustVisibilityOnSearchStringChange()

   {

     let nodes = this.outputNode.getElementsByClassName("message");

     let searchString = this.filterBox.value;

     for (let i = 0, n = nodes.length; i < n; ++i) {

       let node = nodes[i];

       // hide nodes that match the strings

       let text = node.textContent;

       // if the text matches the words in aSearchString...

       if (this.stringMatchesFilters(text, searchString)) {

         node.classList.remove("filtered-by-string");

       }

       else {

         node.classList.add("filtered-by-string");

       }

     }

   },

   /**

    * Applies the user's filters to a newly-created message node via CSS

    * classes.

    *

    * @param nsIDOMNode aNode

    *        The newly-created message node.

    * @return boolean

    *         True if the message was filtered or false otherwise.

    */

   filterMessageNode: function WCF_filterMessageNode(aNode)

   {

     let isFiltered = false;

     // Filter by the message type.

     let prefKey = MESSAGE_PREFERENCE_KEYS[aNode.category][aNode.severity];

     if (prefKey && !this.getFilterState(prefKey)) {

       // The node is filtered by type.

       aNode.classList.add("filtered-by-type");

       isFiltered = true;

     }

     // Filter on the search string.

     let search = this.filterBox.value;

     let text = aNode.clipboardText;

     // if string matches the filter text

     if (!this.stringMatchesFilters(text, search)) {

       aNode.classList.add("filtered-by-string");

       isFiltered = true;

     }

     if (isFiltered && aNode.classList.contains("inlined-variables-view")) {

       aNode.classList.add("hidden-message");

     }

     return isFiltered;

   },

   /**

    * Merge the attributes of the two nodes that are about to be filtered.

    * Increment the number of repeats of aOriginal.

    *

    * @param nsIDOMNode aOriginal

    *        The Original Node. The one being merged into.

    * @param nsIDOMNode aFiltered

    *        The node being filtered out because it is repeated.

    */

   mergeFilteredMessageNode:

   function WCF_mergeFilteredMessageNode(aOriginal, aFiltered)

   {

     let repeatNode = aOriginal.getElementsByClassName("message-repeats")[0];

     if (!repeatNode) {

       return; // no repeat node, return early.

     }

     let occurrences = parseInt(repeatNode.getAttribute("value")) + 1;

     repeatNode.setAttribute("value", occurrences);

     repeatNode.textContent = occurrences;

     let str = l10n.getStr("messageRepeats.tooltip2");

     repeatNode.title = PluralForm.get(occurrences, str)

                        .replace("#1", occurrences);

   },

   /**

    * Filter the message node from the output if it is a repeat.

    *

    * @private

    * @param nsIDOMNode aNode

    *        The message node to be filtered or not.

    * @returns nsIDOMNode|null

    *          Returns the duplicate node if the message was filtered, null

    *          otherwise.

    */

   _filterRepeatedMessage: function WCF__filterRepeatedMessage(aNode)

   {

     let repeatNode = aNode.getElementsByClassName("message-repeats")[0];

     if (!repeatNode) {

       return null;

     }

     let uid = repeatNode._uid;

     let dupeNode = null;

     if (aNode.category == CATEGORY_CSS ||

         aNode.category == CATEGORY_SECURITY) {

       dupeNode = this._repeatNodes[uid];

       if (!dupeNode) {

         this._repeatNodes[uid] = aNode;

       }

     }

     else if ((aNode.category == CATEGORY_WEBDEV ||

               aNode.category == CATEGORY_JS) &&

              aNode.category != CATEGORY_NETWORK &&

              !aNode.classList.contains("inlined-variables-view")) {

       let lastMessage = this.outputNode.lastChild;

       if (!lastMessage) {

         return null;

       }

       let lastRepeatNode = lastMessage.getElementsByClassName("message-repeats")[0];

       if (lastRepeatNode && lastRepeatNode._uid == uid) {

         dupeNode = lastMessage;

       }

     }

     if (dupeNode) {

       this.mergeFilteredMessageNode(dupeNode, aNode);

       return dupeNode;

     }

     return null;

   },

   /**

    * Display cached messages that may have been collected before the UI is

    * displayed.

    *

    * @param array aRemoteMessages

    *        Array of cached messages coming from the remote Web Console

    *        content instance.

    */

   displayCachedMessages: function WCF_displayCachedMessages(aRemoteMessages)

   {

     if (!aRemoteMessages.length) {

       return;

     }

     aRemoteMessages.forEach(function(aMessage) {

       switch (aMessage._type) {

         case "PageError": {

           let category = Utils.categoryForScriptError(aMessage);

           this.outputMessage(category, this.reportPageError,

                              [category, aMessage]);

           break;

         }

         case "LogMessage":

           this.handleLogMessage(aMessage);

           break;

         case "ConsoleAPI":

           this.outputMessage(CATEGORY_WEBDEV, this.logConsoleAPIMessage,

                              [aMessage]);

           break;

       }

     }, this);

   },

   /**

    * Logs a message to the Web Console that originates from the Web Console

    * server.

    *

    * @param object aMessage

    *        The message received from the server.

    * @return nsIDOMElement|null

    *         The message element to display in the Web Console output.

    */

   logConsoleAPIMessage: function WCF_logConsoleAPIMessage(aMessage)

   {

     let body = null;

     let clipboardText = null;

     let sourceURL = aMessage.filename;

     let sourceLine = aMessage.lineNumber;

     let level = aMessage.level;

     let args = aMessage.arguments;

     let objectActors = new Set();

     let node = null;

     // Gather the actor IDs.

     args.forEach((aValue) => {

       if (WebConsoleUtils.isActorGrip(aValue)) {

         objectActors.add(aValue.actor);

       }

     });

     switch (level) {

       case "log":

       case "info":

       case "warn":

       case "error":

       case "exception":

       case "assert":

       case "debug": {

         let msg = new Messages.ConsoleGeneric(aMessage);

         node = msg.init(this.output).render().element;

         break;

       }

       case "trace": {

         let msg = new Messages.ConsoleTrace(aMessage);

         node = msg.init(this.output).render().element;

         break;

       }

       case "dir": {

         body = { arguments: args };

         let clipboardArray = [];

         args.forEach((aValue) => {

           clipboardArray.push(VariablesView.getString(aValue));

         });

         clipboardText = clipboardArray.join(" ");

         break;

       }

       case "group":

       case "groupCollapsed":

         clipboardText = body = aMessage.groupName;

         this.groupDepth++;

         break;

       case "groupEnd":

         if (this.groupDepth > 0) {

           this.groupDepth--;

         }

         break;

       case "time": {

         let timer = aMessage.timer;

         if (!timer) {

           return null;

         }

         if (timer.error) {

           Cu.reportError(l10n.getStr(timer.error));

           return null;

         }

         body = l10n.getFormatStr("timerStarted", [timer.name]);

         clipboardText = body;

         break;

       }

       case "timeEnd": {

         let timer = aMessage.timer;

         if (!timer) {

           return null;

         }

         let duration = Math.round(timer.duration * 100) / 100;

         body = l10n.getFormatStr("timeEnd", [timer.name, duration]);

         clipboardText = body;

         break;

       }

       case "count": {

         let counter = aMessage.counter;

         if (!counter) {

           return null;

         }

         if (counter.error) {

           Cu.reportError(l10n.getStr(counter.error));

           return null;

         }

         let msg = new Messages.ConsoleGeneric(aMessage);

         node = msg.init(this.output).render().element;

         break;

       }

       default:

         Cu.reportError("Unknown Console API log level: " + level);

         return null;

     }

     // Release object actors for arguments coming from console API methods that

     // we ignore their arguments.

     switch (level) {

       case "group":

       case "groupCollapsed":

       case "groupEnd":

       case "time":

       case "timeEnd":

       case "count":

         for (let actor of objectActors) {

           this._releaseObject(actor);

         }

         objectActors.clear();

     }

     if (level == "groupEnd") {

       return null; // no need to continue

     }

     if (!node) {

       node = this.createMessageNode(CATEGORY_WEBDEV, LEVELS[level], body,

                                     sourceURL, sourceLine, clipboardText,

                                     level, aMessage.timeStamp);

       if (aMessage.private) {

         node.setAttribute("private", true);

       }

     }

     if (objectActors.size > 0) {

       node._objectActors = objectActors;

       if (!node._messageObject) {

         let repeatNode = node.getElementsByClassName("message-repeats")[0];

         repeatNode._uid += [...objectActors].join("-");

       }

     }

     return node;

   },

   /**

    * Handle ConsoleAPICall objects received from the server. This method outputs

    * the window.console API call.

    *

    * @param object aMessage

    *        The console API message received from the server.

    */

   handleConsoleAPICall: function WCF_handleConsoleAPICall(aMessage)

   {

     this.outputMessage(CATEGORY_WEBDEV, this.logConsoleAPIMessage, [aMessage]);

   },

   /**

    * Reports an error in the page source, either JavaScript or CSS.

    *

    * @param nsIScriptError aScriptError

    *        The error message to report.

    * @return nsIDOMElement|undefined

    *         The message element to display in the Web Console output.

    */

   reportPageError: function WCF_reportPageError(aCategory, aScriptError)

   {

     // Warnings and legacy strict errors become warnings; other types become

     // errors.

     let severity = SEVERITY_ERROR;

     if (aScriptError.warning || aScriptError.strict) {

       severity = SEVERITY_WARNING;

     }

     let objectActors = new Set();

     // Gather the actor IDs.

     for (let prop of ["errorMessage", "lineText"]) {

       let grip = aScriptError[prop];

       if (WebConsoleUtils.isActorGrip(grip)) {

         objectActors.add(grip.actor);

       }

     }

     let errorMessage = aScriptError.errorMessage;

     if (errorMessage.type && errorMessage.type == "longString") {

       errorMessage = errorMessage.initial;

     }

     let node = this.createMessageNode(aCategory, severity,

                                       errorMessage,

                                       aScriptError.sourceName,

                                       aScriptError.lineNumber, null, null,

                                       aScriptError.timeStamp);

     // Select the body of the message node that is displayed in the console

     let msgBody = node.getElementsByClassName("message-body")[0];

     // Add the more info link node to messages that belong to certain categories

     this.addMoreInfoLink(msgBody, aScriptError);

     if (aScriptError.private) {

       node.setAttribute("private", true);

     }

     if (objectActors.size > 0) {

       node._objectActors = objectActors;

     }

     return node;

   },

   /**

    * Handle PageError objects received from the server. This method outputs the

    * given error.

    *

    * @param nsIScriptError aPageError

    *        The error received from the server.

    */

   handlePageError: function WCF_handlePageError(aPageError)

   {

     let category = Utils.categoryForScriptError(aPageError);

     this.outputMessage(category, this.reportPageError, [category, aPageError]);

   },

   /**

    * Handle log messages received from the server. This method outputs the given

    * message.

    *

    * @param object aPacket

    *        The message packet received from the server.

    */

   handleLogMessage: function WCF_handleLogMessage(aPacket)

   {

     if (aPacket.message) {

       this.outputMessage(CATEGORY_JS, this._reportLogMessage, [aPacket]);

     }

   },

   /**

    * Display log messages received from the server.

    *

    * @private

    * @param object aPacket

    *        The message packet received from the server.

    * @return nsIDOMElement

    *         The message element to render for the given log message.

    */

   _reportLogMessage: function WCF__reportLogMessage(aPacket)

   {

     let msg = aPacket.message;

     if (msg.type && msg.type == "longString") {

       msg = msg.initial;

     }

     let node = this.createMessageNode(CATEGORY_JS, SEVERITY_LOG, msg, null,

                                       null, null, null, aPacket.timeStamp);

     if (WebConsoleUtils.isActorGrip(aPacket.message)) {

       node._objectActors = new Set([aPacket.message.actor]);

     }

     return node;

   },

   /**

    * Log network event.

    *

    * @param object aActorId

    *        The network event actor ID to log.

    * @return nsIDOMElement|null

    *         The message element to display in the Web Console output.

    */

   logNetEvent: function WCF_logNetEvent(aActorId)

   {

     let networkInfo = this._networkRequests[aActorId];

     if (!networkInfo) {

       return null;

     }

     let request = networkInfo.request;

     let clipboardText = request.method + " " + request.url;

     let severity = SEVERITY_LOG;

     let mixedRequest =

       WebConsoleUtils.isMixedHTTPSRequest(request.url, this.contentLocation);

     if (mixedRequest) {

       severity = SEVERITY_WARNING;

     }

     let methodNode = this.document.createElementNS(XHTML_NS, "span");

     methodNode.className = "method";

     methodNode.textContent = request.method + " ";

     let messageNode = this.createMessageNode(CATEGORY_NETWORK, severity,

                                              methodNode, null, null,

                                              clipboardText);

     if (networkInfo.private) {

       messageNode.setAttribute("private", true);

     }

     messageNode._connectionId = aActorId;

     messageNode.url = request.url;

     let body = methodNode.parentNode;

     body.setAttribute("aria-haspopup", true);

     let displayUrl = request.url;

     let pos = displayUrl.indexOf("?");

     if (pos > -1) {

       displayUrl = displayUrl.substr(0, pos);

     }

     let urlNode = this.document.createElementNS(XHTML_NS, "a");

     urlNode.className = "url";

     urlNode.setAttribute("title", request.url);

     urlNode.href = request.url;

     urlNode.textContent = displayUrl;

     urlNode.draggable = false;

     body.appendChild(urlNode);

     body.appendChild(this.document.createTextNode(" "));

     if (mixedRequest) {

       messageNode.classList.add("mixed-content");

       this.makeMixedContentNode(body);

     }

     let statusNode = this.document.createElementNS(XHTML_NS, "a");

     statusNode.className = "status";

     body.appendChild(statusNode);

     let onClick = () => {

       if (!messageNode._panelOpen) {

         this.openNetworkPanel(messageNode, networkInfo);

       }

     };

     this._addMessageLinkCallback(urlNode, onClick);

     this._addMessageLinkCallback(statusNode, onClick);

     networkInfo.node = messageNode;

     this._updateNetMessage(aActorId);

     return messageNode;

   },

   /**

    * Create a mixed content warning Node.

    *

    * @param aLinkNode

    *        Parent to the requested urlNode.

    */

   makeMixedContentNode: function WCF_makeMixedContentNode(aLinkNode)

   {

     let mixedContentWarning = "[" + l10n.getStr("webConsoleMixedContentWarning") + "]";

     // Mixed content warning message links to a Learn More page

     let mixedContentWarningNode = this.document.createElementNS(XHTML_NS, "a");

     mixedContentWarningNode.title = MIXED_CONTENT_LEARN_MORE;

     mixedContentWarningNode.href = MIXED_CONTENT_LEARN_MORE;

     mixedContentWarningNode.className = "learn-more-link";

     mixedContentWarningNode.textContent = mixedContentWarning;

     mixedContentWarningNode.draggable = false;

     aLinkNode.appendChild(mixedContentWarningNode);

     this._addMessageLinkCallback(mixedContentWarningNode, (aEvent) => {

       aEvent.stopPropagation();

       this.owner.openLink(MIXED_CONTENT_LEARN_MORE);

     });

   },

   /**

    * Adds a more info link node to messages based on the nsIScriptError object

    * that we need to report to the console

    *

    * @param aNode

    *        The node to which we will be adding the more info link node

    * @param aScriptError

    *        The script error object that we are reporting to the console

    */

   addMoreInfoLink: function WCF_addMoreInfoLink(aNode, aScriptError)

   {

     let url;

     switch (aScriptError.category) {

      case "Insecure Password Field":

        url = INSECURE_PASSWORDS_LEARN_MORE;

      break;

      case "Mixed Content Message":

      case "Mixed Content Blocker":

       url = MIXED_CONTENT_LEARN_MORE;

      break;

      case "Invalid HSTS Headers":

       url = STRICT_TRANSPORT_SECURITY_LEARN_MORE;

      break;

      default:

       // Unknown category. Return without adding more info node.

       return;

     }

     this.addLearnMoreWarningNode(aNode, url);

   },

   /*

    * Appends a clickable warning node to the node passed

    * as a parameter to the function. When a user clicks on the appended

    * warning node, the browser navigates to the provided url.

    *

    * @param aNode

    *        The node to which we will be adding a clickable warning node.

    * @param aURL

    *        The url which points to the page where the user can learn more

    *        about security issues associated with the specific message that's

    *        being logged.

    */

   addLearnMoreWarningNode:

   function WCF_addLearnMoreWarningNode(aNode, aURL)

   {

     let moreInfoLabel = "[" + l10n.getStr("webConsoleMoreInfoLabel") + "]";

     let warningNode = this.document.createElementNS(XHTML_NS, "a");

     warningNode.title = aURL;

     warningNode.href = aURL;

     warningNode.draggable = false;

     warningNode.textContent = moreInfoLabel;

     warningNode.className = "learn-more-link";

     this._addMessageLinkCallback(warningNode, (aEvent) => {

       aEvent.stopPropagation();

       this.owner.openLink(aURL);

     });

     aNode.appendChild(warningNode);

   },

   /**

    * Log file activity.

    *

    * @param string aFileURI

    *        The file URI that was loaded.

    * @return nsIDOMElement|undefined

    *         The message element to display in the Web Console output.

    */

   logFileActivity: function WCF_logFileActivity(aFileURI)

   {

     let urlNode = this.document.createElementNS(XHTML_NS, "a");

     urlNode.setAttribute("title", aFileURI);

     urlNode.className = "url";

     urlNode.textContent = aFileURI;

     urlNode.draggable = false;

     urlNode.href = aFileURI;

     let outputNode = this.createMessageNode(CATEGORY_NETWORK, SEVERITY_LOG,

                                             urlNode, null, null, aFileURI);

     this._addMessageLinkCallback(urlNode, () => {

       this.owner.viewSource(aFileURI);

     });

     return outputNode;

   },

   /**

    * Handle the file activity messages coming from the remote Web Console.

    *

    * @param string aFileURI

    *        The file URI that was requested.

    */

   handleFileActivity: function WCF_handleFileActivity(aFileURI)

   {

     this.outputMessage(CATEGORY_NETWORK, this.logFileActivity, [aFileURI]);

   },

   /**

    * Handle the reflow activity messages coming from the remote Web Console.

    *

    * @param object aMessage

    *        An object holding information about a reflow batch.

    */

   logReflowActivity: function WCF_logReflowActivity(aMessage)

   {

     let {start, end, sourceURL, sourceLine} = aMessage;

     let duration = Math.round((end - start) * 100) / 100;

     let node = this.document.createElementNS(XHTML_NS, "span");

     if (sourceURL) {

       node.textContent = l10n.getFormatStr("reflow.messageWithLink", [duration]);

       let a = this.document.createElementNS(XHTML_NS, "a");

       a.href = "#";

       a.draggable = "false";

       let filename = WebConsoleUtils.abbreviateSourceURL(sourceURL);

       let functionName = aMessage.functionName || l10n.getStr("stacktrace.anonymousFunction");

       a.textContent = l10n.getFormatStr("reflow.messageLinkText",

                          [functionName, filename, sourceLine]);

       this._addMessageLinkCallback(a, () => {

         this.owner.viewSourceInDebugger(sourceURL, sourceLine);

       });

       node.appendChild(a);

     } else {

       node.textContent = l10n.getFormatStr("reflow.messageWithNoLink", [duration]);

     }

     return this.createMessageNode(CATEGORY_CSS, SEVERITY_LOG, node);

   },

   handleReflowActivity: function WCF_handleReflowActivity(aMessage)

   {

     this.outputMessage(CATEGORY_CSS, this.logReflowActivity, [aMessage]);

   },

   /**

    * Inform user that the window.console API has been replaced by a script

    * in a content page.

    */

   logWarningAboutReplacedAPI: function WCF_logWarningAboutReplacedAPI()

   {

     let node = this.createMessageNode(CATEGORY_JS, SEVERITY_WARNING,

                                       l10n.getStr("ConsoleAPIDisabled"));

     this.outputMessage(CATEGORY_JS, node);

   },

   /**

    * Handle the network events coming from the remote Web Console.

    *

    * @param object aActor

    *        The NetworkEventActor grip.

    */

   handleNetworkEvent: function WCF_handleNetworkEvent(aActor)

   {

     let networkInfo = {

       node: null,

       actor: aActor.actor,

       discardRequestBody: true,

       discardResponseBody: true,

       startedDateTime: aActor.startedDateTime,

       request: {

         url: aActor.url,

         method: aActor.method,

       },

       response: {},

       timings: {},

       updates: [], // track the list of network event updates

       private: aActor.private,

     };

     this._networkRequests[aActor.actor] = networkInfo;

     this.outputMessage(CATEGORY_NETWORK, this.logNetEvent, [aActor.actor]);

   },

   /**

    * Handle network event updates coming from the server.

    *

    * @param string aActorId

    *        The network event actor ID.

    * @param string aType

    *        Update type.

    * @param object aPacket

    *        Update details.

    */

   handleNetworkEventUpdate:

   function WCF_handleNetworkEventUpdate(aActorId, aType, aPacket)

   {

     let networkInfo = this._networkRequests[aActorId];

     if (!networkInfo) {

       return;

     }

     networkInfo.updates.push(aType);

     switch (aType) {

       case "requestHeaders":

         networkInfo.request.headersSize = aPacket.headersSize;

         break;

       case "requestPostData":

         networkInfo.discardRequestBody = aPacket.discardRequestBody;

         networkInfo.request.bodySize = aPacket.dataSize;

         break;

       case "responseStart":

         networkInfo.response.httpVersion = aPacket.response.httpVersion;

         networkInfo.response.status = aPacket.response.status;

         networkInfo.response.statusText = aPacket.response.statusText;

         networkInfo.response.headersSize = aPacket.response.headersSize;

         networkInfo.discardResponseBody = aPacket.response.discardResponseBody;

         break;

       case "responseContent":

         networkInfo.response.content = {

           mimeType: aPacket.mimeType,

         };

         networkInfo.response.bodySize = aPacket.contentSize;

         networkInfo.discardResponseBody = aPacket.discardResponseBody;

         break;

       case "eventTimings":

         networkInfo.totalTime = aPacket.totalTime;

         break;

     }

     if (networkInfo.node && this._updateNetMessage(aActorId)) {

       this.emit("messages-updated", new Set([networkInfo.node]));

     }

     // For unit tests we pass the HTTP activity object to the test callback,

     // once requests complete.

     if (this.owner.lastFinishedRequestCallback &&

         networkInfo.updates.indexOf("responseContent") > -1 &&

         networkInfo.updates.indexOf("eventTimings") > -1) {

       this.owner.lastFinishedRequestCallback(networkInfo, this);

     }

   },

   /**

    * Update an output message to reflect the latest state of a network request,

    * given a network event actor ID.

    *

    * @private

    * @param string aActorId

    *        The network event actor ID for which you want to update the message.

    * @return boolean

    *         |true| if the message node was updated, or |false| otherwise.

    */

   _updateNetMessage: function WCF__updateNetMessage(aActorId)

   {

     let networkInfo = this._networkRequests[aActorId];

     if (!networkInfo || !networkInfo.node) {

       return;

     }

     let messageNode = networkInfo.node;

     let updates = networkInfo.updates;

     let hasEventTimings = updates.indexOf("eventTimings") > -1;

     let hasResponseStart = updates.indexOf("responseStart") > -1;

     let request = networkInfo.request;

     let response = networkInfo.response;

     let updated = false;

     if (hasEventTimings || hasResponseStart) {

       let status = [];

       if (response.httpVersion && response.status) {

         status = [response.httpVersion, response.status, response.statusText];

       }

       if (hasEventTimings) {

         status.push(l10n.getFormatStr("NetworkPanel.durationMS",

                                       [networkInfo.totalTime]));

       }

       let statusText = "[" + status.join(" ") + "]";

       let statusNode = messageNode.getElementsByClassName("status")[0];

       statusNode.textContent = statusText;

       messageNode.clipboardText = [request.method, request.url, statusText]

                                   .join(" ");

       if (hasResponseStart && response.status >= MIN_HTTP_ERROR_CODE &&

           response.status <= MAX_HTTP_ERROR_CODE) {

         this.setMessageType(messageNode, CATEGORY_NETWORK, SEVERITY_ERROR);

       }

       updated = true;

     }

     if (messageNode._netPanel) {

       messageNode._netPanel.update();

     }

     return updated;

   },

   /**

    * Opens a NetworkPanel.

    *

    * @param nsIDOMNode aNode

    *        The message node you want the panel to be anchored to.

    * @param object aHttpActivity

    *        The HTTP activity object that holds network request and response

    *        information. This object is given to the NetworkPanel constructor.

    * @return object

    *         The new NetworkPanel instance.

    */

   openNetworkPanel: function WCF_openNetworkPanel(aNode, aHttpActivity)

   {

     let actor = aHttpActivity.actor;

     if (actor) {

       this.webConsoleClient.getRequestHeaders(actor, function(aResponse) {

         if (aResponse.error) {

           Cu.reportError("WCF_openNetworkPanel getRequestHeaders:" +

                          aResponse.error);

           return;

         }

         aHttpActivity.request.headers = aResponse.headers;

         this.webConsoleClient.getRequestCookies(actor, onRequestCookies);

       }.bind(this));

     }

     let onRequestCookies = function(aResponse) {

       if (aResponse.error) {

         Cu.reportError("WCF_openNetworkPanel getRequestCookies:" +

                        aResponse.error);

         return;

       }

       aHttpActivity.request.cookies = aResponse.cookies;

       this.webConsoleClient.getResponseHeaders(actor, onResponseHeaders);

     }.bind(this);

     let onResponseHeaders = function(aResponse) {

       if (aResponse.error) {

         Cu.reportError("WCF_openNetworkPanel getResponseHeaders:" +

                        aResponse.error);

         return;

       }

       aHttpActivity.response.headers = aResponse.headers;

       this.webConsoleClient.getResponseCookies(actor, onResponseCookies);

     }.bind(this);

     let onResponseCookies = function(aResponse) {

       if (aResponse.error) {

         Cu.reportError("WCF_openNetworkPanel getResponseCookies:" +

                        aResponse.error);

         return;

       }

       aHttpActivity.response.cookies = aResponse.cookies;

       this.webConsoleClient.getRequestPostData(actor, onRequestPostData);

     }.bind(this);

     let onRequestPostData = function(aResponse) {

       if (aResponse.error) {

         Cu.reportError("WCF_openNetworkPanel getRequestPostData:" +

                        aResponse.error);

         return;

       }

       aHttpActivity.request.postData = aResponse.postData;

       aHttpActivity.discardRequestBody = aResponse.postDataDiscarded;

       this.webConsoleClient.getResponseContent(actor, onResponseContent);

     }.bind(this);

     let onResponseContent = function(aResponse) {

       if (aResponse.error) {

         Cu.reportError("WCF_openNetworkPanel getResponseContent:" +

                        aResponse.error);

         return;

       }

       aHttpActivity.response.content = aResponse.content;

       aHttpActivity.discardResponseBody = aResponse.contentDiscarded;

       this.webConsoleClient.getEventTimings(actor, onEventTimings);

     }.bind(this);

     let onEventTimings = function(aResponse) {

       if (aResponse.error) {

         Cu.reportError("WCF_openNetworkPanel getEventTimings:" +

                        aResponse.error);

         return;

       }

       aHttpActivity.timings = aResponse.timings;

       openPanel();

     }.bind(this);

     let openPanel = function() {

       aNode._netPanel = netPanel;

       let panel = netPanel.panel;

       panel.openPopup(aNode, "after_pointer", 0, 0, false, false);

       panel.sizeTo(450, 500);

       panel.setAttribute("hudId", this.hudId);

       panel.addEventListener("popuphiding", function WCF_netPanel_onHide() {

         panel.removeEventListener("popuphiding", WCF_netPanel_onHide);

         aNode._panelOpen = false;

         aNode._netPanel = null;

       });

       aNode._panelOpen = true;

     }.bind(this);

     let netPanel = new NetworkPanel(this.popupset, aHttpActivity, this);

     netPanel.linkNode = aNode;

     if (!actor) {

       openPanel();

     }

     return netPanel;

   },

   /**

    * Handler for page location changes.

    *

    * @param string aURI

    *        New page location.

    * @param string aTitle

    *        New page title.

    */

   onLocationChange: function WCF_onLocationChange(aURI, aTitle)

   {

     this.contentLocation = aURI;

     if (this.owner.onLocationChange) {

       this.owner.onLocationChange(aURI, aTitle);

     }

   },

   /**

    * Handler for the tabNavigated notification.

    *

    * @param string aEvent

    *        Event name.

    * @param object aPacket

    *        Notification packet received from the server.

    */

   handleTabNavigated: function WCF_handleTabNavigated(aEvent, aPacket)

   {

     if (aEvent == "will-navigate") {

       if (this.persistLog) {

         let marker = new Messages.NavigationMarker(aPacket.url, Date.now());

         this.output.addMessage(marker);

       }

       else {

         this.jsterm.clearOutput();

       }

     }

     if (aPacket.url) {

       this.onLocationChange(aPacket.url, aPacket.title);

     }

     if (aEvent == "navigate" && !aPacket.nativeConsoleAPI) {

       this.logWarningAboutReplacedAPI();

     }

   },

   /**

    * Output a message node. This filters a node appropriately, then sends it to

    * the output, regrouping and pruning output as necessary.

    *

    * Note: this call is async - the given message node may not be displayed when

    * you call this method.

    *

    * @param integer aCategory

    *        The category of the message you want to output. See the CATEGORY_*

    *        constants.

    * @param function|nsIDOMElement aMethodOrNode

    *        The method that creates the message element to send to the output or

    *        the actual element. If a method is given it will be bound to the HUD

    *        object and the arguments will be |aArguments|.

    * @param array [aArguments]

    *        If a method is given to output the message element then the method

    *        will be invoked with the list of arguments given here.

    */

   outputMessage: function WCF_outputMessage(aCategory, aMethodOrNode, aArguments)

   {

     if (!this._outputQueue.length) {

       // If the queue is empty we consider that now was the last output flush.

       // This avoid an immediate output flush when the timer executes.

       this._lastOutputFlush = Date.now();

     }

     this._outputQueue.push([aCategory, aMethodOrNode, aArguments]);

     if (!this._outputTimerInitialized) {

       this._initOutputTimer();

     }

   },

   /**

    * Try to flush the output message queue. This takes the messages in the

    * output queue and displays them. Outputting stops at MESSAGES_IN_INTERVAL.

    * Further output is queued to happen later - see OUTPUT_INTERVAL.

    *

    * @private

    */

   _flushMessageQueue: function WCF__flushMessageQueue()

   {

     if (!this._outputTimer) {

       return;

     }

     let timeSinceFlush = Date.now() - this._lastOutputFlush;

     if (this._outputQueue.length > MESSAGES_IN_INTERVAL &&

         timeSinceFlush < THROTTLE_UPDATES) {

       this._initOutputTimer();

       return;

     }

     // Determine how many messages we can display now.

     let toDisplay = Math.min(this._outputQueue.length, MESSAGES_IN_INTERVAL);

     if (toDisplay < 1) {

       this._outputTimerInitialized = false;

       return;

     }

     // Try to prune the message queue.

     let shouldPrune = false;

     if (this._outputQueue.length > toDisplay && this._pruneOutputQueue()) {

       toDisplay = Math.min(this._outputQueue.length, toDisplay);

       shouldPrune = true;

     }

     let batch = this._outputQueue.splice(0, toDisplay);

     if (!batch.length) {

       this._outputTimerInitialized = false;

       return;

     }

     let outputNode = this.outputNode;

     let lastVisibleNode = null;

     let scrollNode = outputNode.parentNode;

     let scrolledToBottom = Utils.isOutputScrolledToBottom(outputNode);

     let hudIdSupportsString = WebConsoleUtils.supportsString(this.hudId);

     // Output the current batch of messages.

     let newMessages = new Set();

     let updatedMessages = new Set();

     for (let item of batch) {

       let result = this._outputMessageFromQueue(hudIdSupportsString, item);

       if (result) {

         if (result.isRepeated) {

           updatedMessages.add(result.isRepeated);

         }

         else {

           newMessages.add(result.node);

         }

         if (result.visible && result.node == this.outputNode.lastChild) {

           lastVisibleNode = result.node;

         }

       }

     }

     let oldScrollHeight = 0;

     // Prune messages if needed. We do not do this for every flush call to

     // improve performance.

     let removedNodes = 0;

     if (shouldPrune || !this._outputQueue.length) {

       oldScrollHeight = scrollNode.scrollHeight;

       let categories = Object.keys(this._pruneCategoriesQueue);

       categories.forEach(function _pruneOutput(aCategory) {

         removedNodes += this.pruneOutputIfNecessary(aCategory);

       }, this);

       this._pruneCategoriesQueue = {};

     }

     let isInputOutput = lastVisibleNode &&

                         (lastVisibleNode.category == CATEGORY_INPUT ||

                          lastVisibleNode.category == CATEGORY_OUTPUT);

     // Scroll to the new node if it is not filtered, and if the output node is

     // scrolled at the bottom or if the new node is a jsterm input/output

     // message.

     if (lastVisibleNode && (scrolledToBottom || isInputOutput)) {

       Utils.scrollToVisible(lastVisibleNode);

     }

     else if (!scrolledToBottom && removedNodes > 0 &&

              oldScrollHeight != scrollNode.scrollHeight) {

       // If there were pruned messages and if scroll is not at the bottom, then

       // we need to adjust the scroll location.

       scrollNode.scrollTop -= oldScrollHeight - scrollNode.scrollHeight;

     }

     if (newMessages.size) {

       this.emit("messages-added", newMessages);

     }

     if (updatedMessages.size) {

       this.emit("messages-updated", updatedMessages);

     }

     // If the queue is not empty, schedule another flush.

     if (this._outputQueue.length > 0) {

       this._initOutputTimer();

     }

     else {

       this._outputTimerInitialized = false;

       if (this._flushCallback && this._flushCallback() === false) {

         this._flushCallback = null;

       }

     }

     this._lastOutputFlush = Date.now();

   },

   /**

    * Initialize the output timer.

    * @private

    */

   _initOutputTimer: function WCF__initOutputTimer()

   {

     if (!this._outputTimer) {

       return;

     }

     this._outputTimerInitialized = true;

     this._outputTimer.initWithCallback(this._flushMessageQueue,

                                        OUTPUT_INTERVAL,

                                        Ci.nsITimer.TYPE_ONE_SHOT);

   },

   /**

    * Output a message from the queue.

    *

    * @private

    * @param nsISupportsString aHudIdSupportsString

    *        The HUD ID as an nsISupportsString.

    * @param array aItem

    *        An item from the output queue - this item represents a message.

    * @return object

    *         An object that holds the following properties:

    *         - node: the DOM element of the message.

    *         - isRepeated: the DOM element of the original message, if this is

    *         a repeated message, otherwise null.

    *         - visible: boolean that tells if the message is visible.

    */

   _outputMessageFromQueue:

   function WCF__outputMessageFromQueue(aHudIdSupportsString, aItem)

   {

     let [category, methodOrNode, args] = aItem;

     let node = typeof methodOrNode == "function" ?

                methodOrNode.apply(this, args || []) :

                methodOrNode;

     if (!node) {

       return null;

     }

     let afterNode = node._outputAfterNode;

     if (afterNode) {

       delete node._outputAfterNode;

     }

     let isFiltered = this.filterMessageNode(node);

     let isRepeated = this._filterRepeatedMessage(node);

     let visible = !isRepeated && !isFiltered;

     if (!isRepeated) {

       this.outputNode.insertBefore(node,

                                    afterNode ? afterNode.nextSibling : null);

       this._pruneCategoriesQueue[node.category] = true;

       let nodeID = node.getAttribute("id");

       Services.obs.notifyObservers(aHudIdSupportsString,

                                    "web-console-message-created", nodeID);

     }

     if (node._onOutput) {

       node._onOutput();

       delete node._onOutput;

     }

     return {

       visible: visible,

       node: node,

       isRepeated: isRepeated,

     };

   },

   /**

    * Prune the queue of messages to display. This avoids displaying messages

    * that will be removed at the end of the queue anyway.

    * @private

    */

   _pruneOutputQueue: function WCF__pruneOutputQueue()

   {

     let nodes = {};

     // Group the messages per category.

     this._outputQueue.forEach(function(aItem, aIndex) {

       let [category] = aItem;

       if (!(category in nodes)) {

         nodes[category] = [];

       }

       nodes[category].push(aIndex);

     }, this);

     let pruned = 0;

     // Loop through the categories we found and prune if needed.

     for (let category in nodes) {

       let limit = Utils.logLimitForCategory(category);

       let indexes = nodes[category];

       if (indexes.length > limit) {

         let n = Math.max(0, indexes.length - limit);

         pruned += n;

         for (let i = n - 1; i >= 0; i--) {

           this._pruneItemFromQueue(this._outputQueue[indexes[i]]);

           this._outputQueue.splice(indexes[i], 1);

         }

       }

     }

     return pruned;

   },

   /**

    * Prune an item from the output queue.

    *

    * @private

    * @param array aItem

    *        The item you want to remove from the output queue.

    */

   _pruneItemFromQueue: function WCF__pruneItemFromQueue(aItem)

   {

     // TODO: handle object releasing in a more elegant way once all console

     // messages use the new API - bug 778766.

     let [category, methodOrNode, args] = aItem;

     if (typeof methodOrNode != "function" && methodOrNode._objectActors) {

       for (let actor of methodOrNode._objectActors) {

         this._releaseObject(actor);

       }

       methodOrNode._objectActors.clear();

     }

     if (methodOrNode == this.output._flushMessageQueue &&

         args[0]._objectActors) {

       for (let arg of args) {

         if (!arg._objectActors) {

           continue;

         }

         for (let actor of arg._objectActors) {

           this._releaseObject(actor);

         }

         arg._objectActors.clear();

       }

     }

     if (category == CATEGORY_NETWORK) {

       let connectionId = null;

       if (methodOrNode == this.logNetEvent) {

         connectionId = args[0];

       }

       else if (typeof methodOrNode != "function") {

         connectionId = methodOrNode._connectionId;

       }

       if (connectionId && connectionId in this._networkRequests) {

         delete this._networkRequests[connectionId];

         this._releaseObject(connectionId);

       }

     }

     else if (category == CATEGORY_WEBDEV &&

              methodOrNode == this.logConsoleAPIMessage) {

       args[0].arguments.forEach((aValue) => {

         if (WebConsoleUtils.isActorGrip(aValue)) {

           this._releaseObject(aValue.actor);

         }

       });

     }

     else if (category == CATEGORY_JS &&

              methodOrNode == this.reportPageError) {

       let pageError = args[1];

       for (let prop of ["errorMessage", "lineText"]) {

         let grip = pageError[prop];

         if (WebConsoleUtils.isActorGrip(grip)) {

           this._releaseObject(grip.actor);

         }

       }

     }

     else if (category == CATEGORY_JS &&

              methodOrNode == this._reportLogMessage) {

       if (WebConsoleUtils.isActorGrip(args[0].message)) {

         this._releaseObject(args[0].message.actor);

       }

     }

   },

   /**

    * Ensures that the number of message nodes of type aCategory don't exceed that

    * category's line limit by removing old messages as needed.

    *

    * @param integer aCategory

    *        The category of message nodes to prune if needed.

    * @return number

    *         The number of removed nodes.

    */

   pruneOutputIfNecessary: function WCF_pruneOutputIfNecessary(aCategory)

   {

     let logLimit = Utils.logLimitForCategory(aCategory);

     let messageNodes = this.outputNode.querySelectorAll(".message[category=" +

                        CATEGORY_CLASS_FRAGMENTS[aCategory] + "]");

     let n = Math.max(0, messageNodes.length - logLimit);

     let toRemove = Array.prototype.slice.call(messageNodes, 0, n);

     toRemove.forEach(this.removeOutputMessage, this);

     return n;

   },

   /**

    * Remove a given message from the output.

    *

    * @param nsIDOMNode aNode

    *        The message node you want to remove.

    */

   removeOutputMessage: function WCF_removeOutputMessage(aNode)

   {

     if (aNode._messageObject) {

       aNode._messageObject.destroy();

     }

     if (aNode._objectActors) {

       for (let actor of aNode._objectActors) {

         this._releaseObject(actor);

       }

       aNode._objectActors.clear();

     }

     if (aNode.category == CATEGORY_CSS ||

         aNode.category == CATEGORY_SECURITY) {

       let repeatNode = aNode.getElementsByClassName("message-repeats")[0];

       if (repeatNode && repeatNode._uid) {

         delete this._repeatNodes[repeatNode._uid];

       }

     }

     else if (aNode._connectionId &&

              aNode.category == CATEGORY_NETWORK) {

       delete this._networkRequests[aNode._connectionId];

       this._releaseObject(aNode._connectionId);

     }

     else if (aNode.classList.contains("inlined-variables-view")) {

       let view = aNode._variablesView;

       if (view) {

         view.controller.releaseActors();

       }

       aNode._variablesView = null;

     }

     if (aNode.parentNode) {

       aNode.parentNode.removeChild(aNode);

     }

   },

   /**

    * Given a category and message body, creates a DOM node to represent an

    * incoming message. The timestamp is automatically added.

    *

    * @param number aCategory

    *        The category of the message: one of the CATEGORY_* constants.

    * @param number aSeverity

    *        The severity of the message: one of the SEVERITY_* constants;

    * @param string|nsIDOMNode aBody

    *        The body of the message, either a simple string or a DOM node.

    * @param string aSourceURL [optional]

    *        The URL of the source file that emitted the error.

    * @param number aSourceLine [optional]

    *        The line number on which the error occurred. If zero or omitted,

    *        there is no line number associated with this message.

    * @param string aClipboardText [optional]

    *        The text that should be copied to the clipboard when this node is

    *        copied. If omitted, defaults to the body text. If `aBody` is not

    *        a string, then the clipboard text must be supplied.

    * @param number aLevel [optional]

    *        The level of the console API message.

    * @param number aTimeStamp [optional]

    *        The timestamp to use for this message node. If omitted, the current

    *        date and time is used.

    * @return nsIDOMNode

    *         The message node: a DIV ready to be inserted into the Web Console

    *         output node.

    */

   createMessageNode:

   function WCF_createMessageNode(aCategory, aSeverity, aBody, aSourceURL,

                                  aSourceLine, aClipboardText, aLevel, aTimeStamp)

   {

     if (typeof aBody != "string" && aClipboardText == null && aBody.innerText) {

       aClipboardText = aBody.innerText;

     }

     let indentNode = this.document.createElementNS(XHTML_NS, "span");

     indentNode.className = "indent";

     // Apply the current group by indenting appropriately.

     let indent = this.groupDepth * GROUP_INDENT;

     indentNode.style.width = indent + "px";

     // Make the icon container, which is a vertical box. Its purpose is to

     // ensure that the icon stays anchored at the top of the message even for

     // long multi-line messages.

     let iconContainer = this.document.createElementNS(XHTML_NS, "span");

     iconContainer.className = "icon";

     // Create the message body, which contains the actual text of the message.

     let bodyNode = this.document.createElementNS(XHTML_NS, "span");

     bodyNode.className = "message-body-wrapper message-body devtools-monospace";

     // Store the body text, since it is needed later for the variables view.

     let body = aBody;

     // If a string was supplied for the body, turn it into a DOM node and an

     // associated clipboard string now.

     aClipboardText = aClipboardText ||

                      (aBody + (aSourceURL ? " @ " + aSourceURL : "") +

                               (aSourceLine ? ":" + aSourceLine : ""));

     let timestamp = aTimeStamp || Date.now();

     // Create the containing node and append all its elements to it.

     let node = this.document.createElementNS(XHTML_NS, "div");

     node.id = "console-msg-" + gSequenceId();

     node.className = "message";

     node.clipboardText = aClipboardText;

     node.timestamp = timestamp;

     this.setMessageType(node, aCategory, aSeverity);

     if (aBody instanceof Ci.nsIDOMNode) {

       bodyNode.appendChild(aBody);

     }

     else {

       let str = undefined;

       if (aLevel == "dir") {

         str = VariablesView.getString(aBody.arguments[0]);

       }

       else {

         str = aBody;

       }

       if (str !== undefined) {

         aBody = this.document.createTextNode(str);

         bodyNode.appendChild(aBody);

       }

     }

     // Add the message repeats node only when needed.

     let repeatNode = null;

     if (aCategory != CATEGORY_INPUT &&

         aCategory != CATEGORY_OUTPUT &&

         aCategory != CATEGORY_NETWORK &&

         !(aCategory == CATEGORY_CSS && aSeverity == SEVERITY_LOG)) {

       repeatNode = this.document.createElementNS(XHTML_NS, "span");

       repeatNode.setAttribute("value", "1");

       repeatNode.className = "message-repeats";

       repeatNode.textContent = 1;

       repeatNode._uid = [bodyNode.textContent, aCategory, aSeverity, aLevel,

                          aSourceURL, aSourceLine].join(":");

     }

     // Create the timestamp.

     let timestampNode = this.document.createElementNS(XHTML_NS, "span");

     timestampNode.className = "timestamp devtools-monospace";

     let timestampString = l10n.timestampString(timestamp);

     timestampNode.textContent = timestampString + " ";

     // Create the source location (e.g. www.example.com:6) that sits on the

     // right side of the message, if applicable.

     let locationNode;

     if (aSourceURL && IGNORED_SOURCE_URLS.indexOf(aSourceURL) == -1) {

       locationNode = this.createLocationNode(aSourceURL, aSourceLine);

     }

     node.appendChild(timestampNode);

     node.appendChild(indentNode);

     node.appendChild(iconContainer);

     // Display the variables view after the message node.

     if (aLevel == "dir") {

       bodyNode.style.height = (this.window.innerHeight *

                                CONSOLE_DIR_VIEW_HEIGHT) + "px";

       let options = {

         objectActor: body.arguments[0],

         targetElement: bodyNode,

         hideFilterInput: true,

       };

       this.jsterm.openVariablesView(options).then((aView) => {

         node._variablesView = aView;

         if (node.classList.contains("hidden-message")) {

           node.classList.remove("hidden-message");

         }

       });

       node.classList.add("inlined-variables-view");

     }

     node.appendChild(bodyNode);

     if (repeatNode) {

       node.appendChild(repeatNode);

     }

     if (locationNode) {

       node.appendChild(locationNode);

     }

     node.appendChild(this.document.createTextNode("\n"));

     return node;

   },

   /**

    * Creates the anchor that displays the textual location of an incoming

    * message.

    *

    * @param string aSourceURL

    *        The URL of the source file responsible for the error.

    * @param number aSourceLine [optional]

    *        The line number on which the error occurred. If zero or omitted,

    *        there is no line number associated with this message.

    * @param string aTarget [optional]

    *        Tells which tool to open the link with, on click. Supported tools:

    *        jsdebugger, styleeditor, scratchpad.

    * @return nsIDOMNode

    *         The new anchor element, ready to be added to the message node.

    */

   createLocationNode:

   function WCF_createLocationNode(aSourceURL, aSourceLine, aTarget)

   {

     if (!aSourceURL) {

       aSourceURL = "";

     }

     let locationNode = this.document.createElementNS(XHTML_NS, "a");

     let filenameNode = this.document.createElementNS(XHTML_NS, "span");

     // Create the text, which consists of an abbreviated version of the URL

     // Scratchpad URLs should not be abbreviated.

     let filename;

     let fullURL;

     let isScratchpad = false;

     if (/^Scratchpad\/\d+$/.test(aSourceURL)) {

       filename = aSourceURL;

       fullURL = aSourceURL;

       isScratchpad = true;

     }

     else {

       fullURL = aSourceURL.split(" -> ").pop();

       filename = WebConsoleUtils.abbreviateSourceURL(fullURL);

     }

     filenameNode.className = "filename";

     filenameNode.textContent = " " + (filename || l10n.getStr("unknownLocation"));

     locationNode.appendChild(filenameNode);

     locationNode.href = isScratchpad || !fullURL ? "#" : fullURL;

     locationNode.draggable = false;

     if (aTarget) {

       locationNode.target = aTarget;

     }

     locationNode.setAttribute("title", aSourceURL);

     locationNode.className = "message-location theme-link devtools-monospace";

     // Make the location clickable.

     let onClick = () => {

       let target = locationNode.target;

       if (target == "scratchpad" || isScratchpad) {

         this.owner.viewSourceInScratchpad(aSourceURL);

         return;

       }

       let category = locationNode.parentNode.category;

       if (target == "styleeditor" || category == CATEGORY_CSS) {

         this.owner.viewSourceInStyleEditor(fullURL, aSourceLine);

       }

       else if (target == "jsdebugger" ||

                category == CATEGORY_JS || category == CATEGORY_WEBDEV) {

         this.owner.viewSourceInDebugger(fullURL, aSourceLine);

       }

       else {

         this.owner.viewSource(fullURL, aSourceLine);

       }

     };

     if (fullURL) {

       this._addMessageLinkCallback(locationNode, onClick);

     }

     if (aSourceLine) {

       let lineNumberNode = this.document.createElementNS(XHTML_NS, "span");

       lineNumberNode.className = "line-number";

       lineNumberNode.textContent = ":" + aSourceLine;

       locationNode.appendChild(lineNumberNode);