summaryrefslogtreecommitdiffstats
path: root/devtools/server/actors/inspector.js
diff options
context:
space:
mode:
authorMatt A. Tobin <mattatobin@localhost.localdomain>2018-02-02 04:16:08 -0500
committerMatt A. Tobin <mattatobin@localhost.localdomain>2018-02-02 04:16:08 -0500
commit5f8de423f190bbb79a62f804151bc24824fa32d8 (patch)
tree10027f336435511475e392454359edea8e25895d /devtools/server/actors/inspector.js
parent49ee0794b5d912db1f95dce6eb52d781dc210db5 (diff)
downloadUXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.gz
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.lz
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.xz
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.zip
Add m-esr52 at 52.6.0
Diffstat (limited to 'devtools/server/actors/inspector.js')
-rw-r--r--devtools/server/actors/inspector.js3186
1 files changed, 3186 insertions, 0 deletions
diff --git a/devtools/server/actors/inspector.js b/devtools/server/actors/inspector.js
new file mode 100644
index 000000000..20a227a40
--- /dev/null
+++ b/devtools/server/actors/inspector.js
@@ -0,0 +1,3186 @@
+/* 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";
+
+/**
+ * Here's the server side of the remote inspector.
+ *
+ * The WalkerActor is the client's view of the debuggee's DOM. It's gives
+ * the client a tree of NodeActor objects.
+ *
+ * The walker presents the DOM tree mostly unmodified from the source DOM
+ * tree, but with a few key differences:
+ *
+ * - Empty text nodes are ignored. This is pretty typical of developer
+ * tools, but maybe we should reconsider that on the server side.
+ * - iframes with documents loaded have the loaded document as the child,
+ * the walker provides one big tree for the whole document tree.
+ *
+ * There are a few ways to get references to NodeActors:
+ *
+ * - When you first get a WalkerActor reference, it comes with a free
+ * reference to the root document's node.
+ * - Given a node, you can ask for children, siblings, and parents.
+ * - You can issue querySelector and querySelectorAll requests to find
+ * other elements.
+ * - Requests that return arbitrary nodes from the tree (like querySelector
+ * and querySelectorAll) will also return any nodes the client hasn't
+ * seen in order to have a complete set of parents.
+ *
+ * Once you have a NodeFront, you should be able to answer a few questions
+ * without further round trips, like the node's name, namespace/tagName,
+ * attributes, etc. Other questions (like a text node's full nodeValue)
+ * might require another round trip.
+ *
+ * The protocol guarantees that the client will always know the parent of
+ * any node that is returned by the server. This means that some requests
+ * (like querySelector) will include the extra nodes needed to satisfy this
+ * requirement. The client keeps track of this parent relationship, so the
+ * node fronts form a tree that is a subset of the actual DOM tree.
+ *
+ *
+ * We maintain this guarantee to support the ability to release subtrees on
+ * the client - when a node is disconnected from the DOM tree we want to be
+ * able to free the client objects for all the children nodes.
+ *
+ * So to be able to answer "all the children of a given node that we have
+ * seen on the client side", we guarantee that every time we've seen a node,
+ * we connect it up through its parents.
+ */
+
+const {Cc, Ci, Cu} = require("chrome");
+const Services = require("Services");
+const protocol = require("devtools/shared/protocol");
+const {LayoutActor} = require("devtools/server/actors/layout");
+const {LongStringActor} = require("devtools/server/actors/string");
+const promise = require("promise");
+const {Task} = require("devtools/shared/task");
+const events = require("sdk/event/core");
+const {WalkerSearch} = require("devtools/server/actors/utils/walker-search");
+const {PageStyleActor, getFontPreviewData} = require("devtools/server/actors/styles");
+const {
+ HighlighterActor,
+ CustomHighlighterActor,
+ isTypeRegistered,
+ HighlighterEnvironment
+} = require("devtools/server/actors/highlighters");
+const {EyeDropper} = require("devtools/server/actors/highlighters/eye-dropper");
+const {
+ isAnonymous,
+ isNativeAnonymous,
+ isXBLAnonymous,
+ isShadowAnonymous,
+ getFrameElement
+} = require("devtools/shared/layout/utils");
+const {getLayoutChangesObserver, releaseLayoutChangesObserver} = require("devtools/server/actors/reflow");
+const nodeFilterConstants = require("devtools/shared/dom-node-filter-constants");
+
+const {EventParsers} = require("devtools/server/event-parsers");
+const {nodeSpec, nodeListSpec, walkerSpec, inspectorSpec} = require("devtools/shared/specs/inspector");
+
+const FONT_FAMILY_PREVIEW_TEXT = "The quick brown fox jumps over the lazy dog";
+const FONT_FAMILY_PREVIEW_TEXT_SIZE = 20;
+const PSEUDO_CLASSES = [":hover", ":active", ":focus"];
+const HIDDEN_CLASS = "__fx-devtools-hide-shortcut__";
+const XHTML_NS = "http://www.w3.org/1999/xhtml";
+const XUL_NS = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
+const IMAGE_FETCHING_TIMEOUT = 500;
+const RX_FUNC_NAME =
+ /((var|const|let)\s+)?([\w$.]+\s*[:=]\s*)*(function)?\s*\*?\s*([\w$]+)?\s*$/;
+
+// The possible completions to a ':' with added score to give certain values
+// some preference.
+const PSEUDO_SELECTORS = [
+ [":active", 1],
+ [":hover", 1],
+ [":focus", 1],
+ [":visited", 0],
+ [":link", 0],
+ [":first-letter", 0],
+ [":first-child", 2],
+ [":before", 2],
+ [":after", 2],
+ [":lang(", 0],
+ [":not(", 3],
+ [":first-of-type", 0],
+ [":last-of-type", 0],
+ [":only-of-type", 0],
+ [":only-child", 2],
+ [":nth-child(", 3],
+ [":nth-last-child(", 0],
+ [":nth-of-type(", 0],
+ [":nth-last-of-type(", 0],
+ [":last-child", 2],
+ [":root", 0],
+ [":empty", 0],
+ [":target", 0],
+ [":enabled", 0],
+ [":disabled", 0],
+ [":checked", 1],
+ ["::selection", 0]
+];
+
+var HELPER_SHEET = `
+ .__fx-devtools-hide-shortcut__ {
+ visibility: hidden !important;
+ }
+
+ :-moz-devtools-highlighted {
+ outline: 2px dashed #F06!important;
+ outline-offset: -2px !important;
+ }
+`;
+
+const flags = require("devtools/shared/flags");
+
+loader.lazyRequireGetter(this, "DevToolsUtils",
+ "devtools/shared/DevToolsUtils");
+
+loader.lazyRequireGetter(this, "AsyncUtils", "devtools/shared/async-utils");
+
+loader.lazyGetter(this, "DOMParser", function () {
+ return Cc["@mozilla.org/xmlextras/domparser;1"]
+ .createInstance(Ci.nsIDOMParser);
+});
+
+loader.lazyGetter(this, "eventListenerService", function () {
+ return Cc["@mozilla.org/eventlistenerservice;1"]
+ .getService(Ci.nsIEventListenerService);
+});
+
+loader.lazyGetter(this, "CssLogic", () => require("devtools/server/css-logic").CssLogic);
+
+/**
+ * We only send nodeValue up to a certain size by default. This stuff
+ * controls that size.
+ */
+exports.DEFAULT_VALUE_SUMMARY_LENGTH = 50;
+var gValueSummaryLength = exports.DEFAULT_VALUE_SUMMARY_LENGTH;
+
+exports.getValueSummaryLength = function () {
+ return gValueSummaryLength;
+};
+
+exports.setValueSummaryLength = function (val) {
+ gValueSummaryLength = val;
+};
+
+// When the user selects a node to inspect in e10s, the parent process
+// has a CPOW that wraps the node being inspected. It uses the
+// message manager to send this node to the child, which stores the
+// node in gInspectingNode. Then a findInspectingNode request is sent
+// over the remote debugging protocol, and gInspectingNode is returned
+// to the parent as a NodeFront.
+var gInspectingNode = null;
+
+// We expect this function to be called from the child.js frame script
+// when it receives the node to be inspected over the message manager.
+exports.setInspectingNode = function (val) {
+ gInspectingNode = val;
+};
+
+/**
+ * Returns the properly cased version of the node's tag name, which can be
+ * used when displaying said name in the UI.
+ *
+ * @param {Node} rawNode
+ * Node for which we want the display name
+ * @return {String}
+ * Properly cased version of the node tag name
+ */
+const getNodeDisplayName = function (rawNode) {
+ if (rawNode.nodeName && !rawNode.localName) {
+ // The localName & prefix APIs have been moved from the Node interface to the Element
+ // interface. Use Node.nodeName as a fallback.
+ return rawNode.nodeName;
+ }
+ return (rawNode.prefix ? rawNode.prefix + ":" : "") + rawNode.localName;
+};
+exports.getNodeDisplayName = getNodeDisplayName;
+
+/**
+ * Server side of the node actor.
+ */
+var NodeActor = exports.NodeActor = protocol.ActorClassWithSpec(nodeSpec, {
+ initialize: function (walker, node) {
+ protocol.Actor.prototype.initialize.call(this, null);
+ this.walker = walker;
+ this.rawNode = node;
+ this._eventParsers = new EventParsers().parsers;
+
+ // Storing the original display of the node, to track changes when reflows
+ // occur
+ this.wasDisplayed = this.isDisplayed;
+ },
+
+ toString: function () {
+ return "[NodeActor " + this.actorID + " for " +
+ this.rawNode.toString() + "]";
+ },
+
+ /**
+ * Instead of storing a connection object, the NodeActor gets its connection
+ * from its associated walker.
+ */
+ get conn() {
+ return this.walker.conn;
+ },
+
+ isDocumentElement: function () {
+ return this.rawNode.ownerDocument &&
+ this.rawNode.ownerDocument.documentElement === this.rawNode;
+ },
+
+ destroy: function () {
+ protocol.Actor.prototype.destroy.call(this);
+
+ if (this.mutationObserver) {
+ if (!Cu.isDeadWrapper(this.mutationObserver)) {
+ this.mutationObserver.disconnect();
+ }
+ this.mutationObserver = null;
+ }
+ this.rawNode = null;
+ this.walker = null;
+ },
+
+ // Returns the JSON representation of this object over the wire.
+ form: function (detail) {
+ if (detail === "actorid") {
+ return this.actorID;
+ }
+
+ let parentNode = this.walker.parentNode(this);
+ let inlineTextChild = this.walker.inlineTextChild(this);
+
+ let form = {
+ actor: this.actorID,
+ baseURI: this.rawNode.baseURI,
+ parent: parentNode ? parentNode.actorID : undefined,
+ nodeType: this.rawNode.nodeType,
+ namespaceURI: this.rawNode.namespaceURI,
+ nodeName: this.rawNode.nodeName,
+ nodeValue: this.rawNode.nodeValue,
+ displayName: getNodeDisplayName(this.rawNode),
+ numChildren: this.numChildren,
+ inlineTextChild: inlineTextChild ? inlineTextChild.form() : undefined,
+
+ // doctype attributes
+ name: this.rawNode.name,
+ publicId: this.rawNode.publicId,
+ systemId: this.rawNode.systemId,
+
+ attrs: this.writeAttrs(),
+ isBeforePseudoElement: this.isBeforePseudoElement,
+ isAfterPseudoElement: this.isAfterPseudoElement,
+ isAnonymous: isAnonymous(this.rawNode),
+ isNativeAnonymous: isNativeAnonymous(this.rawNode),
+ isXBLAnonymous: isXBLAnonymous(this.rawNode),
+ isShadowAnonymous: isShadowAnonymous(this.rawNode),
+ pseudoClassLocks: this.writePseudoClassLocks(),
+
+ isDisplayed: this.isDisplayed,
+ isInHTMLDocument: this.rawNode.ownerDocument &&
+ this.rawNode.ownerDocument.contentType === "text/html",
+ hasEventListeners: this._hasEventListeners,
+ };
+
+ if (this.isDocumentElement()) {
+ form.isDocumentElement = true;
+ }
+
+ // Add an extra API for custom properties added by other
+ // modules/extensions.
+ form.setFormProperty = (name, value) => {
+ if (!form.props) {
+ form.props = {};
+ }
+ form.props[name] = value;
+ };
+
+ // Fire an event so, other modules can create its own properties
+ // that should be passed to the client (within the form.props field).
+ events.emit(NodeActor, "form", {
+ target: this,
+ data: form
+ });
+
+ return form;
+ },
+
+ /**
+ * Watch the given document node for mutations using the DOM observer
+ * API.
+ */
+ watchDocument: function (callback) {
+ let node = this.rawNode;
+ // Create the observer on the node's actor. The node will make sure
+ // the observer is cleaned up when the actor is released.
+ let observer = new node.defaultView.MutationObserver(callback);
+ observer.mergeAttributeRecords = true;
+ observer.observe(node, {
+ nativeAnonymousChildList: true,
+ attributes: true,
+ characterData: true,
+ characterDataOldValue: true,
+ childList: true,
+ subtree: true
+ });
+ this.mutationObserver = observer;
+ },
+
+ get isBeforePseudoElement() {
+ return this.rawNode.nodeName === "_moz_generated_content_before";
+ },
+
+ get isAfterPseudoElement() {
+ return this.rawNode.nodeName === "_moz_generated_content_after";
+ },
+
+ // Estimate the number of children that the walker will return without making
+ // a call to children() if possible.
+ get numChildren() {
+ // For pseudo elements, childNodes.length returns 1, but the walker
+ // will return 0.
+ if (this.isBeforePseudoElement || this.isAfterPseudoElement) {
+ return 0;
+ }
+
+ let rawNode = this.rawNode;
+ let numChildren = rawNode.childNodes.length;
+ let hasAnonChildren = rawNode.nodeType === Ci.nsIDOMNode.ELEMENT_NODE &&
+ rawNode.ownerDocument.getAnonymousNodes(rawNode);
+
+ let hasContentDocument = rawNode.contentDocument;
+ let hasSVGDocument = rawNode.getSVGDocument && rawNode.getSVGDocument();
+ if (numChildren === 0 && (hasContentDocument || hasSVGDocument)) {
+ // This might be an iframe with virtual children.
+ numChildren = 1;
+ }
+
+ // Normal counting misses ::before/::after. Also, some anonymous children
+ // may ultimately be skipped, so we have to consult with the walker.
+ if (numChildren === 0 || hasAnonChildren) {
+ numChildren = this.walker.children(this).nodes.length;
+ }
+
+ return numChildren;
+ },
+
+ get computedStyle() {
+ return CssLogic.getComputedStyle(this.rawNode);
+ },
+
+ /**
+ * Is the node's display computed style value other than "none"
+ */
+ get isDisplayed() {
+ // Consider all non-element nodes as displayed.
+ if (isNodeDead(this) ||
+ this.rawNode.nodeType !== Ci.nsIDOMNode.ELEMENT_NODE ||
+ this.isAfterPseudoElement ||
+ this.isBeforePseudoElement) {
+ return true;
+ }
+
+ let style = this.computedStyle;
+ if (!style) {
+ return true;
+ }
+
+ return style.display !== "none";
+ },
+
+ /**
+ * Are there event listeners that are listening on this node? This method
+ * uses all parsers registered via event-parsers.js.registerEventParser() to
+ * check if there are any event listeners.
+ */
+ get _hasEventListeners() {
+ let parsers = this._eventParsers;
+ for (let [, {hasListeners}] of parsers) {
+ try {
+ if (hasListeners && hasListeners(this.rawNode)) {
+ return true;
+ }
+ } catch (e) {
+ // An object attached to the node looked like a listener but wasn't...
+ // do nothing.
+ }
+ }
+ return false;
+ },
+
+ writeAttrs: function () {
+ if (!this.rawNode.attributes) {
+ return undefined;
+ }
+
+ return [...this.rawNode.attributes].map(attr => {
+ return {namespace: attr.namespace, name: attr.name, value: attr.value };
+ });
+ },
+
+ writePseudoClassLocks: function () {
+ if (this.rawNode.nodeType !== Ci.nsIDOMNode.ELEMENT_NODE) {
+ return undefined;
+ }
+ let ret = undefined;
+ for (let pseudo of PSEUDO_CLASSES) {
+ if (DOMUtils.hasPseudoClassLock(this.rawNode, pseudo)) {
+ ret = ret || [];
+ ret.push(pseudo);
+ }
+ }
+ return ret;
+ },
+
+ /**
+ * Gets event listeners and adds their information to the events array.
+ *
+ * @param {Node} node
+ * Node for which we are to get listeners.
+ */
+ getEventListeners: function (node) {
+ let parsers = this._eventParsers;
+ let dbg = this.parent().tabActor.makeDebugger();
+ let listeners = [];
+
+ for (let [, {getListeners, normalizeHandler}] of parsers) {
+ try {
+ let eventInfos = getListeners(node);
+
+ if (!eventInfos) {
+ continue;
+ }
+
+ for (let eventInfo of eventInfos) {
+ if (normalizeHandler) {
+ eventInfo.normalizeHandler = normalizeHandler;
+ }
+
+ this.processHandlerForEvent(node, listeners, dbg, eventInfo);
+ }
+ } catch (e) {
+ // An object attached to the node looked like a listener but wasn't...
+ // do nothing.
+ }
+ }
+
+ listeners.sort((a, b) => {
+ return a.type.localeCompare(b.type);
+ });
+
+ return listeners;
+ },
+
+ /**
+ * Process a handler
+ *
+ * @param {Node} node
+ * The node for which we want information.
+ * @param {Array} events
+ * The events array contains all event objects that we have gathered
+ * so far.
+ * @param {Debugger} dbg
+ * JSDebugger instance.
+ * @param {Object} eventInfo
+ * See event-parsers.js.registerEventParser() for a description of the
+ * eventInfo object.
+ *
+ * @return {Array}
+ * An array of objects where a typical object looks like this:
+ * {
+ * type: "click",
+ * handler: function() { doSomething() },
+ * origin: "http://www.mozilla.com",
+ * searchString: 'onclick="doSomething()"',
+ * tags: tags,
+ * DOM0: true,
+ * capturing: true,
+ * hide: {
+ * dom0: true
+ * }
+ * }
+ */
+ processHandlerForEvent: function (node, listeners, dbg, eventInfo) {
+ let type = eventInfo.type || "";
+ let handler = eventInfo.handler;
+ let tags = eventInfo.tags || "";
+ let hide = eventInfo.hide || {};
+ let override = eventInfo.override || {};
+ let global = Cu.getGlobalForObject(handler);
+ let globalDO = dbg.addDebuggee(global);
+ let listenerDO = globalDO.makeDebuggeeValue(handler);
+
+ if (eventInfo.normalizeHandler) {
+ listenerDO = eventInfo.normalizeHandler(listenerDO);
+ }
+
+ // If the listener is an object with a 'handleEvent' method, use that.
+ if (listenerDO.class === "Object" || listenerDO.class === "XULElement") {
+ let desc;
+
+ while (!desc && listenerDO) {
+ desc = listenerDO.getOwnPropertyDescriptor("handleEvent");
+ listenerDO = listenerDO.proto;
+ }
+
+ if (desc && desc.value) {
+ listenerDO = desc.value;
+ }
+ }
+
+ if (listenerDO.isBoundFunction) {
+ listenerDO = listenerDO.boundTargetFunction;
+ }
+
+ let script = listenerDO.script;
+ let scriptSource = script.source.text;
+ let functionSource =
+ scriptSource.substr(script.sourceStart, script.sourceLength);
+
+ /*
+ The script returned is the whole script and
+ scriptSource.substr(script.sourceStart, script.sourceLength) returns
+ something like this:
+ () { doSomething(); }
+
+ So we need to use some regex magic to get the appropriate function info
+ e.g.:
+ () => { ... }
+ function doit() { ... }
+ doit: function() { ... }
+ es6func() { ... }
+ var|let|const foo = function () { ... }
+ function generator*() { ... }
+ */
+ let scriptBeforeFunc = scriptSource.substr(0, script.sourceStart);
+ let matches = scriptBeforeFunc.match(RX_FUNC_NAME);
+ if (matches && matches.length > 0) {
+ functionSource = matches[0].trim() + functionSource;
+ }
+
+ let dom0 = false;
+
+ if (typeof node.hasAttribute !== "undefined") {
+ dom0 = !!node.hasAttribute("on" + type);
+ } else {
+ dom0 = !!node["on" + type];
+ }
+
+ let line = script.startLine;
+ let url = script.url;
+ let origin = url + (dom0 ? "" : ":" + line);
+ let searchString;
+
+ if (dom0) {
+ searchString = "on" + type + "=\"" + script.source.text + "\"";
+ } else {
+ scriptSource = " " + scriptSource;
+ }
+
+ let eventObj = {
+ type: typeof override.type !== "undefined" ? override.type : type,
+ handler: functionSource.trim(),
+ origin: typeof override.origin !== "undefined" ?
+ override.origin : origin,
+ searchString: typeof override.searchString !== "undefined" ?
+ override.searchString : searchString,
+ tags: tags,
+ DOM0: typeof override.dom0 !== "undefined" ? override.dom0 : dom0,
+ capturing: typeof override.capturing !== "undefined" ?
+ override.capturing : eventInfo.capturing,
+ hide: hide
+ };
+
+ listeners.push(eventObj);
+
+ dbg.removeDebuggee(globalDO);
+ },
+
+ /**
+ * Returns a LongStringActor with the node's value.
+ */
+ getNodeValue: function () {
+ return new LongStringActor(this.conn, this.rawNode.nodeValue || "");
+ },
+
+ /**
+ * Set the node's value to a given string.
+ */
+ setNodeValue: function (value) {
+ this.rawNode.nodeValue = value;
+ },
+
+ /**
+ * Get a unique selector string for this node.
+ */
+ getUniqueSelector: function () {
+ if (Cu.isDeadWrapper(this.rawNode)) {
+ return "";
+ }
+ return CssLogic.findCssSelector(this.rawNode);
+ },
+
+ /**
+ * Scroll the selected node into view.
+ */
+ scrollIntoView: function () {
+ this.rawNode.scrollIntoView(true);
+ },
+
+ /**
+ * Get the node's image data if any (for canvas and img nodes).
+ * Returns an imageData object with the actual data being a LongStringActor
+ * and a size json object.
+ * The image data is transmitted as a base64 encoded png data-uri.
+ * The method rejects if the node isn't an image or if the image is missing
+ *
+ * Accepts a maxDim request parameter to resize images that are larger. This
+ * is important as the resizing occurs server-side so that image-data being
+ * transfered in the longstring back to the client will be that much smaller
+ */
+ getImageData: function (maxDim) {
+ return imageToImageData(this.rawNode, maxDim).then(imageData => {
+ return {
+ data: LongStringActor(this.conn, imageData.data),
+ size: imageData.size
+ };
+ });
+ },
+
+ /**
+ * Get all event listeners that are listening on this node.
+ */
+ getEventListenerInfo: function () {
+ if (this.rawNode.nodeName.toLowerCase() === "html") {
+ return this.getEventListeners(this.rawNode.ownerGlobal);
+ }
+ return this.getEventListeners(this.rawNode);
+ },
+
+ /**
+ * Modify a node's attributes. Passed an array of modifications
+ * similar in format to "attributes" mutations.
+ * {
+ * attributeName: <string>
+ * attributeNamespace: <optional string>
+ * newValue: <optional string> - If null or undefined, the attribute
+ * will be removed.
+ * }
+ *
+ * Returns when the modifications have been made. Mutations will
+ * be queued for any changes made.
+ */
+ modifyAttributes: function (modifications) {
+ let rawNode = this.rawNode;
+ for (let change of modifications) {
+ if (change.newValue == null) {
+ if (change.attributeNamespace) {
+ rawNode.removeAttributeNS(change.attributeNamespace,
+ change.attributeName);
+ } else {
+ rawNode.removeAttribute(change.attributeName);
+ }
+ } else if (change.attributeNamespace) {
+ rawNode.setAttributeNS(change.attributeNamespace, change.attributeName,
+ change.newValue);
+ } else {
+ rawNode.setAttribute(change.attributeName, change.newValue);
+ }
+ }
+ },
+
+ /**
+ * Given the font and fill style, get the image data of a canvas with the
+ * preview text and font.
+ * Returns an imageData object with the actual data being a LongStringActor
+ * and the width of the text as a string.
+ * The image data is transmitted as a base64 encoded png data-uri.
+ */
+ getFontFamilyDataURL: function (font, fillStyle = "black") {
+ let doc = this.rawNode.ownerDocument;
+ let options = {
+ previewText: FONT_FAMILY_PREVIEW_TEXT,
+ previewFontSize: FONT_FAMILY_PREVIEW_TEXT_SIZE,
+ fillStyle: fillStyle
+ };
+ let { dataURL, size } = getFontPreviewData(font, doc, options);
+
+ return { data: LongStringActor(this.conn, dataURL), size: size };
+ }
+});
+
+/**
+ * Server side of a node list as returned by querySelectorAll()
+ */
+var NodeListActor = exports.NodeListActor = protocol.ActorClassWithSpec(nodeListSpec, {
+ typeName: "domnodelist",
+
+ initialize: function (walker, nodeList) {
+ protocol.Actor.prototype.initialize.call(this);
+ this.walker = walker;
+ this.nodeList = nodeList || [];
+ },
+
+ destroy: function () {
+ protocol.Actor.prototype.destroy.call(this);
+ },
+
+ /**
+ * Instead of storing a connection object, the NodeActor gets its connection
+ * from its associated walker.
+ */
+ get conn() {
+ return this.walker.conn;
+ },
+
+ /**
+ * Items returned by this actor should belong to the parent walker.
+ */
+ marshallPool: function () {
+ return this.walker;
+ },
+
+ // Returns the JSON representation of this object over the wire.
+ form: function () {
+ return {
+ actor: this.actorID,
+ length: this.nodeList ? this.nodeList.length : 0
+ };
+ },
+
+ /**
+ * Get a single node from the node list.
+ */
+ item: function (index) {
+ return this.walker.attachElement(this.nodeList[index]);
+ },
+
+ /**
+ * Get a range of the items from the node list.
+ */
+ items: function (start = 0, end = this.nodeList.length) {
+ let items = Array.prototype.slice.call(this.nodeList, start, end)
+ .map(item => this.walker._ref(item));
+ return this.walker.attachElements(items);
+ },
+
+ release: function () {}
+});
+
+/**
+ * Server side of the DOM walker.
+ */
+var WalkerActor = protocol.ActorClassWithSpec(walkerSpec, {
+ /**
+ * Create the WalkerActor
+ * @param DebuggerServerConnection conn
+ * The server connection.
+ */
+ initialize: function (conn, tabActor, options) {
+ protocol.Actor.prototype.initialize.call(this, conn);
+ this.tabActor = tabActor;
+ this.rootWin = tabActor.window;
+ this.rootDoc = this.rootWin.document;
+ this._refMap = new Map();
+ this._pendingMutations = [];
+ this._activePseudoClassLocks = new Set();
+ this.showAllAnonymousContent = options.showAllAnonymousContent;
+
+ this.walkerSearch = new WalkerSearch(this);
+
+ // Nodes which have been removed from the client's known
+ // ownership tree are considered "orphaned", and stored in
+ // this set.
+ this._orphaned = new Set();
+
+ // The client can tell the walker that it is interested in a node
+ // even when it is orphaned with the `retainNode` method. This
+ // list contains orphaned nodes that were so retained.
+ this._retainedOrphans = new Set();
+
+ this.onMutations = this.onMutations.bind(this);
+ this.onFrameLoad = this.onFrameLoad.bind(this);
+ this.onFrameUnload = this.onFrameUnload.bind(this);
+
+ events.on(tabActor, "will-navigate", this.onFrameUnload);
+ events.on(tabActor, "navigate", this.onFrameLoad);
+
+ // Ensure that the root document node actor is ready and
+ // managed.
+ this.rootNode = this.document();
+
+ this.layoutChangeObserver = getLayoutChangesObserver(this.tabActor);
+ this._onReflows = this._onReflows.bind(this);
+ this.layoutChangeObserver.on("reflows", this._onReflows);
+ this._onResize = this._onResize.bind(this);
+ this.layoutChangeObserver.on("resize", this._onResize);
+
+ this._onEventListenerChange = this._onEventListenerChange.bind(this);
+ eventListenerService.addListenerChangeListener(this._onEventListenerChange);
+ },
+
+ /**
+ * Callback for eventListenerService.addListenerChangeListener
+ * @param nsISimpleEnumerator changesEnum
+ * enumerator of nsIEventListenerChange
+ */
+ _onEventListenerChange: function (changesEnum) {
+ let changes = changesEnum.enumerate();
+ while (changes.hasMoreElements()) {
+ let current = changes.getNext().QueryInterface(Ci.nsIEventListenerChange);
+ let target = current.target;
+
+ if (this._refMap.has(target)) {
+ let actor = this.getNode(target);
+ let mutation = {
+ type: "events",
+ target: actor.actorID,
+ hasEventListeners: actor._hasEventListeners
+ };
+ this.queueMutation(mutation);
+ }
+ }
+ },
+
+ // Returns the JSON representation of this object over the wire.
+ form: function () {
+ return {
+ actor: this.actorID,
+ root: this.rootNode.form(),
+ traits: {
+ // FF42+ Inspector starts managing the Walker, while the inspector also
+ // starts cleaning itself up automatically on client disconnection.
+ // So that there is no need to manually release the walker anymore.
+ autoReleased: true,
+ // XXX: It seems silly that we need to tell the front which capabilities
+ // its actor has in this way when the target can use actorHasMethod. If
+ // this was ported to the protocol (Bug 1157048) we could call that
+ // inside of custom front methods and not need to do traits for this.
+ multiFrameQuerySelectorAll: true,
+ textSearch: true,
+ }
+ };
+ },
+
+ toString: function () {
+ return "[WalkerActor " + this.actorID + "]";
+ },
+
+ getDocumentWalker: function (node, whatToShow) {
+ // Allow native anon content (like <video> controls) if preffed on
+ let nodeFilter = this.showAllAnonymousContent
+ ? allAnonymousContentTreeWalkerFilter
+ : standardTreeWalkerFilter;
+ return new DocumentWalker(node, this.rootWin, whatToShow, nodeFilter);
+ },
+
+ destroy: function () {
+ if (this._destroyed) {
+ return;
+ }
+ this._destroyed = true;
+ protocol.Actor.prototype.destroy.call(this);
+ try {
+ this.clearPseudoClassLocks();
+ this._activePseudoClassLocks = null;
+
+ this._hoveredNode = null;
+ this.rootWin = null;
+ this.rootDoc = null;
+ this.rootNode = null;
+ this.layoutHelpers = null;
+ this._orphaned = null;
+ this._retainedOrphans = null;
+ this._refMap = null;
+
+ events.off(this.tabActor, "will-navigate", this.onFrameUnload);
+ events.off(this.tabActor, "navigate", this.onFrameLoad);
+
+ this.onFrameLoad = null;
+ this.onFrameUnload = null;
+
+ this.walkerSearch.destroy();
+
+ this.layoutChangeObserver.off("reflows", this._onReflows);
+ this.layoutChangeObserver.off("resize", this._onResize);
+ this.layoutChangeObserver = null;
+ releaseLayoutChangesObserver(this.tabActor);
+
+ eventListenerService.removeListenerChangeListener(
+ this._onEventListenerChange);
+
+ this.onMutations = null;
+
+ this.layoutActor = null;
+ this.tabActor = null;
+
+ events.emit(this, "destroyed");
+ } catch (e) {
+ console.error(e);
+ }
+ },
+
+ release: function () {},
+
+ unmanage: function (actor) {
+ if (actor instanceof NodeActor) {
+ if (this._activePseudoClassLocks &&
+ this._activePseudoClassLocks.has(actor)) {
+ this.clearPseudoClassLocks(actor);
+ }
+ this._refMap.delete(actor.rawNode);
+ }
+ protocol.Actor.prototype.unmanage.call(this, actor);
+ },
+
+ /**
+ * Determine if the walker has come across this DOM node before.
+ * @param {DOMNode} rawNode
+ * @return {Boolean}
+ */
+ hasNode: function (rawNode) {
+ return this._refMap.has(rawNode);
+ },
+
+ /**
+ * If the walker has come across this DOM node before, then get the
+ * corresponding node actor.
+ * @param {DOMNode} rawNode
+ * @return {NodeActor}
+ */
+ getNode: function (rawNode) {
+ return this._refMap.get(rawNode);
+ },
+
+ _ref: function (node) {
+ let actor = this.getNode(node);
+ if (actor) {
+ return actor;
+ }
+
+ actor = new NodeActor(this, node);
+
+ // Add the node actor as a child of this walker actor, assigning
+ // it an actorID.
+ this.manage(actor);
+ this._refMap.set(node, actor);
+
+ if (node.nodeType === Ci.nsIDOMNode.DOCUMENT_NODE) {
+ actor.watchDocument(this.onMutations);
+ }
+ return actor;
+ },
+
+ _onReflows: function (reflows) {
+ // Going through the nodes the walker knows about, see which ones have
+ // had their display changed and send a display-change event if any
+ let changes = [];
+ for (let [node, actor] of this._refMap) {
+ if (Cu.isDeadWrapper(node)) {
+ continue;
+ }
+
+ let isDisplayed = actor.isDisplayed;
+ if (isDisplayed !== actor.wasDisplayed) {
+ changes.push(actor);
+ // Updating the original value
+ actor.wasDisplayed = isDisplayed;
+ }
+ }
+
+ if (changes.length) {
+ events.emit(this, "display-change", changes);
+ }
+ },
+
+ /**
+ * When the browser window gets resized, relay the event to the front.
+ */
+ _onResize: function () {
+ events.emit(this, "resize");
+ },
+
+ /**
+ * This is kept for backward-compatibility reasons with older remote targets.
+ * Targets prior to bug 916443.
+ *
+ * pick/cancelPick are used to pick a node on click on the content
+ * document. But in their implementation prior to bug 916443, they don't allow
+ * highlighting on hover.
+ * The client-side now uses the highlighter actor's pick and cancelPick
+ * methods instead. The client-side uses the the highlightable trait found in
+ * the root actor to determine which version of pick to use.
+ *
+ * As for highlight, the new highlighter actor is used instead of the walker's
+ * highlight method. Same here though, the client-side uses the highlightable
+ * trait to dertermine which to use.
+ *
+ * Keeping these actor methods for now allows newer client-side debuggers to
+ * inspect fxos 1.2 remote targets or older firefox desktop remote targets.
+ */
+ pick: function () {},
+ cancelPick: function () {},
+ highlight: function (node) {},
+
+ /**
+ * Ensures that the node is attached and it can be accessed from the root.
+ *
+ * @param {(Node|NodeActor)} nodes The nodes
+ * @return {Object} An object compatible with the disconnectedNode type.
+ */
+ attachElement: function (node) {
+ let { nodes, newParents } = this.attachElements([node]);
+ return {
+ node: nodes[0],
+ newParents: newParents
+ };
+ },
+
+ /**
+ * Ensures that the nodes are attached and they can be accessed from the root.
+ *
+ * @param {(Node[]|NodeActor[])} nodes The nodes
+ * @return {Object} An object compatible with the disconnectedNodeArray type.
+ */
+ attachElements: function (nodes) {
+ let nodeActors = [];
+ let newParents = new Set();
+ for (let node of nodes) {
+ if (!(node instanceof NodeActor)) {
+ // If an anonymous node was passed in and we aren't supposed to know
+ // about it, then consult with the document walker as the source of
+ // truth about which elements exist.
+ if (!this.showAllAnonymousContent && isAnonymous(node)) {
+ node = this.getDocumentWalker(node).currentNode;
+ }
+
+ node = this._ref(node);
+ }
+
+ this.ensurePathToRoot(node, newParents);
+ // If nodes may be an array of raw nodes, we're sure to only have
+ // NodeActors with the following array.
+ nodeActors.push(node);
+ }
+
+ return {
+ nodes: nodeActors,
+ newParents: [...newParents]
+ };
+ },
+
+ /**
+ * Return the document node that contains the given node,
+ * or the root node if no node is specified.
+ * @param NodeActor node
+ * The node whose document is needed, or null to
+ * return the root.
+ */
+ document: function (node) {
+ let doc = isNodeDead(node) ? this.rootDoc : nodeDocument(node.rawNode);
+ return this._ref(doc);
+ },
+
+ /**
+ * Return the documentElement for the document containing the
+ * given node.
+ * @param NodeActor node
+ * The node whose documentElement is requested, or null
+ * to use the root document.
+ */
+ documentElement: function (node) {
+ let elt = isNodeDead(node)
+ ? this.rootDoc.documentElement
+ : nodeDocument(node.rawNode).documentElement;
+ return this._ref(elt);
+ },
+
+ /**
+ * Return all parents of the given node, ordered from immediate parent
+ * to root.
+ * @param NodeActor node
+ * The node whose parents are requested.
+ * @param object options
+ * Named options, including:
+ * `sameDocument`: If true, parents will be restricted to the same
+ * document as the node.
+ * `sameTypeRootTreeItem`: If true, this will not traverse across
+ * different types of docshells.
+ */
+ parents: function (node, options = {}) {
+ if (isNodeDead(node)) {
+ return [];
+ }
+
+ let walker = this.getDocumentWalker(node.rawNode);
+ let parents = [];
+ let cur;
+ while ((cur = walker.parentNode())) {
+ if (options.sameDocument &&
+ nodeDocument(cur) != nodeDocument(node.rawNode)) {
+ break;
+ }
+
+ if (options.sameTypeRootTreeItem &&
+ nodeDocshell(cur).sameTypeRootTreeItem !=
+ nodeDocshell(node.rawNode).sameTypeRootTreeItem) {
+ break;
+ }
+
+ parents.push(this._ref(cur));
+ }
+ return parents;
+ },
+
+ parentNode: function (node) {
+ let walker = this.getDocumentWalker(node.rawNode);
+ let parent = walker.parentNode();
+ if (parent) {
+ return this._ref(parent);
+ }
+ return null;
+ },
+
+ /**
+ * If the given NodeActor only has a single text node as a child with a text
+ * content small enough to be inlined, return that child's NodeActor.
+ *
+ * @param NodeActor node
+ */
+ inlineTextChild: function (node) {
+ // Quick checks to prevent creating a new walker if possible.
+ if (node.isBeforePseudoElement ||
+ node.isAfterPseudoElement ||
+ node.rawNode.nodeType != Ci.nsIDOMNode.ELEMENT_NODE ||
+ node.rawNode.children.length > 0) {
+ return undefined;
+ }
+
+ let docWalker = this.getDocumentWalker(node.rawNode);
+ let firstChild = docWalker.firstChild();
+
+ // Bail out if:
+ // - more than one child
+ // - unique child is not a text node
+ // - unique child is a text node, but is too long to be inlined
+ if (!firstChild ||
+ docWalker.nextSibling() ||
+ firstChild.nodeType !== Ci.nsIDOMNode.TEXT_NODE ||
+ firstChild.nodeValue.length > gValueSummaryLength
+ ) {
+ return undefined;
+ }
+
+ return this._ref(firstChild);
+ },
+
+ /**
+ * Mark a node as 'retained'.
+ *
+ * A retained node is not released when `releaseNode` is called on its
+ * parent, or when a parent is released with the `cleanup` option to
+ * `getMutations`.
+ *
+ * When a retained node's parent is released, a retained mode is added to
+ * the walker's "retained orphans" list.
+ *
+ * Retained nodes can be deleted by providing the `force` option to
+ * `releaseNode`. They will also be released when their document
+ * has been destroyed.
+ *
+ * Retaining a node makes no promise about its children; They can
+ * still be removed by normal means.
+ */
+ retainNode: function (node) {
+ node.retained = true;
+ },
+
+ /**
+ * Remove the 'retained' mark from a node. If the node was a
+ * retained orphan, release it.
+ */
+ unretainNode: function (node) {
+ node.retained = false;
+ if (this._retainedOrphans.has(node)) {
+ this._retainedOrphans.delete(node);
+ this.releaseNode(node);
+ }
+ },
+
+ /**
+ * Release actors for a node and all child nodes.
+ */
+ releaseNode: function (node, options = {}) {
+ if (isNodeDead(node)) {
+ return;
+ }
+
+ if (node.retained && !options.force) {
+ this._retainedOrphans.add(node);
+ return;
+ }
+
+ if (node.retained) {
+ // Forcing a retained node to go away.
+ this._retainedOrphans.delete(node);
+ }
+
+ let walker = this.getDocumentWalker(node.rawNode);
+
+ let child = walker.firstChild();
+ while (child) {
+ let childActor = this.getNode(child);
+ if (childActor) {
+ this.releaseNode(childActor, options);
+ }
+ child = walker.nextSibling();
+ }
+
+ node.destroy();
+ },
+
+ /**
+ * Add any nodes between `node` and the walker's root node that have not
+ * yet been seen by the client.
+ */
+ ensurePathToRoot: function (node, newParents = new Set()) {
+ if (!node) {
+ return newParents;
+ }
+ let walker = this.getDocumentWalker(node.rawNode);
+ let cur;
+ while ((cur = walker.parentNode())) {
+ let parent = this.getNode(cur);
+ if (!parent) {
+ // This parent didn't exist, so hasn't been seen by the client yet.
+ newParents.add(this._ref(cur));
+ } else {
+ // This parent did exist, so the client knows about it.
+ return newParents;
+ }
+ }
+ return newParents;
+ },
+
+ /**
+ * Return children of the given node. By default this method will return
+ * all children of the node, but there are options that can restrict this
+ * to a more manageable subset.
+ *
+ * @param NodeActor node
+ * The node whose children you're curious about.
+ * @param object options
+ * Named options:
+ * `maxNodes`: The set of nodes returned by the method will be no longer
+ * than maxNodes.
+ * `start`: If a node is specified, the list of nodes will start
+ * with the given child. Mutally exclusive with `center`.
+ * `center`: If a node is specified, the given node will be as centered
+ * as possible in the list, given how close to the ends of the child
+ * list it is. Mutually exclusive with `start`.
+ * `whatToShow`: A bitmask of node types that should be included. See
+ * https://developer.mozilla.org/en-US/docs/Web/API/NodeFilter.
+ *
+ * @returns an object with three items:
+ * hasFirst: true if the first child of the node is included in the list.
+ * hasLast: true if the last child of the node is included in the list.
+ * nodes: Child nodes returned by the request.
+ */
+ children: function (node, options = {}) {
+ if (isNodeDead(node)) {
+ return { hasFirst: true, hasLast: true, nodes: [] };
+ }
+
+ if (options.center && options.start) {
+ throw Error("Can't specify both 'center' and 'start' options.");
+ }
+ let maxNodes = options.maxNodes || -1;
+ if (maxNodes == -1) {
+ maxNodes = Number.MAX_VALUE;
+ }
+
+ // We're going to create a few document walkers with the same filter,
+ // make it easier.
+ let getFilteredWalker = documentWalkerNode => {
+ return this.getDocumentWalker(documentWalkerNode, options.whatToShow);
+ };
+
+ // Need to know the first and last child.
+ let rawNode = node.rawNode;
+ let firstChild = getFilteredWalker(rawNode).firstChild();
+ let lastChild = getFilteredWalker(rawNode).lastChild();
+
+ if (!firstChild) {
+ // No children, we're done.
+ return { hasFirst: true, hasLast: true, nodes: [] };
+ }
+
+ let start;
+ if (options.center) {
+ start = options.center.rawNode;
+ } else if (options.start) {
+ start = options.start.rawNode;
+ } else {
+ start = firstChild;
+ }
+
+ let nodes = [];
+
+ // Start by reading backward from the starting point if we're centering...
+ let backwardWalker = getFilteredWalker(start);
+ if (start != firstChild && options.center) {
+ backwardWalker.previousSibling();
+ let backwardCount = Math.floor(maxNodes / 2);
+ let backwardNodes = this._readBackward(backwardWalker, backwardCount);
+ nodes = backwardNodes;
+ }
+
+ // Then read forward by any slack left in the max children...
+ let forwardWalker = getFilteredWalker(start);
+ let forwardCount = maxNodes - nodes.length;
+ nodes = nodes.concat(this._readForward(forwardWalker, forwardCount));
+
+ // If there's any room left, it means we've run all the way to the end.
+ // If we're centering, check if there are more items to read at the front.
+ let remaining = maxNodes - nodes.length;
+ if (options.center && remaining > 0 && nodes[0].rawNode != firstChild) {
+ let firstNodes = this._readBackward(backwardWalker, remaining);
+
+ // Then put it all back together.
+ nodes = firstNodes.concat(nodes);
+ }
+
+ return {
+ hasFirst: nodes[0].rawNode == firstChild,
+ hasLast: nodes[nodes.length - 1].rawNode == lastChild,
+ nodes: nodes
+ };
+ },
+
+ /**
+ * Return siblings of the given node. By default this method will return
+ * all siblings of the node, but there are options that can restrict this
+ * to a more manageable subset.
+ *
+ * If `start` or `center` are not specified, this method will center on the
+ * node whose siblings are requested.
+ *
+ * @param NodeActor node
+ * The node whose children you're curious about.
+ * @param object options
+ * Named options:
+ * `maxNodes`: The set of nodes returned by the method will be no longer
+ * than maxNodes.
+ * `start`: If a node is specified, the list of nodes will start
+ * with the given child. Mutally exclusive with `center`.
+ * `center`: If a node is specified, the given node will be as centered
+ * as possible in the list, given how close to the ends of the child
+ * list it is. Mutually exclusive with `start`.
+ * `whatToShow`: A bitmask of node types that should be included. See
+ * https://developer.mozilla.org/en-US/docs/Web/API/NodeFilter.
+ *
+ * @returns an object with three items:
+ * hasFirst: true if the first child of the node is included in the list.
+ * hasLast: true if the last child of the node is included in the list.
+ * nodes: Child nodes returned by the request.
+ */
+ siblings: function (node, options = {}) {
+ if (isNodeDead(node)) {
+ return { hasFirst: true, hasLast: true, nodes: [] };
+ }
+
+ let parentNode = this.getDocumentWalker(node.rawNode, options.whatToShow)
+ .parentNode();
+ if (!parentNode) {
+ return {
+ hasFirst: true,
+ hasLast: true,
+ nodes: [node]
+ };
+ }
+
+ if (!(options.start || options.center)) {
+ options.center = node;
+ }
+
+ return this.children(this._ref(parentNode), options);
+ },
+
+ /**
+ * Get the next sibling of a given node. Getting nodes one at a time
+ * might be inefficient, be careful.
+ *
+ * @param object options
+ * Named options:
+ * `whatToShow`: A bitmask of node types that should be included. See
+ * https://developer.mozilla.org/en-US/docs/Web/API/NodeFilter.
+ */
+ nextSibling: function (node, options = {}) {
+ if (isNodeDead(node)) {
+ return null;
+ }
+
+ let walker = this.getDocumentWalker(node.rawNode, options.whatToShow);
+ let sibling = walker.nextSibling();
+ return sibling ? this._ref(sibling) : null;
+ },
+
+ /**
+ * Get the previous sibling of a given node. Getting nodes one at a time
+ * might be inefficient, be careful.
+ *
+ * @param object options
+ * Named options:
+ * `whatToShow`: A bitmask of node types that should be included. See
+ * https://developer.mozilla.org/en-US/docs/Web/API/NodeFilter.
+ */
+ previousSibling: function (node, options = {}) {
+ if (isNodeDead(node)) {
+ return null;
+ }
+
+ let walker = this.getDocumentWalker(node.rawNode, options.whatToShow);
+ let sibling = walker.previousSibling();
+ return sibling ? this._ref(sibling) : null;
+ },
+
+ /**
+ * Helper function for the `children` method: Read forward in the sibling
+ * list into an array with `count` items, including the current node.
+ */
+ _readForward: function (walker, count) {
+ let ret = [];
+ let node = walker.currentNode;
+ do {
+ ret.push(this._ref(node));
+ node = walker.nextSibling();
+ } while (node && --count);
+ return ret;
+ },
+
+ /**
+ * Helper function for the `children` method: Read backward in the sibling
+ * list into an array with `count` items, including the current node.
+ */
+ _readBackward: function (walker, count) {
+ let ret = [];
+ let node = walker.currentNode;
+ do {
+ ret.push(this._ref(node));
+ node = walker.previousSibling();
+ } while (node && --count);
+ ret.reverse();
+ return ret;
+ },
+
+ /**
+ * Return the node that the parent process has asked to
+ * inspect. This node is expected to be stored in gInspectingNode
+ * (which is set by a message manager message to the child.js frame
+ * script). The node is returned over the remote debugging protocol
+ * as a NodeFront.
+ */
+ findInspectingNode: function () {
+ let node = gInspectingNode;
+ if (!node) {
+ return {};
+ }
+
+ return this.attachElement(node);
+ },
+
+ /**
+ * Return the first node in the document that matches the given selector.
+ * See https://developer.mozilla.org/en-US/docs/Web/API/Element.querySelector
+ *
+ * @param NodeActor baseNode
+ * @param string selector
+ */
+ querySelector: function (baseNode, selector) {
+ if (isNodeDead(baseNode)) {
+ return {};
+ }
+
+ let node = baseNode.rawNode.querySelector(selector);
+ if (!node) {
+ return {};
+ }
+
+ return this.attachElement(node);
+ },
+
+ /**
+ * Return a NodeListActor with all nodes that match the given selector.
+ * See https://developer.mozilla.org/en-US/docs/Web/API/Element.querySelectorAll
+ *
+ * @param NodeActor baseNode
+ * @param string selector
+ */
+ querySelectorAll: function (baseNode, selector) {
+ let nodeList = null;
+
+ try {
+ nodeList = baseNode.rawNode.querySelectorAll(selector);
+ } catch (e) {
+ // Bad selector. Do nothing as the selector can come from a searchbox.
+ }
+
+ return new NodeListActor(this, nodeList);
+ },
+
+ /**
+ * Get a list of nodes that match the given selector in all known frames of
+ * the current content page.
+ * @param {String} selector.
+ * @return {Array}
+ */
+ _multiFrameQuerySelectorAll: function (selector) {
+ let nodes = [];
+
+ for (let {document} of this.tabActor.windows) {
+ try {
+ nodes = [...nodes, ...document.querySelectorAll(selector)];
+ } catch (e) {
+ // Bad selector. Do nothing as the selector can come from a searchbox.
+ }
+ }
+
+ return nodes;
+ },
+
+ /**
+ * Return a NodeListActor with all nodes that match the given selector in all
+ * frames of the current content page.
+ * @param {String} selector
+ */
+ multiFrameQuerySelectorAll: function (selector) {
+ return new NodeListActor(this, this._multiFrameQuerySelectorAll(selector));
+ },
+
+ /**
+ * Search the document for a given string.
+ * Results will be searched with the walker-search module (searches through
+ * tag names, attribute names and values, and text contents).
+ *
+ * @returns {searchresult}
+ * - {NodeList} list
+ * - {Array<Object>} metadata. Extra information with indices that
+ * match up with node list.
+ */
+ search: function (query) {
+ let results = this.walkerSearch.search(query);
+ let nodeList = new NodeListActor(this, results.map(r => r.node));
+
+ return {
+ list: nodeList,
+ metadata: []
+ };
+ },
+
+ /**
+ * Returns a list of matching results for CSS selector autocompletion.
+ *
+ * @param string query
+ * The selector query being completed
+ * @param string completing
+ * The exact token being completed out of the query
+ * @param string selectorState
+ * One of "pseudo", "id", "tag", "class", "null"
+ */
+ getSuggestionsForQuery: function (query, completing, selectorState) {
+ let sugs = {
+ classes: new Map(),
+ tags: new Map(),
+ ids: new Map()
+ };
+ let result = [];
+ let nodes = null;
+ // Filtering and sorting the results so that protocol transfer is miminal.
+ switch (selectorState) {
+ case "pseudo":
+ result = PSEUDO_SELECTORS.filter(item => {
+ return item[0].startsWith(":" + completing);
+ });
+ break;
+
+ case "class":
+ if (!query) {
+ nodes = this._multiFrameQuerySelectorAll("[class]");
+ } else {
+ nodes = this._multiFrameQuerySelectorAll(query);
+ }
+ for (let node of nodes) {
+ for (let className of node.classList) {
+ sugs.classes.set(className, (sugs.classes.get(className)|0) + 1);
+ }
+ }
+ sugs.classes.delete("");
+ sugs.classes.delete(HIDDEN_CLASS);
+ for (let [className, count] of sugs.classes) {
+ if (className.startsWith(completing)) {
+ result.push(["." + CSS.escape(className), count, selectorState]);
+ }
+ }
+ break;
+
+ case "id":
+ if (!query) {
+ nodes = this._multiFrameQuerySelectorAll("[id]");
+ } else {
+ nodes = this._multiFrameQuerySelectorAll(query);
+ }
+ for (let node of nodes) {
+ sugs.ids.set(node.id, (sugs.ids.get(node.id)|0) + 1);
+ }
+ for (let [id, count] of sugs.ids) {
+ if (id.startsWith(completing) && id !== "") {
+ result.push(["#" + CSS.escape(id), count, selectorState]);
+ }
+ }
+ break;
+
+ case "tag":
+ if (!query) {
+ nodes = this._multiFrameQuerySelectorAll("*");
+ } else {
+ nodes = this._multiFrameQuerySelectorAll(query);
+ }
+ for (let node of nodes) {
+ let tag = node.localName;
+ sugs.tags.set(tag, (sugs.tags.get(tag)|0) + 1);
+ }
+ for (let [tag, count] of sugs.tags) {
+ if ((new RegExp("^" + completing + ".*", "i")).test(tag)) {
+ result.push([tag, count, selectorState]);
+ }
+ }
+
+ // For state 'tag' (no preceding # or .) and when there's no query (i.e.
+ // only one word) then search for the matching classes and ids
+ if (!query) {
+ result = [
+ ...result,
+ ...this.getSuggestionsForQuery(null, completing, "class")
+ .suggestions,
+ ...this.getSuggestionsForQuery(null, completing, "id")
+ .suggestions
+ ];
+ }
+
+ break;
+
+ case "null":
+ nodes = this._multiFrameQuerySelectorAll(query);
+ for (let node of nodes) {
+ sugs.ids.set(node.id, (sugs.ids.get(node.id)|0) + 1);
+ let tag = node.localName;
+ sugs.tags.set(tag, (sugs.tags.get(tag)|0) + 1);
+ for (let className of node.classList) {
+ sugs.classes.set(className, (sugs.classes.get(className)|0) + 1);
+ }
+ }
+ for (let [tag, count] of sugs.tags) {
+ tag && result.push([tag, count]);
+ }
+ for (let [id, count] of sugs.ids) {
+ id && result.push(["#" + id, count]);
+ }
+ sugs.classes.delete("");
+ sugs.classes.delete(HIDDEN_CLASS);
+ for (let [className, count] of sugs.classes) {
+ className && result.push(["." + className, count]);
+ }
+ }
+
+ // Sort by count (desc) and name (asc)
+ result = result.sort((a, b) => {
+ // Computed a sortable string with first the inverted count, then the name
+ let sortA = (10000 - a[1]) + a[0];
+ let sortB = (10000 - b[1]) + b[0];
+
+ // Prefixing ids, classes and tags, to group results
+ let firstA = a[0].substring(0, 1);
+ let firstB = b[0].substring(0, 1);
+
+ if (firstA === "#") {
+ sortA = "2" + sortA;
+ } else if (firstA === ".") {
+ sortA = "1" + sortA;
+ } else {
+ sortA = "0" + sortA;
+ }
+
+ if (firstB === "#") {
+ sortB = "2" + sortB;
+ } else if (firstB === ".") {
+ sortB = "1" + sortB;
+ } else {
+ sortB = "0" + sortB;
+ }
+
+ // String compare
+ return sortA.localeCompare(sortB);
+ });
+
+ result.slice(0, 25);
+
+ return {
+ query: query,
+ suggestions: result
+ };
+ },
+
+ /**
+ * Add a pseudo-class lock to a node.
+ *
+ * @param NodeActor node
+ * @param string pseudo
+ * A pseudoclass: ':hover', ':active', ':focus'
+ * @param options
+ * Options object:
+ * `parents`: True if the pseudo-class should be added
+ * to parent nodes.
+ *
+ * @returns An empty packet. A "pseudoClassLock" mutation will
+ * be queued for any changed nodes.
+ */
+ addPseudoClassLock: function (node, pseudo, options = {}) {
+ if (isNodeDead(node)) {
+ return;
+ }
+
+ // There can be only one node locked per pseudo, so dismiss all existing
+ // ones
+ for (let locked of this._activePseudoClassLocks) {
+ if (DOMUtils.hasPseudoClassLock(locked.rawNode, pseudo)) {
+ this._removePseudoClassLock(locked, pseudo);
+ }
+ }
+
+ this._addPseudoClassLock(node, pseudo);
+
+ if (!options.parents) {
+ return;
+ }
+
+ let walker = this.getDocumentWalker(node.rawNode);
+ let cur;
+ while ((cur = walker.parentNode())) {
+ let curNode = this._ref(cur);
+ this._addPseudoClassLock(curNode, pseudo);
+ }
+ },
+
+ _queuePseudoClassMutation: function (node) {
+ this.queueMutation({
+ target: node.actorID,
+ type: "pseudoClassLock",
+ pseudoClassLocks: node.writePseudoClassLocks()
+ });
+ },
+
+ _addPseudoClassLock: function (node, pseudo) {
+ if (node.rawNode.nodeType !== Ci.nsIDOMNode.ELEMENT_NODE) {
+ return false;
+ }
+ DOMUtils.addPseudoClassLock(node.rawNode, pseudo);
+ this._activePseudoClassLocks.add(node);
+ this._queuePseudoClassMutation(node);
+ return true;
+ },
+
+ _installHelperSheet: function (node) {
+ if (!this.installedHelpers) {
+ this.installedHelpers = new WeakMap();
+ }
+ let win = node.rawNode.ownerDocument.defaultView;
+ if (!this.installedHelpers.has(win)) {
+ let { Style } = require("sdk/stylesheet/style");
+ let { attach } = require("sdk/content/mod");
+ let style = Style({source: HELPER_SHEET, type: "agent" });
+ attach(style, win);
+ this.installedHelpers.set(win, style);
+ }
+ },
+
+ hideNode: function (node) {
+ if (isNodeDead(node)) {
+ return;
+ }
+
+ this._installHelperSheet(node);
+ node.rawNode.classList.add(HIDDEN_CLASS);
+ },
+
+ unhideNode: function (node) {
+ if (isNodeDead(node)) {
+ return;
+ }
+
+ node.rawNode.classList.remove(HIDDEN_CLASS);
+ },
+
+ /**
+ * Remove a pseudo-class lock from a node.
+ *
+ * @param NodeActor node
+ * @param string pseudo
+ * A pseudoclass: ':hover', ':active', ':focus'
+ * @param options
+ * Options object:
+ * `parents`: True if the pseudo-class should be removed
+ * from parent nodes.
+ *
+ * @returns An empty response. "pseudoClassLock" mutations
+ * will be emitted for any changed nodes.
+ */
+ removePseudoClassLock: function (node, pseudo, options = {}) {
+ if (isNodeDead(node)) {
+ return;
+ }
+
+ this._removePseudoClassLock(node, pseudo);
+
+ // Remove pseudo class for children as we don't want to allow
+ // turning it on for some childs without setting it on some parents
+ for (let locked of this._activePseudoClassLocks) {
+ if (node.rawNode.contains(locked.rawNode) &&
+ DOMUtils.hasPseudoClassLock(locked.rawNode, pseudo)) {
+ this._removePseudoClassLock(locked, pseudo);
+ }
+ }
+
+ if (!options.parents) {
+ return;
+ }
+
+ let walker = this.getDocumentWalker(node.rawNode);
+ let cur;
+ while ((cur = walker.parentNode())) {
+ let curNode = this._ref(cur);
+ this._removePseudoClassLock(curNode, pseudo);
+ }
+ },
+
+ _removePseudoClassLock: function (node, pseudo) {
+ if (node.rawNode.nodeType != Ci.nsIDOMNode.ELEMENT_NODE) {
+ return false;
+ }
+ DOMUtils.removePseudoClassLock(node.rawNode, pseudo);
+ if (!node.writePseudoClassLocks()) {
+ this._activePseudoClassLocks.delete(node);
+ }
+
+ this._queuePseudoClassMutation(node);
+ return true;
+ },
+
+ /**
+ * Clear all the pseudo-classes on a given node or all nodes.
+ * @param {NodeActor} node Optional node to clear pseudo-classes on
+ */
+ clearPseudoClassLocks: function (node) {
+ if (node && isNodeDead(node)) {
+ return;
+ }
+
+ if (node) {
+ DOMUtils.clearPseudoClassLocks(node.rawNode);
+ this._activePseudoClassLocks.delete(node);
+ this._queuePseudoClassMutation(node);
+ } else {
+ for (let locked of this._activePseudoClassLocks) {
+ DOMUtils.clearPseudoClassLocks(locked.rawNode);
+ this._activePseudoClassLocks.delete(locked);
+ this._queuePseudoClassMutation(locked);
+ }
+ }
+ },
+
+ /**
+ * Get a node's innerHTML property.
+ */
+ innerHTML: function (node) {
+ let html = "";
+ if (!isNodeDead(node)) {
+ html = node.rawNode.innerHTML;
+ }
+ return LongStringActor(this.conn, html);
+ },
+
+ /**
+ * Set a node's innerHTML property.
+ *
+ * @param {NodeActor} node The node.
+ * @param {string} value The piece of HTML content.
+ */
+ setInnerHTML: function (node, value) {
+ if (isNodeDead(node)) {
+ return;
+ }
+
+ let rawNode = node.rawNode;
+ if (rawNode.nodeType !== rawNode.ownerDocument.ELEMENT_NODE) {
+ throw new Error("Can only change innerHTML to element nodes");
+ }
+ rawNode.innerHTML = value;
+ },
+
+ /**
+ * Get a node's outerHTML property.
+ *
+ * @param {NodeActor} node The node.
+ */
+ outerHTML: function (node) {
+ let outerHTML = "";
+ if (!isNodeDead(node)) {
+ outerHTML = node.rawNode.outerHTML;
+ }
+ return LongStringActor(this.conn, outerHTML);
+ },
+
+ /**
+ * Set a node's outerHTML property.
+ *
+ * @param {NodeActor} node The node.
+ * @param {string} value The piece of HTML content.
+ */
+ setOuterHTML: function (node, value) {
+ if (isNodeDead(node)) {
+ return;
+ }
+
+ let parsedDOM = DOMParser.parseFromString(value, "text/html");
+ let rawNode = node.rawNode;
+ let parentNode = rawNode.parentNode;
+
+ // Special case for head and body. Setting document.body.outerHTML
+ // creates an extra <head> tag, and document.head.outerHTML creates
+ // an extra <body>. So instead we will call replaceChild with the
+ // parsed DOM, assuming that they aren't trying to set both tags at once.
+ if (rawNode.tagName === "BODY") {
+ if (parsedDOM.head.innerHTML === "") {
+ parentNode.replaceChild(parsedDOM.body, rawNode);
+ } else {
+ rawNode.outerHTML = value;
+ }
+ } else if (rawNode.tagName === "HEAD") {
+ if (parsedDOM.body.innerHTML === "") {
+ parentNode.replaceChild(parsedDOM.head, rawNode);
+ } else {
+ rawNode.outerHTML = value;
+ }
+ } else if (node.isDocumentElement()) {
+ // Unable to set outerHTML on the document element. Fall back by
+ // setting attributes manually, then replace the body and head elements.
+ let finalAttributeModifications = [];
+ let attributeModifications = {};
+ for (let attribute of rawNode.attributes) {
+ attributeModifications[attribute.name] = null;
+ }
+ for (let attribute of parsedDOM.documentElement.attributes) {
+ attributeModifications[attribute.name] = attribute.value;
+ }
+ for (let key in attributeModifications) {
+ finalAttributeModifications.push({
+ attributeName: key,
+ newValue: attributeModifications[key]
+ });
+ }
+ node.modifyAttributes(finalAttributeModifications);
+ rawNode.replaceChild(parsedDOM.head, rawNode.querySelector("head"));
+ rawNode.replaceChild(parsedDOM.body, rawNode.querySelector("body"));
+ } else {
+ rawNode.outerHTML = value;
+ }
+ },
+
+ /**
+ * Insert adjacent HTML to a node.
+ *
+ * @param {Node} node
+ * @param {string} position One of "beforeBegin", "afterBegin", "beforeEnd",
+ * "afterEnd" (see Element.insertAdjacentHTML).
+ * @param {string} value The HTML content.
+ */
+ insertAdjacentHTML: function (node, position, value) {
+ if (isNodeDead(node)) {
+ return {node: [], newParents: []};
+ }
+
+ let rawNode = node.rawNode;
+ let isInsertAsSibling = position === "beforeBegin" ||
+ position === "afterEnd";
+
+ // Don't insert anything adjacent to the document element.
+ if (isInsertAsSibling && node.isDocumentElement()) {
+ throw new Error("Can't insert adjacent element to the root.");
+ }
+
+ let rawParentNode = rawNode.parentNode;
+ if (!rawParentNode && isInsertAsSibling) {
+ throw new Error("Can't insert as sibling without parent node.");
+ }
+
+ // We can't use insertAdjacentHTML, because we want to return the nodes
+ // being created (so the front can remove them if the user undoes
+ // the change). So instead, use Range.createContextualFragment().
+ let range = rawNode.ownerDocument.createRange();
+ if (position === "beforeBegin" || position === "afterEnd") {
+ range.selectNode(rawNode);
+ } else {
+ range.selectNodeContents(rawNode);
+ }
+ let docFrag = range.createContextualFragment(value);
+ let newRawNodes = Array.from(docFrag.childNodes);
+ switch (position) {
+ case "beforeBegin":
+ rawParentNode.insertBefore(docFrag, rawNode);
+ break;
+ case "afterEnd":
+ // Note: if the second argument is null, rawParentNode.insertBefore
+ // behaves like rawParentNode.appendChild.
+ rawParentNode.insertBefore(docFrag, rawNode.nextSibling);
+ break;
+ case "afterBegin":
+ rawNode.insertBefore(docFrag, rawNode.firstChild);
+ break;
+ case "beforeEnd":
+ rawNode.appendChild(docFrag);
+ break;
+ default:
+ throw new Error("Invalid position value. Must be either " +
+ "'beforeBegin', 'beforeEnd', 'afterBegin' or 'afterEnd'.");
+ }
+
+ return this.attachElements(newRawNodes);
+ },
+
+ /**
+ * Duplicate a specified node
+ *
+ * @param {NodeActor} node The node to duplicate.
+ */
+ duplicateNode: function ({rawNode}) {
+ let clonedNode = rawNode.cloneNode(true);
+ rawNode.parentNode.insertBefore(clonedNode, rawNode.nextSibling);
+ },
+
+ /**
+ * Test whether a node is a document or a document element.
+ *
+ * @param {NodeActor} node The node to remove.
+ * @return {boolean} True if the node is a document or a document element.
+ */
+ isDocumentOrDocumentElementNode: function (node) {
+ return ((node.rawNode.ownerDocument &&
+ node.rawNode.ownerDocument.documentElement === this.rawNode) ||
+ node.rawNode.nodeType === Ci.nsIDOMNode.DOCUMENT_NODE);
+ },
+
+ /**
+ * Removes a node from its parent node.
+ *
+ * @param {NodeActor} node The node to remove.
+ * @returns The node's nextSibling before it was removed.
+ */
+ removeNode: function (node) {
+ if (isNodeDead(node) || this.isDocumentOrDocumentElementNode(node)) {
+ throw Error("Cannot remove document, document elements or dead nodes.");
+ }
+
+ let nextSibling = this.nextSibling(node);
+ node.rawNode.remove();
+ // Mutation events will take care of the rest.
+ return nextSibling;
+ },
+
+ /**
+ * Removes an array of nodes from their parent node.
+ *
+ * @param {NodeActor[]} nodes The nodes to remove.
+ */
+ removeNodes: function (nodes) {
+ // Check that all nodes are valid before processing the removals.
+ for (let node of nodes) {
+ if (isNodeDead(node) || this.isDocumentOrDocumentElementNode(node)) {
+ throw Error("Cannot remove document, document elements or dead nodes");
+ }
+ }
+
+ for (let node of nodes) {
+ node.rawNode.remove();
+ // Mutation events will take care of the rest.
+ }
+ },
+
+ /**
+ * Insert a node into the DOM.
+ */
+ insertBefore: function (node, parent, sibling) {
+ if (isNodeDead(node) ||
+ isNodeDead(parent) ||
+ (sibling && isNodeDead(sibling))) {
+ return;
+ }
+
+ let rawNode = node.rawNode;
+ let rawParent = parent.rawNode;
+ let rawSibling = sibling ? sibling.rawNode : null;
+
+ // Don't bother inserting a node if the document position isn't going
+ // to change. This prevents needless iframes reloading and mutations.
+ if (rawNode.parentNode === rawParent) {
+ let currentNextSibling = this.nextSibling(node);
+ currentNextSibling = currentNextSibling ? currentNextSibling.rawNode :
+ null;
+
+ if (rawNode === rawSibling || currentNextSibling === rawSibling) {
+ return;
+ }
+ }
+
+ rawParent.insertBefore(rawNode, rawSibling);
+ },
+
+ /**
+ * Editing a node's tagname actually means creating a new node with the same
+ * attributes, removing the node and inserting the new one instead.
+ * This method does not return anything as mutation events are taking care of
+ * informing the consumers about changes.
+ */
+ editTagName: function (node, tagName) {
+ if (isNodeDead(node)) {
+ return null;
+ }
+
+ let oldNode = node.rawNode;
+
+ // Create a new element with the same attributes as the current element and
+ // prepare to replace the current node with it.
+ let newNode;
+ try {
+ newNode = nodeDocument(oldNode).createElement(tagName);
+ } catch (x) {
+ // Failed to create a new element with that tag name, ignore the change,
+ // and signal the error to the front.
+ return Promise.reject(new Error("Could not change node's tagName to " + tagName));
+ }
+
+ let attrs = oldNode.attributes;
+ for (let i = 0; i < attrs.length; i++) {
+ newNode.setAttribute(attrs[i].name, attrs[i].value);
+ }
+
+ // Insert the new node, and transfer the old node's children.
+ oldNode.parentNode.insertBefore(newNode, oldNode);
+ while (oldNode.firstChild) {
+ newNode.appendChild(oldNode.firstChild);
+ }
+
+ oldNode.remove();
+ return null;
+ },
+
+ /**
+ * Get any pending mutation records. Must be called by the client after
+ * the `new-mutations` notification is received. Returns an array of
+ * mutation records.
+ *
+ * Mutation records have a basic structure:
+ *
+ * {
+ * type: attributes|characterData|childList,
+ * target: <domnode actor ID>,
+ * }
+ *
+ * And additional attributes based on the mutation type:
+ *
+ * `attributes` type:
+ * attributeName: <string> - the attribute that changed
+ * attributeNamespace: <string> - the attribute's namespace URI, if any.
+ * newValue: <string> - The new value of the attribute, if any.
+ *
+ * `characterData` type:
+ * newValue: <string> - the new nodeValue for the node
+ *
+ * `childList` type is returned when the set of children for a node
+ * has changed. Includes extra data, which can be used by the client to
+ * maintain its ownership subtree.
+ *
+ * added: array of <domnode actor ID> - The list of actors *previously
+ * seen by the client* that were added to the target node.
+ * removed: array of <domnode actor ID> The list of actors *previously
+ * seen by the client* that were removed from the target node.
+ * inlineTextChild: If the node now has a single text child, it will
+ * be sent here.
+ *
+ * Actors that are included in a MutationRecord's `removed` but
+ * not in an `added` have been removed from the client's ownership
+ * tree (either by being moved under a node the client has seen yet
+ * or by being removed from the tree entirely), and is considered
+ * 'orphaned'.
+ *
+ * Keep in mind that if a node that the client hasn't seen is moved
+ * into or out of the target node, it will not be included in the
+ * removedNodes and addedNodes list, so if the client is interested
+ * in the new set of children it needs to issue a `children` request.
+ */
+ getMutations: function (options = {}) {
+ let pending = this._pendingMutations || [];
+ this._pendingMutations = [];
+
+ if (options.cleanup) {
+ for (let node of this._orphaned) {
+ // Release the orphaned node. Nodes or children that have been
+ // retained will be moved to this._retainedOrphans.
+ this.releaseNode(node);
+ }
+ this._orphaned = new Set();
+ }
+
+ return pending;
+ },
+
+ queueMutation: function (mutation) {
+ if (!this.actorID || this._destroyed) {
+ // We've been destroyed, don't bother queueing this mutation.
+ return;
+ }
+ // We only send the `new-mutations` notification once, until the client
+ // fetches mutations with the `getMutations` packet.
+ let needEvent = this._pendingMutations.length === 0;
+
+ this._pendingMutations.push(mutation);
+
+ if (needEvent) {
+ events.emit(this, "new-mutations");
+ }
+ },
+
+ /**
+ * Handles mutations from the DOM mutation observer API.
+ *
+ * @param array[MutationRecord] mutations
+ * See https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver#MutationRecord
+ */
+ onMutations: function (mutations) {
+ // Notify any observers that want *all* mutations (even on nodes that aren't
+ // referenced). This is not sent over the protocol so can only be used by
+ // scripts running in the server process.
+ events.emit(this, "any-mutation");
+
+ for (let change of mutations) {
+ let targetActor = this.getNode(change.target);
+ if (!targetActor) {
+ continue;
+ }
+ let targetNode = change.target;
+ let type = change.type;
+ let mutation = {
+ type: type,
+ target: targetActor.actorID,
+ };
+
+ if (type === "attributes") {
+ mutation.attributeName = change.attributeName;
+ mutation.attributeNamespace = change.attributeNamespace || undefined;
+ mutation.newValue = targetNode.hasAttribute(mutation.attributeName) ?
+ targetNode.getAttribute(mutation.attributeName)
+ : null;
+ } else if (type === "characterData") {
+ mutation.newValue = targetNode.nodeValue;
+ this._maybeQueueInlineTextChildMutation(change, targetNode);
+ } else if (type === "childList" || type === "nativeAnonymousChildList") {
+ // Get the list of removed and added actors that the client has seen
+ // so that it can keep its ownership tree up to date.
+ let removedActors = [];
+ let addedActors = [];
+ for (let removed of change.removedNodes) {
+ let removedActor = this.getNode(removed);
+ if (!removedActor) {
+ // If the client never encountered this actor we don't need to
+ // mention that it was removed.
+ continue;
+ }
+ // While removed from the tree, nodes are saved as orphaned.
+ this._orphaned.add(removedActor);
+ removedActors.push(removedActor.actorID);
+ }
+ for (let added of change.addedNodes) {
+ let addedActor = this.getNode(added);
+ if (!addedActor) {
+ // If the client never encounted this actor we don't need to tell
+ // it about its addition for ownership tree purposes - if the
+ // client wants to see the new nodes it can ask for children.
+ continue;
+ }
+ // The actor is reconnected to the ownership tree, unorphan
+ // it and let the client know so that its ownership tree is up
+ // to date.
+ this._orphaned.delete(addedActor);
+ addedActors.push(addedActor.actorID);
+ }
+
+ mutation.numChildren = targetActor.numChildren;
+ mutation.removed = removedActors;
+ mutation.added = addedActors;
+
+ let inlineTextChild = this.inlineTextChild(targetActor);
+ if (inlineTextChild) {
+ mutation.inlineTextChild = inlineTextChild.form();
+ }
+ }
+ this.queueMutation(mutation);
+ }
+ },
+
+ /**
+ * Check if the provided mutation could change the way the target element is
+ * inlined with its parent node. If it might, a custom mutation of type
+ * "inlineTextChild" will be queued.
+ *
+ * @param {MutationRecord} mutation
+ * A characterData type mutation
+ */
+ _maybeQueueInlineTextChildMutation: function (mutation) {
+ let {oldValue, target} = mutation;
+ let newValue = target.nodeValue;
+ let limit = gValueSummaryLength;
+
+ if ((oldValue.length <= limit && newValue.length <= limit) ||
+ (oldValue.length > limit && newValue.length > limit)) {
+ // Bail out if the new & old values are both below/above the size limit.
+ return;
+ }
+
+ let parentActor = this.getNode(target.parentNode);
+ if (!parentActor || parentActor.rawNode.children.length > 0) {
+ // If the parent node has other children, a character data mutation will
+ // not change anything regarding inlining text nodes.
+ return;
+ }
+
+ let inlineTextChild = this.inlineTextChild(parentActor);
+ this.queueMutation({
+ type: "inlineTextChild",
+ target: parentActor.actorID,
+ inlineTextChild:
+ inlineTextChild ? inlineTextChild.form() : undefined
+ });
+ },
+
+ onFrameLoad: function ({ window, isTopLevel }) {
+ if (isTopLevel) {
+ // If we initialize the inspector while the document is loading,
+ // we may already have a root document set in the constructor.
+ if (this.rootDoc && !Cu.isDeadWrapper(this.rootDoc) &&
+ this.rootDoc.defaultView) {
+ this.onFrameUnload({ window: this.rootDoc.defaultView });
+ }
+ this.rootDoc = window.document;
+ this.rootNode = this.document();
+ this.queueMutation({
+ type: "newRoot",
+ target: this.rootNode.form()
+ });
+ return;
+ }
+ let frame = getFrameElement(window);
+ let frameActor = this.getNode(frame);
+ if (!frameActor) {
+ return;
+ }
+
+ this.queueMutation({
+ type: "frameLoad",
+ target: frameActor.actorID,
+ });
+
+ // Send a childList mutation on the frame.
+ this.queueMutation({
+ type: "childList",
+ target: frameActor.actorID,
+ added: [],
+ removed: []
+ });
+ },
+
+ // Returns true if domNode is in window or a subframe.
+ _childOfWindow: function (window, domNode) {
+ let win = nodeDocument(domNode).defaultView;
+ while (win) {
+ if (win === window) {
+ return true;
+ }
+ win = getFrameElement(win);
+ }
+ return false;
+ },
+
+ onFrameUnload: function ({ window }) {
+ // Any retained orphans that belong to this document
+ // or its children need to be released, and a mutation sent
+ // to notify of that.
+ let releasedOrphans = [];
+
+ for (let retained of this._retainedOrphans) {
+ if (Cu.isDeadWrapper(retained.rawNode) ||
+ this._childOfWindow(window, retained.rawNode)) {
+ this._retainedOrphans.delete(retained);
+ releasedOrphans.push(retained.actorID);
+ this.releaseNode(retained, { force: true });
+ }
+ }
+
+ if (releasedOrphans.length > 0) {
+ this.queueMutation({
+ target: this.rootNode.actorID,
+ type: "unretained",
+ nodes: releasedOrphans
+ });
+ }
+
+ let doc = window.document;
+ let documentActor = this.getNode(doc);
+ if (!documentActor) {
+ return;
+ }
+
+ if (this.rootDoc === doc) {
+ this.rootDoc = null;
+ this.rootNode = null;
+ }
+
+ this.queueMutation({
+ type: "documentUnload",
+ target: documentActor.actorID
+ });
+
+ let walker = this.getDocumentWalker(doc);
+ let parentNode = walker.parentNode();
+ if (parentNode) {
+ // Send a childList mutation on the frame so that clients know
+ // they should reread the children list.
+ this.queueMutation({
+ type: "childList",
+ target: this.getNode(parentNode).actorID,
+ added: [],
+ removed: []
+ });
+ }
+
+ // Need to force a release of this node, because those nodes can't
+ // be accessed anymore.
+ this.releaseNode(documentActor, { force: true });
+ },
+
+ /**
+ * Check if a node is attached to the DOM tree of the current page.
+ * @param {nsIDomNode} rawNode
+ * @return {Boolean} false if the node is removed from the tree or within a
+ * document fragment
+ */
+ _isInDOMTree: function (rawNode) {
+ let walker = this.getDocumentWalker(rawNode);
+ let current = walker.currentNode;
+
+ // Reaching the top of tree
+ while (walker.parentNode()) {
+ current = walker.currentNode;
+ }
+
+ // The top of the tree is a fragment or is not rootDoc, hence rawNode isn't
+ // attached
+ if (current.nodeType === Ci.nsIDOMNode.DOCUMENT_FRAGMENT_NODE ||
+ current !== this.rootDoc) {
+ return false;
+ }
+
+ // Otherwise the top of the tree is rootDoc, hence rawNode is in rootDoc
+ return true;
+ },
+
+ /**
+ * @see _isInDomTree
+ */
+ isInDOMTree: function (node) {
+ if (isNodeDead(node)) {
+ return false;
+ }
+ return this._isInDOMTree(node.rawNode);
+ },
+
+ /**
+ * Given an ObjectActor (identified by its ID), commonly used in the debugger,
+ * webconsole and variablesView, return the corresponding inspector's
+ * NodeActor
+ */
+ getNodeActorFromObjectActor: function (objectActorID) {
+ let actor = this.conn.getActor(objectActorID);
+ if (!actor) {
+ return null;
+ }
+
+ let debuggerObject = this.conn.getActor(objectActorID).obj;
+ let rawNode = debuggerObject.unsafeDereference();
+
+ if (!this._isInDOMTree(rawNode)) {
+ return null;
+ }
+
+ // This is a special case for the document object whereby it is considered
+ // as document.documentElement (the <html> node)
+ if (rawNode.defaultView && rawNode === rawNode.defaultView.document) {
+ rawNode = rawNode.documentElement;
+ }
+
+ return this.attachElement(rawNode);
+ },
+
+ /**
+ * Given a StyleSheetActor (identified by its ID), commonly used in the
+ * style-editor, get its ownerNode and return the corresponding walker's
+ * NodeActor.
+ * Note that getNodeFromActor was added later and can now be used instead.
+ */
+ getStyleSheetOwnerNode: function (styleSheetActorID) {
+ return this.getNodeFromActor(styleSheetActorID, ["ownerNode"]);
+ },
+
+ /**
+ * This method can be used to retrieve NodeActor for DOM nodes from other
+ * actors in a way that they can later be highlighted in the page, or
+ * selected in the inspector.
+ * If an actor has a reference to a DOM node, and the UI needs to know about
+ * this DOM node (and possibly select it in the inspector), the UI should
+ * first retrieve a reference to the walkerFront:
+ *
+ * // Make sure the inspector/walker have been initialized first.
+ * toolbox.initInspector().then(() => {
+ * // Retrieve the walker.
+ * let walker = toolbox.walker;
+ * });
+ *
+ * And then call this method:
+ *
+ * // Get the nodeFront from my actor, passing the ID and properties path.
+ * walker.getNodeFromActor(myActorID, ["element"]).then(nodeFront => {
+ * // Use the nodeFront, e.g. select the node in the inspector.
+ * toolbox.getPanel("inspector").selection.setNodeFront(nodeFront);
+ * });
+ *
+ * @param {String} actorID The ID for the actor that has a reference to the
+ * DOM node.
+ * @param {Array} path Where, on the actor, is the DOM node stored. If in the
+ * scope of the actor, the node is available as `this.data.node`, then this
+ * should be ["data", "node"].
+ * @return {NodeActor} The attached NodeActor, or null if it couldn't be
+ * found.
+ */
+ getNodeFromActor: function (actorID, path) {
+ let actor = this.conn.getActor(actorID);
+ if (!actor) {
+ return null;
+ }
+
+ let obj = actor;
+ for (let name of path) {
+ if (!(name in obj)) {
+ return null;
+ }
+ obj = obj[name];
+ }
+
+ return this.attachElement(obj);
+ },
+
+ /**
+ * Returns an instance of the LayoutActor that is used to retrieve CSS layout-related
+ * information.
+ *
+ * @return {LayoutActor}
+ */
+ getLayoutInspector: function () {
+ if (!this.layoutActor) {
+ this.layoutActor = new LayoutActor(this.conn, this.tabActor, this);
+ }
+
+ return this.layoutActor;
+ },
+});
+
+/**
+ * Server side of the inspector actor, which is used to create
+ * inspector-related actors, including the walker.
+ */
+exports.InspectorActor = protocol.ActorClassWithSpec(inspectorSpec, {
+ initialize: function (conn, tabActor) {
+ protocol.Actor.prototype.initialize.call(this, conn);
+ this.tabActor = tabActor;
+
+ this._onColorPicked = this._onColorPicked.bind(this);
+ this._onColorPickCanceled = this._onColorPickCanceled.bind(this);
+ this.destroyEyeDropper = this.destroyEyeDropper.bind(this);
+ },
+
+ destroy: function () {
+ protocol.Actor.prototype.destroy.call(this);
+
+ this.destroyEyeDropper();
+
+ this._highlighterPromise = null;
+ this._pageStylePromise = null;
+ this._walkerPromise = null;
+ this.walker = null;
+ this.tabActor = null;
+ },
+
+ // Forces destruction of the actor and all its children
+ // like highlighter, walker and style actors.
+ disconnect: function () {
+ this.destroy();
+ },
+
+ get window() {
+ return this.tabActor.window;
+ },
+
+ getWalker: function (options = {}) {
+ if (this._walkerPromise) {
+ return this._walkerPromise;
+ }
+
+ let deferred = promise.defer();
+ this._walkerPromise = deferred.promise;
+
+ let window = this.window;
+ let domReady = () => {
+ let tabActor = this.tabActor;
+ window.removeEventListener("DOMContentLoaded", domReady, true);
+ this.walker = WalkerActor(this.conn, tabActor, options);
+ this.manage(this.walker);
+ events.once(this.walker, "destroyed", () => {
+ this._walkerPromise = null;
+ this._pageStylePromise = null;
+ });
+ deferred.resolve(this.walker);
+ };
+
+ if (window.document.readyState === "loading") {
+ window.addEventListener("DOMContentLoaded", domReady, true);
+ } else {
+ domReady();
+ }
+
+ return this._walkerPromise;
+ },
+
+ getPageStyle: function () {
+ if (this._pageStylePromise) {
+ return this._pageStylePromise;
+ }
+
+ this._pageStylePromise = this.getWalker().then(walker => {
+ let pageStyle = PageStyleActor(this);
+ this.manage(pageStyle);
+ return pageStyle;
+ });
+ return this._pageStylePromise;
+ },
+
+ /**
+ * The most used highlighter actor is the HighlighterActor which can be
+ * conveniently retrieved by this method.
+ * The same instance will always be returned by this method when called
+ * several times.
+ * The highlighter actor returned here is used to highlighter elements's
+ * box-models from the markup-view, box model, console, debugger, ... as
+ * well as select elements with the pointer (pick).
+ *
+ * @param {Boolean} autohide Optionally autohide the highlighter after an
+ * element has been picked
+ * @return {HighlighterActor}
+ */
+ getHighlighter: function (autohide) {
+ if (this._highlighterPromise) {
+ return this._highlighterPromise;
+ }
+
+ this._highlighterPromise = this.getWalker().then(walker => {
+ let highlighter = HighlighterActor(this, autohide);
+ this.manage(highlighter);
+ return highlighter;
+ });
+ return this._highlighterPromise;
+ },
+
+ /**
+ * If consumers need to display several highlighters at the same time or
+ * different types of highlighters, then this method should be used, passing
+ * the type name of the highlighter needed as argument.
+ * A new instance will be created everytime the method is called, so it's up
+ * to the consumer to release it when it is not needed anymore
+ *
+ * @param {String} type The type of highlighter to create
+ * @return {Highlighter} The highlighter actor instance or null if the
+ * typeName passed doesn't match any available highlighter
+ */
+ getHighlighterByType: function (typeName) {
+ if (isTypeRegistered(typeName)) {
+ return CustomHighlighterActor(this, typeName);
+ }
+ return null;
+ },
+
+ /**
+ * Get the node's image data if any (for canvas and img nodes).
+ * Returns an imageData object with the actual data being a LongStringActor
+ * and a size json object.
+ * The image data is transmitted as a base64 encoded png data-uri.
+ * The method rejects if the node isn't an image or if the image is missing
+ *
+ * Accepts a maxDim request parameter to resize images that are larger. This
+ * is important as the resizing occurs server-side so that image-data being
+ * transfered in the longstring back to the client will be that much smaller
+ */
+ getImageDataFromURL: function (url, maxDim) {
+ let img = new this.window.Image();
+ img.src = url;
+
+ // imageToImageData waits for the image to load.
+ return imageToImageData(img, maxDim).then(imageData => {
+ return {
+ data: LongStringActor(this.conn, imageData.data),
+ size: imageData.size
+ };
+ });
+ },
+
+ /**
+ * Resolve a URL to its absolute form, in the scope of a given content window.
+ * @param {String} url.
+ * @param {NodeActor} node If provided, the owner window of this node will be
+ * used to resolve the URL. Otherwise, the top-level content window will be
+ * used instead.
+ * @return {String} url.
+ */
+ resolveRelativeURL: function (url, node) {
+ let document = isNodeDead(node)
+ ? this.window.document
+ : nodeDocument(node.rawNode);
+
+ if (!document) {
+ return url;
+ }
+
+ let baseURI = Services.io.newURI(document.location.href, null, null);
+ return Services.io.newURI(url, null, baseURI).spec;
+ },
+
+ /**
+ * Create an instance of the eye-dropper highlighter and store it on this._eyeDropper.
+ * Note that for now, a new instance is created every time to deal with page navigation.
+ */
+ createEyeDropper: function () {
+ this.destroyEyeDropper();
+ this._highlighterEnv = new HighlighterEnvironment();
+ this._highlighterEnv.initFromTabActor(this.tabActor);
+ this._eyeDropper = new EyeDropper(this._highlighterEnv);
+ },
+
+ /**
+ * Destroy the current eye-dropper highlighter instance.
+ */
+ destroyEyeDropper: function () {
+ if (this._eyeDropper) {
+ this.cancelPickColorFromPage();
+ this._eyeDropper.destroy();
+ this._eyeDropper = null;
+ this._highlighterEnv.destroy();
+ this._highlighterEnv = null;
+ }
+ },
+
+ /**
+ * Pick a color from the page using the eye-dropper. This method doesn't return anything
+ * but will cause events to be sent to the front when a color is picked or when the user
+ * cancels the picker.
+ * @param {Object} options
+ */
+ pickColorFromPage: function (options) {
+ this.createEyeDropper();
+ this._eyeDropper.show(this.window.document.documentElement, options);
+ this._eyeDropper.once("selected", this._onColorPicked);
+ this._eyeDropper.once("canceled", this._onColorPickCanceled);
+ events.once(this.tabActor, "will-navigate", this.destroyEyeDropper);
+ },
+
+ /**
+ * After the pickColorFromPage method is called, the only way to dismiss the eye-dropper
+ * highlighter is for the user to click in the page and select a color. If you need to
+ * dismiss the eye-dropper programatically instead, use this method.
+ */
+ cancelPickColorFromPage: function () {
+ if (this._eyeDropper) {
+ this._eyeDropper.hide();
+ this._eyeDropper.off("selected", this._onColorPicked);
+ this._eyeDropper.off("canceled", this._onColorPickCanceled);
+ events.off(this.tabActor, "will-navigate", this.destroyEyeDropper);
+ }
+ },
+
+ _onColorPicked: function (e, color) {
+ events.emit(this, "color-picked", color);
+ },
+
+ _onColorPickCanceled: function () {
+ events.emit(this, "color-pick-canceled");
+ }
+});
+
+// Exported for test purposes.
+exports._documentWalker = DocumentWalker;
+
+function nodeDocument(node) {
+ if (Cu.isDeadWrapper(node)) {
+ return null;
+ }
+ return node.ownerDocument ||
+ (node.nodeType == Ci.nsIDOMNode.DOCUMENT_NODE ? node : null);
+}
+
+function nodeDocshell(node) {
+ let doc = node ? nodeDocument(node) : null;
+ let win = doc ? doc.defaultView : null;
+ if (win) {
+ return win.QueryInterface(Ci.nsIInterfaceRequestor)
+ .getInterface(Ci.nsIDocShell);
+ }
+ return null;
+}
+
+function isNodeDead(node) {
+ return !node || !node.rawNode || Cu.isDeadWrapper(node.rawNode);
+}
+
+/**
+ * Wrapper for inDeepTreeWalker. Adds filtering to the traversal methods.
+ * See inDeepTreeWalker for more information about the methods.
+ *
+ * @param {DOMNode} node
+ * @param {Window} rootWin
+ * @param {Int} whatToShow See nodeFilterConstants / inIDeepTreeWalker for
+ * options.
+ * @param {Function} filter A custom filter function Taking in a DOMNode
+ * and returning an Int. See WalkerActor.nodeFilter for an example.
+ */
+function DocumentWalker(node, rootWin,
+ whatToShow = nodeFilterConstants.SHOW_ALL,
+ filter = standardTreeWalkerFilter) {
+ if (!rootWin.location) {
+ throw new Error("Got an invalid root window in DocumentWalker");
+ }
+
+ this.walker = Cc["@mozilla.org/inspector/deep-tree-walker;1"]
+ .createInstance(Ci.inIDeepTreeWalker);
+ this.walker.showAnonymousContent = true;
+ this.walker.showSubDocuments = true;
+ this.walker.showDocumentsAsNodes = true;
+ this.walker.init(rootWin.document, whatToShow);
+ this.filter = filter;
+
+ // Make sure that the walker knows about the initial node (which could
+ // be skipped due to a filter). Note that simply calling parentNode()
+ // causes currentNode to be updated.
+ this.walker.currentNode = node;
+ while (node &&
+ this.filter(node) === nodeFilterConstants.FILTER_SKIP) {
+ node = this.walker.parentNode();
+ }
+}
+
+DocumentWalker.prototype = {
+ get node() {
+ return this.walker.node;
+ },
+ get whatToShow() {
+ return this.walker.whatToShow;
+ },
+ get currentNode() {
+ return this.walker.currentNode;
+ },
+ set currentNode(val) {
+ this.walker.currentNode = val;
+ },
+
+ parentNode: function () {
+ return this.walker.parentNode();
+ },
+
+ nextNode: function () {
+ let node = this.walker.currentNode;
+ if (!node) {
+ return null;
+ }
+
+ let nextNode = this.walker.nextNode();
+ while (nextNode &&
+ this.filter(nextNode) === nodeFilterConstants.FILTER_SKIP) {
+ nextNode = this.walker.nextNode();
+ }
+
+ return nextNode;
+ },
+
+ firstChild: function () {
+ let node = this.walker.currentNode;
+ if (!node) {
+ return null;
+ }
+
+ let firstChild = this.walker.firstChild();
+ while (firstChild &&
+ this.filter(firstChild) === nodeFilterConstants.FILTER_SKIP) {
+ firstChild = this.walker.nextSibling();
+ }
+
+ return firstChild;
+ },
+
+ lastChild: function () {
+ let node = this.walker.currentNode;
+ if (!node) {
+ return null;
+ }
+
+ let lastChild = this.walker.lastChild();
+ while (lastChild &&
+ this.filter(lastChild) === nodeFilterConstants.FILTER_SKIP) {
+ lastChild = this.walker.previousSibling();
+ }
+
+ return lastChild;
+ },
+
+ previousSibling: function () {
+ let node = this.walker.previousSibling();
+ while (node && this.filter(node) === nodeFilterConstants.FILTER_SKIP) {
+ node = this.walker.previousSibling();
+ }
+ return node;
+ },
+
+ nextSibling: function () {
+ let node = this.walker.nextSibling();
+ while (node && this.filter(node) === nodeFilterConstants.FILTER_SKIP) {
+ node = this.walker.nextSibling();
+ }
+ return node;
+ }
+};
+
+function isInXULDocument(el) {
+ let doc = nodeDocument(el);
+ return doc &&
+ doc.documentElement &&
+ doc.documentElement.namespaceURI === XUL_NS;
+}
+
+/**
+ * This DeepTreeWalker filter skips whitespace text nodes and anonymous
+ * content with the exception of ::before and ::after and anonymous content
+ * in XUL document (needed to show all elements in the browser toolbox).
+ */
+function standardTreeWalkerFilter(node) {
+ // ::before and ::after are native anonymous content, but we always
+ // want to show them
+ if (node.nodeName === "_moz_generated_content_before" ||
+ node.nodeName === "_moz_generated_content_after") {
+ return nodeFilterConstants.FILTER_ACCEPT;
+ }
+
+ // Ignore empty whitespace text nodes that do not impact the layout.
+ if (isWhitespaceTextNode(node)) {
+ return nodeHasSize(node)
+ ? nodeFilterConstants.FILTER_ACCEPT
+ : nodeFilterConstants.FILTER_SKIP;
+ }
+
+ // Ignore all native and XBL anonymous content inside a non-XUL document
+ if (!isInXULDocument(node) && (isXBLAnonymous(node) ||
+ isNativeAnonymous(node))) {
+ // Note: this will skip inspecting the contents of feedSubscribeLine since
+ // that's XUL content injected in an HTML document, but we need to because
+ // this also skips many other elements that need to be skipped - like form
+ // controls, scrollbars, video controls, etc (see bug 1187482).
+ return nodeFilterConstants.FILTER_SKIP;
+ }
+
+ return nodeFilterConstants.FILTER_ACCEPT;
+}
+
+/**
+ * This DeepTreeWalker filter is like standardTreeWalkerFilter except that
+ * it also includes all anonymous content (like internal form controls).
+ */
+function allAnonymousContentTreeWalkerFilter(node) {
+ // Ignore empty whitespace text nodes that do not impact the layout.
+ if (isWhitespaceTextNode(node)) {
+ return nodeHasSize(node)
+ ? nodeFilterConstants.FILTER_ACCEPT
+ : nodeFilterConstants.FILTER_SKIP;
+ }
+ return nodeFilterConstants.FILTER_ACCEPT;
+}
+
+/**
+ * Is the given node a text node composed of whitespace only?
+ * @param {DOMNode} node
+ * @return {Boolean}
+ */
+function isWhitespaceTextNode(node) {
+ return node.nodeType == Ci.nsIDOMNode.TEXT_NODE && !/[^\s]/.exec(node.nodeValue);
+}
+
+/**
+ * Does the given node have non-0 width and height?
+ * @param {DOMNode} node
+ * @return {Boolean}
+ */
+function nodeHasSize(node) {
+ if (!node.getBoxQuads) {
+ return false;
+ }
+
+ let quads = node.getBoxQuads();
+ return quads.length && quads.some(quad => quad.bounds.width && quad.bounds.height);
+}
+
+/**
+ * Returns a promise that is settled once the given HTMLImageElement has
+ * finished loading.
+ *
+ * @param {HTMLImageElement} image - The image element.
+ * @param {Number} timeout - Maximum amount of time the image is allowed to load
+ * before the waiting is aborted. Ignored if flags.testing is set.
+ *
+ * @return {Promise} that is fulfilled once the image has loaded. If the image
+ * fails to load or the load takes too long, the promise is rejected.
+ */
+function ensureImageLoaded(image, timeout) {
+ let { HTMLImageElement } = image.ownerDocument.defaultView;
+ if (!(image instanceof HTMLImageElement)) {
+ return promise.reject("image must be an HTMLImageELement");
+ }
+
+ if (image.complete) {
+ // The image has already finished loading.
+ return promise.resolve();
+ }
+
+ // This image is still loading.
+ let onLoad = AsyncUtils.listenOnce(image, "load");
+
+ // Reject if loading fails.
+ let onError = AsyncUtils.listenOnce(image, "error").then(() => {
+ return promise.reject("Image '" + image.src + "' failed to load.");
+ });
+
+ // Don't timeout when testing. This is never settled.
+ let onAbort = new Promise(() => {});
+
+ if (!flags.testing) {
+ // Tests are not running. Reject the promise after given timeout.
+ onAbort = DevToolsUtils.waitForTime(timeout).then(() => {
+ return promise.reject("Image '" + image.src + "' took too long to load.");
+ });
+ }
+
+ // See which happens first.
+ return promise.race([onLoad, onError, onAbort]);
+}
+
+/**
+ * Given an <img> or <canvas> element, return the image data-uri. If @param node
+ * is an <img> element, the method waits a while for the image to load before
+ * the data is generated. If the image does not finish loading in a reasonable
+ * time (IMAGE_FETCHING_TIMEOUT milliseconds) the process aborts.
+ *
+ * @param {HTMLImageElement|HTMLCanvasElement} node - The <img> or <canvas>
+ * element, or Image() object. Other types cause the method to reject.
+ * @param {Number} maxDim - Optionally pass a maximum size you want the longest
+ * side of the image to be resized to before getting the image data.
+
+ * @return {Promise} A promise that is fulfilled with an object containing the
+ * data-uri and size-related information:
+ * { data: "...",
+ * size: {
+ * naturalWidth: 400,
+ * naturalHeight: 300,
+ * resized: true }
+ * }.
+ *
+ * If something goes wrong, the promise is rejected.
+ */
+var imageToImageData = Task.async(function* (node, maxDim) {
+ let { HTMLCanvasElement, HTMLImageElement } = node.ownerDocument.defaultView;
+
+ let isImg = node instanceof HTMLImageElement;
+ let isCanvas = node instanceof HTMLCanvasElement;
+
+ if (!isImg && !isCanvas) {
+ throw new Error("node is not a <canvas> or <img> element.");
+ }
+
+ if (isImg) {
+ // Ensure that the image is ready.
+ yield ensureImageLoaded(node, IMAGE_FETCHING_TIMEOUT);
+ }
+
+ // Get the image resize ratio if a maxDim was provided
+ let resizeRatio = 1;
+ let imgWidth = node.naturalWidth || node.width;
+ let imgHeight = node.naturalHeight || node.height;
+ let imgMax = Math.max(imgWidth, imgHeight);
+ if (maxDim && imgMax > maxDim) {
+ resizeRatio = maxDim / imgMax;
+ }
+
+ // Extract the image data
+ let imageData;
+ // The image may already be a data-uri, in which case, save ourselves the
+ // trouble of converting via the canvas.drawImage.toDataURL method, but only
+ // if the image doesn't need resizing
+ if (isImg && node.src.startsWith("data:") && resizeRatio === 1) {
+ imageData = node.src;
+ } else {
+ // Create a canvas to copy the rawNode into and get the imageData from
+ let canvas = node.ownerDocument.createElementNS(XHTML_NS, "canvas");
+ canvas.width = imgWidth * resizeRatio;
+ canvas.height = imgHeight * resizeRatio;
+ let ctx = canvas.getContext("2d");
+
+ // Copy the rawNode image or canvas in the new canvas and extract data
+ ctx.drawImage(node, 0, 0, canvas.width, canvas.height);
+ imageData = canvas.toDataURL("image/png");
+ }
+
+ return {
+ data: imageData,
+ size: {
+ naturalWidth: imgWidth,
+ naturalHeight: imgHeight,
+ resized: resizeRatio !== 1
+ }
+ };
+});
+
+loader.lazyGetter(this, "DOMUtils", function () {
+ return Cc["@mozilla.org/inspector/dom-utils;1"].getService(Ci.inIDOMUtils);
+});