The Tor Browser / file revision

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

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

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

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

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

 const Heritage = require("sdk/core/heritage");

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

 const XUL_NS = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";

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

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

 const l10n = new WebConsoleUtils.l10n(STRINGS_URI);

 // Constants for compatibility with the Web Console output implementation before

 // bug 778766.

 // TODO: remove these once bug 778766 is fixed.

 const COMPAT = {

   // The various categories of messages.

   CATEGORIES: {

     NETWORK: 0,

     CSS: 1,

     JS: 2,

     WEBDEV: 3,

     INPUT: 4,

     OUTPUT: 5,

     SECURITY: 6,

   },

   // The possible message severities.

   SEVERITIES: {

     ERROR: 0,

     WARNING: 1,

     INFO: 2,

     LOG: 3,

   },

   // 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".

   PREFERENCE_KEYS: [

     // Error        Warning       Info    Log

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

     [ "csserror",   "cssparser",  null,   null,          ],  // 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

   ],

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

   CATEGORY_CLASS_FRAGMENTS: [ "network", "cssparser", "exception", "console",

                               "input", "output", "security" ],

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

   SEVERITY_CLASS_FRAGMENTS: [ "error", "warn", "info", "log" ],

   // The indent of a console group in pixels.

   GROUP_INDENT: 12,

 };

 // A map from the console API call levels to the Web Console severities.

 const CONSOLE_API_LEVELS_TO_SEVERITIES = {

   error: "error",

   exception: "error",

   assert: "error",

   warn: "warning",

   info: "info",

   log: "log",

   trace: "log",

   debug: "log",

   dir: "log",

   group: "log",

   groupCollapsed: "log",

   groupEnd: "log",

   time: "log",

   timeEnd: "log",

   count: "log"

 };

 // Array of known message source URLs we need to hide from output.

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

 // The maximum length of strings to be displayed by the Web Console.

 const MAX_LONG_STRING_LENGTH = 200000;

 // Regular expression that matches the allowed CSS property names when using

 // the `window.console` API.

 const RE_ALLOWED_STYLES = /^(?:-moz-)?(?:background|border|box|clear|color|cursor|display|float|font|line|margin|padding|text|transition|outline|white-space|word|writing|(?:min-|max-)?width|(?:min-|max-)?height)/;

 // Regular expressions to search and replace with 'notallowed' in the styles

 // given to the `window.console` API methods.

 const RE_CLEANUP_STYLES = [

   // url(), -moz-element()

   /\b(?:url|(?:-moz-)?element)[\s('"]+/gi,

   // various URL protocols

   /['"(]*(?:chrome|resource|about|app|data|https?|ftp|file):+\/*/gi,

 ];

 /**

  * The ConsoleOutput object is used to manage output of messages in the Web

  * Console.

  *

  * @constructor

  * @param object owner

  *        The console output owner. This usually the WebConsoleFrame instance.

  *        Any other object can be used, as long as it has the following

  *        properties and methods:

  *          - window

  *          - document

  *          - outputMessage(category, methodOrNode[, methodArguments])

  *            TODO: this is needed temporarily, until bug 778766 is fixed.

  */

 function ConsoleOutput(owner)

 {

   this.owner = owner;

   this._onFlushOutputMessage = this._onFlushOutputMessage.bind(this);

 }

 ConsoleOutput.prototype = {

   _dummyElement: null,

   /**

    * The output container.

    * @type DOMElement

    */

   get element() {

     return this.owner.outputNode;

   },

   /**

    * The document that holds the output.

    * @type DOMDocument

    */

   get document() {

     return this.owner ? this.owner.document : null;

   },

   /**

    * The DOM window that holds the output.

    * @type Window

    */

   get window() {

     return this.owner.window;

   },

   /**

    * Getter for the debugger WebConsoleClient.

    * @type object

    */

   get webConsoleClient() {

     return this.owner.webConsoleClient;

   },

   /**

    * Getter for the current toolbox debuggee target.

    * @type Target

    */

   get toolboxTarget() {

     return this.owner.owner.target;

   },

   /**

    * Release an actor.

    *

    * @private

    * @param string actorId

    *        The actor ID you want to release.

    */

   _releaseObject: function(actorId)

   {

     this.owner._releaseObject(actorId);

   },

   /**

    * Add a message to output.

    *

    * @param object ...args

    *        Any number of Message objects.

    * @return this

    */

   addMessage: function(...args)

   {

     for (let msg of args) {

       msg.init(this);

       this.owner.outputMessage(msg._categoryCompat, this._onFlushOutputMessage,

                                [msg]);

     }

     return this;

   },

   /**

    * Message renderer used for compatibility with the current Web Console output

    * implementation. This method is invoked for every message object that is

    * flushed to output. The message object is initialized and rendered, then it

    * is displayed.

    *

    * TODO: remove this method once bug 778766 is fixed.

    *

    * @private

    * @param object message

    *        The message object to render.

    * @return DOMElement

    *         The message DOM element that can be added to the console output.

    */

   _onFlushOutputMessage: function(message)

   {

     return message.render().element;

   },

   /**

    * Get an array of selected messages. This list is based on the text selection

    * start and end points.

    *

    * @param number [limit]

    *        Optional limit of selected messages you want. If no value is given,

    *        all of the selected messages are returned.

    * @return array

    *         Array of DOM elements for each message that is currently selected.

    */

   getSelectedMessages: function(limit)

   {

     let selection = this.window.getSelection();

     if (selection.isCollapsed) {

       return [];

     }

     if (selection.containsNode(this.element, true)) {

       return Array.slice(this.element.children);

     }

     let anchor = this.getMessageForElement(selection.anchorNode);

     let focus = this.getMessageForElement(selection.focusNode);

     if (!anchor || !focus) {

       return [];

     }

     let start, end;

     if (anchor.timestamp > focus.timestamp) {

       start = focus;

       end = anchor;

     } else {

       start = anchor;

       end = focus;

     }

     let result = [];

     let current = start;

     while (current) {

       result.push(current);

       if (current == end || (limit && result.length == limit)) {

         break;

       }

       current = current.nextSibling;

     }

     return result;

   },

   /**

    * Find the DOM element of a message for any given descendant.

    *

    * @param DOMElement elem

    *        The element to start the search from.

    * @return DOMElement|null

    *         The DOM element of the message, if any.

    */

   getMessageForElement: function(elem)

   {

     while (elem && elem.parentNode) {

       if (elem.classList && elem.classList.contains("message")) {

         return elem;

       }

       elem = elem.parentNode;

     }

     return null;

   },

   /**

    * Select all messages.

    */

   selectAllMessages: function()

   {

     let selection = this.window.getSelection();

     selection.removeAllRanges();

     let range = this.document.createRange();

     range.selectNodeContents(this.element);

     selection.addRange(range);

   },

   /**

    * Add a message to the selection.

    *

    * @param DOMElement elem

    *        The message element to select.

    */

   selectMessage: function(elem)

   {

     let selection = this.window.getSelection();

     selection.removeAllRanges();

     let range = this.document.createRange();

     range.selectNodeContents(elem);

     selection.addRange(range);

   },

   /**

    * Open an URL in a new tab.

    * @see WebConsole.openLink() in hudservice.js

    */

   openLink: function()

   {

     this.owner.owner.openLink.apply(this.owner.owner, arguments);

   },

   /**

    * Open the variables view to inspect an object actor.

    * @see JSTerm.openVariablesView() in webconsole.js

    */

   openVariablesView: function()

   {

     this.owner.jsterm.openVariablesView.apply(this.owner.jsterm, arguments);

   },

   /**

    * Destroy this ConsoleOutput instance.

    */

   destroy: function()

   {

     this._dummyElement = null;

     this.owner = null;

   },

 }; // ConsoleOutput.prototype

 /**

  * Message objects container.

  * @type object

  */

 let Messages = {};

 /**

  * The BaseMessage object is used for all types of messages. Every kind of

  * message should use this object as its base.

  *

  * @constructor

  */

 Messages.BaseMessage = function()

 {

   this.widgets = new Set();

   this._onClickAnchor = this._onClickAnchor.bind(this);

   this._repeatID = { uid: gSequenceId() };

   this.textContent = "";

 };

 Messages.BaseMessage.prototype = {

   /**

    * Reference to the ConsoleOutput owner.

    *

    * @type object|null

    *       This is |null| if the message is not yet initialized.

    */

   output: null,

   /**

    * Reference to the parent message object, if this message is in a group or if

    * it is otherwise owned by another message.

    *

    * @type object|null

    */

   parent: null,

   /**

    * Message DOM element.

    *

    * @type DOMElement|null

    *       This is |null| if the message is not yet rendered.

    */

   element: null,

   /**

    * Tells if this message is visible or not.

    * @type boolean

    */

   get visible() {

     return this.element && this.element.parentNode;

   },

   /**

    * The owner DOM document.

    * @type DOMElement

    */

   get document() {

     return this.output.document;

   },

   /**

    * Holds the text-only representation of the message.

    * @type string

    */

   textContent: null,

   /**

    * Set of widgets included in this message.

    * @type Set

    */

   widgets: null,

   // Properties that allow compatibility with the current Web Console output

   // implementation.

   _categoryCompat: null,

   _severityCompat: null,

   _categoryNameCompat: null,

   _severityNameCompat: null,

   _filterKeyCompat: null,

   /**

    * Object that is JSON-ified and used as a non-unique ID for tracking

    * duplicate messages.

    * @private

    * @type object

    */

   _repeatID: null,

   /**

    * Initialize the message.

    *

    * @param object output

    *        The ConsoleOutput owner.

    * @param object [parent=null]

    *        Optional: a different message object that owns this instance.

    * @return this

    */

   init: function(output, parent=null)

   {

     this.output = output;

     this.parent = parent;

     return this;

   },

   /**

    * Non-unique ID for this message object used for tracking duplicate messages.

    * Different message kinds can identify themselves based their own criteria.

    *

    * @return string

    */

   getRepeatID: function()

   {

     return JSON.stringify(this._repeatID);

   },

   /**

    * Render the message. After this method is invoked the |element| property

    * will point to the DOM element of this message.

    * @return this

    */

   render: function()

   {

     if (!this.element) {

       this.element = this._renderCompat();

     }

     return this;

   },

   /**

    * Prepare the message container for the Web Console, such that it is

    * compatible with the current implementation.

    * TODO: remove this once bug 778766 is fixed.

    *

    * @private

    * @return Element

    *         The DOM element that wraps the message.

    */

   _renderCompat: function()

   {

     let doc = this.output.document;

     let container = doc.createElementNS(XHTML_NS, "div");

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

     container.className = "message";

     container.category = this._categoryCompat;

     container.severity = this._severityCompat;

     container.setAttribute("category", this._categoryNameCompat);

     container.setAttribute("severity", this._severityNameCompat);

     container.setAttribute("filter", this._filterKeyCompat);

     container.clipboardText = this.textContent;

     container.timestamp = this.timestamp;

     container._messageObject = this;

     return container;

   },

   /**

    * Add a click callback to a given DOM element.

    *

    * @private

    * @param Element element

    *        The DOM element to which you want to add a click event handler.

    * @param function [callback=this._onClickAnchor]

    *        Optional click event handler. The default event handler is

    *        |this._onClickAnchor|.

    */

   _addLinkCallback: function(element, callback = this._onClickAnchor)

   {

     // This is going into the WebConsoleFrame object instance that owns

     // the ConsoleOutput object. The WebConsoleFrame owner is the WebConsole

     // object instance from hudservice.js.

     // TODO: move _addMessageLinkCallback() into ConsoleOutput once bug 778766

     // is fixed.

     this.output.owner._addMessageLinkCallback(element, callback);

   },

   /**

    * The default |click| event handler for links in the output. This function

    * opens the anchor's link in a new tab.

    *

    * @private

    * @param Event event

    *        The DOM event that invoked this function.

    */

   _onClickAnchor: function(event)

   {

     this.output.openLink(event.target.href);

   },

   destroy: function()

   {

     // Destroy all widgets that have registered themselves in this.widgets

     for (let widget of this.widgets) {

       widget.destroy();

     }

     this.widgets.clear();

   }

 }; // Messages.BaseMessage.prototype

 /**

  * The NavigationMarker is used to show a page load event.

  *

  * @constructor

  * @extends Messages.BaseMessage

  * @param string url

  *        The URL to display.

  * @param number timestamp

  *        The message date and time, milliseconds elapsed since 1 January 1970

  *        00:00:00 UTC.

  */

 Messages.NavigationMarker = function(url, timestamp)

 {

   Messages.BaseMessage.call(this);

   this._url = url;

   this.textContent = "------ " + url;

   this.timestamp = timestamp;

 };

 Messages.NavigationMarker.prototype = Heritage.extend(Messages.BaseMessage.prototype,

 {

   /**

    * The address of the loading page.

    * @private

    * @type string

    */

   _url: null,

   /**

    * Message timestamp.

    *

    * @type number

    *       Milliseconds elapsed since 1 January 1970 00:00:00 UTC.

    */

   timestamp: 0,

   _categoryCompat: COMPAT.CATEGORIES.NETWORK,

   _severityCompat: COMPAT.SEVERITIES.LOG,

   _categoryNameCompat: "network",

   _severityNameCompat: "info",

   _filterKeyCompat: "networkinfo",

   /**

    * Prepare the DOM element for this message.

    * @return this

    */

   render: function()

   {

     if (this.element) {

       return this;

     }

     let url = this._url;

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

     if (pos > -1) {

       url = url.substr(0, pos);

     }

     let doc = this.output.document;

     let urlnode = doc.createElementNS(XHTML_NS, "a");

     urlnode.className = "url";

     urlnode.textContent = url;

     urlnode.title = this._url;

     urlnode.href = this._url;

     urlnode.draggable = false;

     this._addLinkCallback(urlnode);

     let render = Messages.BaseMessage.prototype.render.bind(this);

     render().element.appendChild(urlnode);

     this.element.classList.add("navigation-marker");

     this.element.url = this._url;

     this.element.appendChild(doc.createTextNode("\n"));

     return this;

   },

 }); // Messages.NavigationMarker.prototype

 /**

  * The Simple message is used to show any basic message in the Web Console.

  *

  * @constructor

  * @extends Messages.BaseMessage

  * @param string|Node|function message

  *        The message to display.

  * @param object [options]

  *        Options for this message:

  *        - category: (string) category that this message belongs to. Defaults

  *        to no category.

  *        - severity: (string) severity of the message. Defaults to no severity.

  *        - timestamp: (number) date and time when the message was recorded.

  *        Defaults to |Date.now()|.

  *        - link: (string) if provided, the message will be wrapped in an anchor

  *        pointing to the given URL here.

  *        - linkCallback: (function) if provided, the message will be wrapped in

  *        an anchor. The |linkCallback| function will be added as click event

  *        handler.

  *        - location: object that tells the message source: url, line, column

  *        and lineText.

  *        - className: (string) additional element class names for styling

  *        purposes.

  *        - private: (boolean) mark this as a private message.

  *        - filterDuplicates: (boolean) true if you do want this message to be

  *        filtered as a potential duplicate message, false otherwise.

  */

 Messages.Simple = function(message, options = {})

 {

   Messages.BaseMessage.call(this);

   this.category = options.category;

   this.severity = options.severity;

   this.location = options.location;

   this.timestamp = options.timestamp || Date.now();

   this.private = !!options.private;

   this._message = message;

   this._className = options.className;

   this._link = options.link;

   this._linkCallback = options.linkCallback;

   this._filterDuplicates = options.filterDuplicates;

 };

 Messages.Simple.prototype = Heritage.extend(Messages.BaseMessage.prototype,

 {

   /**

    * Message category.

    * @type string

    */

   category: null,

   /**

    * Message severity.

    * @type string

    */

   severity: null,

   /**

    * Message source location. Properties: url, line, column, lineText.

    * @type object

    */

   location: null,

   /**

    * Tells if this message comes from a private browsing context.

    * @type boolean

    */

   private: false,

   /**

    * Custom class name for the DOM element of the message.

    * @private

    * @type string

    */

   _className: null,

   /**

    * Message link - if this message is clicked then this URL opens in a new tab.

    * @private

    * @type string

    */

   _link: null,

   /**

    * Message click event handler.

    * @private

    * @type function

    */

   _linkCallback: null,

   /**

    * Tells if this message should be checked if it is a duplicate of another

    * message or not.

    */

   _filterDuplicates: false,

   /**

    * The raw message displayed by this Message object. This can be a function,

    * DOM node or a string.

    *

    * @private

    * @type mixed

    */

   _message: null,

   _afterMessage: null,

   _objectActors: null,

   _groupDepthCompat: 0,

   /**

    * Message timestamp.

    *

    * @type number

    *       Milliseconds elapsed since 1 January 1970 00:00:00 UTC.

    */

   timestamp: 0,

   get _categoryCompat() {

     return this.category ?

            COMPAT.CATEGORIES[this.category.toUpperCase()] : null;

   },

   get _severityCompat() {

     return this.severity ?

            COMPAT.SEVERITIES[this.severity.toUpperCase()] : null;

   },

   get _categoryNameCompat() {

     return this.category ?

            COMPAT.CATEGORY_CLASS_FRAGMENTS[this._categoryCompat] : null;

   },

   get _severityNameCompat() {

     return this.severity ?

            COMPAT.SEVERITY_CLASS_FRAGMENTS[this._severityCompat] : null;

   },

   get _filterKeyCompat() {

     return this._categoryCompat !== null && this._severityCompat !== null ?

            COMPAT.PREFERENCE_KEYS[this._categoryCompat][this._severityCompat] :

            null;

   },

   init: function()

   {

     Messages.BaseMessage.prototype.init.apply(this, arguments);

     this._groupDepthCompat = this.output.owner.groupDepth;

     this._initRepeatID();

     return this;

   },

   _initRepeatID: function()

   {

     if (!this._filterDuplicates) {

       return;

     }

     // Add the properties we care about for identifying duplicate messages.

     let rid = this._repeatID;

     delete rid.uid;

     rid.category = this.category;

     rid.severity = this.severity;

     rid.private = this.private;

     rid.location = this.location;

     rid.link = this._link;

     rid.linkCallback = this._linkCallback + "";

     rid.className = this._className;

     rid.groupDepth = this._groupDepthCompat;

     rid.textContent = "";

   },

   getRepeatID: function()

   {

     // No point in returning a string that includes other properties when there

     // is a unique ID.

     if (this._repeatID.uid) {

       return JSON.stringify({ uid: this._repeatID.uid });

     }

     return JSON.stringify(this._repeatID);

   },

   render: function()

   {

     if (this.element) {

       return this;

     }

     let timestamp = new Widgets.MessageTimestamp(this, this.timestamp).render();

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

     icon.className = "icon";

     // Apply the current group by indenting appropriately.

     // TODO: remove this once bug 778766 is fixed.

     let indent = this._groupDepthCompat * COMPAT.GROUP_INDENT;

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

     indentNode.className = "indent";

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

     let body = this._renderBody();

     this._repeatID.textContent += "|" + body.textContent;

     let repeatNode = this._renderRepeatNode();

     let location = this._renderLocation();

     Messages.BaseMessage.prototype.render.call(this);

     if (this._className) {

       this.element.className += " " + this._className;

     }

     this.element.appendChild(timestamp.element);

     this.element.appendChild(indentNode);

     this.element.appendChild(icon);

     this.element.appendChild(body);

     if (repeatNode) {

       this.element.appendChild(repeatNode);

     }

     if (location) {

       this.element.appendChild(location);

     }

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

     this.element.clipboardText = this.element.textContent;

     if (this.private) {

       this.element.setAttribute("private", true);

     }

     if (this._afterMessage) {

       this.element._outputAfterNode = this._afterMessage.element;

       this._afterMessage = null;

     }

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

     // messages use the new API - bug 778766.

     this.element._objectActors = this._objectActors;

     this._objectActors = null;

     return this;

   },

   /**

    * Render the message body DOM element.

    * @private

    * @return Element

    */

   _renderBody: function()

   {

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

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

     let anchor, container = body;

     if (this._link || this._linkCallback) {

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

       anchor.href = this._link || "#";

       anchor.draggable = false;

       this._addLinkCallback(anchor, this._linkCallback);

       body.appendChild(anchor);

     }

     if (typeof this._message == "function") {

       container.appendChild(this._message(this));

     } else if (this._message instanceof Ci.nsIDOMNode) {

       container.appendChild(this._message);

     } else {

       container.textContent = this._message;

     }

     return body;

   },

   /**

    * Render the repeat bubble DOM element part of the message.

    * @private

    * @return Element

    */

   _renderRepeatNode: function()

   {

     if (!this._filterDuplicates) {

       return null;

     }

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

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

     repeatNode.className = "message-repeats";

     repeatNode.textContent = 1;

     repeatNode._uid = this.getRepeatID();

     return repeatNode;

   },

   /**

    * Render the message source location DOM element.

    * @private

    * @return Element

    */

   _renderLocation: function()

   {

     if (!this.location) {

       return null;

     }

     let {url, line} = this.location;

     if (IGNORED_SOURCE_URLS.indexOf(url) != -1) {

       return null;

     }

     // The ConsoleOutput owner is a WebConsoleFrame instance from webconsole.js.

     // TODO: move createLocationNode() into this file when bug 778766 is fixed.

     return this.output.owner.createLocationNode(url, line);

   },

 }); // Messages.Simple.prototype

 /**

  * The Extended message.

  *

  * @constructor

  * @extends Messages.Simple

  * @param array messagePieces

  *        The message to display given as an array of elements. Each array

  *        element can be a DOM node, function, ObjectActor, LongString or

  *        a string.

  * @param object [options]

  *        Options for rendering this message:

  *        - quoteStrings: boolean that tells if you want strings to be wrapped

  *        in quotes or not.

  */

 Messages.Extended = function(messagePieces, options = {})

 {

   Messages.Simple.call(this, null, options);

   this._messagePieces = messagePieces;

   if ("quoteStrings" in options) {

     this._quoteStrings = options.quoteStrings;

   }

   this._repeatID.quoteStrings = this._quoteStrings;

   this._repeatID.messagePieces = messagePieces + "";

   this._repeatID.actors = new Set(); // using a set to avoid duplicates

 };

 Messages.Extended.prototype = Heritage.extend(Messages.Simple.prototype,

 {

   /**

    * The message pieces displayed by this message instance.

    * @private

    * @type array

    */

   _messagePieces: null,

   /**

    * Boolean that tells if the strings displayed in this message are wrapped.

    * @private

    * @type boolean

    */

   _quoteStrings: true,

   getRepeatID: function()

   {

     if (this._repeatID.uid) {

       return JSON.stringify({ uid: this._repeatID.uid });

     }

     // Sets are not stringified correctly. Temporarily switching to an array.

     let actors = this._repeatID.actors;

     this._repeatID.actors = [...actors];

     let result = JSON.stringify(this._repeatID);

     this._repeatID.actors = actors;

     return result;

   },

   render: function()

   {

     let result = this.document.createDocumentFragment();

     for (let i = 0; i < this._messagePieces.length; i++) {

       let separator = i > 0 ? this._renderBodyPieceSeparator() : null;

       if (separator) {

         result.appendChild(separator);

       }

       let piece = this._messagePieces[i];

       result.appendChild(this._renderBodyPiece(piece));

     }

     this._message = result;

     this._messagePieces = null;

     return Messages.Simple.prototype.render.call(this);

   },

   /**

    * Render the separator between the pieces of the message.

    *

    * @private

    * @return Element

    */

   _renderBodyPieceSeparator: function() { return null; },

   /**

    * Render one piece/element of the message array.

    *

    * @private

    * @param mixed piece

    *        Message element to display - this can be a LongString, ObjectActor,

    *        DOM node or a function to invoke.

    * @return Element

    */

   _renderBodyPiece: function(piece)

   {

     if (piece instanceof Ci.nsIDOMNode) {

       return piece;

     }

     if (typeof piece == "function") {

       return piece(this);

     }

     return this._renderValueGrip(piece);

   },

   /**

    * Render a grip that represents a value received from the server. This method

    * picks the appropriate widget to render the value with.

    *

    * @private

    * @param object grip

    *        The value grip received from the server.

    * @param object options

    *        Options for displaying the value. Available options:

    *        - noStringQuotes - boolean that tells the renderer to not use quotes

    *        around strings.

    *        - concise - boolean that tells the renderer to compactly display the

    *        grip. This is typically set to true when the object needs to be

    *        displayed in an array preview, or as a property value in object

    *        previews, etc.

    * @return DOMElement

    *         The DOM element that displays the given grip.

    */

   _renderValueGrip: function(grip, options = {})

   {

     let isPrimitive = VariablesView.isPrimitive({ value: grip });

     let isActorGrip = WebConsoleUtils.isActorGrip(grip);

     let noStringQuotes = !this._quoteStrings;

     if ("noStringQuotes" in options) {

       noStringQuotes = options.noStringQuotes;

     }

     if (isActorGrip) {

       this._repeatID.actors.add(grip.actor);

       if (!isPrimitive) {

         return this._renderObjectActor(grip, options);

       }

       if (grip.type == "longString") {

         let widget = new Widgets.LongString(this, grip, options).render();

         return widget.element;

       }

     }

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

     if (isPrimitive) {

       let className = this.getClassNameForValueGrip(grip);

       if (className) {

         result.className = className;

       }

       result.textContent = VariablesView.getString(grip, {

         noStringQuotes: noStringQuotes,

         concise: options.concise,

       });

     } else {

       result.textContent = grip;

     }

     return result;

   },

   /**

    * Get a CodeMirror-compatible class name for a given value grip.

    *

    * @param object grip

    *        Value grip from the server.

    * @return string

    *         The class name for the grip.

    */

   getClassNameForValueGrip: function(grip)

   {

     let map = {

       "number": "cm-number",

       "longstring": "console-string",

       "string": "console-string",

       "regexp": "cm-string-2",

       "boolean": "cm-atom",

       "-infinity": "cm-atom",

       "infinity": "cm-atom",

       "null": "cm-atom",

       "undefined": "cm-comment",

     };

     let className = map[typeof grip];

     if (!className && grip && grip.type) {

       className = map[grip.type.toLowerCase()];

     }

     if (!className && grip && grip.class) {

       className = map[grip.class.toLowerCase()];

     }

     return className;

   },

   /**

    * Display an object actor with the appropriate renderer.

    *

    * @private

    * @param object objectActor

    *        The ObjectActor to display.

    * @param object options

    *        Options to use for displaying the ObjectActor.

    * @see this._renderValueGrip for the available options.

    * @return DOMElement

    *         The DOM element that displays the object actor.

    */

   _renderObjectActor: function(objectActor, options = {})

   {

     let widget = null;

     let {preview} = objectActor;

     if (preview && preview.kind) {

       widget = Widgets.ObjectRenderers.byKind[preview.kind];

     }

     if (!widget || (widget.canRender && !widget.canRender(objectActor))) {

       widget = Widgets.ObjectRenderers.byClass[objectActor.class];

     }

     if (!widget || (widget.canRender && !widget.canRender(objectActor))) {

       widget = Widgets.JSObject;

     }

     let instance = new widget(this, objectActor, options).render();

     return instance.element;

   },

 }); // Messages.Extended.prototype

 /**

  * The JavaScriptEvalOutput message.

  *

  * @constructor

  * @extends Messages.Extended

  * @param object evalResponse

  *        The evaluation response packet received from the server.

  * @param string [errorMessage]

  *        Optional error message to display.

  */

 Messages.JavaScriptEvalOutput = function(evalResponse, errorMessage)

 {

   let severity = "log", msg, quoteStrings = true;

   if (errorMessage) {

     severity = "error";

     msg = errorMessage;

     quoteStrings = false;

   } else {

     msg = evalResponse.result;

   }

   let options = {

     className: "cm-s-mozilla",

     timestamp: evalResponse.timestamp,

     category: "output",

     severity: severity,

     quoteStrings: quoteStrings,

   };

   Messages.Extended.call(this, [msg], options);

 };

 Messages.JavaScriptEvalOutput.prototype = Messages.Extended.prototype;

 /**

  * The ConsoleGeneric message is used for console API calls.

  *

  * @constructor

  * @extends Messages.Extended

  * @param object packet

  *        The Console API call packet received from the server.

  */

 Messages.ConsoleGeneric = function(packet)

 {

   let options = {

     className: "cm-s-mozilla",

     timestamp: packet.timeStamp,

     category: "webdev",

     severity: CONSOLE_API_LEVELS_TO_SEVERITIES[packet.level],

     private: packet.private,

     filterDuplicates: true,

     location: {

       url: packet.filename,

       line: packet.lineNumber,

     },

   };

   switch (packet.level) {

     case "count": {

       let counter = packet.counter, label = counter.label;

       if (!label) {

         label = l10n.getStr("noCounterLabel");

       }

       Messages.Extended.call(this, [label+ ": " + counter.count], options);

       break;

     }

     default:

       Messages.Extended.call(this, packet.arguments, options);

       break;

   }

   this._repeatID.consoleApiLevel = packet.level;

   this._repeatID.styles = packet.styles;

   this._stacktrace = this._repeatID.stacktrace = packet.stacktrace;

   this._styles = packet.styles || [];

   this._onClickCollapsible = this._onClickCollapsible.bind(this);

 };

 Messages.ConsoleGeneric.prototype = Heritage.extend(Messages.Extended.prototype,

 {

   _styles: null,

   _stacktrace: null,

   /**

    * Tells if the message can be expanded/collapsed.

    * @type boolean

    */

   collapsible: false,

   /**

    * Getter that tells if this message is collapsed - no details are shown.

    * @type boolean

    */

   get collapsed() {

     return this.collapsible && this.element && !this.element.hasAttribute("open");

   },

   _renderBodyPieceSeparator: function()

   {

     return this.document.createTextNode(" ");

   },

   render: function()

   {

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

     msg.className = "message-body devtools-monospace";

     this._renderBodyPieces(msg);

     let repeatNode = Messages.Simple.prototype._renderRepeatNode.call(this);

     let location = Messages.Simple.prototype._renderLocation.call(this);

     if (location) {

       location.target = "jsdebugger";

     }

     let stack = null;

     let twisty = null;

     if (this._stacktrace && this._stacktrace.length > 0) {

       stack = new Widgets.Stacktrace(this, this._stacktrace).render().element;

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

       twisty.className = "theme-twisty";

       twisty.href = "#";

       twisty.title = l10n.getStr("messageToggleDetails");

       twisty.addEventListener("click", this._onClickCollapsible);

     }

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

     flex.className = "message-flex-body";

     if (twisty) {

       flex.appendChild(twisty);

     }

     flex.appendChild(msg);

     if (repeatNode) {

       flex.appendChild(repeatNode);

     }

     if (location) {

       flex.appendChild(location);

     }

     let result = this.document.createDocumentFragment();

     result.appendChild(flex);

     if (stack) {

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

       result.appendChild(stack);

     }

     this._message = result;

     this._stacktrace = null;

     Messages.Simple.prototype.render.call(this);

     if (stack) {

       this.collapsible = true;

       this.element.setAttribute("collapsible", true);

       let icon = this.element.querySelector(".icon");

       icon.addEventListener("click", this._onClickCollapsible);

     }

     return this;

   },

   _renderBody: function()

   {

     let body = Messages.Simple.prototype._renderBody.apply(this, arguments);

     body.classList.remove("devtools-monospace", "message-body");

     return body;

   },

   _renderBodyPieces: function(container)

   {

     let lastStyle = null;

     for (let i = 0; i < this._messagePieces.length; i++) {

       let separator = i > 0 ? this._renderBodyPieceSeparator() : null;

       if (separator) {

         container.appendChild(separator);

       }

       let piece = this._messagePieces[i];

       let style = this._styles[i];

       // No long string support.

       if (style && typeof style == "string" ) {

         lastStyle = this.cleanupStyle(style);

       }

       container.appendChild(this._renderBodyPiece(piece, lastStyle));

     }

     this._messagePieces = null;

     this._styles = null;

   },

   _renderBodyPiece: function(piece, style)

   {

     let elem = Messages.Extended.prototype._renderBodyPiece.call(this, piece);

     let result = elem;

     if (style) {

       if (elem.nodeType == Ci.nsIDOMNode.ELEMENT_NODE) {

         elem.style = style;

       } else {

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

         span.style = style;

         span.appendChild(elem);

         result = span;

       }

     }

     return result;

   },

   // no-op for the message location and .repeats elements.

   // |this.render()| handles customized message output.

   _renderLocation: function() { },

   _renderRepeatNode: function() { },

   /**

    * Expand/collapse message details.

    */

   toggleDetails: function()

   {

     let twisty = this.element.querySelector(".theme-twisty");

     if (this.element.hasAttribute("open")) {

       this.element.removeAttribute("open");

       twisty.removeAttribute("open");

     } else {

       this.element.setAttribute("open", true);

       twisty.setAttribute("open", true);

     }

   },

   /**

    * The click event handler for the message expander arrow element. This method

    * toggles the display of message details.

    *

    * @private

    * @param nsIDOMEvent ev

    *        The DOM event object.

    * @see this.toggleDetails()

    */

   _onClickCollapsible: function(ev)

   {

     ev.preventDefault();

     this.toggleDetails();

   },

   /**

    * Given a style attribute value, return a cleaned up version of the string

    * such that:

    *

    * - no external URL is allowed to load. See RE_CLEANUP_STYLES.

    * - only some of the properties are allowed, based on a whitelist. See

    *   RE_ALLOWED_STYLES.

    *

    * @param string style

    *        The style string to cleanup.

    * @return string

    *         The style value after cleanup.

    */

   cleanupStyle: function(style)

   {

     for (let r of RE_CLEANUP_STYLES) {

       style = style.replace(r, "notallowed");

     }

     let dummy = this.output._dummyElement;

     if (!dummy) {

       dummy = this.output._dummyElement =

         this.document.createElementNS(XHTML_NS, "div");

     }

     dummy.style = style;

     let toRemove = [];

     for (let i = 0; i < dummy.style.length; i++) {

       let prop = dummy.style[i];

       if (!RE_ALLOWED_STYLES.test(prop)) {

         toRemove.push(prop);

       }

     }

     for (let prop of toRemove) {

       dummy.style.removeProperty(prop);

     }

     style = dummy.style.cssText;

     dummy.style = "";

     return style;

   },

 }); // Messages.ConsoleGeneric.prototype

 /**

  * The ConsoleTrace message is used for console.trace() calls.

  *

  * @constructor

  * @extends Messages.Simple

  * @param object packet

  *        The Console API call packet received from the server.

  */

 Messages.ConsoleTrace = function(packet)

 {

   let options = {

     className: "cm-s-mozilla",

     timestamp: packet.timeStamp,

     category: "webdev",

     severity: CONSOLE_API_LEVELS_TO_SEVERITIES[packet.level],

     private: packet.private,

     filterDuplicates: true,

     location: {

       url: packet.filename,

       line: packet.lineNumber,

     },

   };

   this._renderStack = this._renderStack.bind(this);

   Messages.Simple.call(this, this._renderStack, options);

   this._repeatID.consoleApiLevel = packet.level;

   this._stacktrace = this._repeatID.stacktrace = packet.stacktrace;

   this._arguments = packet.arguments;

 };

 Messages.ConsoleTrace.prototype = Heritage.extend(Messages.Simple.prototype,

 {

   /**

    * Holds the stackframes received from the server.

    *

    * @private

    * @type array

    */

   _stacktrace: null,

   /**

    * Holds the arguments the content script passed to the console.trace()

    * method. This array is cleared when the message is initialized, and

    * associated actors are released.

    *

    * @private

    * @type array

    */

   _arguments: null,

   init: function()

   {

     let result = Messages.Simple.prototype.init.apply(this, arguments);

     // We ignore console.trace() arguments. Release object actors.

     if (Array.isArray(this._arguments)) {

       for (let arg of this._arguments) {

         if (WebConsoleUtils.isActorGrip(arg)) {

           this.output._releaseObject(arg.actor);

         }

       }

     }

     this._arguments = null;

     return result;

   },

   render: function()

   {

     Messages.Simple.prototype.render.apply(this, arguments);

     this.element.setAttribute("open", true);

     return this;

   },

   /**

    * Render the stack frames.

    *

    * @private

    * @return DOMElement

    */

   _renderStack: function()

   {

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

     cmvar.className = "cm-variable";

     cmvar.textContent = "console";

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

     cmprop.className = "cm-property";

     cmprop.textContent = "trace";

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

     title.className = "message-body devtools-monospace";

     title.appendChild(cmvar);

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

     title.appendChild(cmprop);

     title.appendChild(this.document.createTextNode("():"));

     let repeatNode = Messages.Simple.prototype._renderRepeatNode.call(this);

     let location = Messages.Simple.prototype._renderLocation.call(this);

     if (location) {

       location.target = "jsdebugger";

     }

     let widget = new Widgets.Stacktrace(this, this._stacktrace).render();

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

     body.className = "message-flex-body";

     body.appendChild(title);

     if (repeatNode) {

       body.appendChild(repeatNode);

     }

     if (location) {

       body.appendChild(location);

     }

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

     let frag = this.document.createDocumentFragment();

     frag.appendChild(body);

     frag.appendChild(widget.element);

     return frag;

   },

   _renderBody: function()

   {

     let body = Messages.Simple.prototype._renderBody.apply(this, arguments);

     body.classList.remove("devtools-monospace", "message-body");

     return body;

   },

   // no-op for the message location and .repeats elements.

   // |this._renderStack| handles customized message output.

   _renderLocation: function() { },

   _renderRepeatNode: function() { },

 }); // Messages.ConsoleTrace.prototype

 let Widgets = {};

 /**

  * The base widget class.

  *

  * @constructor

  * @param object message

  *        The owning message.

  */

 Widgets.BaseWidget = function(message)

 {

   this.message = message;

 };

 Widgets.BaseWidget.prototype = {

   /**

    * The owning message object.

    * @type object

    */

   message: null,

   /**

    * The DOM element of the rendered widget.

    * @type Element

    */

   element: null,

   /**

    * Getter for the DOM document that holds the output.

    * @type Document

    */

   get document() {

     return this.message.document;

   },

   /**

    * The ConsoleOutput instance that owns this widget instance.

    */

   get output() {

     return this.message.output;

   },

   /**

    * Render the widget DOM element.

    * @return this

    */

   render: function() { },

   /**

    * Destroy this widget instance.

    */

   destroy: function() { },

   /**

    * Helper for creating DOM elements for widgets.

    *

    * Usage:

    *   this.el("tag#id.class.names"); // create element "tag" with ID "id" and

    *   two class names, .class and .names.

    *

    *   this.el("span", { attr1: "value1", ... }) // second argument can be an

    *   object that holds element attributes and values for the new DOM element.

    *

    *   this.el("p", { attr1: "value1", ... }, "text content"); // the third

    *   argument can include the default .textContent of the new DOM element.

    *

    *   this.el("p", "text content"); // if the second argument is not an object,

    *   it will be used as .textContent for the new DOM element.

    *

    * @param string tagNameIdAndClasses

    *        Tag name for the new element, optionally followed by an ID and/or

    *        class names. Examples: "span", "div#fooId", "div.class.names",

    *        "p#id.class".

    * @param string|object [attributesOrTextContent]

    *        If this argument is an object it will be used to set the attributes

    *        of the new DOM element. Otherwise, the value becomes the

    *        .textContent of the new DOM element.

    * @param string [textContent]

    *        If this argument is provided the value is used as the textContent of

    *        the new DOM element.

    * @return DOMElement

    *         The new DOM element.

    */

   el: function(tagNameIdAndClasses)

   {

     let attrs, text;

     if (typeof arguments[1] == "object") {

       attrs = arguments[1];

       text = arguments[2];

     } else {

       text = arguments[1];

     }

     let tagName = tagNameIdAndClasses.split(/#|\./)[0];

     let elem = this.document.createElementNS(XHTML_NS, tagName);

     for (let name of Object.keys(attrs || {})) {

       elem.setAttribute(name, attrs[name]);

     }

     if (text !== undefined && text !== null) {

       elem.textContent = text;

     }

     let idAndClasses = tagNameIdAndClasses.match(/([#.][^#.]+)/g);

     for (let idOrClass of (idAndClasses || [])) {

       if (idOrClass.charAt(0) == "#") {

         elem.id = idOrClass.substr(1);

       } else {

         elem.classList.add(idOrClass.substr(1));

       }

     }

     return elem;

   },

 };

 /**

  * The timestamp widget.

  *

  * @constructor

  * @param object message

  *        The owning message.

  * @param number timestamp

  *        The UNIX timestamp to display.

  */

 Widgets.MessageTimestamp = function(message, timestamp)

 {

   Widgets.BaseWidget.call(this, message);

   this.timestamp = timestamp;

 };

 Widgets.MessageTimestamp.prototype = Heritage.extend(Widgets.BaseWidget.prototype,

 {

   /**

    * The UNIX timestamp.

    * @type number

    */

   timestamp: 0,

   render: function()

   {

     if (this.element) {

       return this;

     }

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

     this.element.className = "timestamp devtools-monospace";

     this.element.textContent = l10n.timestampString(this.timestamp) + " ";

     return this;

   },

 }); // Widgets.MessageTimestamp.prototype

 /**

  * Widget used for displaying ObjectActors that have no specialised renderers.

  *

  * @constructor

  * @param object message

  *        The owning message.

  * @param object objectActor

  *        The ObjectActor to display.

  * @param object [options]

  *        Options for displaying the given ObjectActor. See

  *        Messages.Extended.prototype._renderValueGrip for the available

  *        options.

  */

 Widgets.JSObject = function(message, objectActor, options = {})

 {

   Widgets.BaseWidget.call(this, message);

   this.objectActor = objectActor;

   this.options = options;

   this._onClick = this._onClick.bind(this);

 };

 Widgets.JSObject.prototype = Heritage.extend(Widgets.BaseWidget.prototype,

 {

   /**

    * The ObjectActor displayed by the widget.

    * @type object

    */

   objectActor: null,

   render: function()

   {

     if (!this.element) {

       this._render();

     }

     return this;

   },

   _render: function()

   {

     let str = VariablesView.getString(this.objectActor, this.options);

     let className = this.message.getClassNameForValueGrip(this.objectActor);

     if (!className && this.objectActor.class == "Object") {

       className = "cm-variable";

     }

     this.element = this._anchor(str, { className: className });

   },

   /**

    * Render an anchor with a given text content and link.

    *

    * @private

    * @param string text

    *        Text to show in the anchor.

    * @param object [options]

    *        Available options:

    *        - onClick (function): "click" event handler.By default a click on

    *        the anchor opens the variables view for the current object actor

    *        (this.objectActor).

    *        - href (string): if given the string is used as a link, and clicks

    *        on the anchor open the link in a new tab.

    *        - appendTo (DOMElement): append the element to the given DOM

    *        element. If not provided, the anchor is appended to |this.element|

    *        if it is available. If |appendTo| is provided and if it is a falsy

    *        value, the anchor is not appended to any element.

    * @return DOMElement

    *         The DOM element of the new anchor.

    */

   _anchor: function(text, options = {})

   {

     if (!options.onClick && !options.href) {

       options.onClick = this._onClick;

     }

     let anchor = this.el("a", {

       class: options.className,

       draggable: false,

       href: options.href || "#",

     }, text);

     this.message._addLinkCallback(anchor, !options.href ? options.onClick : null);

     if (options.appendTo) {

       options.appendTo.appendChild(anchor);

     } else if (!("appendTo" in options) && this.element) {

       this.element.appendChild(anchor);

     }

     return anchor;

   },

   /**

    * The click event handler for objects shown inline.

    * @private

    */

   _onClick: function()

   {

     this.output.openVariablesView({

       label: VariablesView.getString(this.objectActor, { concise: true }),

       objectActor: this.objectActor,

       autofocus: true,

     });

   },

   /**

    * Add a string to the message.

    *

    * @private

    * @param string str

    *        String to add.

    * @param DOMElement [target = this.element]

    *        Optional DOM element to append the string to. The default is

    *        this.element.

    */

   _text: function(str, target = this.element)

   {

     target.appendChild(this.document.createTextNode(str));

   },

 }); // Widgets.JSObject.prototype

 Widgets.ObjectRenderers = {};

 Widgets.ObjectRenderers.byKind = {};

 Widgets.ObjectRenderers.byClass = {};

 /**

  * Add an object renderer.

  *

  * @param object obj

  *        An object that represents the renderer. Properties:

  *        - byClass (string, optional): this renderer will be used for the given

  *        object class.

  *        - byKind (string, optional): this renderer will be used for the given

  *        object kind.

  *        One of byClass or byKind must be provided.

  *        - extends (object, optional): the renderer object extends the given

  *        object. Default: Widgets.JSObject.

  *        - canRender (function, optional): this method is invoked when

  *        a candidate object needs to be displayed. The method is invoked as

  *        a static method, as such, none of the properties of the renderer

  *        object will be available. You get one argument: the object actor grip

  *        received from the server. If the method returns true, then this

  *        renderer is used for displaying the object, otherwise not.

  *        - initialize (function, optional): the constructor of the renderer

  *        widget. This function is invoked with the following arguments: the

  *        owner message object instance, the object actor grip to display, and

  *        an options object. See Messages.Extended.prototype._renderValueGrip()

  *        for details about the options object.

  *        - render (function, required): the method that displays the given

  *        object actor.

  */

 Widgets.ObjectRenderers.add = function(obj)

 {

   let extendObj = obj.extends || Widgets.JSObject;

   let constructor = function() {

     if (obj.initialize) {

       obj.initialize.apply(this, arguments);

     } else {

       extendObj.apply(this, arguments);

     }

   };

   let proto = WebConsoleUtils.cloneObject(obj, false, function(key) {

     if (key == "initialize" || key == "canRender" ||

         (key == "render" && extendObj === Widgets.JSObject)) {

       return false;

     }

     return true;

   });

   if (extendObj === Widgets.JSObject) {

     proto._render = obj.render;

   }

   constructor.canRender = obj.canRender;

   constructor.prototype = Heritage.extend(extendObj.prototype, proto);

   if (obj.byClass) {

     Widgets.ObjectRenderers.byClass[obj.byClass] = constructor;

   } else if (obj.byKind) {

     Widgets.ObjectRenderers.byKind[obj.byKind] = constructor;

   } else {

     throw new Error("You are adding an object renderer without any byClass or " +

                     "byKind property.");

   }

 };

 /**

  * The widget used for displaying Date objects.

  */

 Widgets.ObjectRenderers.add({

   byClass: "Date",

   render: function()

   {

     let {preview} = this.objectActor;

     this.element = this.el("span.class-" + this.objectActor.class);

     let anchorText = this.objectActor.class;

     let anchorClass = "cm-variable";

     if ("timestamp" in preview && typeof preview.timestamp != "number") {

       anchorText = new Date(preview.timestamp).toString(); // invalid date

       anchorClass = "";

     }

     this._anchor(anchorText, { className: anchorClass });

     if (!("timestamp" in preview) || typeof preview.timestamp != "number") {

       return;

     }

     this._text(" ");

     let elem = this.el("span.cm-string-2", new Date(preview.timestamp).toISOString());

     this.element.appendChild(elem);

   },

 });

 /**

  * The widget used for displaying Function objects.

  */

 Widgets.ObjectRenderers.add({

   byClass: "Function",

   render: function()

   {

     let grip = this.objectActor;

     this.element = this.el("span.class-" + this.objectActor.class);

     // TODO: Bug 948484 - support arrow functions and ES6 generators

     let name = grip.userDisplayName || grip.displayName || grip.name || "";

     name = VariablesView.getString(name, { noStringQuotes: true });

     let str = this.options.concise ? name || "function " : "function " + name;

     if (this.options.concise) {

       this._anchor(name || "function", {

         className: name ? "cm-variable" : "cm-keyword",

       });

       if (!name) {

         this._text(" ");

       }

     } else if (name) {

       this.element.appendChild(this.el("span.cm-keyword", "function"));

       this._text(" ");

       this._anchor(name, { className: "cm-variable" });

     } else {

       this._anchor("function", { className: "cm-keyword" });

       this._text(" ");

     }

     this._text("(");

     // TODO: Bug 948489 - Support functions with destructured parameters and

     // rest parameters

     let params = grip.parameterNames || [];

     let shown = 0;

     for (let param of params) {

       if (shown > 0) {

         this._text(", ");

       }

       this.element.appendChild(this.el("span.cm-def", param));

       shown++;

     }

     this._text(")");

   },

 }); // Widgets.ObjectRenderers.byClass.Function

 /**

  * The widget used for displaying ArrayLike objects.

  */

 Widgets.ObjectRenderers.add({

   byKind: "ArrayLike",

   render: function()

   {

     let {preview} = this.objectActor;

     let {items} = preview;

     this.element = this.el("span.kind-" + preview.kind);

     this._anchor(this.objectActor.class, { className: "cm-variable" });

     if (!items || this.options.concise) {

       this._text("[");

       this.element.appendChild(this.el("span.cm-number", preview.length));

       this._text("]");

       return this;

     }

     this._text(" [ ");

     let shown = 0;

     for (let item of items) {

       if (shown > 0) {

         this._text(", ");

       }

       if (item !== null) {

         let elem = this.message._renderValueGrip(item, { concise: true });

         this.element.appendChild(elem);

       } else if (shown == (items.length - 1)) {

         this._text(", ");

       }

       shown++;

     }

     if (shown < preview.length) {

       this._text(", ");

       let n = preview.length - shown;

       let str = VariablesView.stringifiers._getNMoreString(n);

       this._anchor(str);

     }

     this._text(" ]");

   },

 }); // Widgets.ObjectRenderers.byKind.ArrayLike

 /**

  * The widget used for displaying MapLike objects.

  */

 Widgets.ObjectRenderers.add({

   byKind: "MapLike",

   render: function()

   {

     let {preview} = this.objectActor;

     let {entries} = preview;

     let container = this.element = this.el("span.kind-" + preview.kind);

     this._anchor(this.objectActor.class, { className: "cm-variable" });

     if (!entries || this.options.concise) {

       if (typeof preview.size == "number") {

         this._text("[");

         container.appendChild(this.el("span.cm-number", preview.size));

         this._text("]");

       }

       return;

     }

     this._text(" { ");

     let shown = 0;

     for (let [key, value] of entries) {

       if (shown > 0) {

         this._text(", ");

       }

       let keyElem = this.message._renderValueGrip(key, {

         concise: true,

         noStringQuotes: true,

       });

       // Strings are property names.

       if (keyElem.classList && keyElem.classList.contains("console-string")) {

         keyElem.classList.remove("console-string");

         keyElem.classList.add("cm-property");

       }

       container.appendChild(keyElem);

       this._text(": ");

       let valueElem = this.message._renderValueGrip(value, { concise: true });

       container.appendChild(valueElem);

       shown++;

     }

     if (typeof preview.size == "number" && shown < preview.size) {

       this._text(", ");

       let n = preview.size - shown;

       let str = VariablesView.stringifiers._getNMoreString(n);

       this._anchor(str);

     }

     this._text(" }");

   },

 }); // Widgets.ObjectRenderers.byKind.MapLike

 /**

  * The widget used for displaying objects with a URL.

  */

 Widgets.ObjectRenderers.add({

   byKind: "ObjectWithURL",

   render: function()

   {

     this.element = this._renderElement(this.objectActor,

                                        this.objectActor.preview.url);

   },

   _renderElement: function(objectActor, url)

   {

     let container = this.el("span.kind-" + objectActor.preview.kind);

     this._anchor(objectActor.class, {

       className: "cm-variable",

       appendTo: container,

     });

     if (!VariablesView.isFalsy({ value: url })) {

       this._text(" \u2192 ", container);

       let shortUrl = WebConsoleUtils.abbreviateSourceURL(url, {

         onlyCropQuery: !this.options.concise

       });

       this._anchor(shortUrl, { href: url, appendTo: container });

     }

     return container;

   },

 }); // Widgets.ObjectRenderers.byKind.ObjectWithURL

 /**

  * The widget used for displaying objects with a string next to them.

  */

 Widgets.ObjectRenderers.add({

   byKind: "ObjectWithText",

   render: function()

   {

     let {preview} = this.objectActor;

     this.element = this.el("span.kind-" + preview.kind);

     this._anchor(this.objectActor.class, { className: "cm-variable" });

     if (!this.options.concise) {

       this._text(" ");

       this.element.appendChild(this.el("span.console-string",

                                        VariablesView.getString(preview.text)));

     }

   },

 });

 /**

  * The widget used for displaying DOM event previews.

  */

 Widgets.ObjectRenderers.add({

   byKind: "DOMEvent",

   render: function()

   {

     let {preview} = this.objectActor;

     let container = this.element = this.el("span.kind-" + preview.kind);

     this._anchor(preview.type || this.objectActor.class,

                  { className: "cm-variable" });

     if (this.options.concise) {

       return;

     }

     if (preview.eventKind == "key" && preview.modifiers &&

         preview.modifiers.length) {

       this._text(" ");

       let mods = 0;

       for (let mod of preview.modifiers) {

         if (mods > 0) {

           this._text("-");

         }

         container.appendChild(this.el("span.cm-keyword", mod));

         mods++;

       }

     }

     this._text(" { ");

     let shown = 0;

     if (preview.target) {

       container.appendChild(this.el("span.cm-property", "target"));

       this._text(": ");

       let target = this.message._renderValueGrip(preview.target, { concise: true });

       container.appendChild(target);

       shown++;

     }

     for (let key of Object.keys(preview.properties || {})) {

       if (shown > 0) {

         this._text(", ");

       }

       container.appendChild(this.el("span.cm-property", key));

       this._text(": ");

       let value = preview.properties[key];

       let valueElem = this.message._renderValueGrip(value, { concise: true });

       container.appendChild(valueElem);

       shown++;

     }

     this._text(" }");

   },

 }); // Widgets.ObjectRenderers.byKind.DOMEvent

 /**

  * The widget used for displaying DOM node previews.

  */

 Widgets.ObjectRenderers.add({

   byKind: "DOMNode",

   canRender: function(objectActor) {

     let {preview} = objectActor;

     if (!preview) {

       return false;

     }

     switch (preview.nodeType) {

       case Ci.nsIDOMNode.DOCUMENT_NODE:

       case Ci.nsIDOMNode.ATTRIBUTE_NODE:

       case Ci.nsIDOMNode.TEXT_NODE:

       case Ci.nsIDOMNode.COMMENT_NODE:

       case Ci.nsIDOMNode.DOCUMENT_FRAGMENT_NODE:

       case Ci.nsIDOMNode.ELEMENT_NODE:

         return true;

       default:

         return false;

     }

   },

   render: function()

   {

     switch (this.objectActor.preview.nodeType) {

       case Ci.nsIDOMNode.DOCUMENT_NODE:

         this._renderDocumentNode();

         break;

       case Ci.nsIDOMNode.ATTRIBUTE_NODE: {

         let {preview} = this.objectActor;

         this.element = this.el("span.attributeNode.kind-" + preview.kind);

         let attr = this._renderAttributeNode(preview.nodeName, preview.value, true);

         this.element.appendChild(attr);

         break;

       }

       case Ci.nsIDOMNode.TEXT_NODE:

         this._renderTextNode();

         break;

       case Ci.nsIDOMNode.COMMENT_NODE:

         this._renderCommentNode();

         break;

       case Ci.nsIDOMNode.DOCUMENT_FRAGMENT_NODE:

         this._renderDocumentFragmentNode();

         break;

       case Ci.nsIDOMNode.ELEMENT_NODE:

         this._renderElementNode();

         break;

       default:

         throw new Error("Unsupported nodeType: " + preview.nodeType);

     }

   },

   _renderDocumentNode: function()

   {

     let fn = Widgets.ObjectRenderers.byKind.ObjectWithURL.prototype._renderElement;

     this.element = fn.call(this, this.objectActor,

                            this.objectActor.preview.location);

     this.element.classList.add("documentNode");

   },

   _renderAttributeNode: function(nodeName, nodeValue, addLink)

   {

     let value = VariablesView.getString(nodeValue, { noStringQuotes: true });

     let fragment = this.document.createDocumentFragment();

     if (addLink) {

       this._anchor(nodeName, { className: "cm-attribute", appendTo: fragment });

     } else {

       fragment.appendChild(this.el("span.cm-attribute", nodeName));

     }

     this._text("=", fragment);

     fragment.appendChild(this.el("span.console-string",

                                  '"' + escapeHTML(value) + '"'));

     return fragment;

   },

   _renderTextNode: function()

   {

     let {preview} = this.objectActor;

     this.element = this.el("span.textNode.kind-" + preview.kind);

     this._anchor(preview.nodeName, { className: "cm-variable" });

     this._text(" ");

     let text = VariablesView.getString(preview.textContent);

     this.element.appendChild(this.el("span.console-string", text));

   },

   _renderCommentNode: function()

   {

     let {preview} = this.objectActor;

     let comment = "<!-- " + VariablesView.getString(preview.textContent, {

       noStringQuotes: true,

     }) + " -->";

     this.element = this._anchor(comment, {

       className: "kind-" + preview.kind + " commentNode cm-comment",

     });

   },

   _renderDocumentFragmentNode: function()

   {

     let {preview} = this.objectActor;

     let {childNodes} = preview;

     let container = this.element = this.el("span.documentFragmentNode.kind-" +

                                            preview.kind);

     this._anchor(this.objectActor.class, { className: "cm-variable" });

     if (!childNodes || this.options.concise) {

       this._text("[");

       container.appendChild(this.el("span.cm-number", preview.childNodesLength));

       this._text("]");

       return;

     }

     this._text(" [ ");

     let shown = 0;

     for (let item of childNodes) {

       if (shown > 0) {

         this._text(", ");

       }

       let elem = this.message._renderValueGrip(item, { concise: true });

       container.appendChild(elem);

       shown++;

     }

     if (shown < preview.childNodesLength) {

       this._text(", ");

       let n = preview.childNodesLength - shown;

       let str = VariablesView.stringifiers._getNMoreString(n);

       this._anchor(str);

     }

     this._text(" ]");

   },

   _renderElementNode: function()

   {

     let doc = this.document;

     let {attributes, nodeName} = this.objectActor.preview;

     this.element = this.el("span." + "kind-" + this.objectActor.preview.kind + ".elementNode");

     let openTag = this.el("span.cm-tag");

     openTag.textContent = "<";

     this.element.appendChild(openTag);

     let tagName = this._anchor(nodeName, {

       className: "cm-tag",

       appendTo: openTag

     });

     if (this.options.concise) {

       if (attributes.id) {

         tagName.appendChild(this.el("span.cm-attribute", "#" + attributes.id));

       }

       if (attributes.class) {

         tagName.appendChild(this.el("span.cm-attribute", "." + attributes.class.split(/\s+/g).join(".")));

       }

     } else {

       for (let name of Object.keys(attributes)) {

         let attr = this._renderAttributeNode(" " + name, attributes[name]);

         this.element.appendChild(attr);

       }

     }

     let closeTag = this.el("span.cm-tag");

     closeTag.textContent = ">";

     this.element.appendChild(closeTag);

     // Register this widget in the owner message so that it gets destroyed when

     // the message is destroyed.

     this.message.widgets.add(this);

     this.linkToInspector();

   },

   /**

    * If the DOMNode being rendered can be highlit in the page, this function

    * will attach mouseover/out event listeners to do so, and the inspector icon

    * to open the node in the inspector.

    * @return a promise (always the same) that resolves when the node has been

    * linked to the inspector, or rejects if it wasn't (either if no toolbox

    * could be found to access the inspector, or if the node isn't present in the

    * inspector, i.e. if the node is in a DocumentFragment or not part of the

    * tree, or not of type Ci.nsIDOMNode.ELEMENT_NODE).

    */

   linkToInspector: function()

   {

     if (this._linkedToInspector) {

       return this._linkedToInspector;

     }

     this._linkedToInspector = Task.spawn(function*() {

       // Checking the node type

       if (this.objectActor.preview.nodeType !== Ci.nsIDOMNode.ELEMENT_NODE) {

         throw null;

       }

       // Checking the presence of a toolbox

       let target = this.message.output.toolboxTarget;

       this.toolbox = gDevTools.getToolbox(target);

       if (!this.toolbox) {

         throw null;

       }

       // Checking that the inspector supports the node

       yield this.toolbox.initInspector();

       this._nodeFront = yield this.toolbox.walker.getNodeActorFromObjectActor(this.objectActor.actor);

       if (!this._nodeFront) {

         throw null;

       }

       // At this stage, the message may have been cleared already

       if (!this.document) {

         throw null;

       }

       this.highlightDomNode = this.highlightDomNode.bind(this);

       this.element.addEventListener("mouseover", this.highlightDomNode, false);

       this.unhighlightDomNode = this.unhighlightDomNode.bind(this);

       this.element.addEventListener("mouseout", this.unhighlightDomNode, false);

       this._openInspectorNode = this._anchor("", {

         className: "open-inspector",

         onClick: this.openNodeInInspector.bind(this)

       });

       this._openInspectorNode.title = l10n.getStr("openNodeInInspector");

     }.bind(this));

     return this._linkedToInspector;

   },

   /**

    * Highlight the DOMNode corresponding to the ObjectActor in the page.

    * @return a promise that resolves when the node has been highlighted, or

    * rejects if the node cannot be highlighted (detached from the DOM)

    */

   highlightDomNode: function()

   {

     return Task.spawn(function*() {

       yield this.linkToInspector();

       let isAttached = yield this.toolbox.walker.isInDOMTree(this._nodeFront);

       if (isAttached) {

         yield this.toolbox.highlighterUtils.highlightNodeFront(this._nodeFront);

       } else {

         throw null;

       }

     }.bind(this));

   },

   /**

    * Unhighlight a previously highlit node

    * @see highlightDomNode

    * @return a promise that resolves when the highlighter has been hidden

    */

   unhighlightDomNode: function()

   {

     return this.linkToInspector().then(() => {

       return this.toolbox.highlighterUtils.unhighlight();

     });

   },

   /**

    * Open the DOMNode corresponding to the ObjectActor in the inspector panel

    * @return a promise that resolves when the inspector has been switched to

    * and the node has been selected, or rejects if the node cannot be selected

    * (detached from the DOM). Note that in any case, the inspector panel will

    * be switched to.

    */

   openNodeInInspector: function()

   {

     return Task.spawn(function*() {

       yield this.linkToInspector();

       yield this.toolbox.selectTool("inspector");

       let isAttached = yield this.toolbox.walker.isInDOMTree(this._nodeFront);

       if (isAttached) {

         let onReady = this.toolbox.inspector.once("inspector-updated");

         yield this.toolbox.selection.setNodeFront(this._nodeFront, "console");

         yield onReady;

       } else {

         throw null;

       }

     }.bind(this));

   },

   destroy: function()

   {

     if (this.toolbox && this._nodeFront) {

       this.element.removeEventListener("mouseover", this.highlightDomNode, false);

       this.element.removeEventListener("mouseout", this.unhighlightDomNode, false);

       this._openInspectorNode.removeEventListener("mousedown", this.openNodeInInspector, true);

       this.toolbox = null;

       this._nodeFront = null;

     }

   },

 }); // Widgets.ObjectRenderers.byKind.DOMNode

 /**

  * The widget used for displaying generic JS object previews.

  */

 Widgets.ObjectRenderers.add({

   byKind: "Object",

   render: function()

   {

     let {preview} = this.objectActor;

     let {ownProperties, safeGetterValues} = preview;

     if ((!ownProperties && !safeGetterValues) || this.options.concise) {

       this.element = this._anchor(this.objectActor.class,

                                   { className: "cm-variable" });

       return;

     }

     let container = this.element = this.el("span.kind-" + preview.kind);

     this._anchor(this.objectActor.class, { className: "cm-variable" });

     this._text(" { ");

     let addProperty = (str) => {

       container.appendChild(this.el("span.cm-property", str));

     };

     let shown = 0;

     for (let key of Object.keys(ownProperties || {})) {

       if (shown > 0) {

         this._text(", ");

       }

       let value = ownProperties[key];

       addProperty(key);

       this._text(": ");

       if (value.get) {

         addProperty("Getter");

       } else if (value.set) {

         addProperty("Setter");

       } else {

         let valueElem = this.message._renderValueGrip(value.value, { concise: true });

         container.appendChild(valueElem);

       }

       shown++;

     }

     let ownPropertiesShown = shown;

     for (let key of Object.keys(safeGetterValues || {})) {

       if (shown > 0) {

         this._text(", ");

       }

       addProperty(key);

       this._text(": ");

       let value = safeGetterValues[key].getterValue;

       let valueElem = this.message._renderValueGrip(value, { concise: true });

       container.appendChild(valueElem);

       shown++;

     }

     if (typeof preview.ownPropertiesLength == "number" &&

         ownPropertiesShown < preview.ownPropertiesLength) {

       this._text(", ");

       let n = preview.ownPropertiesLength - ownPropertiesShown;

       let str = VariablesView.stringifiers._getNMoreString(n);

       this._anchor(str);

     }

     this._text(" }");

   },

 }); // Widgets.ObjectRenderers.byKind.Object