diff options
Diffstat (limited to 'devtools/client/webconsole/console-output.js')
| -rw-r--r-- | devtools/client/webconsole/console-output.js | 3638 |
1 files changed, 3638 insertions, 0 deletions
diff --git a/devtools/client/webconsole/console-output.js b/devtools/client/webconsole/console-output.js new file mode 100644 index 000000000..52d848494 --- /dev/null +++ b/devtools/client/webconsole/console-output.js @@ -0,0 +1,3638 @@ +/* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- */ +/* vim: set ft=javascript ts=2 et sw=2 tw=80: */ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const {Ci, Cu} = require("chrome"); + +loader.lazyImporter(this, "VariablesView", "resource://devtools/client/shared/widgets/VariablesView.jsm"); +loader.lazyImporter(this, "escapeHTML", "resource://devtools/client/shared/widgets/VariablesView.jsm"); + +loader.lazyRequireGetter(this, "promise"); +loader.lazyRequireGetter(this, "gDevTools", "devtools/client/framework/devtools", true); +loader.lazyRequireGetter(this, "TableWidget", "devtools/client/shared/widgets/TableWidget", true); +loader.lazyRequireGetter(this, "ObjectClient", "devtools/shared/client/main", true); + +const { extend } = 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 = "devtools/client/locales/webconsole.properties"; + +const WebConsoleUtils = require("devtools/client/webconsole/utils").Utils; +const { getSourceNames } = require("devtools/client/shared/source-utils"); +const {Task} = require("devtools/shared/task"); +const l10n = new WebConsoleUtils.L10n(STRINGS_URI); +const nodeConstants = require("devtools/shared/dom-node-constants"); +const {PluralForm} = require("devtools/shared/plural-form"); + +const MAX_STRING_GRIP_LENGTH = 36; +const {ELLIPSIS} = require("devtools/shared/l10n"); + +const validProtocols = /^(http|https|ftp|data|javascript|resource|chrome):/i; + +// 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, + SERVER: 7, + }, + + // 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". + /* eslint-disable no-multi-spaces */ + /* eslint-disable max-len */ + /* eslint-disable no-inline-comments */ + 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 + [ "servererror", "serverwarn", "serverinfo", "serverlog", ], // Server Logging + ], + /* eslint-enable no-inline-comments */ + /* eslint-enable max-len */ + /* eslint-enable no-multi-spaces */ + + // The fragment of a CSS class name that identifies each category. + CATEGORY_CLASS_FRAGMENTS: [ "network", "cssparser", "exception", "console", + "input", "output", "security", "server" ], + + // 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", + clear: "log", + trace: "log", + table: "log", + debug: "log", + dir: "log", + dirxml: "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"]; + +// 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, +]; + +// Maximum number of rows to display in console.table(). +const TABLE_ROW_MAX_ITEMS = 1000; + +// Maximum number of columns to display in console.table(). +const TABLE_COLUMN_MAX_ITEMS = 10; + +/** + * 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); + }, + + openLocationInDebugger: function ({url, line}) { + return this.owner.owner.viewSourceInDebugger(url, line); + }, + + /** + * 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 + */ +var 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"; + if (this.category == "input") { + // Assistive technology tools shouldn't echo input to the user, + // as the user knows what they've just typed. + container.setAttribute("aria-live", "off"); + } + 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(); + } +}; + +/** + * The NavigationMarker is used to show a page load event. + * + * @constructor + * @extends Messages.BaseMessage + * @param object response + * The response received from the back end. + * @param number timestamp + * The message date and time, milliseconds elapsed since 1 January 1970 + * 00:00:00 UTC. + */ +Messages.NavigationMarker = function (response, timestamp) { + Messages.BaseMessage.call(this); + + // Store the response packet received from the server. It might + // be useful for extensions customizing the console output. + this.response = response; + this._url = response.url; + this.textContent = "------ " + this._url; + this.timestamp = timestamp; +}; + +Messages.NavigationMarker.prototype = 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; + }, +}); + +/** + * 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. + * - stack: array that tells the message source stack. + * - 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.stack = options.stack; + this.timestamp = options.timestamp || Date.now(); + this.prefix = options.prefix; + this.private = !!options.private; + + this._message = message; + this._className = options.className; + this._link = options.link; + this._linkCallback = options.linkCallback; + this._filterDuplicates = options.filterDuplicates; + + this._onClickCollapsible = this._onClickCollapsible.bind(this); +}; + +Messages.Simple.prototype = 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, + + /** + * Holds the stackframes received from the server. + * + * @private + * @type array + */ + stack: null, + + /** + * Message prefix + * @type string|null + */ + prefix: 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, + + /** + * The message's "attachment" element to be displayed under the message. + * Used for things like stack traces or tables in console.table(). + * + * @private + * @type DOMElement|null + */ + _attachment: 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; + }, + + /** + * 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"); + }, + + _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.prefix = this.prefix; + 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"; + icon.title = l10n.getStr("severity." + this._severityNameCompat); + if (this.stack) { + icon.addEventListener("click", this._onClickCollapsible); + } + + let prefixNode; + if (this.prefix) { + prefixNode = this.document.createElementNS(XHTML_NS, "span"); + prefixNode.className = "prefix devtools-monospace"; + prefixNode.textContent = this.prefix + ":"; + } + + // 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(); + + 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); + if (prefixNode) { + this.element.appendChild(prefixNode); + } + + if (this.stack) { + let twisty = this.document.createElementNS(XHTML_NS, "a"); + twisty.className = "theme-twisty"; + twisty.href = "#"; + twisty.title = l10n.getStr("messageToggleDetails"); + twisty.addEventListener("click", this._onClickCollapsible); + this.element.appendChild(twisty); + this.collapsible = true; + this.element.setAttribute("collapsible", true); + } + + this.element.appendChild(body); + + this.element.clipboardText = this.element.textContent; + + if (this.private) { + this.element.setAttribute("private", true); + } + + // 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 bodyWrapper = this.document.createElementNS(XHTML_NS, "span"); + bodyWrapper.className = "message-body-wrapper"; + + let bodyFlex = this.document.createElementNS(XHTML_NS, "span"); + bodyFlex.className = "message-flex-body"; + bodyWrapper.appendChild(bodyFlex); + + let body = this.document.createElementNS(XHTML_NS, "span"); + body.className = "message-body devtools-monospace"; + bodyFlex.appendChild(body); + + 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; + } + + // do this before repeatNode is rendered - it has no effect afterwards + this._repeatID.textContent += "|" + container.textContent; + + let repeatNode = this._renderRepeatNode(); + let location = this._renderLocation(); + + if (repeatNode) { + bodyFlex.appendChild(this.document.createTextNode(" ")); + bodyFlex.appendChild(repeatNode); + } + if (location) { + bodyFlex.appendChild(this.document.createTextNode(" ")); + bodyFlex.appendChild(location); + } + + bodyFlex.appendChild(this.document.createTextNode("\n")); + + if (this.stack) { + this._attachment = new Widgets.Stacktrace(this, this.stack).render().element; + } + + if (this._attachment) { + bodyWrapper.appendChild(this._attachment); + } + + return bodyWrapper; + }, + + /** + * 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, column} = 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, column }); + }, + + /** + * 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(); + }, + + /** + * 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); + } + }, +}); // 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 = JSON.stringify(messagePieces); + this._repeatID.actors = new Set(); // using a set to avoid duplicates +}; + +Messages.Extended.prototype = 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, options = {}) + { + if (piece instanceof Ci.nsIDOMNode) { + return piece; + } + if (typeof piece == "function") { + return piece(this); + } + + return this._renderValueGrip(piece, options); + }, + + /** + * 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. + * - shorten - boolean that tells the renderer to display a truncated + * grip. + * @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 unshortenedGrip = grip; + if (options.shorten) { + grip = this.shortenValueGrip(grip); + } + + let result = this.document.createElementNS(XHTML_NS, "span"); + if (isPrimitive) { + if (Widgets.URLString.prototype.containsURL.call(Widgets.URLString.prototype, grip)) { + let widget = new Widgets.URLString(this, grip, unshortenedGrip).render(); + return widget.element; + } + + 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; + }, + + /** + * Shorten grips of the type string, leaves other grips unmodified. + * + * @param object grip + * Value grip from the server. + * @return object + * Possible values of object: + * - A shortened string, if original grip was of string type. + * - The unmodified input grip, if it wasn't of string type. + */ + shortenValueGrip: function (grip) + { + let shortVal = grip; + if (typeof (grip) == "string") { + shortVal = grip.replace(/(\r\n|\n|\r)/gm, " "); + if (shortVal.length > MAX_STRING_GRIP_LENGTH) { + shortVal = shortVal.substring(0, MAX_STRING_GRIP_LENGTH - 1) + ELLIPSIS; + } + } + + return shortVal; + }, + + /** + * 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", + "symbol": "cm-atom" + }; + + 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 = Widgets.ObjectRenderers.byClass[objectActor.class]; + + let { preview } = objectActor; + if ((!widget || (widget.canRender && !widget.canRender(objectActor))) + && preview + && preview.kind) { + widget = Widgets.ObjectRenderers.byKind[preview.kind]; + } + + 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. + * @param string [errorDocLink] + * Optional error doc URL to link to. + */ +Messages.JavaScriptEvalOutput = function (evalResponse, errorMessage, errorDocLink) +{ + let severity = "log", msg, quoteStrings = true; + + // Store also the response packet from the back end. It might + // be useful to extensions customizing the console output. + this.response = evalResponse; + + if (typeof (errorMessage) !== "undefined") { + 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, + }; + + let messages = [msg]; + if (errorDocLink) { + messages.push(errorDocLink); + } + + Messages.Extended.call(this, messages, 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: packet.category || "webdev", + severity: CONSOLE_API_LEVELS_TO_SEVERITIES[packet.level], + prefix: packet.prefix, + private: packet.private, + filterDuplicates: true, + location: { + url: packet.filename, + line: packet.lineNumber, + column: packet.columnNumber + }, + }; + + 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.stack = this._repeatID.stacktrace = packet.stacktrace; + this._styles = packet.styles || []; +}; + +Messages.ConsoleGeneric.prototype = extend(Messages.Extended.prototype, { + _styles: null, + + _renderBodyPieceSeparator: function () + { + return this.document.createTextNode(" "); + }, + + render: function () + { + let result = this.document.createDocumentFragment(); + this._renderBodyPieces(result); + + this._message = result; + this._stacktrace = null; + + Messages.Simple.prototype.render.call(this); + + return this; + }, + + _renderBodyPieces: function (container) + { + let lastStyle = null; + let stylePieces = this._styles.length > 0 ? this._styles.length : 1; + + for (let i = 0; i < this._messagePieces.length; i++) { + // Pieces with an associated style definition come from "%c" formatting. + // For body pieces beyond that, add a separator before each one. + if (i >= stylePieces) { + container.appendChild(this._renderBodyPieceSeparator()); + } + + let piece = this._messagePieces[i]; + let style = this._styles[i]; + + // No long string support. + lastStyle = (style && typeof style == "string") ? + this.cleanupStyle(style) : null; + + container.appendChild(this._renderBodyPiece(piece, lastStyle)); + } + + this._messagePieces = null; + this._styles = null; + }, + + _renderBodyPiece: function (piece, style) + { + // Skip quotes for top-level strings. + let options = { noStringQuotes: true }; + let elem = Messages.Extended.prototype._renderBodyPiece.call(this, piece, options); + let result = elem; + + if (style) { + if (elem.nodeType == nodeConstants.ELEMENT_NODE) { + elem.style = style; + } else { + let span = this.document.createElementNS(XHTML_NS, "span"); + span.style = style; + span.appendChild(elem); + result = span; + } + } + + return result; + }, + + /** + * 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: packet.category || "webdev", + severity: CONSOLE_API_LEVELS_TO_SEVERITIES[packet.level], + private: packet.private, + filterDuplicates: true, + location: { + url: packet.filename, + line: packet.lineNumber, + }, + }; + + Messages.Simple.call(this, null, options); + + this._repeatID.consoleApiLevel = packet.level; + this._stacktrace = this._repeatID.stacktrace = packet.stacktrace; + this._arguments = packet.arguments; +}; + +Messages.ConsoleTrace.prototype = 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 () { + this._message = this._renderMessage(); + this._attachment = this._renderStack(); + + Messages.Simple.prototype.render.apply(this, arguments); + this.element.setAttribute("open", true); + return this; + }, + + /** + * Render the console messageNode + */ + _renderMessage: 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 frag = this.document.createDocumentFragment(); + frag.appendChild(cmvar); + frag.appendChild(this.document.createTextNode(".")); + frag.appendChild(cmprop); + frag.appendChild(this.document.createTextNode("():")); + + return frag; + }, + + /** + * Render the stack frames. + * + * @private + * @return DOMElement + */ + _renderStack: function () { + return new Widgets.Stacktrace(this, this._stacktrace).render().element; + }, +}); // Messages.ConsoleTrace.prototype + +/** + * The ConsoleTable message is used for console.table() calls. + * + * @constructor + * @extends Messages.Extended + * @param object packet + * The Console API call packet received from the server. + */ +Messages.ConsoleTable = function (packet) +{ + let options = { + className: "cm-s-mozilla", + timestamp: packet.timeStamp, + category: packet.category || "webdev", + severity: CONSOLE_API_LEVELS_TO_SEVERITIES[packet.level], + private: packet.private, + filterDuplicates: false, + location: { + url: packet.filename, + line: packet.lineNumber, + }, + }; + + this._populateTableData = this._populateTableData.bind(this); + this._renderMessage = this._renderMessage.bind(this); + Messages.Extended.call(this, [this._renderMessage], options); + + this._repeatID.consoleApiLevel = packet.level; + this._arguments = packet.arguments; +}; + +Messages.ConsoleTable.prototype = extend(Messages.Extended.prototype, { + /** + * Holds the arguments the content script passed to the console.table() + * method. + * + * @private + * @type array + */ + _arguments: null, + + /** + * Array of objects that holds the data to log in the table. + * + * @private + * @type array + */ + _data: null, + + /** + * Key value pair of the id and display name for the columns in the table. + * Refer to the TableWidget API. + * + * @private + * @type object + */ + _columns: null, + + /** + * A promise that resolves when the table data is ready or null if invalid + * arguments are provided. + * + * @private + * @type promise|null + */ + _populatePromise: null, + + init: function () + { + let result = Messages.Extended.prototype.init.apply(this, arguments); + this._data = []; + this._columns = {}; + + this._populatePromise = this._populateTableData(); + + return result; + }, + + /** + * Sets the key value pair of the id and display name for the columns in the + * table. + * + * @private + * @param array|string columns + * Either a string or array containing the names for the columns in + * the output table. + */ + _setColumns: function (columns) + { + if (columns.class == "Array") { + let items = columns.preview.items; + + for (let item of items) { + if (typeof item == "string") { + this._columns[item] = item; + } + } + } else if (typeof columns == "string" && columns) { + this._columns[columns] = columns; + } + }, + + /** + * Retrieves the table data and columns from the arguments received from the + * server. + * + * @return Promise|null + * Returns a promise that resolves when the table data is ready or + * null if the arguments are invalid. + */ + _populateTableData: function () + { + let deferred = promise.defer(); + + if (this._arguments.length <= 0) { + return; + } + + let data = this._arguments[0]; + if (data.class != "Array" && data.class != "Object" && + data.class != "Map" && data.class != "Set" && + data.class != "WeakMap" && data.class != "WeakSet") { + return; + } + + let hasColumnsArg = false; + if (this._arguments.length > 1) { + if (data.class == "Object" || data.class == "Array") { + this._columns["_index"] = l10n.getStr("table.index"); + } else { + this._columns["_index"] = l10n.getStr("table.iterationIndex"); + } + + this._setColumns(this._arguments[1]); + hasColumnsArg = true; + } + + if (data.class == "Object" || data.class == "Array") { + // Get the object properties, and parse the key and value properties into + // the table data and columns. + this.client = new ObjectClient(this.output.owner.jsterm.hud.proxy.client, + data); + this.client.getPrototypeAndProperties(aResponse => { + let {ownProperties} = aResponse; + let rowCount = 0; + let columnCount = 0; + + for (let index of Object.keys(ownProperties || {})) { + // Avoid outputting the length property if the data argument provided + // is an array + if (data.class == "Array" && index == "length") { + continue; + } + + if (!hasColumnsArg) { + this._columns["_index"] = l10n.getStr("table.index"); + } + + if (data.class == "Array") { + if (index == parseInt(index)) { + index = parseInt(index); + } + } + + let property = ownProperties[index].value; + let item = { _index: index }; + + if (property.class == "Object" || property.class == "Array") { + let {preview} = property; + let entries = property.class == "Object" ? + preview.ownProperties : preview.items; + + for (let key of Object.keys(entries)) { + let value = property.class == "Object" ? + preview.ownProperties[key].value : preview.items[key]; + + item[key] = this._renderValueGrip(value, { concise: true }); + + if (!hasColumnsArg && !(key in this._columns) && + (++columnCount <= TABLE_COLUMN_MAX_ITEMS)) { + this._columns[key] = key; + } + } + } else { + // Display the value for any non-object data input. + item["_value"] = this._renderValueGrip(property, { concise: true }); + + if (!hasColumnsArg && !("_value" in this._columns)) { + this._columns["_value"] = l10n.getStr("table.value"); + } + } + + this._data.push(item); + + if (++rowCount == TABLE_ROW_MAX_ITEMS) { + break; + } + } + + deferred.resolve(); + }); + } else if (data.class == "Map" || data.class == "WeakMap") { + let entries = data.preview.entries; + + if (!hasColumnsArg) { + this._columns["_index"] = l10n.getStr("table.iterationIndex"); + this._columns["_key"] = l10n.getStr("table.key"); + this._columns["_value"] = l10n.getStr("table.value"); + } + + let rowCount = 0; + for (let [key, value] of entries) { + let item = { + _index: rowCount, + _key: this._renderValueGrip(key, { concise: true }), + _value: this._renderValueGrip(value, { concise: true }) + }; + + this._data.push(item); + + if (++rowCount == TABLE_ROW_MAX_ITEMS) { + break; + } + } + + deferred.resolve(); + } else if (data.class == "Set" || data.class == "WeakSet") { + let entries = data.preview.items; + + if (!hasColumnsArg) { + this._columns["_index"] = l10n.getStr("table.iterationIndex"); + this._columns["_value"] = l10n.getStr("table.value"); + } + + let rowCount = 0; + for (let entry of entries) { + let item = { + _index : rowCount, + _value: this._renderValueGrip(entry, { concise: true }) + }; + + this._data.push(item); + + if (++rowCount == TABLE_ROW_MAX_ITEMS) { + break; + } + } + + deferred.resolve(); + } + + return deferred.promise; + }, + + render: function () + { + this._attachment = this._renderTable(); + Messages.Extended.prototype.render.apply(this, arguments); + this.element.setAttribute("open", true); + return this; + }, + + _renderMessage: 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 = "table"; + + let frag = this.document.createDocumentFragment(); + frag.appendChild(cmvar); + frag.appendChild(this.document.createTextNode(".")); + frag.appendChild(cmprop); + frag.appendChild(this.document.createTextNode("():")); + + return frag; + }, + + /** + * Render the table. + * + * @private + * @return DOMElement + */ + _renderTable: function () { + let result = this.document.createElementNS(XHTML_NS, "div"); + + if (this._populatePromise) { + this._populatePromise.then(() => { + if (this._data.length > 0) { + let widget = new Widgets.Table(this, this._data, this._columns).render(); + result.appendChild(widget.element); + } + + result.scrollIntoView(); + this.output.owner.emit("messages-table-rendered"); + + // 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; + }, +}); // Messages.ConsoleTable.prototype + +var 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 = 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 + + +/** + * The URLString widget, for rendering strings where at least one token is a + * URL. + * + * @constructor + * @param object message + * The owning message. + * @param string str + * The string, which contains at least one valid URL. + * @param string unshortenedStr + * The unshortened form of the string, if it was shortened. + */ +Widgets.URLString = function (message, str, unshortenedStr) +{ + Widgets.BaseWidget.call(this, message); + this.str = str; + this.unshortenedStr = unshortenedStr; +}; + +Widgets.URLString.prototype = extend(Widgets.BaseWidget.prototype, { + /** + * The string to format, which contains at least one valid URL. + * @type string + */ + str: "", + + render: function () + { + if (this.element) { + return this; + } + + // The rendered URLString will be a <span> containing a number of text + // <spans> for non-URL tokens and <a>'s for URL tokens. + this.element = this.el("span", { + class: "console-string" + }); + this.element.appendChild(this._renderText("\"")); + + // As we walk through the tokens of the source string, we make sure to preserve + // the original whitespace that separated the tokens. + let tokens = this.str.split(/\s+/); + let textStart = 0; + let tokenStart; + for (let i = 0; i < tokens.length; i++) { + let token = tokens[i]; + let unshortenedToken; + tokenStart = this.str.indexOf(token, textStart); + if (this._isURL(token)) { + // The last URL in the string might be shortened. If so, get the + // real URL so the rendered link can point to it. + if (i === tokens.length - 1 && this.unshortenedStr) { + unshortenedToken = this.unshortenedStr.slice(tokenStart).split(/\s+/, 1)[0]; + } + this.element.appendChild(this._renderText(this.str.slice(textStart, tokenStart))); + textStart = tokenStart + token.length; + this.element.appendChild(this._renderURL(token, unshortenedToken)); + } + } + + // Clean up any non-URL text at the end of the source string. + this.element.appendChild(this._renderText(this.str.slice(textStart, this.str.length))); + this.element.appendChild(this._renderText("\"")); + + return this; + }, + + /** + * Determines whether a grip is a string containing a URL. + * + * @param string grip + * The grip, which may contain a URL. + * @return boolean + * Whether the grip is a string containing a URL. + */ + containsURL: function (grip) + { + if (typeof grip != "string") { + return false; + } + + let tokens = grip.split(/\s+/); + return tokens.some(this._isURL); + }, + + /** + * Determines whether a string token is a valid URL. + * + * @param string token + * The token. + * @return boolean + * Whenther the token is a URL. + */ + _isURL: function (token) { + try { + if (!validProtocols.test(token)) { + return false; + } + new URL(token); + return true; + } catch (e) { + return false; + } + }, + + /** + * Renders a string as a URL. + * + * @param string url + * The string to be rendered as a url. + * @param string fullUrl + * The unshortened form of the URL, if it was shortened. + * @return DOMElement + * An element containing the rendered string. + */ + _renderURL: function (url, fullUrl) + { + let unshortened = fullUrl || url; + let result = this.el("a", { + class: "url", + title: unshortened, + href: unshortened, + draggable: false + }, url); + this.message._addLinkCallback(result); + return result; + }, + + _renderText: function (text) { + return this.el("span", text); + }, +}); // Widgets.URLString.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 = 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 a concise representation of an object. + */ + _renderConciseObject: function () + { + this.element = this._anchor(this.objectActor.class, + { className: "cm-variable" }); + }, + + /** + * Render the `<class> { ` prefix of an object. + */ + _renderObjectPrefix: function () + { + let { kind } = this.objectActor.preview; + this.element = this.el("span.kind-" + kind); + this._anchor(this.objectActor.class, { className: "cm-variable" }); + this._text(" { "); + }, + + /** + * Render the ` }` suffix of an object. + */ + _renderObjectSuffix: function () + { + this._text(" }"); + }, + + /** + * Render an object property. + * + * @param String key + * The property name. + * @param Object value + * The property value, as an RDP grip. + * @param nsIDOMNode container + * The container node to render to. + * @param Boolean needsComma + * True if there was another property before this one and we need to + * separate them with a comma. + * @param Boolean valueIsText + * Add the value as is, don't treat it as a grip and pass it to + * `_renderValueGrip`. + */ + _renderObjectProperty: function (key, value, container, needsComma, valueIsText = false) + { + if (needsComma) { + this._text(", "); + } + + container.appendChild(this.el("span.cm-property", key)); + this._text(": "); + + if (valueIsText) { + this._text(value); + } else { + let valueElem = this.message._renderValueGrip(value, { concise: true, shorten: true }); + container.appendChild(valueElem); + } + }, + + /** + * Render this object's properties. + * + * @param nsIDOMNode container + * The container node to render to. + * @param Boolean needsComma + * True if there was another property before this one and we need to + * separate them with a comma. + */ + _renderObjectProperties: function (container, needsComma) + { + let { preview } = this.objectActor; + let { ownProperties, safeGetterValues } = preview; + + let shown = 0; + + let getValue = desc => { + if (desc.get) { + return "Getter"; + } else if (desc.set) { + return "Setter"; + } else { + return desc.value; + } + }; + + for (let key of Object.keys(ownProperties || {})) { + this._renderObjectProperty(key, getValue(ownProperties[key]), container, + shown > 0 || needsComma, + ownProperties[key].get || ownProperties[key].set); + shown++; + } + + let ownPropertiesShown = shown; + + for (let key of Object.keys(safeGetterValues || {})) { + this._renderObjectProperty(key, safeGetterValues[key].getterValue, + container, shown > 0 || needsComma); + 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); + } + }, + + /** + * 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) { + // If the anchor has an URL, open it in a new tab. If not, show the + // current object actor. + options.onClick = options.href ? this._onClickAnchor : this._onClick; + } + + options.onContextMenu = options.onContextMenu || this._onContextMenu; + + let anchor = this.el("a", { + class: options.className, + draggable: false, + href: options.href || "#", + }, text); + + this.message._addLinkCallback(anchor, options.onClick); + + anchor.addEventListener("contextmenu", options.onContextMenu.bind(this)); + + if (options.appendTo) { + options.appendTo.appendChild(anchor); + } else if (!("appendTo" in options) && this.element) { + this.element.appendChild(anchor); + } + + return anchor; + }, + + openObjectInVariablesView: function () + { + this.output.openVariablesView({ + label: VariablesView.getString(this.objectActor, { concise: true }), + objectActor: this.objectActor, + autofocus: true, + }); + }, + + storeObjectInWindow: function () + { + let evalString = `{ let i = 0; + while (this.hasOwnProperty("temp" + i) && i < 1000) { + i++; + } + this["temp" + i] = _self; + "temp" + i; + }`; + let options = { + selectedObjectActor: this.objectActor.actor, + }; + + this.output.owner.jsterm.requestEvaluation(evalString, options).then((res) => { + this.output.owner.jsterm.focus(); + this.output.owner.jsterm.setInputValue(res.result); + }); + }, + + /** + * The click event handler for objects shown inline. + * @private + */ + _onClick: function () + { + this.openObjectInVariablesView(); + }, + + _onContextMenu: function (ev) { + // TODO offer a nice API for the context menu. + // Probably worth to take a look at Firebug's way + // https://github.com/firebug/firebug/blob/master/extension/content/firebug/chrome/menu.js + let doc = ev.target.ownerDocument; + let cmPopup = doc.getElementById("output-contextmenu"); + + let openInVarViewCmd = doc.getElementById("menu_openInVarView"); + let openVarView = this.openObjectInVariablesView.bind(this); + openInVarViewCmd.addEventListener("command", openVarView); + openInVarViewCmd.removeAttribute("disabled"); + cmPopup.addEventListener("popuphiding", function onPopupHiding() { + cmPopup.removeEventListener("popuphiding", onPopupHiding); + openInVarViewCmd.removeEventListener("command", openVarView); + openInVarViewCmd.setAttribute("disabled", "true"); + }); + + // 'Store as global variable' command isn't supported on pre-44 servers, + // so remove it from the menu in that case. + let storeInGlobalCmd = doc.getElementById("menu_storeAsGlobal"); + if (!this.output.webConsoleClient.traits.selectedObjectActor) { + storeInGlobalCmd.remove(); + } else if (storeInGlobalCmd) { + let storeObjectInWindow = this.storeObjectInWindow.bind(this); + storeInGlobalCmd.addEventListener("command", storeObjectInWindow); + storeInGlobalCmd.removeAttribute("disabled"); + cmPopup.addEventListener("popuphiding", function onPopupHiding() { + cmPopup.removeEventListener("popuphiding", onPopupHiding); + storeInGlobalCmd.removeEventListener("command", storeObjectInWindow); + storeInGlobalCmd.setAttribute("disabled", "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 = 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 (preview && "timestamp" in preview && typeof preview.timestamp != "number") { + anchorText = new Date(preview.timestamp).toString(); // invalid date + anchorClass = ""; + } + + this._anchor(anchorText, { className: anchorClass }); + + if (!preview || !("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(")"); + }, + + _onClick: function () { + let location = this.objectActor.location; + if (location && IGNORED_SOURCE_URLS.indexOf(location.url) === -1) { + this.output.openLocationInDebugger(location); + } + else { + this.openObjectInVariablesView(); + } + } +}); // 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 isFirst = true; + let emptySlots = 0; + // A helper that renders a comma between items if isFirst == false. + let renderSeparator = () => !isFirst && this._text(", "); + + for (let item of items) { + if (item === null) { + emptySlots++; + } + else { + renderSeparator(); + isFirst = false; + + if (emptySlots) { + this._renderEmptySlots(emptySlots); + emptySlots = 0; + } + + let elem = this.message._renderValueGrip(item, { concise: true, shorten: true }); + this.element.appendChild(elem); + } + } + + if (emptySlots) { + renderSeparator(); + this._renderEmptySlots(emptySlots, false); + } + + let shown = items.length; + if (shown < preview.length) { + this._text(", "); + + let n = preview.length - shown; + let str = VariablesView.stringifiers._getNMoreString(n); + this._anchor(str); + } + + this._text(" ]"); + }, + + _renderEmptySlots: function (aNumSlots, aAppendComma = true) { + let slotLabel = l10n.getStr("emptySlotLabel"); + let slotText = PluralForm.get(aNumSlots, slotLabel); + this._text("<" + slotText.replace("#1", aNumSlots) + ">"); + if (aAppendComma) { + 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 = getSourceNames(url)[this.options.concise ? "short" : "long"]; + 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.theme-fg-color6", + 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 nodeConstants.DOCUMENT_NODE: + case nodeConstants.ATTRIBUTE_NODE: + case nodeConstants.TEXT_NODE: + case nodeConstants.COMMENT_NODE: + case nodeConstants.DOCUMENT_FRAGMENT_NODE: + case nodeConstants.ELEMENT_NODE: + return true; + default: + return false; + } + }, + + render: function () + { + switch (this.objectActor.preview.nodeType) { + case nodeConstants.DOCUMENT_NODE: + this._renderDocumentNode(); + break; + case nodeConstants.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 nodeConstants.TEXT_NODE: + this._renderTextNode(); + break; + case nodeConstants.COMMENT_NODE: + this._renderCommentNode(); + break; + case nodeConstants.DOCUMENT_FRAGMENT_NODE: + this._renderDocumentFragmentNode(); + break; + case nodeConstants.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.theme-fg-color6", escapeHTML(value))); + this._text("\"", fragment); + + 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"); + + this._text("<"); + let openTag = this.el("span.cm-tag"); + 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); + } + } + + this._text(">"); + + // Register this widget in the owner message so that it gets destroyed when + // the message is destroyed. + this.message.widgets.add(this); + + this.linkToInspector().then(null, e => console.error(e)); + }, + + /** + * 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 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 nodeConstants.ELEMENT_NODE). + */ + linkToInspector: Task.async(function* () + { + if (this._linkedToInspector) { + return; + } + + // Checking the node type + if (this.objectActor.preview.nodeType !== nodeConstants.ELEMENT_NODE) { + throw new Error("The object cannot be linked to the inspector as it " + + "isn't an element node"); + } + + // Checking the presence of a toolbox + let target = this.message.output.toolboxTarget; + this.toolbox = gDevTools.getToolbox(target); + if (!this.toolbox) { + // In cases like the browser console, there is no toolbox. + return; + } + + // 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 new Error("The object cannot be linked to the inspector, the " + + "corresponding nodeFront could not be found"); + } + + // At this stage, the message may have been cleared already + if (!this.document) { + throw new Error("The object cannot be linked to the inspector, the " + + "message was got cleared away"); + } + + // Check it again as this method is async! + if (this._linkedToInspector) { + return; + } + this._linkedToInspector = true; + + 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"); + }), + + /** + * 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: Task.async(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; + } + }), + + /** + * 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(); + }).then(null, e => console.error(e)); + }, + + /** + * 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: Task.async(function* () + { + yield this.linkToInspector(); + yield this.toolbox.selectTool("inspector"); + + let isAttached = yield this.toolbox.walker.isInDOMTree(this._nodeFront); + if (isAttached) { + let onReady = promise.defer(); + this.toolbox.inspector.once("inspector-updated", onReady.resolve); + yield this.toolbox.selection.setNodeFront(this._nodeFront, "console"); + yield onReady.promise; + } else { + throw null; + } + }), + + 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); + + if (this._linkedToInspector) { + this.unhighlightDomNode().then(() => { + this.toolbox = null; + this._nodeFront = null; + }); + } else { + this.toolbox = null; + this._nodeFront = null; + } + } + }, +}); // Widgets.ObjectRenderers.byKind.DOMNode + +/** + * The widget user for displaying Promise objects. + */ +Widgets.ObjectRenderers.add({ + byClass: "Promise", + + render: function () + { + let { ownProperties, safeGetterValues } = this.objectActor.preview || {}; + if ((!ownProperties && !safeGetterValues) || this.options.concise) { + this._renderConciseObject(); + return; + } + + this._renderObjectPrefix(); + let container = this.element; + let addedPromiseInternalProps = false; + + if (this.objectActor.promiseState) { + const { state, value, reason } = this.objectActor.promiseState; + + this._renderObjectProperty("<state>", state, container, false); + addedPromiseInternalProps = true; + + if (state == "fulfilled") { + this._renderObjectProperty("<value>", value, container, true); + } else if (state == "rejected") { + this._renderObjectProperty("<reason>", reason, container, true); + } + } + + this._renderObjectProperties(container, addedPromiseInternalProps); + this._renderObjectSuffix(); + } +}); // Widgets.ObjectRenderers.byClass.Promise + +/* + * A renderer used for wrapped primitive objects. + */ + +function WrappedPrimitiveRenderer() { + let { ownProperties, safeGetterValues } = this.objectActor.preview || {}; + if ((!ownProperties && !safeGetterValues) || this.options.concise) { + this._renderConciseObject(); + return; + } + + this._renderObjectPrefix(); + + let elem = + this.message._renderValueGrip(this.objectActor.preview.wrappedValue); + this.element.appendChild(elem); + + this._renderObjectProperties(this.element, true); + this._renderObjectSuffix(); +} + +/** + * The widget used for displaying Boolean previews. + */ +Widgets.ObjectRenderers.add({ + byClass: "Boolean", + + render: WrappedPrimitiveRenderer, +}); + +/** + * The widget used for displaying Number previews. + */ +Widgets.ObjectRenderers.add({ + byClass: "Number", + + render: WrappedPrimitiveRenderer, +}); + +/** + * The widget used for displaying String previews. + */ +Widgets.ObjectRenderers.add({ + byClass: "String", + + render: WrappedPrimitiveRenderer, +}); + +/** + * The widget used for displaying generic JS object previews. + */ +Widgets.ObjectRenderers.add({ + byKind: "Object", + + render: function () + { + let { ownProperties, safeGetterValues } = this.objectActor.preview || {}; + if ((!ownProperties && !safeGetterValues) || this.options.concise) { + this._renderConciseObject(); + return; + } + + this._renderObjectPrefix(); + this._renderObjectProperties(this.element, false); + this._renderObjectSuffix(); + }, +}); // Widgets.ObjectRenderers.byKind.Object + +/** + * The long string widget. + * + * @constructor + * @param object message + * The owning message. + * @param object longStringActor + * The LongStringActor to display. + * @param object options + * Options, such as noStringQuotes + */ +Widgets.LongString = function (message, longStringActor, options) +{ + Widgets.BaseWidget.call(this, message); + this.longStringActor = longStringActor; + this.noStringQuotes = (options && "noStringQuotes" in options) ? + options.noStringQuotes : !this.message._quoteStrings; + + this._onClick = this._onClick.bind(this); + this._onSubstring = this._onSubstring.bind(this); +}; + +Widgets.LongString.prototype = extend(Widgets.BaseWidget.prototype, { + /** + * The LongStringActor displayed by the widget. + * @type object + */ + longStringActor: null, + + render: function () + { + if (this.element) { + return this; + } + + let result = this.element = this.document.createElementNS(XHTML_NS, "span"); + result.className = "longString console-string"; + this._renderString(this.longStringActor.initial); + result.appendChild(this._renderEllipsis()); + + return this; + }, + + /** + * Render the long string in the widget element. + * @private + * @param string str + * The string to display. + */ + _renderString: function (str) + { + this.element.textContent = VariablesView.getString(str, { + noStringQuotes: this.noStringQuotes, + noEllipsis: true, + }); + }, + + /** + * Render the anchor ellipsis that allows the user to expand the long string. + * + * @private + * @return Element + */ + _renderEllipsis: function () + { + let ellipsis = this.document.createElementNS(XHTML_NS, "a"); + ellipsis.className = "longStringEllipsis"; + ellipsis.textContent = l10n.getStr("longStringEllipsis"); + ellipsis.href = "#"; + ellipsis.draggable = false; + this.message._addLinkCallback(ellipsis, this._onClick); + + return ellipsis; + }, + + /** + * The click event handler for the ellipsis shown after the short string. This + * function expands the element to show the full string. + * @private + */ + _onClick: function () + { + let longString = this.output.webConsoleClient.longString(this.longStringActor); + let toIndex = Math.min(longString.length, MAX_LONG_STRING_LENGTH); + + longString.substring(longString.initial.length, toIndex, this._onSubstring); + }, + + /** + * The longString substring response callback. + * + * @private + * @param object response + * Response packet. + */ + _onSubstring: function (response) + { + if (response.error) { + console.error("LongString substring failure: " + response.error); + return; + } + + this.element.lastChild.remove(); + this.element.classList.remove("longString"); + + this._renderString(this.longStringActor.initial + response.substring); + + this.output.owner.emit("new-messages", new Set([{ + update: true, + node: this.message.element, + response: response, + }])); + + let toIndex = Math.min(this.longStringActor.length, MAX_LONG_STRING_LENGTH); + if (toIndex != this.longStringActor.length) { + this._logWarningAboutStringTooLong(); + } + }, + + /** + * Inform user that the string he tries to view is too long. + * @private + */ + _logWarningAboutStringTooLong: function () + { + let msg = new Messages.Simple(l10n.getStr("longStringTooLong"), { + category: "output", + severity: "warning", + }); + this.output.addMessage(msg); + }, +}); // Widgets.LongString.prototype + + +/** + * The stacktrace widget. + * + * @constructor + * @extends Widgets.BaseWidget + * @param object message + * The owning message. + * @param array stacktrace + * The stacktrace to display, array of frames as supplied by the server, + * over the remote protocol. + */ +Widgets.Stacktrace = function (message, stacktrace) { + Widgets.BaseWidget.call(this, message); + this.stacktrace = stacktrace; +}; + +Widgets.Stacktrace.prototype = extend(Widgets.BaseWidget.prototype, { + /** + * The stackframes received from the server. + * @type array + */ + stacktrace: null, + + render() { + if (this.element) { + return this; + } + + let result = this.element = this.document.createElementNS(XHTML_NS, "div"); + result.className = "stacktrace devtools-monospace"; + + if (this.stacktrace) { + this.output.owner.ReactDOM.render(this.output.owner.StackTraceView({ + stacktrace: this.stacktrace, + onViewSourceInDebugger: frame => this.output.openLocationInDebugger(frame) + }), result); + } + + return this; + } +}); + +/** + * The table widget. + * + * @constructor + * @extends Widgets.BaseWidget + * @param object message + * The owning message. + * @param array data + * Array of objects that holds the data to log in the table. + * @param object columns + * Object containing the key value pair of the id and display name for + * the columns in the table. + */ +Widgets.Table = function (message, data, columns) +{ + Widgets.BaseWidget.call(this, message); + this.data = data; + this.columns = columns; +}; + +Widgets.Table.prototype = extend(Widgets.BaseWidget.prototype, { + /** + * Array of objects that holds the data to output in the table. + * @type array + */ + data: null, + + /** + * Object containing the key value pair of the id and display name for + * the columns in the table. + * @type object + */ + columns: null, + + render: function () { + if (this.element) { + return this; + } + + let result = this.element = this.document.createElementNS(XHTML_NS, "div"); + result.className = "consoletable devtools-monospace"; + + this.table = new TableWidget(result, { + wrapTextInElements: true, + initialColumns: this.columns, + uniqueId: "_index", + firstColumn: "_index" + }); + + for (let row of this.data) { + this.table.push(row); + } + + return this; + } +}); // Widgets.Table.prototype + +function gSequenceId() +{ + return gSequenceId.n++; +} +gSequenceId.n = 0; + +exports.ConsoleOutput = ConsoleOutput; +exports.Messages = Messages; +exports.Widgets = Widgets; |