diff options
Diffstat (limited to 'devtools/server/actors')
238 files changed, 76199 insertions, 0 deletions
diff --git a/devtools/server/actors/accessibility/accessibility.js b/devtools/server/actors/accessibility/accessibility.js new file mode 100644 index 0000000000..6bdf0e9f32 --- /dev/null +++ b/devtools/server/actors/accessibility/accessibility.js @@ -0,0 +1,130 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const { Actor } = require("resource://devtools/shared/protocol.js"); +const { + accessibilitySpec, +} = require("resource://devtools/shared/specs/accessibility.js"); + +loader.lazyRequireGetter( + this, + "AccessibleWalkerActor", + "resource://devtools/server/actors/accessibility/walker.js", + true +); +loader.lazyRequireGetter( + this, + "SimulatorActor", + "resource://devtools/server/actors/accessibility/simulator.js", + true +); + +/** + * The AccessibilityActor is a top level container actor that initializes + * accessible walker and is the top-most point of interaction for accessibility + * tools UI for a top level content process. + */ +class AccessibilityActor extends Actor { + constructor(conn, targetActor) { + super(conn, accessibilitySpec); + // This event is fired when accessibility service is initialized or shut + // down. "init" and "shutdown" events are only relayed when the enabled + // state matches the event (e.g. the event came from the same process as + // the actor). + Services.obs.addObserver(this, "a11y-init-or-shutdown"); + this.targetActor = targetActor; + } + + getTraits() { + // The traits are used to know if accessibility actors support particular + // API on the server side. + return { + // @backward-compat { version 84 } Fixed on the server by Bug 1654956. + tabbingOrder: true, + }; + } + + bootstrap() { + return { + enabled: this.enabled, + }; + } + + get enabled() { + return Services.appinfo.accessibilityEnabled; + } + + /** + * Observe Accessibility service init and shutdown events. It relays these + * events to AccessibilityFront if the event is fired for the a11y service + * that lives in the same process. + * + * @param {null} subject + * Not used. + * @param {String} topic + * Name of the a11y service event: "a11y-init-or-shutdown". + * @param {String} data + * "0" corresponds to shutdown and "1" to init. + */ + observe(subject, topic, data) { + const enabled = data === "1"; + if (enabled && this.enabled) { + this.emit("init"); + } else if (!enabled && !this.enabled) { + if (this.walker) { + this.walker.reset(); + } + + this.emit("shutdown"); + } + } + + /** + * Get or create AccessibilityWalker actor, similar to WalkerActor. + * + * @return {Object} + * AccessibleWalkerActor for the current tab. + */ + getWalker() { + if (!this.walker) { + this.walker = new AccessibleWalkerActor(this.conn, this.targetActor); + this.manage(this.walker); + } + return this.walker; + } + + /** + * Get or create Simulator actor, managed by AccessibilityActor, + * only if webrender is enabled. Simulator applies color filters on an entire + * viewport. This needs to be done using webrender and not an SVG + * <feColorMatrix> since it is accelerated and scrolling with filter applied + * needs to be smooth (Bug1431466). + * + * @return {Object|null} + * SimulatorActor for the current tab. + */ + getSimulator() { + if (!this.simulator) { + this.simulator = new SimulatorActor(this.conn, this.targetActor); + this.manage(this.simulator); + } + + return this.simulator; + } + + /** + * Destroy accessibility actor. This method also shutsdown accessibility + * service if possible. + */ + async destroy() { + super.destroy(); + Services.obs.removeObserver(this, "a11y-init-or-shutdown"); + this.walker = null; + this.targetActor = null; + } +} + +exports.AccessibilityActor = AccessibilityActor; diff --git a/devtools/server/actors/accessibility/accessible.js b/devtools/server/actors/accessibility/accessible.js new file mode 100644 index 0000000000..1866d0a91b --- /dev/null +++ b/devtools/server/actors/accessibility/accessible.js @@ -0,0 +1,675 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const { Actor } = require("resource://devtools/shared/protocol.js"); +const { + accessibleSpec, +} = require("resource://devtools/shared/specs/accessibility.js"); + +const { + accessibility: { AUDIT_TYPE }, +} = require("resource://devtools/shared/constants.js"); + +loader.lazyRequireGetter( + this, + "getContrastRatioFor", + "resource://devtools/server/actors/accessibility/audit/contrast.js", + true +); +loader.lazyRequireGetter( + this, + "auditKeyboard", + "resource://devtools/server/actors/accessibility/audit/keyboard.js", + true +); +loader.lazyRequireGetter( + this, + "auditTextLabel", + "resource://devtools/server/actors/accessibility/audit/text-label.js", + true +); +loader.lazyRequireGetter( + this, + "isDefunct", + "resource://devtools/server/actors/utils/accessibility.js", + true +); +loader.lazyRequireGetter( + this, + "findCssSelector", + "resource://devtools/shared/inspector/css-logic.js", + true +); +loader.lazyRequireGetter( + this, + "events", + "resource://devtools/shared/event-emitter.js" +); +loader.lazyRequireGetter( + this, + "getBounds", + "resource://devtools/server/actors/highlighters/utils/accessibility.js", + true +); +loader.lazyRequireGetter( + this, + "isFrameWithChildTarget", + "resource://devtools/shared/layout/utils.js", + true +); +const lazy = {}; +loader.lazyGetter( + lazy, + "ContentDOMReference", + () => + ChromeUtils.importESModule( + "resource://gre/modules/ContentDOMReference.sys.mjs", + { + // ContentDOMReference needs to be retrieved from the shared global + // since it is a shared singleton. + loadInDevToolsLoader: false, + } + ).ContentDOMReference +); + +const RELATIONS_TO_IGNORE = new Set([ + Ci.nsIAccessibleRelation.RELATION_CONTAINING_APPLICATION, + Ci.nsIAccessibleRelation.RELATION_CONTAINING_TAB_PANE, + Ci.nsIAccessibleRelation.RELATION_CONTAINING_WINDOW, + Ci.nsIAccessibleRelation.RELATION_PARENT_WINDOW_OF, + Ci.nsIAccessibleRelation.RELATION_SUBWINDOW_OF, +]); + +const nsIAccessibleRole = Ci.nsIAccessibleRole; +const TEXT_ROLES = new Set([ + nsIAccessibleRole.ROLE_TEXT_LEAF, + nsIAccessibleRole.ROLE_STATICTEXT, +]); + +const STATE_DEFUNCT = Ci.nsIAccessibleStates.EXT_STATE_DEFUNCT; +const CSS_TEXT_SELECTOR = "#text"; + +/** + * Get node inforamtion such as nodeType and the unique CSS selector for the node. + * @param {DOMNode} node + * Node for which to get the information. + * @return {Object} + * Information about the type of the node and how to locate it. + */ +function getNodeDescription(node) { + if (!node || Cu.isDeadWrapper(node)) { + return { nodeType: undefined, nodeCssSelector: "" }; + } + + const { nodeType } = node; + return { + nodeType, + // If node is a text node, we find a unique CSS selector for its parent and add a + // CSS_TEXT_SELECTOR postfix to indicate that it's a text node. + nodeCssSelector: + nodeType === Node.TEXT_NODE + ? `${findCssSelector(node.parentNode)}${CSS_TEXT_SELECTOR}` + : findCssSelector(node), + }; +} + +/** + * Get a snapshot of the nsIAccessible object including its subtree. None of the subtree + * queried here is cached via accessible walker's refMap. + * @param {nsIAccessible} acc + * Accessible object to take a snapshot of. + * @param {nsIAccessibilityService} a11yService + * Accessibility service instance in the current process, used to get localized + * string representation of various accessible properties. + * @param {WindowGlobalTargetActor} targetActor + * @return {JSON} + * JSON snapshot of the accessibility tree with root at current accessible. + */ +function getSnapshot(acc, a11yService, targetActor) { + if (isDefunct(acc)) { + return { + states: [a11yService.getStringStates(0, STATE_DEFUNCT)], + }; + } + + const actions = []; + for (let i = 0; i < acc.actionCount; i++) { + actions.push(acc.getActionDescription(i)); + } + + const attributes = {}; + if (acc.attributes) { + for (const { key, value } of acc.attributes.enumerate()) { + attributes[key] = value; + } + } + + const state = {}; + const extState = {}; + acc.getState(state, extState); + const states = [...a11yService.getStringStates(state.value, extState.value)]; + + const children = []; + for (let child = acc.firstChild; child; child = child.nextSibling) { + // Ignore children from different documents when we have targets for every documents. + if ( + targetActor.ignoreSubFrames && + child.DOMNode.ownerDocument !== targetActor.contentDocument + ) { + continue; + } + children.push(getSnapshot(child, a11yService, targetActor)); + } + + const { nodeType, nodeCssSelector } = getNodeDescription(acc.DOMNode); + const snapshot = { + name: acc.name, + role: getStringRole(acc, a11yService), + actions, + value: acc.value, + nodeCssSelector, + nodeType, + description: acc.description, + keyboardShortcut: acc.accessKey || acc.keyboardShortcut, + childCount: acc.childCount, + indexInParent: acc.indexInParent, + states, + children, + attributes, + }; + const useChildTargetToFetchChildren = + acc.role === Ci.nsIAccessibleRole.ROLE_INTERNAL_FRAME && + isFrameWithChildTarget(targetActor, acc.DOMNode); + if (useChildTargetToFetchChildren) { + snapshot.useChildTargetToFetchChildren = useChildTargetToFetchChildren; + snapshot.childCount = 1; + snapshot.contentDOMReference = lazy.ContentDOMReference.get(acc.DOMNode); + } + + return snapshot; +} + +/** + * Get a string indicating the role of the nsIAccessible object. + * An ARIA role token will be returned unless the role can't be mapped to an + * ARIA role (e.g. <iframe>), in which case a Gecko role string will be + * returned. + * @param {nsIAccessible} acc + * Accessible object to take a snapshot of. + * @param {nsIAccessibilityService} a11yService + * Accessibility service instance in the current process, used to get localized + * string representation of various accessible properties. + * @return String + */ +function getStringRole(acc, a11yService) { + let role = acc.computedARIARole; + if (!role) { + // We couldn't map to an ARIA role, so use a Gecko role string. + role = a11yService.getStringRole(acc.role); + } + return role; +} + +/** + * The AccessibleActor provides information about a given accessible object: its + * role, name, states, etc. + */ +class AccessibleActor extends Actor { + constructor(walker, rawAccessible) { + super(walker.conn, accessibleSpec); + this.walker = walker; + this.rawAccessible = rawAccessible; + + /** + * Indicates if the raw accessible is no longer alive. + * + * @return Boolean + */ + Object.defineProperty(this, "isDefunct", { + get() { + const defunct = isDefunct(this.rawAccessible); + if (defunct) { + delete this.isDefunct; + this.isDefunct = true; + return this.isDefunct; + } + + return defunct; + }, + configurable: true, + }); + } + + destroy() { + super.destroy(); + this.walker = null; + this.rawAccessible = null; + } + + get role() { + if (this.isDefunct) { + return null; + } + return getStringRole(this.rawAccessible, this.walker.a11yService); + } + + get name() { + if (this.isDefunct) { + return null; + } + return this.rawAccessible.name; + } + + get value() { + if (this.isDefunct) { + return null; + } + return this.rawAccessible.value; + } + + get description() { + if (this.isDefunct) { + return null; + } + return this.rawAccessible.description; + } + + get keyboardShortcut() { + if (this.isDefunct) { + return null; + } + // Gecko accessibility exposes two key bindings: Accessible::AccessKey and + // Accessible::KeyboardShortcut. The former is used for accesskey, where the latter + // is used for global shortcuts defined by XUL menu items, etc. Here - do what the + // Windows implementation does: try AccessKey first, and if that's empty, use + // KeyboardShortcut. + return this.rawAccessible.accessKey || this.rawAccessible.keyboardShortcut; + } + + get childCount() { + if (this.isDefunct) { + return 0; + } + // In case of a remote frame declare at least one child (the #document + // element) so that they can be expanded. + if (this.useChildTargetToFetchChildren) { + return 1; + } + + return this.rawAccessible.childCount; + } + + get domNodeType() { + if (this.isDefunct) { + return 0; + } + return this.rawAccessible.DOMNode ? this.rawAccessible.DOMNode.nodeType : 0; + } + + get parentAcc() { + if (this.isDefunct) { + return null; + } + return this.walker.addRef(this.rawAccessible.parent); + } + + children() { + const children = []; + if (this.isDefunct) { + return children; + } + + for ( + let child = this.rawAccessible.firstChild; + child; + child = child.nextSibling + ) { + children.push(this.walker.addRef(child)); + } + return children; + } + + get indexInParent() { + if (this.isDefunct) { + return -1; + } + + try { + return this.rawAccessible.indexInParent; + } catch (e) { + // Accessible is dead. + return -1; + } + } + + get actions() { + const actions = []; + if (this.isDefunct) { + return actions; + } + + for (let i = 0; i < this.rawAccessible.actionCount; i++) { + actions.push(this.rawAccessible.getActionDescription(i)); + } + return actions; + } + + get states() { + if (this.isDefunct) { + return []; + } + + const state = {}; + const extState = {}; + this.rawAccessible.getState(state, extState); + return [ + ...this.walker.a11yService.getStringStates(state.value, extState.value), + ]; + } + + get attributes() { + if (this.isDefunct || !this.rawAccessible.attributes) { + return {}; + } + + const attributes = {}; + for (const { key, value } of this.rawAccessible.attributes.enumerate()) { + attributes[key] = value; + } + + return attributes; + } + + get bounds() { + if (this.isDefunct) { + return null; + } + + let x = {}, + y = {}, + w = {}, + h = {}; + try { + this.rawAccessible.getBoundsInCSSPixels(x, y, w, h); + x = x.value; + y = y.value; + w = w.value; + h = h.value; + } catch (e) { + return null; + } + + // Check if accessible bounds are invalid. + const left = x, + right = x + w, + top = y, + bottom = y + h; + if (left === right || top === bottom) { + return null; + } + + return { x, y, w, h }; + } + + async getRelations() { + const relationObjects = []; + if (this.isDefunct) { + return relationObjects; + } + + const relations = [ + ...this.rawAccessible.getRelations().enumerate(Ci.nsIAccessibleRelation), + ]; + if (relations.length === 0) { + return relationObjects; + } + + const doc = await this.walker.getDocument(); + if (this.isDestroyed()) { + // This accessible actor is destroyed. + return relationObjects; + } + relations.forEach(relation => { + if (RELATIONS_TO_IGNORE.has(relation.relationType)) { + return; + } + + const type = this.walker.a11yService.getStringRelationType( + relation.relationType + ); + const targets = [...relation.getTargets().enumerate(Ci.nsIAccessible)]; + let relationObject; + for (const target of targets) { + let targetAcc; + try { + targetAcc = this.walker.attachAccessible(target, doc.rawAccessible); + } catch (e) { + // Target is not available. + } + + if (targetAcc) { + if (!relationObject) { + relationObject = { type, targets: [] }; + } + + relationObject.targets.push(targetAcc); + } + } + + if (relationObject) { + relationObjects.push(relationObject); + } + }); + + return relationObjects; + } + + get useChildTargetToFetchChildren() { + if (this.isDefunct) { + return false; + } + + return ( + this.rawAccessible.role === Ci.nsIAccessibleRole.ROLE_INTERNAL_FRAME && + isFrameWithChildTarget( + this.walker.targetActor, + this.rawAccessible.DOMNode + ) + ); + } + + form() { + return { + actor: this.actorID, + role: this.role, + name: this.name, + useChildTargetToFetchChildren: this.useChildTargetToFetchChildren, + childCount: this.childCount, + checks: this._lastAudit, + }; + } + + /** + * Provide additional (full) information about the accessible object that is + * otherwise missing from the form. + * + * @return {Object} + * Object that contains accessible object information such as states, + * actions, attributes, etc. + */ + hydrate() { + return { + value: this.value, + description: this.description, + keyboardShortcut: this.keyboardShortcut, + domNodeType: this.domNodeType, + indexInParent: this.indexInParent, + states: this.states, + actions: this.actions, + attributes: this.attributes, + }; + } + + _isValidTextLeaf(rawAccessible) { + return ( + !isDefunct(rawAccessible) && + TEXT_ROLES.has(rawAccessible.role) && + rawAccessible.name && + !!rawAccessible.name.trim().length + ); + } + + /** + * Calculate the contrast ratio of the given accessible. + */ + async _getContrastRatio() { + if (!this._isValidTextLeaf(this.rawAccessible)) { + return null; + } + + const { bounds } = this; + if (!bounds) { + return null; + } + + const { DOMNode: rawNode } = this.rawAccessible; + const win = rawNode.ownerGlobal; + + // Keep the reference to the walker actor in case the actor gets destroyed + // during the colour contrast ratio calculation. + const { walker } = this; + await walker.clearStyles(win); + const contrastRatio = await getContrastRatioFor(rawNode.parentNode, { + bounds: getBounds(win, bounds), + win, + appliedColorMatrix: this.walker.colorMatrix, + }); + + if (this.isDestroyed()) { + // This accessible actor is destroyed. + return null; + } + await walker.restoreStyles(win); + + return contrastRatio; + } + + /** + * Run an accessibility audit for a given audit type. + * @param {String} type + * Type of an audit (Check AUDIT_TYPE in devtools/shared/constants + * to see available audit types). + * + * @return {null|Object} + * Object that contains accessible audit data for a given type or null + * if there's nothing to report for this accessible. + */ + _getAuditByType(type) { + switch (type) { + case AUDIT_TYPE.CONTRAST: + return this._getContrastRatio(); + case AUDIT_TYPE.KEYBOARD: + // Determine if keyboard accessibility is lacking where it is necessary. + return auditKeyboard(this.rawAccessible); + case AUDIT_TYPE.TEXT_LABEL: + // Determine if text alternative is missing for an accessible where it + // is necessary. + return auditTextLabel(this.rawAccessible); + default: + return null; + } + } + + /** + * Audit the state of the accessible object. + * + * @param {Object} options + * Options for running audit, may include: + * - types: Array of audit types to be performed during audit. + * + * @return {Object|null} + * Audit results for the accessible object. + */ + audit(options = {}) { + if (this._auditing) { + return this._auditing; + } + + const { types } = options; + let auditTypes = Object.values(AUDIT_TYPE); + if (types && types.length) { + auditTypes = auditTypes.filter(auditType => types.includes(auditType)); + } + + // For some reason keyboard checks for focus styling affect values (that are + // used by other types of checks (text names and values)) returned by + // accessible objects. This happens only when multiple checks are run at the + // same time (asynchronously) and the audit might return unexpected + // failures. We thus split the execution of the checks into two parts, first + // performing keyboard checks and only after the rest of the checks. See bug + // 1594743 for more detail. + let keyboardAuditResult; + const keyboardAuditIndex = auditTypes.indexOf(AUDIT_TYPE.KEYBOARD); + if (keyboardAuditIndex > -1) { + // If we are performing a keyboard audit, remove its value from the + // complete list and run it. + auditTypes.splice(keyboardAuditIndex, 1); + keyboardAuditResult = this._getAuditByType(AUDIT_TYPE.KEYBOARD); + } + + this._auditing = Promise.resolve(keyboardAuditResult) + .then(keyboardResult => { + const audits = auditTypes.map(auditType => + this._getAuditByType(auditType) + ); + + // If we are also performing a keyboard audit, add its type and its + // result back to the complete list of audits. + if (keyboardAuditIndex > -1) { + auditTypes.splice(keyboardAuditIndex, 0, AUDIT_TYPE.KEYBOARD); + audits.splice(keyboardAuditIndex, 0, keyboardResult); + } + + return Promise.all(audits); + }) + .then(results => { + if (this.isDefunct || this.isDestroyed()) { + return null; + } + + const audit = results.reduce((auditResults, result, index) => { + auditResults[auditTypes[index]] = result; + return auditResults; + }, {}); + this._lastAudit = this._lastAudit || {}; + Object.assign(this._lastAudit, audit); + events.emit(this, "audited", audit); + + return audit; + }) + .catch(error => { + if (!this.isDefunct && !this.isDestroyed()) { + throw error; + } + return null; + }) + .finally(() => { + this._auditing = null; + }); + + return this._auditing; + } + + snapshot() { + return getSnapshot( + this.rawAccessible, + this.walker.a11yService, + this.walker.targetActor + ); + } +} + +exports.AccessibleActor = AccessibleActor; diff --git a/devtools/server/actors/accessibility/audit/contrast.js b/devtools/server/actors/accessibility/audit/contrast.js new file mode 100644 index 0000000000..68e7b497f8 --- /dev/null +++ b/devtools/server/actors/accessibility/audit/contrast.js @@ -0,0 +1,306 @@ +/* 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"; + +loader.lazyRequireGetter( + this, + "CssLogic", + "resource://devtools/server/actors/inspector/css-logic.js", + true +); +loader.lazyRequireGetter( + this, + "getCurrentZoom", + "resource://devtools/shared/layout/utils.js", + true +); +loader.lazyRequireGetter( + this, + "addPseudoClassLock", + "resource://devtools/server/actors/highlighters/utils/markup.js", + true +); +loader.lazyRequireGetter( + this, + "removePseudoClassLock", + "resource://devtools/server/actors/highlighters/utils/markup.js", + true +); +loader.lazyRequireGetter( + this, + "getContrastRatioAgainstBackground", + "resource://devtools/shared/accessibility.js", + true +); +loader.lazyRequireGetter( + this, + "getTextProperties", + "resource://devtools/shared/accessibility.js", + true +); +loader.lazyRequireGetter( + this, + "DevToolsWorker", + "resource://devtools/shared/worker/worker.js", + true +); +loader.lazyRequireGetter( + this, + "InspectorActorUtils", + "resource://devtools/server/actors/inspector/utils.js" +); + +const WORKER_URL = "resource://devtools/server/actors/accessibility/worker.js"; +const HIGHLIGHTED_PSEUDO_CLASS = ":-moz-devtools-highlighted"; +const { + LARGE_TEXT: { BOLD_LARGE_TEXT_MIN_PIXELS, LARGE_TEXT_MIN_PIXELS }, +} = require("resource://devtools/shared/accessibility.js"); + +loader.lazyGetter(this, "worker", () => new DevToolsWorker(WORKER_URL)); + +/** + * Get canvas rendering context for the current target window bound by the bounds of the + * accessible objects. + * @param {Object} win + * Current target window. + * @param {Object} bounds + * Bounds for the accessible object. + * @param {Object} zoom + * Current zoom level for the window. + * @param {Object} scale + * Scale value to scale down the drawn image. + * @param {null|DOMNode} node + * If not null, a node that corresponds to the accessible object to be used to + * make its text color transparent. + * @return {CanvasRenderingContext2D} + * Canvas rendering context for the current window. + */ +function getImageCtx(win, bounds, zoom, scale, node) { + const doc = win.document; + const canvas = doc.createElementNS("http://www.w3.org/1999/xhtml", "canvas"); + + const { left, top, width, height } = bounds; + canvas.width = width * zoom * scale; + canvas.height = height * zoom * scale; + const ctx = canvas.getContext("2d", { alpha: false }); + ctx.imageSmoothingEnabled = false; + ctx.scale(scale, scale); + + // If node is passed, make its color related text properties invisible. + if (node) { + addPseudoClassLock(node, HIGHLIGHTED_PSEUDO_CLASS); + } + + ctx.drawWindow( + win, + left * zoom, + top * zoom, + width * zoom, + height * zoom, + "#fff", + ctx.DRAWWINDOW_USE_WIDGET_LAYERS + ); + + // Restore all inline styling. + if (node) { + removePseudoClassLock(node, HIGHLIGHTED_PSEUDO_CLASS); + } + + return ctx; +} + +/** + * Calculate the transformed RGBA when a color matrix is set in docShell by + * multiplying the color matrix with the RGBA vector. + * + * @param {Array} rgba + * Original RGBA array which we want to transform. + * @param {Array} colorMatrix + * Flattened 4x5 color matrix that is set in docShell. + * A 4x5 matrix of the form: + * 1 2 3 4 5 + * 6 7 8 9 10 + * 11 12 13 14 15 + * 16 17 18 19 20 + * will be set in docShell as: + * [1, 6, 11, 16, 2, 7, 12, 17, 3, 8, 13, 18, 4, 9, 14, 19, 5, 10, 15, 20] + * @return {Array} + * Transformed RGBA after the color matrix is multiplied with the original RGBA. + */ +function getTransformedRGBA(rgba, colorMatrix) { + const transformedRGBA = [0, 0, 0, 0]; + + // Only use the first four columns of the color matrix corresponding to R, G, B and A + // color channels respectively. The fifth column is a fixed offset that does not need + // to be considered for the matrix multiplication. We end up multiplying a 4x4 color + // matrix with a 4x1 RGBA vector. + for (let i = 0; i < 16; i++) { + const row = i % 4; + const col = Math.floor(i / 4); + transformedRGBA[row] += colorMatrix[i] * rgba[col]; + } + + return transformedRGBA; +} + +/** + * Find RGBA or a range of RGBAs for the background pixels under the text. + * + * @param {DOMNode} node + * Node for which we want to get the background color data. + * @param {Object} options + * - bounds {Object} + * Bounds for the accessible object. + * - win {Object} + * Target window. + * - size {Number} + * Font size of the selected text node + * - isBoldText {Boolean} + * True if selected text node is bold + * @return {Object} + * Object with one or more of the following RGBA fields: value, min, max + */ +function getBackgroundFor(node, { win, bounds, size, isBoldText }) { + const zoom = 1 / getCurrentZoom(win); + // When calculating colour contrast, we traverse image data for text nodes that are + // drawn both with and without transparent text. Image data arrays are typically really + // big. In cases when the font size is fairly large or when the page is zoomed in image + // data is especially large (retrieving it and/or traversing it takes significant amount + // of time). Here we optimize the size of the image data by scaling down the drawn nodes + // to a size where their text size equals either BOLD_LARGE_TEXT_MIN_PIXELS or + // LARGE_TEXT_MIN_PIXELS (lower threshold for large text size) depending on the font + // weight. + // + // IMPORTANT: this optimization, in some cases where background colour is non-uniform + // (gradient or image), can result in small (not noticeable) blending of the background + // colours. In turn this might affect the reported values of the contrast ratio. The + // delta is fairly small (<0.1) to noticeably skew the results. + // + // NOTE: this optimization does not help in cases where contrast is being calculated for + // nodes with a lot of text. + let scale = + ((isBoldText ? BOLD_LARGE_TEXT_MIN_PIXELS : LARGE_TEXT_MIN_PIXELS) / size) * + zoom; + // We do not need to scale the images if the font is smaller than large or if the page + // is zoomed out (scaling in this case would've been scaling up). + scale = scale > 1 ? 1 : scale; + + const textContext = getImageCtx(win, bounds, zoom, scale); + const backgroundContext = getImageCtx(win, bounds, zoom, scale, node); + + const { data: dataText } = textContext.getImageData( + 0, + 0, + bounds.width * scale, + bounds.height * scale + ); + const { data: dataBackground } = backgroundContext.getImageData( + 0, + 0, + bounds.width * scale, + bounds.height * scale + ); + + return worker.performTask( + "getBgRGBA", + { + dataTextBuf: dataText.buffer, + dataBackgroundBuf: dataBackground.buffer, + }, + [dataText.buffer, dataBackground.buffer] + ); +} + +/** + * Calculates the contrast ratio of the referenced DOM node. + * + * @param {DOMNode} node + * The node for which we want to calculate the contrast ratio. + * @param {Object} options + * - bounds {Object} + * Bounds for the accessible object. + * - win {Object} + * Target window. + * - appliedColorMatrix {Array|null} + * Simulation color matrix applied to + * to the viewport, if it exists. + * @return {Object} + * An object that may contain one or more of the following fields: error, + * isLargeText, value, min, max values for contrast. + */ +async function getContrastRatioFor(node, options = {}) { + const computedStyle = CssLogic.getComputedStyle(node); + const props = computedStyle ? getTextProperties(computedStyle) : null; + + if (!props) { + return { + error: true, + }; + } + + const { isLargeText, isBoldText, size, opacity } = props; + const { appliedColorMatrix } = options; + const color = appliedColorMatrix + ? getTransformedRGBA(props.color, appliedColorMatrix) + : props.color; + let rgba = await getBackgroundFor(node, { + ...options, + isBoldText, + size, + }); + + if (!rgba) { + // Fallback (original) contrast calculation algorithm. It tries to get the + // closest background colour for the node and use it to calculate contrast. + const backgroundColor = InspectorActorUtils.getClosestBackgroundColor(node); + const backgroundImage = InspectorActorUtils.getClosestBackgroundImage(node); + + if (backgroundImage !== "none") { + // Both approaches failed, at this point we don't have a better one yet. + return { + error: true, + }; + } + + let { r, g, b, a } = InspectorUtils.colorToRGBA(backgroundColor); + // If the element has opacity in addition to background alpha value, take it + // into account. TODO: this does not handle opacity set on ancestor + // elements (see bug https://bugzilla.mozilla.org/show_bug.cgi?id=1544721). + if (opacity < 1) { + a = opacity * a; + } + + return getContrastRatioAgainstBackground( + { + value: appliedColorMatrix + ? getTransformedRGBA([r, g, b, a], appliedColorMatrix) + : [r, g, b, a], + }, + { + color, + isLargeText, + } + ); + } + + if (appliedColorMatrix) { + rgba = rgba.value + ? { + value: getTransformedRGBA(rgba.value, appliedColorMatrix), + } + : { + min: getTransformedRGBA(rgba.min, appliedColorMatrix), + max: getTransformedRGBA(rgba.max, appliedColorMatrix), + }; + } + + return getContrastRatioAgainstBackground(rgba, { + color, + isLargeText, + }); +} + +exports.getContrastRatioFor = getContrastRatioFor; +exports.getBackgroundFor = getBackgroundFor; diff --git a/devtools/server/actors/accessibility/audit/keyboard.js b/devtools/server/actors/accessibility/audit/keyboard.js new file mode 100644 index 0000000000..d1b13dbbf6 --- /dev/null +++ b/devtools/server/actors/accessibility/audit/keyboard.js @@ -0,0 +1,514 @@ +/* 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"; + +loader.lazyRequireGetter( + this, + "CssLogic", + "resource://devtools/server/actors/inspector/css-logic.js", + true +); +loader.lazyRequireGetter( + this, + "getCSSStyleRules", + "resource://devtools/shared/inspector/css-logic.js", + true +); +loader.lazyRequireGetter( + this, + "nodeConstants", + "resource://devtools/shared/dom-node-constants.js" +); +loader.lazyRequireGetter( + this, + ["isDefunct", "getAriaRoles"], + "resource://devtools/server/actors/utils/accessibility.js", + true +); + +const { + accessibility: { + AUDIT_TYPE: { KEYBOARD }, + ISSUE_TYPE: { + [KEYBOARD]: { + FOCUSABLE_NO_SEMANTICS, + FOCUSABLE_POSITIVE_TABINDEX, + INTERACTIVE_NO_ACTION, + INTERACTIVE_NOT_FOCUSABLE, + MOUSE_INTERACTIVE_ONLY, + NO_FOCUS_VISIBLE, + }, + }, + SCORES: { FAIL, WARNING }, + }, +} = require("resource://devtools/shared/constants.js"); + +// Specified by the author CSS rule type. +const STYLE_RULE = 1; + +// Accessible action for showing long description. +const CLICK_ACTION = "click"; + +/** + * Focus specific pseudo classes that the keyboard audit simulates to determine + * focus styling. + */ +const FOCUS_PSEUDO_CLASS = ":focus"; +const MOZ_FOCUSRING_PSEUDO_CLASS = ":-moz-focusring"; + +const KEYBOARD_FOCUSABLE_ROLES = new Set([ + Ci.nsIAccessibleRole.ROLE_BUTTONMENU, + Ci.nsIAccessibleRole.ROLE_CHECKBUTTON, + Ci.nsIAccessibleRole.ROLE_COMBOBOX, + Ci.nsIAccessibleRole.ROLE_EDITCOMBOBOX, + Ci.nsIAccessibleRole.ROLE_ENTRY, + Ci.nsIAccessibleRole.ROLE_LINK, + Ci.nsIAccessibleRole.ROLE_LISTBOX, + Ci.nsIAccessibleRole.ROLE_PASSWORD_TEXT, + Ci.nsIAccessibleRole.ROLE_PUSHBUTTON, + Ci.nsIAccessibleRole.ROLE_RADIOBUTTON, + Ci.nsIAccessibleRole.ROLE_SLIDER, + Ci.nsIAccessibleRole.ROLE_SPINBUTTON, + Ci.nsIAccessibleRole.ROLE_SUMMARY, + Ci.nsIAccessibleRole.ROLE_SWITCH, + Ci.nsIAccessibleRole.ROLE_TOGGLE_BUTTON, +]); + +const INTERACTIVE_ROLES = new Set([ + ...KEYBOARD_FOCUSABLE_ROLES, + Ci.nsIAccessibleRole.ROLE_CHECK_MENU_ITEM, + Ci.nsIAccessibleRole.ROLE_CHECK_RICH_OPTION, + Ci.nsIAccessibleRole.ROLE_COMBOBOX_OPTION, + Ci.nsIAccessibleRole.ROLE_MENUITEM, + Ci.nsIAccessibleRole.ROLE_OPTION, + Ci.nsIAccessibleRole.ROLE_OUTLINE, + Ci.nsIAccessibleRole.ROLE_OUTLINEITEM, + Ci.nsIAccessibleRole.ROLE_PAGETAB, + Ci.nsIAccessibleRole.ROLE_PARENT_MENUITEM, + Ci.nsIAccessibleRole.ROLE_RADIO_MENU_ITEM, + Ci.nsIAccessibleRole.ROLE_RICH_OPTION, +]); + +const INTERACTIVE_IF_FOCUSABLE_ROLES = new Set([ + // If article is focusable, we can assume it is inside a feed. + Ci.nsIAccessibleRole.ROLE_ARTICLE, + // Column header can be focusable. + Ci.nsIAccessibleRole.ROLE_COLUMNHEADER, + Ci.nsIAccessibleRole.ROLE_GRID_CELL, + Ci.nsIAccessibleRole.ROLE_MENUBAR, + Ci.nsIAccessibleRole.ROLE_MENUPOPUP, + Ci.nsIAccessibleRole.ROLE_PAGETABLIST, + // Row header can be focusable. + Ci.nsIAccessibleRole.ROLE_ROWHEADER, + Ci.nsIAccessibleRole.ROLE_SCROLLBAR, + Ci.nsIAccessibleRole.ROLE_SEPARATOR, + Ci.nsIAccessibleRole.ROLE_TOOLBAR, +]); + +/** + * Determine if a node is dead or is not an element node. + * + * @param {DOMNode} node + * Node to be tested for validity. + * + * @returns {Boolean} + * True if the node is either dead or is not an element node. + */ +function isInvalidNode(node) { + return ( + !node || + Cu.isDeadWrapper(node) || + node.nodeType !== nodeConstants.ELEMENT_NODE || + !node.ownerGlobal + ); +} + +/** + * Determine if accessible is focusable with the keyboard. + * + * @param {nsIAccessible} accessible + * Accessible for which to determine if it is keyboard focusable. + * + * @returns {Boolean} + * True if focusable with the keyboard. + */ +function isKeyboardFocusable(accessible) { + const state = {}; + accessible.getState(state, {}); + // State will be focusable even if the tabindex is negative. + return ( + state.value & Ci.nsIAccessibleStates.STATE_FOCUSABLE && + // Platform accessibility will still report STATE_FOCUSABLE even with the + // tabindex="-1" so we need to check that it is >= 0 to be considered + // keyboard focusable. + accessible.DOMNode.tabIndex > -1 + ); +} + +/** + * Determine if a current node has focus specific styling by applying a + * focus-related pseudo class (such as :focus or :-moz-focusring) to a focusable + * node. + * + * @param {DOMNode} focusableNode + * Node to apply focus-related pseudo class to. + * @param {DOMNode} currentNode + * Node to be checked for having focus specific styling. + * @param {String} pseudoClass + * A focus related pseudo-class to be simulated for style comparison. + * + * @returns {Boolean} + * True if the currentNode has focus specific styling. + */ +function hasStylesForFocusRelatedPseudoClass( + focusableNode, + currentNode, + pseudoClass +) { + const defaultRules = getCSSStyleRules(currentNode); + + InspectorUtils.addPseudoClassLock(focusableNode, pseudoClass); + + // Determine a set of properties that are specific to CSS rules that are only + // present when a focus related pseudo-class is locked in. + const tempRules = getCSSStyleRules(currentNode); + const properties = new Set(); + for (const rule of tempRules) { + if (rule.type !== STYLE_RULE) { + continue; + } + + if (!defaultRules.includes(rule)) { + for (let index = 0; index < rule.style.length; index++) { + properties.add(rule.style.item(index)); + } + } + } + + // If there are no focus specific CSS rules or properties, currentNode does + // node have any focus specific styling, we are done. + if (properties.size === 0) { + InspectorUtils.removePseudoClassLock(focusableNode, pseudoClass); + return false; + } + + // Determine values for properties that are focus specific. + const tempStyle = CssLogic.getComputedStyle(currentNode); + const focusStyle = {}; + for (const name of properties.values()) { + focusStyle[name] = tempStyle.getPropertyValue(name); + } + + InspectorUtils.removePseudoClassLock(focusableNode, pseudoClass); + + // If values for focus specific properties are different from default style + // values, assume we have focus spefic styles for the currentNode. + const defaultStyle = CssLogic.getComputedStyle(currentNode); + for (const name of properties.values()) { + if (defaultStyle.getPropertyValue(name) !== focusStyle[name]) { + return true; + } + } + + return false; +} + +/** + * Check if an element node (currentNode) has distinct focus styling. This + * function also takes into account a case when focus styling is applied to a + * descendant too. + * + * @param {DOMNode} focusableNode + * Node to apply focus-related pseudo class to. + * @param {DOMNode} currentNode + * Node to be checked for having focus specific styling. + * + * @returns {Boolean} + * True if the node or its descendant has distinct focus styling. + */ +function hasFocusStyling(focusableNode, currentNode) { + if (isInvalidNode(currentNode)) { + return false; + } + + // Check if an element node has distinct :-moz-focusring styling. + const hasStylesForMozFocusring = hasStylesForFocusRelatedPseudoClass( + focusableNode, + currentNode, + MOZ_FOCUSRING_PSEUDO_CLASS + ); + if (hasStylesForMozFocusring) { + return true; + } + + // Check if an element node has distinct :focus styling. + const hasStylesForFocus = hasStylesForFocusRelatedPseudoClass( + focusableNode, + currentNode, + FOCUS_PSEUDO_CLASS + ); + if (hasStylesForFocus) { + return true; + } + + // If no element specific focus styles where found, check if its element + // children have them. + for ( + let child = currentNode.firstElementChild; + child; + child = currentNode.nextnextElementSibling + ) { + if (hasFocusStyling(focusableNode, child)) { + return true; + } + } + + return false; +} + +/** + * A rule that determines if a focusable accessible object has appropriate focus + * styling. + * + * @param {nsIAccessible} accessible + * Accessible to be checked for being focusable and having focus + * styling. + * + * @return {null|Object} + * Null if accessible has keyboard focus styling, audit report object + * otherwise. + */ +function focusStyleRule(accessible) { + const { DOMNode } = accessible; + if (isInvalidNode(DOMNode)) { + return null; + } + + // Ignore non-focusable elements. + if (!isKeyboardFocusable(accessible)) { + return null; + } + + if (hasFocusStyling(DOMNode, DOMNode)) { + return null; + } + + // If no browser or author focus styling was found, check if the node is a + // widget that is themed by platform native theme. + if (InspectorUtils.isElementThemed(DOMNode)) { + return null; + } + + return { score: WARNING, issue: NO_FOCUS_VISIBLE }; +} + +/** + * A rule that determines if an interactive accessible has any associated + * accessible actions with it. If the element is interactive but and has no + * actions, assistive technology users will not be able to interact with it. + * + * @param {nsIAccessible} accessible + * Accessible to be checked for being interactive and having accessible + * actions. + * + * @return {null|Object} + * Null if accessible is not interactive or if it is and it has + * accessible action associated with it, audit report object otherwise. + */ +function interactiveRule(accessible) { + if (!INTERACTIVE_ROLES.has(accessible.role)) { + return null; + } + + if (accessible.actionCount > 0) { + return null; + } + + return { score: FAIL, issue: INTERACTIVE_NO_ACTION }; +} + +/** + * A rule that determines if an interactive accessible is also focusable when + * not disabled. + * + * @param {nsIAccessible} accessible + * Accessible to be checked for being interactive and being focusable + * when enabled. + * + * @return {null|Object} + * Null if accessible is not interactive or if it is and it is focusable + * when enabled, audit report object otherwise. + */ +function focusableRule(accessible) { + if (!KEYBOARD_FOCUSABLE_ROLES.has(accessible.role)) { + return null; + } + + const state = {}; + accessible.getState(state, {}); + // We only expect in interactive accessible object to be focusable if it is + // not disabled. + if (state.value & Ci.nsIAccessibleStates.STATE_UNAVAILABLE) { + return null; + } + + if (isKeyboardFocusable(accessible)) { + return null; + } + + const ariaRoles = getAriaRoles(accessible); + if ( + ariaRoles && + (ariaRoles.includes("combobox") || ariaRoles.includes("listbox")) + ) { + // Do not force ARIA combobox or listbox to be focusable. + return null; + } + + return { score: FAIL, issue: INTERACTIVE_NOT_FOCUSABLE }; +} + +/** + * A rule that determines if a focusable accessible has an associated + * interactive role. + * + * @param {nsIAccessible} accessible + * Accessible to be checked for having an interactive role if it is + * focusable. + * + * @return {null|Object} + * Null if accessible is not interactive or if it is and it has an + * interactive role, audit report object otherwise. + */ +function semanticsRule(accessible) { + if ( + INTERACTIVE_ROLES.has(accessible.role) || + // Visible listboxes will have focusable state when inside comboboxes. + accessible.role === Ci.nsIAccessibleRole.ROLE_COMBOBOX_LIST + ) { + return null; + } + + if (isKeyboardFocusable(accessible)) { + if (INTERACTIVE_IF_FOCUSABLE_ROLES.has(accessible.role)) { + return null; + } + + // ROLE_TABLE is used for grids too which are considered interactive. + if (accessible.role === Ci.nsIAccessibleRole.ROLE_TABLE) { + const ariaRoles = getAriaRoles(accessible); + if (ariaRoles && ariaRoles.includes("grid")) { + return null; + } + } + + return { score: WARNING, issue: FOCUSABLE_NO_SEMANTICS }; + } + + const state = {}; + accessible.getState(state, {}); + if ( + // Ignore text leafs. + accessible.role === Ci.nsIAccessibleRole.ROLE_TEXT_LEAF || + // Ignore accessibles with no accessible actions. + accessible.actionCount === 0 || + // Ignore labels that have a label for relation with their target because + // they are clickable. + (accessible.role === Ci.nsIAccessibleRole.ROLE_LABEL && + accessible.getRelationByType(Ci.nsIAccessibleRelation.RELATION_LABEL_FOR) + .targetsCount > 0) || + // Ignore images that are inside an anchor (have linked state). + (accessible.role === Ci.nsIAccessibleRole.ROLE_GRAPHIC && + state.value & Ci.nsIAccessibleStates.STATE_LINKED) + ) { + return null; + } + + // Ignore anything but a click action in the list of actions. + for (let i = 0; i < accessible.actionCount; i++) { + if (accessible.getActionName(i) === CLICK_ACTION) { + return { score: FAIL, issue: MOUSE_INTERACTIVE_ONLY }; + } + } + + return null; +} + +/** + * A rule that determines if an element associated with a focusable accessible + * has a positive tabindex. + * + * @param {nsIAccessible} accessible + * Accessible to be checked for having an element with positive tabindex + * attribute. + * + * @return {null|Object} + * Null if accessible is not focusable or if it is and its element's + * tabindex attribute is less than 1, audit report object otherwise. + */ +function tabIndexRule(accessible) { + const { DOMNode } = accessible; + if (isInvalidNode(DOMNode)) { + return null; + } + + if (!isKeyboardFocusable(accessible)) { + return null; + } + + if (DOMNode.tabIndex > 0) { + return { score: WARNING, issue: FOCUSABLE_POSITIVE_TABINDEX }; + } + + return null; +} + +function auditKeyboard(accessible) { + if (isDefunct(accessible)) { + return null; + } + // Do not test anything on accessible objects for documents or frames. + if ( + accessible.role === Ci.nsIAccessibleRole.ROLE_DOCUMENT || + accessible.role === Ci.nsIAccessibleRole.ROLE_INTERNAL_FRAME + ) { + return null; + } + + // Check if interactive accessible can be used by the assistive + // technology. + let issue = interactiveRule(accessible); + if (issue) { + return issue; + } + + // Check if interactive accessible is also focusable when enabled. + issue = focusableRule(accessible); + if (issue) { + return issue; + } + + // Check if accessible object has an element with a positive tabindex. + issue = tabIndexRule(accessible); + if (issue) { + return issue; + } + + // Check if a focusable accessible has interactive semantics. + issue = semanticsRule(accessible); + if (issue) { + return issue; + } + + // Check if focusable accessible has associated focus styling. + issue = focusStyleRule(accessible); + if (issue) { + return issue; + } + + return issue; +} + +module.exports.auditKeyboard = auditKeyboard; diff --git a/devtools/server/actors/accessibility/audit/moz.build b/devtools/server/actors/accessibility/audit/moz.build new file mode 100644 index 0000000000..01bd0af849 --- /dev/null +++ b/devtools/server/actors/accessibility/audit/moz.build @@ -0,0 +1,12 @@ +# 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/. + +DevToolsModules( + "contrast.js", + "keyboard.js", + "text-label.js", +) + +with Files("**"): + BUG_COMPONENT = ("DevTools", "Accessibility Tools") diff --git a/devtools/server/actors/accessibility/audit/text-label.js b/devtools/server/actors/accessibility/audit/text-label.js new file mode 100644 index 0000000000..8570c5cce8 --- /dev/null +++ b/devtools/server/actors/accessibility/audit/text-label.js @@ -0,0 +1,438 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const { + accessibility: { + AUDIT_TYPE: { TEXT_LABEL }, + ISSUE_TYPE, + SCORES: { BEST_PRACTICES, FAIL, WARNING }, + }, +} = require("resource://devtools/shared/constants.js"); + +const { + AREA_NO_NAME_FROM_ALT, + DIALOG_NO_NAME, + DOCUMENT_NO_TITLE, + EMBED_NO_NAME, + FIGURE_NO_NAME, + FORM_FIELDSET_NO_NAME, + FORM_FIELDSET_NO_NAME_FROM_LEGEND, + FORM_NO_NAME, + FORM_NO_VISIBLE_NAME, + FORM_OPTGROUP_NO_NAME_FROM_LABEL, + FRAME_NO_NAME, + HEADING_NO_CONTENT, + HEADING_NO_NAME, + IFRAME_NO_NAME_FROM_TITLE, + IMAGE_NO_NAME, + INTERACTIVE_NO_NAME, + MATHML_GLYPH_NO_NAME, + TOOLBAR_NO_NAME, +} = ISSUE_TYPE[TEXT_LABEL]; + +/** + * Check if the accessible is visible to the assistive technology. + * @param {nsIAccessible} accessible + * Accessible object to be tested for visibility. + * + * @returns {Boolean} + * True if accessible object is visible to assistive technology. + */ +function isVisible(accessible) { + const state = {}; + accessible.getState(state, {}); + return !(state.value & Ci.nsIAccessibleStates.STATE_INVISIBLE); +} + +/** + * Get related accessible objects that are targets of labelled by relation e.g. + * labels. + * @param {nsIAccessible} accessible + * Accessible objects to get labels for. + * + * @returns {Array} + * A list of accessible objects that are labels for a given accessible. + */ +function getLabels(accessible) { + const relation = accessible.getRelationByType( + Ci.nsIAccessibleRelation.RELATION_LABELLED_BY + ); + return [...relation.getTargets().enumerate(Ci.nsIAccessible)]; +} + +/** + * Get a trimmed name of the accessible object. + * + * @param {nsIAccessible} accessible + * Accessible objects to get a name for. + * + * @returns {null|String} + * Trimmed name of the accessible object if available. + */ +function getAccessibleName(accessible) { + return accessible.name && accessible.name.trim(); +} + +/** + * A text label rule for accessible objects that must have a non empty + * accessible name. + * + * @returns {null|Object} + * Failure audit report if accessible object has no or empty name, null + * otherwise. + */ +const mustHaveNonEmptyNameRule = function (issue, accessible) { + const name = getAccessibleName(accessible); + return name ? null : { score: FAIL, issue }; +}; + +/** + * A text label rule for accessible objects that should have a non empty + * accessible name as a best practice. + * + * @returns {null|Object} + * Best practices audit report if accessible object has no or empty + * name, null otherwise. + */ +const shouldHaveNonEmptyNameRule = function (issue, accessible) { + const name = getAccessibleName(accessible); + return name ? null : { score: BEST_PRACTICES, issue }; +}; + +/** + * A text label rule for accessible objects that can be activated via user + * action and must have a non-empty name. + * + * @returns {null|Object} + * Failure audit report if interactive accessible object has no or + * empty name, null otherwise. + */ +const interactiveRule = mustHaveNonEmptyNameRule.bind( + null, + INTERACTIVE_NO_NAME +); + +/** + * A text label rule for accessible objects that correspond to dialogs and thus + * should have a non-empty name. + * + * @returns {null|Object} + * Best practices audit report if dialog accessible object has no or + * empty name, null otherwise. + */ +const dialogRule = shouldHaveNonEmptyNameRule.bind(null, DIALOG_NO_NAME); + +/** + * A text label rule for accessible objects that provide visual information + * (images, canvas, etc.) and must have a defined name (that can be empty, e.g. + * ""). + * + * @returns {null|Object} + * Failure audit report if interactive accessible object has no name, + * null otherwise. + */ +const imageRule = function (accessible) { + const name = getAccessibleName(accessible); + return name != null ? null : { score: FAIL, issue: IMAGE_NO_NAME }; +}; + +/** + * A text label rule for accessible objects that correspond to form elements. + * These objects must have a non-empty name and must have a visible label. + * + * @returns {null|Object} + * Failure audit report if form element accessible object has no name, + * warning if the name does not come from a visible label, null + * otherwise. + */ +const formRule = function (accessible) { + const name = getAccessibleName(accessible); + if (!name) { + return { score: FAIL, issue: FORM_NO_NAME }; + } + + const labels = getLabels(accessible); + const hasNameFromVisibleLabel = labels.some(label => isVisible(label)); + + return hasNameFromVisibleLabel + ? null + : { score: WARNING, issue: FORM_NO_VISIBLE_NAME }; +}; + +/** + * A text label rule for elements that map to ROLE_GROUPING: + * * <OPTGROUP> must have a non-empty name and must be provided via the + * "label" attribute. + * * <FIELDSET> must have a non-empty name and must be provided via the + * corresponding <LEGEND> element. + * + * @returns {null|Object} + * Failure audit report if form grouping accessible object has no name, + * or has a name that is not derived from a required location, null + * otherwise. + */ +const formGroupingRule = function (accessible) { + const name = getAccessibleName(accessible); + const { DOMNode } = accessible; + + switch (DOMNode.nodeName) { + case "OPTGROUP": + return name && DOMNode.label && DOMNode.label.trim() === name + ? null + : { + score: FAIL, + issue: FORM_OPTGROUP_NO_NAME_FROM_LABEL, + }; + case "FIELDSET": + if (!name) { + return { score: FAIL, issue: FORM_FIELDSET_NO_NAME }; + } + + const labels = getLabels(accessible); + const hasNameFromLegend = labels.some( + label => + label.DOMNode.nodeName === "LEGEND" && + label.name && + label.name.trim() === name && + isVisible(label) + ); + + return hasNameFromLegend + ? null + : { + score: WARNING, + issue: FORM_FIELDSET_NO_NAME_FROM_LEGEND, + }; + default: + return null; + } +}; + +/** + * A text label rule for elements that map to ROLE_TEXT_CONTAINER: + * * <METER> mapps to ROLE_TEXT_CONTAINER and must have a name provided via + * the visible label. Note: Will only work when bug 559770 is resolved (right + * now, unlabelled meters are not mapped to an accessible object). + * + * @returns {null|Object} + * Failure audit report depending on requirements for dialogs or form + * meter element, null otherwise. + */ +const textContainerRule = function (accessible) { + const { DOMNode } = accessible; + + switch (DOMNode.nodeName) { + case "DIALOG": + return dialogRule(accessible); + case "METER": + return formRule(accessible); + default: + return null; + } +}; + +/** + * A text label rule for elements that map to ROLE_INTERNAL_FRAME: + * * <OBJECT> maps to ROLE_INTERNAL_FRAME. Check the type attribute and whether + * it includes "image/" (e.g. image/jpeg, image/png, image/gif). If so, audit + * it the same way other image roles are audited. + * * <EMBED> maps to ROLE_INTERNAL_FRAME and must have a non-empty name. + * * <FRAME> and <IFRAME> map to ROLE_INTERNAL_FRAME and must have a non-empty + * title attribute. + * + * @returns {null|Object} + * Failure audit report if the internal frame accessible object name is + * not provided or if it is not derived from a required location, null + * otherwise. + */ +const internalFrameRule = function (accessible) { + const { DOMNode } = accessible; + switch (DOMNode.nodeName) { + case "FRAME": + return mustHaveNonEmptyNameRule(FRAME_NO_NAME, accessible); + case "IFRAME": + const name = getAccessibleName(accessible); + const title = DOMNode.title && DOMNode.title.trim(); + + return title && title === name + ? null + : { score: FAIL, issue: IFRAME_NO_NAME_FROM_TITLE }; + case "OBJECT": { + const type = DOMNode.getAttribute("type"); + if (!type || !type.startsWith("image/")) { + return null; + } + + return imageRule(accessible); + } + case "EMBED": { + const type = DOMNode.getAttribute("type"); + if (!type || !type.startsWith("image/")) { + return mustHaveNonEmptyNameRule(EMBED_NO_NAME, accessible); + } + return imageRule(accessible); + } + default: + return null; + } +}; + +/** + * A text label rule for accessible objects that represent documents and should + * have title element provided. + * + * @returns {null|Object} + * Failure audit report if document accessible object has no or empty + * title, null otherwise. + */ +const documentRule = function (accessible) { + const title = accessible.DOMNode.title && accessible.DOMNode.title.trim(); + return title ? null : { score: FAIL, issue: DOCUMENT_NO_TITLE }; +}; + +/** + * A text label rule for accessible objects that correspond to headings and thus + * must be non-empty. + * + * @returns {null|Object} + * Failure audit report if heading accessible object has no or + * empty name or if its text content is empty, null otherwise. + */ +const headingRule = function (accessible) { + const name = getAccessibleName(accessible); + if (!name) { + return { score: FAIL, issue: HEADING_NO_NAME }; + } + + const content = + accessible.DOMNode.textContent && accessible.DOMNode.textContent.trim(); + return content ? null : { score: WARNING, issue: HEADING_NO_CONTENT }; +}; + +/** + * A text label rule for accessible objects that represent toolbars and must + * have a non-empty name if there is more than one toolbar present. + * + * @returns {null|Object} + * Failure audit report if toolbar accessible object is not the only + * toolbar in the document and has no or empty title, null otherwise. + */ +const toolbarRule = function (accessible) { + const toolbars = + accessible.DOMNode.ownerDocument.querySelectorAll(`[role="toolbar"]`); + + return toolbars.length > 1 + ? mustHaveNonEmptyNameRule(TOOLBAR_NO_NAME, accessible) + : null; +}; + +/** + * A text label rule for accessible objects that represent link (anchors, areas) + * and must have a non-empty name. + * + * @returns {null|Object} + * Failure audit report if link accessible object has no or empty name, + * or in case when it's an <area> element with href attribute the name + * is not specified by an alt attribute, null otherwise. + */ +const linkRule = function (accessible) { + const { DOMNode } = accessible; + if (DOMNode.nodeName === "AREA" && DOMNode.hasAttribute("href")) { + const alt = DOMNode.getAttribute("alt"); + const name = getAccessibleName(accessible); + return alt && alt.trim() === name + ? null + : { score: FAIL, issue: AREA_NO_NAME_FROM_ALT }; + } + + return interactiveRule(accessible); +}; + +/** + * A text label rule for accessible objects that are used to display + * non-standard symbols where existing Unicode characters are not available and + * must have a non-empty name. + * + * @returns {null|Object} + * Failure audit report if mglyph accessible object has no or empty + * name, and no or empty alt attribute, null otherwise. + */ +const mathmlGlyphRule = function (accessible) { + const name = getAccessibleName(accessible); + if (name) { + return null; + } + + const { DOMNode } = accessible; + const alt = DOMNode.getAttribute("alt"); + return alt && alt.trim() + ? null + : { score: FAIL, issue: MATHML_GLYPH_NO_NAME }; +}; + +const RULES = { + [Ci.nsIAccessibleRole.ROLE_BUTTONMENU]: interactiveRule, + [Ci.nsIAccessibleRole.ROLE_CANVAS]: imageRule, + [Ci.nsIAccessibleRole.ROLE_CHECKBUTTON]: formRule, + [Ci.nsIAccessibleRole.ROLE_CHECK_MENU_ITEM]: interactiveRule, + [Ci.nsIAccessibleRole.ROLE_CHECK_RICH_OPTION]: formRule, + [Ci.nsIAccessibleRole.ROLE_COLUMNHEADER]: interactiveRule, + [Ci.nsIAccessibleRole.ROLE_COMBOBOX]: formRule, + [Ci.nsIAccessibleRole.ROLE_COMBOBOX_OPTION]: interactiveRule, + [Ci.nsIAccessibleRole.ROLE_DIAGRAM]: imageRule, + [Ci.nsIAccessibleRole.ROLE_DIALOG]: dialogRule, + [Ci.nsIAccessibleRole.ROLE_DOCUMENT]: documentRule, + [Ci.nsIAccessibleRole.ROLE_EDITCOMBOBOX]: formRule, + [Ci.nsIAccessibleRole.ROLE_ENTRY]: formRule, + [Ci.nsIAccessibleRole.ROLE_FIGURE]: shouldHaveNonEmptyNameRule.bind( + null, + FIGURE_NO_NAME + ), + [Ci.nsIAccessibleRole.ROLE_GRAPHIC]: imageRule, + [Ci.nsIAccessibleRole.ROLE_GROUPING]: formGroupingRule, + [Ci.nsIAccessibleRole.ROLE_HEADING]: headingRule, + [Ci.nsIAccessibleRole.ROLE_IMAGE_MAP]: imageRule, + [Ci.nsIAccessibleRole.ROLE_INTERNAL_FRAME]: internalFrameRule, + [Ci.nsIAccessibleRole.ROLE_LINK]: linkRule, + [Ci.nsIAccessibleRole.ROLE_LISTBOX]: formRule, + [Ci.nsIAccessibleRole.ROLE_MATHML_GLYPH]: mathmlGlyphRule, + [Ci.nsIAccessibleRole.ROLE_MENUITEM]: interactiveRule, + [Ci.nsIAccessibleRole.ROLE_OPTION]: interactiveRule, + [Ci.nsIAccessibleRole.ROLE_OUTLINEITEM]: interactiveRule, + [Ci.nsIAccessibleRole.ROLE_PAGETAB]: interactiveRule, + [Ci.nsIAccessibleRole.ROLE_PASSWORD_TEXT]: formRule, + [Ci.nsIAccessibleRole.ROLE_PROGRESSBAR]: formRule, + [Ci.nsIAccessibleRole.ROLE_PUSHBUTTON]: interactiveRule, + [Ci.nsIAccessibleRole.ROLE_RADIOBUTTON]: formRule, + [Ci.nsIAccessibleRole.ROLE_RADIO_MENU_ITEM]: interactiveRule, + [Ci.nsIAccessibleRole.ROLE_ROWHEADER]: interactiveRule, + [Ci.nsIAccessibleRole.ROLE_SLIDER]: formRule, + [Ci.nsIAccessibleRole.ROLE_SPINBUTTON]: formRule, + [Ci.nsIAccessibleRole.ROLE_SWITCH]: formRule, + [Ci.nsIAccessibleRole.ROLE_TEXT_CONTAINER]: textContainerRule, + [Ci.nsIAccessibleRole.ROLE_TOGGLE_BUTTON]: interactiveRule, + [Ci.nsIAccessibleRole.ROLE_TOOLBAR]: toolbarRule, +}; + +/** + * Perform audit for WCAG 1.1 criteria related to providing alternative text + * depending on the type of content. + * @param {nsIAccessible} accessible + * Accessible object to be tested to determine if it requires and has + * an appropriate text alternative. + * + * @return {null|Object} + * Null if accessible does not need or has the right text alternative, + * audit data otherwise. This data is used in the accessibility panel + * for its audit filters, audit badges, sidebar checks section and + * highlighter. + */ +function auditTextLabel(accessible) { + const rule = RULES[accessible.role]; + return rule ? rule(accessible) : null; +} + +module.exports.auditTextLabel = auditTextLabel; diff --git a/devtools/server/actors/accessibility/constants.js b/devtools/server/actors/accessibility/constants.js new file mode 100644 index 0000000000..6035b5c844 --- /dev/null +++ b/devtools/server/actors/accessibility/constants.js @@ -0,0 +1,59 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const { + accessibility: { + SIMULATION_TYPE: { + ACHROMATOPSIA, + DEUTERANOPIA, + PROTANOPIA, + TRITANOPIA, + CONTRAST_LOSS, + }, + }, +} = require("resource://devtools/shared/constants.js"); + +/** + * Constants used in accessibility actors. + */ + +// Color blindness matrix values taken from Machado et al. (2009), https://doi.org/10.1109/TVCG.2009.113: +// https://www.inf.ufrgs.br/~oliveira/pubs_files/CVD_Simulation/CVD_Simulation.html +// Contrast loss matrix values are for 50% contrast (see https://docs.rainmeter.net/tips/colormatrix-guide/, +// and https://stackoverflow.com/questions/23865511/contrast-with-color-matrix). The matrices are flattened +// 4x5 matrices, needed for docShell setColorMatrix method. i.e. A 4x5 matrix of the form: +// 1 2 3 4 5 +// 6 7 8 9 10 +// 11 12 13 14 15 +// 16 17 18 19 20 +// will be need to be set in docShell as: +// [1, 6, 11, 16, 2, 7, 12, 17, 3, 8, 13, 18, 4, 9, 14, 19, 5, 10, 15, 20] +const COLOR_TRANSFORMATION_MATRICES = { + NONE: [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0], + [ACHROMATOPSIA]: [ + 0.299, 0.299, 0.299, 0, 0.587, 0.587, 0.587, 0, 0.114, 0.114, 0.114, 0, 0, + 0, 0, 1, 0, 0, 0, 0, + ], + [PROTANOPIA]: [ + 0.152286, 0.114503, -0.003882, 0, 1.052583, 0.786281, -0.048116, 0, + -0.204868, 0.099216, 1.051998, 0, 0, 0, 0, 1, 0, 0, 0, 0, + ], + [DEUTERANOPIA]: [ + 0.367322, 0.280085, -0.01182, 0, 0.860646, 0.672501, 0.04294, 0, -0.227968, + 0.047413, 0.968881, 0, 0, 0, 0, 1, 0, 0, 0, 0, + ], + [TRITANOPIA]: [ + 1.255528, -0.078411, 0.004733, 0, -0.076749, 0.930809, 0.691367, 0, + -0.178779, 0.147602, 0.3039, 0, 0, 0, 0, 1, 0, 0, 0, 0, + ], + [CONTRAST_LOSS]: [ + 0.5, 0, 0, 0, 0, 0.5, 0, 0, 0, 0, 0.5, 0, 0, 0, 0, 0.5, 0.25, 0.25, 0.25, 0, + ], +}; + +exports.simulation = { + COLOR_TRANSFORMATION_MATRICES, +}; diff --git a/devtools/server/actors/accessibility/moz.build b/devtools/server/actors/accessibility/moz.build new file mode 100644 index 0000000000..4da1cd0b24 --- /dev/null +++ b/devtools/server/actors/accessibility/moz.build @@ -0,0 +1,20 @@ +# 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/. + +DIRS += [ + "audit", +] + +DevToolsModules( + "accessibility.js", + "accessible.js", + "constants.js", + "parent-accessibility.js", + "simulator.js", + "walker.js", + "worker.js", +) + +with Files("**"): + BUG_COMPONENT = ("DevTools", "Accessibility Tools") diff --git a/devtools/server/actors/accessibility/parent-accessibility.js b/devtools/server/actors/accessibility/parent-accessibility.js new file mode 100644 index 0000000000..fd2c945ea7 --- /dev/null +++ b/devtools/server/actors/accessibility/parent-accessibility.js @@ -0,0 +1,154 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const { Actor } = require("resource://devtools/shared/protocol.js"); +const { + parentAccessibilitySpec, +} = require("resource://devtools/shared/specs/accessibility.js"); + +const PREF_ACCESSIBILITY_FORCE_DISABLED = "accessibility.force_disabled"; + +class ParentAccessibilityActor extends Actor { + constructor(conn) { + super(conn, parentAccessibilitySpec); + + this.userPref = Services.prefs.getIntPref( + PREF_ACCESSIBILITY_FORCE_DISABLED + ); + + if (this.enabled && !this.accService) { + // Set a local reference to an accessibility service if accessibility was + // started elsewhere to ensure that parent process a11y service does not + // get GC'ed away. + this.accService = Cc["@mozilla.org/accessibilityService;1"].getService( + Ci.nsIAccessibilityService + ); + } + + Services.obs.addObserver(this, "a11y-consumers-changed"); + Services.prefs.addObserver(PREF_ACCESSIBILITY_FORCE_DISABLED, this); + } + + bootstrap() { + return { + canBeDisabled: this.canBeDisabled, + canBeEnabled: this.canBeEnabled, + }; + } + + observe(subject, topic, data) { + if (topic === "a11y-consumers-changed") { + // This event is fired when accessibility service consumers change. Since + // this observer lives in parent process there are 2 possible consumers of + // a11y service: XPCOM and PlatformAPI (e.g. screen readers). We only care + // about PlatformAPI consumer changes because when set, we can no longer + // disable accessibility service. + const { PlatformAPI } = JSON.parse(data); + this.emit("can-be-disabled-change", !PlatformAPI); + } else if ( + !this.disabling && + topic === "nsPref:changed" && + data === PREF_ACCESSIBILITY_FORCE_DISABLED + ) { + // PREF_ACCESSIBILITY_FORCE_DISABLED preference change event. When set to + // >=1, it means that the user wants to disable accessibility service and + // prevent it from starting in the future. Note: we also check + // this.disabling state when handling this pref change because this is how + // we disable the accessibility inspector itself. + this.emit("can-be-enabled-change", this.canBeEnabled); + } + } + + /** + * A getter that indicates if accessibility service is enabled. + * + * @return {Boolean} + * True if accessibility service is on. + */ + get enabled() { + return Services.appinfo.accessibilityEnabled; + } + + /** + * A getter that indicates if the accessibility service can be disabled. + * + * @return {Boolean} + * True if accessibility service can be disabled. + */ + get canBeDisabled() { + if (this.enabled) { + const a11yService = Cc["@mozilla.org/accessibilityService;1"].getService( + Ci.nsIAccessibilityService + ); + const { PlatformAPI } = JSON.parse(a11yService.getConsumers()); + return !PlatformAPI; + } + + return true; + } + + /** + * A getter that indicates if the accessibility service can be enabled. + * + * @return {Boolean} + * True if accessibility service can be enabled. + */ + get canBeEnabled() { + return Services.prefs.getIntPref(PREF_ACCESSIBILITY_FORCE_DISABLED) < 1; + } + + /** + * Enable accessibility service (via XPCOM service). + */ + enable() { + if (this.enabled || !this.canBeEnabled) { + return; + } + + this.accService = Cc["@mozilla.org/accessibilityService;1"].getService( + Ci.nsIAccessibilityService + ); + } + + /** + * Force disable accessibility service. This method removes the reference to + * the XPCOM a11y service object and flips the + * PREF_ACCESSIBILITY_FORCE_DISABLED preference on and off to shutdown a11y + * service. + */ + disable() { + if (!this.enabled || !this.canBeDisabled) { + return; + } + + this.disabling = true; + this.accService = null; + // Set PREF_ACCESSIBILITY_FORCE_DISABLED to 1 to force disable + // accessibility service. This is the only way to guarantee an immediate + // accessibility service shutdown in all processes. This also prevents + // accessibility service from starting up in the future. + Services.prefs.setIntPref(PREF_ACCESSIBILITY_FORCE_DISABLED, 1); + // Set PREF_ACCESSIBILITY_FORCE_DISABLED back to previous default or user + // set value. This will not start accessibility service until the user + // activates it again. It simply ensures that accessibility service can + // start again (when value is below 1). + Services.prefs.setIntPref(PREF_ACCESSIBILITY_FORCE_DISABLED, this.userPref); + delete this.disabling; + } + + /** + * Destroy the helper class, remove all listeners and if possible disable + * accessibility service in the parent process. + */ + destroy() { + this.disable(); + super.destroy(); + Services.obs.removeObserver(this, "a11y-consumers-changed"); + Services.prefs.removeObserver(PREF_ACCESSIBILITY_FORCE_DISABLED, this); + } +} + +exports.ParentAccessibilityActor = ParentAccessibilityActor; diff --git a/devtools/server/actors/accessibility/simulator.js b/devtools/server/actors/accessibility/simulator.js new file mode 100644 index 0000000000..4f7e059d8c --- /dev/null +++ b/devtools/server/actors/accessibility/simulator.js @@ -0,0 +1,81 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const { Actor } = require("resource://devtools/shared/protocol.js"); +const { + simulatorSpec, +} = require("resource://devtools/shared/specs/accessibility.js"); + +const { + simulation: { COLOR_TRANSFORMATION_MATRICES }, +} = require("resource://devtools/server/actors/accessibility/constants.js"); + +/** + * The SimulatorActor is responsible for setting color matrices + * based on the simulation type specified. + */ +class SimulatorActor extends Actor { + constructor(conn, targetActor) { + super(conn, simulatorSpec); + this.targetActor = targetActor; + } + + /** + * Simulates a type of visual impairment (i.e. color blindness or contrast loss). + * + * @param {Object} options + * Properties: {Array} types + * Contains the types of visual impairment(s) to be simulated. + * Set default color matrix if array is empty. + * @return {Boolean} + * True if matrix was successfully applied, false otherwise. + */ + simulate(options) { + if (options.types.length > 1) { + return false; + } + + return this.setColorMatrix( + COLOR_TRANSFORMATION_MATRICES[ + options.types.length === 1 ? options.types[0] : "NONE" + ] + ); + } + + setColorMatrix(colorMatrix) { + if (!this.docShell) { + return false; + } + + try { + this.docShell.setColorMatrix(colorMatrix); + } catch (error) { + return false; + } + + return true; + } + + /** + * Disables all simulations by setting the default color matrix. + */ + disable() { + this.simulate({ types: [] }); + } + + destroy() { + super.destroy(); + + this.disable(); + this.targetActor = null; + } + + get docShell() { + return this.targetActor && this.targetActor.docShell; + } +} + +exports.SimulatorActor = SimulatorActor; diff --git a/devtools/server/actors/accessibility/walker.js b/devtools/server/actors/accessibility/walker.js new file mode 100644 index 0000000000..17a21af482 --- /dev/null +++ b/devtools/server/actors/accessibility/walker.js @@ -0,0 +1,1315 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const { Actor } = require("resource://devtools/shared/protocol.js"); +const { + accessibleWalkerSpec, +} = require("resource://devtools/shared/specs/accessibility.js"); + +const { + simulation: { COLOR_TRANSFORMATION_MATRICES }, +} = require("resource://devtools/server/actors/accessibility/constants.js"); + +loader.lazyRequireGetter( + this, + "AccessibleActor", + "resource://devtools/server/actors/accessibility/accessible.js", + true +); +loader.lazyRequireGetter( + this, + ["CustomHighlighterActor"], + "resource://devtools/server/actors/highlighters.js", + true +); +loader.lazyRequireGetter( + this, + "DevToolsUtils", + "resource://devtools/shared/DevToolsUtils.js" +); +loader.lazyRequireGetter( + this, + "events", + "resource://devtools/shared/event-emitter.js" +); +loader.lazyRequireGetter( + this, + ["isWindowIncluded", "isFrameWithChildTarget"], + "resource://devtools/shared/layout/utils.js", + true +); +loader.lazyRequireGetter( + this, + "isXUL", + "resource://devtools/server/actors/highlighters/utils/markup.js", + true +); +loader.lazyRequireGetter( + this, + [ + "isDefunct", + "loadSheetForBackgroundCalculation", + "removeSheetForBackgroundCalculation", + ], + "resource://devtools/server/actors/utils/accessibility.js", + true +); +loader.lazyRequireGetter( + this, + "accessibility", + "resource://devtools/shared/constants.js", + true +); + +const kStateHover = 0x00000004; // ElementState::HOVER + +const { + EVENT_TEXT_CHANGED, + EVENT_TEXT_INSERTED, + EVENT_TEXT_REMOVED, + EVENT_ACCELERATOR_CHANGE, + EVENT_ACTION_CHANGE, + EVENT_DEFACTION_CHANGE, + EVENT_DESCRIPTION_CHANGE, + EVENT_DOCUMENT_ATTRIBUTES_CHANGED, + EVENT_HIDE, + EVENT_NAME_CHANGE, + EVENT_OBJECT_ATTRIBUTE_CHANGED, + EVENT_REORDER, + EVENT_STATE_CHANGE, + EVENT_TEXT_ATTRIBUTE_CHANGED, + EVENT_VALUE_CHANGE, +} = Ci.nsIAccessibleEvent; + +// TODO: We do not need this once bug 1422913 is fixed. We also would not need +// to fire a name change event for an accessible that has an updated subtree and +// that has its name calculated from the said subtree. +const NAME_FROM_SUBTREE_RULE_ROLES = new Set([ + Ci.nsIAccessibleRole.ROLE_BUTTONDROPDOWN, + Ci.nsIAccessibleRole.ROLE_BUTTONMENU, + Ci.nsIAccessibleRole.ROLE_CELL, + Ci.nsIAccessibleRole.ROLE_CHECKBUTTON, + Ci.nsIAccessibleRole.ROLE_CHECK_MENU_ITEM, + Ci.nsIAccessibleRole.ROLE_CHECK_RICH_OPTION, + Ci.nsIAccessibleRole.ROLE_COLUMNHEADER, + Ci.nsIAccessibleRole.ROLE_COMBOBOX_OPTION, + Ci.nsIAccessibleRole.ROLE_DEFINITION, + Ci.nsIAccessibleRole.ROLE_GRID_CELL, + Ci.nsIAccessibleRole.ROLE_HEADING, + Ci.nsIAccessibleRole.ROLE_KEY, + Ci.nsIAccessibleRole.ROLE_LABEL, + Ci.nsIAccessibleRole.ROLE_LINK, + Ci.nsIAccessibleRole.ROLE_LISTITEM, + Ci.nsIAccessibleRole.ROLE_MATHML_IDENTIFIER, + Ci.nsIAccessibleRole.ROLE_MATHML_NUMBER, + Ci.nsIAccessibleRole.ROLE_MATHML_OPERATOR, + Ci.nsIAccessibleRole.ROLE_MATHML_TEXT, + Ci.nsIAccessibleRole.ROLE_MATHML_STRING_LITERAL, + Ci.nsIAccessibleRole.ROLE_MATHML_GLYPH, + Ci.nsIAccessibleRole.ROLE_MENUITEM, + Ci.nsIAccessibleRole.ROLE_OPTION, + Ci.nsIAccessibleRole.ROLE_OUTLINEITEM, + Ci.nsIAccessibleRole.ROLE_PAGETAB, + Ci.nsIAccessibleRole.ROLE_PARENT_MENUITEM, + Ci.nsIAccessibleRole.ROLE_PUSHBUTTON, + Ci.nsIAccessibleRole.ROLE_RADIOBUTTON, + Ci.nsIAccessibleRole.ROLE_RADIO_MENU_ITEM, + Ci.nsIAccessibleRole.ROLE_RICH_OPTION, + Ci.nsIAccessibleRole.ROLE_ROW, + Ci.nsIAccessibleRole.ROLE_ROWHEADER, + Ci.nsIAccessibleRole.ROLE_SUMMARY, + Ci.nsIAccessibleRole.ROLE_SWITCH, + Ci.nsIAccessibleRole.ROLE_TERM, + Ci.nsIAccessibleRole.ROLE_TOGGLE_BUTTON, + Ci.nsIAccessibleRole.ROLE_TOOLTIP, +]); + +const IS_OSX = Services.appinfo.OS === "Darwin"; + +const { + SCORES: { BEST_PRACTICES, FAIL, WARNING }, +} = accessibility; + +/** + * Helper function that determines if nsIAccessible object is in stale state. When an + * object is stale it means its subtree is not up to date. + * + * @param {nsIAccessible} accessible + * object to be tested. + * @return {Boolean} + * True if accessible object is stale, false otherwise. + */ +function isStale(accessible) { + const extraState = {}; + accessible.getState({}, extraState); + // extraState.value is a bitmask. We are applying bitwise AND to mask out + // irrelevant states. + return !!(extraState.value & Ci.nsIAccessibleStates.EXT_STATE_STALE); +} + +/** + * Get accessibility audit starting with the passed accessible object as a root. + * + * @param {Object} acc + * AccessibileActor to be used as the root for the audit. + * @param {Object} options + * Options for running audit, may include: + * - types: Array of audit types to be performed during audit. + * @param {Map} report + * An accumulator map to be used to store audit information. + * @param {Object} progress + * An audit project object that is used to track the progress of the + * audit and send progress "audit-event" events to the client. + */ +function getAudit(acc, options, report, progress) { + if (acc.isDefunct) { + return; + } + + // Audit returns a promise, save the actual value in the report. + report.set( + acc, + acc.audit(options).then(result => { + report.set(acc, result); + progress.increment(); + }) + ); + + for (const child of acc.children()) { + getAudit(child, options, report, progress); + } +} + +/** + * A helper class that is used to track audit progress and send progress events + * to the client. + */ +class AuditProgress { + constructor(walker) { + this.completed = 0; + this.percentage = 0; + this.walker = walker; + } + + setTotal(size) { + this.size = size; + } + + notify() { + this.walker.emit("audit-event", { + type: "progress", + progress: { + total: this.size, + percentage: this.percentage, + completed: this.completed, + }, + }); + } + + increment() { + this.completed++; + const { completed, size } = this; + if (!size) { + return; + } + + const percentage = Math.round((completed / size) * 100); + if (percentage > this.percentage) { + this.percentage = percentage; + this.notify(); + } + } + + destroy() { + this.walker = null; + } +} + +/** + * The AccessibleWalkerActor stores a cache of AccessibleActors that represent + * accessible objects in a given document. + * + * It is also responsible for implicitely initializing and shutting down + * accessibility engine by storing a reference to the XPCOM accessibility + * service. + */ +class AccessibleWalkerActor extends Actor { + constructor(conn, targetActor) { + super(conn, accessibleWalkerSpec); + this.targetActor = targetActor; + this.refMap = new Map(); + this._loadedSheets = new WeakMap(); + this.setA11yServiceGetter(); + this.onPick = this.onPick.bind(this); + this.onHovered = this.onHovered.bind(this); + this._preventContentEvent = this._preventContentEvent.bind(this); + this.onKey = this.onKey.bind(this); + this.onFocusIn = this.onFocusIn.bind(this); + this.onFocusOut = this.onFocusOut.bind(this); + this.onHighlighterEvent = this.onHighlighterEvent.bind(this); + } + + get highlighter() { + if (!this._highlighter) { + this._highlighter = new CustomHighlighterActor( + this, + "AccessibleHighlighter" + ); + + this.manage(this._highlighter); + this._highlighter.on("highlighter-event", this.onHighlighterEvent); + } + + return this._highlighter; + } + + get tabbingOrderHighlighter() { + if (!this._tabbingOrderHighlighter) { + this._tabbingOrderHighlighter = new CustomHighlighterActor( + this, + "TabbingOrderHighlighter" + ); + + this.manage(this._tabbingOrderHighlighter); + } + + return this._tabbingOrderHighlighter; + } + + setA11yServiceGetter() { + DevToolsUtils.defineLazyGetter(this, "a11yService", () => { + Services.obs.addObserver(this, "accessible-event"); + return Cc["@mozilla.org/accessibilityService;1"].getService( + Ci.nsIAccessibilityService + ); + }); + } + + get rootWin() { + return this.targetActor && this.targetActor.window; + } + + get rootDoc() { + return this.targetActor && this.targetActor.window.document; + } + + get isXUL() { + return isXUL(this.rootWin); + } + + get colorMatrix() { + if (!this.targetActor.docShell) { + return null; + } + + const colorMatrix = this.targetActor.docShell.getColorMatrix(); + if ( + colorMatrix.length === 0 || + colorMatrix === COLOR_TRANSFORMATION_MATRICES.NONE + ) { + return null; + } + + return colorMatrix; + } + + reset() { + try { + Services.obs.removeObserver(this, "accessible-event"); + } catch (e) { + // Accessible event observer might not have been initialized if a11y + // service was never used. + } + + this.cancelPick(); + + // Clean up accessible actors cache. + this.clearRefs(); + + this._childrenPromise = null; + delete this.a11yService; + this.setA11yServiceGetter(); + } + + /** + * Remove existing cache (of accessible actors) from tree. + */ + clearRefs() { + for (const actor of this.refMap.values()) { + actor.destroy(); + } + } + + destroy() { + super.destroy(); + + this.reset(); + + if (this._highlighter) { + this._highlighter.off("highlighter-event", this.onHighlighterEvent); + this._highlighter = null; + } + + if (this._tabbingOrderHighlighter) { + this._tabbingOrderHighlighter = null; + } + + this.targetActor = null; + this.refMap = null; + } + + getRef(rawAccessible) { + return this.refMap.get(rawAccessible); + } + + addRef(rawAccessible) { + let actor = this.refMap.get(rawAccessible); + if (actor) { + return actor; + } + + actor = new AccessibleActor(this, rawAccessible); + // Add the accessible actor as a child of this accessible walker actor, + // assigning it an actorID. + this.manage(actor); + this.refMap.set(rawAccessible, actor); + + return actor; + } + + /** + * Clean up accessible actors cache for a given accessible's subtree. + * + * @param {null|nsIAccessible} rawAccessible + */ + purgeSubtree(rawAccessible) { + if (!rawAccessible) { + return; + } + + try { + for ( + let child = rawAccessible.firstChild; + child; + child = child.nextSibling + ) { + this.purgeSubtree(child); + } + } catch (e) { + // rawAccessible or its descendants are defunct. + } + + const actor = this.getRef(rawAccessible); + if (actor) { + actor.destroy(); + } + } + + unmanage(actor) { + if (actor instanceof AccessibleActor) { + this.refMap.delete(actor.rawAccessible); + } + Actor.prototype.unmanage.call(this, actor); + } + + /** + * A helper method. Accessibility walker is assumed to have only 1 child which + * is the top level document. + */ + async children() { + if (this._childrenPromise) { + return this._childrenPromise; + } + + this._childrenPromise = Promise.all([this.getDocument()]); + const children = await this._childrenPromise; + this._childrenPromise = null; + return children; + } + + /** + * A promise for a root document accessible actor that only resolves when its + * corresponding document accessible object is fully loaded. + * + * @return {Promise} + */ + getDocument() { + if (!this.rootDoc || !this.rootDoc.documentElement) { + return this.once("document-ready").then(docAcc => this.addRef(docAcc)); + } + + if (this.isXUL) { + const doc = this.addRef(this.getRawAccessibleFor(this.rootDoc)); + return Promise.resolve(doc); + } + + const doc = this.getRawAccessibleFor(this.rootDoc); + + // For non-visible same-process iframes we don't get a document and + // won't get a "document-ready" event. + if (!doc && !this.rootWin.windowGlobalChild.isProcessRoot) { + // We can ignore such document as there won't be anything to audit in them. + return null; + } + + if (!doc || isStale(doc)) { + return this.once("document-ready").then(docAcc => this.addRef(docAcc)); + } + + return Promise.resolve(this.addRef(doc)); + } + + /** + * Get an accessible actor for a domnode actor. + * @param {Object} domNode + * domnode actor for which accessible actor is being created. + * @return {Promse} + * A promise that resolves when accessible actor is created for a + * domnode actor. + */ + getAccessibleFor(domNode) { + // We need to make sure that the document is loaded processed by a11y first. + return this.getDocument().then(() => { + const rawAccessible = this.getRawAccessibleFor(domNode.rawNode); + // Not all DOM nodes have corresponding accessible objects. It's usually + // the case where there is no semantics or relevance to the accessibility + // client. + if (!rawAccessible) { + return null; + } + + return this.addRef(rawAccessible); + }); + } + + /** + * Get a raw accessible object for a raw node. + * @param {DOMNode} rawNode + * Raw node for which accessible object is being retrieved. + * @return {nsIAccessible} + * Accessible object for a given DOMNode. + */ + getRawAccessibleFor(rawNode) { + // Accessible can only be retrieved iff accessibility service is enabled. + if (!Services.appinfo.accessibilityEnabled) { + return null; + } + + return this.a11yService.getAccessibleFor(rawNode); + } + + async getAncestry(accessible) { + if (!accessible || accessible.indexInParent === -1) { + return []; + } + const doc = await this.getDocument(); + if (!doc) { + return []; + } + + const ancestry = []; + if (accessible === doc) { + return ancestry; + } + + try { + let parent = accessible; + while (parent && (parent = parent.parentAcc) && parent != doc) { + ancestry.push(parent); + } + ancestry.push(doc); + } catch (error) { + throw new Error(`Failed to get ancestor for ${accessible}: ${error}`); + } + + return ancestry.map(parent => ({ + accessible: parent, + children: parent.children(), + })); + } + + /** + * Run accessibility audit and return relevant ancestries for AccessibleActors + * that have non-empty audit checks. + * + * @param {Object} options + * Options for running audit, may include: + * - types: Array of audit types to be performed during audit. + * + * @return {Promise} + * A promise that resolves when the audit is complete and all relevant + * ancestries are calculated. + */ + async audit(options) { + const doc = await this.getDocument(); + if (!doc) { + return []; + } + + const report = new Map(); + this._auditProgress = new AuditProgress(this); + getAudit(doc, options, report, this._auditProgress); + this._auditProgress.setTotal(report.size); + await Promise.all(report.values()); + + const ancestries = []; + for (const [acc, audit] of report.entries()) { + // Filter out audits that have no failing checks. + if ( + audit && + Object.values(audit).some( + check => + check != null && + !check.error && + [BEST_PRACTICES, FAIL, WARNING].includes(check.score) + ) + ) { + ancestries.push(this.getAncestry(acc)); + } + } + + return Promise.all(ancestries); + } + + /** + * Start accessibility audit. The result of this function will not be an audit + * report. Instead, an "audit-event" event will be fired when the audit is + * completed or fails. + * + * @param {Object} options + * Options for running audit, may include: + * - types: Array of audit types to be performed during audit. + */ + startAudit(options) { + // Audit is already running, wait for the "audit-event" event. + if (this._auditing) { + return; + } + + this._auditing = this.audit(options) + // We do not want to block on audit request, instead fire "audit-event" + // event when internal audit is finished or failed. + .then(ancestries => + this.emit("audit-event", { + type: "completed", + ancestries, + }) + ) + .catch(() => this.emit("audit-event", { type: "error" })) + .finally(() => { + this._auditing = null; + if (this._auditProgress) { + this._auditProgress.destroy(); + this._auditProgress = null; + } + }); + } + + onHighlighterEvent(data) { + this.emit("highlighter-event", data); + } + + /** + * Accessible event observer function. + * + * @param {Ci.nsIAccessibleEvent} subject + * accessible event object. + */ + // eslint-disable-next-line complexity + observe(subject) { + const event = subject.QueryInterface(Ci.nsIAccessibleEvent); + const rawAccessible = event.accessible; + const accessible = this.getRef(rawAccessible); + + if (rawAccessible instanceof Ci.nsIAccessibleDocument && !accessible) { + const rootDocAcc = this.getRawAccessibleFor(this.rootDoc); + if (rawAccessible === rootDocAcc && !isStale(rawAccessible)) { + this.clearRefs(); + // If it's a top level document notify listeners about the document + // being ready. + events.emit(this, "document-ready", rawAccessible); + } + } + + switch (event.eventType) { + case EVENT_STATE_CHANGE: + const { state, isEnabled } = event.QueryInterface( + Ci.nsIAccessibleStateChangeEvent + ); + const isBusy = state & Ci.nsIAccessibleStates.STATE_BUSY; + if (accessible) { + // Only propagate state change events for active accessibles. + if (isBusy && isEnabled) { + if (rawAccessible instanceof Ci.nsIAccessibleDocument) { + // Remove existing cache from tree. + this.clearRefs(); + } + return; + } + events.emit(accessible, "states-change", accessible.states); + } + + break; + case EVENT_NAME_CHANGE: + if (accessible) { + events.emit( + accessible, + "name-change", + rawAccessible.name, + event.DOMNode == this.rootDoc + ? undefined + : this.getRef(rawAccessible.parent) + ); + } + break; + case EVENT_VALUE_CHANGE: + if (accessible) { + events.emit(accessible, "value-change", rawAccessible.value); + } + break; + case EVENT_DESCRIPTION_CHANGE: + if (accessible) { + events.emit( + accessible, + "description-change", + rawAccessible.description + ); + } + break; + case EVENT_REORDER: + if (accessible) { + accessible + .children() + .forEach(child => + events.emit(child, "index-in-parent-change", child.indexInParent) + ); + events.emit(accessible, "reorder", rawAccessible.childCount); + } + break; + case EVENT_HIDE: + if (event.DOMNode == this.rootDoc) { + this.clearRefs(); + } else { + this.purgeSubtree(rawAccessible); + } + break; + case EVENT_DEFACTION_CHANGE: + case EVENT_ACTION_CHANGE: + if (accessible) { + events.emit(accessible, "actions-change", accessible.actions); + } + break; + case EVENT_TEXT_CHANGED: + case EVENT_TEXT_INSERTED: + case EVENT_TEXT_REMOVED: + if (accessible) { + events.emit(accessible, "text-change"); + if (NAME_FROM_SUBTREE_RULE_ROLES.has(rawAccessible.role)) { + events.emit( + accessible, + "name-change", + rawAccessible.name, + event.DOMNode == this.rootDoc + ? undefined + : this.getRef(rawAccessible.parent) + ); + } + } + break; + case EVENT_DOCUMENT_ATTRIBUTES_CHANGED: + case EVENT_OBJECT_ATTRIBUTE_CHANGED: + case EVENT_TEXT_ATTRIBUTE_CHANGED: + if (accessible) { + events.emit(accessible, "attributes-change", accessible.attributes); + } + break; + // EVENT_ACCELERATOR_CHANGE is currently not fired by gecko accessibility. + case EVENT_ACCELERATOR_CHANGE: + if (accessible) { + events.emit( + accessible, + "shortcut-change", + accessible.keyboardShortcut + ); + } + break; + default: + break; + } + } + + /** + * Ensure that nothing interferes with the audit for an accessible object + * (CSS, overlays) by load accessibility highlighter style sheet used for + * preventing transitions and applying transparency when calculating colour + * contrast as well as temporarily hiding accessible highlighter overlay. + * @param {Object} win + * Window where highlighting happens. + */ + async clearStyles(win) { + const requests = this._loadedSheets.get(win); + if (requests != null) { + this._loadedSheets.set(win, requests + 1); + return; + } + + // Disable potential mouse driven transitions (This is important because accessibility + // highlighter temporarily modifies text color related CSS properties. In case where + // there are transitions that affect them, there might be unexpected side effects when + // taking a snapshot for contrast measurement). + loadSheetForBackgroundCalculation(win); + this._loadedSheets.set(win, 1); + await this.hideHighlighter(); + } + + /** + * Restore CSS and overlays that could've interfered with the audit for an + * accessible object by unloading accessibility highlighter style sheet used + * for preventing transitions and applying transparency when calculating + * colour contrast and potentially restoring accessible highlighter overlay. + * @param {Object} win + * Window where highlighting was happenning. + */ + async restoreStyles(win) { + const requests = this._loadedSheets.get(win); + if (!requests) { + return; + } + + if (requests > 1) { + this._loadedSheets.set(win, requests - 1); + return; + } + + await this.showHighlighter(); + removeSheetForBackgroundCalculation(win); + this._loadedSheets.delete(win); + } + + async hideHighlighter() { + // TODO: Fix this workaround that temporarily removes higlighter bounds + // overlay that can interfere with the contrast ratio calculation. + if (this._highlighter) { + const highlighter = this._highlighter.instance; + await highlighter.isReady; + highlighter.hideAccessibleBounds(); + } + } + + async showHighlighter() { + // TODO: Fix this workaround that temporarily removes higlighter bounds + // overlay that can interfere with the contrast ratio calculation. + if (this._highlighter) { + const highlighter = this._highlighter.instance; + await highlighter.isReady; + highlighter.showAccessibleBounds(); + } + } + + /** + * Public method used to show an accessible object highlighter on the client + * side. + * + * @param {Object} accessible + * AccessibleActor to be highlighted. + * @param {Object} options + * Object used for passing options. Available options: + * - duration {Number} + * Duration of time that the highlighter should be shown. + * @return {Boolean} + * True if highlighter shows the accessible object. + */ + async highlightAccessible(accessible, options = {}) { + this.unhighlight(); + // Do not highlight if accessible is dead. + if (!accessible || accessible.isDefunct || accessible.indexInParent < 0) { + return false; + } + + this._highlightingAccessible = accessible; + const { bounds } = accessible; + if (!bounds) { + return false; + } + + const { DOMNode: rawNode } = accessible.rawAccessible; + const audit = await accessible.audit(); + if (this._highlightingAccessible !== accessible) { + return false; + } + + const { name, role } = accessible; + const { highlighter } = this; + await highlighter.instance.isReady; + if (this._highlightingAccessible !== accessible) { + return false; + } + + const shown = highlighter.show( + { rawNode }, + { ...options, ...bounds, name, role, audit, isXUL: this.isXUL } + ); + this._highlightingAccessible = null; + + return shown; + } + + /** + * Public method used to hide an accessible object highlighter on the client + * side. + */ + unhighlight() { + if (!this._highlighter) { + return; + } + + this.highlighter.hide(); + this._highlightingAccessible = null; + } + + /** + * Picking state that indicates if picking is currently enabled and, if so, + * what the current and hovered accessible objects are. + */ + _isPicking = false; + _currentAccessible = null; + + /** + * Check is event handling is allowed. + */ + _isEventAllowed({ view }) { + return this.rootWin.isChromeWindow || isWindowIncluded(this.rootWin, view); + } + + /** + * Check if the DOM event received when picking shold be ignored. + * @param {Event} event + */ + _ignoreEventWhenPicking(event) { + return ( + !this._isPicking || + // If the DOM event is about a remote frame, only the WalkerActor for that + // remote frame target should emit RDP events (hovered/picked/...). And + // all other WalkerActor for intermediate iframe and top level document + // targets should stay silent. + isFrameWithChildTarget( + this.targetActor, + event.originalTarget || event.target + ) + ); + } + + _preventContentEvent(event) { + if (this._ignoreEventWhenPicking(event)) { + return; + } + + event.stopPropagation(); + event.preventDefault(); + + const target = event.originalTarget || event.target; + if (target !== this._currentTarget) { + this._resetStateAndReleaseTarget(); + this._currentTarget = target; + // We use InspectorUtils to save the original hover content state of the target + // element (that includes its hover state). In order to not trigger any visual + // changes to the element that depend on its hover state we remove the state while + // the element is the most current target of the highlighter. + // + // TODO: This logic can be removed if/when we can use elementsAtPoint API for + // determining topmost DOMNode that corresponds to specific coordinates. We would + // then be able to use a highlighter overlay that would prevent all pointer events + // to content but still render highlighter for the node/element correctly. + this._currentTargetHoverState = + InspectorUtils.getContentState(target) & kStateHover; + InspectorUtils.removeContentState(target, kStateHover); + } + } + + /** + * Click event handler for when picking is enabled. + * + * @param {Object} event + * Current click event. + */ + onPick(event) { + if (this._ignoreEventWhenPicking(event)) { + return; + } + + this._preventContentEvent(event); + if (!this._isEventAllowed(event)) { + return; + } + + // If shift is pressed, this is only a preview click, send the event to + // the client, but don't stop picking. + if (event.shiftKey) { + if (!this._currentAccessible) { + this._currentAccessible = this._findAndAttachAccessible(event); + } + events.emit(this, "picker-accessible-previewed", this._currentAccessible); + return; + } + + this._unsetPickerEnvironment(); + this._isPicking = false; + if (!this._currentAccessible) { + this._currentAccessible = this._findAndAttachAccessible(event); + } + events.emit(this, "picker-accessible-picked", this._currentAccessible); + } + + /** + * Hover event handler for when picking is enabled. + * + * @param {Object} event + * Current hover event. + */ + async onHovered(event) { + if (this._ignoreEventWhenPicking(event)) { + return; + } + + this._preventContentEvent(event); + if (!this._isEventAllowed(event)) { + return; + } + + const accessible = this._findAndAttachAccessible(event); + if (!accessible || this._currentAccessible === accessible) { + return; + } + + this._currentAccessible = accessible; + // Highlight current accessible and by the time we are done, if accessible that was + // highlighted is not current any more (user moved the mouse to a new node) highlight + // the most current accessible again. + const shown = await this.highlightAccessible(accessible); + if (this._isPicking && shown && accessible === this._currentAccessible) { + events.emit(this, "picker-accessible-hovered", accessible); + } + } + + /** + * Keyboard event handler for when picking is enabled. + * + * @param {Object} event + * Current keyboard event. + */ + onKey(event) { + if (!this._currentAccessible || this._ignoreEventWhenPicking(event)) { + return; + } + + this._preventContentEvent(event); + if (!this._isEventAllowed(event)) { + return; + } + + /** + * KEY: Action/scope + * ENTER/CARRIAGE_RETURN: Picks current accessible + * ESC/CTRL+SHIFT+C: Cancels picker + */ + switch (event.keyCode) { + // Select the element. + case event.DOM_VK_RETURN: + this.onPick(event); + break; + // Cancel pick mode. + case event.DOM_VK_ESCAPE: + this.cancelPick(); + events.emit(this, "picker-accessible-canceled"); + break; + case event.DOM_VK_C: + if ( + (IS_OSX && event.metaKey && event.altKey) || + (!IS_OSX && event.ctrlKey && event.shiftKey) + ) { + this.cancelPick(); + events.emit(this, "picker-accessible-canceled"); + } + break; + default: + break; + } + } + + /** + * Picker method that starts picker content listeners. + */ + pick() { + if (!this._isPicking) { + this._isPicking = true; + this._setPickerEnvironment(); + } + } + + /** + * This pick method also focuses the highlighter's target window. + */ + pickAndFocus() { + this.pick(); + this.rootWin.focus(); + } + + attachAccessible(rawAccessible, accessibleDocument) { + // If raw accessible object is defunct or detached, no need to cache it and + // its ancestry. + if ( + !rawAccessible || + isDefunct(rawAccessible) || + rawAccessible.indexInParent < 0 + ) { + return null; + } + + const accessible = this.addRef(rawAccessible); + // There is a chance that ancestry lookup can fail if the accessible is in + // the detached subtree. At that point the root accessible object would be + // defunct and accessing it via parent property will throw. + try { + let parent = accessible; + while (parent && parent.rawAccessible != accessibleDocument) { + parent = parent.parentAcc; + } + } catch (error) { + throw new Error(`Failed to get ancestor for ${accessible}: ${error}`); + } + + return accessible; + } + + /** + * Find deepest accessible object that corresponds to the screen coordinates of the + * mouse pointer and attach it to the AccessibilityWalker tree. + * + * @param {Object} event + * Correspoinding content event. + * @return {null|Object} + * Accessible object, if available, that corresponds to a DOM node. + */ + _findAndAttachAccessible(event) { + const target = event.originalTarget || event.target; + const win = target.ownerGlobal; + // This event might be inside a sub-document, so don't use this.rootDoc. + const docAcc = this.getRawAccessibleFor(win.document); + // If the target is inside a pop-up widget, we need to query the pop-up + // Accessible, not the DocAccessible. The DocAccessible can't hit test + // inside pop-ups. + const popup = win.isChromeWindow ? target.closest("panel") : null; + const containerAcc = popup ? this.getRawAccessibleFor(popup) : docAcc; + const { devicePixelRatio } = this.rootWin; + const rawAccessible = containerAcc.getDeepestChildAtPointInProcess( + event.screenX * devicePixelRatio, + event.screenY * devicePixelRatio + ); + return this.attachAccessible(rawAccessible, docAcc); + } + + /** + * Start picker content listeners. + */ + _setPickerEnvironment() { + const target = this.targetActor.chromeEventHandler; + target.addEventListener("mousemove", this.onHovered, true); + target.addEventListener("click", this.onPick, true); + target.addEventListener("mousedown", this._preventContentEvent, true); + target.addEventListener("mouseup", this._preventContentEvent, true); + target.addEventListener("mouseover", this._preventContentEvent, true); + target.addEventListener("mouseout", this._preventContentEvent, true); + target.addEventListener("mouseleave", this._preventContentEvent, true); + target.addEventListener("mouseenter", this._preventContentEvent, true); + target.addEventListener("dblclick", this._preventContentEvent, true); + target.addEventListener("keydown", this.onKey, true); + target.addEventListener("keyup", this._preventContentEvent, true); + } + + /** + * If content is still alive, stop picker content listeners, reset the hover state for + * last target element. + */ + _unsetPickerEnvironment() { + const target = this.targetActor.chromeEventHandler; + + if (!target) { + return; + } + + target.removeEventListener("mousemove", this.onHovered, true); + target.removeEventListener("click", this.onPick, true); + target.removeEventListener("mousedown", this._preventContentEvent, true); + target.removeEventListener("mouseup", this._preventContentEvent, true); + target.removeEventListener("mouseover", this._preventContentEvent, true); + target.removeEventListener("mouseout", this._preventContentEvent, true); + target.removeEventListener("mouseleave", this._preventContentEvent, true); + target.removeEventListener("mouseenter", this._preventContentEvent, true); + target.removeEventListener("dblclick", this._preventContentEvent, true); + target.removeEventListener("keydown", this.onKey, true); + target.removeEventListener("keyup", this._preventContentEvent, true); + + this._resetStateAndReleaseTarget(); + } + + /** + * When using accessibility highlighter, we keep track of the most current event pointer + * event target. In order to update or release the target, we need to make sure we set + * the content state (using InspectorUtils) to its original value. + * + * TODO: This logic can be removed if/when we can use elementsAtPoint API for + * determining topmost DOMNode that corresponds to specific coordinates. We would then + * be able to use a highlighter overlay that would prevent all pointer events to content + * but still render highlighter for the node/element correctly. + */ + _resetStateAndReleaseTarget() { + if (!this._currentTarget) { + return; + } + + try { + if (this._currentTargetHoverState) { + InspectorUtils.setContentState(this._currentTarget, kStateHover); + } + } catch (e) { + // DOMNode is already dead. + } + + this._currentTarget = null; + this._currentTargetState = null; + } + + /** + * Cacncel picker pick. Remvoe all content listeners and hide the highlighter. + */ + cancelPick() { + this.unhighlight(); + + if (this._isPicking) { + this._unsetPickerEnvironment(); + this._isPicking = false; + this._currentAccessible = null; + } + } + + /** + * Indicates that the tabbing order current active element (focused) is being + * tracked. + */ + _isTrackingTabbingOrderFocus = false; + + /** + * Current focused element in the tabbing order. + */ + _currentFocusedTabbingOrder = null; + + /** + * Focusin event handler for when interacting with tabbing order overlay. + * + * @param {Object} event + * Most recent focusin event. + */ + async onFocusIn(event) { + if (!this._isTrackingTabbingOrderFocus) { + return; + } + + const target = event.originalTarget || event.target; + if (target === this._currentFocusedTabbingOrder) { + return; + } + + this._currentFocusedTabbingOrder = target; + this.tabbingOrderHighlighter._highlighter.updateFocus({ + node: target, + focused: true, + }); + } + + /** + * Focusout event handler for when interacting with tabbing order overlay. + * + * @param {Object} event + * Most recent focusout event. + */ + async onFocusOut(event) { + if ( + !this._isTrackingTabbingOrderFocus || + !this._currentFocusedTabbingOrder + ) { + return; + } + + const target = event.originalTarget || event.target; + // Sanity check. + if (target !== this._currentFocusedTabbingOrder) { + console.warn( + `focusout target: ${target} does not match current focused element in tabbing order: ${this._currentFocusedTabbingOrder}` + ); + } + + this.tabbingOrderHighlighter._highlighter.updateFocus({ + node: this._currentFocusedTabbingOrder, + focused: false, + }); + this._currentFocusedTabbingOrder = null; + } + + /** + * Show tabbing order overlay for a given target. + * + * @param {Object} elm + * domnode actor to be used as the starting point for generating the + * tabbing order. + * @param {Number} index + * Starting index for the tabbing order. + * + * @return {JSON} + * Tabbing order information for the last element in the tabbing + * order. It includes a ContentDOMReference for the node and a tabbing + * index. If we are at the end of the tabbing order for the top level + * content document, the ContentDOMReference will be null. If focus + * manager discovered a remote IFRAME, then the ContentDOMReference + * references the IFRAME itself. + */ + showTabbingOrder(elm, index) { + // Start track focus related events (only once). `showTabbingOrder` will be + // called multiple times for a given target if it contains other remote + // targets. + if (!this._isTrackingTabbingOrderFocus) { + this._isTrackingTabbingOrderFocus = true; + const target = this.targetActor.chromeEventHandler; + target.addEventListener("focusin", this.onFocusIn, true); + target.addEventListener("focusout", this.onFocusOut, true); + } + + return this.tabbingOrderHighlighter.show(elm, { index }); + } + + /** + * Hide tabbing order overlay for a given target. + */ + hideTabbingOrder() { + if (!this._tabbingOrderHighlighter) { + return; + } + + this.tabbingOrderHighlighter.hide(); + if (!this._isTrackingTabbingOrderFocus) { + return; + } + + this._isTrackingTabbingOrderFocus = false; + this._currentFocusedTabbingOrder = null; + const target = this.targetActor.chromeEventHandler; + if (target) { + target.removeEventListener("focusin", this.onFocusIn, true); + target.removeEventListener("focusout", this.onFocusOut, true); + } + } +} + +exports.AccessibleWalkerActor = AccessibleWalkerActor; diff --git a/devtools/server/actors/accessibility/worker.js b/devtools/server/actors/accessibility/worker.js new file mode 100644 index 0000000000..75dc78e5b2 --- /dev/null +++ b/devtools/server/actors/accessibility/worker.js @@ -0,0 +1,103 @@ +/* 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"; + +/** + * Import `createTask` to communicate with `devtools/shared/worker`. + */ +importScripts("resource://gre/modules/workers/require.js"); +const { createTask } = require("resource://devtools/shared/worker/helper.js"); + +/** + * @see LineGraphWidget.prototype.setDataFromTimestamps in Graphs.js + * @param number id + * @param array timestamps + * @param number interval + * @param number duration + */ +createTask(self, "getBgRGBA", ({ dataTextBuf, dataBackgroundBuf }) => + getBgRGBA(dataTextBuf, dataBackgroundBuf) +); + +/** + * Calculates the luminance of a rgba tuple based on the formula given in + * https://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef + * + * @param {Array} rgba An array with [r,g,b,a] values. + * @return {Number} The calculated luminance. + */ +function calculateLuminance(rgba) { + for (let i = 0; i < 3; i++) { + rgba[i] /= 255; + rgba[i] = + rgba[i] < 0.03928 + ? rgba[i] / 12.92 + : Math.pow((rgba[i] + 0.055) / 1.055, 2.4); + } + return 0.2126 * rgba[0] + 0.7152 * rgba[1] + 0.0722 * rgba[2]; +} + +/** + * Get RGBA or a range of RGBAs for the background pixels under the text. If luminance is + * uniform, only return one value of RGBA, otherwise return values that correspond to the + * min and max luminances. + * @param {ImageData} dataTextBuf + * pixel data for the accessible object with text visible. + * @param {ImageData} dataBackgroundBuf + * pixel data for the accessible object with transparent text. + * @return {Object} + * RGBA or a range of RGBAs with min and max values. + */ +function getBgRGBA(dataTextBuf, dataBackgroundBuf) { + let min = [0, 0, 0, 1]; + let max = [255, 255, 255, 1]; + let minLuminance = 1; + let maxLuminance = 0; + const luminances = {}; + const dataText = new Uint8ClampedArray(dataTextBuf); + const dataBackground = new Uint8ClampedArray(dataBackgroundBuf); + + let foundDistinctColor = false; + for (let i = 0; i < dataText.length; i = i + 4) { + const tR = dataText[i]; + const bgR = dataBackground[i]; + const tG = dataText[i + 1]; + const bgG = dataBackground[i + 1]; + const tB = dataText[i + 2]; + const bgB = dataBackground[i + 2]; + + // Ignore pixels that are the same where pixels that are different between the two + // images are assumed to belong to the text within the node. + if (tR === bgR && tG === bgG && tB === bgB) { + continue; + } + + foundDistinctColor = true; + + const bgColor = `rgb(${bgR}, ${bgG}, ${bgB})`; + let luminance = luminances[bgColor]; + + if (!luminance) { + // Calculate luminance for the RGB value and store it to only measure once. + luminance = calculateLuminance([bgR, bgG, bgB]); + luminances[bgColor] = luminance; + } + + if (minLuminance >= luminance) { + minLuminance = luminance; + min = [bgR, bgG, bgB, 1]; + } + + if (maxLuminance <= luminance) { + maxLuminance = luminance; + max = [bgR, bgG, bgB, 1]; + } + } + + if (!foundDistinctColor) { + return null; + } + + return minLuminance === maxLuminance ? { value: max } : { min, max }; +} diff --git a/devtools/server/actors/addon/addons.js b/devtools/server/actors/addon/addons.js new file mode 100644 index 0000000000..95a3738d61 --- /dev/null +++ b/devtools/server/actors/addon/addons.js @@ -0,0 +1,83 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const { Actor } = require("resource://devtools/shared/protocol.js"); +const { + addonsSpec, +} = require("resource://devtools/shared/specs/addon/addons.js"); + +const { AddonManager } = ChromeUtils.importESModule( + "resource://gre/modules/AddonManager.sys.mjs", + { loadInDevToolsLoader: false } +); +const { FileUtils } = ChromeUtils.importESModule( + "resource://gre/modules/FileUtils.sys.mjs" +); + +// This actor is used by DevTools as well as external tools such as webext-run +// and the Firefox VS-Code plugin. see bug #1578108 +class AddonsActor extends Actor { + constructor(conn) { + super(conn, addonsSpec); + } + + async installTemporaryAddon(addonPath, openDevTools) { + let addonFile; + let addon; + try { + addonFile = new FileUtils.File(addonPath); + addon = await AddonManager.installTemporaryAddon(addonFile); + } catch (error) { + throw new Error(`Could not install add-on at '${addonPath}': ${error}`); + } + + Services.obs.notifyObservers(null, "devtools-installed-addon", addon.id); + + // Try to open DevTools for the installed add-on. + // Note that it will only work on Firefox Desktop. + // On Android, we don't ship DevTools UI. + // about:debugging is only using this API when debugging its own firefox instance, + // so for now, there is no chance of calling this on Android. + if (openDevTools) { + // This module is typically loaded in the loader spawn by DevToolsStartup, + // in a distinct compartment thanks to useDistinctSystemPrincipalLoader and loadInDevToolsLoader flag. + // But here we want to reuse the shared module loader. + // We do not want to load devtools.js in the server's distinct module loader. + const loader = ChromeUtils.importESModule( + "resource://devtools/shared/loader/Loader.sys.mjs", + { loadInDevToolsLoader: false } + ); + const { + gDevTools, + // eslint-disable-next-line mozilla/reject-some-requires + } = loader.require("resource://devtools/client/framework/devtools.js"); + gDevTools.showToolboxForWebExtension(addon.id); + } + + // TODO: once the add-on actor has been refactored to use + // protocol.js, we could return it directly. + // return new AddonTargetActor(this.conn, addon); + + // Return a pseudo add-on object that a calling client can work + // with. Provide a flag that the client can use to detect when it + // gets upgraded to a real actor object. + return { id: addon.id, actor: false }; + } + + async uninstallAddon(addonId) { + const addon = await AddonManager.getAddonByID(addonId); + + // We only support uninstallation of temporarily loaded add-ons at the + // moment. + if (!addon?.temporarilyInstalled) { + throw new Error(`Could not uninstall add-on "${addonId}"`); + } + + await addon.uninstall(); + } +} + +exports.AddonsActor = AddonsActor; diff --git a/devtools/server/actors/addon/moz.build b/devtools/server/actors/addon/moz.build new file mode 100644 index 0000000000..e382173641 --- /dev/null +++ b/devtools/server/actors/addon/moz.build @@ -0,0 +1,10 @@ +# -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*- +# vim: set filetype=python: +# 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/. + +DevToolsModules( + "addons.js", + "webextension-inspected-window.js", +) diff --git a/devtools/server/actors/addon/webextension-inspected-window.js b/devtools/server/actors/addon/webextension-inspected-window.js new file mode 100644 index 0000000000..e69a206c9d --- /dev/null +++ b/devtools/server/actors/addon/webextension-inspected-window.js @@ -0,0 +1,680 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const { Actor } = require("resource://devtools/shared/protocol.js"); +const { + webExtensionInspectedWindowSpec, +} = require("resource://devtools/shared/specs/addon/webextension-inspected-window.js"); + +const { + DevToolsServer, +} = require("resource://devtools/server/devtools-server.js"); + +loader.lazyGetter( + this, + "NodeActor", + () => + require("resource://devtools/server/actors/inspector/node.js").NodeActor, + true +); + +// A weak set of the documents for which a warning message has been +// already logged (so that we don't keep emitting the same warning if an +// extension keeps calling the devtools.inspectedWindow.eval API method +// when it fails to retrieve a result, but we do log the warning message +// if the user reloads the window): +// +// WeakSet<Document> +const deniedWarningDocuments = new WeakSet(); + +function isSystemPrincipalWindow(window) { + return window.document.nodePrincipal.isSystemPrincipal; +} + +// Create the exceptionInfo property in the format expected by a +// WebExtension inspectedWindow.eval API calls. +function createExceptionInfoResult(props) { + return { + exceptionInfo: { + isError: true, + code: "E_PROTOCOLERROR", + description: "Unknown Inspector protocol error", + + // Apply the passed properties. + ...props, + }, + }; +} + +// Show a warning message in the webconsole when an extension +// eval request has been denied, so that the user knows about it +// even if the extension doesn't report the error itself. +function logAccessDeniedWarning(window, callerInfo, extensionPolicy) { + // Do not log the same warning multiple times for the same document. + if (deniedWarningDocuments.has(window.document)) { + return; + } + + deniedWarningDocuments.add(window.document); + + const { name } = extensionPolicy; + + // System principals have a null nodePrincipal.URI and so we use + // the url from window.location.href. + const reportedURIorPrincipal = isSystemPrincipalWindow(window) + ? Services.io.newURI(window.location.href) + : window.document.nodePrincipal; + + const error = Cc["@mozilla.org/scripterror;1"].createInstance( + Ci.nsIScriptError + ); + + const msg = `The extension "${name}" is not allowed to access ${reportedURIorPrincipal.spec}`; + + const innerWindowId = window.windowGlobalChild.innerWindowId; + + const errorFlag = 0; + + let { url, lineNumber } = callerInfo; + + const callerURI = callerInfo.url && Services.io.newURI(callerInfo.url); + + // callerInfo.url is not the full path to the file that called the WebExtensions + // API yet (Bug 1448878), and so we associate the error to the url of the extension + // manifest.json file as a fallback. + if (callerURI.filePath === "/") { + url = extensionPolicy.getURL("/manifest.json"); + lineNumber = null; + } + + error.initWithWindowID( + msg, + url, + lineNumber, + 0, + 0, + errorFlag, + "webExtensions", + innerWindowId + ); + Services.console.logMessage(error); +} + +function extensionAllowedToInspectPrincipal(extensionPolicy, principal) { + if (principal.isNullPrincipal) { + // data: and sandboxed documents. + // + // Rather than returning true unconditionally, we go through additional + // checks to prevent execution in sandboxed documents created by principals + // that extensions cannot access otherwise. + principal = principal.precursorPrincipal; + if (!principal) { + // Top-level about:blank, etc. + return true; + } + } + if (!principal.isContentPrincipal) { + return false; + } + const principalURI = principal.URI; + if (principalURI.schemeIs("https") || principalURI.schemeIs("http")) { + if (WebExtensionPolicy.isRestrictedURI(principalURI)) { + return false; + } + if (extensionPolicy.quarantinedFromURI(principalURI)) { + return false; + } + // Common case: http(s) allowed. + return true; + } + + if (principalURI.schemeIs("moz-extension")) { + // Ordinarily, we don't allow extensions to execute arbitrary code in + // their own context. The devtools.inspectedWindow.eval API is a special + // case - this can only be used through the devtools_page feature, which + // requires the user to open the developer tools first. If an extension + // really wants to debug itself, we let it do so. + return extensionPolicy.id === principal.addonId; + } + + if (principalURI.schemeIs("file")) { + return true; + } + + return false; +} + +class CustomizedReload { + constructor(params) { + this.docShell = params.targetActor.window.docShell; + this.docShell.QueryInterface(Ci.nsIWebProgress); + + this.inspectedWindowEval = params.inspectedWindowEval; + this.callerInfo = params.callerInfo; + + this.ignoreCache = params.ignoreCache; + this.injectedScript = params.injectedScript; + + this.customizedReloadWindows = new WeakSet(); + } + + QueryInterface = ChromeUtils.generateQI([ + "nsIWebProgressListener", + "nsISupportsWeakReference", + ]); + + get window() { + return this.docShell.DOMWindow; + } + + get webNavigation() { + return this.docShell + .QueryInterface(Ci.nsIInterfaceRequestor) + .getInterface(Ci.nsIWebNavigation); + } + + get browsingContext() { + return this.docShell.browsingContext; + } + + start() { + if (!this.waitForReloadCompleted) { + this.waitForReloadCompleted = new Promise((resolve, reject) => { + this.resolveReloadCompleted = resolve; + this.rejectReloadCompleted = reject; + + let reloadFlags = Ci.nsIWebNavigation.LOAD_FLAGS_NONE; + + if (this.ignoreCache) { + reloadFlags |= Ci.nsIWebNavigation.LOAD_FLAGS_BYPASS_CACHE; + } + + try { + if (this.injectedScript) { + // Listen to the newly created document elements only if there is an + // injectedScript to evaluate. + Services.obs.addObserver(this, "initial-document-element-inserted"); + } + + // Watch the loading progress and clear the current CustomizedReload once the + // page has been reloaded (or if its reloading has been interrupted). + this.docShell.addProgressListener( + this, + Ci.nsIWebProgress.NOTIFY_STATE_DOCUMENT + ); + + this.webNavigation.reload(reloadFlags); + } catch (err) { + // Cancel the injected script listener if the reload fails + // (which will also report the error by rejecting the promise). + this.stop(err); + } + }); + } + + return this.waitForReloadCompleted; + } + + observe(subject, topic, data) { + if (topic !== "initial-document-element-inserted") { + return; + } + + const document = subject; + const window = document?.defaultView; + + // Filter out non interesting documents. + if (!document || !document.location || !window) { + return; + } + + const subjectDocShell = window.docShell; + + // Keep track of the set of window objects where we are going to inject + // the injectedScript: the top level window and all its descendant + // that are still of type content (filtering out loaded XUL pages, if any). + if (window == this.window) { + this.customizedReloadWindows.add(window); + } else if (subjectDocShell.sameTypeParent) { + const parentWindow = subjectDocShell.sameTypeParent.domWindow; + if (parentWindow && this.customizedReloadWindows.has(parentWindow)) { + this.customizedReloadWindows.add(window); + } + } + + if (this.customizedReloadWindows.has(window)) { + const { apiErrorResult } = this.inspectedWindowEval( + this.callerInfo, + this.injectedScript, + {}, + window + ); + + // Log only apiErrorResult, because no one is waiting for the + // injectedScript result, and any exception is going to be logged + // in the inspectedWindow webconsole. + if (apiErrorResult) { + console.error( + "Unexpected Error in injectedScript during inspectedWindow.reload for", + `${this.callerInfo.url}:${this.callerInfo.lineNumber}`, + apiErrorResult + ); + } + } + } + + onStateChange(webProgress, request, state, status) { + if (webProgress.DOMWindow !== this.window) { + return; + } + + if (state & Ci.nsIWebProgressListener.STATE_STOP) { + if (status == Cr.NS_BINDING_ABORTED) { + // The customized reload has been interrupted and we can clear + // the CustomizedReload and reject the promise. + const url = this.window.location.href; + this.stop( + new Error( + `devtools.inspectedWindow.reload on ${url} has been interrupted` + ) + ); + } else { + // Once the top level frame has been loaded, we can clear the customized reload + // and resolve the promise. + this.stop(); + } + } + } + + stop(error) { + if (this.stopped) { + return; + } + + this.docShell.removeProgressListener(this); + + if (this.injectedScript) { + Services.obs.removeObserver(this, "initial-document-element-inserted"); + } + + if (error) { + this.rejectReloadCompleted(error); + } else { + this.resolveReloadCompleted(); + } + + this.stopped = true; + } +} + +class WebExtensionInspectedWindowActor extends Actor { + /** + * Created the WebExtension InspectedWindow actor + */ + constructor(conn, targetActor) { + super(conn, webExtensionInspectedWindowSpec); + this.targetActor = targetActor; + } + + destroy(conn) { + super.destroy(); + + if (this.customizedReload) { + this.customizedReload.stop( + new Error("WebExtensionInspectedWindowActor destroyed") + ); + delete this.customizedReload; + } + + if (this._dbg) { + this._dbg.disable(); + delete this._dbg; + } + } + + get dbg() { + if (this._dbg) { + return this._dbg; + } + + this._dbg = this.targetActor.makeDebugger(); + return this._dbg; + } + + get window() { + return this.targetActor.window; + } + + get webNavigation() { + return this.targetActor.webNavigation; + } + + createEvalBindings(dbgWindow, options) { + const bindings = Object.create(null); + + let selectedDOMNode; + + if (options.toolboxSelectedNodeActorID) { + const actor = DevToolsServer.searchAllConnectionsForActor( + options.toolboxSelectedNodeActorID + ); + if (actor && actor instanceof NodeActor) { + selectedDOMNode = actor.rawNode; + } + } + + Object.defineProperty(bindings, "$0", { + enumerable: true, + configurable: true, + get: () => { + if (selectedDOMNode && !Cu.isDeadWrapper(selectedDOMNode)) { + return dbgWindow.makeDebuggeeValue(selectedDOMNode); + } + + return undefined; + }, + }); + + // This function is used by 'eval' and 'reload' requests, but only 'eval' + // passes 'toolboxConsoleActor' from the client side in order to set + // the 'inspect' binding. + Object.defineProperty(bindings, "inspect", { + enumerable: true, + configurable: true, + value: dbgWindow.makeDebuggeeValue(object => { + const consoleActor = DevToolsServer.searchAllConnectionsForActor( + options.toolboxConsoleActorID + ); + if (consoleActor) { + const dbgObj = consoleActor.makeDebuggeeValue(object); + consoleActor.inspectObject( + dbgObj, + "webextension-devtools-inspectedWindow-eval" + ); + } else { + // TODO(rpl): evaluate if it would be better to raise an exception + // to the caller code instead. + console.error("Toolbox Console RDP Actor not found"); + } + }), + }); + + return bindings; + } + + /** + * Reload the target tab, optionally bypass cache, customize the userAgent and/or + * inject a script in targeted document or any of its sub-frame. + * + * @param {webExtensionCallerInfo} callerInfo + * the addonId and the url (the addon base url or the url of the actual caller + * filename and lineNumber) used to log useful debugging information in the + * produced error logs and eval stack trace. + * + * @param {webExtensionReloadOptions} options + * used to optionally enable the reload customizations. + * @param {boolean|undefined} options.ignoreCache + * enable/disable the cache bypass headers. + * @param {string|undefined} options.userAgent + * customize the userAgent during the page reload. + * @param {string|undefined} options.injectedScript + * evaluate the provided javascript code in the top level and every sub-frame + * created during the page reload, before any other script in the page has been + * executed. + */ + async reload(callerInfo, { ignoreCache, userAgent, injectedScript }) { + if (isSystemPrincipalWindow(this.window)) { + console.error( + "Ignored inspectedWindow.reload on system principal target for " + + `${callerInfo.url}:${callerInfo.lineNumber}` + ); + return {}; + } + + await new Promise(resolve => { + const delayedReload = () => { + // This won't work while the browser is shutting down and we don't really + // care. + if (Services.startup.shuttingDown) { + return; + } + + if (injectedScript || userAgent) { + if (this.customizedReload) { + // TODO(rpl): check what chrome does, and evaluate if queue the new reload + // after the current one has been completed. + console.error( + "Reload already in progress. Ignored inspectedWindow.reload for " + + `${callerInfo.url}:${callerInfo.lineNumber}` + ); + return; + } + + try { + this.customizedReload = new CustomizedReload({ + targetActor: this.targetActor, + inspectedWindowEval: this.eval.bind(this), + callerInfo, + injectedScript, + ignoreCache, + }); + + this.customizedReload + .start() + .catch(err => { + console.error(err); + }) + .then(() => { + delete this.customizedReload; + resolve(); + }); + } catch (err) { + // Cancel the customized reload (if any) on exception during the + // reload setup. + if (this.customizedReload) { + this.customizedReload.stop(err); + } + throw err; + } + } else { + // If there is no custom user agent and/or injected script, then + // we can reload the target without subscribing any observer/listener. + let reloadFlags = Ci.nsIWebNavigation.LOAD_FLAGS_NONE; + if (ignoreCache) { + reloadFlags |= Ci.nsIWebNavigation.LOAD_FLAGS_BYPASS_CACHE; + } + this.webNavigation.reload(reloadFlags); + resolve(); + } + }; + + // Execute the reload in a dispatched runnable, so that we can + // return the reply to the caller before the reload is actually + // started. + Services.tm.dispatchToMainThread(delayedReload); + }); + + return {}; + } + + /** + * Evaluate the provided javascript code in a target window (that is always the + * targetActor window when called through RDP protocol, or the passed + * customTargetWindow when called directly from the CustomizedReload instances). + * + * @param {webExtensionCallerInfo} callerInfo + * the addonId and the url (the addon base url or the url of the actual caller + * filename and lineNumber) used to log useful debugging information in the + * produced error logs and eval stack trace. + * + * @param {string} expression + * the javascript code to be evaluated in the target window + * + * @param {webExtensionEvalOptions} evalOptions + * used to optionally enable the eval customizations. + * NOTE: none of the eval options is currently implemented, they will be already + * reported as unsupported by the WebExtensions schema validation wrappers, but + * an additional level of error reporting is going to be applied here, so that + * if the server and the client have different ideas of which option is supported + * the eval call result will contain detailed informations (in the format usually + * expected for errors not raised in the evaluated javascript code). + * + * @param {DOMWindow|undefined} customTargetWindow + * Used in the CustomizedReload instances to evaluate the `injectedScript` + * javascript code in every sub-frame of the target window during the tab reload. + * NOTE: this parameter is not part of the RDP protocol exposed by this actor, when + * it is called over the remote debugging protocol the target window is always + * `targetActor.window`. + */ + // eslint-disable-next-line complexity + eval(callerInfo, expression, options, customTargetWindow) { + const window = customTargetWindow || this.window; + options = options || {}; + + const extensionPolicy = WebExtensionPolicy.getByID(callerInfo.addonId); + + if (!extensionPolicy) { + return createExceptionInfoResult({ + description: "Inspector protocol error: %s %s", + details: ["Caller extension not found for", callerInfo.url], + }); + } + + if (!window) { + return createExceptionInfoResult({ + description: "Inspector protocol error: %s", + details: [ + "The target window is not defined. inspectedWindow.eval not executed.", + ], + }); + } + + if ( + !extensionAllowedToInspectPrincipal( + extensionPolicy, + window.document.nodePrincipal + ) + ) { + // Log the error for the user to know that the extension request has been + // denied (the extension may not warn the user at all). + logAccessDeniedWarning(window, callerInfo, extensionPolicy); + + // The error message is generic here. If access is disallowed, we do not + // expose the URL either. + return createExceptionInfoResult({ + description: "Inspector protocol error: %s", + details: [ + "This extension is not allowed on the current inspected window origin", + ], + }); + } + + // Raise an error on the unsupported options. + if ( + options.frameURL || + options.contextSecurityOrigin || + options.useContentScriptContext + ) { + return createExceptionInfoResult({ + description: "Inspector protocol error: %s", + details: [ + "The inspectedWindow.eval options are currently not supported", + ], + }); + } + + const dbgWindow = this.dbg.makeGlobalObjectReference(window); + + let evalCalledFrom = callerInfo.url; + if (callerInfo.lineNumber) { + evalCalledFrom += `:${callerInfo.lineNumber}`; + } + + const bindings = this.createEvalBindings(dbgWindow, options); + + const result = dbgWindow.executeInGlobalWithBindings(expression, bindings, { + url: `debugger eval called from ${evalCalledFrom} - eval code`, + }); + + let evalResult; + + if (result) { + if ("return" in result) { + evalResult = result.return; + } else if ("yield" in result) { + evalResult = result.yield; + } else if ("throw" in result) { + const throwErr = result.throw; + + // XXXworkers: Calling unsafeDereference() returns an object with no + // toString method in workers. See Bug 1215120. + const unsafeDereference = + throwErr && + typeof throwErr === "object" && + throwErr.unsafeDereference(); + const message = unsafeDereference?.toString + ? unsafeDereference.toString() + : String(throwErr); + const stack = unsafeDereference?.stack ? unsafeDereference.stack : null; + + return { + exceptionInfo: { + isException: true, + value: `${message}\n\t${stack}`, + }, + }; + } + } else { + // TODO(rpl): can the result of executeInGlobalWithBinding be null or + // undefined? (which means that it is not a return, a yield or a throw). + console.error( + "Unexpected empty inspectedWindow.eval result for", + `${callerInfo.url}:${callerInfo.lineNumber}` + ); + } + + if (evalResult) { + try { + // Return the evalResult as a grip (used by the WebExtensions + // devtools inspector's sidebar.setExpression API method). + if (options.evalResultAsGrip) { + if (!options.toolboxConsoleActorID) { + return createExceptionInfoResult({ + description: "Inspector protocol error: %s - %s", + details: [ + "Unexpected invalid sidebar panel expression request", + "missing toolboxConsoleActorID", + ], + }); + } + + const consoleActor = DevToolsServer.searchAllConnectionsForActor( + options.toolboxConsoleActorID + ); + + return { valueGrip: consoleActor.createValueGrip(evalResult) }; + } + + if (evalResult && typeof evalResult === "object") { + evalResult = evalResult.unsafeDereference(); + } + evalResult = JSON.parse(JSON.stringify(evalResult)); + } catch (err) { + // The evaluation result cannot be sent over the RDP Protocol, + // report it as with the same data format used in the corresponding + // chrome API method. + return createExceptionInfoResult({ + description: "Inspector protocol error: %s", + details: [String(err)], + }); + } + } + + return { value: evalResult }; + } +} + +exports.WebExtensionInspectedWindowActor = WebExtensionInspectedWindowActor; diff --git a/devtools/server/actors/animation-type-longhand.js b/devtools/server/actors/animation-type-longhand.js new file mode 100644 index 0000000000..febf8457ad --- /dev/null +++ b/devtools/server/actors/animation-type-longhand.js @@ -0,0 +1,442 @@ +/* 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"; + +// Types of animation types of longhand properties. +exports.ANIMATION_TYPE_FOR_LONGHANDS = [ + [ + "discrete", + new Set([ + "align-content", + "align-items", + "align-self", + "align-tracks", + "aspect-ratio", + "appearance", + "backface-visibility", + "background-attachment", + "background-blend-mode", + "background-clip", + "background-image", + "background-origin", + "background-repeat", + "baseline-source", + "border-bottom-style", + "border-collapse", + "border-image-repeat", + "border-image-source", + "border-left-style", + "border-right-style", + "border-top-style", + "-moz-box-align", + "box-decoration-break", + "-moz-box-direction", + "-moz-box-ordinal-group", + "-moz-box-orient", + "-moz-box-pack", + "box-sizing", + "caption-side", + "clear", + "clip-rule", + "color-interpolation", + "color-interpolation-filters", + "color-scheme", + "column-fill", + "column-rule-style", + "column-span", + "contain", + "content", + "counter-increment", + "counter-reset", + "counter-set", + "cursor", + "direction", + "dominant-baseline", + "empty-cells", + "fill-rule", + "flex-direction", + "flex-wrap", + "float", + "-moz-float-edge", + "font-family", + "font-feature-settings", + "font-kerning", + "font-language-override", + "font-palette", + "font-style", + "font-synthesis-weight", + "font-synthesis-style", + "font-synthesis-small-caps", + "font-synthesis-position", + "font-variant-alternates", + "font-variant-caps", + "font-variant-east-asian", + "font-variant-emoji", + "font-variant-ligatures", + "font-variant-numeric", + "font-variant-position", + "-moz-force-broken-image-icon", + "forced-color-adjust", + "grid-auto-columns", + "grid-auto-flow", + "grid-auto-rows", + "grid-column-end", + "grid-column-start", + "grid-row-end", + "grid-row-start", + "grid-template-areas", + "grid-template-columns", + "grid-template-rows", + "hyphenate-character", + "hyphens", + "image-orientation", + "image-rendering", + "ime-mode", + "-moz-inert", + "initial-letter", + "isolation", + "justify-content", + "justify-items", + "justify-self", + "justify-tracks", + "line-break", + "list-style-image", + "list-style-position", + "list-style-type", + "marker-end", + "marker-mid", + "marker-start", + "mask-clip", + "mask-composite", + "mask-image", + "mask-mode", + "mask-origin", + "mask-repeat", + "mask-type", + "masonry-auto-flow", + "mix-blend-mode", + "object-fit", + "-moz-orient", + "-moz-osx-font-smoothing", + "-moz-subtree-hidden-only-visually", + "outline-style", + "overflow-anchor", + "overflow-block", + "overflow-clip-box-block", + "overflow-clip-box-inline", + "overflow-inline", + "overflow-wrap", + "overflow-x", + "overflow-y", + "overscroll-behavior-inline", + "overscroll-behavior-block", + "overscroll-behavior-x", + "overscroll-behavior-y", + "break-after", + "break-before", + "break-inside", + "page", + "paint-order", + "pointer-events", + "position", + "print-color-adjust", + "quotes", + "resize", + "ruby-align", + "ruby-position", + "scroll-behavior", + "scroll-snap-align", + "scroll-snap-stop", + "scroll-snap-type", + "shape-rendering", + "scrollbar-gutter", + "scrollbar-width", + "stroke-linecap", + "stroke-linejoin", + "table-layout", + "text-align", + "text-align-last", + "text-anchor", + "text-combine-upright", + "text-decoration-line", + "text-decoration-skip-ink", + "text-decoration-style", + "text-emphasis-position", + "text-emphasis-style", + "text-justify", + "text-orientation", + "text-overflow", + "text-rendering", + "-moz-text-size-adjust", + "-webkit-text-security", + "-webkit-text-stroke-width", + "text-transform", + "text-underline-position", + "text-wrap-mode", + "text-wrap-style", + "touch-action", + "transform-box", + "transform-style", + "unicode-bidi", + "-moz-user-focus", + "-moz-user-input", + "-moz-user-modify", + "user-select", + "vector-effect", + "visibility", + "white-space-collapse", + "will-change", + "-moz-window-dragging", + "word-break", + "writing-mode", + ]), + ], + [ + "none", + new Set([ + "animation-composition", + "animation-delay", + "animation-direction", + "animation-duration", + "animation-fill-mode", + "animation-iteration-count", + "animation-name", + "animation-play-state", + "animation-timeline", + "animation-timing-function", + "block-size", + "border-block-end-color", + "border-block-end-style", + "border-block-end-width", + "border-block-start-color", + "border-block-start-style", + "border-block-start-width", + "border-inline-end-color", + "border-inline-end-style", + "border-inline-end-width", + "border-inline-start-color", + "border-inline-start-style", + "border-inline-start-width", + "container-name", + "container-type", + "contain-intrinsic-block-size", + "contain-intrinsic-inline-size", + "contain-intrinsic-height", + "contain-intrinsic-width", + "content-visibility", + "-moz-context-properties", + "-moz-control-character-visibility", + "-moz-default-appearance", + "-moz-theme", + "display", + "font-optical-sizing", + "inline-size", + "inset-block-end", + "inset-block-start", + "inset-inline-end", + "inset-inline-start", + "margin-block-end", + "margin-block-start", + "margin-inline-end", + "margin-inline-start", + "math-style", + "max-block-size", + "max-inline-size", + "min-block-size", + "-moz-min-font-size-ratio", + "min-inline-size", + "padding-block-end", + "padding-block-start", + "padding-inline-end", + "padding-inline-start", + "page-orientation", + "math-depth", + "-moz-box-collapse", + "-moz-top-layer", + "scroll-timeline-axis", + "scroll-timeline-name", + "size", + "transition-delay", + "transition-duration", + "transition-property", + "transition-timing-function", + "view-timeline-axis", + "view-timeline-inset", + "view-timeline-name", + "-moz-window-shadow", + ]), + ], + [ + "color", + new Set([ + "background-color", + "border-bottom-color", + "border-left-color", + "border-right-color", + "border-top-color", + "accent-color", + "caret-color", + "color", + "column-rule-color", + "flood-color", + "lighting-color", + "outline-color", + "scrollbar-color", + "stop-color", + "text-decoration-color", + "text-emphasis-color", + "-webkit-text-fill-color", + "-webkit-text-stroke-color", + ]), + ], + [ + "custom", + new Set([ + "backdrop-filter", + "background-position-x", + "background-position-y", + "background-size", + "border-bottom-width", + "border-image-slice", + "border-image-outset", + "border-image-width", + "border-left-width", + "border-right-width", + "border-spacing", + "border-top-width", + "clip", + "clip-path", + "column-count", + "column-rule-width", + "d", + "filter", + "font-stretch", + "font-variation-settings", + "font-weight", + "mask-position-x", + "mask-position-y", + "mask-size", + "object-position", + "offset-anchor", + "offset-path", + "offset-position", + "offset-rotate", + "order", + "perspective-origin", + "rotate", + "scale", + "shape-outside", + "stroke-dasharray", + "transform", + "transform-origin", + "translate", + "-moz-window-transform", + "-moz-window-transform-origin", + "-webkit-line-clamp", + ]), + ], + [ + "coord", + new Set([ + "border-bottom-left-radius", + "border-bottom-right-radius", + "border-top-left-radius", + "border-top-right-radius", + "border-start-start-radius", + "border-start-end-radius", + "border-end-start-radius", + "border-end-end-radius", + "bottom", + "column-gap", + "column-width", + "cx", + "cy", + "flex-basis", + "height", + "left", + "letter-spacing", + "line-height", + "margin-bottom", + "margin-left", + "margin-right", + "margin-top", + "max-height", + "max-width", + "min-height", + "min-width", + "offset-distance", + "padding-bottom", + "padding-left", + "padding-right", + "padding-top", + "perspective", + "r", + "rx", + "ry", + "right", + "row-gap", + "scroll-padding-block-start", + "scroll-padding-block-end", + "scroll-padding-inline-start", + "scroll-padding-inline-end", + "scroll-padding-top", + "scroll-padding-right", + "scroll-padding-bottom", + "scroll-padding-left", + "scroll-margin-block-start", + "scroll-margin-block-end", + "scroll-margin-inline-start", + "scroll-margin-inline-end", + "scroll-margin-top", + "scroll-margin-right", + "scroll-margin-bottom", + "scroll-margin-left", + "shape-margin", + "stroke-dashoffset", + "stroke-width", + "tab-size", + "text-indent", + "text-decoration-thickness", + "text-underline-offset", + "top", + "vertical-align", + "width", + "word-spacing", + "x", + "y", + "z-index", + ]), + ], + [ + "float", + new Set([ + "-moz-box-flex", + "fill-opacity", + "flex-grow", + "flex-shrink", + "flood-opacity", + "font-size-adjust", + "opacity", + "shape-image-threshold", + "stop-opacity", + "stroke-miterlimit", + "stroke-opacity", + "zoom", + "-moz-window-opacity", + ]), + ], + ["shadow", new Set(["box-shadow", "text-shadow"])], + ["paintServer", new Set(["fill", "stroke"])], + [ + "length", + new Set([ + "font-size", + "outline-offset", + "outline-width", + "overflow-clip-margin", + "-moz-window-input-region-margin", + ]), + ], +]; diff --git a/devtools/server/actors/animation.js b/devtools/server/actors/animation.js new file mode 100644 index 0000000000..d8de85fd73 --- /dev/null +++ b/devtools/server/actors/animation.js @@ -0,0 +1,906 @@ +/* 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"; + +/** + * Set of actors that expose the Web Animations API to devtools protocol + * clients. + * + * The |Animations| actor is the main entry point. It is used to discover + * animation players on given nodes. + * There should only be one instance per devtools server. + * + * The |AnimationPlayer| actor provides attributes and methods to inspect an + * animation as well as pause/resume/seek it. + * + * The Web Animation spec implementation is ongoing in Gecko, and so this set + * of actors should evolve when the implementation progresses. + * + * References: + * - WebAnimation spec: + * http://drafts.csswg.org/web-animations/ + * - WebAnimation WebIDL files: + * /dom/webidl/Animation*.webidl + */ + +const { Actor } = require("resource://devtools/shared/protocol.js"); +const { + animationPlayerSpec, + animationsSpec, +} = require("resource://devtools/shared/specs/animation.js"); + +const { + ANIMATION_TYPE_FOR_LONGHANDS, +} = require("resource://devtools/server/actors/animation-type-longhand.js"); + +// Types of animations. +const ANIMATION_TYPES = { + CSS_ANIMATION: "cssanimation", + CSS_TRANSITION: "csstransition", + SCRIPT_ANIMATION: "scriptanimation", + UNKNOWN: "unknown", +}; +exports.ANIMATION_TYPES = ANIMATION_TYPES; + +function getAnimationTypeForLonghand(property) { + // If this is a custom property, return "custom" for now as it's not straightforward + // to retrieve the proper animation type. + // TODO: We could compute the animation type from the registered property syntax (Bug 1875435) + if (property.startsWith("--")) { + return "custom"; + } + + for (const [type, props] of ANIMATION_TYPE_FOR_LONGHANDS) { + if (props.has(property)) { + return type; + } + } + throw new Error("Unknown longhand property name"); +} +exports.getAnimationTypeForLonghand = getAnimationTypeForLonghand; + +/** + * The AnimationPlayerActor provides information about a given animation: its + * startTime, currentTime, current state, etc. + * + * Since the state of a player changes as the animation progresses it is often + * useful to call getCurrentState at regular intervals to get the current state. + * + * This actor also allows playing, pausing and seeking the animation. + */ +class AnimationPlayerActor extends Actor { + /** + * @param {AnimationsActor} The main AnimationsActor instance + * @param {AnimationPlayer} The player object returned by getAnimationPlayers + * @param {Number} Time which animation created + */ + constructor(animationsActor, player, createdTime) { + super(animationsActor.conn, animationPlayerSpec); + + this.onAnimationMutation = this.onAnimationMutation.bind(this); + + this.walker = animationsActor.walker; + this.player = player; + + // Listen to animation mutations on the node to alert the front when the + // current animation changes. + // If the node is a pseudo-element, then we listen on its parent with + // subtree:true (there's no risk of getting too many notifications in + // onAnimationMutation since we filter out events that aren't for the + // current animation). + this.observer = new this.window.MutationObserver(this.onAnimationMutation); + if (this.isPseudoElement) { + this.observer.observe(this.node.parentElement, { + animations: true, + subtree: true, + }); + } else { + this.observer.observe(this.node, { animations: true }); + } + + this.createdTime = createdTime; + this.currentTimeAtCreated = player.currentTime; + } + + destroy() { + // Only try to disconnect the observer if it's not already dead (i.e. if the + // container view hasn't navigated since). + if (this.observer && !Cu.isDeadWrapper(this.observer)) { + this.observer.disconnect(); + } + this.player = this.observer = this.walker = null; + + super.destroy(); + } + + get isPseudoElement() { + return !!this.player.effect.pseudoElement; + } + + get pseudoElemenName() { + if (!this.isPseudoElement) { + return null; + } + + return `_moz_generated_content_${this.player.effect.pseudoElement.replace( + /^::/, + "" + )}`; + } + + get node() { + if (!this.isPseudoElement) { + return this.player.effect.target; + } + + const pseudoElementName = this.pseudoElemenName; + const originatingElem = this.player.effect.target; + const treeWalker = this.walker.getDocumentWalker(originatingElem); + + // When the animated node is a pseudo-element, we need to walk the children + // of the target node and look for it. + for ( + let next = treeWalker.firstChild(); + next; + next = treeWalker.nextSibling() + ) { + if (next.nodeName === pseudoElementName) { + return next; + } + } + + console.warn( + `Pseudo element ${this.player.effect.pseudoElement} is not found` + ); + return originatingElem; + } + + get document() { + return this.node.ownerDocument; + } + + get window() { + return this.document.defaultView; + } + + /** + * Release the actor, when it isn't needed anymore. + * Protocol.js uses this release method to call the destroy method. + */ + release() {} + + form(detail) { + const data = this.getCurrentState(); + data.actor = this.actorID; + + // If we know the WalkerActor, and if the animated node is known by it, then + // return its corresponding NodeActor ID too. + if (this.walker && this.walker.hasNode(this.node)) { + data.animationTargetNodeActorID = this.walker.getNode(this.node).actorID; + } + + return data; + } + + isCssAnimation(player = this.player) { + return player instanceof this.window.CSSAnimation; + } + + isCssTransition(player = this.player) { + return player instanceof this.window.CSSTransition; + } + + isScriptAnimation(player = this.player) { + return ( + player instanceof this.window.Animation && + !( + player instanceof this.window.CSSAnimation || + player instanceof this.window.CSSTransition + ) + ); + } + + getType() { + if (this.isCssAnimation()) { + return ANIMATION_TYPES.CSS_ANIMATION; + } else if (this.isCssTransition()) { + return ANIMATION_TYPES.CSS_TRANSITION; + } else if (this.isScriptAnimation()) { + return ANIMATION_TYPES.SCRIPT_ANIMATION; + } + + return ANIMATION_TYPES.UNKNOWN; + } + + /** + * Get the name of this animation. This can be either the animation.id + * property if it was set, or the keyframe rule name or the transition + * property. + * @return {String} + */ + getName() { + if (this.player.id) { + return this.player.id; + } else if (this.isCssAnimation()) { + return this.player.animationName; + } else if (this.isCssTransition()) { + return this.player.transitionProperty; + } + + return ""; + } + + /** + * Get the animation duration from this player, in milliseconds. + * @return {Number} + */ + getDuration() { + return this.player.effect.getComputedTiming().duration; + } + + /** + * Get the animation delay from this player, in milliseconds. + * @return {Number} + */ + getDelay() { + return this.player.effect.getComputedTiming().delay; + } + + /** + * Get the animation endDelay from this player, in milliseconds. + * @return {Number} + */ + getEndDelay() { + return this.player.effect.getComputedTiming().endDelay; + } + + /** + * Get the animation iteration count for this player. That is, how many times + * is the animation scheduled to run. + * @return {Number} The number of iterations, or null if the animation repeats + * infinitely. + */ + getIterationCount() { + const iterations = this.player.effect.getComputedTiming().iterations; + return iterations === Infinity ? null : iterations; + } + + /** + * Get the animation iterationStart from this player, in ratio. + * That is offset of starting position of the animation. + * @return {Number} + */ + getIterationStart() { + return this.player.effect.getComputedTiming().iterationStart; + } + + /** + * Get the animation easing from this player. + * @return {String} + */ + getEasing() { + return this.player.effect.getComputedTiming().easing; + } + + /** + * Get the animation fill mode from this player. + * @return {String} + */ + getFill() { + return this.player.effect.getComputedTiming().fill; + } + + /** + * Get the animation direction from this player. + * @return {String} + */ + getDirection() { + return this.player.effect.getComputedTiming().direction; + } + + /** + * Get animation-timing-function from animated element if CSS Animations. + * @return {String} + */ + getAnimationTimingFunction() { + if (!this.isCssAnimation()) { + return null; + } + + let pseudo = null; + let target = this.player.effect.target; + if (target.type) { + // Animated element is a pseudo element. + pseudo = target.type; + target = target.element; + } + return this.window.getComputedStyle(target, pseudo).animationTimingFunction; + } + + getPropertiesCompositorStatus() { + const properties = this.player.effect.getProperties(); + return properties.map(prop => { + return { + property: prop.property, + runningOnCompositor: prop.runningOnCompositor, + warning: prop.warning, + }; + }); + } + + /** + * Return the current start of the Animation. + * @return {Object} + */ + getState() { + const compositorStatus = this.getPropertiesCompositorStatus(); + // Note that if you add a new property to the state object, make sure you + // add the corresponding property in the AnimationPlayerFront' initialState + // getter. + return { + type: this.getType(), + // startTime is null whenever the animation is paused or waiting to start. + startTime: this.player.startTime, + currentTime: this.player.currentTime, + playState: this.player.playState, + playbackRate: this.player.playbackRate, + name: this.getName(), + duration: this.getDuration(), + delay: this.getDelay(), + endDelay: this.getEndDelay(), + iterationCount: this.getIterationCount(), + iterationStart: this.getIterationStart(), + fill: this.getFill(), + easing: this.getEasing(), + direction: this.getDirection(), + animationTimingFunction: this.getAnimationTimingFunction(), + // animation is hitting the fast path or not. Returns false whenever the + // animation is paused as it is taken off the compositor then. + isRunningOnCompositor: compositorStatus.some( + propState => propState.runningOnCompositor + ), + propertyState: compositorStatus, + // The document timeline's currentTime is being sent along too. This is + // not strictly related to the node's animationPlayer, but is useful to + // know the current time of the animation with respect to the document's. + documentCurrentTime: this.node.ownerDocument.timeline.currentTime, + // The time which this animation created. + createdTime: this.createdTime, + // The time which an animation's current time when this animation has created. + currentTimeAtCreated: this.currentTimeAtCreated, + properties: this.getProperties(), + }; + } + + /** + * Get the current state of the AnimationPlayer (currentTime, playState, ...). + * Note that the initial state is returned as the form of this actor when it + * is initialized. + * This protocol method only returns a trimed down version of this state in + * case some properties haven't changed since last time (since the front can + * reconstruct those). If you want the full state, use the getState method. + * @return {Object} + */ + getCurrentState() { + const newState = this.getState(); + + // If we've saved a state before, compare and only send what has changed. + // It's expected of the front to also save old states to re-construct the + // full state when an incomplete one is received. + // This is to minimize protocol traffic. + let sentState = {}; + if (this.currentState) { + for (const key in newState) { + if ( + typeof this.currentState[key] === "undefined" || + this.currentState[key] !== newState[key] + ) { + sentState[key] = newState[key]; + } + } + } else { + sentState = newState; + } + this.currentState = newState; + + return sentState; + } + + /** + * Executed when the current animation changes, used to emit the new state + * the the front. + */ + onAnimationMutation(mutations) { + const isCurrentAnimation = animation => animation === this.player; + const hasCurrentAnimation = animations => + animations.some(isCurrentAnimation); + let hasChanged = false; + + for (const { removedAnimations, changedAnimations } of mutations) { + if (hasCurrentAnimation(removedAnimations)) { + // Reset the local copy of the state on removal, since the animation can + // be kept on the client and re-added, its state needs to be sent in + // full. + this.currentState = null; + } + + if (hasCurrentAnimation(changedAnimations)) { + // Only consider the state has having changed if any of effect timing properties, + // animationTimingFunction or playbackRate has changed. + const newState = this.getState(); + const oldState = this.currentState; + hasChanged = + newState.delay !== oldState.delay || + newState.iterationCount !== oldState.iterationCount || + newState.iterationStart !== oldState.iterationStart || + newState.duration !== oldState.duration || + newState.endDelay !== oldState.endDelay || + newState.direction !== oldState.direction || + newState.easing !== oldState.easing || + newState.fill !== oldState.fill || + newState.animationTimingFunction !== + oldState.animationTimingFunction || + newState.playbackRate !== oldState.playbackRate; + break; + } + } + + if (hasChanged) { + this.emit("changed", this.getCurrentState()); + } + } + + /** + * Get data about the animated properties of this animation player. + * @return {Array} Returns a list of animated properties. + * Each property contains a list of values, their offsets and distances. + */ + getProperties() { + const properties = this.player.effect.getProperties().map(property => { + return { name: property.property, values: property.values }; + }); + + const DOMWindowUtils = this.window.windowUtils; + + // Fill missing keyframe with computed value. + for (const property of properties) { + let underlyingValue = null; + // Check only 0% and 100% keyframes. + [0, property.values.length - 1].forEach(index => { + const values = property.values[index]; + if (values.value !== undefined) { + return; + } + if (!underlyingValue) { + let pseudo = null; + let target = this.player.effect.target; + if (target.type) { + // This target is a pseudo element. + pseudo = target.type; + target = target.element; + } + const value = DOMWindowUtils.getUnanimatedComputedStyle( + target, + pseudo, + property.name, + DOMWindowUtils.FLUSH_NONE + ); + const animationType = getAnimationTypeForLonghand(property.name); + underlyingValue = + animationType === "float" ? parseFloat(value, 10) : value; + } + values.value = underlyingValue; + }); + } + + // Calculate the distance. + for (const property of properties) { + const propertyName = property.name; + const maxObject = { distance: -1 }; + for (let i = 0; i < property.values.length - 1; i++) { + const value1 = property.values[i].value; + for (let j = i + 1; j < property.values.length; j++) { + const value2 = property.values[j].value; + const distance = this.getDistance( + this.node, + propertyName, + value1, + value2, + DOMWindowUtils + ); + if (maxObject.distance >= distance) { + continue; + } + maxObject.distance = distance; + maxObject.value1 = value1; + maxObject.value2 = value2; + } + } + if (maxObject.distance === 0) { + // Distance is zero means that no values change or can't calculate the distance. + // In this case, we use the keyframe offset as the distance. + property.values.reduce((previous, current) => { + // If the current value is same as previous value, use previous distance. + current.distance = + current.value === previous.value + ? previous.distance + : current.offset; + return current; + }, property.values[0]); + continue; + } + const baseValue = + maxObject.value1 < maxObject.value2 + ? maxObject.value1 + : maxObject.value2; + for (const values of property.values) { + const value = values.value; + const distance = this.getDistance( + this.node, + propertyName, + baseValue, + value, + DOMWindowUtils + ); + values.distance = distance / maxObject.distance; + } + } + return properties; + } + + /** + * Get the animation types for a given list of CSS property names. + * @param {Array} propertyNames - CSS property names (e.g. background-color) + * @return {Object} Returns animation types (e.g. {"background-color": "rgb(0, 0, 0)"}. + */ + getAnimationTypes(propertyNames) { + const animationTypes = {}; + for (const propertyName of propertyNames) { + animationTypes[propertyName] = getAnimationTypeForLonghand(propertyName); + } + return animationTypes; + } + + /** + * Returns the distance of between value1, value2. + * @param {Object} target - dom element + * @param {String} propertyName - e.g. transform + * @param {String} value1 - e.g. translate(0px) + * @param {String} value2 - e.g. translate(10px) + * @param {Object} DOMWindowUtils + * @param {float} distance + */ + getDistance(target, propertyName, value1, value2, DOMWindowUtils) { + if (value1 === value2) { + return 0; + } + try { + const distance = DOMWindowUtils.computeAnimationDistance( + target, + propertyName, + value1, + value2 + ); + return distance; + } catch (e) { + // We can't compute the distance such the 'discrete' animation, + // 'auto' keyword and so on. + return 0; + } + } +} + +exports.AnimationPlayerActor = AnimationPlayerActor; + +/** + * The Animations actor lists animation players for a given node. + */ +exports.AnimationsActor = class AnimationsActor extends Actor { + constructor(conn, targetActor) { + super(conn, animationsSpec); + this.targetActor = targetActor; + + this.onWillNavigate = this.onWillNavigate.bind(this); + this.onNavigate = this.onNavigate.bind(this); + this.onAnimationMutation = this.onAnimationMutation.bind(this); + + this.allAnimationsPaused = false; + this.targetActor.on("will-navigate", this.onWillNavigate); + this.targetActor.on("navigate", this.onNavigate); + } + + destroy() { + super.destroy(); + this.targetActor.off("will-navigate", this.onWillNavigate); + this.targetActor.off("navigate", this.onNavigate); + + this.stopAnimationPlayerUpdates(); + this.targetActor = this.observer = this.actors = this.walker = null; + } + + /** + * Clients can optionally call this with a reference to their WalkerActor. + * If they do, then AnimationPlayerActor's forms are going to also include + * NodeActor IDs when the corresponding NodeActors do exist. + * This, in turns, is helpful for clients to avoid having to go back once more + * to the server to get a NodeActor for a particular animation. + * @param {WalkerActor} walker + */ + setWalkerActor(walker) { + this.walker = walker; + } + + /** + * Retrieve the list of AnimationPlayerActor actors for currently running + * animations on a node and its descendants. + * Note that calling this method a second time will destroy all previously + * retrieved AnimationPlayerActors. Indeed, the lifecycle of these actors + * is managed here on the server and tied to getAnimationPlayersForNode + * being called. + * @param {NodeActor} nodeActor The NodeActor as defined in + * /devtools/server/actors/inspector + */ + getAnimationPlayersForNode(nodeActor) { + const animations = nodeActor.rawNode.getAnimations({ subtree: true }); + + // Destroy previously stored actors + if (this.actors) { + for (const actor of this.actors) { + actor.destroy(); + } + } + + this.actors = []; + + for (const animation of animations) { + const createdTime = this.getCreatedTime(animation); + const actor = new AnimationPlayerActor(this, animation, createdTime); + this.actors.push(actor); + } + + // When a front requests the list of players for a node, start listening + // for animation mutations on this node to send updates to the front, until + // either getAnimationPlayersForNode is called again or + // stopAnimationPlayerUpdates is called. + this.stopAnimationPlayerUpdates(); + // ownerGlobal doesn't exist in content privileged windows. + // eslint-disable-next-line mozilla/use-ownerGlobal + const win = nodeActor.rawNode.ownerDocument.defaultView; + this.observer = new win.MutationObserver(this.onAnimationMutation); + this.observer.observe(nodeActor.rawNode, { + animations: true, + subtree: true, + }); + + return this.actors; + } + + onAnimationMutation(mutations) { + const eventData = []; + const readyPromises = []; + + for (const { addedAnimations, removedAnimations } of mutations) { + for (const player of removedAnimations) { + // Note that animations are reported as removed either when they are + // actually removed from the node (e.g. css class removed) or when they + // are finished and don't have forwards animation-fill-mode. + // In the latter case, we don't send an event, because the corresponding + // animation can still be seeked/resumed, so we want the client to keep + // its reference to the AnimationPlayerActor. + if (player.playState !== "idle") { + continue; + } + + const index = this.actors.findIndex(a => a.player === player); + if (index !== -1) { + eventData.push({ + type: "removed", + player: this.actors[index], + }); + this.actors.splice(index, 1); + } + } + + for (const player of addedAnimations) { + // If the added player already exists, it means we previously filtered + // it out when it was reported as removed. So filter it out here too. + if (this.actors.find(a => a.player === player)) { + continue; + } + + // If the added player has the same name and target node as a player we + // already have, it means it's a transition that's re-starting. So send + // a "removed" event for the one we already have. + const index = this.actors.findIndex(a => { + const isSameType = a.player.constructor === player.constructor; + const isSameName = + (a.isCssAnimation() && + a.player.animationName === player.animationName) || + (a.isCssTransition() && + a.player.transitionProperty === player.transitionProperty); + const isSameNode = a.player.effect.target === player.effect.target; + + return isSameType && isSameNode && isSameName; + }); + if (index !== -1) { + eventData.push({ + type: "removed", + player: this.actors[index], + }); + this.actors.splice(index, 1); + } + + const createdTime = this.getCreatedTime(player); + const actor = new AnimationPlayerActor(this, player, createdTime); + this.actors.push(actor); + eventData.push({ + type: "added", + player: actor, + }); + readyPromises.push(player.ready); + } + } + + if (eventData.length) { + // Let's wait for all added animations to be ready before telling the + // front-end. + Promise.all(readyPromises).then(() => { + this.emit("mutations", eventData); + }); + } + } + + /** + * After the client has called getAnimationPlayersForNode for a given DOM + * node, the actor starts sending animation mutations for this node. If the + * client doesn't want this to happen anymore, it should call this method. + */ + stopAnimationPlayerUpdates() { + if (this.observer && !Cu.isDeadWrapper(this.observer)) { + this.observer.disconnect(); + } + } + + onWillNavigate({ isTopLevel }) { + if (isTopLevel) { + this.stopAnimationPlayerUpdates(); + } + } + + onNavigate({ isTopLevel }) { + if (isTopLevel) { + this.allAnimationsPaused = false; + } + } + + /** + * Pause given animations. + * + * @param {Array} actors A list of AnimationPlayerActor. + */ + pauseSome(actors) { + for (const { player } of actors) { + this.pauseSync(player); + } + + return this.waitForNextFrame(actors); + } + + /** + * Play given animations. + * + * @param {Array} actors A list of AnimationPlayerActor. + */ + playSome(actors) { + for (const { player } of actors) { + this.playSync(player); + } + + return this.waitForNextFrame(actors); + } + + /** + * Set the current time of several animations at the same time. + * @param {Array} players A list of AnimationPlayerActor. + * @param {Number} time The new currentTime. + * @param {Boolean} shouldPause Should the players be paused too. + */ + setCurrentTimes(players, time, shouldPause) { + for (const actor of players) { + const player = actor.player; + + if (shouldPause) { + player.startTime = null; + } + + const currentTime = + player.playbackRate > 0 + ? time - actor.createdTime + : actor.createdTime - time; + player.currentTime = currentTime * Math.abs(player.playbackRate); + } + + return this.waitForNextFrame(players); + } + + /** + * Set the playback rate of several animations at the same time. + * @param {Array} actors A list of AnimationPlayerActor. + * @param {Number} rate The new rate. + */ + setPlaybackRates(players, rate) { + return Promise.all( + players.map(({ player }) => { + player.updatePlaybackRate(rate); + return player.ready; + }) + ); + } + + /** + * Pause given player synchronously. + * + * @param {Object} player + */ + pauseSync(player) { + player.startTime = null; + } + + /** + * Play given player synchronously. + * + * @param {Object} player + */ + playSync(player) { + if (!player.playbackRate) { + // We can not play with playbackRate zero. + return; + } + + // Play animation in a synchronous fashion by setting the start time directly. + const currentTime = player.currentTime || 0; + player.startTime = + player.timeline.currentTime - currentTime / player.playbackRate; + } + + /** + * Return created fime of given animaiton. + * + * @param {Object} animation + */ + getCreatedTime(animation) { + return ( + animation.startTime || + animation.timeline.currentTime - + animation.currentTime / animation.playbackRate + ); + } + + /** + * Wait for next animation frame. + * + * @param {Array} actors + * @return {Promise} which waits for next frame + */ + waitForNextFrame(actors) { + const promises = actors.map(actor => { + const doc = actor.document; + const win = actor.window; + const timeAtCurrent = doc.timeline.currentTime; + + return new Promise(resolve => { + win.requestAnimationFrame(() => { + if (timeAtCurrent === doc.timeline.currentTime) { + win.requestAnimationFrame(resolve); + } else { + resolve(); + } + }); + }); + }); + + return Promise.all(promises); + } +}; diff --git a/devtools/server/actors/array-buffer.js b/devtools/server/actors/array-buffer.js new file mode 100644 index 0000000000..940d17e166 --- /dev/null +++ b/devtools/server/actors/array-buffer.js @@ -0,0 +1,69 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const { Actor } = require("resource://devtools/shared/protocol.js"); +const { + arrayBufferSpec, +} = require("resource://devtools/shared/specs/array-buffer.js"); + +/** + * Creates an actor for the specified ArrayBuffer. + * + * @param {DevToolsServerConnection} conn + * The server connection. + * @param buffer ArrayBuffer + * The buffer. + */ +class ArrayBufferActor extends Actor { + constructor(conn, buffer) { + super(conn, arrayBufferSpec); + this.buffer = buffer; + this.bufferLength = buffer.byteLength; + } + + rawValue() { + return this.buffer; + } + + form() { + return { + actor: this.actorID, + length: this.bufferLength, + // The `typeName` is read in the source spec when reading "sourcedata" + // which can either be an ArrayBuffer actor or a LongString actor. + typeName: this.typeName, + }; + } + + slice(start, count) { + const slice = new Uint8Array(this.buffer, start, count); + const parts = []; + let offset = 0; + const PortionSize = 0x6000; // keep it divisible by 3 for btoa() and join() + while (offset + PortionSize < count) { + parts.push( + btoa( + String.fromCharCode.apply( + null, + slice.subarray(offset, offset + PortionSize) + ) + ) + ); + offset += PortionSize; + } + parts.push( + btoa(String.fromCharCode.apply(null, slice.subarray(offset, count))) + ); + return { + from: this.actorID, + encoded: parts.join(""), + }; + } +} + +module.exports = { + ArrayBufferActor, +}; diff --git a/devtools/server/actors/blackboxing.js b/devtools/server/actors/blackboxing.js new file mode 100644 index 0000000000..49dfc8180d --- /dev/null +++ b/devtools/server/actors/blackboxing.js @@ -0,0 +1,93 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const { Actor } = require("resource://devtools/shared/protocol.js"); +const { + blackboxingSpec, +} = require("resource://devtools/shared/specs/blackboxing.js"); + +const { + SessionDataHelpers, +} = require("resource://devtools/server/actors/watcher/SessionDataHelpers.jsm"); +const { SUPPORTED_DATA } = SessionDataHelpers; +const { BLACKBOXING } = SUPPORTED_DATA; + +/** + * This actor manages the blackboxing of sources. + * + * Blackboxing data should be available as early as possible to new targets and + * will be forwarded to the WatcherActor to populate the shared session data available to + * all DevTools targets. + * + * @constructor + * + */ +class BlackboxingActor extends Actor { + constructor(watcherActor) { + super(watcherActor.conn, blackboxingSpec); + this.watcherActor = watcherActor; + } + + /** + * Request to blackbox a new JS file either completely if no range is passed. + * Or only a precise subset of lines described by range attribute. + * + * @param {String} url + * Mandatory argument to mention what URL of JS file should be blackboxed. + * @param {Array<Objects>} ranges + * The whole file will be blackboxed if this array is empty. + * Each range is made of an object like this: + * { + * start: { line: 1, column: 1 }, + * end: { line: 10, column: 10 }, + * } + */ + blackbox(url, ranges) { + if (!ranges.length) { + return this.watcherActor.addOrSetDataEntry( + BLACKBOXING, + [{ url, range: null }], + "add" + ); + } + return this.watcherActor.addOrSetDataEntry( + BLACKBOXING, + ranges.map(range => { + return { + url, + range, + }; + }), + "add" + ); + } + + /** + * Request to unblackbox some JS sources. + * + * See `blackbox` for more info. + */ + unblackbox(url, ranges) { + if (!ranges.length) { + const existingRanges = ( + this.watcherActor.getSessionDataForType(BLACKBOXING) || [] + ).filter(entry => entry.url == url); + + return this.watcherActor.removeDataEntry(BLACKBOXING, existingRanges); + } + return this.watcherActor.removeDataEntry( + BLACKBOXING, + ranges.map(range => { + return { + url, + range, + }; + }) + ); + } +} + +exports.BlackboxingActor = BlackboxingActor; diff --git a/devtools/server/actors/breakpoint-list.js b/devtools/server/actors/breakpoint-list.js new file mode 100644 index 0000000000..1f9d6c0bf9 --- /dev/null +++ b/devtools/server/actors/breakpoint-list.js @@ -0,0 +1,92 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const { Actor } = require("resource://devtools/shared/protocol.js"); +const { + breakpointListSpec, +} = require("resource://devtools/shared/specs/breakpoint-list.js"); + +const { + SessionDataHelpers, +} = require("resource://devtools/server/actors/watcher/SessionDataHelpers.jsm"); +const { SUPPORTED_DATA } = SessionDataHelpers; +const { BREAKPOINTS, XHR_BREAKPOINTS, EVENT_BREAKPOINTS } = SUPPORTED_DATA; + +/** + * This actor manages the breakpoints list. + * + * Breakpoints should be available as early as possible to new targets and + * will be forwarded to the WatcherActor to populate the shared session data available to + * all DevTools targets. + * + * @constructor + * + */ +class BreakpointListActor extends Actor { + constructor(watcherActor) { + super(watcherActor.conn, breakpointListSpec); + this.watcherActor = watcherActor; + } + + setBreakpoint(location, options) { + return this.watcherActor.addOrSetDataEntry( + BREAKPOINTS, + [{ location, options }], + "add" + ); + } + + removeBreakpoint(location, options) { + return this.watcherActor.removeDataEntry(BREAKPOINTS, [ + { location, options }, + ]); + } + + /** + * Request to break on next XHR or Fetch request for a given URL and HTTP Method. + * + * @param {String} path + * If empty, will pause on regardless or the request's URL. + * Otherwise, will pause on any request whose URL includes this string. + * This is not specific to URL's path. It can match the URL origin. + * @param {String} method + * If set to "ANY", will pause regardless of which method is used. + * Otherwise, should be set to any valid HTTP Method (GET, POST, ...) + */ + setXHRBreakpoint(path, method) { + return this.watcherActor.addOrSetDataEntry( + XHR_BREAKPOINTS, + [{ path, method }], + "add" + ); + } + + /** + * Stop breakpoint on requests we ask to break on via setXHRBreakpoint. + * + * See setXHRBreakpoint for arguments definition. + */ + removeXHRBreakpoint(path, method) { + return this.watcherActor.removeDataEntry(XHR_BREAKPOINTS, [ + { path, method }, + ]); + } + + /** + * Set the active breakpoints + * + * @param {Array<String>} ids + * An array of eventlistener breakpoint ids. These + * are unique identifiers for event breakpoints. + * See devtools/server/actors/utils/event-breakpoints.js + * for details. + */ + async setActiveEventBreakpoints(ids) { + await this.watcherActor.addOrSetDataEntry(EVENT_BREAKPOINTS, ids, "set"); + } +} + +exports.BreakpointListActor = BreakpointListActor; diff --git a/devtools/server/actors/breakpoint.js b/devtools/server/actors/breakpoint.js new file mode 100644 index 0000000000..d1a469658c --- /dev/null +++ b/devtools/server/actors/breakpoint.js @@ -0,0 +1,232 @@ +/* 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/. */ + +/* global assert */ + +"use strict"; + +const { + logEvent, + getThrownMessage, +} = require("resource://devtools/server/actors/utils/logEvent.js"); + +/** + * Set breakpoints on all the given entry points with the given + * BreakpointActor as the handler. + * + * @param BreakpointActor actor + * The actor handling the breakpoint hits. + * @param Array entryPoints + * An array of objects of the form `{ script, offsets }`. + */ +function setBreakpointAtEntryPoints(actor, entryPoints) { + for (const { script, offsets } of entryPoints) { + actor.addScript(script, offsets); + } +} + +exports.setBreakpointAtEntryPoints = setBreakpointAtEntryPoints; + +/** + * BreakpointActors are instantiated for each breakpoint that has been installed + * by the client. They are not true actors and do not communicate with the + * client directly, but encapsulate the DebuggerScript locations where the + * breakpoint is installed. + */ +class BreakpointActor { + constructor(threadActor, location) { + // A map from Debugger.Script instances to the offsets which the breakpoint + // has been set for in that script. + this.scripts = new Map(); + + this.threadActor = threadActor; + this.location = location; + this.options = null; + } + + setOptions(options) { + const oldOptions = this.options; + this.options = options; + + for (const [script, offsets] of this.scripts) { + this._newOffsetsOrOptions(script, offsets, oldOptions); + } + } + + destroy() { + this.removeScripts(); + this.options = null; + } + + hasScript(script) { + return this.scripts.has(script); + } + + /** + * Called when this same breakpoint is added to another Debugger.Script + * instance. + * + * @param script Debugger.Script + * The new source script on which the breakpoint has been set. + * @param offsets Array + * Any offsets in the script the breakpoint is associated with. + */ + addScript(script, offsets) { + this.scripts.set(script, offsets.concat(this.scripts.get(offsets) || [])); + this._newOffsetsOrOptions(script, offsets, null); + } + + /** + * Remove the breakpoints from associated scripts and clear the script cache. + */ + removeScripts() { + for (const [script] of this.scripts) { + script.clearBreakpoint(this); + } + this.scripts.clear(); + } + + /** + * Called on changes to this breakpoint's script offsets or options. + */ + _newOffsetsOrOptions(script, offsets, oldOptions) { + // Clear any existing handler first in case this is called multiple times + // after options change. + for (const offset of offsets) { + script.clearBreakpoint(this, offset); + } + + // In all other cases, this is used as a script breakpoint handler. + for (const offset of offsets) { + script.setBreakpoint(offset, this); + } + } + + /** + * Check if this breakpoint has a condition that doesn't error and + * evaluates to true in frame. + * + * @param frame Debugger.Frame + * The frame to evaluate the condition in + * @returns Object + * - result: boolean|undefined + * True when the conditional breakpoint should trigger a pause, + * false otherwise. If the condition evaluation failed/killed, + * `result` will be `undefined`. + * - message: string + * If the condition throws, this is the thrown message. + */ + checkCondition(frame, condition) { + // Ensure disabling breakpoint while evaluating the condition. + // All but exception breakpoint to report any exception when running the condition. + this.threadActor.insideClientEvaluation = { + disableBreaks: true, + reportExceptionsWhenBreaksAreDisabled: true, + }; + let completion; + + // Temporarily enable pause on exception when evaluating the condition. + const hadToEnablePauseOnException = + !this.threadActor.isPauseOnExceptionsEnabled(); + try { + if (hadToEnablePauseOnException) { + this.threadActor.setPauseOnExceptions(true); + } + completion = frame.eval(condition, { hideFromDebugger: true }); + } finally { + this.threadActor.insideClientEvaluation = null; + if (hadToEnablePauseOnException) { + this.threadActor.setPauseOnExceptions(false); + } + } + if (completion) { + if (completion.throw) { + // The evaluation failed and threw + return { + result: true, + message: getThrownMessage(completion), + }; + } else if (completion.yield) { + assert(false, "Shouldn't ever get yield completions from an eval"); + } else { + return { result: !!completion.return }; + } + } + // The evaluation was killed (possibly by the slow script dialog) + return { result: undefined }; + } + + /** + * A function that the engine calls when a breakpoint has been hit. + * + * @param frame Debugger.Frame + * The stack frame that contained the breakpoint. + */ + // eslint-disable-next-line complexity + hit(frame) { + if (this.threadActor.shouldSkipAnyBreakpoint) { + return undefined; + } + + // Don't pause if we are currently stepping (in or over) or the frame is + // black-boxed. + const location = this.threadActor.sourcesManager.getFrameLocation(frame); + if (this.threadActor.sourcesManager.isFrameBlackBoxed(frame)) { + return undefined; + } + + // If we're trying to pop this frame, and we see a breakpoint at + // the spot at which popping started, ignore it. See bug 970469. + const locationAtFinish = frame.onPop?.location; + if ( + locationAtFinish && + locationAtFinish.line === location.line && + locationAtFinish.column === location.column + ) { + return undefined; + } + + if (!this.threadActor.hasMoved(frame, "breakpoint")) { + return undefined; + } + + const reason = { type: "breakpoint", actors: [this.actorID] }; + const { condition, logValue } = this.options || {}; + + if (condition) { + const { result, message } = this.checkCondition(frame, condition); + + // Don't pause if the result is falsey + if (!result) { + return undefined; + } + + if (message) { + reason.type = "breakpointConditionThrown"; + reason.message = message; + } + } + + if (logValue) { + return logEvent({ + threadActor: this.threadActor, + frame, + level: "logPoint", + expression: `[${logValue}]`, + }); + } + + return this.threadActor._pauseAndRespond(frame, reason); + } + + delete() { + // Remove from the breakpoint store. + this.threadActor.breakpointActorMap.deleteActor(this.location); + // Remove the actual breakpoint from the associated scripts. + this.removeScripts(); + this.destroy(); + } +} + +exports.BreakpointActor = BreakpointActor; diff --git a/devtools/server/actors/changes.js b/devtools/server/actors/changes.js new file mode 100644 index 0000000000..16e24cb2e7 --- /dev/null +++ b/devtools/server/actors/changes.js @@ -0,0 +1,125 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const { Actor } = require("resource://devtools/shared/protocol.js"); +const { changesSpec } = require("resource://devtools/shared/specs/changes.js"); + +const TrackChangeEmitter = require("resource://devtools/server/actors/utils/track-change-emitter.js"); + +/** + * The ChangesActor stores a stack of changes made by devtools on + * the document in the associated tab. + */ +class ChangesActor extends Actor { + /** + * Create a ChangesActor. + * + * @param {DevToolsServerConnection} conn + * The server connection. + * @param {TargetActor} targetActor + * The top-level Actor for this tab. + */ + constructor(conn, targetActor) { + super(conn, changesSpec); + this.targetActor = targetActor; + + this.onTrackChange = this.pushChange.bind(this); + this.onWillNavigate = this.onWillNavigate.bind(this); + + TrackChangeEmitter.on("track-change", this.onTrackChange); + this.targetActor.on("will-navigate", this.onWillNavigate); + + this.changes = []; + } + + destroy() { + // Stop trying to emit RDP event on destruction. + this._changesHaveBeenRequested = false; + this.clearChanges(); + this.targetActor.off("will-navigate", this.onWillNavigate); + TrackChangeEmitter.off("track-change", this.onTrackChange); + super.destroy(); + } + + start() { + /** + * This function currently does nothing and returns nothing. It exists only + * so that the client can trigger the creation of the ChangesActor through + * the front, without triggering side effects, and with a sensible semantic + * meaning. + */ + } + + changeCount() { + return this.changes.length; + } + + change(index) { + if (index >= 0 && index < this.changes.length) { + // Return a copy of the change at index. + return Object.assign({}, this.changes[index]); + } + // No change at that index -- return undefined. + return undefined; + } + + allChanges() { + /** + * This function is called by all change event consumers on the client + * to get their initial state synchronized with the ChangesActor. We + * set a flag when this function is called so we know that it's worthwhile + * to send events. + */ + this._changesHaveBeenRequested = true; + return this.changes.slice(); + } + + /** + * Handler for "will-navigate" event from the browsing context. The event is fired for + * the host page and any nested resources, like iframes. The list of changes should be + * cleared only when the host page navigates, ignoring any of its iframes. + * + * TODO: Clear changes made within sources in iframes when they navigate. Bug 1513940 + * + * @param {Object} eventData + * Event data with these properties: + * { + * window: Object // Window DOM object of the event source page + * isTopLevel: Boolean // true if the host page will navigate + * newURI: String // URI towards which the page will navigate + * request: Object // Request data. + * } + */ + onWillNavigate(eventData) { + if (eventData.isTopLevel) { + this.clearChanges(); + } + } + + pushChange(change) { + this.changes.push(change); + if (this._changesHaveBeenRequested) { + this.emit("add-change", change); + } + } + + popChange() { + const change = this.changes.pop(); + if (this._changesHaveBeenRequested) { + this.emit("remove-change", change); + } + return change; + } + + clearChanges() { + this.changes.length = 0; + if (this._changesHaveBeenRequested) { + this.emit("clear-changes"); + } + } +} + +exports.ChangesActor = ChangesActor; diff --git a/devtools/server/actors/common.js b/devtools/server/actors/common.js new file mode 100644 index 0000000000..cdf22ccae6 --- /dev/null +++ b/devtools/server/actors/common.js @@ -0,0 +1,110 @@ +/* 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"; + +class SourceLocation { + /** + * A SourceLocation represents a location in a source. + * + * @param SourceActor actor + * A SourceActor representing a source. + * @param Number line + * A line within the given source. + * @param Number column + * A column within the given line. + */ + constructor(actor, line, column) { + this._connection = actor ? actor.conn : null; + this._actorID = actor ? actor.actorID : undefined; + this._line = line; + this._column = column; + } + + get sourceActor() { + return this._connection ? this._connection.getActor(this._actorID) : null; + } + + get url() { + return this.sourceActor.url; + } + + get line() { + return this._line; + } + + get column() { + return this._column; + } + + get sourceUrl() { + return this.sourceActor.url; + } + + equals(other) { + return ( + this.sourceActor.url == other.sourceActor.url && + this.line === other.line && + (this.column === undefined || + other.column === undefined || + this.column === other.column) + ); + } + + toJSON() { + return { + source: this.sourceActor.form(), + line: this.line, + column: this.column, + }; + } +} + +exports.SourceLocation = SourceLocation; + +/** + * A method decorator that ensures the actor is in the expected state before + * proceeding. If the actor is not in the expected state, the decorated method + * returns a rejected promise. + * + * The actor's state must be at this.state property. + * + * @param String expectedState + * The expected state. + * @param String activity + * Additional info about what's going on. + * @param Function methodFunc + * The actor method to proceed with when the actor is in the expected + * state. + * + * @returns Function + * The decorated method. + */ +function expectState(expectedState, methodFunc, activity) { + return function (...args) { + if (this.state !== expectedState) { + const msg = + `Wrong state while ${activity}:` + + `Expected '${expectedState}', ` + + `but current state is '${this.state}'.`; + return Promise.reject(new Error(msg)); + } + + return methodFunc.apply(this, args); + }; +} + +exports.expectState = expectState; + +/** + * Autobind method from a `bridge` property set on some actors where the + * implementation is delegated to a separate class, and where `bridge` points + * to an instance of this class. + */ +function actorBridgeWithSpec(methodName) { + return function () { + return this.bridge[methodName].apply(this.bridge, arguments); + }; +} +exports.actorBridgeWithSpec = actorBridgeWithSpec; diff --git a/devtools/server/actors/compatibility/compatibility.js b/devtools/server/actors/compatibility/compatibility.js new file mode 100644 index 0000000000..21ff68b310 --- /dev/null +++ b/devtools/server/actors/compatibility/compatibility.js @@ -0,0 +1,162 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const { Actor } = require("resource://devtools/shared/protocol.js"); +const { + compatibilitySpec, +} = require("resource://devtools/shared/specs/compatibility.js"); + +loader.lazyGetter(this, "mdnCompatibility", () => { + const MDNCompatibility = require("resource://devtools/server/actors/compatibility/lib/MDNCompatibility.js"); + const cssPropertiesCompatData = require("resource://devtools/shared/compatibility/dataset/css-properties.json"); + return new MDNCompatibility(cssPropertiesCompatData); +}); + +class CompatibilityActor extends Actor { + /** + * Create a CompatibilityActor. + * CompatibilityActor is responsible for providing the compatibility information + * for the web page using the data from the Inspector and the `MDNCompatibility` + * and conveys them to the compatibility panel in the DevTool Inspector. Currently, + * the `CompatibilityActor` only detects compatibility issues in the CSS declarations + * but plans are in motion to extend it to evaluate compatibility information for + * HTML and JavaScript. + * The design below has the InspectorActor own the CompatibilityActor, but it's + * possible we will want to move it into it's own panel in the future. + * + * @param inspector + * The InspectorActor that owns this CompatibilityActor. + * + * @constructor + */ + constructor(inspector) { + super(inspector.conn, compatibilitySpec); + this.inspector = inspector; + } + + destroy() { + super.destroy(); + this.inspector = null; + } + + form() { + return { + actor: this.actorID, + }; + } + + getTraits() { + return { + traits: {}, + }; + } + + /** + * Responsible for computing the compatibility issues for a list of CSS declaration blocks + * + * @param {Array<Array<Object>>} domRulesDeclarations: An array of arrays of CSS declaration object + * @param {string} domRulesDeclarations[][].name: Declaration name + * @param {string} domRulesDeclarations[][].value: Declaration value + * @param {Array<Object>} targetBrowsers: Array of target browsers () to be used to check CSS compatibility against + * @param {string} targetBrowsers[].id: Browser id as specified in `devtools/shared/compatibility/datasets/browser.json` + * @param {string} targetBrowsers[].name + * @param {string} targetBrowsers[].version + * @param {string} targetBrowsers[].status: Browser status - esr, current, beta, nightly + * @returns {Array<Array<Object>>} An Array of arrays of JSON objects with compatibility + * information in following form: + * { + * // Type of compatibility issue + * type: <string>, + * // The CSS declaration that has compatibility issues + * property: <string>, + * // Alias to the given CSS property + * alias: <Array>, + * // Link to MDN documentation for the particular CSS rule + * url: <string>, + * deprecated: <boolean>, + * experimental: <boolean>, + * // An array of all the browsers that don't support the given CSS rule + * unsupportedBrowsers: <Array>, + * } + */ + getCSSDeclarationBlockIssues(domRulesDeclarations, targetBrowsers) { + return domRulesDeclarations.map(declarationBlock => + mdnCompatibility.getCSSDeclarationBlockIssues( + declarationBlock, + targetBrowsers + ) + ); + } + + /** + * Responsible for computing the compatibility issues in the + * CSS declaration of the given node. + * @param NodeActor node + * @param targetBrowsers Array + * An Array of JSON object of target browser to check compatibility against in following form: + * { + * // Browser id as specified in `devtools/server/actors/compatibility/lib/datasets/browser.json` + * id: <string>, + * name: <string>, + * version: <string>, + * // Browser status - esr, current, beta, nightly + * status: <string>, + * } + * @returns An Array of JSON objects with compatibility information in following form: + * { + * // Type of compatibility issue + * type: <string>, + * // The CSS declaration that has compatibility issues + * property: <string>, + * // Alias to the given CSS property + * alias: <Array>, + * // Link to MDN documentation for the particular CSS rule + * url: <string>, + * deprecated: <boolean>, + * experimental: <boolean>, + * // An array of all the browsers that don't support the given CSS rule + * unsupportedBrowsers: <Array>, + * } + */ + async getNodeCssIssues(node, targetBrowsers) { + const pageStyle = await this.inspector.getPageStyle(); + const styles = await pageStyle.getApplied(node, { + skipPseudo: false, + }); + + const declarationBlocks = styles.entries + .map(({ rule }) => { + // Replace form() with a function to get minimal subset + // of declarations from StyleRuleActor when such a + // function lands in the StyleRuleActor + const declarations = rule.form().declarations; + if (!declarations) { + return null; + } + return declarations.filter(d => !d.commentOffsets); + }) + .filter(declarations => declarations && declarations.length); + + return declarationBlocks + .map(declarationBlock => + mdnCompatibility.getCSSDeclarationBlockIssues( + declarationBlock, + targetBrowsers + ) + ) + .flat() + .reduce((issues, issue) => { + // Get rid of duplicate issue + return issues.find( + i => i.type === issue.type && i.property === issue.property + ) + ? issues + : [...issues, issue]; + }, []); + } +} + +exports.CompatibilityActor = CompatibilityActor; diff --git a/devtools/server/actors/compatibility/lib/MDNCompatibility.js b/devtools/server/actors/compatibility/lib/MDNCompatibility.js new file mode 100644 index 0000000000..9975123103 --- /dev/null +++ b/devtools/server/actors/compatibility/lib/MDNCompatibility.js @@ -0,0 +1,327 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const _SUPPORT_STATE_BROWSER_NOT_FOUND = "BROWSER_NOT_FOUND"; +const _SUPPORT_STATE_SUPPORTED = "SUPPORTED"; +const _SUPPORT_STATE_UNSUPPORTED = "UNSUPPORTED"; +const _SUPPORT_STATE_UNSUPPORTED_PREFIX_NEEDED = "UNSUPPORTED_PREFIX_NEEDED"; + +loader.lazyRequireGetter( + this, + "COMPATIBILITY_ISSUE_TYPE", + "resource://devtools/shared/constants.js", + true +); + +loader.lazyRequireGetter( + this, + ["getCompatNode", "getCompatTable"], + "resource://devtools/shared/compatibility/helpers.js", + true +); + +const PREFIX_REGEX = /^-\w+-/; + +/** + * A class with methods used to query the MDN compatibility data for CSS properties and + * HTML nodes and attributes for specific browsers and versions. + */ +class MDNCompatibility { + /** + * Constructor. + * + * @param {JSON} cssPropertiesCompatData + * JSON of the compat data for CSS properties. + * https://github.com/mdn/browser-compat-data/tree/master/css/properties + */ + constructor(cssPropertiesCompatData) { + this._cssPropertiesCompatData = cssPropertiesCompatData; + } + + /** + * Return the CSS related compatibility issues from given CSS declaration blocks. + * + * @param {Array} declarations + * CSS declarations to check. + * e.g. [{ name: "background-color", value: "lime" }, ...] + * @param {Array} browsers + * Restrict compatibility checks to these browsers and versions. + * e.g. [{ id: "firefox", name: "Firefox", version: "68" }, ...] + * @return {Array} issues + */ + getCSSDeclarationBlockIssues(declarations, browsers) { + const summaries = []; + for (const { name: property } of declarations) { + // Ignore CSS custom properties as any name is valid. + if (property.startsWith("--")) { + continue; + } + + summaries.push(this._getCSSPropertyCompatSummary(browsers, property)); + } + + // Classify to aliases summaries and normal summaries. + const { aliasSummaries, normalSummaries } = + this._classifyCSSCompatSummaries(summaries, browsers); + + // Finally, convert to CSS issues. + return this._toCSSIssues(normalSummaries.concat(aliasSummaries)); + } + + /** + * Classify the compatibility summaries that are able to get from + * `getCSSPropertyCompatSummary`. + * There are CSS properties that can specify the style with plural aliases such as + * `user-select`, aggregates those as the aliases summaries. + * + * @param {Array} summaries + * Assume the result of _getCSSPropertyCompatSummary(). + * @param {Array} browsers + * All browsers that to check + * e.g. [{ id: "firefox", name: "Firefox", version: "68" }, ...] + * @return Object + * { + * aliasSummaries: Array of alias summary, + * normalSummaries: Array of normal summary + * } + */ + _classifyCSSCompatSummaries(summaries, browsers) { + const aliasSummariesMap = new Map(); + const normalSummaries = summaries.filter(s => { + const { + database, + invalid, + terms, + unsupportedBrowsers, + prefixNeededBrowsers, + } = s; + + if (invalid) { + return true; + } + + const alias = this._getAlias(database, terms); + if (!alias) { + return true; + } + + if (!aliasSummariesMap.has(alias)) { + aliasSummariesMap.set( + alias, + Object.assign(s, { + property: alias, + aliases: [], + unsupportedBrowsers: browsers, + prefixNeededBrowsers: browsers, + }) + ); + } + + // Update alias summary. + const terminal = terms.pop(); + const aliasSummary = aliasSummariesMap.get(alias); + if (!aliasSummary.aliases.includes(terminal)) { + aliasSummary.aliases.push(terminal); + } + aliasSummary.unsupportedBrowsers = + aliasSummary.unsupportedBrowsers.filter(b => + unsupportedBrowsers.includes(b) + ); + aliasSummary.prefixNeededBrowsers = + aliasSummary.prefixNeededBrowsers.filter(b => + prefixNeededBrowsers.includes(b) + ); + return false; + }); + + const aliasSummaries = [...aliasSummariesMap.values()].map(s => { + s.prefixNeeded = s.prefixNeededBrowsers.length !== 0; + return s; + }); + + return { aliasSummaries, normalSummaries }; + } + + _getAlias(compatNode, terms) { + const targetNode = getCompatNode(compatNode, terms); + return targetNode ? targetNode._aliasOf : null; + } + + /** + * Return the compatibility summary of the terms. + * + * @param {Array} browsers + * All browsers that to check + * e.g. [{ id: "firefox", name: "Firefox", version: "68" }, ...] + * @param {Array} database + * MDN compatibility dataset where finds from + * @param {Array} terms + * The terms which is checked the compatibility summary from the + * database. The paremeters are passed as `rest parameters`. + * e.g. _getCompatSummary(browsers, database, "user-select", ...) + * @return {Object} + * { + * database: The passed database as a parameter, + * terms: The passed terms as a parameter, + * url: The link which indicates the spec in MDN, + * deprecated: true if the spec of terms is deprecated, + * experimental: true if the spec of terms is experimental, + * unsupportedBrowsers: Array of unsupported browsers, + * } + */ + _getCompatSummary(browsers, database, terms) { + const compatTable = getCompatTable(database, terms); + + if (!compatTable) { + return { invalid: true, unsupportedBrowsers: [] }; + } + + const unsupportedBrowsers = []; + const prefixNeededBrowsers = []; + + for (const browser of browsers) { + const state = this._getSupportState( + compatTable, + browser, + database, + terms + ); + + switch (state) { + case _SUPPORT_STATE_UNSUPPORTED_PREFIX_NEEDED: { + prefixNeededBrowsers.push(browser); + unsupportedBrowsers.push(browser); + break; + } + case _SUPPORT_STATE_UNSUPPORTED: { + unsupportedBrowsers.push(browser); + break; + } + } + } + + const { deprecated, experimental } = compatTable.status || {}; + + return { + database, + terms, + url: compatTable.mdn_url, + specUrl: compatTable.spec_url, + deprecated, + experimental, + unsupportedBrowsers, + prefixNeededBrowsers, + }; + } + + /** + * Return the compatibility summary of the CSS property. + * This function just adds `property` filed to the result of `_getCompatSummary`. + * + * @param {Array} browsers + * All browsers that to check + * e.g. [{ id: "firefox", name: "Firefox", version: "68" }, ...] + * @return {Object} compatibility summary + */ + _getCSSPropertyCompatSummary(browsers, property) { + const summary = this._getCompatSummary( + browsers, + this._cssPropertiesCompatData, + [property] + ); + return Object.assign(summary, { property }); + } + + _getSupportState(compatTable, browser, compatNode, terms) { + const supportList = compatTable.support[browser.id]; + if (!supportList) { + return _SUPPORT_STATE_BROWSER_NOT_FOUND; + } + + const version = parseFloat(browser.version); + const terminal = terms.at(-1); + const prefix = terminal.match(PREFIX_REGEX)?.[0]; + + let prefixNeeded = false; + for (const support of supportList) { + const { alternative_name: alternativeName, added, removed } = support; + + if ( + // added id true when feature is supported, but we don't know the version + (added === true || + // `null` and `undefined` is when we don't know if it's supported. + // Since we don't want to have false negative, we consider it as supported + added === null || + added === undefined || + // It was added on a previous version number + added <= version) && + // `added` is false when the property isn't supported + added !== false && + // `removed` is false when the feature wasn't removevd + (removed === false || + // `null` and `undefined` is when we don't know if it was removed. + // Since we don't want to have false negative, we consider it as supported + removed === null || + removed === undefined || + // It was removed, but on a later version, so it's still supported + version <= removed) + ) { + if (alternativeName) { + if (alternativeName === terminal) { + return _SUPPORT_STATE_SUPPORTED; + } + } else if ( + support.prefix === prefix || + // There are compat data that are defined with prefix like "-moz-binding". + // In this case, we don't have to check the prefix. + (prefix && !this._getAlias(compatNode, terms)) + ) { + return _SUPPORT_STATE_SUPPORTED; + } + + prefixNeeded = true; + } + } + + return prefixNeeded + ? _SUPPORT_STATE_UNSUPPORTED_PREFIX_NEEDED + : _SUPPORT_STATE_UNSUPPORTED; + } + + _hasIssue({ unsupportedBrowsers, deprecated, experimental, invalid }) { + // Don't apply as issue the invalid term which was not in the database. + return ( + !invalid && (unsupportedBrowsers.length || deprecated || experimental) + ); + } + + _toIssue(summary, type) { + const issue = Object.assign({}, summary, { type }); + delete issue.database; + delete issue.terms; + delete issue.prefixNeededBrowsers; + return issue; + } + + _toCSSIssues(summaries) { + const issues = []; + + for (const summary of summaries) { + if (!this._hasIssue(summary)) { + continue; + } + + const type = summary.aliases + ? COMPATIBILITY_ISSUE_TYPE.CSS_PROPERTY_ALIASES + : COMPATIBILITY_ISSUE_TYPE.CSS_PROPERTY; + issues.push(this._toIssue(summary, type)); + } + + return issues; + } +} + +module.exports = MDNCompatibility; diff --git a/devtools/server/actors/compatibility/lib/moz.build b/devtools/server/actors/compatibility/lib/moz.build new file mode 100644 index 0000000000..a2fe36da6d --- /dev/null +++ b/devtools/server/actors/compatibility/lib/moz.build @@ -0,0 +1,11 @@ +# -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*- +# vim: set filetype=python: +# 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/. + +XPCSHELL_TESTS_MANIFESTS += ["test/xpcshell/xpcshell.toml"] + +DevToolsModules( + "MDNCompatibility.js", +) diff --git a/devtools/server/actors/compatibility/lib/test/xpcshell/.eslintrc.js b/devtools/server/actors/compatibility/lib/test/xpcshell/.eslintrc.js new file mode 100644 index 0000000000..65efbdee13 --- /dev/null +++ b/devtools/server/actors/compatibility/lib/test/xpcshell/.eslintrc.js @@ -0,0 +1,6 @@ +"use strict"; + +module.exports = { + // Extend from the common devtools xpcshell eslintrc config. + extends: "../../../../../../.eslintrc.xpcshell.js", +}; diff --git a/devtools/server/actors/compatibility/lib/test/xpcshell/head.js b/devtools/server/actors/compatibility/lib/test/xpcshell/head.js new file mode 100644 index 0000000000..733c0400da --- /dev/null +++ b/devtools/server/actors/compatibility/lib/test/xpcshell/head.js @@ -0,0 +1,10 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +/* eslint no-unused-vars: [2, {"vars": "local"}] */ + +const { require } = ChromeUtils.importESModule( + "resource://devtools/shared/loader/Loader.sys.mjs" +); diff --git a/devtools/server/actors/compatibility/lib/test/xpcshell/test_mdn-compatibility.js b/devtools/server/actors/compatibility/lib/test/xpcshell/test_mdn-compatibility.js new file mode 100644 index 0000000000..e411feb3b0 --- /dev/null +++ b/devtools/server/actors/compatibility/lib/test/xpcshell/test_mdn-compatibility.js @@ -0,0 +1,193 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ +"use strict"; + +// Test for the MDN compatibility diagnosis module. + +const { + COMPATIBILITY_ISSUE_TYPE, +} = require("resource://devtools/shared/constants.js"); +const MDNCompatibility = require("resource://devtools/server/actors/compatibility/lib/MDNCompatibility.js"); +const cssPropertiesCompatData = require("resource://devtools/shared/compatibility/dataset/css-properties.json"); + +const mdnCompatibility = new MDNCompatibility(cssPropertiesCompatData); + +const FIREFOX_1 = { + id: "firefox", + version: "1", +}; + +const FIREFOX_60 = { + id: "firefox", + version: "60", +}; + +const FIREFOX_69 = { + id: "firefox", + version: "69", +}; + +const FIREFOX_ANDROID_1 = { + id: "firefox_android", + version: "1", +}; + +const SAFARI_13 = { + id: "safari", + version: "13", +}; + +const TEST_DATA = [ + { + description: "Test for a supported property", + declarations: [{ name: "background-color" }], + browsers: [FIREFOX_69], + expectedIssues: [], + }, + { + description: "Test for some supported properties", + declarations: [{ name: "background-color" }, { name: "color" }], + browsers: [FIREFOX_69], + expectedIssues: [], + }, + { + description: "Test for an unsupported property", + declarations: [{ name: "grid-column" }], + browsers: [FIREFOX_1], + expectedIssues: [ + { + type: COMPATIBILITY_ISSUE_TYPE.CSS_PROPERTY, + property: "grid-column", + url: "https://developer.mozilla.org/docs/Web/CSS/grid-column", + specUrl: "https://drafts.csswg.org/css-grid/#placement-shorthands", + deprecated: false, + experimental: false, + unsupportedBrowsers: [FIREFOX_1], + }, + ], + }, + { + description: "Test for an unknown property", + declarations: [{ name: "unknown-property" }], + browsers: [FIREFOX_69], + expectedIssues: [], + }, + { + description: "Test for a deprecated property", + declarations: [{ name: "clip" }], + browsers: [FIREFOX_69], + expectedIssues: [ + { + type: COMPATIBILITY_ISSUE_TYPE.CSS_PROPERTY, + property: "clip", + url: "https://developer.mozilla.org/docs/Web/CSS/clip", + specUrl: "https://drafts.fxtf.org/css-masking/#clip-property", + deprecated: true, + experimental: false, + unsupportedBrowsers: [], + }, + ], + }, + { + description: "Test for a property having some issues", + declarations: [{ name: "ruby-align" }], + browsers: [FIREFOX_1], + expectedIssues: [ + { + type: COMPATIBILITY_ISSUE_TYPE.CSS_PROPERTY, + property: "ruby-align", + url: "https://developer.mozilla.org/docs/Web/CSS/ruby-align", + specUrl: "https://drafts.csswg.org/css-ruby/#ruby-align-property", + deprecated: false, + experimental: true, + unsupportedBrowsers: [FIREFOX_1], + }, + ], + }, + { + description: + "Test for an aliased property not supported in all browsers with prefix needed", + declarations: [{ name: "-moz-user-select" }], + browsers: [FIREFOX_69, SAFARI_13], + expectedIssues: [ + { + type: COMPATIBILITY_ISSUE_TYPE.CSS_PROPERTY_ALIASES, + property: "user-select", + aliases: ["-moz-user-select"], + url: "https://developer.mozilla.org/docs/Web/CSS/user-select", + specUrl: "https://drafts.csswg.org/css-ui/#content-selection", + deprecated: false, + experimental: false, + prefixNeeded: true, + unsupportedBrowsers: [SAFARI_13], + }, + ], + }, + { + description: + "Test for an aliased property not supported in all browsers without prefix needed", + declarations: [ + { name: "-moz-user-select" }, + { name: "-webkit-user-select" }, + ], + browsers: [FIREFOX_ANDROID_1, FIREFOX_69, SAFARI_13], + expectedIssues: [ + { + type: COMPATIBILITY_ISSUE_TYPE.CSS_PROPERTY_ALIASES, + property: "user-select", + aliases: ["-moz-user-select", "-webkit-user-select"], + url: "https://developer.mozilla.org/docs/Web/CSS/user-select", + specUrl: "https://drafts.csswg.org/css-ui/#content-selection", + deprecated: false, + experimental: false, + prefixNeeded: false, + unsupportedBrowsers: [FIREFOX_ANDROID_1], + }, + ], + }, + { + description: "Test for aliased properties supported in all browsers", + declarations: [ + { name: "-moz-user-select" }, + { name: "-webkit-user-select" }, + ], + browsers: [FIREFOX_69, SAFARI_13], + expectedIssues: [], + }, + { + description: "Test for a property defined with prefix", + declarations: [{ name: "-moz-user-input" }], + browsers: [FIREFOX_1, FIREFOX_60, FIREFOX_69], + expectedIssues: [ + { + type: COMPATIBILITY_ISSUE_TYPE.CSS_PROPERTY, + property: "-moz-user-input", + url: "https://developer.mozilla.org/docs/Web/CSS/-moz-user-input", + specUrl: undefined, + deprecated: true, + experimental: false, + unsupportedBrowsers: [], + }, + ], + }, +]; + +add_task(() => { + for (const { + description, + declarations, + browsers, + expectedIssues, + } of TEST_DATA) { + info(description); + const issues = mdnCompatibility.getCSSDeclarationBlockIssues( + declarations, + browsers + ); + deepEqual( + issues, + expectedIssues, + "CSS declaration compatibility data matches expectations" + ); + } +}); diff --git a/devtools/server/actors/compatibility/lib/test/xpcshell/xpcshell.toml b/devtools/server/actors/compatibility/lib/test/xpcshell/xpcshell.toml new file mode 100644 index 0000000000..c0bdf3f121 --- /dev/null +++ b/devtools/server/actors/compatibility/lib/test/xpcshell/xpcshell.toml @@ -0,0 +1,7 @@ +[DEFAULT] +tags = "devtools" +head = "head.js" +firefox-appdir = "browser" +skip-if = ["os == 'android'"] + +["test_mdn-compatibility.js"] diff --git a/devtools/server/actors/compatibility/moz.build b/devtools/server/actors/compatibility/moz.build new file mode 100644 index 0000000000..010b027d37 --- /dev/null +++ b/devtools/server/actors/compatibility/moz.build @@ -0,0 +1,16 @@ +# -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*- +# vim: set filetype=python: +# 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/. + +DIRS += [ + "lib", +] + +DevToolsModules( + "compatibility.js", +) + +with Files("**"): + BUG_COMPONENT = ("DevTools", "Inspector: Compatibility") diff --git a/devtools/server/actors/css-properties.js b/devtools/server/actors/css-properties.js new file mode 100644 index 0000000000..2b2633ae16 --- /dev/null +++ b/devtools/server/actors/css-properties.js @@ -0,0 +1,105 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const { Actor } = require("resource://devtools/shared/protocol.js"); +const { + cssPropertiesSpec, +} = require("resource://devtools/shared/specs/css-properties.js"); + +loader.lazyRequireGetter( + this, + "CSS_TYPES", + "resource://devtools/shared/css/constants.js", + true +); + +class CssPropertiesActor extends Actor { + constructor(conn, targetActor) { + super(conn, cssPropertiesSpec); + this.targetActor = targetActor; + } + + getCSSDatabase() { + const properties = generateCssProperties(this.targetActor.window.document); + + return { properties }; + } +} +exports.CssPropertiesActor = CssPropertiesActor; + +/** + * Generate the CSS properties object. Every key is the property name, while + * the values are objects that contain information about that property. + * + * @param {Document} doc + * @return {Object} + */ +function generateCssProperties(doc) { + const properties = {}; + const propertyNames = InspectorUtils.getCSSPropertyNames({ + includeAliases: true, + }); + + for (const name of propertyNames) { + // Get the list of CSS types this property supports. + const supports = []; + for (const type in CSS_TYPES) { + if (safeCssPropertySupportsType(name, type)) { + supports.push(type); + } + } + + const values = InspectorUtils.getCSSValuesForProperty(name); + const subproperties = InspectorUtils.getSubpropertiesForCSSProperty(name); + + properties[name] = { + isInherited: InspectorUtils.isInheritedProperty(doc, name), + values, + supports, + subproperties, + }; + } + + return properties; +} +exports.generateCssProperties = generateCssProperties; + +/** + * Test if a CSS is property is known using server-code. + * + * @param {string} name + * @return {Boolean} + */ +function isCssPropertyKnown(name) { + try { + // If the property name is unknown, the cssPropertyIsShorthand + // will throw an exception. But if it is known, no exception will + // be thrown; so we just ignore the return value. + InspectorUtils.cssPropertyIsShorthand(name); + return true; + } catch (e) { + return false; + } +} + +exports.isCssPropertyKnown = isCssPropertyKnown; + +/** + * A wrapper for InspectorUtils.cssPropertySupportsType that ignores invalid + * properties. + * + * @param {String} name The property name. + * @param {number} type The type tested for support. + * @return {Boolean} Whether the property supports the type. + * If the property is unknown, false is returned. + */ +function safeCssPropertySupportsType(name, type) { + try { + return InspectorUtils.cssPropertySupportsType(name, type); + } catch (e) { + return false; + } +} diff --git a/devtools/server/actors/descriptors/moz.build b/devtools/server/actors/descriptors/moz.build new file mode 100644 index 0000000000..bf297b3dcb --- /dev/null +++ b/devtools/server/actors/descriptors/moz.build @@ -0,0 +1,12 @@ +# -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*- +# vim: set filetype=python: +# 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/. + +DevToolsModules( + "process.js", + "tab.js", + "webextension.js", + "worker.js", +) diff --git a/devtools/server/actors/descriptors/process.js b/devtools/server/actors/descriptors/process.js new file mode 100644 index 0000000000..19944c7d03 --- /dev/null +++ b/devtools/server/actors/descriptors/process.js @@ -0,0 +1,246 @@ +/* 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"; + +/* + * Represents any process running in Firefox. + * This can be: + * - the parent process, where all top level chrome window runs: + * like browser.xhtml, sidebars, devtools iframes, the browser console, ... + * - any content process + * + * There is some special cases in the class around: + * - xpcshell, where there is only one process which doesn't expose any DOM document + * And instead of exposing a ParentProcessTargetActor, getTarget will return + * a ContentProcessTargetActor. + * - background task, similarly to xpcshell, they don't expose any DOM document + * and this also works with a ContentProcessTargetActor. + * + * See devtools/docs/backend/actor-hierarchy.md for more details. + */ + +const { Actor } = require("resource://devtools/shared/protocol.js"); +const { + processDescriptorSpec, +} = require("resource://devtools/shared/specs/descriptors/process.js"); + +const { + DevToolsServer, +} = require("resource://devtools/server/devtools-server.js"); + +const { + createBrowserSessionContext, + createContentProcessSessionContext, +} = require("resource://devtools/server/actors/watcher/session-context.js"); + +loader.lazyRequireGetter( + this, + "ContentProcessTargetActor", + "resource://devtools/server/actors/targets/content-process.js", + true +); +loader.lazyRequireGetter( + this, + "ParentProcessTargetActor", + "resource://devtools/server/actors/targets/parent-process.js", + true +); +loader.lazyRequireGetter( + this, + "connectToContentProcess", + "resource://devtools/server/connectors/content-process-connector.js", + true +); +loader.lazyRequireGetter( + this, + "WatcherActor", + "resource://devtools/server/actors/watcher.js", + true +); + +class ProcessDescriptorActor extends Actor { + constructor(connection, options = {}) { + super(connection, processDescriptorSpec); + + if ("id" in options && typeof options.id != "number") { + throw Error("process connect requires a valid `id` attribute."); + } + + this.id = options.id; + this._windowGlobalTargetActor = null; + this.isParent = options.parent; + this.destroy = this.destroy.bind(this); + } + + get browsingContextID() { + if (this._windowGlobalTargetActor) { + return this._windowGlobalTargetActor.docShell.browsingContext.id; + } + return null; + } + + get isWindowlessParent() { + return this.isParent && (this.isXpcshell || this.isBackgroundTaskMode); + } + + get isXpcshell() { + return Services.env.exists("XPCSHELL_TEST_PROFILE_DIR"); + } + + get isBackgroundTaskMode() { + const bts = Cc["@mozilla.org/backgroundtasks;1"]?.getService( + Ci.nsIBackgroundTasks + ); + return bts && bts.isBackgroundTaskMode; + } + + _parentProcessConnect() { + let targetActor; + if (this.isWindowlessParent) { + // Check if we are running on xpcshell or in background task mode. + // In these modes, there is no valid browsing context to attach to + // and so ParentProcessTargetActor doesn't make sense as it inherits from + // WindowGlobalTargetActor. So instead use ContentProcessTargetActor, which + // matches the needs of these modes. + targetActor = new ContentProcessTargetActor(this.conn, { + isXpcShellTarget: true, + sessionContext: createContentProcessSessionContext(), + }); + } else { + // Create the target actor for the parent process, which is in the same process + // as this target. Because we are in the same process, we have a true actor that + // should be managed by the ProcessDescriptorActor. + targetActor = new ParentProcessTargetActor(this.conn, { + // This target actor is special and will stay alive as long + // as the toolbox/client is alive. It is the original top level target for + // the BrowserToolbox and isTopLevelTarget should always be true here. + // (It isn't the typical behavior of WindowGlobalTargetActor's base class) + isTopLevelTarget: true, + sessionContext: createBrowserSessionContext(), + }); + // this is a special field that only parent process with a browsing context + // have, as they are the only processes at the moment that have child + // browsing contexts + this._windowGlobalTargetActor = targetActor; + } + this.manage(targetActor); + // to be consistent with the return value of the _childProcessConnect, we are returning + // the form here. This might be memoized in the future + return targetActor.form(); + } + + /** + * Connect to a remote process actor, always a ContentProcess target. + */ + async _childProcessConnect() { + const { id } = this; + const mm = this._lookupMessageManager(id); + if (!mm) { + return { + error: "noProcess", + message: "There is no process with id '" + id + "'.", + }; + } + const childTargetForm = await connectToContentProcess( + this.conn, + mm, + this.destroy + ); + return childTargetForm; + } + + _lookupMessageManager(id) { + for (let i = 0; i < Services.ppmm.childCount; i++) { + const mm = Services.ppmm.getChildAt(i); + + // A zero id is used for the parent process, instead of its actual pid. + if (id ? mm.osPid == id : mm.isInProcess) { + return mm; + } + } + return null; + } + + /** + * Connect the a process actor. + */ + async getTarget() { + if (!DevToolsServer.allowChromeProcess) { + return { + error: "forbidden", + message: "You are not allowed to debug processes.", + }; + } + if (this.isParent) { + return this._parentProcessConnect(); + } + // This is a remote process we are connecting to + return this._childProcessConnect(); + } + + /** + * Return a Watcher actor, allowing to keep track of targets which + * already exists or will be created. It also helps knowing when they + * are destroyed. + */ + getWatcher() { + if (!this.watcher) { + this.watcher = new WatcherActor(this.conn, createBrowserSessionContext()); + this.manage(this.watcher); + } + return this.watcher; + } + + form() { + return { + actor: this.actorID, + id: this.id, + isParent: this.isParent, + isWindowlessParent: this.isWindowlessParent, + traits: { + // Supports the Watcher actor. Can be removed as part of Bug 1680280. + // Bug 1687461: WatcherActor only supports the parent process, where we debug everything. + // For the "Browser Content Toolbox", where we debug only one content process, + // we will still be using legacy listeners. + watcher: this.isParent, + // ParentProcessTargetActor can be reloaded. + supportsReloadDescriptor: this.isParent && !this.isWindowlessParent, + }, + }; + } + + async reloadDescriptor() { + if (!this.isParent || this.isWindowlessParent) { + throw new Error( + "reloadDescriptor is only available for parent process descriptors" + ); + } + + // Reload for the parent process will restart the whole browser + // + // This aims at replicate `DevelopmentHelpers.quickRestart` + // This allows a user to do a full firefox restart + session restore + // Via Ctrl+Alt+R on the Browser Console/Toolbox + + // Maximize the chance of fetching new source content by clearing the cache + Services.obs.notifyObservers(null, "startupcache-invalidate"); + + // Avoid safemode popup from appearing on restart + Services.env.set("MOZ_DISABLE_SAFE_MODE_KEY", "1"); + + Services.startup.quit( + Ci.nsIAppStartup.eAttemptQuit | Ci.nsIAppStartup.eRestart + ); + } + + destroy() { + this.emit("descriptor-destroyed"); + + this._windowGlobalTargetActor = null; + super.destroy(); + } +} + +exports.ProcessDescriptorActor = ProcessDescriptorActor; diff --git a/devtools/server/actors/descriptors/tab.js b/devtools/server/actors/descriptors/tab.js new file mode 100644 index 0000000000..ea20d3fb36 --- /dev/null +++ b/devtools/server/actors/descriptors/tab.js @@ -0,0 +1,253 @@ +/* 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"; + +/* + * Descriptor Actor that represents a Tab in the parent process. It + * launches a WindowGlobalTargetActor in the content process to do the real work and tunnels the + * data. + * + * See devtools/docs/backend/actor-hierarchy.md for more details. + */ + +const { Actor } = require("resource://devtools/shared/protocol.js"); +const { + tabDescriptorSpec, +} = require("resource://devtools/shared/specs/descriptors/tab.js"); + +const { + connectToFrame, +} = require("resource://devtools/server/connectors/frame-connector.js"); +const lazy = {}; +ChromeUtils.defineESModuleGetters(lazy, { + PlacesUtils: "resource://gre/modules/PlacesUtils.sys.mjs", +}); + +const { AppConstants } = ChromeUtils.importESModule( + "resource://gre/modules/AppConstants.sys.mjs" +); +const { + createBrowserElementSessionContext, +} = require("resource://devtools/server/actors/watcher/session-context.js"); + +loader.lazyRequireGetter( + this, + "WatcherActor", + "resource://devtools/server/actors/watcher.js", + true +); + +/** + * Creates a target actor proxy for handling requests to a single browser frame. + * Both <xul:browser> and <iframe mozbrowser> are supported. + * This actor is a shim that connects to a WindowGlobalTargetActor in a remote browser process. + * All RDP packets get forwarded using the message manager. + * + * @param connection The main RDP connection. + * @param browser <xul:browser> or <iframe mozbrowser> element to connect to. + */ +class TabDescriptorActor extends Actor { + constructor(connection, browser) { + super(connection, tabDescriptorSpec); + this._browser = browser; + } + + form() { + const form = { + actor: this.actorID, + browserId: this._browser.browserId, + browsingContextID: + this._browser && this._browser.browsingContext + ? this._browser.browsingContext.id + : null, + isZombieTab: this._isZombieTab(), + outerWindowID: this._getOuterWindowId(), + selected: this.selected, + title: this._getTitle(), + traits: { + // Supports the Watcher actor. Can be removed as part of Bug 1680280. + watcher: true, + supportsReloadDescriptor: true, + }, + url: this._getUrl(), + }; + + return form; + } + + _getTitle() { + // If the content already provides a title, use it. + if (this._browser.contentTitle) { + return this._browser.contentTitle; + } + + // For zombie or lazy tabs (tab created, but content has not been loaded), + // try to retrieve the title from the XUL Tab itself. + // Note: this only works on Firefox desktop. + if (this._tabbrowser) { + const tab = this._tabbrowser.getTabForBrowser(this._browser); + if (tab) { + return tab.label; + } + } + + // No title available. + return null; + } + + _getUrl() { + if (!this._browser || !this._browser.browsingContext) { + return ""; + } + + const { browsingContext } = this._browser; + return browsingContext.currentWindowGlobal.documentURI.spec; + } + + _getOuterWindowId() { + if (!this._browser || !this._browser.browsingContext) { + return ""; + } + + const { browsingContext } = this._browser; + return browsingContext.currentWindowGlobal.outerWindowId; + } + + get selected() { + // getMostRecentBrowserWindow will find the appropriate window on Firefox + // Desktop and on GeckoView. + const topAppWindow = Services.wm.getMostRecentBrowserWindow(); + + const selectedBrowser = topAppWindow?.gBrowser?.selectedBrowser; + if (!selectedBrowser) { + // Note: gBrowser is not available on GeckoView. + // We should find another way to know if this browser is the selected + // browser. See Bug 1631020. + return false; + } + + return this._browser === selectedBrowser; + } + + async getTarget() { + if (!this.conn) { + return { + error: "tabDestroyed", + message: "Tab destroyed while performing a TabDescriptorActor update", + }; + } + + /* eslint-disable-next-line no-async-promise-executor */ + return new Promise(async (resolve, reject) => { + const onDestroy = () => { + // Reject the update promise if the tab was destroyed while requesting an update + reject({ + error: "tabDestroyed", + message: "Tab destroyed while performing a TabDescriptorActor update", + }); + + // Targets created from the TabDescriptor are not created via JSWindowActors and + // we need to notify the watcher manually about their destruction. + // TabDescriptor's targets are created via TabDescriptor.getTarget and are still using + // message manager instead of JSWindowActors. + if (this.watcher && this.targetActorForm) { + this.watcher.notifyTargetDestroyed(this.targetActorForm); + } + }; + + try { + // Check if the browser is still connected before calling connectToFrame + if (!this._browser.isConnected) { + onDestroy(); + return; + } + + const connectForm = await connectToFrame( + this.conn, + this._browser, + onDestroy + ); + this.targetActorForm = connectForm; + resolve(connectForm); + } catch (e) { + reject({ + error: "tabDestroyed", + message: "Tab destroyed while connecting to the frame", + }); + } + }); + } + + /** + * Return a Watcher actor, allowing to keep track of targets which + * already exists or will be created. It also helps knowing when they + * are destroyed. + */ + getWatcher(config) { + if (!this.watcher) { + this.watcher = new WatcherActor( + this.conn, + createBrowserElementSessionContext(this._browser, { + isServerTargetSwitchingEnabled: config.isServerTargetSwitchingEnabled, + isPopupDebuggingEnabled: config.isPopupDebuggingEnabled, + }) + ); + this.manage(this.watcher); + } + return this.watcher; + } + + get _tabbrowser() { + if (this._browser && typeof this._browser.getTabBrowser == "function") { + return this._browser.getTabBrowser(); + } + return null; + } + + async getFavicon() { + if (!AppConstants.MOZ_PLACES) { + // PlacesUtils is not supported + return null; + } + + try { + const { data } = await lazy.PlacesUtils.promiseFaviconData( + this._getUrl() + ); + return data; + } catch (e) { + // Favicon unavailable for this url. + return null; + } + } + + _isZombieTab() { + // Note: GeckoView doesn't support zombie tabs + const tabbrowser = this._tabbrowser; + const tab = tabbrowser ? tabbrowser.getTabForBrowser(this._browser) : null; + return tab?.hasAttribute && tab.hasAttribute("pending"); + } + + reloadDescriptor({ bypassCache }) { + if (!this._browser || !this._browser.browsingContext) { + return; + } + + this._browser.browsingContext.reload( + bypassCache + ? Ci.nsIWebNavigation.LOAD_FLAGS_BYPASS_CACHE + : Ci.nsIWebNavigation.LOAD_FLAGS_NONE + ); + } + + destroy() { + this.emit("descriptor-destroyed"); + this._browser = null; + + super.destroy(); + } +} + +exports.TabDescriptorActor = TabDescriptorActor; diff --git a/devtools/server/actors/descriptors/webextension.js b/devtools/server/actors/descriptors/webextension.js new file mode 100644 index 0000000000..56e4abfc41 --- /dev/null +++ b/devtools/server/actors/descriptors/webextension.js @@ -0,0 +1,336 @@ +/* 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"; + +/* + * Represents a WebExtension add-on in the parent process. This gives some metadata about + * the add-on and watches for uninstall events. This uses a proxy to access the + * WebExtension in the WebExtension process via the message manager. + * + * See devtools/docs/backend/actor-hierarchy.md for more details. + */ + +const { Actor } = require("resource://devtools/shared/protocol.js"); +const { + webExtensionDescriptorSpec, +} = require("resource://devtools/shared/specs/descriptors/webextension.js"); + +const { + connectToFrame, +} = require("resource://devtools/server/connectors/frame-connector.js"); +const { + createWebExtensionSessionContext, +} = require("resource://devtools/server/actors/watcher/session-context.js"); + +const lazy = {}; +loader.lazyGetter(lazy, "AddonManager", () => { + return ChromeUtils.importESModule( + "resource://gre/modules/AddonManager.sys.mjs", + { loadInDevToolsLoader: false } + ).AddonManager; +}); +loader.lazyGetter(lazy, "ExtensionParent", () => { + return ChromeUtils.importESModule( + "resource://gre/modules/ExtensionParent.sys.mjs", + { loadInDevToolsLoader: false } + ).ExtensionParent; +}); +loader.lazyRequireGetter( + this, + "WatcherActor", + "resource://devtools/server/actors/watcher.js", + true +); + +const BGSCRIPT_STATUSES = { + RUNNING: "RUNNING", + STOPPED: "STOPPED", +}; + +/** + * Creates the actor that represents the addon in the parent process, which connects + * itself to a WebExtensionTargetActor counterpart which is created in the extension + * process (or in the main process if the WebExtensions OOP mode is disabled). + * + * The WebExtensionDescriptorActor subscribes itself as an AddonListener on the AddonManager + * and forwards this events to child actor (e.g. on addon reload or when the addon is + * uninstalled completely) and connects to the child extension process using a `browser` + * element provided by the extension internals (it is not related to any single extension, + * but it will be created automatically to the currently selected "WebExtensions OOP mode" + * and it persist across the extension reloads (it is destroyed once the actor exits). + * WebExtensionDescriptorActor is a child of RootActor, it can be retrieved via + * RootActor.listAddons request. + * + * @param {DevToolsServerConnection} conn + * The connection to the client. + * @param {AddonWrapper} addon + * The target addon. + */ +class WebExtensionDescriptorActor extends Actor { + constructor(conn, addon) { + super(conn, webExtensionDescriptorSpec); + this.addon = addon; + this.addonId = addon.id; + this._childFormPromise = null; + + this._onChildExit = this._onChildExit.bind(this); + this.destroy = this.destroy.bind(this); + lazy.AddonManager.addAddonListener(this); + } + + form() { + const { addonId } = this; + const policy = lazy.ExtensionParent.WebExtensionPolicy.getByID(addonId); + const persistentBackgroundScript = + lazy.ExtensionParent.DebugUtils.hasPersistentBackgroundScript(addonId); + const backgroundScriptStatus = this._getBackgroundScriptStatus(); + + return { + actor: this.actorID, + backgroundScriptStatus, + // Note that until the policy becomes active, + // getTarget/connectToFrame will fail attaching to the web extension: + // https://searchfox.org/mozilla-central/rev/526a5089c61db85d4d43eb0e46edaf1f632e853a/toolkit/components/extensions/WebExtensionPolicy.cpp#551-553 + debuggable: policy?.active && this.addon.isDebuggable, + hidden: this.addon.hidden, + // iconDataURL is available after calling loadIconDataURL + iconDataURL: this._iconDataURL, + iconURL: this.addon.iconURL, + id: addonId, + isSystem: this.addon.isSystem, + isWebExtension: this.addon.isWebExtension, + manifestURL: policy && policy.getURL("manifest.json"), + name: this.addon.name, + persistentBackgroundScript, + temporarilyInstalled: this.addon.temporarilyInstalled, + traits: { + supportsReloadDescriptor: true, + // Supports the Watcher actor. Can be removed as part of Bug 1680280. + watcher: true, + }, + url: this.addon.sourceURI ? this.addon.sourceURI.spec : undefined, + warnings: lazy.ExtensionParent.DebugUtils.getExtensionManifestWarnings( + this.addonId + ), + }; + } + + /** + * Return a Watcher actor, allowing to keep track of targets which + * already exists or will be created. It also helps knowing when they + * are destroyed. + */ + async getWatcher(config = {}) { + if (!this.watcher) { + // Ensure connecting to the webextension frame in order to populate this._form + await this._extensionFrameConnect(); + this.watcher = new WatcherActor( + this.conn, + createWebExtensionSessionContext( + { + addonId: this.addonId, + browsingContextID: this._form.browsingContextID, + innerWindowId: this._form.innerWindowId, + }, + config + ) + ); + this.manage(this.watcher); + } + return this.watcher; + } + + async getTarget() { + const form = await this._extensionFrameConnect(); + // Merge into the child actor form, some addon metadata + // (e.g. the addon name shown in the addon debugger window title). + return Object.assign(form, { + iconURL: this.addon.iconURL, + id: this.addon.id, + name: this.addon.name, + }); + } + + getChildren() { + return []; + } + + async _extensionFrameConnect() { + if (this._form) { + return this._form; + } + + this._browser = + await lazy.ExtensionParent.DebugUtils.getExtensionProcessBrowser(this); + + const policy = lazy.ExtensionParent.WebExtensionPolicy.getByID( + this.addonId + ); + this._form = await connectToFrame(this.conn, this._browser, this.destroy, { + addonId: this.addonId, + addonBrowsingContextGroupId: policy.browsingContextGroupId, + // Bug 1754452: This flag is passed by the client to getWatcher(), but the server + // doesn't support this anyway. So always pass false here and keep things simple. + // Once we enable this flag, we will stop using connectToFrame and instantiate + // the WebExtensionTargetActor from watcher code instead, so that shouldn't + // introduce an issue for the future. + isServerTargetSwitchingEnabled: false, + }); + + // connectToFrame may resolve to a null form, + // in case the browser element is destroyed before it is fully connected to it. + if (!this._form) { + throw new Error( + "browser element destroyed while connecting to it: " + this.addon.name + ); + } + + this._childActorID = this._form.actor; + + // Exit the proxy child actor if the child actor has been destroyed. + this._mm.addMessageListener("debug:webext_child_exit", this._onChildExit); + + return this._form; + } + + /** + * Note that reloadDescriptor is the common API name for descriptors + * which support to be reloaded, while WebExtensionDescriptorActor::reload + * is a legacy API which is for instance used from web-ext. + * + * bypassCache has no impact for addon reloads. + */ + reloadDescriptor({ bypassCache }) { + return this.reload(); + } + + async reload() { + await this.addon.reload(); + return {}; + } + + async terminateBackgroundScript() { + await lazy.ExtensionParent.DebugUtils.terminateBackgroundScript( + this.addonId + ); + } + + // This function will be called from RootActor in case that the devtools client + // retrieves list of addons with `iconDataURL` option. + async loadIconDataURL() { + this._iconDataURL = await this.getIconDataURL(); + } + + async getIconDataURL() { + if (!this.addon.iconURL) { + return null; + } + + const xhr = new XMLHttpRequest(); + xhr.responseType = "blob"; + xhr.open("GET", this.addon.iconURL, true); + + if (this.addon.iconURL.toLowerCase().endsWith(".svg")) { + // Maybe SVG, thus force to change mime type. + xhr.overrideMimeType("image/svg+xml"); + } + + try { + const blob = await new Promise((resolve, reject) => { + xhr.onload = () => resolve(xhr.response); + xhr.onerror = reject; + xhr.send(); + }); + + const reader = new FileReader(); + return await new Promise((resolve, reject) => { + reader.onloadend = () => resolve(reader.result); + reader.onerror = reject; + reader.readAsDataURL(blob); + }); + } catch (_) { + console.warn(`Failed to create data url from [${this.addon.iconURL}]`); + return null; + } + } + + // Private Methods + _getBackgroundScriptStatus() { + const isRunning = lazy.ExtensionParent.DebugUtils.isBackgroundScriptRunning( + this.addonId + ); + // The background script status doesn't apply to this addon (e.g. the addon + // type doesn't have any code, like staticthemes/langpacks/dictionaries, or + // the extension does not have a background script at all). + if (isRunning === undefined) { + return undefined; + } + + return isRunning ? BGSCRIPT_STATUSES.RUNNING : BGSCRIPT_STATUSES.STOPPED; + } + + get _mm() { + return ( + this._browser && + (this._browser.messageManager || this._browser.frameLoader.messageManager) + ); + } + + /** + * Handle the child actor exit. + */ + _onChildExit(msg) { + if (msg.json.actor !== this._childActorID) { + return; + } + + this.destroy(); + } + + // AddonManagerListener callbacks. + onInstalled(addon) { + if (addon.id != this.addonId) { + return; + } + + // Update the AddonManager's addon object on reload/update. + this.addon = addon; + } + + onUninstalled(addon) { + if (addon != this.addon) { + return; + } + + this.destroy(); + } + + destroy() { + lazy.AddonManager.removeAddonListener(this); + + this.addon = null; + if (this._mm) { + this._mm.removeMessageListener( + "debug:webext_child_exit", + this._onChildExit + ); + + this._mm.sendAsyncMessage("debug:webext_parent_exit", { + actor: this._childActorID, + }); + + lazy.ExtensionParent.DebugUtils.releaseExtensionProcessBrowser(this); + } + + this._browser = null; + this._childActorID = null; + + this.emit("descriptor-destroyed"); + + super.destroy(); + } +} + +exports.WebExtensionDescriptorActor = WebExtensionDescriptorActor; diff --git a/devtools/server/actors/descriptors/worker.js b/devtools/server/actors/descriptors/worker.js new file mode 100644 index 0000000000..89ca918e05 --- /dev/null +++ b/devtools/server/actors/descriptors/worker.js @@ -0,0 +1,182 @@ +/* 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"; + +/* + * Target actor for any of the various kinds of workers. + * + * See devtools/docs/backend/actor-hierarchy.md for more details. + */ + +// protocol.js uses objects as exceptions in order to define +// error packets. +/* eslint-disable no-throw-literal */ + +const { Actor } = require("resource://devtools/shared/protocol.js"); +const { + workerDescriptorSpec, +} = require("resource://devtools/shared/specs/descriptors/worker.js"); + +const { + DevToolsServer, +} = require("resource://devtools/server/devtools-server.js"); +const { XPCOMUtils } = ChromeUtils.importESModule( + "resource://gre/modules/XPCOMUtils.sys.mjs" +); +const { + createWorkerSessionContext, +} = require("resource://devtools/server/actors/watcher/session-context.js"); + +loader.lazyRequireGetter( + this, + "connectToWorker", + "resource://devtools/server/connectors/worker-connector.js", + true +); + +XPCOMUtils.defineLazyServiceGetter( + this, + "swm", + "@mozilla.org/serviceworkers/manager;1", + "nsIServiceWorkerManager" +); + +class WorkerDescriptorActor extends Actor { + constructor(conn, dbg) { + super(conn, workerDescriptorSpec); + this._dbg = dbg; + + this._threadActor = null; + this._transport = null; + + this._dbgListener = { + onClose: this._onWorkerClose.bind(this), + onError: this._onWorkerError.bind(this), + }; + + this._dbg.addListener(this._dbgListener); + this._attached = true; + } + + form() { + const form = { + actor: this.actorID, + + consoleActor: this._consoleActor, + threadActor: this._threadActor, + tracerActor: this._tracerActor, + + id: this._dbg.id, + url: this._dbg.url, + traits: {}, + type: this._dbg.type, + }; + if (this._dbg.type === Ci.nsIWorkerDebugger.TYPE_SERVICE) { + /** + * The ServiceWorkerManager in content processes don't maintain + * ServiceWorkerRegistrations; record the ServiceWorker's ID, and + * this data will be merged with the corresponding registration in + * the parent process. + */ + if (!DevToolsServer.isInChildProcess) { + const registration = this._getServiceWorkerRegistrationInfo(); + form.scope = registration.scope; + const newestWorker = + registration.activeWorker || + registration.waitingWorker || + registration.installingWorker; + form.fetch = newestWorker?.handlesFetchEvents; + } + } + return form; + } + + detach() { + if (!this._attached) { + throw { error: "wrongState" }; + } + + this.destroy(); + } + + destroy() { + if (this._attached) { + this._detach(); + } + + this.emit("descriptor-destroyed"); + super.destroy(); + } + + async getTarget() { + if (!this._attached) { + return { error: "wrongState" }; + } + + if (this._threadActor !== null) { + return { + type: "connected", + + consoleActor: this._consoleActor, + threadActor: this._threadActor, + tracerActor: this._tracerActor, + }; + } + + try { + const { transport, workerTargetForm } = await connectToWorker( + this.conn, + this._dbg, + this.actorID, + { + sessionContext: createWorkerSessionContext(), + } + ); + + this._consoleActor = workerTargetForm.consoleActor; + this._threadActor = workerTargetForm.threadActor; + this._tracerActor = workerTargetForm.tracerActor; + + this._transport = transport; + + return { + type: "connected", + + consoleActor: this._consoleActor, + threadActor: this._threadActor, + tracerActor: this._tracerActor, + + url: this._dbg.url, + }; + } catch (error) { + return { error: error.toString() }; + } + } + + _onWorkerClose() { + this.destroy(); + } + + _onWorkerError(filename, lineno, message) { + console.error("ERROR:", filename, ":", lineno, ":", message); + } + + _getServiceWorkerRegistrationInfo() { + return swm.getRegistrationByPrincipal(this._dbg.principal, this._dbg.url); + } + + _detach() { + if (this._threadActor !== null) { + this._transport.close(); + this._transport = null; + this._threadActor = null; + } + + this._dbg.removeListener(this._dbgListener); + this._attached = false; + } +} + +exports.WorkerDescriptorActor = WorkerDescriptorActor; diff --git a/devtools/server/actors/device.js b/devtools/server/actors/device.js new file mode 100644 index 0000000000..2aa05959e5 --- /dev/null +++ b/devtools/server/actors/device.js @@ -0,0 +1,74 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const { Actor } = require("resource://devtools/shared/protocol.js"); +const { deviceSpec } = require("resource://devtools/shared/specs/device.js"); + +const { + DevToolsServer, +} = require("resource://devtools/server/devtools-server.js"); +const { getSystemInfo } = require("resource://devtools/shared/system.js"); +const { AppConstants } = ChromeUtils.importESModule( + "resource://gre/modules/AppConstants.sys.mjs" +); + +exports.DeviceActor = class DeviceActor extends Actor { + constructor(conn) { + super(conn, deviceSpec); + // pageshow and pagehide event release wake lock, so we have to acquire + // wake lock again by pageshow event + this._onPageShow = this._onPageShow.bind(this); + if (this._window) { + this._window.addEventListener("pageshow", this._onPageShow, true); + } + this._acquireWakeLock(); + } + + destroy() { + super.destroy(); + this._releaseWakeLock(); + if (this._window) { + this._window.removeEventListener("pageshow", this._onPageShow, true); + } + } + + getDescription() { + return Object.assign({}, getSystemInfo(), { + canDebugServiceWorkers: true, + }); + } + + _acquireWakeLock() { + if (AppConstants.platform !== "android") { + return; + } + + const pm = Cc["@mozilla.org/power/powermanagerservice;1"].getService( + Ci.nsIPowerManagerService + ); + this._wakelock = pm.newWakeLock("screen", this._window); + } + + _releaseWakeLock() { + if (this._wakelock) { + try { + this._wakelock.unlock(); + } catch (e) { + // Ignore error since wake lock is already unlocked + } + this._wakelock = null; + } + } + + _onPageShow() { + this._releaseWakeLock(); + this._acquireWakeLock(); + } + + get _window() { + return Services.wm.getMostRecentWindow(DevToolsServer.chromeWindowType); + } +}; diff --git a/devtools/server/actors/emulation/moz.build b/devtools/server/actors/emulation/moz.build new file mode 100644 index 0000000000..cf229e6fe1 --- /dev/null +++ b/devtools/server/actors/emulation/moz.build @@ -0,0 +1,10 @@ +# -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*- +# vim: set filetype=python: +# 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/. + +DevToolsModules( + "responsive.js", + "touch-simulator.js", +) diff --git a/devtools/server/actors/emulation/responsive.js b/devtools/server/actors/emulation/responsive.js new file mode 100644 index 0000000000..829579cab6 --- /dev/null +++ b/devtools/server/actors/emulation/responsive.js @@ -0,0 +1,83 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const { Actor } = require("resource://devtools/shared/protocol.js"); +const { + responsiveSpec, +} = require("resource://devtools/shared/specs/responsive.js"); + +/** + * This actor overrides various browser features to simulate different environments to + * test how pages perform under various conditions. + * + * The design below, which saves the previous value of each property before setting, is + * needed because it's possible to have multiple copies of this actor for a single page. + * When some instance of this actor changes a property, we want it to be able to restore + * that property to the way it was found before the change. + * + * A subtle aspect of the code below is that all get* methods must return non-undefined + * values, so that the absence of a previous value can be distinguished from the value for + * "no override" for each of the properties. + */ +class ResponsiveActor extends Actor { + constructor(conn, targetActor) { + super(conn, responsiveSpec); + this.targetActor = targetActor; + this.docShell = targetActor.docShell; + } + + destroy() { + this.targetActor = null; + this.docShell = null; + + super.destroy(); + } + + get win() { + return this.docShell.chromeEventHandler.ownerGlobal; + } + + /* Touch events override */ + + _previousTouchEventsOverride = undefined; + + /** + * Set the current element picker state. + * + * True means the element picker is currently active and we should not be emulating + * touch events. + * False means the element picker is not active and it is ok to emulate touch events. + * + * This actor method is meant to be called by the DevTools front-end. The reason for + * this is the following: + * RDM is the only current consumer of the touch simulator. RDM instantiates this actor + * on its own, whether or not the Toolbox is opened. That means it does so in its own + * DevTools Server instance. + * When the Toolbox is running, it uses a different DevToolsServer. Therefore, it is not + * possible for the touch simulator to know whether the picker is active or not. This + * state has to be sent by the client code of the Toolbox to this actor. + * If a future use case arises where we want to use the touch simulator from the Toolbox + * too, then we could add code in here to detect the picker mode as described in + * https://bugzilla.mozilla.org/show_bug.cgi?id=1409085#c3 + + * @param {Boolean} state + * @param {String} pickerType + */ + setElementPickerState(state, pickerType) { + this.targetActor.touchSimulator.setElementPickerState(state, pickerType); + } + + /** + * Dispatches an "orientationchange" event. + */ + async dispatchOrientationChangeEvent() { + const { CustomEvent } = this.win; + const orientationChangeEvent = new CustomEvent("orientationchange"); + this.win.dispatchEvent(orientationChangeEvent); + } +} + +exports.ResponsiveActor = ResponsiveActor; diff --git a/devtools/server/actors/emulation/touch-simulator.js b/devtools/server/actors/emulation/touch-simulator.js new file mode 100644 index 0000000000..4d4b6b4c6e --- /dev/null +++ b/devtools/server/actors/emulation/touch-simulator.js @@ -0,0 +1,309 @@ +/* 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"; + +loader.lazyRequireGetter( + this, + "PICKER_TYPES", + "resource://devtools/shared/picker-constants.js" +); + +var isClickHoldEnabled = Services.prefs.getBoolPref( + "ui.click_hold_context_menus" +); +var clickHoldDelay = Services.prefs.getIntPref( + "ui.click_hold_context_menus.delay", + 500 +); + +// Touch state constants are derived from values defined in: nsIDOMWindowUtils.idl +const TOUCH_CONTACT = 0x02; +const TOUCH_REMOVE = 0x04; + +const TOUCH_STATES = { + touchstart: TOUCH_CONTACT, + touchmove: TOUCH_CONTACT, + touchend: TOUCH_REMOVE, +}; + +const EVENTS_TO_HANDLE = [ + "mousedown", + "mousemove", + "mouseup", + "touchstart", + "touchend", + "mouseenter", + "mouseover", + "mouseout", + "mouseleave", +]; + +const kStateHover = 0x00000004; // ElementState::HOVER + +/** + * Simulate touch events for platforms where they aren't generally available. + */ +class TouchSimulator { + /** + * @param {ChromeEventHandler} simulatorTarget: The object we'll use to listen for click + * and touch events to handle. + */ + constructor(simulatorTarget) { + this.simulatorTarget = simulatorTarget; + this._currentPickerMap = new Map(); + } + + enabled = false; + + start() { + if (this.enabled) { + // Simulator is already started + return; + } + + EVENTS_TO_HANDLE.forEach(evt => { + // Only listen trusted events to prevent messing with + // event dispatched manually within content documents + this.simulatorTarget.addEventListener(evt, this, true, false); + }); + + this.enabled = true; + } + + stop() { + if (!this.enabled) { + // Simulator isn't running + return; + } + EVENTS_TO_HANDLE.forEach(evt => { + this.simulatorTarget.removeEventListener(evt, this, true); + }); + this.enabled = false; + } + + _isPicking() { + const types = Object.values(PICKER_TYPES); + return types.some(type => this._currentPickerMap.get(type)); + } + + /** + * Set the state value for one of DevTools pickers (either eyedropper or + * element picker). + * If any content picker is currently active, we should not be emulating + * touch events. Otherwise it is ok to emulate touch events. + * In theory only one picker can ever be active at a time, but tracking the + * different pickers independantly avoids race issues in the client code. + * + * @param {Boolean} state + * True if the picker is currently active, false otherwise. + * @param {String} pickerType + * One of PICKER_TYPES. + */ + setElementPickerState(state, pickerType) { + if (!Object.values(PICKER_TYPES).includes(pickerType)) { + throw new Error( + "Unsupported type in setElementPickerState: " + pickerType + ); + } + this._currentPickerMap.set(pickerType, state); + } + + // eslint-disable-next-line complexity + handleEvent(evt) { + // Bail out if devtools is in pick mode in the same tab. + if (this._isPicking()) { + return; + } + + const content = this.getContent(evt.target); + if (!content) { + return; + } + + // App touchstart & touchend should also be dispatched on the system app + // to match on-device behavior. + if (evt.type.startsWith("touch")) { + const sysFrame = content.realFrameElement; + if (!sysFrame) { + return; + } + const sysDocument = sysFrame.ownerDocument; + const sysWindow = sysDocument.defaultView; + + const touchEvent = sysDocument.createEvent("touchevent"); + const touch = evt.touches[0] || evt.changedTouches[0]; + const point = sysDocument.createTouch( + sysWindow, + sysFrame, + 0, + touch.pageX, + touch.pageY, + touch.screenX, + touch.screenY, + touch.clientX, + touch.clientY, + 1, + 1, + 0, + 0 + ); + + const touches = sysDocument.createTouchList(point); + const targetTouches = touches; + const changedTouches = touches; + touchEvent.initTouchEvent( + evt.type, + true, + true, + sysWindow, + 0, + false, + false, + false, + false, + touches, + targetTouches, + changedTouches + ); + sysFrame.dispatchEvent(touchEvent); + return; + } + + // Ignore all but real mouse event coming from physical mouse + // (especially ignore mouse event being dispatched from a touch event) + if ( + evt.button || + evt.inputSource != evt.MOZ_SOURCE_MOUSE || + evt.isSynthesized + ) { + return; + } + + const eventTarget = this.target; + let type = ""; + switch (evt.type) { + case "mouseenter": + case "mouseover": + case "mouseout": + case "mouseleave": + // Don't propagate events which are not related to touch events + evt.stopPropagation(); + evt.preventDefault(); + + // We don't want to trigger any visual changes to elements whose content can + // be modified via hover states. We can avoid this by removing the element's + // content state. + InspectorUtils.removeContentState(evt.target, kStateHover); + break; + + case "mousedown": + this.target = evt.target; + + // If the click-hold feature is enabled, start a timeout to convert long clicks + // into contextmenu events. + // Just don't do it if the event occurred on a scrollbar. + if (isClickHoldEnabled && !evt.originalTarget.closest("scrollbar")) { + this._contextMenuTimeout = this.sendContextMenu(evt); + } + + this.startX = evt.pageX; + this.startY = evt.pageY; + + // Capture events so if a different window show up the events + // won't be dispatched to something else. + evt.target.setCapture(false); + + type = "touchstart"; + break; + + case "mousemove": + if (!eventTarget) { + // Don't propagate mousemove event when touchstart event isn't fired + evt.stopPropagation(); + return; + } + + type = "touchmove"; + break; + + case "mouseup": + if (!eventTarget) { + return; + } + this.target = null; + + content.clearTimeout(this._contextMenuTimeout); + type = "touchend"; + + // Only register click listener after mouseup to ensure + // catching only real user click. (Especially ignore click + // being dispatched on form submit) + if (evt.detail == 1) { + this.simulatorTarget.addEventListener("click", this, { + capture: true, + once: true, + }); + } + break; + } + + const target = eventTarget || this.target; + if (target && type) { + this.synthesizeNativeTouch(content, evt.screenX, evt.screenY, type); + } + + evt.preventDefault(); + evt.stopImmediatePropagation(); + } + + sendContextMenu({ target, clientX, clientY, screenX, screenY }) { + const view = target.ownerGlobal; + const { MouseEvent } = view; + const evt = new MouseEvent("contextmenu", { + bubbles: true, + cancelable: true, + view, + screenX, + screenY, + clientX, + clientY, + }); + const content = this.getContent(target); + const timeout = content.setTimeout(() => { + target.dispatchEvent(evt); + }, clickHoldDelay); + + return timeout; + } + + /** + * Synthesizes a native touch action on a given target element. + * + * @param {Window} win + * The target window. + * @param {Number} screenX + * The `x` screen coordinate relative to the screen origin. + * @param {Number} screenY + * The `y` screen coordinate relative to the screen origin. + * @param {String} type + * A key appearing in the TOUCH_STATES associative array. + */ + synthesizeNativeTouch(win, screenX, screenY, type) { + // Native events work in device pixels. + const utils = win.windowUtils; + const deviceScale = win.devicePixelRatio; + const pt = { x: screenX * deviceScale, y: screenY * deviceScale }; + + utils.sendNativeTouchPoint(0, TOUCH_STATES[type], pt.x, pt.y, 1, 90, null); + return true; + } + + getContent(target) { + const win = target?.ownerDocument ? target.ownerGlobal : null; + return win; + } +} + +exports.TouchSimulator = TouchSimulator; diff --git a/devtools/server/actors/environment.js b/devtools/server/actors/environment.js new file mode 100644 index 0000000000..2a9b4af07d --- /dev/null +++ b/devtools/server/actors/environment.js @@ -0,0 +1,206 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ +"use strict"; + +const { Actor } = require("resource://devtools/shared/protocol.js"); +const { + environmentSpec, +} = require("resource://devtools/shared/specs/environment.js"); + +const { + createValueGrip, +} = require("resource://devtools/server/actors/object/utils.js"); + +/** + * Creates an EnvironmentActor. EnvironmentActors are responsible for listing + * the bindings introduced by a lexical environment and assigning new values to + * those identifier bindings. + * + * @param Debugger.Environment aEnvironment + * The lexical environment that will be used to create the actor. + * @param ThreadActor aThreadActor + * The parent thread actor that contains this environment. + */ +class EnvironmentActor extends Actor { + constructor(environment, threadActor) { + super(threadActor.conn, environmentSpec); + + this.obj = environment; + this.threadActor = threadActor; + } + + /** + * When the Environment Actor is destroyed it removes the + * Debugger.Environment.actor field so that environment does not + * reference a destroyed actor. + */ + destroy() { + this.obj.actor = null; + super.destroy(); + } + + /** + * Return an environment form for use in a protocol message. + */ + form() { + const form = { actor: this.actorID }; + + // What is this environment's type? + if (this.obj.type == "declarative") { + form.type = this.obj.calleeScript ? "function" : "block"; + } else { + form.type = this.obj.type; + } + + form.scopeKind = this.obj.scopeKind; + + // Does this environment have a parent? + if (this.obj.parent) { + form.parent = this.threadActor + .createEnvironmentActor(this.obj.parent, this.getParent()) + .form(); + } + + // Does this environment reflect the properties of an object as variables? + if (this.obj.type == "object" || this.obj.type == "with") { + form.object = createValueGrip( + this.obj.object, + this.getParent(), + this.threadActor.objectGrip + ); + } + + // Is this the environment created for a function call? + if (this.obj.calleeScript) { + // Client only uses "displayName" for "function". + // Create a fake object actor containing only "displayName" as replacement + // for the no longer available obj.callee (see bug 1663847). + // See bug 1664218 for cleanup. + form.function = { displayName: this.obj.calleeScript.displayName }; + } + + // Shall we list this environment's bindings? + if (this.obj.type == "declarative") { + form.bindings = this.bindings(); + } + + return form; + } + + /** + * Handle a protocol request to fully enumerate the bindings introduced by the + * lexical environment. + */ + bindings() { + const bindings = { arguments: [], variables: {} }; + + // TODO: this part should be removed in favor of the commented-out part + // below when getVariableDescriptor lands (bug 725815). + if (typeof this.obj.getVariable != "function") { + // if (typeof this.obj.getVariableDescriptor != "function") { + return bindings; + } + + let parameterNames; + if (this.obj.calleeScript) { + parameterNames = this.obj.calleeScript.parameterNames; + } else { + parameterNames = []; + } + for (const name of parameterNames) { + const arg = {}; + const value = this.obj.getVariable(name); + + // TODO: this part should be removed in favor of the commented-out part + // below when getVariableDescriptor lands (bug 725815). + const desc = { + value, + configurable: false, + writable: !value?.optimizedOut, + enumerable: true, + }; + + // let desc = this.obj.getVariableDescriptor(name); + const descForm = { + enumerable: true, + configurable: desc.configurable, + }; + if ("value" in desc) { + descForm.value = createValueGrip( + desc.value, + this.getParent(), + this.threadActor.objectGrip + ); + descForm.writable = desc.writable; + } else { + descForm.get = createValueGrip( + desc.get, + this.getParent(), + this.threadActor.objectGrip + ); + descForm.set = createValueGrip( + desc.set, + this.getParent(), + this.threadActor.objectGrip + ); + } + arg[name] = descForm; + bindings.arguments.push(arg); + } + + for (const name of this.obj.names()) { + if ( + bindings.arguments.some(function exists(element) { + return !!element[name]; + }) + ) { + continue; + } + + const value = this.obj.getVariable(name); + + // TODO: this part should be removed in favor of the commented-out part + // below when getVariableDescriptor lands. + const desc = { + value, + configurable: false, + writable: !( + value && + (value.optimizedOut || value.uninitialized || value.missingArguments) + ), + enumerable: true, + }; + + // let desc = this.obj.getVariableDescriptor(name); + const descForm = { + enumerable: true, + configurable: desc.configurable, + }; + if ("value" in desc) { + descForm.value = createValueGrip( + desc.value, + this.getParent(), + this.threadActor.objectGrip + ); + descForm.writable = desc.writable; + } else { + descForm.get = createValueGrip( + desc.get || undefined, + this.getParent(), + this.threadActor.objectGrip + ); + descForm.set = createValueGrip( + desc.set || undefined, + this.getParent(), + this.threadActor.objectGrip + ); + } + bindings.variables[name] = descForm; + } + + return bindings; + } +} + +exports.EnvironmentActor = EnvironmentActor; diff --git a/devtools/server/actors/errordocs.js b/devtools/server/actors/errordocs.js new file mode 100644 index 0000000000..03363915de --- /dev/null +++ b/devtools/server/actors/errordocs.js @@ -0,0 +1,222 @@ +/* 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/. */ + +/** + * A mapping of error message names to external documentation. Any error message + * included here will be displayed alongside its link in the web console. + */ + +"use strict"; + +// Worker contexts do not support Services; in that case we have to rely +// on the support URL redirection. + +loader.lazyGetter(this, "supportBaseURL", () => { + // Fallback URL used for worker targets, as well as when app.support.baseURL + // cannot be formatted. + let url = "https://support.mozilla.org/kb/"; + + if (!isWorker) { + try { + // formatURLPref might throw if tokens used in app.support.baseURL + // are not available for the current binary. See Bug 1755626. + url = Services.urlFormatter.formatURLPref("app.support.baseURL"); + } catch (e) { + console.warn( + `Failed to format app.support.baseURL, falling back to ${url} (${e.message})` + ); + } + } + return url; +}); + +const baseErrorURL = + "https://developer.mozilla.org/docs/Web/JavaScript/Reference/Errors/"; +const params = + "?utm_source=mozilla&utm_medium=firefox-console-errors&utm_campaign=default"; + +const ErrorDocs = { + JSMSG_READ_ONLY: "Read-only", + JSMSG_BAD_ARRAY_LENGTH: "Invalid_array_length", + JSMSG_NEGATIVE_REPETITION_COUNT: "Negative_repetition_count", + JSMSG_RESULTING_STRING_TOO_LARGE: "Resulting_string_too_large", + JSMSG_BAD_RADIX: "Bad_radix", + JSMSG_PRECISION_RANGE: "Precision_range", + JSMSG_STMT_AFTER_RETURN: "Stmt_after_return", + JSMSG_NOT_A_CODEPOINT: "Not_a_codepoint", + JSMSG_BAD_SORT_ARG: "Array_sort_argument", + JSMSG_UNEXPECTED_TYPE: "Unexpected_type", + JSMSG_NOT_DEFINED: "Not_defined", + JSMSG_NOT_FUNCTION: "Not_a_function", + JSMSG_EQUAL_AS_ASSIGN: "Equal_as_assign", + JSMSG_UNDEFINED_PROP: "Undefined_prop", + JSMSG_DEPRECATED_PRAGMA: "Deprecated_source_map_pragma", + JSMSG_DEPRECATED_USAGE: "Deprecated_caller_or_arguments_usage", + JSMSG_CANT_DELETE: "Cant_delete", + JSMSG_VAR_HIDES_ARG: "Var_hides_argument", + JSMSG_JSON_BAD_PARSE: "JSON_bad_parse", + JSMSG_UNDECLARED_VAR: "Undeclared_var", + JSMSG_UNEXPECTED_TOKEN: "Unexpected_token", + JSMSG_BAD_OCTAL: "Bad_octal", + JSMSG_PROPERTY_ACCESS_DENIED: "Property_access_denied", + JSMSG_NO_PROPERTIES: "No_properties", + JSMSG_ALREADY_HAS_PRAGMA: "Already_has_pragma", + JSMSG_BAD_RETURN_OR_YIELD: "Bad_return_or_yield", + JSMSG_UNEXPECTED_TOKEN_NO_EXPECT: "Missing_semicolon_before_statement", + JSMSG_OVER_RECURSED: "Too_much_recursion", + JSMSG_BRACKET_AFTER_LIST: "Missing_bracket_after_list", + JSMSG_PAREN_AFTER_ARGS: "Missing_parenthesis_after_argument_list", + JSMSG_MORE_ARGS_NEEDED: "More_arguments_needed", + JSMSG_BAD_LEFTSIDE_OF_ASS: "Invalid_assignment_left-hand_side", + JSMSG_UNTERMINATED_STRING: "Unterminated_string_literal", + JSMSG_NOT_CONSTRUCTOR: "Not_a_constructor", + JSMSG_CURLY_AFTER_LIST: "Missing_curly_after_property_list", + JSMSG_DEPRECATED_FOR_EACH: "For-each-in_loops_are_deprecated", + JSMSG_STRICT_NON_SIMPLE_PARAMS: "Strict_Non_Simple_Params", + JSMSG_DEAD_OBJECT: "Dead_object", + JSMSG_OBJECT_REQUIRED: "No_non-null_object", + JSMSG_IDSTART_AFTER_NUMBER: "Identifier_after_number", + JSMSG_DEPRECATED_EXPR_CLOSURE: "Deprecated_expression_closures", + JSMSG_ILLEGAL_CHARACTER: "Illegal_character", + JSMSG_BAD_REGEXP_FLAG: "Bad_regexp_flag", + JSMSG_INVALID_FOR_IN_DECL_WITH_INIT: "Invalid_for-in_initializer", + JSMSG_CANT_REDEFINE_PROP: "Cant_redefine_property", + JSMSG_COLON_AFTER_ID: "Missing_colon_after_property_id", + JSMSG_IN_NOT_OBJECT: "in_operator_no_object", + JSMSG_CURLY_AFTER_BODY: "Missing_curly_after_function_body", + JSMSG_NAME_AFTER_DOT: "Missing_name_after_dot_operator", + JSMSG_DEPRECATED_OCTAL: "Deprecated_octal", + JSMSG_PAREN_AFTER_COND: "Missing_parenthesis_after_condition", + JSMSG_JSON_CYCLIC_VALUE: "Cyclic_object_value", + JSMSG_NO_VARIABLE_NAME: "No_variable_name", + JSMSG_UNNAMED_FUNCTION_STMT: "Unnamed_function_statement", + JSMSG_CANT_DEFINE_PROP_OBJECT_NOT_EXTENSIBLE: + "Cant_define_property_object_not_extensible", + JSMSG_TYPED_ARRAY_BAD_ARGS: "Typed_array_invalid_arguments", + JSMSG_GETTER_ONLY: "Getter_only", + JSMSG_INVALID_DATE: "Invalid_date", + JSMSG_DEPRECATED_STRING_METHOD: "Deprecated_String_generics", + JSMSG_RESERVED_ID: "Reserved_identifier", + JSMSG_BAD_CONST_ASSIGN: "Invalid_const_assignment", + JSMSG_BAD_CONST_DECL: "Missing_initializer_in_const", + JSMSG_OF_AFTER_FOR_LOOP_DECL: "Invalid_for-of_initializer", + JSMSG_BAD_URI: "Malformed_URI", + JSMSG_DEPRECATED_DELETE_OPERAND: "Delete_in_strict_mode", + JSMSG_MISSING_FORMAL: "Missing_formal_parameter", + JSMSG_CANT_TRUNCATE_ARRAY: "Non_configurable_array_element", + JSMSG_INCOMPATIBLE_PROTO: "Called_on_incompatible_type", + JSMSG_INCOMPATIBLE_METHOD: "Called_on_incompatible_type", + JSMSG_BAD_INSTANCEOF_RHS: "invalid_right_hand_side_instanceof_operand", + JSMSG_EMPTY_ARRAY_REDUCE: "Reduce_of_empty_array_with_no_initial_value", + JSMSG_NOT_ITERABLE: "is_not_iterable", + JSMSG_PROPERTY_FAIL: "cant_access_property", + JSMSG_PROPERTY_FAIL_EXPR: "cant_access_property", + JSMSG_REDECLARED_VAR: "Redeclared_parameter", + JSMSG_MISMATCHED_PLACEMENT: "Mismatched placement", + JSMSG_SET_NON_OBJECT_RECEIVER: "Cant_assign_to_property", +}; + +const MIXED_CONTENT_LEARN_MORE = + "https://developer.mozilla.org/docs/Web/Security/Mixed_content"; +const TRACKING_PROTECTION_LEARN_MORE = + "https://developer.mozilla.org/Firefox/Privacy/Tracking_Protection"; +const INSECURE_PASSWORDS_LEARN_MORE = + "https://developer.mozilla.org/docs/Web/Security/Insecure_passwords"; +const PUBLIC_KEY_PINS_LEARN_MORE = + "https://developer.mozilla.org/docs/Web/HTTP/Public_Key_Pinning"; +const STRICT_TRANSPORT_SECURITY_LEARN_MORE = + "https://developer.mozilla.org/docs/Web/HTTP/Headers/Strict-Transport-Security"; +const MIME_TYPE_MISMATCH_LEARN_MORE = + "https://developer.mozilla.org/docs/Web/HTTP/Headers/X-Content-Type-Options"; +const SOURCE_MAP_LEARN_MORE = + "https://firefox-source-docs.mozilla.org/devtools-user/debugger/source_map_errors/"; +const TLS_LEARN_MORE = + "https://blog.mozilla.org/security/2018/10/15/removing-old-versions-of-tls/"; +const X_FRAME_OPTIONS_LEARN_MORE = + "https://developer.mozilla.org/docs/Web/HTTP/Headers/X-Frame-Options"; +const REQUEST_STORAGE_ACCESS_LEARN_MORE = + "https://developer.mozilla.org/docs/Web/API/Document/requestStorageAccess"; +const DOCTYPE_MODES_LEARN_MORE = + "https://developer.mozilla.org/docs/Web/HTML/Quirks_Mode_and_Standards_Mode"; + +const ErrorCategories = { + "X-Frame-Options": X_FRAME_OPTIONS_LEARN_MORE, + "Insecure Password Field": INSECURE_PASSWORDS_LEARN_MORE, + "Mixed Content Message": MIXED_CONTENT_LEARN_MORE, + "Mixed Content Blocker": MIXED_CONTENT_LEARN_MORE, + "Invalid HPKP Headers": PUBLIC_KEY_PINS_LEARN_MORE, + "Invalid HSTS Headers": STRICT_TRANSPORT_SECURITY_LEARN_MORE, + "Tracking Protection": TRACKING_PROTECTION_LEARN_MORE, + MIMEMISMATCH: MIME_TYPE_MISMATCH_LEARN_MORE, + "source map": SOURCE_MAP_LEARN_MORE, + TLS: TLS_LEARN_MORE, + requestStorageAccess: REQUEST_STORAGE_ACCESS_LEARN_MORE, + HTTPSOnly: supportBaseURL + "https-only-prefs", + HTML_PARSER__DOCTYPE: DOCTYPE_MODES_LEARN_MORE, +}; + +const baseCorsErrorUrl = + "https://developer.mozilla.org/docs/Web/HTTP/CORS/Errors/"; +const corsParams = + "?utm_source=devtools&utm_medium=firefox-cors-errors&utm_campaign=default"; +const CorsErrorDocs = { + CORSDisabled: "CORSDisabled", + CORSDidNotSucceed2: "CORSDidNotSucceed", + CORSOriginHeaderNotAdded: "CORSOriginHeaderNotAdded", + CORSExternalRedirectNotAllowed: "CORSExternalRedirectNotAllowed", + CORSRequestNotHttp: "CORSRequestNotHttp", + CORSMissingAllowOrigin2: "CORSMissingAllowOrigin", + CORSMultipleAllowOriginNotAllowed: "CORSMultipleAllowOriginNotAllowed", + CORSAllowOriginNotMatchingOrigin: "CORSAllowOriginNotMatchingOrigin", + CORSNotSupportingCredentials: "CORSNotSupportingCredentials", + CORSMethodNotFound: "CORSMethodNotFound", + CORSMissingAllowCredentials: "CORSMissingAllowCredentials", + CORSPreflightDidNotSucceed3: "CORSPreflightDidNotSucceed", + CORSInvalidAllowMethod: "CORSInvalidAllowMethod", + CORSInvalidAllowHeader: "CORSInvalidAllowHeader", + CORSMissingAllowHeaderFromPreflight2: "CORSMissingAllowHeaderFromPreflight", +}; + +const baseStorageAccessPolicyErrorUrl = + "https://developer.mozilla.org/docs/Mozilla/Firefox/Privacy/Storage_access_policy/Errors/"; +const storageAccessPolicyParams = + "?utm_source=devtools&utm_medium=firefox-cookie-errors&utm_campaign=default"; +const StorageAccessPolicyErrorDocs = { + cookieBlockedPermission: "CookieBlockedByPermission", + cookieBlockedTracker: "CookieBlockedTracker", + cookieBlockedAll: "CookieBlockedAll", + cookieBlockedForeign: "CookieBlockedForeign", + cookiePartitionedForeign: "CookiePartitionedForeign", +}; + +exports.GetURL = error => { + if (!error) { + return undefined; + } + + const doc = ErrorDocs[error.errorMessageName]; + if (doc) { + return baseErrorURL + doc + params; + } + + const corsDoc = CorsErrorDocs[error.category]; + if (corsDoc) { + return baseCorsErrorUrl + corsDoc + corsParams; + } + + const storageAccessPolicyDoc = StorageAccessPolicyErrorDocs[error.category]; + if (storageAccessPolicyDoc) { + return ( + baseStorageAccessPolicyErrorUrl + + storageAccessPolicyDoc + + storageAccessPolicyParams + ); + } + + const categoryURL = ErrorCategories[error.category]; + if (categoryURL) { + return categoryURL + params; + } + return undefined; +}; diff --git a/devtools/server/actors/frame.js b/devtools/server/actors/frame.js new file mode 100644 index 0000000000..be4f5e3eb3 --- /dev/null +++ b/devtools/server/actors/frame.js @@ -0,0 +1,225 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const { Actor } = require("resource://devtools/shared/protocol/Actor.js"); +const { Pool } = require("resource://devtools/shared/protocol/Pool.js"); +const { frameSpec } = require("resource://devtools/shared/specs/frame.js"); + +const Debugger = require("Debugger"); +const { assert } = require("resource://devtools/shared/DevToolsUtils.js"); +const { + createValueGrip, +} = require("resource://devtools/server/actors/object/utils.js"); + +function formatDisplayName(frame) { + if (frame.type === "call") { + const callee = frame.callee; + return callee.name || callee.userDisplayName || callee.displayName; + } + + return `(${frame.type})`; +} + +function isDeadSavedFrame(savedFrame) { + return Cu && Cu.isDeadWrapper(savedFrame); +} +function isValidSavedFrame(threadActor, savedFrame) { + return ( + !isDeadSavedFrame(savedFrame) && + // If the frame's source is unknown to the debugger, then we ignore it + // since the frame likely does not belong to a realm that is marked + // as a debuggee. + // This check will also fail if the frame would have been known but was + // GCed before the debugger was opened on the page. + // TODO: Use SavedFrame's security principal to limit non-debuggee frames + // and pass all unknown frames to the debugger as a URL with no sourceID. + getSavedFrameSource(threadActor, savedFrame) + ); +} +function getSavedFrameSource(threadActor, savedFrame) { + return threadActor.sourcesManager.getSourceActorByInternalSourceId( + savedFrame.sourceId + ); +} +function getSavedFrameParent(threadActor, savedFrame) { + if (isDeadSavedFrame(savedFrame)) { + return null; + } + + while (true) { + savedFrame = savedFrame.parent || savedFrame.asyncParent; + + // If the saved frame is a dead wrapper, we don't have any way to keep + // stepping through parent frames. + if (!savedFrame || isDeadSavedFrame(savedFrame)) { + savedFrame = null; + break; + } + + if (isValidSavedFrame(threadActor, savedFrame)) { + break; + } + } + return savedFrame; +} + +/** + * An actor for a specified stack frame. + */ +class FrameActor extends Actor { + /** + * Creates the Frame actor. + * + * @param frame Debugger.Frame|SavedFrame + * The debuggee frame. + * @param threadActor ThreadActor + * The parent thread actor for this frame. + */ + constructor(frame, threadActor, depth) { + super(threadActor.conn, frameSpec); + + this.frame = frame; + this.threadActor = threadActor; + this.depth = depth; + } + + /** + * A pool that contains frame-lifetime objects, like the environment. + */ + _frameLifetimePool = null; + get frameLifetimePool() { + if (!this._frameLifetimePool) { + this._frameLifetimePool = new Pool(this.conn, "frame"); + } + return this._frameLifetimePool; + } + + /** + * Finalization handler that is called when the actor is being evicted from + * the pool. + */ + destroy() { + if (this._frameLifetimePool) { + this._frameLifetimePool.destroy(); + this._frameLifetimePool = null; + } + super.destroy(); + } + + getEnvironment() { + try { + if (!this.frame.environment) { + return {}; + } + } catch (e) { + // |this.frame| might not be live. FIXME Bug 1477030 we shouldn't be + // using frames we derived from a point where we are not currently + // paused at. + return {}; + } + + const envActor = this.threadActor.createEnvironmentActor( + this.frame.environment, + this.frameLifetimePool + ); + + return envActor.form(); + } + + /** + * Returns a frame form for use in a protocol message. + */ + form() { + // SavedFrame actors have their own frame handling. + if (!(this.frame instanceof Debugger.Frame)) { + // The Frame actor shouldn't be used after evaluation is resumed, so + // there shouldn't be an easy way for the saved frame to be referenced + // once it has died. + assert(!isDeadSavedFrame(this.frame)); + + const obj = { + actor: this.actorID, + // TODO: Bug 1610418 - Consider updating SavedFrame to have a type. + type: "dead", + asyncCause: this.frame.asyncCause, + state: "dead", + displayName: this.frame.functionDisplayName, + arguments: [], + where: { + // The frame's source should always be known because + // getSavedFrameParent will skip over frames with unknown sources. + actor: getSavedFrameSource(this.threadActor, this.frame).actorID, + line: this.frame.line, + // SavedFrame objects have a 1-based column number, but this API and + // Debugger API objects use a 0-based column value. + column: this.frame.column - 1, + }, + oldest: !getSavedFrameParent(this.threadActor, this.frame), + }; + + return obj; + } + + const threadActor = this.threadActor; + const form = { + actor: this.actorID, + type: this.frame.type, + asyncCause: this.frame.onStack ? null : "await", + state: this.frame.onStack ? "on-stack" : "suspended", + }; + + if (this.depth) { + form.depth = this.depth; + } + + if (this.frame.type != "wasmcall") { + form.this = createValueGrip( + this.frame.this, + threadActor._pausePool, + threadActor.objectGrip + ); + } + + form.displayName = formatDisplayName(this.frame); + form.arguments = this._args(); + + if (this.frame.script) { + const location = this.threadActor.sourcesManager.getFrameLocation( + this.frame + ); + form.where = { + actor: location.sourceActor.actorID, + line: location.line, + column: location.column, + }; + } + + if (!this.frame.older) { + form.oldest = true; + } + + return form; + } + + _args() { + if (!this.frame.onStack || !this.frame.arguments) { + return []; + } + + return this.frame.arguments.map(arg => + createValueGrip( + arg, + this.threadActor._pausePool, + this.threadActor.objectGrip + ) + ); + } +} + +exports.FrameActor = FrameActor; +exports.formatDisplayName = formatDisplayName; +exports.getSavedFrameParent = getSavedFrameParent; +exports.isValidSavedFrame = isValidSavedFrame; diff --git a/devtools/server/actors/heap-snapshot-file.js b/devtools/server/actors/heap-snapshot-file.js new file mode 100644 index 0000000000..f3fd9242b2 --- /dev/null +++ b/devtools/server/actors/heap-snapshot-file.js @@ -0,0 +1,72 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const { Actor } = require("resource://devtools/shared/protocol.js"); +const { + heapSnapshotFileSpec, +} = require("resource://devtools/shared/specs/heap-snapshot-file.js"); + +loader.lazyRequireGetter( + this, + "DevToolsUtils", + "resource://devtools/shared/DevToolsUtils.js" +); +loader.lazyRequireGetter( + this, + "HeapSnapshotFileUtils", + "resource://devtools/shared/heapsnapshot/HeapSnapshotFileUtils.js" +); + +/** + * The HeapSnapshotFileActor handles transferring heap snapshot files from the + * server to the client. This has to be a global actor in the parent process + * because child processes are sandboxed and do not have access to the file + * system. + */ +exports.HeapSnapshotFileActor = class HeapSnapshotFileActor extends Actor { + constructor(conn, parent) { + super(conn, heapSnapshotFileSpec); + + if ( + Services.appinfo.processType !== Services.appinfo.PROCESS_TYPE_DEFAULT + ) { + const err = new Error( + "Attempt to create a HeapSnapshotFileActor in a " + + "child process! The HeapSnapshotFileActor *MUST* " + + "be in the parent process!" + ); + DevToolsUtils.reportException("HeapSnapshotFileActor's constructor", err); + } + } + + /** + * @see MemoryFront.prototype.transferHeapSnapshot + */ + async transferHeapSnapshot(snapshotId) { + const snapshotFilePath = + HeapSnapshotFileUtils.getHeapSnapshotTempFilePath(snapshotId); + if (!snapshotFilePath) { + throw new Error(`No heap snapshot with id: ${snapshotId}`); + } + + const streamPromise = DevToolsUtils.openFileStream(snapshotFilePath); + + const { size } = await IOUtils.stat(snapshotFilePath); + const bulkPromise = this.conn.startBulkSend({ + actor: this.actorID, + type: "heap-snapshot", + length: size, + }); + + const [bulk, stream] = await Promise.all([bulkPromise, streamPromise]); + + try { + await bulk.copyFrom(stream); + } finally { + stream.close(); + } + } +}; diff --git a/devtools/server/actors/highlighters.js b/devtools/server/actors/highlighters.js new file mode 100644 index 0000000000..a25bae4781 --- /dev/null +++ b/devtools/server/actors/highlighters.js @@ -0,0 +1,379 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const { Actor } = require("devtools/shared/protocol"); +const { customHighlighterSpec } = require("devtools/shared/specs/highlighters"); + +const EventEmitter = require("devtools/shared/event-emitter"); + +loader.lazyRequireGetter( + this, + "isXUL", + "resource://devtools/server/actors/highlighters/utils/markup.js", + true +); + +/** + * The registration mechanism for highlighters provides a quick way to + * have modular highlighters instead of a hard coded list. + */ +const highlighterTypes = new Map(); + +/** + * Returns `true` if a highlighter for the given `typeName` is registered, + * `false` otherwise. + */ +const isTypeRegistered = typeName => highlighterTypes.has(typeName); +exports.isTypeRegistered = isTypeRegistered; + +/** + * Registers a given constructor as highlighter, for the `typeName` given. + */ +const registerHighlighter = (typeName, modulePath) => { + if (highlighterTypes.has(typeName)) { + throw Error(`${typeName} is already registered.`); + } + + highlighterTypes.set(typeName, modulePath); +}; + +/** + * CustomHighlighterActor is a generic Actor that instantiates a custom implementation of + * a highlighter class given its type name which must be registered in `highlighterTypes`. + * CustomHighlighterActor proxies calls to methods of the highlighter class instance: + * constructor(targetActor), show(node, options), hide(), destroy() + */ +exports.CustomHighlighterActor = class CustomHighligherActor extends Actor { + /** + * Create a highlighter instance given its typeName. + */ + constructor(parent, typeName) { + super(parent.conn, customHighlighterSpec); + + this._parent = parent; + + const modulePath = highlighterTypes.get(typeName); + if (!modulePath) { + const list = [...highlighterTypes.keys()]; + + throw new Error(`${typeName} isn't a valid highlighter class (${list})`); + } + + const constructor = require(modulePath)[typeName]; + // The assumption is that custom highlighters either need the canvasframe + // container to append their elements and thus a non-XUL window or they have + // to define a static XULSupported flag that indicates that the highlighter + // supports XUL windows. Otherwise, bail out. + if (!isXUL(this._parent.targetActor.window) || constructor.XULSupported) { + this._highlighterEnv = new HighlighterEnvironment(); + this._highlighterEnv.initFromTargetActor(parent.targetActor); + this._highlighter = new constructor(this._highlighterEnv); + if (this._highlighter.on) { + this._highlighter.on( + "highlighter-event", + this._onHighlighterEvent.bind(this) + ); + } + } else { + throw new Error( + "Custom " + typeName + "highlighter cannot be created in a XUL window" + ); + } + } + + destroy() { + super.destroy(); + this.finalize(); + this._parent = null; + } + + release() {} + + /** + * Get current instance of the highlighter object. + */ + get instance() { + return this._highlighter; + } + + /** + * Show the highlighter. + * This calls through to the highlighter instance's |show(node, options)| + * method. + * + * Most custom highlighters are made to highlight DOM nodes, hence the first + * NodeActor argument (NodeActor as in devtools/server/actor/inspector). + * Note however that some highlighters use this argument merely as a context + * node: The SelectorHighlighter for instance uses it as a base node to run the + * provided CSS selector on. + * + * @param {NodeActor} The node to be highlighted + * @param {Object} Options for the custom highlighter + * @return {Boolean} True, if the highlighter has been successfully shown + */ + show(node, options) { + if (!this._highlighter) { + return null; + } + + const rawNode = node?.rawNode; + + return this._highlighter.show(rawNode, options); + } + + /** + * Hide the highlighter if it was shown before + */ + hide() { + if (this._highlighter) { + this._highlighter.hide(); + } + } + + /** + * Upon receiving an event from the highlighter, forward it to the client. + */ + _onHighlighterEvent(data) { + this.emit("highlighter-event", data); + } + + /** + * Destroy the custom highlighter implementation. + * This method is called automatically just before the actor is destroyed. + */ + finalize() { + if (this._highlighter) { + if (this._highlighter.off) { + this._highlighter.off( + "highlighter-event", + this._onHighlighterEvent.bind(this) + ); + } + this._highlighter.destroy(); + this._highlighter = null; + } + + if (this._highlighterEnv) { + this._highlighterEnv.destroy(); + this._highlighterEnv = null; + } + } +}; + +/** + * The HighlighterEnvironment is an object that holds all the required data for + * highlighters to work: the window, docShell, event listener target, ... + * It also emits "will-navigate", "navigate" and "window-ready" events, + * similarly to the WindowGlobalTargetActor. + * + * It can be initialized either from a WindowGlobalTargetActor (which is the + * most frequent way of using it, since highlighters are initialized by + * CustomHighlighterActor, which has a targetActor reference). + * It can also be initialized just with a window object (which is + * useful for when a highlighter is used outside of the devtools server context. + */ + +class HighlighterEnvironment extends EventEmitter { + initFromTargetActor(targetActor) { + this._targetActor = targetActor; + + const relayedEvents = [ + "window-ready", + "navigate", + "will-navigate", + "use-simple-highlighters-updated", + ]; + + this._abortController = new AbortController(); + const signal = this._abortController.signal; + for (const event of relayedEvents) { + this._targetActor.on(event, this.relayTargetEvent.bind(this, event), { + signal, + }); + } + } + + initFromWindow(win) { + this._win = win; + + // We need a progress listener to know when the window will navigate/has + // navigated. + const self = this; + this.listener = { + QueryInterface: ChromeUtils.generateQI([ + "nsIWebProgressListener", + "nsISupportsWeakReference", + ]), + + onStateChange(progress, request, flag) { + const isStart = flag & Ci.nsIWebProgressListener.STATE_START; + const isStop = flag & Ci.nsIWebProgressListener.STATE_STOP; + const isWindow = flag & Ci.nsIWebProgressListener.STATE_IS_WINDOW; + const isDocument = flag & Ci.nsIWebProgressListener.STATE_IS_DOCUMENT; + + if (progress.DOMWindow !== win) { + return; + } + + if (isDocument && isStart) { + // One of the earliest events that tells us a new URI is being loaded + // in this window. + self.emit("will-navigate", { + window: win, + isTopLevel: true, + }); + } + if (isWindow && isStop) { + self.emit("navigate", { + window: win, + isTopLevel: true, + }); + } + }, + }; + + this.webProgress.addProgressListener( + this.listener, + Ci.nsIWebProgress.NOTIFY_STATE_WINDOW | + Ci.nsIWebProgress.NOTIFY_STATE_DOCUMENT + ); + } + + get isInitialized() { + return this._win || this._targetActor; + } + + get isXUL() { + return isXUL(this.window); + } + + get useSimpleHighlightersForReducedMotion() { + return this._targetActor?._useSimpleHighlightersForReducedMotion; + } + + get window() { + if (!this.isInitialized) { + throw new Error( + "Initialize HighlighterEnvironment with a targetActor " + + "or window first" + ); + } + const win = this._targetActor ? this._targetActor.window : this._win; + + try { + return Cu.isDeadWrapper(win) ? null : win; + } catch (e) { + // win is null + return null; + } + } + + get document() { + return this.window && this.window.document; + } + + get docShell() { + return this.window && this.window.docShell; + } + + get webProgress() { + return ( + this.docShell && + this.docShell + .QueryInterface(Ci.nsIInterfaceRequestor) + .getInterface(Ci.nsIWebProgress) + ); + } + + /** + * Get the right target for listening to events on the page. + * - If the environment was initialized from a WindowGlobalTargetActor + * *and* if we're in the Browser Toolbox (to inspect Firefox Desktop): the + * targetActor is the RootActor, in which case, the window property can be + * used to listen to events. + * - With Firefox Desktop, the targetActor is a WindowGlobalTargetActor, and we use + * the chromeEventHandler which gives us a target we can use to listen to + * events, even from nested iframes. + * - If the environment was initialized from a window, we also use the + * chromeEventHandler. + */ + get pageListenerTarget() { + if (this._targetActor && this._targetActor.isRootActor) { + return this.window; + } + return this.docShell && this.docShell.chromeEventHandler; + } + + relayTargetEvent(name, data) { + this.emit(name, data); + } + + destroy() { + if (this._abortController) { + this._abortController.abort(); + this._abortController = null; + } + + // In case the environment was initialized from a window, we need to remove + // the progress listener. + if (this._win) { + try { + this.webProgress.removeProgressListener(this.listener); + } catch (e) { + // Which may fail in case the window was already destroyed. + } + } + + this._targetActor = null; + this._win = null; + } +} +exports.HighlighterEnvironment = HighlighterEnvironment; + +// This constant object is created to make the calls array more +// readable. Otherwise, linting rules force some array defs to span 4 +// lines instead, which is much harder to parse. +const HIGHLIGHTERS = { + accessible: "devtools/server/actors/highlighters/accessible", + boxModel: "devtools/server/actors/highlighters/box-model", + cssGrid: "devtools/server/actors/highlighters/css-grid", + cssTransform: "devtools/server/actors/highlighters/css-transform", + eyeDropper: "devtools/server/actors/highlighters/eye-dropper", + flexbox: "devtools/server/actors/highlighters/flexbox", + fonts: "devtools/server/actors/highlighters/fonts", + geometryEditor: "devtools/server/actors/highlighters/geometry-editor", + measuringTool: "devtools/server/actors/highlighters/measuring-tool", + pausedDebugger: "devtools/server/actors/highlighters/paused-debugger", + rulers: "devtools/server/actors/highlighters/rulers", + selector: "devtools/server/actors/highlighters/selector", + shapes: "devtools/server/actors/highlighters/shapes", + tabbingOrder: "devtools/server/actors/highlighters/tabbing-order", + viewportSize: "devtools/server/actors/highlighters/viewport-size", +}; + +// Each array in this array is called as register(arr[0], arr[1]). +const registerCalls = [ + ["AccessibleHighlighter", HIGHLIGHTERS.accessible], + ["BoxModelHighlighter", HIGHLIGHTERS.boxModel], + ["CssGridHighlighter", HIGHLIGHTERS.cssGrid], + ["CssTransformHighlighter", HIGHLIGHTERS.cssTransform], + ["EyeDropper", HIGHLIGHTERS.eyeDropper], + ["FlexboxHighlighter", HIGHLIGHTERS.flexbox], + ["FontsHighlighter", HIGHLIGHTERS.fonts], + ["GeometryEditorHighlighter", HIGHLIGHTERS.geometryEditor], + ["MeasuringToolHighlighter", HIGHLIGHTERS.measuringTool], + ["PausedDebuggerOverlay", HIGHLIGHTERS.pausedDebugger], + ["RulersHighlighter", HIGHLIGHTERS.rulers], + ["SelectorHighlighter", HIGHLIGHTERS.selector], + ["ShapesHighlighter", HIGHLIGHTERS.shapes], + ["TabbingOrderHighlighter", HIGHLIGHTERS.tabbingOrder], + ["ViewportSizeHighlighter", HIGHLIGHTERS.viewportSize], +]; + +// Register each highlighter above. +registerCalls.forEach(arr => { + registerHighlighter(arr[0], arr[1]); +}); diff --git a/devtools/server/actors/highlighters/accessible.js b/devtools/server/actors/highlighters/accessible.js new file mode 100644 index 0000000000..71124239f2 --- /dev/null +++ b/devtools/server/actors/highlighters/accessible.js @@ -0,0 +1,395 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const { + AutoRefreshHighlighter, +} = require("resource://devtools/server/actors/highlighters/auto-refresh.js"); +const { + CanvasFrameAnonymousContentHelper, + isNodeValid, +} = require("resource://devtools/server/actors/highlighters/utils/markup.js"); +const { + TEXT_NODE, + DOCUMENT_NODE, +} = require("resource://devtools/shared/dom-node-constants.js"); +const { + getCurrentZoom, + setIgnoreLayoutChanges, +} = require("resource://devtools/shared/layout/utils.js"); + +loader.lazyRequireGetter( + this, + ["getBounds", "getBoundsXUL", "Infobar"], + "resource://devtools/server/actors/highlighters/utils/accessibility.js", + true +); + +/** + * The AccessibleHighlighter draws the bounds of an accessible object. + * + * Usage example: + * + * let h = new AccessibleHighlighter(env); + * h.show(node, { x, y, w, h, [duration] }); + * h.hide(); + * h.destroy(); + * + * @param {Number} options.x + * X coordinate of the top left corner of the accessible object + * @param {Number} options.y + * Y coordinate of the top left corner of the accessible object + * @param {Number} options.w + * Width of the the accessible object + * @param {Number} options.h + * Height of the the accessible object + * @param {Number} options.duration + * Duration of time that the highlighter should be shown. + * @param {String|null} options.name + * Name of the the accessible object + * @param {String} options.role + * Role of the the accessible object + * + * Structure: + * <div class="highlighter-container" aria-hidden="true"> + * <div class="accessible-root"> + * <svg class="accessible-elements" hidden="true"> + * <path class="accessible-bounds" points="..." /> + * </svg> + * <div class="accessible-infobar-container"> + * <div class="accessible-infobar"> + * <div class="accessible-infobar-text"> + * <span class="accessible-infobar-role">Accessible Role</span> + * <span class="accessible-infobar-name">Accessible Name</span> + * </div> + * </div> + * </div> + * </div> + * </div> + */ +class AccessibleHighlighter extends AutoRefreshHighlighter { + constructor(highlighterEnv) { + super(highlighterEnv); + this.ID_CLASS_PREFIX = "accessible-"; + this.accessibleInfobar = new Infobar(this); + + this.markup = new CanvasFrameAnonymousContentHelper( + this.highlighterEnv, + this._buildMarkup.bind(this) + ); + this.isReady = this.markup.initialize(); + + this.onPageHide = this.onPageHide.bind(this); + this.onWillNavigate = this.onWillNavigate.bind(this); + + this.highlighterEnv.on("will-navigate", this.onWillNavigate); + + this.pageListenerTarget = highlighterEnv.pageListenerTarget; + this.pageListenerTarget.addEventListener("pagehide", this.onPageHide); + } + + /** + * Static getter that indicates that AccessibleHighlighter supports + * highlighting in XUL windows. + */ + static get XULSupported() { + return true; + } + + get supportsSimpleHighlighters() { + return true; + } + + /** + * Build highlighter markup. + * + * @return {Object} Container element for the highlighter markup. + */ + _buildMarkup() { + const container = this.markup.createNode({ + attributes: { + class: "highlighter-container", + "aria-hidden": "true", + }, + }); + + const root = this.markup.createNode({ + parent: container, + attributes: { + id: "root", + class: + "root" + + (this.highlighterEnv.useSimpleHighlightersForReducedMotion + ? " use-simple-highlighters" + : ""), + }, + prefix: this.ID_CLASS_PREFIX, + }); + + // Build the SVG element. + const svg = this.markup.createSVGNode({ + nodeType: "svg", + parent: root, + attributes: { + id: "elements", + width: "100%", + height: "100%", + hidden: "true", + }, + prefix: this.ID_CLASS_PREFIX, + }); + + this.markup.createSVGNode({ + nodeType: "path", + parent: svg, + attributes: { + class: "bounds", + id: "bounds", + }, + prefix: this.ID_CLASS_PREFIX, + }); + + // Build the accessible's infobar markup. + this.accessibleInfobar.buildMarkup(root); + + return container; + } + + /** + * Destroy the nodes. Remove listeners. + */ + destroy() { + if (this._highlightTimer) { + clearTimeout(this._highlightTimer); + this._highlightTimer = null; + } + + this.highlighterEnv.off("will-navigate", this.onWillNavigate); + this.pageListenerTarget.removeEventListener("pagehide", this.onPageHide); + this.pageListenerTarget = null; + + AutoRefreshHighlighter.prototype.destroy.call(this); + + this.accessibleInfobar.destroy(); + this.accessibleInfobar = null; + this.markup.destroy(); + } + + /** + * Find an element in highlighter markup. + * + * @param {String} id + * Highlighter markup elemet id attribute. + * @return {DOMNode} Element in the highlighter markup. + */ + getElement(id) { + return this.markup.getElement(this.ID_CLASS_PREFIX + id); + } + + /** + * Check if node is a valid element, document or text node. + * + * @override AutoRefreshHighlighter.prototype._isNodeValid + * @param {DOMNode} node + * The node to highlight. + * @return {Boolean} whether or not node is valid. + */ + _isNodeValid(node) { + return ( + super._isNodeValid(node) || + isNodeValid(node, TEXT_NODE) || + isNodeValid(node, DOCUMENT_NODE) + ); + } + + /** + * Show the highlighter on a given accessible. + * + * @return {Boolean} True if accessible is highlighted, false otherwise. + */ + _show() { + if (this._highlightTimer) { + clearTimeout(this._highlightTimer); + this._highlightTimer = null; + } + + const { duration } = this.options; + const shown = this._update(); + if (shown) { + this.emit("highlighter-event", { options: this.options, type: "shown" }); + if (duration) { + this._highlightTimer = setTimeout(() => { + this.hide(); + }, duration); + } + } + + return shown; + } + + /** + * Update and show accessible bounds for a current accessible. + * + * @return {Boolean} True if accessible is highlighted, false otherwise. + */ + _update() { + let shown = false; + setIgnoreLayoutChanges(true); + + if (this._updateAccessibleBounds()) { + this._showAccessibleBounds(); + + this.accessibleInfobar.show(); + + shown = true; + } else { + // Nothing to highlight (0px rectangle like a <script> tag for instance) + this.hide(); + } + + setIgnoreLayoutChanges( + false, + this.highlighterEnv.window.document.documentElement + ); + + return shown; + } + + /** + * Hide the highlighter. + */ + _hide() { + setIgnoreLayoutChanges(true); + this._hideAccessibleBounds(); + this.accessibleInfobar.hide(); + setIgnoreLayoutChanges( + false, + this.highlighterEnv.window.document.documentElement + ); + } + + /** + * Public API method to temporarily hide accessible bounds for things like + * color contrast calculation. + */ + hideAccessibleBounds() { + if (this.getElement("elements").hasAttribute("hidden")) { + return; + } + + this._hideAccessibleBounds(); + this._shouldRestoreBoundsVisibility = true; + } + + /** + * Public API method to show accessible bounds in case they were temporarily + * hidden. + */ + showAccessibleBounds() { + if (this._shouldRestoreBoundsVisibility) { + this._showAccessibleBounds(); + } + } + + /** + * Hide the accessible bounds container. + */ + _hideAccessibleBounds() { + this._shouldRestoreBoundsVisibility = null; + setIgnoreLayoutChanges(true); + this.getElement("elements").setAttribute("hidden", "true"); + setIgnoreLayoutChanges( + false, + this.highlighterEnv.window.document.documentElement + ); + } + + /** + * Show the accessible bounds container. + */ + _showAccessibleBounds() { + this._shouldRestoreBoundsVisibility = null; + if (!this.currentNode || !this.highlighterEnv.window) { + return; + } + + setIgnoreLayoutChanges(true); + this.getElement("elements").removeAttribute("hidden"); + setIgnoreLayoutChanges( + false, + this.highlighterEnv.window.document.documentElement + ); + } + + /** + * Get current accessible bounds. + * + * @return {Object|null} Returns, if available, positioning and bounds + * information for the accessible object. + */ + get _bounds() { + let { win, options } = this; + let getBoundsFn = getBounds; + if (this.options.isXUL) { + // Zoom level for the top level browser window does not change and only + // inner frames do. So we need to get the zoom level of the current node's + // parent window. + let zoom = getCurrentZoom(this.currentNode); + zoom *= zoom; + options = { ...options, zoom }; + getBoundsFn = getBoundsXUL; + win = this.win.parent.ownerGlobal; + } + + return getBoundsFn(win, options); + } + + /** + * Update accessible bounds for a current accessible. Re-draw highlighter + * markup. + * + * @return {Boolean} True if accessible is highlighted, false otherwise. + */ + _updateAccessibleBounds() { + const bounds = this._bounds; + if (!bounds) { + this._hide(); + return false; + } + + const boundsEl = this.getElement("bounds"); + const { left, right, top, bottom } = bounds; + const path = `M${left},${top} L${right},${top} L${right},${bottom} L${left},${bottom} L${left},${top}`; + boundsEl.setAttribute("d", path); + + // Un-zoom the root wrapper if the page was zoomed. + const rootId = this.ID_CLASS_PREFIX + "elements"; + this.markup.scaleRootElement(this.currentNode, rootId); + + return true; + } + + /** + * Hide highlighter on page hide. + */ + onPageHide({ target }) { + // If a pagehide event is triggered for current window's highlighter, hide + // the highlighter. + if (target.defaultView === this.win) { + this.hide(); + } + } + + /** + * Hide highlighter on navigation. + */ + onWillNavigate({ isTopLevel }) { + if (isTopLevel) { + this.hide(); + } + } +} + +exports.AccessibleHighlighter = AccessibleHighlighter; diff --git a/devtools/server/actors/highlighters/auto-refresh.js b/devtools/server/actors/highlighters/auto-refresh.js new file mode 100644 index 0000000000..35e870e795 --- /dev/null +++ b/devtools/server/actors/highlighters/auto-refresh.js @@ -0,0 +1,368 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const EventEmitter = require("resource://devtools/shared/event-emitter.js"); +const { + isNodeValid, +} = require("resource://devtools/server/actors/highlighters/utils/markup.js"); +const { + getAdjustedQuads, + getWindowDimensions, +} = require("resource://devtools/shared/layout/utils.js"); + +// Note that the order of items in this array is important because it is used +// for drawing the BoxModelHighlighter's path elements correctly. +const BOX_MODEL_REGIONS = ["margin", "border", "padding", "content"]; +const QUADS_PROPS = ["p1", "p2", "p3", "p4"]; + +function arePointsDifferent(pointA, pointB) { + return ( + Math.abs(pointA.x - pointB.x) >= 0.5 || + Math.abs(pointA.y - pointB.y) >= 0.5 || + Math.abs(pointA.w - pointB.w) >= 0.5 + ); +} + +function areQuadsDifferent(oldQuads, newQuads) { + for (const region of BOX_MODEL_REGIONS) { + const { length } = oldQuads[region]; + + if (length !== newQuads[region].length) { + return true; + } + + for (let i = 0; i < length; i++) { + for (const prop of QUADS_PROPS) { + const oldPoint = oldQuads[region][i][prop]; + const newPoint = newQuads[region][i][prop]; + + if (arePointsDifferent(oldPoint, newPoint)) { + return true; + } + } + } + } + + return false; +} + +/** + * Base class for auto-refresh-on-change highlighters. Sub classes will have a + * chance to update whenever the current node's geometry changes. + * + * Sub classes must implement the following methods: + * _show: called when the highlighter should be shown, + * _hide: called when the highlighter should be hidden, + * _update: called while the highlighter is shown and the geometry of the + * current node changes. + * + * Sub classes will have access to the following properties: + * - this.currentNode: the node to be shown + * - this.currentQuads: all of the node's box model region quads + * - this.win: the current window + * + * Emits the following events: + * - shown + * - hidden + * - updated + */ +class AutoRefreshHighlighter extends EventEmitter { + constructor(highlighterEnv) { + super(); + + this.highlighterEnv = highlighterEnv; + + this._updateSimpleHighlighters = this._updateSimpleHighlighters.bind(this); + this.highlighterEnv.on( + "use-simple-highlighters-updated", + this._updateSimpleHighlighters + ); + + this.currentNode = null; + this.currentQuads = {}; + + this._winDimensions = getWindowDimensions(this.win); + this._scroll = { x: this.win.pageXOffset, y: this.win.pageYOffset }; + + this.update = this.update.bind(this); + } + + _ignoreZoom = false; + _ignoreScroll = false; + + /** + * Window corresponding to the current highlighterEnv. + */ + get win() { + if (!this.highlighterEnv) { + return null; + } + return this.highlighterEnv.window; + } + + /* Window containing the target content. */ + get contentWindow() { + return this.win; + } + + get supportsSimpleHighlighters() { + return false; + } + + /** + * Show the highlighter on a given node + * @param {DOMNode} node + * @param {Object} options + * Object used for passing options + */ + show(node, options = {}) { + const isSameNode = node === this.currentNode; + const isSameOptions = this._isSameOptions(options); + + if (!this._isNodeValid(node) || (isSameNode && isSameOptions)) { + return false; + } + + this.options = options; + + this._stopRefreshLoop(); + this.currentNode = node; + + // For offset-path, the highlighter needs to be computed from the containing block + // of the node, not the node itself. + this.useContainingBlock = this.options.mode === "cssOffsetPath"; + this.drawingNode = this.useContainingBlock + ? InspectorUtils.containingBlockOf(this.currentNode) + : this.currentNode; + + this._updateAdjustedQuads(); + this._startRefreshLoop(); + + const shown = this._show(); + if (shown) { + this.emit("shown"); + } + return shown; + } + + /** + * Hide the highlighter + */ + hide() { + if (!this.currentNode || !this.highlighterEnv.window) { + return; + } + + this._hide(); + this._stopRefreshLoop(); + this.currentNode = null; + this.currentQuads = {}; + this.options = null; + + this.emit("hidden"); + } + + /** + * Whether the current node is valid for this highlighter type. + * This is implemented by default to check if the node is an element node. Highlighter + * sub-classes should override this method if they want to highlight other node types. + * @param {DOMNode} node + * @return {Boolean} + */ + _isNodeValid(node) { + return isNodeValid(node); + } + + /** + * Are the provided options the same as the currently stored options? + * Returns false if there are no options stored currently. + */ + _isSameOptions(options) { + if (!this.options) { + return false; + } + + const keys = Object.keys(options); + + if (keys.length !== Object.keys(this.options).length) { + return false; + } + + for (const key of keys) { + if (this.options[key] !== options[key]) { + return false; + } + } + + return true; + } + + /** + * Update the stored box quads by reading the current node's box quads. + */ + _updateAdjustedQuads() { + this.currentQuads = {}; + + // If we need to use the containing block, and if it is the <html> element, + // we need to use the viewport quads. + const useViewport = + this.useContainingBlock && + this.drawingNode === this.currentNode.ownerDocument.documentElement; + const node = useViewport + ? this.drawingNode.ownerDocument + : this.drawingNode; + + for (const region of BOX_MODEL_REGIONS) { + this.currentQuads[region] = getAdjustedQuads( + this.contentWindow, + node, + region, + { ignoreScroll: this._ignoreScroll, ignoreZoom: this._ignoreZoom } + ); + } + } + + /** + * Update the knowledge we have of the current node's boxquads and return true + * if any of the points x/y or bounds have change since. + * @return {Boolean} + */ + _hasMoved() { + const oldQuads = this.currentQuads; + this._updateAdjustedQuads(); + + return areQuadsDifferent(oldQuads, this.currentQuads); + } + + /** + * Update the knowledge we have of the current window's scrolling offset, both + * horizontal and vertical, and return `true` if they have changed since. + * @return {Boolean} + */ + _hasWindowScrolled() { + if (!this.win) { + return false; + } + + const { pageXOffset, pageYOffset } = this.win; + const hasChanged = + this._scroll.x !== pageXOffset || this._scroll.y !== pageYOffset; + + this._scroll = { x: pageXOffset, y: pageYOffset }; + + return hasChanged; + } + + /** + * Update the knowledge we have of the current window's dimensions and return `true` + * if they have changed since. + * @return {Boolean} + */ + _haveWindowDimensionsChanged() { + const { width, height } = getWindowDimensions(this.win); + const haveChanged = + this._winDimensions.width !== width || + this._winDimensions.height !== height; + + this._winDimensions = { width, height }; + return haveChanged; + } + + /** + * Update the highlighter if the node has moved since the last update. + */ + update() { + if ( + !this._isNodeValid(this.currentNode) || + (!this._hasMoved() && !this._haveWindowDimensionsChanged()) + ) { + // At this point we're not calling the `_update` method. However, if the window has + // scrolled, we want to invoke `_scrollUpdate`. + if (this._hasWindowScrolled()) { + this._scrollUpdate(); + } + + return; + } + + this._update(); + this.emit("updated"); + } + + _show() { + // To be implemented by sub classes + // When called, sub classes should actually show the highlighter for + // this.currentNode, potentially using options in this.options + throw new Error("Custom highlighter class had to implement _show method"); + } + + _update() { + // To be implemented by sub classes + // When called, sub classes should update the highlighter shown for + // this.currentNode + // This is called as a result of a page zoom or repaint + throw new Error("Custom highlighter class had to implement _update method"); + } + + _scrollUpdate() { + // Can be implemented by sub classes + // When called, sub classes can upate the highlighter shown for + // this.currentNode + // This is called as a result of a page scroll + } + + _hide() { + // To be implemented by sub classes + // When called, sub classes should actually hide the highlighter + throw new Error("Custom highlighter class had to implement _hide method"); + } + + _startRefreshLoop() { + const win = this.currentNode.ownerGlobal; + this.rafID = win.requestAnimationFrame(this._startRefreshLoop.bind(this)); + this.rafWin = win; + this.update(); + } + + _stopRefreshLoop() { + if (this.rafID && !Cu.isDeadWrapper(this.rafWin)) { + this.rafWin.cancelAnimationFrame(this.rafID); + } + this.rafID = this.rafWin = null; + } + + _updateSimpleHighlighters() { + if (!this.supportsSimpleHighlighters) { + return; + } + + const root = this.getElement("root"); + if (!root) { + // Highlighters which support simple highlighters are expected to use a + // root element with the id "root". + return; + } + + // Add/remove the `user-simple-highlighters` class based on the current + // toolbox configuration. + root.classList.toggle( + "use-simple-highlighters", + this.highlighterEnv.useSimpleHighlightersForReducedMotion + ); + } + + destroy() { + this.hide(); + + this.highlighterEnv.off( + "use-simple-highlighters-updated", + this._updateSimpleHighlighters + ); + this.highlighterEnv = null; + this.currentNode = null; + } +} +exports.AutoRefreshHighlighter = AutoRefreshHighlighter; diff --git a/devtools/server/actors/highlighters/box-model.js b/devtools/server/actors/highlighters/box-model.js new file mode 100644 index 0000000000..9368f2f292 --- /dev/null +++ b/devtools/server/actors/highlighters/box-model.js @@ -0,0 +1,892 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const { + AutoRefreshHighlighter, +} = require("resource://devtools/server/actors/highlighters/auto-refresh.js"); +const { + CanvasFrameAnonymousContentHelper, + getBindingElementAndPseudo, + hasPseudoClassLock, + isNodeValid, + moveInfobar, +} = require("resource://devtools/server/actors/highlighters/utils/markup.js"); +const { + PSEUDO_CLASSES, +} = require("resource://devtools/shared/css/constants.js"); +const { + getCurrentZoom, + setIgnoreLayoutChanges, +} = require("resource://devtools/shared/layout/utils.js"); +const { + getNodeDisplayName, + getNodeGridFlexType, +} = require("resource://devtools/server/actors/inspector/utils.js"); +const nodeConstants = require("resource://devtools/shared/dom-node-constants.js"); +loader.lazyGetter(this, "HighlightersBundle", () => { + return new Localization(["devtools/shared/highlighters.ftl"], true); +}); + +// Note that the order of items in this array is important because it is used +// for drawing the BoxModelHighlighter's path elements correctly. +const BOX_MODEL_REGIONS = ["margin", "border", "padding", "content"]; +const BOX_MODEL_SIDES = ["top", "right", "bottom", "left"]; +// Width of boxmodelhighlighter guides +const GUIDE_STROKE_WIDTH = 1; + +/** + * The BoxModelHighlighter draws the box model regions on top of a node. + * If the node is a block box, then each region will be displayed as 1 polygon. + * If the node is an inline box though, each region may be represented by 1 or + * more polygons, depending on how many line boxes the inline element has. + * + * Usage example: + * + * let h = new BoxModelHighlighter(env); + * h.show(node, options); + * h.hide(); + * h.destroy(); + * + * @param {String} options.region + * Specifies the region that the guides should outline: + * "content" (default), "padding", "border" or "margin". + * @param {Boolean} options.hideGuides + * Defaults to false + * @param {Boolean} options.hideInfoBar + * Defaults to false + * @param {String} options.showOnly + * If set, only this region will be highlighted. Use with onlyRegionArea + * to only highlight the area of the region: + * "content", "padding", "border" or "margin" + * @param {Boolean} options.onlyRegionArea + * This can be set to true to make each region's box only highlight the + * area of the corresponding region rather than the area of nested + * regions too. This is useful when used with showOnly. + * + * Structure: + * <div class="highlighter-container" aria-hidden="true"> + * <div class="box-model-root"> + * <svg class="box-model-elements" hidden="true"> + * <g class="box-model-regions"> + * <path class="box-model-margin" points="..." /> + * <path class="box-model-border" points="..." /> + * <path class="box-model-padding" points="..." /> + * <path class="box-model-content" points="..." /> + * </g> + * <line class="box-model-guide-top" x1="..." y1="..." x2="..." y2="..." /> + * <line class="box-model-guide-right" x1="..." y1="..." x2="..." y2="..." /> + * <line class="box-model-guide-bottom" x1="..." y1="..." x2="..." y2="..." /> + * <line class="box-model-guide-left" x1="..." y1="..." x2="..." y2="..." /> + * </svg> + * <div class="box-model-infobar-container"> + * <div class="box-model-infobar-arrow highlighter-infobar-arrow-top" /> + * <div class="box-model-infobar"> + * <div class="box-model-infobar-text" align="center"> + * <span class="box-model-infobar-tagname">Node name</span> + * <span class="box-model-infobar-id">Node id</span> + * <span class="box-model-infobar-classes">.someClass</span> + * <span class="box-model-infobar-pseudo-classes">:hover</span> + * <span class="box-model-infobar-grid-type">Grid Type</span> + * <span class="box-model-infobar-flex-type">Flex Type</span> + * </div> + * </div> + * <div class="box-model-infobar-arrow box-model-infobar-arrow-bottom"/> + * </div> + * </div> + * </div> + */ +class BoxModelHighlighter extends AutoRefreshHighlighter { + constructor(highlighterEnv) { + super(highlighterEnv); + + this.ID_CLASS_PREFIX = "box-model-"; + this.markup = new CanvasFrameAnonymousContentHelper( + this.highlighterEnv, + this._buildMarkup.bind(this) + ); + this.isReady = this.markup.initialize(); + + this.onPageHide = this.onPageHide.bind(this); + this.onWillNavigate = this.onWillNavigate.bind(this); + + this.highlighterEnv.on("will-navigate", this.onWillNavigate); + + const { pageListenerTarget } = highlighterEnv; + pageListenerTarget.addEventListener("pagehide", this.onPageHide); + } + + /** + * Static getter that indicates that BoxModelHighlighter supports + * highlighting in XUL windows. + */ + static get XULSupported() { + return true; + } + + get supportsSimpleHighlighters() { + return true; + } + + _buildMarkup() { + const highlighterContainer = + this.markup.anonymousContentDocument.createElement("div"); + highlighterContainer.className = "highlighter-container box-model"; + + this.highlighterContainer = highlighterContainer; + // We need a better solution for how to handle the highlighter from the + // accessibility standpoint. For now, in order to avoid displaying it in the + // accessibility tree lets hide it altogether. See bug 1598667 for more + // context. + highlighterContainer.setAttribute("aria-hidden", "true"); + + // Build the root wrapper, used to adapt to the page zoom. + const rootWrapper = this.markup.createNode({ + parent: highlighterContainer, + attributes: { + id: "root", + class: + "root" + + (this.highlighterEnv.useSimpleHighlightersForReducedMotion + ? " use-simple-highlighters" + : ""), + role: "presentation", + }, + prefix: this.ID_CLASS_PREFIX, + }); + + // Building the SVG element with its polygons and lines + + const svg = this.markup.createSVGNode({ + nodeType: "svg", + parent: rootWrapper, + attributes: { + id: "elements", + width: "100%", + height: "100%", + hidden: "true", + role: "presentation", + }, + prefix: this.ID_CLASS_PREFIX, + }); + + const regions = this.markup.createSVGNode({ + nodeType: "g", + parent: svg, + attributes: { + class: "regions", + role: "presentation", + }, + prefix: this.ID_CLASS_PREFIX, + }); + + for (const region of BOX_MODEL_REGIONS) { + this.markup.createSVGNode({ + nodeType: "path", + parent: regions, + attributes: { + class: region, + id: region, + role: "presentation", + }, + prefix: this.ID_CLASS_PREFIX, + }); + } + + for (const side of BOX_MODEL_SIDES) { + this.markup.createSVGNode({ + nodeType: "line", + parent: svg, + attributes: { + class: "guide-" + side, + id: "guide-" + side, + "stroke-width": GUIDE_STROKE_WIDTH, + role: "presentation", + }, + prefix: this.ID_CLASS_PREFIX, + }); + } + + // Building the nodeinfo bar markup + + const infobarContainer = this.markup.createNode({ + parent: rootWrapper, + attributes: { + class: "infobar-container", + id: "infobar-container", + position: "top", + hidden: "true", + }, + prefix: this.ID_CLASS_PREFIX, + }); + + const infobar = this.markup.createNode({ + parent: infobarContainer, + attributes: { + class: "infobar", + }, + prefix: this.ID_CLASS_PREFIX, + }); + + const texthbox = this.markup.createNode({ + parent: infobar, + attributes: { + class: "infobar-text", + }, + prefix: this.ID_CLASS_PREFIX, + }); + this.markup.createNode({ + nodeType: "span", + parent: texthbox, + attributes: { + class: "infobar-tagname", + id: "infobar-tagname", + }, + prefix: this.ID_CLASS_PREFIX, + }); + this.markup.createNode({ + nodeType: "span", + parent: texthbox, + attributes: { + class: "infobar-id", + id: "infobar-id", + }, + prefix: this.ID_CLASS_PREFIX, + }); + this.markup.createNode({ + nodeType: "span", + parent: texthbox, + attributes: { + class: "infobar-classes", + id: "infobar-classes", + }, + prefix: this.ID_CLASS_PREFIX, + }); + this.markup.createNode({ + nodeType: "span", + parent: texthbox, + attributes: { + class: "infobar-pseudo-classes", + id: "infobar-pseudo-classes", + }, + prefix: this.ID_CLASS_PREFIX, + }); + this.markup.createNode({ + nodeType: "span", + parent: texthbox, + attributes: { + class: "infobar-dimensions", + id: "infobar-dimensions", + }, + prefix: this.ID_CLASS_PREFIX, + }); + + this.markup.createNode({ + nodeType: "span", + parent: texthbox, + attributes: { + class: "infobar-grid-type", + id: "infobar-grid-type", + }, + prefix: this.ID_CLASS_PREFIX, + }); + + this.markup.createNode({ + nodeType: "span", + parent: texthbox, + attributes: { + class: "infobar-flex-type", + id: "infobar-flex-type", + }, + prefix: this.ID_CLASS_PREFIX, + }); + + return highlighterContainer; + } + + /** + * Destroy the nodes. Remove listeners. + */ + destroy() { + this.highlighterEnv.off("will-navigate", this.onWillNavigate); + + const { pageListenerTarget } = this.highlighterEnv; + if (pageListenerTarget) { + pageListenerTarget.removeEventListener("pagehide", this.onPageHide); + } + + this.markup.destroy(); + + AutoRefreshHighlighter.prototype.destroy.call(this); + } + + getElement(id) { + return this.markup.getElement(this.ID_CLASS_PREFIX + id); + } + + /** + * Override the AutoRefreshHighlighter's _isNodeValid method to also return true for + * text nodes since these can also be highlighted. + * @param {DOMNode} node + * @return {Boolean} + */ + _isNodeValid(node) { + return ( + node && (isNodeValid(node) || isNodeValid(node, nodeConstants.TEXT_NODE)) + ); + } + + /** + * Show the highlighter on a given node + */ + _show() { + if (!BOX_MODEL_REGIONS.includes(this.options.region)) { + this.options.region = "content"; + } + + const shown = this._update(); + this._trackMutations(); + return shown; + } + + /** + * Track the current node markup mutations so that the node info bar can be + * updated to reflects the node's attributes + */ + _trackMutations() { + if (isNodeValid(this.currentNode)) { + const win = this.currentNode.ownerGlobal; + this.currentNodeObserver = new win.MutationObserver(this.update); + this.currentNodeObserver.observe(this.currentNode, { attributes: true }); + } + } + + _untrackMutations() { + if (isNodeValid(this.currentNode) && this.currentNodeObserver) { + this.currentNodeObserver.disconnect(); + this.currentNodeObserver = null; + } + } + + /** + * Update the highlighter on the current highlighted node (the one that was + * passed as an argument to show(node)). + * Should be called whenever node size or attributes change + */ + _update() { + const node = this.currentNode; + let shown = false; + setIgnoreLayoutChanges(true); + + if (this._updateBoxModel()) { + // Show the infobar only if configured to do so and the node is an element or a text + // node. + if ( + !this.options.hideInfoBar && + (node.nodeType === node.ELEMENT_NODE || + node.nodeType === node.TEXT_NODE) + ) { + this._showInfobar(); + } else { + this._hideInfobar(); + } + this._updateSimpleHighlighters(); + this._showBoxModel(); + + shown = true; + } else { + // Nothing to highlight (0px rectangle like a <script> tag for instance) + this._hide(); + } + + setIgnoreLayoutChanges( + false, + this.highlighterEnv.window.document.documentElement + ); + + return shown; + } + + _scrollUpdate() { + this._moveInfobar(); + } + + /** + * Hide the highlighter, the outline and the infobar. + */ + _hide() { + setIgnoreLayoutChanges(true); + + this._untrackMutations(); + this._hideBoxModel(); + this._hideInfobar(); + + setIgnoreLayoutChanges( + false, + this.highlighterEnv.window.document.documentElement + ); + } + + /** + * Hide the infobar + */ + _hideInfobar() { + this.getElement("infobar-container").setAttribute("hidden", "true"); + } + + /** + * Show the infobar + */ + _showInfobar() { + this.getElement("infobar-container").removeAttribute("hidden"); + this._updateInfobar(); + } + + /** + * Hide the box model + */ + _hideBoxModel() { + this.getElement("elements").setAttribute("hidden", "true"); + } + + /** + * Show the box model + */ + _showBoxModel() { + this.getElement("elements").removeAttribute("hidden"); + } + + /** + * Calculate an outer quad based on the quads returned by getAdjustedQuads. + * The BoxModelHighlighter may highlight more than one boxes, so in this case + * create a new quad that "contains" all of these quads. + * This is useful to position the guides and infobar. + * This may happen if the BoxModelHighlighter is used to highlight an inline + * element that spans line breaks. + * @param {String} region The box-model region to get the outer quad for. + * @return {Object} A quad-like object {p1,p2,p3,p4,bounds} + */ + _getOuterQuad(region) { + const quads = this.currentQuads[region]; + if (!quads || !quads.length) { + return null; + } + + const quad = { + p1: { x: Infinity, y: Infinity }, + p2: { x: -Infinity, y: Infinity }, + p3: { x: -Infinity, y: -Infinity }, + p4: { x: Infinity, y: -Infinity }, + bounds: { + bottom: -Infinity, + height: 0, + left: Infinity, + right: -Infinity, + top: Infinity, + width: 0, + x: 0, + y: 0, + }, + }; + + for (const q of quads) { + quad.p1.x = Math.min(quad.p1.x, q.p1.x); + quad.p1.y = Math.min(quad.p1.y, q.p1.y); + quad.p2.x = Math.max(quad.p2.x, q.p2.x); + quad.p2.y = Math.min(quad.p2.y, q.p2.y); + quad.p3.x = Math.max(quad.p3.x, q.p3.x); + quad.p3.y = Math.max(quad.p3.y, q.p3.y); + quad.p4.x = Math.min(quad.p4.x, q.p4.x); + quad.p4.y = Math.max(quad.p4.y, q.p4.y); + + quad.bounds.bottom = Math.max(quad.bounds.bottom, q.bounds.bottom); + quad.bounds.top = Math.min(quad.bounds.top, q.bounds.top); + quad.bounds.left = Math.min(quad.bounds.left, q.bounds.left); + quad.bounds.right = Math.max(quad.bounds.right, q.bounds.right); + } + quad.bounds.x = quad.bounds.left; + quad.bounds.y = quad.bounds.top; + quad.bounds.width = quad.bounds.right - quad.bounds.left; + quad.bounds.height = quad.bounds.bottom - quad.bounds.top; + + return quad; + } + + /** + * Update the box model as per the current node. + * + * @return {boolean} + * True if the current node has a box model to be highlighted + */ + _updateBoxModel() { + const options = this.options; + options.region = options.region || "content"; + + if (!this._nodeNeedsHighlighting()) { + this._hideBoxModel(); + return false; + } + + for (let i = 0; i < BOX_MODEL_REGIONS.length; i++) { + const boxType = BOX_MODEL_REGIONS[i]; + const nextBoxType = BOX_MODEL_REGIONS[i + 1]; + const box = this.getElement(boxType); + + // Highlight all quads for this region by setting the "d" attribute of the + // corresponding <path>. + const path = []; + for (let j = 0; j < this.currentQuads[boxType].length; j++) { + const boxQuad = this.currentQuads[boxType][j]; + const nextBoxQuad = this.currentQuads[nextBoxType] + ? this.currentQuads[nextBoxType][j] + : null; + path.push(this._getBoxPathCoordinates(boxQuad, nextBoxQuad)); + } + + box.setAttribute("d", path.join(" ")); + box.removeAttribute("faded"); + + // If showOnly is defined, either hide the other regions, or fade them out + // if onlyRegionArea is set too. + if (options.showOnly && options.showOnly !== boxType) { + if (options.onlyRegionArea) { + box.setAttribute("faded", "true"); + } else { + box.removeAttribute("d"); + } + } + + if (boxType === options.region && !options.hideGuides) { + this._showGuides(boxType); + } else if (options.hideGuides) { + this._hideGuides(); + } + } + + // Un-zoom the root wrapper if the page was zoomed. + const rootId = this.ID_CLASS_PREFIX + "elements"; + this.markup.scaleRootElement(this.currentNode, rootId); + + return true; + } + + _getBoxPathCoordinates(boxQuad, nextBoxQuad) { + const { p1, p2, p3, p4 } = boxQuad; + + let path; + if (!nextBoxQuad || !this.options.onlyRegionArea) { + // If this is the content box (inner-most box) or if we're not being asked + // to highlight only region areas, then draw a simple rectangle. + path = + "M" + + p1.x + + "," + + p1.y + + " " + + "L" + + p2.x + + "," + + p2.y + + " " + + "L" + + p3.x + + "," + + p3.y + + " " + + "L" + + p4.x + + "," + + p4.y + + " " + + "L" + + p1.x + + "," + + p1.y; + } else { + // Otherwise, just draw the region itself, not a filled rectangle. + const { p1: np1, p2: np2, p3: np3, p4: np4 } = nextBoxQuad; + path = + "M" + + p1.x + + "," + + p1.y + + " " + + "L" + + p2.x + + "," + + p2.y + + " " + + "L" + + p3.x + + "," + + p3.y + + " " + + "L" + + p4.x + + "," + + p4.y + + " " + + "L" + + p1.x + + "," + + p1.y + + " " + + "L" + + np1.x + + "," + + np1.y + + " " + + "L" + + np4.x + + "," + + np4.y + + " " + + "L" + + np3.x + + "," + + np3.y + + " " + + "L" + + np2.x + + "," + + np2.y + + " " + + "L" + + np1.x + + "," + + np1.y; + } + + return path; + } + + /** + * Can the current node be highlighted? Does it have quads. + * @return {Boolean} + */ + _nodeNeedsHighlighting() { + return ( + this.currentQuads.margin.length || + this.currentQuads.border.length || + this.currentQuads.padding.length || + this.currentQuads.content.length + ); + } + + _getOuterBounds() { + for (const region of ["margin", "border", "padding", "content"]) { + const quad = this._getOuterQuad(region); + + if (!quad) { + // Invisible element such as a script tag. + break; + } + + const { bottom, height, left, right, top, width, x, y } = quad.bounds; + + if (width > 0 || height > 0) { + return { bottom, height, left, right, top, width, x, y }; + } + } + + return { + bottom: 0, + height: 0, + left: 0, + right: 0, + top: 0, + width: 0, + x: 0, + y: 0, + }; + } + + /** + * We only want to show guides for horizontal and vertical edges as this helps + * to line them up. This method finds these edges and displays a guide there. + * @param {String} region The region around which the guides should be shown. + */ + _showGuides(region) { + const quad = this._getOuterQuad(region); + + if (!quad) { + // Invisible element such as a script tag. + return; + } + + const { p1, p2, p3, p4 } = quad; + + const allX = [p1.x, p2.x, p3.x, p4.x].sort((a, b) => a - b); + const allY = [p1.y, p2.y, p3.y, p4.y].sort((a, b) => a - b); + const toShowX = []; + const toShowY = []; + + for (const arr of [allX, allY]) { + for (let i = 0; i < arr.length; i++) { + const val = arr[i]; + + if (i !== arr.lastIndexOf(val)) { + if (arr === allX) { + toShowX.push(val); + } else { + toShowY.push(val); + } + arr.splice(arr.lastIndexOf(val), 1); + } + } + } + + // Move guide into place or hide it if no valid co-ordinate was found. + this._updateGuide("top", Math.round(toShowY[0])); + this._updateGuide("right", Math.round(toShowX[1]) - 1); + this._updateGuide("bottom", Math.round(toShowY[1]) - 1); + this._updateGuide("left", Math.round(toShowX[0])); + } + + _hideGuides() { + for (const side of BOX_MODEL_SIDES) { + this.getElement("guide-" + side).setAttribute("hidden", "true"); + } + } + + /** + * Move a guide to the appropriate position and display it. If no point is + * passed then the guide is hidden. + * + * @param {String} side + * The guide to update + * @param {Integer} point + * x or y co-ordinate. If this is undefined we hide the guide. + */ + _updateGuide(side, point) { + const guide = this.getElement("guide-" + side); + + if (!point || point <= 0) { + guide.setAttribute("hidden", "true"); + return false; + } + + if (side === "top" || side === "bottom") { + guide.setAttribute("x1", "0"); + guide.setAttribute("y1", point + ""); + guide.setAttribute("x2", "100%"); + guide.setAttribute("y2", point + ""); + } else { + guide.setAttribute("x1", point + ""); + guide.setAttribute("y1", "0"); + guide.setAttribute("x2", point + ""); + guide.setAttribute("y2", "100%"); + } + + guide.removeAttribute("hidden"); + + return true; + } + + /** + * Update node information (displayName#id.class) + */ + _updateInfobar() { + if (!this.currentNode) { + return; + } + + const { bindingElement: node, pseudo } = getBindingElementAndPseudo( + this.currentNode + ); + + // Update the tag, id, classes, pseudo-classes and dimensions + const displayName = getNodeDisplayName(node); + + const id = node.id ? "#" + node.id : ""; + + const classList = (node.classList || []).length + ? "." + [...node.classList].join(".") + : ""; + + let pseudos = this._getPseudoClasses(node).join(""); + if (pseudo) { + pseudos += pseudo; + } + + // We want to display the original `width` and `height`, instead of the ones affected + // by any zoom. Since the infobar can be displayed also for text nodes, we can't + // access the computed style for that, and this is why we recalculate them here. + const zoom = getCurrentZoom(this.win); + const quad = this._getOuterQuad("border"); + + if (!quad) { + return; + } + + const { width, height } = quad.bounds; + const dim = + parseFloat((width / zoom).toPrecision(6)) + + " \u00D7 " + + parseFloat((height / zoom).toPrecision(6)); + + const { grid: gridType, flex: flexType } = getNodeGridFlexType(node); + const gridLayoutTextType = this._getLayoutTextType("gridtype", gridType); + const flexLayoutTextType = this._getLayoutTextType("flextype", flexType); + + this.getElement("infobar-tagname").setTextContent(displayName); + this.getElement("infobar-id").setTextContent(id); + this.getElement("infobar-classes").setTextContent(classList); + this.getElement("infobar-pseudo-classes").setTextContent(pseudos); + this.getElement("infobar-dimensions").setTextContent(dim); + this.getElement("infobar-grid-type").setTextContent(gridLayoutTextType); + this.getElement("infobar-flex-type").setTextContent(flexLayoutTextType); + + this._moveInfobar(); + } + + _getLayoutTextType(layoutTypeKey, { isContainer, isItem }) { + if (!isContainer && !isItem) { + return ""; + } + if (isContainer && !isItem) { + return HighlightersBundle.formatValueSync(`${layoutTypeKey}-container`); + } + if (!isContainer && isItem) { + return HighlightersBundle.formatValueSync(`${layoutTypeKey}-item`); + } + return HighlightersBundle.formatValueSync(`${layoutTypeKey}-dual`); + } + + _getPseudoClasses(node) { + if (node.nodeType !== nodeConstants.ELEMENT_NODE) { + // hasPseudoClassLock can only be used on Elements. + return []; + } + + return PSEUDO_CLASSES.filter(pseudo => hasPseudoClassLock(node, pseudo)); + } + + /** + * Move the Infobar to the right place in the highlighter. + */ + _moveInfobar() { + const bounds = this._getOuterBounds(); + const container = this.getElement("infobar-container"); + + moveInfobar(container, bounds, this.win); + } + + onPageHide({ target }) { + // If a pagehide event is triggered for current window's highlighter, hide the + // highlighter. + if (target.defaultView === this.win) { + this.hide(); + } + } + + onWillNavigate({ isTopLevel }) { + if (isTopLevel) { + this.hide(); + } + } +} + +exports.BoxModelHighlighter = BoxModelHighlighter; diff --git a/devtools/server/actors/highlighters/css-grid.js b/devtools/server/actors/highlighters/css-grid.js new file mode 100644 index 0000000000..04c612eb02 --- /dev/null +++ b/devtools/server/actors/highlighters/css-grid.js @@ -0,0 +1,1962 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const { + AutoRefreshHighlighter, +} = require("resource://devtools/server/actors/highlighters/auto-refresh.js"); +const { + CANVAS_SIZE, + DEFAULT_COLOR, + drawBubbleRect, + drawLine, + drawRect, + drawRoundedRect, + getBoundsFromPoints, + getCurrentMatrix, + getPathDescriptionFromPoints, + getPointsFromDiagonal, + updateCanvasElement, + updateCanvasPosition, +} = require("resource://devtools/server/actors/highlighters/utils/canvas.js"); +const { + CanvasFrameAnonymousContentHelper, + getComputedStyle, + moveInfobar, +} = require("resource://devtools/server/actors/highlighters/utils/markup.js"); +const { apply } = require("resource://devtools/shared/layout/dom-matrix-2d.js"); +const { + getCurrentZoom, + getDisplayPixelRatio, + getWindowDimensions, + setIgnoreLayoutChanges, +} = require("resource://devtools/shared/layout/utils.js"); +loader.lazyGetter(this, "HighlightersBundle", () => { + return new Localization(["devtools/shared/highlighters.ftl"], true); +}); + +const COLUMNS = "cols"; +const ROWS = "rows"; + +const GRID_FONT_SIZE = 10; +const GRID_FONT_FAMILY = "sans-serif"; +const GRID_AREA_NAME_FONT_SIZE = "20"; + +const GRID_LINES_PROPERTIES = { + edge: { + lineDash: [0, 0], + alpha: 1, + }, + explicit: { + lineDash: [5, 3], + alpha: 0.75, + }, + implicit: { + lineDash: [2, 2], + alpha: 0.5, + }, + areaEdge: { + lineDash: [0, 0], + alpha: 1, + lineWidth: 3, + }, +}; + +const GRID_GAP_PATTERN_WIDTH = 14; // px +const GRID_GAP_PATTERN_HEIGHT = 14; // px +const GRID_GAP_PATTERN_LINE_DASH = [5, 3]; // px +const GRID_GAP_ALPHA = 0.5; + +// This is the minimum distance a line can be to the edge of the document under which we +// push the line number arrow to be inside the grid. This offset is enough to fit the +// entire arrow + a stacked arrow behind it. +const OFFSET_FROM_EDGE = 32; +// This is how much inside the grid we push the arrow. This a factor of the arrow size. +// The goal here is for a row and a column arrow that have both been pushed inside the +// grid, in a corner, not to overlap. +const FLIP_ARROW_INSIDE_FACTOR = 2.5; + +/** + * Given an `edge` of a box, return the name of the edge one move to the right. + */ +function rotateEdgeRight(edge) { + switch (edge) { + case "top": + return "right"; + case "right": + return "bottom"; + case "bottom": + return "left"; + case "left": + return "top"; + default: + return edge; + } +} + +/** + * Given an `edge` of a box, return the name of the edge one move to the left. + */ +function rotateEdgeLeft(edge) { + switch (edge) { + case "top": + return "left"; + case "right": + return "top"; + case "bottom": + return "right"; + case "left": + return "bottom"; + default: + return edge; + } +} + +/** + * Given an `edge` of a box, return the name of the opposite edge. + */ +function reflectEdge(edge) { + switch (edge) { + case "top": + return "bottom"; + case "right": + return "left"; + case "bottom": + return "top"; + case "left": + return "right"; + default: + return edge; + } +} + +/** + * Cached used by `CssGridHighlighter.getGridGapPattern`. + */ +const gCachedGridPattern = new Map(); + +/** + * The CssGridHighlighter is the class that overlays a visual grid on top of + * display:[inline-]grid elements. + * + * Usage example: + * let h = new CssGridHighlighter(env); + * h.show(node, options); + * h.hide(); + * h.destroy(); + * + * @param {String} options.color + * The color that should be used to draw the highlighter for this grid. + * @param {Number} options.globalAlpha + * The alpha (transparency) value that should be used to draw the highlighter for + * this grid. + * @param {Boolean} options.showAllGridAreas + * Shows all the grid area highlights for the current grid if isShown is + * true. + * @param {String} options.showGridArea + * Shows the grid area highlight for the given area name. + * @param {Boolean} options.showGridAreasOverlay + * Displays an overlay of all the grid areas for the current grid + * container if isShown is true. + * @param {Object} options.showGridCell + * An object containing the grid fragment index, row and column numbers + * to the corresponding grid cell to highlight for the current grid. + * @param {Number} options.showGridCell.gridFragmentIndex + * Index of the grid fragment to render the grid cell highlight. + * @param {Number} options.showGridCell.rowNumber + * Row number of the grid cell to highlight. + * @param {Number} options.showGridCell.columnNumber + * Column number of the grid cell to highlight. + * @param {Object} options.showGridLineNames + * An object containing the grid fragment index and line number to the + * corresponding grid line to highlight for the current grid. + * @param {Number} options.showGridLineNames.gridFragmentIndex + * Index of the grid fragment to render the grid line highlight. + * @param {Number} options.showGridLineNames.lineNumber + * Line number of the grid line to highlight. + * @param {String} options.showGridLineNames.type + * The dimension type of the grid line. + * @param {Boolean} options.showGridLineNumbers + * Displays the grid line numbers on the grid lines if isShown is true. + * @param {Boolean} options.showInfiniteLines + * Displays an infinite line to represent the grid lines if isShown is + * true. + * @param {Number} options.zIndex + * The z-index to decide the displaying order. + * + * Structure: + * <div class="highlighter-container"> + * <canvas id="css-grid-canvas" class="css-grid-canvas"> + * <svg class="css-grid-elements" hidden="true"> + * <g class="css-grid-regions"> + * <path class="css-grid-areas" points="..." /> + * <path class="css-grid-cells" points="..." /> + * </g> + * </svg> + * <div class="css-grid-area-infobar-container"> + * <div class="css-grid-infobar"> + * <div class="css-grid-infobar-text"> + * <span class="css-grid-area-infobar-name">Grid Area Name</span> + * <span class="css-grid-area-infobar-dimensions">Grid Area Dimensions></span> + * </div> + * </div> + * </div> + * <div class="css-grid-cell-infobar-container"> + * <div class="css-grid-infobar"> + * <div class="css-grid-infobar-text"> + * <span class="css-grid-cell-infobar-position">Grid Cell Position</span> + * <span class="css-grid-cell-infobar-dimensions">Grid Cell Dimensions></span> + * </div> + * </div> + * <div class="css-grid-line-infobar-container"> + * <div class="css-grid-infobar"> + * <div class="css-grid-infobar-text"> + * <span class="css-grid-line-infobar-number">Grid Line Number</span> + * <span class="css-grid-line-infobar-names">Grid Line Names></span> + * </div> + * </div> + * </div> + * </div> + */ + +class CssGridHighlighter extends AutoRefreshHighlighter { + constructor(highlighterEnv) { + super(highlighterEnv); + + this.ID_CLASS_PREFIX = "css-grid-"; + + this.markup = new CanvasFrameAnonymousContentHelper( + this.highlighterEnv, + this._buildMarkup.bind(this) + ); + this.isReady = this.markup.initialize(); + + this.onPageHide = this.onPageHide.bind(this); + this.onWillNavigate = this.onWillNavigate.bind(this); + + this.highlighterEnv.on("will-navigate", this.onWillNavigate); + + const { pageListenerTarget } = highlighterEnv; + pageListenerTarget.addEventListener("pagehide", this.onPageHide); + + // Initialize the <canvas> position to the top left corner of the page. + this._canvasPosition = { + x: 0, + y: 0, + }; + + // Calling `updateCanvasPosition` anyway since the highlighter could be initialized + // on a page that has scrolled already. + updateCanvasPosition( + this._canvasPosition, + this._scroll, + this.win, + this._winDimensions + ); + } + + _buildMarkup() { + const container = this.markup.createNode({ + attributes: { + class: "highlighter-container", + }, + }); + + const root = this.markup.createNode({ + parent: container, + attributes: { + id: "root", + class: "root", + }, + prefix: this.ID_CLASS_PREFIX, + }); + + // We use a <canvas> element so that we can draw an arbitrary number of lines + // which wouldn't be possible with HTML or SVG without having to insert and remove + // the whole markup on every update. + this.markup.createNode({ + parent: root, + nodeType: "canvas", + attributes: { + id: "canvas", + class: "canvas", + hidden: "true", + width: CANVAS_SIZE, + height: CANVAS_SIZE, + }, + prefix: this.ID_CLASS_PREFIX, + }); + + // Build the SVG element. + const svg = this.markup.createSVGNode({ + nodeType: "svg", + parent: root, + attributes: { + id: "elements", + width: "100%", + height: "100%", + hidden: "true", + }, + prefix: this.ID_CLASS_PREFIX, + }); + + const regions = this.markup.createSVGNode({ + nodeType: "g", + parent: svg, + attributes: { + class: "regions", + }, + prefix: this.ID_CLASS_PREFIX, + }); + + this.markup.createSVGNode({ + nodeType: "path", + parent: regions, + attributes: { + class: "areas", + id: "areas", + }, + prefix: this.ID_CLASS_PREFIX, + }); + + this.markup.createSVGNode({ + nodeType: "path", + parent: regions, + attributes: { + class: "cells", + id: "cells", + }, + prefix: this.ID_CLASS_PREFIX, + }); + + // Build the grid area infobar markup. + const areaInfobarContainer = this.markup.createNode({ + parent: container, + attributes: { + class: "area-infobar-container", + id: "area-infobar-container", + position: "top", + hidden: "true", + }, + prefix: this.ID_CLASS_PREFIX, + }); + + const areaInfobar = this.markup.createNode({ + parent: areaInfobarContainer, + attributes: { + class: "infobar", + }, + prefix: this.ID_CLASS_PREFIX, + }); + + const areaTextbox = this.markup.createNode({ + parent: areaInfobar, + attributes: { + class: "infobar-text", + }, + prefix: this.ID_CLASS_PREFIX, + }); + this.markup.createNode({ + nodeType: "span", + parent: areaTextbox, + attributes: { + class: "area-infobar-name", + id: "area-infobar-name", + }, + prefix: this.ID_CLASS_PREFIX, + }); + this.markup.createNode({ + nodeType: "span", + parent: areaTextbox, + attributes: { + class: "area-infobar-dimensions", + id: "area-infobar-dimensions", + }, + prefix: this.ID_CLASS_PREFIX, + }); + + // Build the grid cell infobar markup. + const cellInfobarContainer = this.markup.createNode({ + parent: container, + attributes: { + class: "cell-infobar-container", + id: "cell-infobar-container", + position: "top", + hidden: "true", + }, + prefix: this.ID_CLASS_PREFIX, + }); + + const cellInfobar = this.markup.createNode({ + parent: cellInfobarContainer, + attributes: { + class: "infobar", + }, + prefix: this.ID_CLASS_PREFIX, + }); + + const cellTextbox = this.markup.createNode({ + parent: cellInfobar, + attributes: { + class: "infobar-text", + }, + prefix: this.ID_CLASS_PREFIX, + }); + this.markup.createNode({ + nodeType: "span", + parent: cellTextbox, + attributes: { + class: "cell-infobar-position", + id: "cell-infobar-position", + }, + prefix: this.ID_CLASS_PREFIX, + }); + this.markup.createNode({ + nodeType: "span", + parent: cellTextbox, + attributes: { + class: "cell-infobar-dimensions", + id: "cell-infobar-dimensions", + }, + prefix: this.ID_CLASS_PREFIX, + }); + + // Build the grid line infobar markup. + const lineInfobarContainer = this.markup.createNode({ + parent: container, + attributes: { + class: "line-infobar-container", + id: "line-infobar-container", + position: "top", + hidden: "true", + }, + prefix: this.ID_CLASS_PREFIX, + }); + + const lineInfobar = this.markup.createNode({ + parent: lineInfobarContainer, + attributes: { + class: "infobar", + }, + prefix: this.ID_CLASS_PREFIX, + }); + + const lineTextbox = this.markup.createNode({ + parent: lineInfobar, + attributes: { + class: "infobar-text", + }, + prefix: this.ID_CLASS_PREFIX, + }); + this.markup.createNode({ + nodeType: "span", + parent: lineTextbox, + attributes: { + class: "line-infobar-number", + id: "line-infobar-number", + }, + prefix: this.ID_CLASS_PREFIX, + }); + this.markup.createNode({ + nodeType: "span", + parent: lineTextbox, + attributes: { + class: "line-infobar-names", + id: "line-infobar-names", + }, + prefix: this.ID_CLASS_PREFIX, + }); + + return container; + } + + clearCache() { + gCachedGridPattern.clear(); + } + + /** + * Clear the grid area highlights. + */ + clearGridAreas() { + const areas = this.getElement("areas"); + areas.setAttribute("d", ""); + } + + /** + * Clear the grid cell highlights. + */ + clearGridCell() { + const cells = this.getElement("cells"); + cells.setAttribute("d", ""); + } + + destroy() { + const { highlighterEnv } = this; + highlighterEnv.off("will-navigate", this.onWillNavigate); + + const { pageListenerTarget } = highlighterEnv; + if (pageListenerTarget) { + pageListenerTarget.removeEventListener("pagehide", this.onPageHide); + } + + this.markup.destroy(); + + // Clear the pattern cache to avoid dead object exceptions (Bug 1342051). + this.clearCache(); + AutoRefreshHighlighter.prototype.destroy.call(this); + } + + get canvas() { + return this.getElement("canvas"); + } + + get color() { + return this.options.color || DEFAULT_COLOR; + } + + get ctx() { + return this.canvas.getCanvasContext("2d"); + } + + get globalAlpha() { + return this.options.globalAlpha || 1; + } + + getElement(id) { + return this.markup.getElement(this.ID_CLASS_PREFIX + id); + } + + getFirstColLinePos(fragment) { + return fragment.cols.lines[0].start; + } + + getFirstRowLinePos(fragment) { + return fragment.rows.lines[0].start; + } + + /** + * Gets the grid gap pattern used to render the gap regions based on the device + * pixel ratio given. + * + * @param {Number} devicePixelRatio + * The device pixel ratio we want the pattern for. + * @param {Object} dimension + * Refers to the Map key for the grid dimension type which is either the + * constant COLUMNS or ROWS. + * @return {CanvasPattern} grid gap pattern. + */ + getGridGapPattern(devicePixelRatio, dimension) { + let gridPatternMap = null; + + if (gCachedGridPattern.has(devicePixelRatio)) { + gridPatternMap = gCachedGridPattern.get(devicePixelRatio); + } else { + gridPatternMap = new Map(); + } + + if (gridPatternMap.has(dimension)) { + return gridPatternMap.get(dimension); + } + + // Create the diagonal lines pattern for the rendering the grid gaps. + const canvas = this.markup.createNode({ nodeType: "canvas" }); + const width = (canvas.width = GRID_GAP_PATTERN_WIDTH * devicePixelRatio); + const height = (canvas.height = GRID_GAP_PATTERN_HEIGHT * devicePixelRatio); + + const ctx = canvas.getContext("2d"); + ctx.save(); + ctx.setLineDash(GRID_GAP_PATTERN_LINE_DASH); + ctx.beginPath(); + ctx.translate(0.5, 0.5); + + if (dimension === COLUMNS) { + ctx.moveTo(0, 0); + ctx.lineTo(width, height); + } else { + ctx.moveTo(width, 0); + ctx.lineTo(0, height); + } + + ctx.strokeStyle = this.color; + ctx.globalAlpha = GRID_GAP_ALPHA * this.globalAlpha; + ctx.stroke(); + ctx.restore(); + + const pattern = ctx.createPattern(canvas, "repeat"); + + gridPatternMap.set(dimension, pattern); + gCachedGridPattern.set(devicePixelRatio, gridPatternMap); + + return pattern; + } + + getLastColLinePos(fragment) { + return fragment.cols.lines[fragment.cols.lines.length - 1].start; + } + + /** + * Get the GridLine index of the last edge of the explicit grid for a grid dimension. + * + * @param {GridTracks} tracks + * The grid track of a given grid dimension. + * @return {Number} index of the last edge of the explicit grid for a grid dimension. + */ + getLastEdgeLineIndex(tracks) { + let trackIndex = tracks.length - 1; + + // Traverse the grid track backwards until we find an explicit track. + while (trackIndex >= 0 && tracks[trackIndex].type != "explicit") { + trackIndex--; + } + + // The grid line index is the grid track index + 1. + return trackIndex + 1; + } + + getLastRowLinePos(fragment) { + return fragment.rows.lines[fragment.rows.lines.length - 1].start; + } + + /** + * The AutoRefreshHighlighter's _hasMoved method returns true only if the + * element's quads have changed. Override it so it also returns true if the + * element's grid has changed (which can happen when you change the + * grid-template-* CSS properties with the highlighter displayed). This + * check is prone to false positives, because it does a direct object + * comparison of the first grid fragment structure. This structure is + * generated by the first call to getGridFragments, and on any subsequent + * calls where a reflow is needed. Since a reflow is needed when the CSS + * changes, this will correctly detect that the grid structure has changed. + * However, it's possible that the reflow could generate a novel grid + * fragment object containing information that is unchanged -- a false + * positive. + */ + _hasMoved() { + const hasMoved = AutoRefreshHighlighter.prototype._hasMoved.call(this); + + const oldFirstGridFragment = this.gridData?.[0]; + this.gridData = this.currentNode.getGridFragments(); + const newFirstGridFragment = this.gridData[0]; + + return hasMoved || oldFirstGridFragment !== newFirstGridFragment; + } + + /** + * Hide the highlighter, the canvas and the infobars. + */ + _hide() { + setIgnoreLayoutChanges(true); + this._hideGrid(); + this._hideGridElements(); + this._hideGridAreaInfoBar(); + this._hideGridCellInfoBar(); + this._hideGridLineInfoBar(); + setIgnoreLayoutChanges(false, this.highlighterEnv.document.documentElement); + } + + _hideGrid() { + this.getElement("canvas").setAttribute("hidden", "true"); + } + + _hideGridAreaInfoBar() { + this.getElement("area-infobar-container").setAttribute("hidden", "true"); + } + + _hideGridCellInfoBar() { + this.getElement("cell-infobar-container").setAttribute("hidden", "true"); + } + + _hideGridElements() { + this.getElement("elements").setAttribute("hidden", "true"); + } + + _hideGridLineInfoBar() { + this.getElement("line-infobar-container").setAttribute("hidden", "true"); + } + + /** + * Checks if the current node has a CSS Grid layout. + * + * @return {Boolean} true if the current node has a CSS grid layout, false otherwise. + */ + isGrid() { + return this.currentNode.hasGridFragments(); + } + + /** + * Is a given grid fragment valid? i.e. does it actually have tracks? In some cases, we + * may have a fragment that defines column tracks but doesn't have any rows (or vice + * versa). In which case we do not want to draw anything for that fragment. + * + * @param {Object} fragment + * @return {Boolean} + */ + isValidFragment(fragment) { + return fragment.cols.tracks.length && fragment.rows.tracks.length; + } + + /** + * The <canvas>'s position needs to be updated if the page scrolls too much, in order + * to give the illusion that it always covers the viewport. + */ + _scrollUpdate() { + const hasUpdated = updateCanvasPosition( + this._canvasPosition, + this._scroll, + this.win, + this._winDimensions + ); + + if (hasUpdated) { + this._update(); + } + } + + _show() { + if (!this.isGrid()) { + this.hide(); + return false; + } + + // The grid pattern cache should be cleared in case the color changed. + this.clearCache(); + + // Hide the canvas, grid element highlights and infobar. + this._hide(); + + return this._update(); + } + + _showGrid() { + this.getElement("canvas").removeAttribute("hidden"); + } + + _showGridAreaInfoBar() { + this.getElement("area-infobar-container").removeAttribute("hidden"); + } + + _showGridCellInfoBar() { + this.getElement("cell-infobar-container").removeAttribute("hidden"); + } + + _showGridElements() { + this.getElement("elements").removeAttribute("hidden"); + } + + _showGridLineInfoBar() { + this.getElement("line-infobar-container").removeAttribute("hidden"); + } + + /** + * Shows all the grid area highlights for the current grid. + */ + showAllGridAreas() { + this.renderGridArea(); + } + + /** + * Shows the grid area highlight for the given area name. + * + * @param {String} areaName + * Grid area name. + */ + showGridArea(areaName) { + this.renderGridArea(areaName); + } + + /** + * Shows the grid cell highlight for the given grid cell options. + * + * @param {Number} options.gridFragmentIndex + * Index of the grid fragment to render the grid cell highlight. + * @param {Number} options.rowNumber + * Row number of the grid cell to highlight. + * @param {Number} options.columnNumber + * Column number of the grid cell to highlight. + */ + showGridCell({ gridFragmentIndex, rowNumber, columnNumber }) { + this.renderGridCell(gridFragmentIndex, rowNumber, columnNumber); + } + + /** + * Shows the grid line highlight for the given grid line options. + * + * @param {Number} options.gridFragmentIndex + * Index of the grid fragment to render the grid line highlight. + * @param {Number} options.lineNumber + * Line number of the grid line to highlight. + * @param {String} options.type + * The dimension type of the grid line. + */ + showGridLineNames({ gridFragmentIndex, lineNumber, type }) { + this.renderGridLineNames(gridFragmentIndex, lineNumber, type); + } + + /** + * If a page hide event is triggered for current window's highlighter, hide the + * highlighter. + */ + onPageHide({ target }) { + if (target.defaultView === this.win) { + this.hide(); + } + } + + /** + * Called when the page will-navigate. Used to hide the grid highlighter and clear + * the cached gap patterns and avoid using DeadWrapper obejcts as gap patterns the + * next time. + */ + onWillNavigate({ isTopLevel }) { + this.clearCache(); + + if (isTopLevel) { + this.hide(); + } + } + + renderFragment(fragment) { + if (!this.isValidFragment(fragment)) { + return; + } + + this.renderLines( + fragment.cols, + COLUMNS, + this.getFirstRowLinePos(fragment), + this.getLastRowLinePos(fragment) + ); + this.renderLines( + fragment.rows, + ROWS, + this.getFirstColLinePos(fragment), + this.getLastColLinePos(fragment) + ); + + if (this.options.showGridAreasOverlay) { + this.renderGridAreaOverlay(); + } + + // Line numbers are rendered in a 2nd step to avoid overlapping with existing lines. + if (this.options.showGridLineNumbers) { + this.renderLineNumbers( + fragment.cols, + COLUMNS, + this.getFirstRowLinePos(fragment) + ); + this.renderLineNumbers( + fragment.rows, + ROWS, + this.getFirstColLinePos(fragment) + ); + this.renderNegativeLineNumbers( + fragment.cols, + COLUMNS, + this.getLastRowLinePos(fragment) + ); + this.renderNegativeLineNumbers( + fragment.rows, + ROWS, + this.getLastColLinePos(fragment) + ); + } + } + + /** + * Render the grid area highlight for the given area name or for all the grid areas. + * + * @param {String} areaName + * Name of the grid area to be highlighted. If no area name is provided, all + * the grid areas should be highlighted. + */ + renderGridArea(areaName) { + const { devicePixelRatio } = this.win; + const displayPixelRatio = getDisplayPixelRatio(this.win); + const paths = []; + + for (let i = 0; i < this.gridData.length; i++) { + const fragment = this.gridData[i]; + + for (const area of fragment.areas) { + if (areaName && areaName != area.name) { + continue; + } + + const rowStart = fragment.rows.lines[area.rowStart - 1]; + const rowEnd = fragment.rows.lines[area.rowEnd - 1]; + const columnStart = fragment.cols.lines[area.columnStart - 1]; + const columnEnd = fragment.cols.lines[area.columnEnd - 1]; + + const x1 = columnStart.start + columnStart.breadth; + const y1 = rowStart.start + rowStart.breadth; + const x2 = columnEnd.start; + const y2 = rowEnd.start; + + const points = getPointsFromDiagonal( + x1, + y1, + x2, + y2, + this.currentMatrix + ); + + // Scale down by `devicePixelRatio` since SVG element already take them into + // account. + const svgPoints = points.map(point => ({ + x: Math.round(point.x / devicePixelRatio), + y: Math.round(point.y / devicePixelRatio), + })); + + // Scale down by `displayPixelRatio` since infobar's HTML elements already take it + // into account; and the zoom scaling is handled by `moveInfobar`. + const bounds = getBoundsFromPoints( + points.map(point => ({ + x: Math.round(point.x / displayPixelRatio), + y: Math.round(point.y / displayPixelRatio), + })) + ); + + paths.push(getPathDescriptionFromPoints(svgPoints)); + + // Update and show the info bar when only displaying a single grid area. + if (areaName) { + this._showGridAreaInfoBar(); + this._updateGridAreaInfobar(area, bounds); + } + } + } + + const areas = this.getElement("areas"); + areas.setAttribute("d", paths.join(" ")); + } + + /** + * Render grid area name on the containing grid area cell. + * + * @param {Object} fragment + * The grid fragment of the grid container. + * @param {Object} area + * The area overlay to render on the CSS highlighter canvas. + */ + renderGridAreaName(fragment, area) { + const { rowStart, rowEnd, columnStart, columnEnd } = area; + const { devicePixelRatio } = this.win; + const displayPixelRatio = getDisplayPixelRatio(this.win); + const offset = (displayPixelRatio / 2) % 1; + let fontSize = GRID_AREA_NAME_FONT_SIZE * displayPixelRatio; + const canvasX = Math.round(this._canvasPosition.x * devicePixelRatio); + const canvasY = Math.round(this._canvasPosition.y * devicePixelRatio); + + this.ctx.save(); + this.ctx.translate(offset - canvasX, offset - canvasY); + this.ctx.font = fontSize + "px " + GRID_FONT_FAMILY; + this.ctx.globalAlpha = this.globalAlpha; + this.ctx.strokeStyle = this.color; + this.ctx.textAlign = "center"; + this.ctx.textBaseline = "middle"; + + // Draw the text for the grid area name. + for (let rowNumber = rowStart; rowNumber < rowEnd; rowNumber++) { + for ( + let columnNumber = columnStart; + columnNumber < columnEnd; + columnNumber++ + ) { + const row = fragment.rows.tracks[rowNumber - 1]; + const column = fragment.cols.tracks[columnNumber - 1]; + + // If the font size exceeds the bounds of the containing grid cell, size it its + // row or column dimension, whichever is smallest. + if ( + fontSize > column.breadth * displayPixelRatio || + fontSize > row.breadth * displayPixelRatio + ) { + fontSize = Math.min([column.breadth, row.breadth]); + this.ctx.font = fontSize + "px " + GRID_FONT_FAMILY; + } + + const textWidth = this.ctx.measureText(area.name).width; + // The width of the character 'm' approximates the height of the text. + const textHeight = this.ctx.measureText("m").width; + // Padding in pixels for the line number text inside of the line number container. + const padding = 3 * displayPixelRatio; + + const boxWidth = textWidth + 2 * padding; + const boxHeight = textHeight + 2 * padding; + + let x = column.start + column.breadth / 2; + let y = row.start + row.breadth / 2; + + [x, y] = apply(this.currentMatrix, [x, y]); + + const rectXPos = x - boxWidth / 2; + const rectYPos = y - boxHeight / 2; + + // Draw a rounded rectangle with a border width of 1 pixel, + // a border color matching the grid color, and a white background. + this.ctx.lineWidth = 1 * displayPixelRatio; + this.ctx.strokeStyle = this.color; + this.ctx.fillStyle = "white"; + const radius = 2 * displayPixelRatio; + drawRoundedRect( + this.ctx, + rectXPos, + rectYPos, + boxWidth, + boxHeight, + radius + ); + + this.ctx.fillStyle = this.color; + this.ctx.fillText(area.name, x, y + padding); + } + } + + this.ctx.restore(); + } + + /** + * Renders the grid area overlay on the css grid highlighter canvas. + */ + renderGridAreaOverlay() { + const padding = 1; + + for (let i = 0; i < this.gridData.length; i++) { + const fragment = this.gridData[i]; + + for (const area of fragment.areas) { + const { rowStart, rowEnd, columnStart, columnEnd, type } = area; + + if (type === "implicit") { + continue; + } + + // Draw the line edges for the grid area. + const areaColStart = fragment.cols.lines[columnStart - 1]; + const areaColEnd = fragment.cols.lines[columnEnd - 1]; + + const areaRowStart = fragment.rows.lines[rowStart - 1]; + const areaRowEnd = fragment.rows.lines[rowEnd - 1]; + + const areaColStartLinePos = areaColStart.start + areaColStart.breadth; + const areaRowStartLinePos = areaRowStart.start + areaRowStart.breadth; + + this.renderLine( + areaColStartLinePos + padding, + areaRowStartLinePos, + areaRowEnd.start, + COLUMNS, + "areaEdge" + ); + this.renderLine( + areaColEnd.start - padding, + areaRowStartLinePos, + areaRowEnd.start, + COLUMNS, + "areaEdge" + ); + + this.renderLine( + areaRowStartLinePos + padding, + areaColStartLinePos, + areaColEnd.start, + ROWS, + "areaEdge" + ); + this.renderLine( + areaRowEnd.start - padding, + areaColStartLinePos, + areaColEnd.start, + ROWS, + "areaEdge" + ); + + this.renderGridAreaName(fragment, area); + } + } + } + + /** + * Render the grid cell highlight for the given grid fragment index, row and column + * number. + * + * @param {Number} gridFragmentIndex + * Index of the grid fragment to render the grid cell highlight. + * @param {Number} rowNumber + * Row number of the grid cell to highlight. + * @param {Number} columnNumber + * Column number of the grid cell to highlight. + */ + renderGridCell(gridFragmentIndex, rowNumber, columnNumber) { + const fragment = this.gridData[gridFragmentIndex]; + + if (!fragment) { + return; + } + + const row = fragment.rows.tracks[rowNumber - 1]; + const column = fragment.cols.tracks[columnNumber - 1]; + + if (!row || !column) { + return; + } + + const x1 = column.start; + const y1 = row.start; + const x2 = column.start + column.breadth; + const y2 = row.start + row.breadth; + + const { devicePixelRatio } = this.win; + const displayPixelRatio = getDisplayPixelRatio(this.win); + const points = getPointsFromDiagonal(x1, y1, x2, y2, this.currentMatrix); + + // Scale down by `devicePixelRatio` since SVG element already take them into account. + const svgPoints = points.map(point => ({ + x: Math.round(point.x / devicePixelRatio), + y: Math.round(point.y / devicePixelRatio), + })); + + // Scale down by `displayPixelRatio` since infobar's HTML elements already take it + // into account, and the zoom scaling is handled by `moveInfobar`. + const bounds = getBoundsFromPoints( + points.map(point => ({ + x: Math.round(point.x / displayPixelRatio), + y: Math.round(point.y / displayPixelRatio), + })) + ); + + const cells = this.getElement("cells"); + cells.setAttribute("d", getPathDescriptionFromPoints(svgPoints)); + + this._showGridCellInfoBar(); + this._updateGridCellInfobar(rowNumber, columnNumber, bounds); + } + + /** + * Render the grid gap area on the css grid highlighter canvas. + * + * @param {Number} linePos + * The line position along the x-axis for a column grid line and + * y-axis for a row grid line. + * @param {Number} startPos + * The start position of the cross side of the grid line. + * @param {Number} endPos + * The end position of the cross side of the grid line. + * @param {Number} breadth + * The grid line breadth value. + * @param {String} dimensionType + * The grid dimension type which is either the constant COLUMNS or ROWS. + */ + renderGridGap(linePos, startPos, endPos, breadth, dimensionType) { + const { devicePixelRatio } = this.win; + const displayPixelRatio = getDisplayPixelRatio(this.win); + const offset = (displayPixelRatio / 2) % 1; + const canvasX = Math.round(this._canvasPosition.x * devicePixelRatio); + const canvasY = Math.round(this._canvasPosition.y * devicePixelRatio); + + linePos = Math.round(linePos); + startPos = Math.round(startPos); + breadth = Math.round(breadth); + + this.ctx.save(); + this.ctx.fillStyle = this.getGridGapPattern( + devicePixelRatio, + dimensionType + ); + this.ctx.translate(offset - canvasX, offset - canvasY); + + if (dimensionType === COLUMNS) { + if (isFinite(endPos)) { + endPos = Math.round(endPos); + } else { + endPos = this._winDimensions.height; + startPos = -endPos; + } + drawRect( + this.ctx, + linePos, + startPos, + linePos + breadth, + endPos, + this.currentMatrix + ); + } else { + if (isFinite(endPos)) { + endPos = Math.round(endPos); + } else { + endPos = this._winDimensions.width; + startPos = -endPos; + } + drawRect( + this.ctx, + startPos, + linePos, + endPos, + linePos + breadth, + this.currentMatrix + ); + } + + // Find current angle of grid by measuring the angle of two arbitrary points, + // then rotate canvas, so the hash pattern stays 45deg to the gridlines. + const p1 = apply(this.currentMatrix, [0, 0]); + const p2 = apply(this.currentMatrix, [1, 0]); + const angleRad = Math.atan2(p2[1] - p1[1], p2[0] - p1[0]); + this.ctx.rotate(angleRad); + + this.ctx.fill(); + this.ctx.restore(); + } + + /** + * Render the grid line name highlight for the given grid fragment index, lineNumber, + * and dimensionType. + * + * @param {Number} gridFragmentIndex + * Index of the grid fragment to render the grid line highlight. + * @param {Number} lineNumber + * Line number of the grid line to highlight. + * @param {String} dimensionType + * The dimension type of the grid line. + */ + renderGridLineNames(gridFragmentIndex, lineNumber, dimensionType) { + const fragment = this.gridData[gridFragmentIndex]; + + if (!fragment || !lineNumber || !dimensionType) { + return; + } + + const { names } = fragment[dimensionType].lines[lineNumber - 1]; + let linePos; + + if (dimensionType === ROWS) { + linePos = fragment.rows.lines[lineNumber - 1]; + } else if (dimensionType === COLUMNS) { + linePos = fragment.cols.lines[lineNumber - 1]; + } + + if (!linePos) { + return; + } + + const currentZoom = getCurrentZoom(this.win); + const { bounds } = this.currentQuads.content[gridFragmentIndex]; + + const rowYPosition = fragment.rows.lines[0]; + const colXPosition = fragment.rows.lines[0]; + + const x = + dimensionType === COLUMNS + ? linePos.start + bounds.left / currentZoom + : colXPosition.start + bounds.left / currentZoom; + + const y = + dimensionType === ROWS + ? linePos.start + bounds.top / currentZoom + : rowYPosition.start + bounds.top / currentZoom; + + this._showGridLineInfoBar(); + this._updateGridLineInfobar(names.join(", "), lineNumber, x, y); + } + + /** + * Render the grid line number on the css grid highlighter canvas. + * + * @param {Number} lineNumber + * The grid line number. + * @param {Number} linePos + * The line position along the x-axis for a column grid line and + * y-axis for a row grid line. + * @param {Number} startPos + * The start position of the cross side of the grid line. + * @param {Number} breadth + * The grid line breadth value. + * @param {String} dimensionType + * The grid dimension type which is either the constant COLUMNS or ROWS. + * @param {Boolean||undefined} isStackedLine + * Boolean indicating if the line is stacked. + */ + // eslint-disable-next-line complexity + renderGridLineNumber( + lineNumber, + linePos, + startPos, + breadth, + dimensionType, + isStackedLine + ) { + const displayPixelRatio = getDisplayPixelRatio(this.win); + const { devicePixelRatio } = this.win; + const offset = (displayPixelRatio / 2) % 1; + const fontSize = GRID_FONT_SIZE * devicePixelRatio; + const canvasX = Math.round(this._canvasPosition.x * devicePixelRatio); + const canvasY = Math.round(this._canvasPosition.y * devicePixelRatio); + + linePos = Math.round(linePos); + startPos = Math.round(startPos); + breadth = Math.round(breadth); + + if (linePos + breadth < 0) { + // Don't render the line number since the line is not visible on screen. + return; + } + + this.ctx.save(); + this.ctx.translate(offset - canvasX, offset - canvasY); + this.ctx.font = fontSize + "px " + GRID_FONT_FAMILY; + + // For a general grid box, the height of the character "m" will be its minimum width + // and height. If line number's text width is greater, then use the grid box's text + // width instead. + const textHeight = this.ctx.measureText("m").width; + const textWidth = Math.max( + textHeight, + this.ctx.measureText(lineNumber).width + ); + + // Padding in pixels for the line number text inside of the line number container. + const padding = 3 * devicePixelRatio; + const offsetFromEdge = 2 * devicePixelRatio; + + let boxWidth = textWidth + 2 * padding; + let boxHeight = textHeight + 2 * padding; + + // Calculate the x & y coordinates for the line number container, so that its arrow + // tip is centered on the line (or the gap if there is one), and is offset by the + // calculated padding value from the grid container edge. + let x, y; + + if (dimensionType === COLUMNS) { + x = linePos + breadth / 2; + y = + lineNumber > 0 ? startPos - offsetFromEdge : startPos + offsetFromEdge; + } else if (dimensionType === ROWS) { + y = linePos + breadth / 2; + x = + lineNumber > 0 ? startPos - offsetFromEdge : startPos + offsetFromEdge; + } + + [x, y] = apply(this.currentMatrix, [x, y]); + + // Draw a bubble rectangular arrow with a border width of 2 pixels, a border color + // matching the grid color and a white background (the line number will be written in + // black). + this.ctx.lineWidth = 2 * displayPixelRatio; + this.ctx.strokeStyle = this.color; + this.ctx.fillStyle = "white"; + this.ctx.globalAlpha = this.globalAlpha; + + // See param definitions of drawBubbleRect. + const radius = 2 * displayPixelRatio; + const margin = 2 * displayPixelRatio; + const arrowSize = 8 * displayPixelRatio; + + const minBoxSize = arrowSize * 2 + padding; + boxWidth = Math.max(boxWidth, minBoxSize); + boxHeight = Math.max(boxHeight, minBoxSize); + + // Determine which edge of the box to aim the line number arrow at. + const boxEdge = this.getBoxEdge(dimensionType, lineNumber); + + let { width, height } = this._winDimensions; + width *= displayPixelRatio; + height *= displayPixelRatio; + + // Don't draw if the line is out of the viewport. + if ( + (dimensionType === ROWS && (y < 0 || y > height)) || + (dimensionType === COLUMNS && (x < 0 || x > width)) + ) { + this.ctx.restore(); + return; + } + + // If the arrow's edge (the one perpendicular to the line direction) is too close to + // the edge of the viewport. Push the arrow inside the grid. + const minOffsetFromEdge = OFFSET_FROM_EDGE * displayPixelRatio; + switch (boxEdge) { + case "left": + if (x < minOffsetFromEdge) { + x += FLIP_ARROW_INSIDE_FACTOR * boxWidth; + } + break; + case "right": + if (width - x < minOffsetFromEdge) { + x -= FLIP_ARROW_INSIDE_FACTOR * boxWidth; + } + break; + case "top": + if (y < minOffsetFromEdge) { + y += FLIP_ARROW_INSIDE_FACTOR * boxHeight; + } + break; + case "bottom": + if (height - y < minOffsetFromEdge) { + y -= FLIP_ARROW_INSIDE_FACTOR * boxHeight; + } + break; + } + + // Offset stacked line numbers by a quarter of the box's width/height, so a part of + // them remains visible behind the number that sits at the top of the stack. + if (isStackedLine) { + const xOffset = boxWidth / 4; + const yOffset = boxHeight / 4; + + if (lineNumber > 0) { + x -= xOffset; + y -= yOffset; + } else { + x += xOffset; + y += yOffset; + } + } + + // If one the edges of the arrow that's parallel to the line is too close to the edge + // of the viewport (and therefore partly hidden), grow the arrow's size in the + // opposite direction. + // The goal is for the part that's not hidden to be exactly the size of a normal + // arrow and for the arrow to keep pointing at the line (keep being centered on it). + let grewBox = false; + const boxWidthBeforeGrowth = boxWidth; + const boxHeightBeforeGrowth = boxHeight; + + if (dimensionType === ROWS && y <= boxHeight / 2) { + grewBox = true; + boxHeight = 2 * (boxHeight - y); + } else if (dimensionType === ROWS && y >= height - boxHeight / 2) { + grewBox = true; + boxHeight = 2 * (y - height + boxHeight); + } else if (dimensionType === COLUMNS && x <= boxWidth / 2) { + grewBox = true; + boxWidth = 2 * (boxWidth - x); + } else if (dimensionType === COLUMNS && x >= width - boxWidth / 2) { + grewBox = true; + boxWidth = 2 * (x - width + boxWidth); + } + + // Draw the arrow box itself + drawBubbleRect( + this.ctx, + x, + y, + boxWidth, + boxHeight, + radius, + margin, + arrowSize, + boxEdge + ); + + // Determine the text position for it to be centered nicely inside the arrow box. + switch (boxEdge) { + case "left": + x -= boxWidth + arrowSize + radius - boxWidth / 2; + break; + case "right": + x += boxWidth + arrowSize + radius - boxWidth / 2; + break; + case "top": + y -= boxHeight + arrowSize + radius - boxHeight / 2; + break; + case "bottom": + y += boxHeight + arrowSize + radius - boxHeight / 2; + break; + } + + // Do a second pass to adjust the position, along the other axis, if the box grew + // during the previous step, so the text is also centered on that axis. + if (grewBox) { + if (dimensionType === ROWS && y <= boxHeightBeforeGrowth / 2) { + y = boxHeightBeforeGrowth / 2; + } else if ( + dimensionType === ROWS && + y >= height - boxHeightBeforeGrowth / 2 + ) { + y = height - boxHeightBeforeGrowth / 2; + } else if (dimensionType === COLUMNS && x <= boxWidthBeforeGrowth / 2) { + x = boxWidthBeforeGrowth / 2; + } else if ( + dimensionType === COLUMNS && + x >= width - boxWidthBeforeGrowth / 2 + ) { + x = width - boxWidthBeforeGrowth / 2; + } + } + + // Write the line number inside of the rectangle. + this.ctx.textAlign = "center"; + this.ctx.textBaseline = "middle"; + this.ctx.fillStyle = "black"; + const numberText = isStackedLine ? "" : lineNumber; + this.ctx.fillText(numberText, x, y); + this.ctx.restore(); + } + + /** + * Determine which edge of a line number box to aim the line number arrow at. + * + * @param {String} dimensionType + * The grid line dimension type which is either the constant COLUMNS or ROWS. + * @param {Number} lineNumber + * The grid line number. + * @return {String} The edge of the box: top, right, bottom or left. + */ + getBoxEdge(dimensionType, lineNumber) { + let boxEdge; + + if (dimensionType === COLUMNS) { + boxEdge = lineNumber > 0 ? "top" : "bottom"; + } else if (dimensionType === ROWS) { + boxEdge = lineNumber > 0 ? "left" : "right"; + } + + // Rotate box edge as needed for writing mode and text direction. + const { direction, writingMode } = getComputedStyle(this.currentNode); + + switch (writingMode) { + case "horizontal-tb": + // This is the initial value. No further adjustment needed. + break; + case "vertical-rl": + boxEdge = rotateEdgeRight(boxEdge); + break; + case "vertical-lr": + if (dimensionType === COLUMNS) { + boxEdge = rotateEdgeLeft(boxEdge); + } else { + boxEdge = rotateEdgeRight(boxEdge); + } + break; + case "sideways-rl": + boxEdge = rotateEdgeRight(boxEdge); + break; + case "sideways-lr": + boxEdge = rotateEdgeLeft(boxEdge); + break; + default: + console.error(`Unexpected writing-mode: ${writingMode}`); + } + + switch (direction) { + case "ltr": + // This is the initial value. No further adjustment needed. + break; + case "rtl": + if (dimensionType === ROWS) { + boxEdge = reflectEdge(boxEdge); + } + break; + default: + console.error(`Unexpected direction: ${direction}`); + } + + return boxEdge; + } + + /** + * Render the grid line on the css grid highlighter canvas. + * + * @param {Number} linePos + * The line position along the x-axis for a column grid line and + * y-axis for a row grid line. + * @param {Number} startPos + * The start position of the cross side of the grid line. + * @param {Number} endPos + * The end position of the cross side of the grid line. + * @param {String} dimensionType + * The grid dimension type which is either the constant COLUMNS or ROWS. + * @param {String} lineType + * The grid line type - "edge", "explicit", or "implicit". + */ + renderLine(linePos, startPos, endPos, dimensionType, lineType) { + const { devicePixelRatio } = this.win; + const lineWidth = getDisplayPixelRatio(this.win); + const offset = (lineWidth / 2) % 1; + const canvasX = Math.round(this._canvasPosition.x * devicePixelRatio); + const canvasY = Math.round(this._canvasPosition.y * devicePixelRatio); + + linePos = Math.round(linePos); + startPos = Math.round(startPos); + endPos = Math.round(endPos); + + this.ctx.save(); + this.ctx.setLineDash(GRID_LINES_PROPERTIES[lineType].lineDash); + this.ctx.translate(offset - canvasX, offset - canvasY); + + const lineOptions = { + matrix: this.currentMatrix, + }; + + if (this.options.showInfiniteLines) { + lineOptions.extendToBoundaries = [ + canvasX, + canvasY, + canvasX + CANVAS_SIZE, + canvasY + CANVAS_SIZE, + ]; + } + + if (dimensionType === COLUMNS) { + drawLine(this.ctx, linePos, startPos, linePos, endPos, lineOptions); + } else { + drawLine(this.ctx, startPos, linePos, endPos, linePos, lineOptions); + } + + this.ctx.strokeStyle = this.color; + this.ctx.globalAlpha = + GRID_LINES_PROPERTIES[lineType].alpha * this.globalAlpha; + + if (GRID_LINES_PROPERTIES[lineType].lineWidth) { + this.ctx.lineWidth = + GRID_LINES_PROPERTIES[lineType].lineWidth * devicePixelRatio; + } else { + this.ctx.lineWidth = lineWidth; + } + + this.ctx.stroke(); + this.ctx.restore(); + } + + /** + * Render the grid lines given the grid dimension information of the + * column or row lines. + * + * @param {GridDimension} gridDimension + * Column or row grid dimension object. + * @param {Object} quad.bounds + * The content bounds of the box model region quads. + * @param {String} dimensionType + * The grid dimension type which is either the constant COLUMNS or ROWS. + * @param {Number} startPos + * The start position of the cross side ("left" for ROWS and "top" for COLUMNS) + * of the grid dimension. + * @param {Number} endPos + * The end position of the cross side ("left" for ROWS and "top" for COLUMNS) + * of the grid dimension. + */ + renderLines(gridDimension, dimensionType, startPos, endPos) { + const { lines, tracks } = gridDimension; + const lastEdgeLineIndex = this.getLastEdgeLineIndex(tracks); + + for (let i = 0; i < lines.length; i++) { + const line = lines[i]; + const linePos = line.start; + + if (i == 0 || i == lastEdgeLineIndex) { + this.renderLine(linePos, startPos, endPos, dimensionType, "edge"); + } else { + this.renderLine( + linePos, + startPos, + endPos, + dimensionType, + tracks[i - 1].type + ); + } + + // Render a second line to illustrate the gutter for non-zero breadth. + if (line.breadth > 0) { + this.renderGridGap( + linePos, + startPos, + endPos, + line.breadth, + dimensionType + ); + this.renderLine( + linePos + line.breadth, + startPos, + endPos, + dimensionType, + tracks[i].type + ); + } + } + } + + /** + * Render the grid lines given the grid dimension information of the + * column or row lines. + * + * @param {GridDimension} gridDimension + * Column or row grid dimension object. + * @param {String} dimensionType + * The grid dimension type which is either the constant COLUMNS or ROWS. + * @param {Number} startPos + * The start position of the cross side ("left" for ROWS and "top" for COLUMNS) + * of the grid dimension. + */ + renderLineNumbers(gridDimension, dimensionType, startPos) { + const { lines, tracks } = gridDimension; + + for (let i = 0, line; (line = lines[i++]); ) { + // If you place something using negative numbers, you can trigger some implicit + // grid creation above and to the left of the explicit grid (assuming a + // horizontal-tb writing mode). + // + // The first explicit grid line gets the number of 1, and any implicit grid lines + // before 1 get negative numbers. Since here we're rendering only the positive line + // numbers, we have to skip any implicit grid lines before the first one that is + // explicit. The API returns a 0 as the line's number for these implicit lines that + // occurs before the first explicit line. + if (line.number === 0) { + continue; + } + + // Check for overlapping lines by measuring the track width between them. + // We render a second box beneath the last overlapping + // line number to indicate there are lines beneath it. + const gridTrack = tracks[i - 1]; + + if (gridTrack) { + const { breadth } = gridTrack; + + if (breadth === 0) { + this.renderGridLineNumber( + line.number, + line.start, + startPos, + line.breadth, + dimensionType, + true + ); + continue; + } + } + + this.renderGridLineNumber( + line.number, + line.start, + startPos, + line.breadth, + dimensionType + ); + } + } + + /** + * Render the negative grid lines given the grid dimension information of the + * column or row lines. + * + * @param {GridDimension} gridDimension + * Column or row grid dimension object. + * @param {String} dimensionType + * The grid dimension type which is either the constant COLUMNS or ROWS. + * @param {Number} startPos + * The start position of the cross side ("left" for ROWS and "top" for COLUMNS) + * of the grid dimension. + */ + renderNegativeLineNumbers(gridDimension, dimensionType, startPos) { + const { lines, tracks } = gridDimension; + + for (let i = 0, line; (line = lines[i++]); ) { + const linePos = line.start; + const negativeLineNumber = line.negativeNumber; + + // Don't render any negative line number greater than -1. + if (negativeLineNumber == 0) { + break; + } + + // Check for overlapping lines by measuring the track width between them. + // We render a second box beneath the last overlapping + // line number to indicate there are lines beneath it. + const gridTrack = tracks[i - 1]; + if (gridTrack) { + const { breadth } = gridTrack; + + // Ensure "-1" is always visible, since it is always the largest number. + if (breadth === 0 && negativeLineNumber != -1) { + this.renderGridLineNumber( + negativeLineNumber, + linePos, + startPos, + line.breadth, + dimensionType, + true + ); + continue; + } + } + + this.renderGridLineNumber( + negativeLineNumber, + linePos, + startPos, + line.breadth, + dimensionType + ); + } + } + + /** + * Update the highlighter on the current highlighted node (the one that was + * passed as an argument to show(node)). Should be called whenever node's geometry + * or grid changes. + */ + _update() { + setIgnoreLayoutChanges(true); + + // Set z-index. + this.markup.content.root.firstElementChild.style.setProperty( + "z-index", + this.options.zIndex + ); + + const root = this.getElement("root"); + const cells = this.getElement("cells"); + const areas = this.getElement("areas"); + + // Set the grid cells and areas fill to the current grid colour. + cells.setAttribute("style", `fill: ${this.color}`); + areas.setAttribute("style", `fill: ${this.color}`); + + // Hide the root element and force the reflow in order to get the proper window's + // dimensions without increasing them. + root.setAttribute("style", "display: none"); + this.win.document.documentElement.offsetWidth; + this._winDimensions = getWindowDimensions(this.win); + const { width, height } = this._winDimensions; + + // Updates the <canvas> element's position and size. + // It also clear the <canvas>'s drawing context. + updateCanvasElement( + this.canvas, + this._canvasPosition, + this.win.devicePixelRatio + ); + + // Clear the grid area highlights. + this.clearGridAreas(); + this.clearGridCell(); + + // Update the current matrix used in our canvas' rendering. + const { currentMatrix, hasNodeTransformations } = getCurrentMatrix( + this.currentNode, + this.win + ); + this.currentMatrix = currentMatrix; + this.hasNodeTransformations = hasNodeTransformations; + + // Start drawing the grid fragments. + for (let i = 0; i < this.gridData.length; i++) { + this.renderFragment(this.gridData[i]); + } + + // Display the grid area highlights if needed. + if (this.options.showAllGridAreas) { + this.showAllGridAreas(); + } else if (this.options.showGridArea) { + this.showGridArea(this.options.showGridArea); + } + + // Display the grid cell highlights if needed. + if (this.options.showGridCell) { + this.showGridCell(this.options.showGridCell); + } + + // Display the grid line names if needed. + if (this.options.showGridLineNames) { + this.showGridLineNames(this.options.showGridLineNames); + } + + this._showGrid(); + this._showGridElements(); + + root.setAttribute( + "style", + `position: absolute; width: ${width}px; height: ${height}px; overflow: hidden` + ); + + setIgnoreLayoutChanges(false, this.highlighterEnv.document.documentElement); + return true; + } + + /** + * Update the grid information displayed in the grid area info bar. + * + * @param {GridArea} area + * The grid area object. + * @param {Object} bounds + * A DOMRect-like object represent the grid area rectangle. + */ + _updateGridAreaInfobar(area, bounds) { + const { width, height } = bounds; + const dim = + parseFloat(width.toPrecision(6)) + + " \u00D7 " + + parseFloat(height.toPrecision(6)); + + this.getElement("area-infobar-name").setTextContent(area.name); + this.getElement("area-infobar-dimensions").setTextContent(dim); + + const container = this.getElement("area-infobar-container"); + moveInfobar(container, bounds, this.win, { + position: "bottom", + }); + } + + /** + * Update the grid information displayed in the grid cell info bar. + * + * @param {Number} rowNumber + * The grid cell's row number. + * @param {Number} columnNumber + * The grid cell's column number. + * @param {Object} bounds + * A DOMRect-like object represent the grid cell rectangle. + */ + _updateGridCellInfobar(rowNumber, columnNumber, bounds) { + const { width, height } = bounds; + const dim = + parseFloat(width.toPrecision(6)) + + " \u00D7 " + + parseFloat(height.toPrecision(6)); + const position = HighlightersBundle.formatValueSync( + "grid-row-column-positions", + { row: rowNumber, column: columnNumber } + ); + + this.getElement("cell-infobar-position").setTextContent(position); + this.getElement("cell-infobar-dimensions").setTextContent(dim); + + const container = this.getElement("cell-infobar-container"); + moveInfobar(container, bounds, this.win, { + position: "top", + }); + } + + /** + * Update the grid information displayed in the grid line info bar. + * + * @param {String} gridLineNames + * Comma-separated string of names for the grid line. + * @param {Number} gridLineNumber + * The grid line number. + * @param {Number} x + * The x-coordinate of the grid line. + * @param {Number} y + * The y-coordinate of the grid line. + */ + _updateGridLineInfobar(gridLineNames, gridLineNumber, x, y) { + this.getElement("line-infobar-number").setTextContent(gridLineNumber); + this.getElement("line-infobar-names").setTextContent(gridLineNames); + + const container = this.getElement("line-infobar-container"); + moveInfobar( + container, + getBoundsFromPoints([ + { x, y }, + { x, y }, + { x, y }, + { x, y }, + ]), + this.win + ); + } +} + +exports.CssGridHighlighter = CssGridHighlighter; diff --git a/devtools/server/actors/highlighters/css-transform.js b/devtools/server/actors/highlighters/css-transform.js new file mode 100644 index 0000000000..c9f16b42e0 --- /dev/null +++ b/devtools/server/actors/highlighters/css-transform.js @@ -0,0 +1,265 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const { + AutoRefreshHighlighter, +} = require("resource://devtools/server/actors/highlighters/auto-refresh.js"); +const { + CanvasFrameAnonymousContentHelper, + getComputedStyle, +} = require("resource://devtools/server/actors/highlighters/utils/markup.js"); +const { + setIgnoreLayoutChanges, + getNodeBounds, +} = require("resource://devtools/shared/layout/utils.js"); + +// The minimum distance a line should be before it has an arrow marker-end +const ARROW_LINE_MIN_DISTANCE = 10; + +var MARKER_COUNTER = 1; + +/** + * The CssTransformHighlighter is the class that draws an outline around a + * transformed element and an outline around where it would be if untransformed + * as well as arrows connecting the 2 outlines' corners. + */ +class CssTransformHighlighter extends AutoRefreshHighlighter { + constructor(highlighterEnv) { + super(highlighterEnv); + + this.ID_CLASS_PREFIX = "css-transform-"; + + this.markup = new CanvasFrameAnonymousContentHelper( + this.highlighterEnv, + this._buildMarkup.bind(this) + ); + this.isReady = this.markup.initialize(); + } + + _buildMarkup() { + const container = this.markup.createNode({ + attributes: { + class: "highlighter-container", + }, + }); + + // The root wrapper is used to unzoom the highlighter when needed. + const rootWrapper = this.markup.createNode({ + parent: container, + attributes: { + id: "root", + class: "root", + }, + prefix: this.ID_CLASS_PREFIX, + }); + + const svg = this.markup.createSVGNode({ + nodeType: "svg", + parent: rootWrapper, + attributes: { + id: "elements", + hidden: "true", + width: "100%", + height: "100%", + }, + prefix: this.ID_CLASS_PREFIX, + }); + + // Add a marker tag to the svg root for the arrow tip + this.markerId = "arrow-marker-" + MARKER_COUNTER; + MARKER_COUNTER++; + const marker = this.markup.createSVGNode({ + nodeType: "marker", + parent: svg, + attributes: { + id: this.markerId, + markerWidth: "10", + markerHeight: "5", + orient: "auto", + markerUnits: "strokeWidth", + refX: "10", + refY: "5", + viewBox: "0 0 10 10", + }, + prefix: this.ID_CLASS_PREFIX, + }); + this.markup.createSVGNode({ + nodeType: "path", + parent: marker, + attributes: { + d: "M 0 0 L 10 5 L 0 10 z", + fill: "#08C", + }, + }); + + const shapesGroup = this.markup.createSVGNode({ + nodeType: "g", + parent: svg, + }); + + // Create the 2 polygons (transformed and untransformed) + this.markup.createSVGNode({ + nodeType: "polygon", + parent: shapesGroup, + attributes: { + id: "untransformed", + class: "untransformed", + }, + prefix: this.ID_CLASS_PREFIX, + }); + this.markup.createSVGNode({ + nodeType: "polygon", + parent: shapesGroup, + attributes: { + id: "transformed", + class: "transformed", + }, + prefix: this.ID_CLASS_PREFIX, + }); + + // Create the arrows + for (const nb of ["1", "2", "3", "4"]) { + this.markup.createSVGNode({ + nodeType: "line", + parent: shapesGroup, + attributes: { + id: "line" + nb, + class: "line", + "marker-end": "url(#" + this.markerId + ")", + }, + prefix: this.ID_CLASS_PREFIX, + }); + } + + return container; + } + + /** + * Destroy the nodes. Remove listeners. + */ + destroy() { + AutoRefreshHighlighter.prototype.destroy.call(this); + this.markup.destroy(); + } + + getElement(id) { + return this.markup.getElement(this.ID_CLASS_PREFIX + id); + } + + /** + * Show the highlighter on a given node + */ + _show() { + if (!this._isTransformed(this.currentNode)) { + this.hide(); + return false; + } + + return this._update(); + } + + /** + * Checks if the supplied node is transformed and not inline + */ + _isTransformed(node) { + const style = getComputedStyle(node); + return style && style.transform !== "none" && style.display !== "inline"; + } + + _setPolygonPoints(quad, id) { + const points = []; + for (const point of ["p1", "p2", "p3", "p4"]) { + points.push(quad[point].x + "," + quad[point].y); + } + this.getElement(id).setAttribute("points", points.join(" ")); + } + + _setLinePoints(p1, p2, id) { + const line = this.getElement(id); + line.setAttribute("x1", p1.x); + line.setAttribute("y1", p1.y); + line.setAttribute("x2", p2.x); + line.setAttribute("y2", p2.y); + + const dist = Math.sqrt(Math.pow(p2.x - p1.x, 2) + Math.pow(p2.y - p1.y, 2)); + if (dist < ARROW_LINE_MIN_DISTANCE) { + line.removeAttribute("marker-end"); + } else { + line.setAttribute("marker-end", "url(#" + this.markerId + ")"); + } + } + + /** + * Update the highlighter on the current highlighted node (the one that was + * passed as an argument to show(node)). + * Should be called whenever node size or attributes change + */ + _update() { + setIgnoreLayoutChanges(true); + + // Getting the points for the transformed shape + const quads = this.currentQuads.border; + if ( + !quads.length || + quads[0].bounds.width <= 0 || + quads[0].bounds.height <= 0 + ) { + this._hideShapes(); + return false; + } + + const [quad] = quads; + + // Getting the points for the untransformed shape + const untransformedQuad = getNodeBounds(this.win, this.currentNode); + + this._setPolygonPoints(quad, "transformed"); + this._setPolygonPoints(untransformedQuad, "untransformed"); + for (const nb of ["1", "2", "3", "4"]) { + this._setLinePoints( + untransformedQuad["p" + nb], + quad["p" + nb], + "line" + nb + ); + } + + // Adapt to the current zoom + this.markup.scaleRootElement( + this.currentNode, + this.ID_CLASS_PREFIX + "root" + ); + + this._showShapes(); + + setIgnoreLayoutChanges( + false, + this.highlighterEnv.window.document.documentElement + ); + return true; + } + + /** + * Hide the highlighter, the outline and the infobar. + */ + _hide() { + setIgnoreLayoutChanges(true); + this._hideShapes(); + setIgnoreLayoutChanges( + false, + this.highlighterEnv.window.document.documentElement + ); + } + + _hideShapes() { + this.getElement("elements").setAttribute("hidden", "true"); + } + + _showShapes() { + this.getElement("elements").removeAttribute("hidden"); + } +} + +exports.CssTransformHighlighter = CssTransformHighlighter; diff --git a/devtools/server/actors/highlighters/css/highlighters.css b/devtools/server/actors/highlighters/css/highlighters.css new file mode 100644 index 0000000000..33c8a04aae --- /dev/null +++ b/devtools/server/actors/highlighters/css/highlighters.css @@ -0,0 +1,1059 @@ +/* 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/. */ + +:host { display: contents; } + +.highlighter-container { + --highlighter-accessibility-bounds-color: #6a5acd; + --highlighter-accessibility-bounds-opacity: 0.6; + --highlighter-box-border-color: #444444; + --highlighter-box-content-color: hsl(197, 71%, 73%); + --highlighter-box-margin-color: #edff64; + --highlighter-box-padding-color: #6a5acd; + --highlighter-bubble-text-color: hsl(216, 33%, 97%); + --highlighter-bubble-background-color: hsl(214, 13%, 24%); + --highlighter-bubble-border-color: rgba(255, 255, 255, 0.2); + --highlighter-bubble-arrow-size: 8px; + --highlighter-font-family: message-box; + --highlighter-font-size: 11px; + --highlighter-guide-color: hsl(200, 100%, 40%); + --highlighter-infobar-color: hsl(210, 30%, 85%); + + --grey-40: #b1b1b3; + --red-40: #ff3b6b; + --yellow-60: #d7b600; + --blue-60: #0060df; +} + +/** + * Highlighters are absolute positioned in the page by default. + * A single highlighter can have fixed position in its css class if needed (see below the + * eye dropper or rulers highlighter, for example); but if it has to handle the + * document's scrolling (as rulers does), it would lag a bit behind due the APZ (Async + * Pan/Zoom module), that performs asynchronously panning and zooming on the compositor + * thread rather than the main thread. + */ +.highlighter-container { + position: absolute; + width: 100%; + height: 100%; + /* The container for all highlighters doesn't react to pointer-events by + default. This is because most highlighters cover the whole viewport but + don't contain UIs that need to be accessed. + If your highlighter has UI that needs to be interacted with, add + 'pointer-events:auto;' on its container element. */ + pointer-events: none; +} + +.highlighter-container.box-model { + /* Make the box-model container have a z-index other than auto so it always sits above + other highlighters. */ + z-index: 1; +} + +.highlighter-container [hidden] { + display: none !important; +} + +.highlighter-container [dragging] { + cursor: grabbing; +} + +/* Box Model Highlighter */ + +.box-model-regions { + opacity: 0.6; +} + +/* Box model regions can be faded (see the onlyRegionArea option in + highlighters.js) in order to only display certain regions. */ +.box-model-regions [faded] { + display: none; +} + +.box-model-content { + fill: var(--highlighter-box-content-color); +} + +.box-model-padding { + fill: var(--highlighter-box-padding-color); +} + +.box-model-border { + fill: var(--highlighter-box-border-color); +} + +.box-model-margin { + fill: var(--highlighter-box-margin-color); +} + +.box-model-content, +.box-model-padding, +.box-model-border, +.box-model-margin { + stroke: none; +} + +.box-model-guide-top, +.box-model-guide-right, +.box-model-guide-bottom, +.box-model-guide-left { + stroke: var(--highlighter-guide-color); + stroke-dasharray: 5 3; + shape-rendering: crispEdges; +} + +@media (prefers-reduced-motion) { + .use-simple-highlighters :is( + .box-model-content, + .box-model-padding, + .box-model-border, + .box-model-margin + ) { + fill: none; + stroke-width: 3; + } + + .use-simple-highlighters .box-model-content { + stroke: var(--highlighter-box-content-color); + } + + .use-simple-highlighters .box-model-padding { + stroke: var(--highlighter-box-padding-color); + } + + .use-simple-highlighters .box-model-border { + stroke: var(--highlighter-box-border-color); + } + + .use-simple-highlighters .box-model-margin { + stroke: var(--highlighter-box-margin-color); + } +} + +/* Highlighter - Infobar */ + +[class$="infobar-container"] { + position: absolute; + max-width: 95%; + + font: var(--highlighter-font-family); + font-size: var(--highlighter-font-size); +} + +[class$="infobar"] { + position: relative; + + padding: 5px; + min-width: 75px; + + border-radius: 3px; + background: var(--highlighter-bubble-background-color) no-repeat padding-box; + + color: var(--highlighter-bubble-text-color); + text-shadow: none; + + border: 1px solid var(--highlighter-bubble-border-color); +} + +/* Arrows */ + +[class$="infobar-container"] > [class$="infobar"]:before { + left: calc(50% - var(--highlighter-bubble-arrow-size)); + border: var(--highlighter-bubble-arrow-size) solid + var(--highlighter-bubble-border-color); +} + +[class$="infobar-container"] > [class$="infobar"]:after { + left: calc(50% - 7px); + border: 7px solid var(--highlighter-bubble-background-color); +} + +[class$="infobar-container"] > [class$="infobar"]:before, +[class$="infobar-container"] > [class$="infobar"]:after { + content: ""; + display: none; + position: absolute; + height: 0; + width: 0; + border-left-color: transparent; + border-right-color: transparent; +} + +[class$="infobar-container"][position="top"]:not([hide-arrow]) + > [class$="infobar"]:before, +[class$="infobar-container"][position="top"]:not([hide-arrow]) + > [class$="infobar"]:after { + border-bottom: 0; + top: 100%; + display: block; +} + +[class$="infobar-container"][position="bottom"]:not([hide-arrow]) + > [class$="infobar"]:before, +[class$="infobar-container"][position="bottom"]:not([hide-arrow]) + > [class$="infobar"]:after { + border-top: 0; + bottom: 100%; + display: block; +} + +/* Text Container */ + +[class$="infobar-text"] { + overflow: hidden; + white-space: nowrap; + direction: ltr; + padding-bottom: 1px; + display: flex; + justify-content: center; + max-width: 768px; +} + +.box-model-infobar-tagname { + color: hsl(285, 100%, 75%); +} + +.box-model-infobar-id { + color: hsl(103, 46%, 54%); + overflow: hidden; + text-overflow: ellipsis; +} + +.box-model-infobar-classes, +.box-model-infobar-pseudo-classes { + color: hsl(200, 74%, 57%); + overflow: hidden; + text-overflow: ellipsis; +} + +[class$="infobar-dimensions"], +[class$="infobar-grid-type"], +[class$="infobar-flex-type"] { + border-inline-start: 1px solid #5a6169; + margin-inline-start: 6px; + padding-inline-start: 6px; +} + +[class$="infobar-grid-type"]:empty, +[class$="infobar-flex-type"]:empty { + display: none; +} + +[class$="infobar-dimensions"] { + color: var(--highlighter-infobar-color); +} + +[class$="infobar-grid-type"], +[class$="infobar-flex-type"] { + color: var(--grey-40); +} + +/* CSS Grid Highlighter */ + +.css-grid-canvas { + position: absolute; + pointer-events: none; + top: 0; + left: 0; + image-rendering: -moz-crisp-edges; +} + +.css-grid-regions { + opacity: 0.6; +} + +.css-grid-areas, +.css-grid-cells { + opacity: 0.5; + stroke: none; +} + +.css-grid-area-infobar-name, +.css-grid-cell-infobar-position, +.css-grid-line-infobar-number { + color: hsl(285, 100%, 75%); +} + +.css-grid-line-infobar-names:not(:empty) { + color: var(--highlighter-infobar-color); + border-inline-start: 1px solid #5a6169; + margin-inline-start: 6px; + padding-inline-start: 6px; +} + +/* CSS Transform Highlighter */ + +.css-transform-transformed { + fill: var(--highlighter-box-content-color); + opacity: 0.8; +} + +.css-transform-untransformed { + fill: #66cc52; + opacity: 0.8; +} + +.css-transform-transformed, +.css-transform-untransformed, +.css-transform-line { + stroke: var(--highlighter-guide-color); + stroke-dasharray: 5 3; + stroke-width: 2; +} + +/* Element Geometry Highlighter */ + +.geometry-editor-root { + /* The geometry editor can be interacted with, so it needs to react to + pointer events */ + pointer-events: auto; + user-select: none; +} + +.geometry-editor-offset-parent { + stroke: var(--highlighter-guide-color); + shape-rendering: crispEdges; + stroke-dasharray: 5 3; + fill: transparent; +} + +.geometry-editor-current-node { + stroke: var(--highlighter-guide-color); + fill: var(--highlighter-box-content-color); + shape-rendering: crispEdges; + opacity: 0.6; +} + +.geometry-editor-arrow { + stroke: var(--highlighter-guide-color); + shape-rendering: crispEdges; +} + +.geometry-editor-root circle { + stroke: var(--highlighter-guide-color); + fill: var(--highlighter-box-content-color); +} + +.geometry-editor-handler-top, +.geometry-editor-handler-bottom { + cursor: ns-resize; +} + +.geometry-editor-handler-right, +.geometry-editor-handler-left { + cursor: ew-resize; +} + +[dragging] .geometry-editor-handler-top, +[dragging] .geometry-editor-handler-right, +[dragging] .geometry-editor-handler-bottom, +[dragging] .geometry-editor-handler-left { + cursor: grabbing; +} + +.geometry-editor-handler-top.dragging, +.geometry-editor-handler-right.dragging, +.geometry-editor-handler-bottom.dragging, +.geometry-editor-handler-left.dragging { + fill: var(--highlighter-guide-color); +} + +.geometry-editor-label-bubble { + fill: var(--highlighter-bubble-background-color); + shape-rendering: crispEdges; +} + +.geometry-editor-label-text { + fill: var(--highlighter-bubble-text-color); + font: var(--highlighter-font-family); + font-size: 10px; + text-anchor: middle; + dominant-baseline: middle; +} + +/* Rulers Highlighter */ + +.rulers-highlighter-elements { + shape-rendering: crispEdges; + pointer-events: none; + position: fixed; + top: 0; + left: 0; +} + +.rulers-highlighter-elements > g { + opacity: 0.8; +} + +.rulers-highlighter-elements > g > rect { + fill: #fff; +} + +.rulers-highlighter-ruler-graduations { + stroke: #bebebe; +} + +.rulers-highlighter-ruler-markers { + stroke: #202020; +} + +.rulers-highlighter-horizontal-labels > text, +.rulers-highlighter-vertical-labels > text { + stroke: none; + fill: #202020; + font: var(--highlighter-font-family); + font-size: 9px; + dominant-baseline: hanging; +} + +.rulers-highlighter-horizontal-labels > text { + text-anchor: start; +} + +.rulers-highlighter-vertical-labels > text { + transform: rotate(-90deg); + text-anchor: end; +} + +.viewport-size-highlighter-viewport-infobar-container { + shape-rendering: crispEdges; + background-color: rgba(255, 255, 255, 0.7); + font: var(--highlighter-font-family); + position: fixed; + top: 30px; + right: 0px; + font-size: 12px; + padding: 4px; +} + +/* Measuring Tool Highlighter */ + +.measuring-tool-tool { + pointer-events: auto; +} + +.measuring-tool-root { + position: absolute; + top: 0; + left: 0; + pointer-events: auto; + cursor: crosshair; +} + +.measuring-tool-elements { + position: absolute; +} + +.measuring-tool-root path { + shape-rendering: geometricPrecision; + pointer-events: auto; +} + +.measuring-tool-root .measuring-tool-box-path, +.measuring-tool-root .measuring-tool-diagonal-path { + fill: rgba(135, 206, 235, 0.6); + stroke: var(--highlighter-guide-color); +} + +.measuring-tool-root circle { + stroke: var(--highlighter-guide-color); + stroke-width: 2px; + fill: #fff; + vector-effect: non-scaling-stroke; +} + +.measuring-tool-root circle.highlight { + fill: var(--highlighter-guide-color); +} + +.measuring-tool-handler-top, +.measuring-tool-handler-bottom { + cursor: ns-resize; +} + +.measuring-tool-handler-right, +.measuring-tool-handler-left { + cursor: ew-resize; +} + +.measuring-tool-handler-topleft, +.measuring-tool-handler-bottomright { + cursor: nwse-resize; +} + +.measuring-tool-handler-topright, +.measuring-tool-handler-bottomleft { + cursor: nesw-resize; +} + +.mirrored .measuring-tool-handler-topleft, +.mirrored .measuring-tool-handler-bottomright { + cursor: nesw-resize; +} + +.mirrored .measuring-tool-handler-topright, +.mirrored .measuring-tool-handler-bottomleft { + cursor: nwse-resize; +} + +[class^=measuring-tool-handler].dragging { + fill: var(--highlighter-guide-color); +} + +.dragging .measuring-tool-box-path, +.dragging .measuring-tool-diagonal-path { + opacity: 0.45; +} + +.measuring-tool-label-size, +.measuring-tool-label-position { + position: absolute; + top: 0; + left: 0; + display: inline-block; + border-radius: 4px; + padding: 4px; + white-space: pre-line; + font: var(--highlighter-font-family); + font-size: 10px; + pointer-events: none; + user-select: none; + box-sizing: border-box; +} + +.measuring-tool-label-position { + color: #fff; + background: hsla(214, 13%, 24%, 0.8); +} + +.measuring-tool-label-size { + color: var(--highlighter-bubble-text-color); + background: var(--highlighter-bubble-background-color); + border: 1px solid var(--highlighter-bubble-border-color); + line-height: 1.5em; +} + +[class^=measuring-tool-guide] { + stroke: var(--highlighter-guide-color); + stroke-dasharray: 5 3; + shape-rendering: crispEdges; +} + +/* Eye Dropper */ + +.eye-dropper-root { + --magnifier-width: 96px; + --magnifier-height: 96px; + /* Width accounts for all color formats (hsl being the longest) */ + --label-width: 160px; + --label-height: 23px; + --background-color: #e0e0e0; + color: #333; + + position: fixed; + /* Tool start position. This should match the X/Y defines in JS */ + top: 100px; + left: 100px; + + /* Prevent interacting with the page when hovering and clicking */ + pointer-events: auto; + + /* Offset the UI so it is centered around the pointer */ + transform: translate( + calc(var(--magnifier-width) / -2), + calc(var(--magnifier-height) / -2) + ); + + filter: drop-shadow(0 0 1px rgba(0, 0, 0, 0.4)); + + /* We don't need the UI to be reversed in RTL locales, otherwise the # would appear + to the right of the hex code. Force LTR */ + direction: ltr; +} + +.eye-dropper-canvas { + image-rendering: -moz-crisp-edges; + cursor: none; + width: var(--magnifier-width); + height: var(--magnifier-height); + border-radius: 50%; + box-shadow: 0 0 0 3px var(--background-color); + display: block; +} + +.eye-dropper-color-container { + background-color: var(--background-color); + border-radius: 2px; + width: var(--label-width); + height: var(--label-height); + position: relative; + + --label-horizontal-center: translateX( + calc((var(--magnifier-width) - var(--label-width)) / 2) + ); + --label-horizontal-left: translateX( + calc((-1 * var(--label-width) + var(--magnifier-width) / 2)) + ); + --label-horizontal-right: translateX(calc(var(--magnifier-width) / 2)); + --label-vertical-top: translateY( + calc((-1 * var(--magnifier-height)) - var(--label-height)) + ); + + /* By default the color label container sits below the canvas. + Here we just center it horizontally */ + transform: var(--label-horizontal-center); + transition: transform 0.1s ease-in-out; +} + +/* If there isn't enough space below the canvas, we move the label container to the top */ +.eye-dropper-root[top] .eye-dropper-color-container { + transform: var(--label-horizontal-center) var(--label-vertical-top); +} + +/* If there isn't enough space right of the canvas to horizontally center the label + container, offset it to the left */ +.eye-dropper-root[left] .eye-dropper-color-container { + transform: var(--label-horizontal-left); +} + +.eye-dropper-root[left][top] .eye-dropper-color-container { + transform: var(--label-horizontal-left) var(--label-vertical-top); +} + +/* If there isn't enough space left of the canvas to horizontally center the label + container, offset it to the right */ +.eye-dropper-root[right] .eye-dropper-color-container { + transform: var(--label-horizontal-right); +} + +.eye-dropper-root[right][top] .eye-dropper-color-container { + transform: var(--label-horizontal-right) var(--label-vertical-top); +} + +.eye-dropper-color-preview { + width: 16px; + height: 16px; + position: absolute; + inset-inline-start: 3px; + inset-block-start: 3px; + box-shadow: 0px 0px 0px black; + border: solid 1px #fff; +} + +.eye-dropper-color-value { + text-shadow: 1px 1px 1px #fff; + font: var(--highlighter-font-family); + font-size: var(--highlighter-font-size); + text-align: center; + padding: 4px 0; +} + +/* Paused Debugger Overlay */ + +.paused-dbg-root { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + + width: 100vw; + height: 100vh; + + display: flex; + align-items: center; + flex-direction: column; + + /* We don't have access to DevTools themes here, but some of these colors come from the + themes. Theme variable names are given in comments. */ + --text-color: #585959; /* --theme-body-color-alt */ + --toolbar-background: #fcfcfc; /* --theme-toolbar-background */ + --toolbar-border: #dde1e4; /* --theme-splitter-color */ + --toolbar-box-shadow: 0 2px 2px 0 rgba(155, 155, 155, 0.26); /* --rdm-box-shadow */ + --overlay-background: #dde1e4a8; +} + +.paused-dbg-root[overlay] { + background-color: var(--overlay-background); + pointer-events: auto; +} + +.paused-dbg-toolbar { + /* Show the toolbar at the top, but not too high to prevent it overlaping OS toolbar on Android */ + margin-top: 30px; + display: inline-flex; + user-select: none; + + color: var(--text-color); + box-shadow: var(--toolbar-box-shadow); + background-color: var(--toolbar-background); + border: 1px solid var(--toolbar-border); + border-radius: 4px; + + font: var(--highlighter-font-family); + font-size: var(--highlighter-font-size); +} + +.paused-dbg-toolbar button { + margin: 8px 4px 6px 6px; + width: 16px; + height: 16px; + mask-repeat: no-repeat; + mask-position: center; + mask-size: 16px 16px; + background-color: var(--text-color); + + border: 0px; + appearance: none; +} + +.paused-dbg-divider { + width: 1px; + height: 16px; + margin-top: 10px; + background-color: var(--toolbar-border); +} + +.paused-dbg-reason, +.paused-dbg-step-button-wrapper, +.paused-dbg-resume-button-wrapper { + margin-top: 2px; + margin-bottom: 2px; +} + +.paused-dbg-step-button-wrapper, +.paused-dbg-resume-button-wrapper { + margin-left: 2px; + margin-right: 2px; +} + +button.paused-dbg-step-button { + margin-left: 6px; + margin-right: 6px; + mask-image: url(resource://devtools-shared-images/stepOver.svg); + padding: 0; +} + +button.paused-dbg-resume-button { + margin-right: 6px; + mask-image: url(resource://devtools-shared-images/resume.svg); + padding: 0; +} + +.paused-dbg-step-button-wrapper.hover, +.paused-dbg-resume-button-wrapper.hover { + background-color: var(--toolbar-border); + border-radius: 2px; +} + +.paused-dbg-reason { + padding: 3px 16px; + margin: 8px 0px; + font: var(--highlighter-font-family); + font-size: var(--highlighter-font-size); +} + + +/* Remote Node Picker Notice Highlighter */ + +#node-picker-notice-root { + position: fixed; + max-width: 100vw; + /* Position at the bottom of the screen so it doesn't get into the user's way */ + bottom: 0; + left: 0; + right: 0; + + z-index: 2; + + display: flex; + align-items: center; + flex-direction: column; + + /* We don't have access to DevTools themes here, but some of these colors come from the + themes. Theme variable names are given in comments. */ + --text-color: #585959; /* --theme-body-color-alt */ + --toolbar-background: #fcfcfc; /* --theme-toolbar-background */ + --toolbar-border: #dde1e4; /* --theme-splitter-color */ + --toolbar-button-hover-background: rgba(12, 12, 13, 0.15); /* --theme-toolbarbutton-hover-background */ + --toolbar-box-shadow: 0 2px 2px 0 rgba(155, 155, 155, 0.26); /* --rdm-box-shadow */ +} + +#node-picker-notice-root[overlay] { + pointer-events: auto; +} + +#node-picker-notice-toolbar { + display: flex; + align-items: center; + gap: 8px; + + padding: 8px 16px; + + color: var(--text-color); + box-shadow: var(--toolbar-box-shadow); + background-color: var(--toolbar-background); + border: 1px solid var(--toolbar-border); + border-radius: 2px; + + font: var(--highlighter-font-family); + font-size: var(--highlighter-font-size); + + user-select: none; +} + +#node-picker-notice-info { + font: var(--highlighter-font-family); + font-size: var(--highlighter-font-size); + text-align: center; +} + +#node-picker-notice-icon { + width: 16px; + height: 16px; + + background-image: url(resource://devtools-shared-images/command-pick.svg); + -moz-context-properties: fill; + fill: currentColor; + + background-size: contain; + background-repeat: no-repeat; +} + +#node-picker-notice-icon.touch { + background-image: url(resource://devtools-shared-images/command-pick-remote-touch.svg); +} + + +#node-picker-notice-hide-button { + border: 0px; + border-radius: 2px; + appearance: none; + background-color: var(--toolbar-border); + color: currentColor; + font-size: 1em; + padding-inline: 4px; +} + +/* We can't use :hover as it wouldn't work if the page is paused, so we add a specific class for this */ +#node-picker-notice-hide-button.hover { + background-color: var(--toolbar-button-hover-background); +} + +/* Shapes highlighter */ + +.shapes-root { + pointer-events: none; +} + +.shapes-shape-container { + position: absolute; + overflow: visible; +} + +.shapes-polygon, +.shapes-ellipse, +.shapes-rect, +.shapes-bounding-box, +.shapes-rotate-line, +.shapes-quad { + fill: transparent; + stroke: var(--highlighter-guide-color); + shape-rendering: geometricPrecision; + vector-effect: non-scaling-stroke; +} + +.shapes-markers { + fill: #fff; +} + +.shapes-markers-outline { + fill: var(--highlighter-guide-color); +} + +.shapes-marker-hover { + fill: var(--highlighter-guide-color); +} + +/* Accessible highlighter */ + +.accessible-infobar { + min-width: unset; +} + +.accessible-infobar-text { + display: grid; + grid-template-areas: + "role name" + "audit audit"; + grid-template-columns: min-content 1fr; +} + +.accessible-infobar-role { + grid-area: role; + color: #9cdcfe; +} + +.accessible-infobar-name { + grid-area: name; +} + +.accessible-infobar-audit { + grid-area: audit; + padding-top: 5px; + padding-bottom: 2px; +} + +.accessible-bounds { + fill: var(--highlighter-accessibility-bounds-color); + opacity: var(--highlighter-accessibility-bounds-opacity); +} + +@media (prefers-reduced-motion) { + .use-simple-highlighters .accessible-bounds { + fill: none; + stroke: var(--highlighter-accessibility-bounds-color); + stroke-width: 3; + } +} + +.accessible-infobar-name, +.accessible-infobar-audit { + color: var(--highlighter-infobar-color); +} + +.accessible-infobar-audit .accessible-contrast-ratio:empty::before, +.accessible-infobar-audit .accessible-contrast-ratio:empty::after, +.accessible-infobar-name:empty { + display: none; +} + +.accessible-infobar-audit .accessible-contrast-ratio::before { + content: ""; + height: 8px; + width: 8px; + display: inline-flex; + background-color: var(--accessibility-highlighter-contrast-ratio-color); + box-shadow: 0 0 0 1px var(--grey-40), + 4px 3px var(--accessibility-highlighter-contrast-ratio-bg), + 4px 3px 0 1px var(--grey-40); + margin-inline-start: 3px; + margin-inline-end: 9px; +} + +.accessible-infobar-audit .accessible-contrast-ratio::after { + margin-inline-start: 2px; +} + +.accessible-infobar-audit .accessible-contrast-ratio.AA::after, +.accessible-infobar-audit .accessible-contrast-ratio.AAA::after { + color: #90E274; +} + +.accessible-infobar-audit .accessible-audit::before, +.accessible-infobar-audit .accessible-contrast-ratio.FAIL::after { + display: inline-block; + width: 12px; + height: 12px; + content: ""; + vertical-align: -2px; + background-position: center; + background-repeat: no-repeat; + -moz-context-properties: fill; +} + +.accessible-infobar-audit .accessible-contrast-ratio.FAIL:after { + color: #E57180; + margin-inline-start: 3px; + background-image: url(resource://devtools-shared-images/error-small.svg); + fill: var(--red-40); +} + +.accessible-infobar-audit .accessible-contrast-ratio.AA::after { + content: "AA\2713"; +} + +.accessible-infobar-audit .accessible-contrast-ratio.AAA::after { + content: "AAA\2713"; +} + +.accessible-infobar-audit .accessible-contrast-ratio-label, +.accessible-infobar-audit .accessible-contrast-ratio-separator::before { + margin-inline-end: 3px; +} + +.accessible-infobar-audit .accessible-contrast-ratio-separator::before { + content: "-"; + margin-inline-start: 3px; +} + +.accessible-infobar-audit .accessible-audit { + display: block; + padding-block-end: 5px; +} + +.accessible-infobar-audit .accessible-audit:last-child { + padding-block-end: 0; +} + +.accessible-infobar-audit .accessible-audit::before { + margin-inline-end: 4px; + background-image: none; + fill: currentColor; +} + +.accessible-infobar-audit .accessible-audit.FAIL::before { + background-image: url(resource://devtools-shared-images/error-small.svg); + fill: var(--red-40); +} + +.accessible-infobar-audit .accessible-audit.WARNING::before { + background-image: url(chrome://devtools/skin/images/alert-small.svg); + fill: var(--yellow-60); +} + +.accessible-infobar-audit .accessible-audit.BEST_PRACTICES::before { + background-image: url(chrome://devtools/skin/images/info-small.svg); +} + +.accessible-infobar-name { + border-inline-start: 1px solid #5a6169; + margin-inline-start: 6px; + padding-inline-start: 6px; +} + +/* Tabbing-order highlighter */ + +.tabbing-order-infobar { + min-width: unset; +} + +.tabbing-order .tabbing-order-infobar-container { + font-size:calc(var(--highlighter-font-size) + 2px); +} + +.tabbing-order .tabbing-order-bounds { + position: absolute; + display: block; + outline: 2px solid #000; + outline-offset: -2px; +} + +.tabbing-order.focused .tabbing-order-bounds { + outline-color: var(--blue-60); +} + +.tabbing-order.focused .tabbing-order-infobar { + background-color: var(--blue-60); +} + +.tabbing-order.focused .tabbing-order-infobar-text { + text-decoration: underline; +} + +.tabbing-order.focused .tabbing-order-infobar:after { + border-top-color: var(--blue-60); + border-bottom-color: var(--blue-60); +} diff --git a/devtools/server/actors/highlighters/css/moz.build b/devtools/server/actors/highlighters/css/moz.build new file mode 100644 index 0000000000..6bdf0f9579 --- /dev/null +++ b/devtools/server/actors/highlighters/css/moz.build @@ -0,0 +1,9 @@ +# -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*- +# vim: set filetype=python: +# 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/. + +DevToolsModules( + "highlighters.css", +) diff --git a/devtools/server/actors/highlighters/eye-dropper.js b/devtools/server/actors/highlighters/eye-dropper.js new file mode 100644 index 0000000000..8a206bc84f --- /dev/null +++ b/devtools/server/actors/highlighters/eye-dropper.js @@ -0,0 +1,608 @@ +/* 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"; + +// Eye-dropper tool. This is implemented as a highlighter so it can be displayed in the +// content page. +// It basically displays a magnifier that tracks mouse moves and shows a magnified version +// of the page. On click, it samples the color at the pixel being hovered. + +const { + CanvasFrameAnonymousContentHelper, +} = require("resource://devtools/server/actors/highlighters/utils/markup.js"); +const EventEmitter = require("resource://devtools/shared/event-emitter.js"); +const { rgbToHsl } = + require("resource://devtools/shared/css/color.js").colorUtils; +const { + getCurrentZoom, + getFrameOffsets, +} = require("resource://devtools/shared/layout/utils.js"); + +loader.lazyGetter(this, "clipboardHelper", () => + Cc["@mozilla.org/widget/clipboardhelper;1"].getService(Ci.nsIClipboardHelper) +); +loader.lazyGetter(this, "l10n", () => + Services.strings.createBundle( + "chrome://devtools-shared/locale/eyedropper.properties" + ) +); + +const ZOOM_LEVEL_PREF = "devtools.eyedropper.zoom"; +const FORMAT_PREF = "devtools.defaultColorUnit"; +// Width of the canvas. +const MAGNIFIER_WIDTH = 96; +// Height of the canvas. +const MAGNIFIER_HEIGHT = 96; +// Start position, when the tool is first shown. This should match the top/left position +// defined in CSS. +const DEFAULT_START_POS_X = 100; +const DEFAULT_START_POS_Y = 100; +// How long to wait before closing after copy. +const CLOSE_DELAY = 750; + +/** + * The EyeDropper allows the user to select a color of a pixel within the content page, + * showing a magnified circle and color preview while the user hover the page. + */ +class EyeDropper { + #pageEventListenersAbortController; + constructor(highlighterEnv) { + EventEmitter.decorate(this); + + this.highlighterEnv = highlighterEnv; + this.markup = new CanvasFrameAnonymousContentHelper( + this.highlighterEnv, + this._buildMarkup.bind(this) + ); + this.isReady = this.markup.initialize(); + + // Get a couple of settings from prefs. + this.format = Services.prefs.getCharPref(FORMAT_PREF); + this.eyeDropperZoomLevel = Services.prefs.getIntPref(ZOOM_LEVEL_PREF); + } + + ID_CLASS_PREFIX = "eye-dropper-"; + + get win() { + return this.highlighterEnv.window; + } + + _buildMarkup() { + // Highlighter main container. + const container = this.markup.createNode({ + attributes: { class: "highlighter-container" }, + }); + + // Wrapper element. + const wrapper = this.markup.createNode({ + parent: container, + attributes: { + id: "root", + class: "root", + hidden: "true", + }, + prefix: this.ID_CLASS_PREFIX, + }); + + // The magnifier canvas element. + this.markup.createNode({ + parent: wrapper, + nodeType: "canvas", + attributes: { + id: "canvas", + class: "canvas", + width: MAGNIFIER_WIDTH, + height: MAGNIFIER_HEIGHT, + }, + prefix: this.ID_CLASS_PREFIX, + }); + + // The color label element. + const colorLabelContainer = this.markup.createNode({ + parent: wrapper, + attributes: { class: "color-container" }, + prefix: this.ID_CLASS_PREFIX, + }); + this.markup.createNode({ + nodeType: "div", + parent: colorLabelContainer, + attributes: { id: "color-preview", class: "color-preview" }, + prefix: this.ID_CLASS_PREFIX, + }); + this.markup.createNode({ + nodeType: "div", + parent: colorLabelContainer, + attributes: { id: "color-value", class: "color-value" }, + prefix: this.ID_CLASS_PREFIX, + }); + + return container; + } + + destroy() { + this.hide(); + this.markup.destroy(); + } + + getElement(id) { + return this.markup.getElement(this.ID_CLASS_PREFIX + id); + } + + /** + * Show the eye-dropper highlighter. + * + * @param {DOMNode} node The node which document the highlighter should be inserted in. + * @param {Object} options The options object may contain the following properties: + * - {Boolean} copyOnSelect: Whether selecting a color should copy it to the clipboard. + * - {String|null} screenshot: a dataURL representation of the page screenshot. If null, + * the eyedropper will use `drawWindow` to get the the screenshot + * (⚠️ but it won't handle remote frames). + */ + show(node, options = {}) { + if (this.highlighterEnv.isXUL) { + return false; + } + + this.options = options; + + // Get the page's current zoom level. + this.pageZoom = getCurrentZoom(this.win); + + // Take a screenshot of the viewport. This needs to be done first otherwise the + // eyedropper UI will appear in the screenshot itself (since the UI is injected as + // native anonymous content in the page). + // Once the screenshot is ready, the magnified area will be drawn. + this.prepareImageCapture(options.screenshot); + + // Start listening for user events. + const { pageListenerTarget } = this.highlighterEnv; + this.#pageEventListenersAbortController = new AbortController(); + const signal = this.#pageEventListenersAbortController.signal; + pageListenerTarget.addEventListener("mousemove", this, { signal }); + pageListenerTarget.addEventListener("click", this, { + signal, + useCapture: true, + }); + pageListenerTarget.addEventListener("keydown", this, { signal }); + pageListenerTarget.addEventListener("DOMMouseScroll", this, { signal }); + pageListenerTarget.addEventListener("FullZoomChange", this, { signal }); + + // Show the eye-dropper. + this.getElement("root").removeAttribute("hidden"); + + // Prepare the canvas context on which we're drawing the magnified page portion. + this.ctx = this.getElement("canvas").getCanvasContext(); + this.ctx.imageSmoothingEnabled = false; + + this.magnifiedArea = { + width: MAGNIFIER_WIDTH, + height: MAGNIFIER_HEIGHT, + x: DEFAULT_START_POS_X, + y: DEFAULT_START_POS_Y, + }; + + this.moveTo(DEFAULT_START_POS_X, DEFAULT_START_POS_Y); + + // Focus the content so the keyboard can be used. + this.win.focus(); + + // Make sure we receive mouse events when the debugger has paused execution + // in the page. + this.win.document.setSuppressedEventListener(this); + + return true; + } + + /** + * Hide the eye-dropper highlighter. + */ + hide() { + this.pageImage = null; + + if (this.#pageEventListenersAbortController) { + this.#pageEventListenersAbortController.abort(); + this.#pageEventListenersAbortController = null; + + const rootElement = this.getElement("root"); + rootElement.setAttribute("hidden", "true"); + rootElement.removeAttribute("drawn"); + + this.emit("hidden"); + + this.win.document.setSuppressedEventListener(null); + } + } + + /** + * Convert a base64 png data-uri to raw binary data. + */ + #dataURItoBlob(dataURI) { + const byteString = atob(dataURI.split(",")[1]); + + // write the bytes of the string to an ArrayBuffer + const buffer = new ArrayBuffer(byteString.length); + // Update the buffer through a typed array. + const typedArray = new Uint8Array(buffer); + for (let i = 0; i < byteString.length; i++) { + typedArray[i] = byteString.charCodeAt(i); + } + + return new Blob([buffer], { type: "image/png" }); + } + + /** + * Create an image bitmap from the page screenshot, draw the eyedropper and set the + * "drawn" attribute on the "root" element once it's done. + * + * @params {String|null} screenshot: a dataURL representation of the page screenshot. + * If null, we'll use `drawWindow` to get the the page screenshot + * (⚠️ but it won't handle remote frames). + */ + async prepareImageCapture(screenshot) { + let imageSource; + if (screenshot) { + imageSource = this.#dataURItoBlob(screenshot); + } else { + imageSource = getWindowAsImageData(this.win); + } + + // We need to transform the blob/imageData to something drawWindow will consume. + // An ImageBitmap works well. We could have used an Image, but doing so results + // in errors if the page defines CSP headers. + const image = await this.win.createImageBitmap(imageSource); + + this.pageImage = image; + // We likely haven't drawn anything yet (no mousemove events yet), so start now. + this.draw(); + + // Set an attribute on the root element to be able to run tests after the first draw + // was done. + this.getElement("root").setAttribute("drawn", "true"); + } + + /** + * Get the number of cells (blown-up pixels) per direction in the grid. + */ + get cellsWide() { + // Canvas will render whole "pixels" (cells) only, and an even number at that. Round + // up to the nearest even number of pixels. + let cellsWide = Math.ceil( + this.magnifiedArea.width / this.eyeDropperZoomLevel + ); + cellsWide += cellsWide % 2; + + return cellsWide; + } + + /** + * Get the size of each cell (blown-up pixel) in the grid. + */ + get cellSize() { + return this.magnifiedArea.width / this.cellsWide; + } + + /** + * Get index of cell in the center of the grid. + */ + get centerCell() { + return Math.floor(this.cellsWide / 2); + } + + /** + * Get color of center cell in the grid. + */ + get centerColor() { + const pos = this.centerCell * this.cellSize + this.cellSize / 2; + const rgb = this.ctx.getImageData(pos, pos, 1, 1).data; + return rgb; + } + + draw() { + // If the image of the page isn't ready yet, bail out, we'll draw later on mousemove. + if (!this.pageImage) { + return; + } + + const { width, height, x, y } = this.magnifiedArea; + + const zoomedWidth = width / this.eyeDropperZoomLevel; + const zoomedHeight = height / this.eyeDropperZoomLevel; + + const sx = x - zoomedWidth / 2; + const sy = y - zoomedHeight / 2; + const sw = zoomedWidth; + const sh = zoomedHeight; + + this.ctx.drawImage(this.pageImage, sx, sy, sw, sh, 0, 0, width, height); + + // Draw the grid on top, but only at 3x or more, otherwise it's too busy. + if (this.eyeDropperZoomLevel > 2) { + this.drawGrid(); + } + + this.drawCrosshair(); + + // Update the color preview and value. + const rgb = this.centerColor; + this.getElement("color-preview").setAttribute( + "style", + `background-color:${toColorString(rgb, "rgb")};` + ); + this.getElement("color-value").setTextContent( + toColorString(rgb, this.format) + ); + } + + /** + * Draw a grid on the canvas representing pixel boundaries. + */ + drawGrid() { + const { width, height } = this.magnifiedArea; + + this.ctx.lineWidth = 1; + this.ctx.strokeStyle = "rgba(143, 143, 143, 0.2)"; + + for (let i = 0; i < width; i += this.cellSize) { + this.ctx.beginPath(); + this.ctx.moveTo(i - 0.5, 0); + this.ctx.lineTo(i - 0.5, height); + this.ctx.stroke(); + + this.ctx.beginPath(); + this.ctx.moveTo(0, i - 0.5); + this.ctx.lineTo(width, i - 0.5); + this.ctx.stroke(); + } + } + + /** + * Draw a box on the canvas to highlight the center cell. + */ + drawCrosshair() { + const pos = this.centerCell * this.cellSize; + + this.ctx.lineWidth = 1; + this.ctx.lineJoin = "miter"; + this.ctx.strokeStyle = "rgba(0, 0, 0, 1)"; + this.ctx.strokeRect( + pos - 1.5, + pos - 1.5, + this.cellSize + 2, + this.cellSize + 2 + ); + + this.ctx.strokeStyle = "rgba(255, 255, 255, 1)"; + this.ctx.strokeRect(pos - 0.5, pos - 0.5, this.cellSize, this.cellSize); + } + + handleEvent(e) { + switch (e.type) { + case "mousemove": + // We might be getting an event from a child frame, so account for the offset. + const [xOffset, yOffset] = getFrameOffsets(this.win, e.target); + const x = xOffset + e.pageX - this.win.scrollX; + const y = yOffset + e.pageY - this.win.scrollY; + // Update the zoom area. + this.magnifiedArea.x = x * this.pageZoom; + this.magnifiedArea.y = y * this.pageZoom; + // Redraw the portion of the screenshot that is now under the mouse. + this.draw(); + // And move the eye-dropper's UI so it follows the mouse. + this.moveTo(x, y); + break; + // Note: when events are suppressed we will only get mousedown/mouseup and + // not any click events. + case "click": + case "mouseup": + this.selectColor(); + break; + case "keydown": + this.handleKeyDown(e); + break; + case "DOMMouseScroll": + // Prevent scrolling. That's because we only took a screenshot of the viewport, so + // scrolling out of the viewport wouldn't draw the expected things. In the future + // we can take the screenshot again on scroll, but for now it doesn't seem + // important. + e.preventDefault(); + break; + case "FullZoomChange": + this.hide(); + this.show(); + break; + } + } + + moveTo(x, y) { + const root = this.getElement("root"); + root.setAttribute("style", `top:${y}px;left:${x}px;`); + + // Move the label container to the top if the magnifier is close to the bottom edge. + if (y >= this.win.innerHeight - MAGNIFIER_HEIGHT) { + root.setAttribute("top", ""); + } else { + root.removeAttribute("top"); + } + + // Also offset the label container to the right or left if the magnifier is close to + // the edge. + root.removeAttribute("left"); + root.removeAttribute("right"); + if (x <= MAGNIFIER_WIDTH) { + root.setAttribute("right", ""); + } else if (x >= this.win.innerWidth - MAGNIFIER_WIDTH) { + root.setAttribute("left", ""); + } + } + + /** + * Select the current color that's being previewed. Depending on the current options, + * selecting might mean copying to the clipboard and closing the + */ + selectColor() { + let onColorSelected = Promise.resolve(); + if (this.options.copyOnSelect) { + onColorSelected = this.copyColor(); + } + + this.emit("selected", toColorString(this.centerColor, this.format)); + onColorSelected.then(() => this.hide(), console.error); + } + + /** + * Handler for the keydown event. Either select the color or move the panel in a + * direction depending on the key pressed. + */ + handleKeyDown(e) { + // Bail out early if any unsupported modifier is used, so that we let + // keyboard shortcuts through. + if (e.metaKey || e.ctrlKey || e.altKey) { + return; + } + + if (e.keyCode === e.DOM_VK_RETURN) { + this.selectColor(); + e.preventDefault(); + return; + } + + if (e.keyCode === e.DOM_VK_ESCAPE) { + this.emit("canceled"); + this.hide(); + e.preventDefault(); + return; + } + + let offsetX = 0; + let offsetY = 0; + let modifier = 1; + + if (e.keyCode === e.DOM_VK_LEFT) { + offsetX = -1; + } else if (e.keyCode === e.DOM_VK_RIGHT) { + offsetX = 1; + } else if (e.keyCode === e.DOM_VK_UP) { + offsetY = -1; + } else if (e.keyCode === e.DOM_VK_DOWN) { + offsetY = 1; + } + + if (e.shiftKey) { + modifier = 10; + } + + offsetY *= modifier; + offsetX *= modifier; + + if (offsetX !== 0 || offsetY !== 0) { + this.magnifiedArea.x = cap( + this.magnifiedArea.x + offsetX, + 0, + this.win.innerWidth * this.pageZoom + ); + this.magnifiedArea.y = cap( + this.magnifiedArea.y + offsetY, + 0, + this.win.innerHeight * this.pageZoom + ); + + this.draw(); + + this.moveTo( + this.magnifiedArea.x / this.pageZoom, + this.magnifiedArea.y / this.pageZoom + ); + + e.preventDefault(); + } + } + + /** + * Copy the currently inspected color to the clipboard. + * @return {Promise} Resolves when the copy has been done (after a delay that is used to + * let users know that something was copied). + */ + copyColor() { + // Copy to the clipboard. + const color = toColorString(this.centerColor, this.format); + clipboardHelper.copyString(color); + + // Provide some feedback. + this.getElement("color-value").setTextContent( + "✓ " + l10n.GetStringFromName("colorValue.copied") + ); + + // Hide the tool after a delay. + clearTimeout(this._copyTimeout); + return new Promise(resolve => { + this._copyTimeout = setTimeout(resolve, CLOSE_DELAY); + }); + } +} + +exports.EyeDropper = EyeDropper; + +/** + * Draw the visible portion of the window on a canvas and get the resulting ImageData. + * @param {Window} win + * @return {ImageData} The image data for the window. + */ +function getWindowAsImageData(win) { + const canvas = win.document.createElementNS( + "http://www.w3.org/1999/xhtml", + "canvas" + ); + const scale = getCurrentZoom(win); + const width = win.innerWidth; + const height = win.innerHeight; + canvas.width = width * scale; + canvas.height = height * scale; + canvas.mozOpaque = true; + + const ctx = canvas.getContext("2d"); + + ctx.scale(scale, scale); + ctx.drawWindow(win, win.scrollX, win.scrollY, width, height, "#fff"); + + return ctx.getImageData(0, 0, canvas.width, canvas.height); +} + +/** + * Get a formatted CSS color string from a color value. + * @param {array} rgb Rgb values of a color to format. + * @param {string} format Format of string. One of "hex", "rgb", "hsl", "name". + * @return {string} Formatted color value, e.g. "#FFF" or "hsl(20, 10%, 10%)". + */ +function toColorString(rgb, format) { + const [r, g, b] = rgb; + + switch (format) { + case "hex": + return hexString(rgb); + case "rgb": + return "rgb(" + r + ", " + g + ", " + b + ")"; + case "hsl": + const [h, s, l] = rgbToHsl(rgb); + return "hsl(" + h + ", " + s + "%, " + l + "%)"; + case "name": + const str = InspectorUtils.rgbToColorName(r, g, b) || hexString(rgb); + return str; + default: + return hexString(rgb); + } +} + +/** + * Produce a hex-formatted color string from rgb values. + * @param {array} rgb Rgb values of color to stringify. + * @return {string} Hex formatted string for color, e.g. "#FFEE00". + */ +function hexString([r, g, b]) { + const val = (1 << 24) + (r << 16) + (g << 8) + (b << 0); + return "#" + val.toString(16).substr(-6); +} + +function cap(value, min, max) { + return Math.max(min, Math.min(value, max)); +} diff --git a/devtools/server/actors/highlighters/flexbox.js b/devtools/server/actors/highlighters/flexbox.js new file mode 100644 index 0000000000..820e4f8a73 --- /dev/null +++ b/devtools/server/actors/highlighters/flexbox.js @@ -0,0 +1,1033 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const { + AutoRefreshHighlighter, +} = require("resource://devtools/server/actors/highlighters/auto-refresh.js"); +const { apply } = require("resource://devtools/shared/layout/dom-matrix-2d.js"); +const { + CANVAS_SIZE, + DEFAULT_COLOR, + clearRect, + drawLine, + drawRect, + getCurrentMatrix, + updateCanvasElement, + updateCanvasPosition, +} = require("resource://devtools/server/actors/highlighters/utils/canvas.js"); +const { + CanvasFrameAnonymousContentHelper, + getComputedStyle, +} = require("resource://devtools/server/actors/highlighters/utils/markup.js"); +const { + getAbsoluteScrollOffsetsForNode, + getCurrentZoom, + getDisplayPixelRatio, + getUntransformedQuad, + getWindowDimensions, + setIgnoreLayoutChanges, +} = require("resource://devtools/shared/layout/utils.js"); + +const FLEXBOX_LINES_PROPERTIES = { + edge: { + lineDash: [5, 3], + }, + item: { + lineDash: [0, 0], + }, + alignItems: { + lineDash: [0, 0], + }, +}; + +const FLEXBOX_CONTAINER_PATTERN_LINE_DASH = [5, 3]; // px +const FLEXBOX_CONTAINER_PATTERN_WIDTH = 14; // px +const FLEXBOX_CONTAINER_PATTERN_HEIGHT = 14; // px +const FLEXBOX_JUSTIFY_CONTENT_PATTERN_WIDTH = 7; // px +const FLEXBOX_JUSTIFY_CONTENT_PATTERN_HEIGHT = 7; // px + +/** + * Cached used by `FlexboxHighlighter.getFlexContainerPattern`. + */ +const gCachedFlexboxPattern = new Map(); + +const FLEXBOX = "flexbox"; +const JUSTIFY_CONTENT = "justify-content"; + +/** + * The FlexboxHighlighter is the class that overlays a visual canvas on top of + * display: [inline-]flex elements. + * + * @param {String} options.color + * The color that should be used to draw the highlighter for this flexbox. + * Structure: + * <div class="highlighter-container"> + * <div id="flexbox-root" class="flexbox-root"> + * <canvas id="flexbox-canvas" + * class="flexbox-canvas" + * width="4096" + * height="4096" + * hidden="true"> + * </canvas> + * </div> + * </div> + */ +class FlexboxHighlighter extends AutoRefreshHighlighter { + constructor(highlighterEnv) { + super(highlighterEnv); + + this.ID_CLASS_PREFIX = "flexbox-"; + + this.markup = new CanvasFrameAnonymousContentHelper( + this.highlighterEnv, + this._buildMarkup.bind(this) + ); + this.isReady = this.markup.initialize(); + + this.onPageHide = this.onPageHide.bind(this); + this.onWillNavigate = this.onWillNavigate.bind(this); + + this.highlighterEnv.on("will-navigate", this.onWillNavigate); + + const { pageListenerTarget } = highlighterEnv; + pageListenerTarget.addEventListener("pagehide", this.onPageHide); + + // Initialize the <canvas> position to the top left corner of the page + this._canvasPosition = { + x: 0, + y: 0, + }; + + this._ignoreZoom = true; + + // Calling `updateCanvasPosition` anyway since the highlighter could be initialized + // on a page that has scrolled already. + updateCanvasPosition( + this._canvasPosition, + this._scroll, + this.win, + this._winDimensions + ); + } + + _buildMarkup() { + const container = this.markup.createNode({ + attributes: { + class: "highlighter-container", + }, + }); + + const root = this.markup.createNode({ + parent: container, + attributes: { + id: "root", + class: "root", + }, + prefix: this.ID_CLASS_PREFIX, + }); + + // We use a <canvas> element because there is an arbitrary number of items and texts + // to draw which wouldn't be possible with HTML or SVG without having to insert and + // remove the whole markup on every update. + this.markup.createNode({ + parent: root, + nodeType: "canvas", + attributes: { + id: "canvas", + class: "canvas", + hidden: "true", + width: CANVAS_SIZE, + height: CANVAS_SIZE, + }, + prefix: this.ID_CLASS_PREFIX, + }); + + return container; + } + + clearCache() { + gCachedFlexboxPattern.clear(); + } + + destroy() { + const { highlighterEnv } = this; + highlighterEnv.off("will-navigate", this.onWillNavigate); + + const { pageListenerTarget } = highlighterEnv; + + if (pageListenerTarget) { + pageListenerTarget.removeEventListener("pagehide", this.onPageHide); + } + + this.markup.destroy(); + + // Clear the pattern cache to avoid dead object exceptions (Bug 1342051). + this.clearCache(); + + this.axes = null; + this.crossAxisDirection = null; + this.flexData = null; + this.mainAxisDirection = null; + this.transform = null; + + AutoRefreshHighlighter.prototype.destroy.call(this); + } + + /** + * Draw the justify content for a given flex item (left, top, right, bottom) position. + */ + drawJustifyContent(left, top, right, bottom) { + const { devicePixelRatio } = this.win; + this.ctx.fillStyle = this.getJustifyContentPattern(devicePixelRatio); + drawRect(this.ctx, left, top, right, bottom, this.currentMatrix); + this.ctx.fill(); + } + + get canvas() { + return this.getElement("canvas"); + } + + get color() { + return this.options.color || DEFAULT_COLOR; + } + + get container() { + return this.currentNode; + } + + get ctx() { + return this.canvas.getCanvasContext("2d"); + } + + getElement(id) { + return this.markup.getElement(this.ID_CLASS_PREFIX + id); + } + + /** + * Gets the flexbox container pattern used to render the container regions. + * + * @param {Number} devicePixelRatio + * The device pixel ratio we want the pattern for. + * @return {CanvasPattern} flex container pattern. + */ + getFlexContainerPattern(devicePixelRatio) { + let flexboxPatternMap = null; + + if (gCachedFlexboxPattern.has(devicePixelRatio)) { + flexboxPatternMap = gCachedFlexboxPattern.get(devicePixelRatio); + } else { + flexboxPatternMap = new Map(); + } + + if (gCachedFlexboxPattern.has(FLEXBOX)) { + return gCachedFlexboxPattern.get(FLEXBOX); + } + + // Create the diagonal lines pattern for the rendering the flexbox gaps. + const canvas = this.markup.createNode({ nodeType: "canvas" }); + const width = (canvas.width = + FLEXBOX_CONTAINER_PATTERN_WIDTH * devicePixelRatio); + const height = (canvas.height = + FLEXBOX_CONTAINER_PATTERN_HEIGHT * devicePixelRatio); + + const ctx = canvas.getContext("2d"); + ctx.save(); + ctx.setLineDash(FLEXBOX_CONTAINER_PATTERN_LINE_DASH); + ctx.beginPath(); + ctx.translate(0.5, 0.5); + + ctx.moveTo(0, 0); + ctx.lineTo(width, height); + + ctx.strokeStyle = this.color; + ctx.stroke(); + ctx.restore(); + + const pattern = ctx.createPattern(canvas, "repeat"); + flexboxPatternMap.set(FLEXBOX, pattern); + gCachedFlexboxPattern.set(devicePixelRatio, flexboxPatternMap); + + return pattern; + } + + /** + * Gets the flexbox justify content pattern used to render the justify content regions. + * + * @param {Number} devicePixelRatio + * The device pixel ratio we want the pattern for. + * @return {CanvasPattern} flex justify content pattern. + */ + getJustifyContentPattern(devicePixelRatio) { + let flexboxPatternMap = null; + + if (gCachedFlexboxPattern.has(devicePixelRatio)) { + flexboxPatternMap = gCachedFlexboxPattern.get(devicePixelRatio); + } else { + flexboxPatternMap = new Map(); + } + + if (flexboxPatternMap.has(JUSTIFY_CONTENT)) { + return flexboxPatternMap.get(JUSTIFY_CONTENT); + } + + // Create the inversed diagonal lines pattern + // for the rendering the justify content gaps. + const canvas = this.markup.createNode({ nodeType: "canvas" }); + const zoom = getCurrentZoom(this.win); + const width = (canvas.width = + FLEXBOX_JUSTIFY_CONTENT_PATTERN_WIDTH * devicePixelRatio * zoom); + const height = (canvas.height = + FLEXBOX_JUSTIFY_CONTENT_PATTERN_HEIGHT * devicePixelRatio * zoom); + + const ctx = canvas.getContext("2d"); + ctx.save(); + ctx.setLineDash(FLEXBOX_CONTAINER_PATTERN_LINE_DASH); + ctx.beginPath(); + ctx.translate(0.5, 0.5); + + ctx.moveTo(0, height); + ctx.lineTo(width, 0); + + ctx.strokeStyle = this.color; + ctx.stroke(); + ctx.restore(); + + const pattern = ctx.createPattern(canvas, "repeat"); + flexboxPatternMap.set(JUSTIFY_CONTENT, pattern); + gCachedFlexboxPattern.set(devicePixelRatio, flexboxPatternMap); + + return pattern; + } + + /** + * The AutoRefreshHighlighter's _hasMoved method returns true only if the + * element's quads have changed. Override it so it also returns true if the + * flex container and its flex items have changed. + */ + _hasMoved() { + const hasMoved = AutoRefreshHighlighter.prototype._hasMoved.call(this); + + if (!this.computedStyle) { + this.computedStyle = getComputedStyle(this.container); + } + + const flex = this.container.getAsFlexContainer(); + + const oldCrossAxisDirection = this.crossAxisDirection; + this.crossAxisDirection = flex ? flex.crossAxisDirection : null; + const newCrossAxisDirection = this.crossAxisDirection; + + const oldMainAxisDirection = this.mainAxisDirection; + this.mainAxisDirection = flex ? flex.mainAxisDirection : null; + const newMainAxisDirection = this.mainAxisDirection; + + // Concatenate the axes to simplify conditionals. + this.axes = `${this.mainAxisDirection} ${this.crossAxisDirection}`; + + const oldFlexData = this.flexData; + this.flexData = getFlexData(this.container); + const hasFlexDataChanged = compareFlexData(oldFlexData, this.flexData); + + const oldAlignItems = this.alignItemsValue; + this.alignItemsValue = this.computedStyle.alignItems; + const newAlignItems = this.alignItemsValue; + + const oldFlexDirection = this.flexDirection; + this.flexDirection = this.computedStyle.flexDirection; + const newFlexDirection = this.flexDirection; + + const oldFlexWrap = this.flexWrap; + this.flexWrap = this.computedStyle.flexWrap; + const newFlexWrap = this.flexWrap; + + const oldJustifyContent = this.justifyContentValue; + this.justifyContentValue = this.computedStyle.justifyContent; + const newJustifyContent = this.justifyContentValue; + + const oldTransform = this.transformValue; + this.transformValue = this.computedStyle.transform; + const newTransform = this.transformValue; + + return ( + hasMoved || + hasFlexDataChanged || + oldAlignItems !== newAlignItems || + oldFlexDirection !== newFlexDirection || + oldFlexWrap !== newFlexWrap || + oldJustifyContent !== newJustifyContent || + oldCrossAxisDirection !== newCrossAxisDirection || + oldMainAxisDirection !== newMainAxisDirection || + oldTransform !== newTransform + ); + } + + _hide() { + this.alignItemsValue = null; + this.computedStyle = null; + this.flexData = null; + this.flexDirection = null; + this.flexWrap = null; + this.justifyContentValue = null; + + setIgnoreLayoutChanges(true); + this._hideFlexbox(); + setIgnoreLayoutChanges(false, this.highlighterEnv.document.documentElement); + } + + _hideFlexbox() { + this.getElement("canvas").setAttribute("hidden", "true"); + } + + /** + * The <canvas>'s position needs to be updated if the page scrolls too much, in order + * to give the illusion that it always covers the viewport. + */ + _scrollUpdate() { + const hasUpdated = updateCanvasPosition( + this._canvasPosition, + this._scroll, + this.win, + this._winDimensions + ); + + if (hasUpdated) { + this._update(); + } + } + + _show() { + this._hide(); + return this._update(); + } + + _showFlexbox() { + this.getElement("canvas").removeAttribute("hidden"); + } + + /** + * If a page hide event is triggered for current window's highlighter, hide the + * highlighter. + */ + onPageHide({ target }) { + if (target.defaultView === this.win) { + this.hide(); + } + } + + /** + * Called when the page will-navigate. Used to hide the flexbox highlighter and clear + * the cached gap patterns and avoid using DeadWrapper obejcts as gap patterns the + * next time. + */ + onWillNavigate({ isTopLevel }) { + this.clearCache(); + + if (isTopLevel) { + this.hide(); + } + } + + renderFlexContainer() { + if (!this.currentQuads.content || !this.currentQuads.content[0]) { + return; + } + + const { devicePixelRatio } = this.win; + const containerQuad = getUntransformedQuad(this.container, "content"); + const { width, height } = containerQuad.getBounds(); + + this.setupCanvas({ + lineDash: FLEXBOX_LINES_PROPERTIES.alignItems.lineDash, + lineWidthMultiplier: 2, + }); + + this.ctx.fillStyle = this.getFlexContainerPattern(devicePixelRatio); + + drawRect(this.ctx, 0, 0, width, height, this.currentMatrix); + + // Find current angle of outer flex element by measuring the angle of two arbitrary + // points, then rotate canvas, so the hash pattern stays 45deg to the boundary. + const p1 = apply(this.currentMatrix, [0, 0]); + const p2 = apply(this.currentMatrix, [1, 0]); + const angleRad = Math.atan2(p2[1] - p1[1], p2[0] - p1[0]); + this.ctx.rotate(angleRad); + + this.ctx.fill(); + this.ctx.stroke(); + this.ctx.restore(); + } + + renderFlexItems() { + if ( + !this.flexData || + !this.currentQuads.content || + !this.currentQuads.content[0] + ) { + return; + } + + this.setupCanvas({ + lineDash: FLEXBOX_LINES_PROPERTIES.item.lineDash, + }); + + for (const flexLine of this.flexData.lines) { + for (const flexItem of flexLine.items) { + const { left, top, right, bottom } = flexItem.rect; + + clearRect(this.ctx, left, top, right, bottom, this.currentMatrix); + drawRect(this.ctx, left, top, right, bottom, this.currentMatrix); + this.ctx.stroke(); + } + } + + this.ctx.restore(); + } + + renderFlexLines() { + if ( + !this.flexData || + !this.currentQuads.content || + !this.currentQuads.content[0] + ) { + return; + } + + const lineWidth = getDisplayPixelRatio(this.win); + const options = { matrix: this.currentMatrix }; + const { width: containerWidth, height: containerHeight } = + getUntransformedQuad(this.container, "content").getBounds(); + + this.setupCanvas({ + useContainerScrollOffsets: true, + }); + + for (const flexLine of this.flexData.lines) { + const { crossStart, crossSize } = flexLine; + + switch (this.axes) { + case "horizontal-lr vertical-tb": + case "horizontal-lr vertical-bt": + case "horizontal-rl vertical-tb": + case "horizontal-rl vertical-bt": + clearRect( + this.ctx, + 0, + crossStart, + containerWidth, + crossStart + crossSize, + this.currentMatrix + ); + + // Avoid drawing the start flex line when they overlap with the flex container. + if (crossStart != 0) { + drawLine( + this.ctx, + 0, + crossStart, + containerWidth, + crossStart, + options + ); + this.ctx.stroke(); + } + + // Avoid drawing the end flex line when they overlap with the flex container. + if (crossStart + crossSize < containerHeight - lineWidth * 2) { + drawLine( + this.ctx, + 0, + crossStart + crossSize, + containerWidth, + crossStart + crossSize, + options + ); + this.ctx.stroke(); + } + break; + case "vertical-tb horizontal-lr": + case "vertical-bt horizontal-rl": + clearRect( + this.ctx, + crossStart, + 0, + crossStart + crossSize, + containerHeight, + this.currentMatrix + ); + + // Avoid drawing the start flex line when they overlap with the flex container. + if (crossStart != 0) { + drawLine( + this.ctx, + crossStart, + 0, + crossStart, + containerHeight, + options + ); + this.ctx.stroke(); + } + + // Avoid drawing the end flex line when they overlap with the flex container. + if (crossStart + crossSize < containerWidth - lineWidth * 2) { + drawLine( + this.ctx, + crossStart + crossSize, + 0, + crossStart + crossSize, + containerHeight, + options + ); + this.ctx.stroke(); + } + break; + case "vertical-bt horizontal-lr": + case "vertical-tb horizontal-rl": + clearRect( + this.ctx, + containerWidth - crossStart, + 0, + containerWidth - crossStart - crossSize, + containerHeight, + this.currentMatrix + ); + + // Avoid drawing the start flex line when they overlap with the flex container. + if (crossStart != 0) { + drawLine( + this.ctx, + containerWidth - crossStart, + 0, + containerWidth - crossStart, + containerHeight, + options + ); + this.ctx.stroke(); + } + + // Avoid drawing the end flex line when they overlap with the flex container. + if (crossStart + crossSize < containerWidth - lineWidth * 2) { + drawLine( + this.ctx, + containerWidth - crossStart - crossSize, + 0, + containerWidth - crossStart - crossSize, + containerHeight, + options + ); + this.ctx.stroke(); + } + break; + } + } + + this.ctx.restore(); + } + + /** + * Clear the whole alignment container along the main axis for each flex item. + */ + // eslint-disable-next-line complexity + renderJustifyContent() { + if ( + !this.flexData || + !this.currentQuads.content || + !this.currentQuads.content[0] + ) { + return; + } + + const { width: containerWidth, height: containerHeight } = + getUntransformedQuad(this.container, "content").getBounds(); + + this.setupCanvas({ + lineDash: FLEXBOX_LINES_PROPERTIES.alignItems.lineDash, + offset: (getDisplayPixelRatio(this.win) / 2) % 1, + skipLineAndStroke: true, + useContainerScrollOffsets: true, + }); + + for (const flexLine of this.flexData.lines) { + const { crossStart, crossSize } = flexLine; + let mainStart = 0; + + // In these two situations mainStart goes from right to left so set it's + // value as appropriate. + if ( + this.axes === "horizontal-lr vertical-bt" || + this.axes === "horizontal-rl vertical-tb" + ) { + mainStart = containerWidth; + } + + for (const flexItem of flexLine.items) { + const { left, top, right, bottom } = flexItem.rect; + + switch (this.axes) { + case "horizontal-lr vertical-tb": + case "horizontal-rl vertical-bt": + this.drawJustifyContent( + mainStart, + crossStart, + left, + crossStart + crossSize + ); + mainStart = right; + break; + case "horizontal-lr vertical-bt": + case "horizontal-rl vertical-tb": + this.drawJustifyContent( + right, + crossStart, + mainStart, + crossStart + crossSize + ); + mainStart = left; + break; + case "vertical-tb horizontal-lr": + case "vertical-bt horizontal-rl": + this.drawJustifyContent( + crossStart, + mainStart, + crossStart + crossSize, + top + ); + mainStart = bottom; + break; + case "vertical-bt horizontal-lr": + case "vertical-tb horizontal-rl": + this.drawJustifyContent( + containerWidth - crossStart - crossSize, + mainStart, + containerWidth - crossStart, + top + ); + mainStart = bottom; + break; + } + } + + // Draw the last justify-content area after the last flex item. + switch (this.axes) { + case "horizontal-lr vertical-tb": + case "horizontal-rl vertical-bt": + this.drawJustifyContent( + mainStart, + crossStart, + containerWidth, + crossStart + crossSize + ); + break; + case "horizontal-lr vertical-bt": + case "horizontal-rl vertical-tb": + this.drawJustifyContent( + 0, + crossStart, + mainStart, + crossStart + crossSize + ); + break; + case "vertical-tb horizontal-lr": + case "vertical-bt horizontal-rl": + this.drawJustifyContent( + crossStart, + mainStart, + crossStart + crossSize, + containerHeight + ); + break; + case "vertical-bt horizontal-lr": + case "vertical-tb horizontal-rl": + this.drawJustifyContent( + containerWidth - crossStart - crossSize, + mainStart, + containerWidth - crossStart, + containerHeight + ); + break; + } + } + + this.ctx.restore(); + } + + /** + * Set up the canvas with the given options prior to drawing. + * + * @param {String} [options.lineDash = null] + * An Array of numbers that specify distances to alternately draw a + * line and a gap (in coordinate space units). If the number of + * elements in the array is odd, the elements of the array get copied + * and concatenated. For example, [5, 15, 25] will become + * [5, 15, 25, 5, 15, 25]. If the array is empty, the line dash list is + * cleared and line strokes return to being solid. + * + * We use the following constants here: + * FLEXBOX_LINES_PROPERTIES.edge.lineDash, + * FLEXBOX_LINES_PROPERTIES.item.lineDash + * FLEXBOX_LINES_PROPERTIES.alignItems.lineDash + * @param {Number} [options.lineWidthMultiplier = 1] + * The width of the line. + * @param {Number} [options.offset = `(displayPixelRatio / 2) % 1`] + * The single line width used to obtain a crisp line. + * @param {Boolean} [options.skipLineAndStroke = false] + * Skip the setting of lineWidth and strokeStyle. + * @param {Boolean} [options.useContainerScrollOffsets = false] + * Take the flexbox container's scroll and zoom offsets into account. + * This is needed for drawing flex lines and justify content when the + * flexbox container itself is display:scroll. + */ + setupCanvas({ + lineDash = null, + lineWidthMultiplier = 1, + offset = (getDisplayPixelRatio(this.win) / 2) % 1, + skipLineAndStroke = false, + useContainerScrollOffsets = false, + }) { + const { devicePixelRatio } = this.win; + const lineWidth = getDisplayPixelRatio(this.win); + const zoom = getCurrentZoom(this.win); + const style = getComputedStyle(this.container); + const position = style.position; + let offsetX = this._canvasPosition.x; + let offsetY = this._canvasPosition.y; + + if (useContainerScrollOffsets) { + offsetX += this.container.scrollLeft / zoom; + offsetY += this.container.scrollTop / zoom; + } + + // If the flexbox container is position:fixed we need to subtract the scroll + // positions of all ancestral elements. + if (position === "fixed") { + const { scrollLeft, scrollTop } = getAbsoluteScrollOffsetsForNode( + this.container + ); + offsetX -= scrollLeft / zoom; + offsetY -= scrollTop / zoom; + } + + const canvasX = Math.round(offsetX * devicePixelRatio * zoom); + const canvasY = Math.round(offsetY * devicePixelRatio * zoom); + + this.ctx.save(); + this.ctx.translate(offset - canvasX, offset - canvasY); + + if (lineDash) { + this.ctx.setLineDash(lineDash); + } + + if (!skipLineAndStroke) { + this.ctx.lineWidth = lineWidth * lineWidthMultiplier; + this.ctx.strokeStyle = this.color; + } + } + + _update() { + setIgnoreLayoutChanges(true); + + const root = this.getElement("root"); + + // Hide the root element and force the reflow in order to get the proper window's + // dimensions without increasing them. + root.setAttribute("style", "display: none"); + this.win.document.documentElement.offsetWidth; + this._winDimensions = getWindowDimensions(this.win); + const { width, height } = this._winDimensions; + + // Updates the <canvas> element's position and size. + // It also clear the <canvas>'s drawing context. + updateCanvasElement( + this.canvas, + this._canvasPosition, + this.win.devicePixelRatio, + { + zoomWindow: this.win, + } + ); + + // Update the current matrix used in our canvas' rendering + const { currentMatrix, hasNodeTransformations } = getCurrentMatrix( + this.container, + this.win, + { + ignoreWritingModeAndTextDirection: true, + } + ); + this.currentMatrix = currentMatrix; + this.hasNodeTransformations = hasNodeTransformations; + + if (this.prevColor != this.color) { + this.clearCache(); + } + this.renderFlexContainer(); + this.renderFlexLines(); + this.renderJustifyContent(); + this.renderFlexItems(); + this._showFlexbox(); + this.prevColor = this.color; + + root.setAttribute( + "style", + `position: absolute; width: ${width}px; height: ${height}px; overflow: hidden` + ); + + setIgnoreLayoutChanges(false, this.highlighterEnv.document.documentElement); + return true; + } +} + +/** + * Returns an object representation of the Flex data object and its array of FlexLine + * and FlexItem objects along with the DOMRects of the flex items. + * + * @param {DOMNode} container + * The flex container. + * @return {Object|null} representation of the Flex data object. + */ +function getFlexData(container) { + const flex = container.getAsFlexContainer(); + + if (!flex) { + return null; + } + + return { + lines: flex.getLines().map(line => { + return { + crossSize: line.crossSize, + crossStart: line.crossStart, + firstBaselineOffset: line.firstBaselineOffset, + growthState: line.growthState, + lastBaselineOffset: line.lastBaselineOffset, + items: line.getItems().map(item => { + return { + crossMaxSize: item.crossMaxSize, + crossMinSize: item.crossMinSize, + mainBaseSize: item.mainBaseSize, + mainDeltaSize: item.mainDeltaSize, + mainMaxSize: item.mainMaxSize, + mainMinSize: item.mainMinSize, + node: item.node, + rect: getRectFromFlexItemValues(item, container), + }; + }), + }; + }), + }; +} + +/** + * Given a FlexItemValues, return a DOMRect representing the flex item taking + * into account its flex container's border and padding. + * + * @param {FlexItemValues} item + * The FlexItemValues for which we need the DOMRect. + * @param {DOMNode} + * Flex container containing the flex item. + * @return {DOMRect} representing the flex item. + */ +function getRectFromFlexItemValues(item, container) { + const rect = item.frameRect; + const domRect = new DOMRect(rect.x, rect.y, rect.width, rect.height); + const win = container.ownerGlobal; + const style = win.getComputedStyle(container); + const borderLeftWidth = parseInt(style.borderLeftWidth, 10) || 0; + const borderTopWidth = parseInt(style.borderTopWidth, 10) || 0; + const paddingLeft = parseInt(style.paddingLeft, 10) || 0; + const paddingTop = parseInt(style.paddingTop, 10) || 0; + const scrollX = container.scrollLeft || 0; + const scrollY = container.scrollTop || 0; + + domRect.x -= paddingLeft + scrollX; + domRect.y -= paddingTop + scrollY; + + if (style.overflow === "visible" || style.overflow === "clip") { + domRect.x -= borderLeftWidth; + domRect.y -= borderTopWidth; + } + + return domRect; +} + +/** + * Returns whether or not the flex data has changed. + * + * @param {Flex} oldFlexData + * The old Flex data object. + * @param {Flex} newFlexData + * The new Flex data object. + * @return {Boolean} true if the flex data has changed and false otherwise. + */ +// eslint-disable-next-line complexity +function compareFlexData(oldFlexData, newFlexData) { + if (!oldFlexData || !newFlexData) { + return true; + } + + const oldLines = oldFlexData.lines; + const newLines = newFlexData.lines; + + if (oldLines.length !== newLines.length) { + return true; + } + + for (let i = 0; i < oldLines.length; i++) { + const oldLine = oldLines[i]; + const newLine = newLines[i]; + + if ( + oldLine.crossSize !== newLine.crossSize || + oldLine.crossStart !== newLine.crossStart || + oldLine.firstBaselineOffset !== newLine.firstBaselineOffset || + oldLine.growthState !== newLine.growthState || + oldLine.lastBaselineOffset !== newLine.lastBaselineOffset + ) { + return true; + } + + const oldItems = oldLine.items; + const newItems = newLine.items; + + if (oldItems.length !== newItems.length) { + return true; + } + + for (let j = 0; j < oldItems.length; j++) { + const oldItem = oldItems[j]; + const newItem = newItems[j]; + + if ( + oldItem.crossMaxSize !== newItem.crossMaxSize || + oldItem.crossMinSize !== newItem.crossMinSize || + oldItem.mainBaseSize !== newItem.mainBaseSize || + oldItem.mainDeltaSize !== newItem.mainDeltaSize || + oldItem.mainMaxSize !== newItem.mainMaxSize || + oldItem.mainMinSize !== newItem.mainMinSize + ) { + return true; + } + + const oldItemRect = oldItem.rect; + const newItemRect = newItem.rect; + + // We are using DOMRects so we only need to compare x, y, width and + // height (left, top, right and bottom are calculated from these values). + if ( + oldItemRect.x !== newItemRect.x || + oldItemRect.y !== newItemRect.y || + oldItemRect.width !== newItemRect.width || + oldItemRect.height !== newItemRect.height + ) { + return true; + } + } + } + + return false; +} + +exports.FlexboxHighlighter = FlexboxHighlighter; diff --git a/devtools/server/actors/highlighters/fonts.js b/devtools/server/actors/highlighters/fonts.js new file mode 100644 index 0000000000..0fe6b066c7 --- /dev/null +++ b/devtools/server/actors/highlighters/fonts.js @@ -0,0 +1,121 @@ +/* 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"; + +loader.lazyRequireGetter( + this, + "loadSheet", + "resource://devtools/shared/layout/utils.js", + true +); +loader.lazyRequireGetter( + this, + "removeSheet", + "resource://devtools/shared/layout/utils.js", + true +); + +// How many text runs are we highlighting at a time. There may be many text runs, and we +// want to prevent performance problems. +const MAX_TEXT_RANGES = 100; + +// This stylesheet is inserted into the page to customize the color of the selected text +// runs. +// Note that this color is defined as --highlighter-content-color in the highlighters.css +// file, and corresponds to the box-model content color. We want to give it an opacity of +// 0.6 here. +const STYLESHEET_URI = + "data:text/css," + + encodeURIComponent( + "::selection{background-color:hsl(197,71%,73%,.6)!important;}" + ); + +/** + * This highlighter highlights runs of text in the page that have been rendered given a + * certain font. The highlighting is done with window selection ranges, so no extra + * markup is being inserted into the content page. + */ +class FontsHighlighter { + constructor(highlighterEnv) { + this.env = highlighterEnv; + } + + destroy() { + this.hide(); + this.env = this.currentNode = null; + } + + get currentNodeDocument() { + if (!this.currentNode) { + return this.env.document; + } + + if (this.currentNode.nodeType === this.currentNode.DOCUMENT_NODE) { + return this.currentNode; + } + + return this.currentNode.ownerDocument; + } + + /** + * Show the highlighter for a given node. + * @param {DOMNode} node The node in which we want to search for text runs. + * @param {Object} options A bunch of options that can be set: + * - {String} name The actual font name to look for in the node. + * - {String} CSSFamilyName The CSS font-family name given to this font. + */ + show(node, options) { + this.currentNode = node; + const doc = this.currentNodeDocument; + + // Get all of the fonts used to render content inside the node. + const searchRange = doc.createRange(); + searchRange.selectNodeContents(node); + + const fonts = InspectorUtils.getUsedFontFaces(searchRange, MAX_TEXT_RANGES); + + // Find the ones we want, based on the provided option. + const matchingFonts = fonts.filter( + f => f.CSSFamilyName === options.CSSFamilyName && f.name === options.name + ); + if (!matchingFonts.length) { + return; + } + + // Load the stylesheet that will customize the color of the highlighter (using a + // ::selection rule). + loadSheet(this.env.window, STYLESHEET_URI); + + // Create a multi-selection in the page to highlight the text runs. + const selection = doc.defaultView.getSelection(); + selection.removeAllRanges(); + + for (const matchingFont of matchingFonts) { + for (const range of matchingFont.ranges) { + selection.addRange(range); + } + } + } + + hide() { + // No node was highlighted before, don't need to continue any further. + if (!this.currentNode) { + return; + } + + try { + removeSheet(this.env.window, STYLESHEET_URI); + } catch (e) { + // Silently fail here as we might not have inserted the stylesheet at all. + } + + // Simply remove all current ranges in the seletion. + const doc = this.currentNodeDocument; + const selection = doc.defaultView.getSelection(); + selection.removeAllRanges(); + } +} + +exports.FontsHighlighter = FontsHighlighter; diff --git a/devtools/server/actors/highlighters/geometry-editor.js b/devtools/server/actors/highlighters/geometry-editor.js new file mode 100644 index 0000000000..ce8ec92bd5 --- /dev/null +++ b/devtools/server/actors/highlighters/geometry-editor.js @@ -0,0 +1,808 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const { + AutoRefreshHighlighter, +} = require("resource://devtools/server/actors/highlighters/auto-refresh.js"); +const { + CanvasFrameAnonymousContentHelper, + getComputedStyle, +} = require("resource://devtools/server/actors/highlighters/utils/markup.js"); +const { + setIgnoreLayoutChanges, + getAdjustedQuads, + getCurrentZoom, +} = require("resource://devtools/shared/layout/utils.js"); +const { + getCSSStyleRules, +} = require("resource://devtools/shared/inspector/css-logic.js"); + +const GEOMETRY_LABEL_SIZE = 6; + +// List of all DOM Events subscribed directly to the document from the +// Geometry Editor highlighter +const DOM_EVENTS = ["mousemove", "mouseup", "pagehide"]; + +const _dragging = Symbol("geometry/dragging"); + +/** + * Element geometry properties helper that gives names of position and size + * properties. + */ +var GeoProp = { + SIDES: ["top", "right", "bottom", "left"], + SIZES: ["width", "height"], + + allProps() { + return [...this.SIDES, ...this.SIZES]; + }, + + isSide(name) { + return this.SIDES.includes(name); + }, + + isSize(name) { + return this.SIZES.includes(name); + }, + + containsSide(names) { + return names.some(name => this.SIDES.includes(name)); + }, + + containsSize(names) { + return names.some(name => this.SIZES.includes(name)); + }, + + isHorizontal(name) { + return name === "left" || name === "right" || name === "width"; + }, + + isInverted(name) { + return name === "right" || name === "bottom"; + }, + + mainAxisStart(name) { + return this.isHorizontal(name) ? "left" : "top"; + }, + + crossAxisStart(name) { + return this.isHorizontal(name) ? "top" : "left"; + }, + + mainAxisSize(name) { + return this.isHorizontal(name) ? "width" : "height"; + }, + + crossAxisSize(name) { + return this.isHorizontal(name) ? "height" : "width"; + }, + + axis(name) { + return this.isHorizontal(name) ? "x" : "y"; + }, + + crossAxis(name) { + return this.isHorizontal(name) ? "y" : "x"; + }, +}; + +/** + * Get the provided node's offsetParent dimensions. + * Returns an object with the {parent, dimension} properties. + * Note that the returned parent will be null if the offsetParent is the + * default, non-positioned, body or html node. + * + * node.offsetParent returns the nearest positioned ancestor but if it is + * non-positioned itself, we just return null to let consumers know the node is + * actually positioned relative to the viewport. + * + * @return {Object} + */ +function getOffsetParent(node) { + const win = node.ownerGlobal; + + let offsetParent = node.offsetParent; + if (offsetParent && getComputedStyle(offsetParent).position === "static") { + offsetParent = null; + } + + let width, height; + if (!offsetParent) { + height = win.innerHeight; + width = win.innerWidth; + } else { + height = offsetParent.offsetHeight; + width = offsetParent.offsetWidth; + } + + return { + element: offsetParent, + dimension: { width, height }, + }; +} + +/** + * Get the list of geometry properties that are actually set on the provided + * node. + * + * @param {Node} node The node to analyze. + * @return {Map} A map indexed by property name and where the value is an + * object having the cssRule property. + */ +function getDefinedGeometryProperties(node) { + const props = new Map(); + if (!node) { + return props; + } + + // Get the list of css rules applying to the current node. + const cssRules = getCSSStyleRules(node); + for (let i = 0; i < cssRules.length; i++) { + const rule = cssRules[i]; + for (const name of GeoProp.allProps()) { + const value = rule.style.getPropertyValue(name); + if (value && value !== "auto") { + // getCSSStyleRules returns rules ordered from least to most specific + // so just override any previous properties we have set. + props.set(name, { + cssRule: rule, + }); + } + } + } + + // Go through the inline styles last, only if the node supports inline style + // (e.g. pseudo elements don't have a style property) + if (node.style) { + for (const name of GeoProp.allProps()) { + const value = node.style.getPropertyValue(name); + if (value && value !== "auto") { + props.set(name, { + // There's no cssRule to store here, so store the node instead since + // node.style exists. + cssRule: node, + }); + } + } + } + + // Post-process the list for invalid properties. This is done after the fact + // because of cases like relative positioning with both top and bottom where + // only top will actually be used, but both exists in css rules and computed + // styles. + const { position } = getComputedStyle(node); + for (const [name] of props) { + // Top/left/bottom/right on static positioned elements have no effect. + if (position === "static" && GeoProp.SIDES.includes(name)) { + props.delete(name); + } + + // Bottom/right on relative positioned elements are only used if top/left + // are not defined. + const hasRightAndLeft = name === "right" && props.has("left"); + const hasBottomAndTop = name === "bottom" && props.has("top"); + if (position === "relative" && (hasRightAndLeft || hasBottomAndTop)) { + props.delete(name); + } + } + + return props; +} +exports.getDefinedGeometryProperties = getDefinedGeometryProperties; + +/** + * The GeometryEditor highlights an elements's top, left, bottom, right, width + * and height dimensions, when they are set. + * + * To determine if an element has a set size and position, the highlighter lists + * the CSS rules that apply to the element and checks for the top, left, bottom, + * right, width and height properties. + * The highlighter won't be shown if the element doesn't have any of these + * properties set, but will be shown when at least 1 property is defined. + * + * The highlighter displays lines and labels for each of the defined properties + * in and around the element (relative to the offset parent when one exists). + * The highlighter also highlights the element itself and its offset parent if + * there is one. + * + * Note that the class name contains the word Editor because the aim is for the + * handles to be draggable in content to make the geometry editable. + */ +class GeometryEditorHighlighter extends AutoRefreshHighlighter { + constructor(highlighterEnv) { + super(highlighterEnv); + + this.ID_CLASS_PREFIX = "geometry-editor-"; + + // The list of element geometry properties that can be set. + this.definedProperties = new Map(); + + this.markup = new CanvasFrameAnonymousContentHelper( + highlighterEnv, + this._buildMarkup.bind(this) + ); + this.isReady = this.initialize(); + + const { pageListenerTarget } = this.highlighterEnv; + + // Register the geometry editor instance to all events we're interested in. + DOM_EVENTS.forEach(type => pageListenerTarget.addEventListener(type, this)); + + this.onWillNavigate = this.onWillNavigate.bind(this); + + this.highlighterEnv.on("will-navigate", this.onWillNavigate); + } + + async initialize() { + await this.markup.initialize(); + // Register the mousedown event for each Geometry Editor's handler. + // Those events are automatically removed when the markup is destroyed. + const onMouseDown = this.handleEvent.bind(this); + + for (const side of GeoProp.SIDES) { + this.getElement("handler-" + side).addEventListener( + "mousedown", + onMouseDown + ); + } + } + + _buildMarkup() { + const container = this.markup.createNode({ + attributes: { class: "highlighter-container" }, + }); + + const root = this.markup.createNode({ + parent: container, + attributes: { + id: "root", + class: "root", + hidden: "true", + }, + prefix: this.ID_CLASS_PREFIX, + }); + + const svg = this.markup.createSVGNode({ + nodeType: "svg", + parent: root, + attributes: { + id: "elements", + width: "100%", + height: "100%", + }, + prefix: this.ID_CLASS_PREFIX, + }); + + // Offset parent node highlighter. + this.markup.createSVGNode({ + nodeType: "polygon", + parent: svg, + attributes: { + class: "offset-parent", + id: "offset-parent", + hidden: "true", + }, + prefix: this.ID_CLASS_PREFIX, + }); + + // Current node highlighter (margin box). + this.markup.createSVGNode({ + nodeType: "polygon", + parent: svg, + attributes: { + class: "current-node", + id: "current-node", + hidden: "true", + }, + prefix: this.ID_CLASS_PREFIX, + }); + + // Build the 4 side arrows, handlers and labels. + for (const name of GeoProp.SIDES) { + this.markup.createSVGNode({ + nodeType: "line", + parent: svg, + attributes: { + class: "arrow " + name, + id: "arrow-" + name, + hidden: "true", + }, + prefix: this.ID_CLASS_PREFIX, + }); + + this.markup.createSVGNode({ + nodeType: "circle", + parent: svg, + attributes: { + class: "handler-" + name, + id: "handler-" + name, + r: "4", + "data-side": name, + hidden: "true", + }, + prefix: this.ID_CLASS_PREFIX, + }); + + // Labels are positioned by using a translated <g>. This group contains + // a path and text that are themselves positioned using another translated + // <g>. This is so that the label arrow points at the 0,0 coordinates of + // parent <g>. + const labelG = this.markup.createSVGNode({ + nodeType: "g", + parent: svg, + attributes: { + id: "label-" + name, + hidden: "true", + }, + prefix: this.ID_CLASS_PREFIX, + }); + + const subG = this.markup.createSVGNode({ + nodeType: "g", + parent: labelG, + attributes: { + transform: GeoProp.isHorizontal(name) + ? "translate(-30 -30)" + : "translate(5 -10)", + }, + }); + + this.markup.createSVGNode({ + nodeType: "path", + parent: subG, + attributes: { + class: "label-bubble", + d: GeoProp.isHorizontal(name) + ? "M0 0 L60 0 L60 20 L35 20 L30 25 L25 20 L0 20z" + : "M5 0 L65 0 L65 20 L5 20 L5 15 L0 10 L5 5z", + }, + prefix: this.ID_CLASS_PREFIX, + }); + + this.markup.createSVGNode({ + nodeType: "text", + parent: subG, + attributes: { + class: "label-text", + id: "label-text-" + name, + x: GeoProp.isHorizontal(name) ? "30" : "35", + y: "10", + }, + prefix: this.ID_CLASS_PREFIX, + }); + } + + return container; + } + + destroy() { + // Avoiding exceptions if `destroy` is called multiple times; and / or the + // highlighter environment was already destroyed. + if (!this.highlighterEnv) { + return; + } + + const { pageListenerTarget } = this.highlighterEnv; + + if (pageListenerTarget) { + DOM_EVENTS.forEach(type => + pageListenerTarget.removeEventListener(type, this) + ); + } + + AutoRefreshHighlighter.prototype.destroy.call(this); + + this.markup.destroy(); + this.definedProperties.clear(); + this.definedProperties = null; + this.offsetParent = null; + } + + handleEvent(event, id) { + // No event handling if the highlighter is hidden + if (this.getElement("root").hasAttribute("hidden")) { + return; + } + + const { target, type, pageX, pageY } = event; + + switch (type) { + case "pagehide": + // If a page hide event is triggered for current window's highlighter, hide the + // highlighter. + if (target.defaultView === this.win) { + this.destroy(); + } + + break; + case "mousedown": + // The mousedown event is intended only for the handler + if (!id) { + return; + } + + const handlerSide = this.markup + .getElement(id) + .getAttribute("data-side"); + + if (handlerSide) { + const side = handlerSide; + const sideProp = this.definedProperties.get(side); + + if (!sideProp) { + return; + } + + let value = sideProp.cssRule.style.getPropertyValue(side); + const computedValue = this.computedStyle.getPropertyValue(side); + + const [unit] = value.match(/[^\d]+$/) || [""]; + + value = parseFloat(value); + + const ratio = value / parseFloat(computedValue) || 1; + const dir = GeoProp.isInverted(side) ? -1 : 1; + + // Store all the initial values needed for drag & drop + this[_dragging] = { + side, + value, + unit, + x: pageX, + y: pageY, + inc: ratio * dir, + }; + + this.getElement("handler-" + side).classList.add("dragging"); + } + + this.getElement("root").setAttribute("dragging", "true"); + break; + case "mouseup": + // If we're dragging, drop it. + if (this[_dragging]) { + const { side } = this[_dragging]; + this.getElement("root").removeAttribute("dragging"); + this.getElement("handler-" + side).classList.remove("dragging"); + this[_dragging] = null; + } + break; + case "mousemove": + if (!this[_dragging]) { + return; + } + + const { side, x, y, value, unit, inc } = this[_dragging]; + const sideProps = this.definedProperties.get(side); + + if (!sideProps) { + return; + } + + const delta = + (GeoProp.isHorizontal(side) ? pageX - x : pageY - y) * inc; + + // The inline style has usually the priority over any other CSS rule + // set in stylesheets. However, if a rule has `!important` keyword, + // it will override the inline style too. To ensure Geometry Editor + // will always update the element, we have to add `!important` as + // well. + this.currentNode.style.setProperty( + side, + value + delta + unit, + "important" + ); + + break; + } + } + + getElement(id) { + return this.markup.getElement(this.ID_CLASS_PREFIX + id); + } + + _show() { + this.computedStyle = getComputedStyle(this.currentNode); + const pos = this.computedStyle.position; + // XXX: sticky positioning is ignored for now. To be implemented next. + if (pos === "sticky") { + this.hide(); + return false; + } + + const hasUpdated = this._update(); + if (!hasUpdated) { + this.hide(); + return false; + } + + this.getElement("root").removeAttribute("hidden"); + + return true; + } + + _update() { + // At each update, the position or/and size may have changed, so get the + // list of defined properties, and re-position the arrows and highlighters. + this.definedProperties = getDefinedGeometryProperties(this.currentNode); + // We need the zoom factor to fix the original position of the node + // as well as the arrows. + this.zoomFactor = getCurrentZoom(this.currentNode); + + if (!this.definedProperties.size) { + console.warn("The element does not have editable geometry properties"); + return false; + } + + setIgnoreLayoutChanges(true); + + // Update the highlighters and arrows. + this.updateOffsetParent(); + this.updateCurrentNode(); + this.updateArrows(); + + // Avoid zooming the arrows when content is zoomed. + const node = this.currentNode; + this.markup.scaleRootElement(node, this.ID_CLASS_PREFIX + "root"); + + setIgnoreLayoutChanges(false, this.highlighterEnv.document.documentElement); + return true; + } + + /** + * Update the offset parent rectangle. + * There are 3 different cases covered here: + * - the node is absolutely/fixed positioned, and an offsetParent is defined + * (i.e. it's not just positioned in the viewport): the offsetParent node + * is highlighted (i.e. the rectangle is shown), + * - the node is relatively positioned: the rectangle is shown where the node + * would originally have been (because that's where the relative positioning + * is calculated from), + * - the node has no offset parent at all: the offsetParent rectangle is + * hidden. + */ + updateOffsetParent() { + // Get the offsetParent, if any. + this.offsetParent = getOffsetParent(this.currentNode); + // And the offsetParent quads. + this.parentQuads = getAdjustedQuads( + this.win, + this.offsetParent.element, + "padding" + ); + + const el = this.getElement("offset-parent"); + + const isPositioned = + this.computedStyle.position === "absolute" || + this.computedStyle.position === "fixed"; + const isRelative = this.computedStyle.position === "relative"; + let isHighlighted = false; + + if (this.offsetParent.element && isPositioned) { + const { p1, p2, p3, p4 } = this.parentQuads[0]; + const points = + p1.x + + "," + + p1.y + + " " + + p2.x + + "," + + p2.y + + " " + + p3.x + + "," + + p3.y + + " " + + p4.x + + "," + + p4.y; + el.setAttribute("points", points); + isHighlighted = true; + } else if (isRelative) { + const xDelta = parseFloat(this.computedStyle.left) * this.zoomFactor; + const yDelta = parseFloat(this.computedStyle.top) * this.zoomFactor; + if (xDelta || yDelta) { + const { p1, p2, p3, p4 } = this.currentQuads.margin[0]; + const points = + p1.x - + xDelta + + "," + + (p1.y - yDelta) + + " " + + (p2.x - xDelta) + + "," + + (p2.y - yDelta) + + " " + + (p3.x - xDelta) + + "," + + (p3.y - yDelta) + + " " + + (p4.x - xDelta) + + "," + + (p4.y - yDelta); + el.setAttribute("points", points); + isHighlighted = true; + } + } + + if (isHighlighted) { + el.removeAttribute("hidden"); + } else { + el.setAttribute("hidden", "true"); + } + } + + updateCurrentNode() { + const box = this.getElement("current-node"); + const { p1, p2, p3, p4 } = this.currentQuads.margin[0]; + const attr = + p1.x + + "," + + p1.y + + " " + + p2.x + + "," + + p2.y + + " " + + p3.x + + "," + + p3.y + + " " + + p4.x + + "," + + p4.y; + box.setAttribute("points", attr); + box.removeAttribute("hidden"); + } + + _hide() { + setIgnoreLayoutChanges(true); + + this.getElement("root").setAttribute("hidden", "true"); + this.getElement("current-node").setAttribute("hidden", "true"); + this.getElement("offset-parent").setAttribute("hidden", "true"); + this.hideArrows(); + + this.definedProperties.clear(); + + setIgnoreLayoutChanges(false, this.highlighterEnv.document.documentElement); + } + + hideArrows() { + for (const side of GeoProp.SIDES) { + this.getElement("arrow-" + side).setAttribute("hidden", "true"); + this.getElement("label-" + side).setAttribute("hidden", "true"); + this.getElement("handler-" + side).setAttribute("hidden", "true"); + } + } + + updateArrows() { + this.hideArrows(); + + // Position arrows always end at the node's margin box. + const marginBox = this.currentQuads.margin[0].bounds; + + // Position the side arrows which need to be visible. + // Arrows always start at the offsetParent edge, and end at the middle + // position of the node's margin edge. + // Note that for relative positioning, the offsetParent is considered to be + // the node itself, where it would have been originally. + // +------------------+----------------+ + // | offsetparent | top | + // | or viewport | | + // | +--------+--------+ | + // | | node | | + // +---------+ +-------+ + // | left | | right | + // | +--------+--------+ | + // | | bottom | + // +------------------+----------------+ + const getSideArrowStartPos = side => { + // In case of relative positioning. + if (this.computedStyle.position === "relative") { + if (GeoProp.isInverted(side)) { + return ( + marginBox[side] + + parseFloat(this.computedStyle[side]) * this.zoomFactor + ); + } + return ( + marginBox[side] - + parseFloat(this.computedStyle[side]) * this.zoomFactor + ); + } + + // In case an offsetParent exists and is highlighted. + if (this.parentQuads && this.parentQuads.length) { + return this.parentQuads[0].bounds[side]; + } + + // In case the element is positioned in the viewport. + if (GeoProp.isInverted(side)) { + return this.offsetParent.dimension[GeoProp.mainAxisSize(side)]; + } + return ( + -1 * + this.currentNode.ownerGlobal[ + "scroll" + GeoProp.axis(side).toUpperCase() + ] + ); + }; + + for (const side of GeoProp.SIDES) { + const sideProp = this.definedProperties.get(side); + if (!sideProp) { + continue; + } + + const mainAxisStartPos = getSideArrowStartPos(side); + const mainAxisEndPos = marginBox[side]; + const crossAxisPos = + marginBox[GeoProp.crossAxisStart(side)] + + marginBox[GeoProp.crossAxisSize(side)] / 2; + + this.updateArrow( + side, + mainAxisStartPos, + mainAxisEndPos, + crossAxisPos, + sideProp.cssRule.style.getPropertyValue(side) + ); + } + } + + updateArrow(side, mainStart, mainEnd, crossPos, labelValue) { + const arrowEl = this.getElement("arrow-" + side); + const labelEl = this.getElement("label-" + side); + const labelTextEl = this.getElement("label-text-" + side); + const handlerEl = this.getElement("handler-" + side); + + // Position the arrow <line>. + arrowEl.setAttribute(GeoProp.axis(side) + "1", mainStart); + arrowEl.setAttribute(GeoProp.crossAxis(side) + "1", crossPos); + arrowEl.setAttribute(GeoProp.axis(side) + "2", mainEnd); + arrowEl.setAttribute(GeoProp.crossAxis(side) + "2", crossPos); + arrowEl.removeAttribute("hidden"); + + handlerEl.setAttribute("c" + GeoProp.axis(side), mainEnd); + handlerEl.setAttribute("c" + GeoProp.crossAxis(side), crossPos); + handlerEl.removeAttribute("hidden"); + + // Position the label <text> in the middle of the arrow (making sure it's + // not hidden below the fold). + const capitalize = str => str[0].toUpperCase() + str.substring(1); + const winMain = this.win["inner" + capitalize(GeoProp.mainAxisSize(side))]; + let labelMain = mainStart + (mainEnd - mainStart) / 2; + if ( + (mainStart > 0 && mainStart < winMain) || + (mainEnd > 0 && mainEnd < winMain) + ) { + if (labelMain < GEOMETRY_LABEL_SIZE) { + labelMain = GEOMETRY_LABEL_SIZE; + } else if (labelMain > winMain - GEOMETRY_LABEL_SIZE) { + labelMain = winMain - GEOMETRY_LABEL_SIZE; + } + } + const labelCross = crossPos; + labelEl.setAttribute( + "transform", + GeoProp.isHorizontal(side) + ? "translate(" + labelMain + " " + labelCross + ")" + : "translate(" + labelCross + " " + labelMain + ")" + ); + labelEl.removeAttribute("hidden"); + labelTextEl.setTextContent(labelValue); + } + + onWillNavigate({ isTopLevel }) { + if (isTopLevel) { + this.hide(); + } + } +} + +exports.GeometryEditorHighlighter = GeometryEditorHighlighter; diff --git a/devtools/server/actors/highlighters/measuring-tool.js b/devtools/server/actors/highlighters/measuring-tool.js new file mode 100644 index 0000000000..41c3b3098f --- /dev/null +++ b/devtools/server/actors/highlighters/measuring-tool.js @@ -0,0 +1,853 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const EventEmitter = require("resource://devtools/shared/event-emitter.js"); +const { + getCurrentZoom, + getWindowDimensions, + setIgnoreLayoutChanges, +} = require("resource://devtools/shared/layout/utils.js"); +const { + CanvasFrameAnonymousContentHelper, +} = require("resource://devtools/server/actors/highlighters/utils/markup.js"); + +// Hard coded value about the size of measuring tool label, in order to +// position and flip it when is needed. +const LABEL_SIZE_MARGIN = 8; +const LABEL_SIZE_WIDTH = 80; +const LABEL_SIZE_HEIGHT = 52; +const LABEL_POS_MARGIN = 4; +const LABEL_POS_WIDTH = 40; +const LABEL_POS_HEIGHT = 34; +const LABEL_TYPE_SIZE = "size"; +const LABEL_TYPE_POSITION = "position"; + +// List of all DOM Events subscribed directly to the document from the +// Measuring Tool highlighter +const DOM_EVENTS = [ + "mousedown", + "mousemove", + "mouseup", + "mouseleave", + "scroll", + "pagehide", + "keydown", + "keyup", +]; + +const SIDES = ["top", "right", "bottom", "left"]; +const HANDLERS = [...SIDES, "topleft", "topright", "bottomleft", "bottomright"]; +const HANDLER_SIZE = 6; +const HIGHLIGHTED_HANDLER_CLASSNAME = "highlight"; + +const IS_OSX = Services.appinfo.OS === "Darwin"; + +/** + * The MeasuringToolHighlighter is used to measure distances in a content page. + * It allows users to click and drag with their mouse to draw an area whose + * dimensions will be displayed in a tooltip next to it. + * This allows users to measure distances between elements on a page. + */ +class MeasuringToolHighlighter { + constructor(highlighterEnv) { + this.env = highlighterEnv; + this.markup = new CanvasFrameAnonymousContentHelper( + highlighterEnv, + this._buildMarkup.bind(this) + ); + this.isReady = this.markup.initialize(); + + this.rect = { x: 0, y: 0, w: 0, h: 0 }; + this.mouseCoords = { x: 0, y: 0 }; + + const { pageListenerTarget } = highlighterEnv; + + // Register the measuring tool instance to all events we're interested in. + DOM_EVENTS.forEach(type => pageListenerTarget.addEventListener(type, this)); + } + + ID_CLASS_PREFIX = "measuring-tool-"; + + _buildMarkup() { + const prefix = this.ID_CLASS_PREFIX; + + const container = this.markup.createNode({ + attributes: { class: "highlighter-container" }, + }); + + const root = this.markup.createNode({ + parent: container, + attributes: { + id: "root", + class: "root", + hidden: "true", + }, + prefix, + }); + + const svg = this.markup.createSVGNode({ + nodeType: "svg", + parent: root, + attributes: { + id: "elements", + class: "elements", + width: "100%", + height: "100%", + }, + prefix, + }); + + for (const side of SIDES) { + this.markup.createSVGNode({ + nodeType: "line", + parent: svg, + attributes: { + class: `guide-${side}`, + id: `guide-${side}`, + hidden: "true", + }, + prefix, + }); + } + + this.markup.createNode({ + nodeType: "label", + attributes: { + id: "label-size", + class: "label-size", + hidden: "true", + }, + parent: root, + prefix, + }); + + this.markup.createNode({ + nodeType: "label", + attributes: { + id: "label-position", + class: "label-position", + hidden: "true", + }, + parent: root, + prefix, + }); + + // Creating a <g> element in order to group all the paths below, that + // together represent the measuring tool; so that would be easier move them + // around + const g = this.markup.createSVGNode({ + nodeType: "g", + attributes: { + id: "tool", + }, + parent: svg, + prefix, + }); + + this.markup.createSVGNode({ + nodeType: "path", + attributes: { + id: "box-path", + class: "box-path", + }, + parent: g, + prefix, + }); + + this.markup.createSVGNode({ + nodeType: "path", + attributes: { + id: "diagonal-path", + class: "diagonal-path", + }, + parent: g, + prefix, + }); + + for (const handler of HANDLERS) { + this.markup.createSVGNode({ + nodeType: "circle", + parent: g, + attributes: { + class: `handler-${handler}`, + id: `handler-${handler}`, + r: HANDLER_SIZE, + hidden: "true", + }, + prefix, + }); + } + + return container; + } + + _update() { + const { window } = this.env; + + setIgnoreLayoutChanges(true); + + const zoom = getCurrentZoom(window); + + const { width, height } = getWindowDimensions(window); + + const { rect } = this; + + const isZoomChanged = zoom !== rect.zoom; + + if (isZoomChanged) { + rect.zoom = zoom; + this.updateLabel(); + } + + const isDocumentSizeChanged = + width !== rect.documentWidth || height !== rect.documentHeight; + + if (isDocumentSizeChanged) { + rect.documentWidth = width; + rect.documentHeight = height; + } + + // If either the document's size or the zoom is changed since the last + // repaint, we update the tool's size as well. + if (isZoomChanged || isDocumentSizeChanged) { + this.updateViewport(); + } + + setIgnoreLayoutChanges(false, window.document.documentElement); + + this._rafID = window.requestAnimationFrame(() => this._update()); + } + + _cancelUpdate() { + if (this._rafID) { + this.env.window.cancelAnimationFrame(this._rafID); + this._rafID = 0; + } + } + + destroy() { + this.hide(); + + this._cancelUpdate(); + + const { pageListenerTarget } = this.env; + + if (pageListenerTarget) { + DOM_EVENTS.forEach(type => + pageListenerTarget.removeEventListener(type, this) + ); + } + + this.markup.destroy(); + + EventEmitter.emit(this, "destroy"); + } + + show() { + setIgnoreLayoutChanges(true); + + this.getElement("root").removeAttribute("hidden"); + + this._update(); + + setIgnoreLayoutChanges(false, this.env.window.document.documentElement); + } + + hide() { + setIgnoreLayoutChanges(true); + + this.hideLabel(LABEL_TYPE_SIZE); + this.hideLabel(LABEL_TYPE_POSITION); + + this.getElement("root").setAttribute("hidden", "true"); + + this._cancelUpdate(); + + setIgnoreLayoutChanges(false, this.env.window.document.documentElement); + } + + getElement(id) { + return this.markup.getElement(this.ID_CLASS_PREFIX + id); + } + + setSize(w, h) { + this.setRect(undefined, undefined, w, h); + } + + setRect(x, y, w, h) { + const { rect } = this; + + if (typeof x !== "undefined") { + rect.x = x; + } + + if (typeof y !== "undefined") { + rect.y = y; + } + + if (typeof w !== "undefined") { + rect.w = w; + } + + if (typeof h !== "undefined") { + rect.h = h; + } + + setIgnoreLayoutChanges(true); + + if (this._dragging) { + this.updatePaths(); + this.updateHandlers(); + } + + this.updateLabel(); + + setIgnoreLayoutChanges(false, this.env.window.document.documentElement); + } + + updatePaths() { + const { x, y, w, h } = this.rect; + const dir = `M0 0 L${w} 0 L${w} ${h} L0 ${h}z`; + + // Adding correction to the line path, otherwise some pixels are drawn + // outside the main rectangle area. + const x1 = w > 0 ? 0.5 : 0; + const y1 = w < 0 && h < 0 ? -0.5 : 0; + const w1 = w + (h < 0 && w < 0 ? 0.5 : 0); + const h1 = h + (h > 0 && w > 0 ? -0.5 : 0); + + const linedir = `M${x1} ${y1} L${w1} ${h1}`; + + this.getElement("box-path").setAttribute("d", dir); + this.getElement("diagonal-path").setAttribute("d", linedir); + this.getElement("tool").setAttribute("transform", `translate(${x},${y})`); + } + + updateLabel(type) { + type = type || (this._dragging ? LABEL_TYPE_SIZE : LABEL_TYPE_POSITION); + + const isSizeLabel = type === LABEL_TYPE_SIZE; + + const label = this.getElement(`label-${type}`); + + let origin = "top left"; + + const { innerWidth, innerHeight, scrollX, scrollY } = this.env.window; + const { x: mouseX, y: mouseY } = this.mouseCoords; + let { x, y, w, h, zoom } = this.rect; + const scale = 1 / zoom; + + w = w || 0; + h = h || 0; + x = x || 0; + y = y || 0; + if (type === LABEL_TYPE_SIZE) { + x += w; + y += h; + } else { + x = mouseX; + y = mouseY; + } + + let labelMargin, labelHeight, labelWidth; + + if (isSizeLabel) { + labelMargin = LABEL_SIZE_MARGIN; + labelWidth = LABEL_SIZE_WIDTH; + labelHeight = LABEL_SIZE_HEIGHT; + + const d = Math.hypot(w, h).toFixed(2); + + label.setTextContent(`W: ${Math.abs(w)} px + H: ${Math.abs(h)} px + ↘: ${d}px`); + } else { + labelMargin = LABEL_POS_MARGIN; + labelWidth = LABEL_POS_WIDTH; + labelHeight = LABEL_POS_HEIGHT; + + label.setTextContent(`${mouseX} + ${mouseY}`); + } + + // Size used to position properly the label + const labelBoxWidth = (labelWidth + labelMargin) * scale; + const labelBoxHeight = (labelHeight + labelMargin) * scale; + + const isGoingLeft = w < scrollX; + const isSizeGoingLeft = isSizeLabel && isGoingLeft; + const isExceedingLeftMargin = x - labelBoxWidth < scrollX; + const isExceedingRightMargin = x + labelBoxWidth > innerWidth + scrollX; + const isExceedingTopMargin = y - labelBoxHeight < scrollY; + const isExceedingBottomMargin = y + labelBoxHeight > innerHeight + scrollY; + + if ((isSizeGoingLeft && !isExceedingLeftMargin) || isExceedingRightMargin) { + x -= labelBoxWidth; + origin = "top right"; + } else { + x += labelMargin * scale; + } + + if (isSizeLabel) { + y += isExceedingTopMargin ? labelMargin * scale : -labelBoxHeight; + } else { + y += isExceedingBottomMargin ? -labelBoxHeight : labelMargin * scale; + } + + label.setAttribute( + "style", + ` + width: ${labelWidth}px; + height: ${labelHeight}px; + transform-origin: ${origin}; + transform: translate(${x}px,${y}px) scale(${scale}) + ` + ); + + if (!isSizeLabel) { + const labelSize = this.getElement("label-size"); + const style = labelSize.getAttribute("style"); + + if (style) { + labelSize.setAttribute( + "style", + style.replace(/scale[^)]+\)/, `scale(${scale})`) + ); + } + } + } + + updateViewport() { + const { devicePixelRatio } = this.env.window; + const { documentWidth, documentHeight, zoom } = this.rect; + + // Because `devicePixelRatio` is affected by zoom (see bug 809788), + // in order to get the "real" device pixel ratio, we need divide by `zoom` + const pixelRatio = devicePixelRatio / zoom; + + // The "real" device pixel ratio is used to calculate the max stroke + // width we can actually assign: on retina, for instance, it would be 0.5, + // where on non high dpi monitor would be 1. + const minWidth = 1 / pixelRatio; + const strokeWidth = minWidth / zoom; + + this.getElement("root").setAttribute( + "style", + `stroke-width:${strokeWidth}; + width:${documentWidth}px; + height:${documentHeight}px;` + ); + } + + updateGuides() { + const { x, y, w, h } = this.rect; + + let guide = this.getElement("guide-top"); + + guide.setAttribute("x1", "0"); + guide.setAttribute("y1", y); + guide.setAttribute("x2", "100%"); + guide.setAttribute("y2", y); + + guide = this.getElement("guide-right"); + + guide.setAttribute("x1", x + w); + guide.setAttribute("y1", 0); + guide.setAttribute("x2", x + w); + guide.setAttribute("y2", "100%"); + + guide = this.getElement("guide-bottom"); + + guide.setAttribute("x1", "0"); + guide.setAttribute("y1", y + h); + guide.setAttribute("x2", "100%"); + guide.setAttribute("y2", y + h); + + guide = this.getElement("guide-left"); + + guide.setAttribute("x1", x); + guide.setAttribute("y1", 0); + guide.setAttribute("x2", x); + guide.setAttribute("y2", "100%"); + } + + setHandlerPosition(handler, x, y) { + const handlerElement = this.getElement(`handler-${handler}`); + handlerElement.setAttribute("cx", x); + handlerElement.setAttribute("cy", y); + } + + updateHandlers() { + const { w, h } = this.rect; + + this.setHandlerPosition("top", w / 2, 0); + this.setHandlerPosition("topright", w, 0); + this.setHandlerPosition("right", w, h / 2); + this.setHandlerPosition("bottomright", w, h); + this.setHandlerPosition("bottom", w / 2, h); + this.setHandlerPosition("bottomleft", 0, h); + this.setHandlerPosition("left", 0, h / 2); + this.setHandlerPosition("topleft", 0, 0); + } + + showLabel(type) { + setIgnoreLayoutChanges(true); + + this.getElement(`label-${type}`).removeAttribute("hidden"); + + setIgnoreLayoutChanges(false, this.env.window.document.documentElement); + } + + hideLabel(type) { + setIgnoreLayoutChanges(true); + + this.getElement(`label-${type}`).setAttribute("hidden", "true"); + + setIgnoreLayoutChanges(false, this.env.window.document.documentElement); + } + + showGuides() { + const prefix = this.ID_CLASS_PREFIX + "guide-"; + + for (const side of SIDES) { + this.markup.removeAttributeForElement(`${prefix + side}`, "hidden"); + } + } + + hideGuides() { + const prefix = this.ID_CLASS_PREFIX + "guide-"; + + for (const side of SIDES) { + this.markup.setAttributeForElement(`${prefix + side}`, "hidden", "true"); + } + } + + showHandler(id) { + const prefix = this.ID_CLASS_PREFIX + "handler-"; + this.markup.removeAttributeForElement(prefix + id, "hidden"); + } + + showHandlers() { + const prefix = this.ID_CLASS_PREFIX + "handler-"; + + for (const handler of HANDLERS) { + this.markup.removeAttributeForElement(prefix + handler, "hidden"); + } + } + + hideAll() { + this.hideLabel(LABEL_TYPE_POSITION); + this.hideLabel(LABEL_TYPE_SIZE); + this.hideGuides(); + this.hideHandlers(); + } + + showGuidesAndHandlers() { + // Shows the guides and handlers only if an actual area is selected + if (this.rect.w !== 0 && this.rect.h !== 0) { + this.updateGuides(); + this.showGuides(); + this.updateHandlers(); + this.showHandlers(); + } + } + + hideHandlers() { + const prefix = this.ID_CLASS_PREFIX + "handler-"; + + for (const handler of HANDLERS) { + this.markup.setAttributeForElement(prefix + handler, "hidden", "true"); + } + } + + handleEvent(event) { + const { target, type } = event; + + switch (type) { + case "mousedown": + if (event.button || this._dragging) { + return; + } + + const isHandler = event.originalTarget.id.includes("handler"); + if (isHandler) { + this.handleResizingMouseDownEvent(event); + } else { + this.handleMouseDownEvent(event); + } + break; + case "mousemove": + if (this._dragging && this._dragging.handler) { + this.handleResizingMouseMoveEvent(event); + } else { + this.handleMouseMoveEvent(event); + } + break; + case "mouseup": + if (this._dragging) { + if (this._dragging.handler) { + this.handleResizingMouseUpEvent(); + } else { + this.handleMouseUpEvent(); + } + } + break; + case "mouseleave": { + if (!this._dragging) { + this.hideLabel(LABEL_TYPE_POSITION); + } + break; + } + case "scroll": { + this.hideLabel(LABEL_TYPE_POSITION); + break; + } + case "pagehide": { + // If a page hide event is triggered for current window's highlighter, hide the + // highlighter. + if (target.defaultView === this.env.window) { + this.destroy(); + } + break; + } + case "keydown": { + this.handleKeyDown(event); + break; + } + case "keyup": { + if (MeasuringToolHighlighter.#isResizeModifierPressed(event)) { + this.getElement("handler-topleft").classList.remove( + HIGHLIGHTED_HANDLER_CLASSNAME + ); + } + break; + } + } + } + + handleMouseDownEvent(event) { + const { pageX, pageY } = event; + const { window } = this.env; + const elementId = `${this.ID_CLASS_PREFIX}tool`; + + setIgnoreLayoutChanges(true); + + this.markup.getElement(elementId).classList.add("dragging"); + + this.hideAll(); + + setIgnoreLayoutChanges(false, window.document.documentElement); + + // Store all the initial values needed for drag & drop + this._dragging = { + handler: null, + x: pageX, + y: pageY, + }; + + this.setRect(pageX, pageY, 0, 0); + } + + handleMouseMoveEvent(event) { + const { pageX, pageY } = event; + const { mouseCoords } = this; + let { x, y, w, h } = this.rect; + let labelType; + + if (this._dragging) { + w = pageX - x; + h = pageY - y; + + this.setRect(x, y, w, h); + + labelType = LABEL_TYPE_SIZE; + } else { + mouseCoords.x = pageX; + mouseCoords.y = pageY; + this.updateLabel(LABEL_TYPE_POSITION); + + labelType = LABEL_TYPE_POSITION; + } + + this.showLabel(labelType); + } + + handleMouseUpEvent() { + setIgnoreLayoutChanges(true); + + this.getElement("tool").classList.remove("dragging"); + + this.showGuidesAndHandlers(); + + setIgnoreLayoutChanges(false, this.env.window.document.documentElement); + this._dragging = null; + } + + handleResizingMouseDownEvent(event) { + const { originalTarget, pageX, pageY } = event; + const { window } = this.env; + const prefix = this.ID_CLASS_PREFIX + "handler-"; + const handler = originalTarget.id.replace(prefix, ""); + + setIgnoreLayoutChanges(true); + + this.markup.getElement(originalTarget.id).classList.add("dragging"); + + this.hideAll(); + this.showHandler(handler); + + // Set coordinates to the current measurement area's position + const [, x, y] = this.getElement("tool") + .getAttribute("transform") + .match(/(\d+),(\d+)/); + this.setRect(Number(x), Number(y)); + + setIgnoreLayoutChanges(false, window.document.documentElement); + + // Store all the initial values needed for drag & drop + this._dragging = { + handler, + x: pageX, + y: pageY, + }; + } + + handleResizingMouseMoveEvent(event) { + const { pageX, pageY } = event; + const { rect } = this; + let { x, y, w, h } = rect; + + const { handler } = this._dragging; + + switch (handler) { + case "top": + y = pageY; + h = rect.y + rect.h - pageY; + break; + case "topright": + y = pageY; + w = pageX - rect.x; + h = rect.y + rect.h - pageY; + break; + case "right": + w = pageX - rect.x; + break; + case "bottomright": + w = pageX - rect.x; + h = pageY - rect.y; + break; + case "bottom": + h = pageY - rect.y; + break; + case "bottomleft": + x = pageX; + w = rect.x + rect.w - pageX; + h = pageY - rect.y; + break; + case "left": + x = pageX; + w = rect.x + rect.w - pageX; + break; + case "topleft": + x = pageX; + y = pageY; + w = rect.x + rect.w - pageX; + h = rect.y + rect.h - pageY; + break; + } + + this.setRect(x, y, w, h); + + // Changes the resizing cursors in case the measuring box is mirrored + const isMirrored = + (rect.w < 0 || rect.h < 0) && !(rect.w < 0 && rect.h < 0); + this.getElement("tool").classList.toggle("mirrored", isMirrored); + + this.showLabel("size"); + } + + handleResizingMouseUpEvent() { + const { handler } = this._dragging; + + setIgnoreLayoutChanges(true); + + this.getElement(`handler-${handler}`).classList.remove("dragging"); + this.showHandlers(); + + this.showGuidesAndHandlers(); + + setIgnoreLayoutChanges(false, this.env.window.document.documentElement); + this._dragging = null; + } + + handleKeyDown(event) { + if (MeasuringToolHighlighter.#isResizeModifierPressed(event)) { + this.getElement("handler-topleft").classList.add( + HIGHLIGHTED_HANDLER_CLASSNAME + ); + } + + if ( + !["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"].includes(event.key) + ) { + return; + } + + const { x, y, w, h } = this.rect; + const modifier = event.shiftKey ? 10 : 1; + + event.preventDefault(); + if (MeasuringToolHighlighter.#isResizeModifierHeld(event)) { + // If Ctrl (or Command on OS X) is held, resize the tool + switch (event.key) { + case "ArrowUp": + this.setSize(undefined, h - modifier); + break; + case "ArrowDown": + this.setSize(undefined, h + modifier); + break; + case "ArrowLeft": + this.setSize(w - modifier, undefined); + break; + case "ArrowRight": + this.setSize(w + modifier, undefined); + break; + } + } else { + // Arrow keys with no modifier move the tool + switch (event.key) { + case "ArrowUp": + this.setRect(undefined, y - modifier); + break; + case "ArrowDown": + this.setRect(undefined, y + modifier); + break; + case "ArrowLeft": + this.setRect(x - modifier, undefined); + break; + case "ArrowRight": + this.setRect(x + modifier, undefined); + break; + } + } + + this.updatePaths(); + this.updateGuides(); + this.updateHandlers(); + this.updateLabel(LABEL_TYPE_SIZE); + } + + static #isResizeModifierPressed(event) { + return ( + (!IS_OSX && event.key === "Control") || (IS_OSX && event.key === "Meta") + ); + } + + static #isResizeModifierHeld(event) { + return (!IS_OSX && event.ctrlKey) || (IS_OSX && event.metaKey); + } +} +exports.MeasuringToolHighlighter = MeasuringToolHighlighter; diff --git a/devtools/server/actors/highlighters/moz.build b/devtools/server/actors/highlighters/moz.build new file mode 100644 index 0000000000..eeaca89992 --- /dev/null +++ b/devtools/server/actors/highlighters/moz.build @@ -0,0 +1,31 @@ +# -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*- +# vim: set filetype=python: +# 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/. + +DIRS += [ + "utils", + "css", +] + +DevToolsModules( + "accessible.js", + "auto-refresh.js", + "box-model.js", + "css-grid.js", + "css-transform.js", + "eye-dropper.js", + "flexbox.js", + "fonts.js", + "geometry-editor.js", + "measuring-tool.js", + "node-tabbing-order.js", + "paused-debugger.js", + "remote-node-picker-notice.js", + "rulers.js", + "selector.js", + "shapes.js", + "tabbing-order.js", + "viewport-size.js", +) diff --git a/devtools/server/actors/highlighters/node-tabbing-order.js b/devtools/server/actors/highlighters/node-tabbing-order.js new file mode 100644 index 0000000000..229342ee98 --- /dev/null +++ b/devtools/server/actors/highlighters/node-tabbing-order.js @@ -0,0 +1,399 @@ +/* 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"; + +loader.lazyRequireGetter( + this, + ["setIgnoreLayoutChanges", "getCurrentZoom"], + "resource://devtools/shared/layout/utils.js", + true +); +loader.lazyRequireGetter( + this, + "AutoRefreshHighlighter", + "resource://devtools/server/actors/highlighters/auto-refresh.js", + true +); +loader.lazyRequireGetter( + this, + ["CanvasFrameAnonymousContentHelper"], + "resource://devtools/server/actors/highlighters/utils/markup.js", + true +); + +/** + * The NodeTabbingOrderHighlighter draws an outline around a node (based on its + * border bounds). + * + * Usage example: + * + * const h = new NodeTabbingOrderHighlighter(env); + * await h.isReady(); + * h.show(node, options); + * h.hide(); + * h.destroy(); + * + * @param {Number} options.index + * Tabbing index value to be displayed in the highlighter info bar. + */ +class NodeTabbingOrderHighlighter extends AutoRefreshHighlighter { + constructor(highlighterEnv) { + super(highlighterEnv); + + this._doNotStartRefreshLoop = true; + this.ID_CLASS_PREFIX = "tabbing-order-"; + this.markup = new CanvasFrameAnonymousContentHelper( + this.highlighterEnv, + this._buildMarkup.bind(this) + ); + this.isReady = this.markup.initialize(); + } + + _buildMarkup() { + const root = this.markup.createNode({ + attributes: { + id: "root", + class: "root highlighter-container tabbing-order", + "aria-hidden": "true", + }, + prefix: this.ID_CLASS_PREFIX, + }); + + const container = this.markup.createNode({ + parent: root, + attributes: { + id: "container", + width: "100%", + height: "100%", + hidden: "true", + }, + prefix: this.ID_CLASS_PREFIX, + }); + + // Building the SVG element + this.markup.createNode({ + parent: container, + attributes: { + class: "bounds", + id: "bounds", + }, + prefix: this.ID_CLASS_PREFIX, + }); + + // Building the nodeinfo bar markup + + const infobarContainer = this.markup.createNode({ + parent: root, + attributes: { + class: "infobar-container", + id: "infobar-container", + position: "top", + hidden: "true", + }, + prefix: this.ID_CLASS_PREFIX, + }); + + const infobar = this.markup.createNode({ + parent: infobarContainer, + attributes: { + class: "infobar", + }, + prefix: this.ID_CLASS_PREFIX, + }); + + this.markup.createNode({ + parent: infobar, + attributes: { + class: "infobar-text", + id: "infobar-text", + }, + prefix: this.ID_CLASS_PREFIX, + }); + + return root; + } + + /** + * Destroy the nodes. Remove listeners. + */ + destroy() { + this.markup.destroy(); + + AutoRefreshHighlighter.prototype.destroy.call(this); + } + + getElement(id) { + return this.markup.getElement(this.ID_CLASS_PREFIX + id); + } + + /** + * Update focused styling for a node tabbing index highlight. + * + * @param {Boolean} focused + * Indicates if the highlighted node needs to be focused. + */ + updateFocus(focused) { + const root = this.getElement("root"); + root.classList.toggle("focused", focused); + } + + /** + * Show the highlighter on a given node + */ + _show() { + return this._update(); + } + + /** + * Update the highlighter on the current highlighted node (the one that was + * passed as an argument to show(node)). + * Should be called whenever node size or attributes change + */ + _update() { + let shown = false; + setIgnoreLayoutChanges(true); + + if (this._updateTabbingOrder()) { + this._showInfobar(); + this._showTabbingOrder(); + shown = true; + setIgnoreLayoutChanges( + false, + this.highlighterEnv.window.document.documentElement + ); + } else { + // Nothing to highlight (0px rectangle like a <script> tag for instance) + this._hide(); + } + + return shown; + } + + /** + * Hide the highlighter, the outline and the infobar. + */ + _hide() { + setIgnoreLayoutChanges(true); + + this._hideTabbingOrder(); + this._hideInfobar(); + + setIgnoreLayoutChanges( + false, + this.highlighterEnv.window.document.documentElement + ); + } + + /** + * Hide the infobar + */ + _hideInfobar() { + this.getElement("infobar-container").setAttribute("hidden", "true"); + } + + /** + * Show the infobar + */ + _showInfobar() { + if (!this.currentNode) { + return; + } + + this.getElement("infobar-container").removeAttribute("hidden"); + this.getElement("infobar-text").setTextContent(this.options.index); + const bounds = this._getBounds(); + const container = this.getElement("infobar-container"); + + moveInfobar(container, bounds, this.win); + } + + /** + * Hide the tabbing order highlighter + */ + _hideTabbingOrder() { + this.getElement("container").setAttribute("hidden", "true"); + } + + /** + * Show the tabbing order highlighter + */ + _showTabbingOrder() { + this.getElement("container").removeAttribute("hidden"); + } + + /** + * Calculate border bounds based on the quads returned by getAdjustedQuads. + * @return {Object} A bounds object {bottom,height,left,right,top,width,x,y} + */ + _getBorderBounds() { + const quads = this.currentQuads.border; + if (!quads || !quads.length) { + return null; + } + + const bounds = { + bottom: -Infinity, + height: 0, + left: Infinity, + right: -Infinity, + top: Infinity, + width: 0, + x: 0, + y: 0, + }; + + for (const q of quads) { + bounds.bottom = Math.max(bounds.bottom, q.bounds.bottom); + bounds.top = Math.min(bounds.top, q.bounds.top); + bounds.left = Math.min(bounds.left, q.bounds.left); + bounds.right = Math.max(bounds.right, q.bounds.right); + } + bounds.x = bounds.left; + bounds.y = bounds.top; + bounds.width = bounds.right - bounds.left; + bounds.height = bounds.bottom - bounds.top; + + return bounds; + } + + /** + * Update the tabbing order index as per the current node. + * + * @return {boolean} + * True if the current node has a tabbing order index to be + * highlighted + */ + _updateTabbingOrder() { + if (!this._nodeNeedsHighlighting()) { + this._hideTabbingOrder(); + return false; + } + + const boundsEl = this.getElement("bounds"); + const { left, top, width, height } = this._getBounds(); + boundsEl.setAttribute( + "style", + `top: ${top}px; left: ${left}px; width: ${width}px; height: ${height}px;` + ); + + // Un-zoom the root wrapper if the page was zoomed. + const rootId = this.ID_CLASS_PREFIX + "container"; + this.markup.scaleRootElement(this.currentNode, rootId); + + return true; + } + + /** + * Can the current node be highlighted? Does it have quads. + * @return {Boolean} + */ + _nodeNeedsHighlighting() { + return ( + this.currentQuads.margin.length || + this.currentQuads.border.length || + this.currentQuads.padding.length || + this.currentQuads.content.length + ); + } + + _getBounds() { + const borderBounds = this._getBorderBounds(); + let bounds = { + bottom: 0, + height: 0, + left: 0, + right: 0, + top: 0, + width: 0, + x: 0, + y: 0, + }; + + if (!borderBounds) { + // Invisible element such as a script tag. + return bounds; + } + + const { bottom, height, left, right, top, width, x, y } = borderBounds; + if (width > 0 || height > 0) { + bounds = { bottom, height, left, right, top, width, x, y }; + } + + return bounds; + } +} + +/** + * Move the infobar to the right place in the highlighter. The infobar is used + * to display element's tabbing order index. + * + * @param {DOMNode} container + * The container element which will be used to position the infobar. + * @param {Object} bounds + * The content bounds of the container element. + * @param {Window} win + * The window object. + */ +function moveInfobar(container, bounds, win) { + const zoom = getCurrentZoom(win); + const { computedStyle } = container; + const margin = 2; + const arrowSize = + parseFloat( + computedStyle.getPropertyValue("--highlighter-bubble-arrow-size") + ) - 2; + const containerHeight = parseFloat(computedStyle.getPropertyValue("height")); + const containerWidth = parseFloat(computedStyle.getPropertyValue("width")); + + const topBoundary = margin; + const bottomBoundary = + win.document.scrollingElement.scrollHeight - containerHeight - margin - 1; + const leftBoundary = containerWidth / 2 + margin; + + let top = bounds.y - containerHeight - arrowSize; + let left = bounds.x + bounds.width / 2; + const bottom = bounds.bottom + arrowSize; + let positionAttribute = "top"; + + const canBePlacedOnTop = top >= topBoundary; + const canBePlacedOnBottom = bottomBoundary - bottom > 0; + + if (!canBePlacedOnTop && canBePlacedOnBottom) { + top = bottom; + positionAttribute = "bottom"; + } + + let hideArrow = false; + if (top < topBoundary) { + hideArrow = true; + top = topBoundary; + } else if (top > bottomBoundary) { + hideArrow = true; + top = bottomBoundary; + } + + if (left < leftBoundary) { + hideArrow = true; + left = leftBoundary; + } + + if (hideArrow) { + container.setAttribute("hide-arrow", "true"); + } else { + container.removeAttribute("hide-arrow"); + } + + container.setAttribute( + "style", + ` + position: absolute; + transform-origin: 0 0; + transform: scale(${1 / zoom}) translate(calc(${left}px - 50%), ${top}px)` + ); + + container.setAttribute("position", positionAttribute); +} + +exports.NodeTabbingOrderHighlighter = NodeTabbingOrderHighlighter; diff --git a/devtools/server/actors/highlighters/paused-debugger.js b/devtools/server/actors/highlighters/paused-debugger.js new file mode 100644 index 0000000000..5035ab04c2 --- /dev/null +++ b/devtools/server/actors/highlighters/paused-debugger.js @@ -0,0 +1,260 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const { + CanvasFrameAnonymousContentHelper, +} = require("resource://devtools/server/actors/highlighters/utils/markup.js"); + +loader.lazyGetter(this, "PausedReasonsBundle", () => { + return new Localization( + ["devtools/shared/debugger-paused-reasons.ftl"], + true + ); +}); + +loader.lazyRequireGetter( + this, + "DEBUGGER_PAUSED_REASONS_L10N_MAPPING", + "resource://devtools/shared/constants.js", + true +); + +/** + * The PausedDebuggerOverlay is a class that displays a semi-transparent mask on top of + * the whole page and a toolbar at the top of the page. + * This is used to signal to users that script execution is current paused. + * The toolbar is used to display the reason for the pause in script execution as well as + * buttons to resume or step through the program. + */ +class PausedDebuggerOverlay { + constructor(highlighterEnv, options = {}) { + this.env = highlighterEnv; + this.resume = options.resume; + this.stepOver = options.stepOver; + + this.lastTarget = null; + + this.markup = new CanvasFrameAnonymousContentHelper( + highlighterEnv, + this._buildMarkup.bind(this), + { waitForDocumentToLoad: false } + ); + this.isReady = this.markup.initialize(); + } + + ID_CLASS_PREFIX = "paused-dbg-"; + + _buildMarkup() { + const prefix = this.ID_CLASS_PREFIX; + + const container = this.markup.createNode({ + attributes: { class: "highlighter-container" }, + }); + + // Wrapper element. + const wrapper = this.markup.createNode({ + parent: container, + attributes: { + id: "root", + class: "root", + hidden: "true", + overlay: "true", + }, + prefix, + }); + + const toolbar = this.markup.createNode({ + parent: wrapper, + attributes: { + id: "toolbar", + class: "toolbar", + }, + prefix, + }); + + this.markup.createNode({ + nodeType: "span", + parent: toolbar, + attributes: { + id: "reason", + class: "reason", + }, + prefix, + }); + + this.markup.createNode({ + parent: toolbar, + attributes: { + id: "divider", + class: "divider", + }, + prefix, + }); + + const stepWrapper = this.markup.createNode({ + parent: toolbar, + attributes: { + id: "step-button-wrapper", + class: "step-button-wrapper", + }, + prefix, + }); + + this.markup.createNode({ + nodeType: "button", + parent: stepWrapper, + attributes: { + id: "step-button", + class: "step-button", + }, + prefix, + }); + + const resumeWrapper = this.markup.createNode({ + parent: toolbar, + attributes: { + id: "resume-button-wrapper", + class: "resume-button-wrapper", + }, + prefix, + }); + + this.markup.createNode({ + nodeType: "button", + parent: resumeWrapper, + attributes: { + id: "resume-button", + class: "resume-button", + }, + prefix, + }); + + return container; + } + + destroy() { + this.hide(); + this.markup.destroy(); + this.env = null; + this.lastTarget = null; + } + + onClick(target) { + const { id } = target; + if (!id) { + return; + } + + if (id.includes("paused-dbg-step-button")) { + this.stepOver(); + } else if (id.includes("paused-dbg-resume-button")) { + this.resume(); + } + } + + onMouseMove(target) { + // Not an element we care about + if (!target || !target.id) { + return; + } + + // If the user didn't change targets, do nothing + if (this.lastTarget && this.lastTarget.id === target.id) { + return; + } + + if ( + target.id.includes("step-button") || + target.id.includes("resume-button") + ) { + // The hover should be applied to the wrapper (icon's parent node) + const newTarget = target.parentNode.id.includes("wrapper") + ? target.parentNode + : target; + + // Remove the hover class if the user has changed buttons + if (this.lastTarget && this.lastTarget != newTarget) { + this.lastTarget.classList.remove("hover"); + } + newTarget.classList.add("hover"); + this.lastTarget = newTarget; + } else if (this.lastTarget) { + // Remove the hover class if the user isn't on a button + this.lastTarget.classList.remove("hover"); + } + } + + handleEvent(e) { + switch (e.type) { + case "mousedown": + this.onClick(e.target); + break; + case "DOMMouseScroll": + // Prevent scrolling. That's because we only took a screenshot of the viewport, so + // scrolling out of the viewport wouldn't draw the expected things. In the future + // we can take the screenshot again on scroll, but for now it doesn't seem + // important. + e.preventDefault(); + break; + + case "mousemove": + this.onMouseMove(e.target); + break; + } + } + + getElement(id) { + return this.markup.getElement(this.ID_CLASS_PREFIX + id); + } + + show(reason) { + if (this.env.isXUL || !reason) { + return false; + } + + // Only track mouse movement when the the overlay is shown + // Prevents mouse tracking when the user isn't paused + const { pageListenerTarget } = this.env; + pageListenerTarget.addEventListener("mousemove", this); + + // Show the highlighter's root element. + const root = this.getElement("root"); + root.removeAttribute("hidden"); + root.setAttribute("overlay", "true"); + + // Set the text to appear in the toolbar. + const toolbar = this.getElement("toolbar"); + this.getElement("reason").setTextContent( + PausedReasonsBundle.formatValueSync( + DEBUGGER_PAUSED_REASONS_L10N_MAPPING[reason] + ) + ); + toolbar.removeAttribute("hidden"); + + // When the debugger pauses execution in a page, events will not be delivered + // to any handlers added to elements on that page. So here we use the + // document's setSuppressedEventListener interface to still be able to act on mouse + // events (they'll be handled by the `handleEvent` method) + this.env.window.document.setSuppressedEventListener(this); + return true; + } + + hide() { + if (this.env.isXUL) { + return; + } + + const { pageListenerTarget } = this.env; + pageListenerTarget.removeEventListener("mousemove", this); + + // Hide the overlay. + this.getElement("root").setAttribute("hidden", "true"); + // Remove the hover state + this.getElement("step-button-wrapper").classList.remove("hover"); + this.getElement("resume-button-wrapper").classList.remove("hover"); + } +} +exports.PausedDebuggerOverlay = PausedDebuggerOverlay; diff --git a/devtools/server/actors/highlighters/remote-node-picker-notice.js b/devtools/server/actors/highlighters/remote-node-picker-notice.js new file mode 100644 index 0000000000..64b131d2a2 --- /dev/null +++ b/devtools/server/actors/highlighters/remote-node-picker-notice.js @@ -0,0 +1,188 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const { + CanvasFrameAnonymousContentHelper, +} = require("resource://devtools/server/actors/highlighters/utils/markup.js"); + +loader.lazyGetter(this, "HighlightersBundle", () => { + return new Localization(["devtools/shared/highlighters.ftl"], true); +}); + +loader.lazyGetter(this, "isAndroid", () => { + return Services.appinfo.OS === "Android"; +}); + +/** + * The RemoteNodePickerNotice is a class that displays a notice in a remote debugged page. + * This is used to signal to users they can click/tap an element to select it in the + * about:devtools-toolbox toolbox inspector. + */ +class RemoteNodePickerNotice { + #highlighterEnvironment; + #previousHoveredElement; + + rootElementId = "node-picker-notice-root"; + hideButtonId = "node-picker-notice-hide-button"; + infoNoticeElementId = "node-picker-notice-info"; + + /** + * @param {highlighterEnvironment} highlighterEnvironment + */ + constructor(highlighterEnvironment) { + this.#highlighterEnvironment = highlighterEnvironment; + + this.markup = new CanvasFrameAnonymousContentHelper( + this.#highlighterEnvironment, + this.#buildMarkup + ); + this.isReady = this.markup.initialize(); + } + + #buildMarkup = () => { + const container = this.markup.createNode({ + attributes: { class: "highlighter-container" }, + }); + + // Wrapper element. + const wrapper = this.markup.createNode({ + parent: container, + attributes: { + id: this.rootElementId, + hidden: "true", + overlay: "true", + }, + }); + + const toolbar = this.markup.createNode({ + parent: wrapper, + attributes: { + id: "node-picker-notice-toolbar", + class: "toolbar", + }, + }); + + this.markup.createNode({ + parent: toolbar, + attributes: { + id: "node-picker-notice-icon", + class: isAndroid ? "touch" : "", + }, + }); + + const actionStr = HighlightersBundle.formatValueSync( + isAndroid + ? "remote-node-picker-notice-action-touch" + : "remote-node-picker-notice-action-desktop" + ); + + this.markup.createNode({ + nodeType: "span", + parent: toolbar, + text: HighlightersBundle.formatValueSync("remote-node-picker-notice", { + action: actionStr, + }), + attributes: { + id: this.infoNoticeElementId, + }, + }); + + this.markup.createNode({ + nodeType: "button", + parent: toolbar, + text: HighlightersBundle.formatValueSync( + "remote-node-picker-notice-hide-button" + ), + attributes: { + id: this.hideButtonId, + }, + }); + + return container; + }; + + destroy() { + // hide will nullify take care of this.#abortController. + this.hide(); + this.markup.destroy(); + this.#highlighterEnvironment = null; + this.#previousHoveredElement = null; + } + + /** + * We can't use event listener directly on the anonymous content because they aren't + * working while the page is paused. + * This is called from the NodePicker instance for easier events management. + * + * @param {ClickEvent} + */ + onClick(e) { + const target = e.originalTarget || e.target; + const targetId = target?.id; + + if (targetId === this.hideButtonId) { + this.hide(); + } + } + + /** + * Since we can't use :hover in the CSS for the anonymous content as it wouldn't work + * when the page is paused, we have to roll our own implementation, adding a `.hover` + * class for the element we want to style on hover (e.g. the close button). + * This is called from the NodePicker instance for easier events management. + * + * @param {MouseMoveEvent} + */ + handleHoveredElement(e) { + const hideButton = this.markup.getElement(this.hideButtonId); + + const target = e.originalTarget || e.target; + const targetId = target?.id; + + // If the user didn't change targets, do nothing + if (this.#previousHoveredElement?.id === targetId) { + return; + } + + if (targetId === this.hideButtonId) { + hideButton.classList.add("hover"); + } else { + hideButton.classList.remove("hover"); + } + this.#previousHoveredElement = target; + } + + getMarkupRootElement() { + return this.markup.getElement(this.rootElementId); + } + + async show() { + if (this.#highlighterEnvironment.isXUL) { + return false; + } + await this.isReady; + + // Show the highlighter's root element. + const root = this.getMarkupRootElement(); + root.removeAttribute("hidden"); + root.setAttribute("overlay", "true"); + + return true; + } + + hide() { + if (this.#highlighterEnvironment.isXUL) { + return; + } + + // Hide the overlay. + this.getMarkupRootElement().setAttribute("hidden", "true"); + // Reset the hover state + this.markup.getElement(this.hideButtonId).classList.remove("hover"); + this.#previousHoveredElement = null; + } +} +exports.RemoteNodePickerNotice = RemoteNodePickerNotice; diff --git a/devtools/server/actors/highlighters/rulers.js b/devtools/server/actors/highlighters/rulers.js new file mode 100644 index 0000000000..b201757d8c --- /dev/null +++ b/devtools/server/actors/highlighters/rulers.js @@ -0,0 +1,312 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const EventEmitter = require("resource://devtools/shared/event-emitter.js"); +const { + getCurrentZoom, + setIgnoreLayoutChanges, +} = require("resource://devtools/shared/layout/utils.js"); +const { + CanvasFrameAnonymousContentHelper, +} = require("resource://devtools/server/actors/highlighters/utils/markup.js"); + +// Maximum size, in pixel, for the horizontal ruler and vertical ruler +// used by RulersHighlighter +const RULERS_MAX_X_AXIS = 10000; +const RULERS_MAX_Y_AXIS = 15000; +// Number of steps after we add a graduation, marker and text in +// RulersHighliter; currently the unit is in pixel. +const RULERS_GRADUATION_STEP = 5; +const RULERS_MARKER_STEP = 50; +const RULERS_TEXT_STEP = 100; + +/** + * The RulersHighlighter is a class that displays both horizontal and + * vertical rules on the page, along the top and left edges, with pixel + * graduations, useful for users to quickly check distances + */ +class RulersHighlighter { + constructor(highlighterEnv) { + this.env = highlighterEnv; + this.markup = new CanvasFrameAnonymousContentHelper( + highlighterEnv, + this._buildMarkup.bind(this) + ); + this.isReady = this.markup.initialize(); + + const { pageListenerTarget } = highlighterEnv; + pageListenerTarget.addEventListener("scroll", this); + pageListenerTarget.addEventListener("pagehide", this); + } + + ID_CLASS_PREFIX = "rulers-highlighter-"; + + _buildMarkup() { + const prefix = this.ID_CLASS_PREFIX; + + const createRuler = (axis, size) => { + let width, height; + let isHorizontal = true; + + if (axis === "x") { + width = size; + height = 16; + } else if (axis === "y") { + width = 16; + height = size; + isHorizontal = false; + } else { + throw new Error( + `Invalid type of axis given; expected "x" or "y" but got "${axis}"` + ); + } + + const g = this.markup.createSVGNode({ + nodeType: "g", + attributes: { + id: `${axis}-axis`, + }, + parent: svg, + prefix, + }); + + this.markup.createSVGNode({ + nodeType: "rect", + attributes: { + y: isHorizontal ? 0 : 16, + width, + height, + }, + parent: g, + }); + + const gRule = this.markup.createSVGNode({ + nodeType: "g", + attributes: { + id: `${axis}-axis-ruler`, + }, + parent: g, + prefix, + }); + + const pathGraduations = this.markup.createSVGNode({ + nodeType: "path", + attributes: { + class: "ruler-graduations", + width, + height, + }, + parent: gRule, + prefix, + }); + + const pathMarkers = this.markup.createSVGNode({ + nodeType: "path", + attributes: { + class: "ruler-markers", + width, + height, + }, + parent: gRule, + prefix, + }); + + const gText = this.markup.createSVGNode({ + nodeType: "g", + attributes: { + id: `${axis}-axis-text`, + class: (isHorizontal ? "horizontal" : "vertical") + "-labels", + }, + parent: g, + prefix, + }); + + let dGraduations = ""; + let dMarkers = ""; + let graduationLength; + + for (let i = 0; i < size; i += RULERS_GRADUATION_STEP) { + if (i === 0) { + continue; + } + + graduationLength = i % 2 === 0 ? 6 : 4; + + if (i % RULERS_TEXT_STEP === 0) { + graduationLength = 8; + this.markup.createSVGNode({ + nodeType: "text", + parent: gText, + attributes: { + x: isHorizontal ? 2 + i : -i - 1, + y: 5, + }, + }).textContent = i; + } + + if (isHorizontal) { + if (i % RULERS_MARKER_STEP === 0) { + dMarkers += `M${i} 0 L${i} ${graduationLength}`; + } else { + dGraduations += `M${i} 0 L${i} ${graduationLength} `; + } + } else if (i % 50 === 0) { + dMarkers += `M0 ${i} L${graduationLength} ${i}`; + } else { + dGraduations += `M0 ${i} L${graduationLength} ${i}`; + } + } + + pathGraduations.setAttribute("d", dGraduations); + pathMarkers.setAttribute("d", dMarkers); + + return g; + }; + + const container = this.markup.createNode({ + attributes: { class: "highlighter-container" }, + }); + + const root = this.markup.createNode({ + parent: container, + attributes: { + id: "root", + class: "root", + }, + prefix, + }); + + const svg = this.markup.createSVGNode({ + nodeType: "svg", + parent: root, + attributes: { + id: "elements", + class: "elements", + width: "100%", + height: "100%", + hidden: "true", + }, + prefix, + }); + + createRuler("x", RULERS_MAX_X_AXIS); + createRuler("y", RULERS_MAX_Y_AXIS); + + return container; + } + + handleEvent(event) { + switch (event.type) { + case "scroll": + this._onScroll(event); + break; + case "pagehide": + // If a page hide event is triggered for current window's highlighter, hide the + // highlighter. + if (event.target.defaultView === this.env.window) { + this.destroy(); + } + break; + } + } + + _onScroll(event) { + const prefix = this.ID_CLASS_PREFIX; + const { scrollX, scrollY } = event.view; + + this.markup + .getElement(`${prefix}x-axis-ruler`) + .setAttribute("transform", `translate(${-scrollX})`); + this.markup + .getElement(`${prefix}x-axis-text`) + .setAttribute("transform", `translate(${-scrollX})`); + this.markup + .getElement(`${prefix}y-axis-ruler`) + .setAttribute("transform", `translate(0, ${-scrollY})`); + this.markup + .getElement(`${prefix}y-axis-text`) + .setAttribute("transform", `translate(0, ${-scrollY})`); + } + + _update() { + const { window } = this.env; + + setIgnoreLayoutChanges(true); + + const zoom = getCurrentZoom(window); + const isZoomChanged = zoom !== this._zoom; + + if (isZoomChanged) { + this._zoom = zoom; + this.updateViewport(); + } + + setIgnoreLayoutChanges(false, window.document.documentElement); + + this._rafID = window.requestAnimationFrame(() => this._update()); + } + + _cancelUpdate() { + if (this._rafID) { + this.env.window.cancelAnimationFrame(this._rafID); + this._rafID = 0; + } + } + updateViewport() { + const { devicePixelRatio } = this.env.window; + + // Because `devicePixelRatio` is affected by zoom (see bug 809788), + // in order to get the "real" device pixel ratio, we need divide by `zoom` + const pixelRatio = devicePixelRatio / this._zoom; + + // The "real" device pixel ratio is used to calculate the max stroke + // width we can actually assign: on retina, for instance, it would be 0.5, + // where on non high dpi monitor would be 1. + const minWidth = 1 / pixelRatio; + const strokeWidth = Math.min(minWidth, minWidth / this._zoom); + + this.markup + .getElement(this.ID_CLASS_PREFIX + "root") + .setAttribute("style", `stroke-width:${strokeWidth};`); + } + + destroy() { + this.hide(); + + const { pageListenerTarget } = this.env; + + if (pageListenerTarget) { + pageListenerTarget.removeEventListener("scroll", this); + pageListenerTarget.removeEventListener("pagehide", this); + } + + this.markup.destroy(); + + EventEmitter.emit(this, "destroy"); + } + + show() { + this.markup.removeAttributeForElement( + this.ID_CLASS_PREFIX + "elements", + "hidden" + ); + + this._update(); + + return true; + } + + hide() { + this.markup.setAttributeForElement( + this.ID_CLASS_PREFIX + "elements", + "hidden", + "true" + ); + + this._cancelUpdate(); + } +} +exports.RulersHighlighter = RulersHighlighter; diff --git a/devtools/server/actors/highlighters/selector.js b/devtools/server/actors/highlighters/selector.js new file mode 100644 index 0000000000..249060fd3b --- /dev/null +++ b/devtools/server/actors/highlighters/selector.js @@ -0,0 +1,97 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const { + isNodeValid, +} = require("resource://devtools/server/actors/highlighters/utils/markup.js"); +const { + BoxModelHighlighter, +} = require("resource://devtools/server/actors/highlighters/box-model.js"); + +// How many maximum nodes can be highlighted at the same time by the SelectorHighlighter +const MAX_HIGHLIGHTED_ELEMENTS = 100; + +/** + * The SelectorHighlighter runs a given selector through querySelectorAll on the + * document of the provided context node and then uses the BoxModelHighlighter + * to highlight the matching nodes + */ +class SelectorHighlighter { + constructor(highlighterEnv) { + this.highlighterEnv = highlighterEnv; + this._highlighters = []; + } + + /** + * Show a BoxModelHighlighter on each node that matches a given selector. + * + * @param {DOMNode} node + * A context node used to get the document element on which to run + * querySelectorAll(). This node will not be highlighted. + * @param {Object} options + * Configuration options for SelectorHighlighter. + * All of the options for BoxModelHighlighter.show() are also valid here. + * @param {String} options.selector + * Required. CSS selector used with querySelectorAll() to find matching elements. + */ + async show(node, options = {}) { + this.hide(); + + if (!isNodeValid(node) || !options.selector) { + return false; + } + + let nodes = []; + try { + nodes = [...node.ownerDocument.querySelectorAll(options.selector)]; + } catch (e) { + // It's fine if the provided selector is invalid, `nodes` will be an empty array. + } + + // Prevent passing the `selector` option to BoxModelHighlighter + delete options.selector; + + const promises = []; + for (let i = 0; i < Math.min(nodes.length, MAX_HIGHLIGHTED_ELEMENTS); i++) { + promises.push(this._showHighlighter(nodes[i], options)); + } + + await Promise.all(promises); + return true; + } + + /** + * Create an instance of BoxModelHighlighter, wait for it to be ready + * (see CanvasFrameAnonymousContentHelper.initialize()), + * then show the highlighter on the given node with the given configuration options. + * + * @param {DOMNode} node + * Node to be highlighted + * @param {Object} options + * Configuration options for the BoxModelHighlighter + * @return {Promise} Promise that resolves when the BoxModelHighlighter is ready + */ + async _showHighlighter(node, options) { + const highlighter = new BoxModelHighlighter(this.highlighterEnv); + await highlighter.isReady; + + highlighter.show(node, options); + this._highlighters.push(highlighter); + } + + hide() { + for (const highlighter of this._highlighters) { + highlighter.destroy(); + } + this._highlighters = []; + } + + destroy() { + this.hide(); + this.highlighterEnv = null; + } +} +exports.SelectorHighlighter = SelectorHighlighter; diff --git a/devtools/server/actors/highlighters/shapes.js b/devtools/server/actors/highlighters/shapes.js new file mode 100644 index 0000000000..a77e8c31be --- /dev/null +++ b/devtools/server/actors/highlighters/shapes.js @@ -0,0 +1,3263 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const { + CanvasFrameAnonymousContentHelper, + getComputedStyle, +} = require("resource://devtools/server/actors/highlighters/utils/markup.js"); +const { + setIgnoreLayoutChanges, + getCurrentZoom, + getAdjustedQuads, + getFrameOffsets, +} = require("resource://devtools/shared/layout/utils.js"); +const { + AutoRefreshHighlighter, +} = require("resource://devtools/server/actors/highlighters/auto-refresh.js"); +const { + getDistance, + clickedOnEllipseEdge, + distanceToLine, + projection, + clickedOnPoint, +} = require("resource://devtools/server/actors/utils/shapes-utils.js"); +const { + identity, + apply, + translate, + multiply, + scale, + rotate, + changeMatrixBase, + getBasis, +} = require("resource://devtools/shared/layout/dom-matrix-2d.js"); +const EventEmitter = require("resource://devtools/shared/event-emitter.js"); +const { + getCSSStyleRules, +} = require("resource://devtools/shared/inspector/css-logic.js"); + +const BASE_MARKER_SIZE = 5; +// the width of the area around highlighter lines that can be clicked, in px +const LINE_CLICK_WIDTH = 5; +const ROTATE_LINE_LENGTH = 50; +const DOM_EVENTS = ["mousedown", "mousemove", "mouseup", "dblclick"]; +const _dragging = Symbol("shapes/dragging"); + +/** + * The ShapesHighlighter draws an outline shapes in the page. + * The idea is to have something that is able to wrap complex shapes for css properties + * such as shape-outside/inside, clip-path but also SVG elements. + * + * Notes on shape transformation: + * + * When using transform mode to translate, scale, and rotate shapes, a transformation + * matrix keeps track of the transformations done to the original shape. When the + * highlighter is toggled on/off or between transform mode and point editing mode, + * the transformations applied to the shape become permanent. + * + * While transformations are being performed on a shape, there is an "original" and + * a "transformed" coordinate system. This is used when scaling or rotating a rotated + * shape. + * + * The "original" coordinate system is the one where (0,0) is at the top left corner + * of the page, the x axis is horizontal, and the y axis is vertical. + * + * The "transformed" coordinate system is the one where (0,0) is at the top left + * corner of the current shape. The x axis follows the north edge of the shape + * (from the northwest corner to the northeast corner) and the y axis follows + * the west edge of the shape (from the northwest corner to the southwest corner). + * + * Because of rotation, the "north" and "west" edges might not actually be at the + * top and left of the transformed shape. Imagine that the compass directions are + * also rotated along with the shape. + * + * A refresher for coordinates and change of basis that may be helpful: + * https://www.math.ubc.ca/~behrend/math221/Coords.pdf + * + * @param {String} options.hoverPoint + * The point to highlight. + * @param {Boolean} options.transformMode + * Whether to show the highlighter in transforms mode. + * @param {} options.mode + */ +class ShapesHighlighter extends AutoRefreshHighlighter { + constructor(highlighterEnv) { + super(highlighterEnv); + EventEmitter.decorate(this); + + this.ID_CLASS_PREFIX = "shapes-"; + + this.referenceBox = "border"; + this.useStrokeBox = false; + this.geometryBox = ""; + this.hoveredPoint = null; + this.fillRule = ""; + this.numInsetPoints = 0; + this.transformMode = false; + this.viewport = {}; + + this.markup = new CanvasFrameAnonymousContentHelper( + this.highlighterEnv, + this._buildMarkup.bind(this) + ); + this.isReady = this.markup.initialize(); + this.onPageHide = this.onPageHide.bind(this); + + const { pageListenerTarget } = this.highlighterEnv; + DOM_EVENTS.forEach(event => + pageListenerTarget.addEventListener(event, this) + ); + pageListenerTarget.addEventListener("pagehide", this.onPageHide); + } + + _buildMarkup() { + const container = this.markup.createNode({ + attributes: { + class: "highlighter-container", + }, + }); + + // The root wrapper is used to unzoom the highlighter when needed. + const rootWrapper = this.markup.createNode({ + parent: container, + attributes: { + id: "root", + class: "root", + }, + prefix: this.ID_CLASS_PREFIX, + }); + + const mainSvg = this.markup.createSVGNode({ + nodeType: "svg", + parent: rootWrapper, + attributes: { + id: "shape-container", + class: "shape-container", + viewBox: "0 0 100 100", + preserveAspectRatio: "none", + }, + prefix: this.ID_CLASS_PREFIX, + }); + + // This clipPath and its children make sure the element quad outline + // is only shown when the shape extends past the element quads. + const clipSvg = this.markup.createSVGNode({ + nodeType: "clipPath", + parent: mainSvg, + attributes: { + id: "clip-path", + class: "clip-path", + }, + prefix: this.ID_CLASS_PREFIX, + }); + + this.markup.createSVGNode({ + nodeType: "polygon", + parent: clipSvg, + attributes: { + id: "clip-polygon", + class: "clip-polygon", + hidden: "true", + }, + prefix: this.ID_CLASS_PREFIX, + }); + + this.markup.createSVGNode({ + nodeType: "ellipse", + parent: clipSvg, + attributes: { + id: "clip-ellipse", + class: "clip-ellipse", + hidden: true, + }, + prefix: this.ID_CLASS_PREFIX, + }); + + this.markup.createSVGNode({ + nodeType: "rect", + parent: clipSvg, + attributes: { + id: "clip-rect", + class: "clip-rect", + hidden: true, + }, + prefix: this.ID_CLASS_PREFIX, + }); + + // Rectangle that displays the element quads. Only shown for shape-outside. + // Only the parts of the rectangle's outline that overlap with the shape is shown. + this.markup.createSVGNode({ + nodeType: "rect", + parent: mainSvg, + attributes: { + id: "quad", + class: "quad", + hidden: "true", + "clip-path": "url(#shapes-clip-path)", + x: 0, + y: 0, + width: 100, + height: 100, + }, + prefix: this.ID_CLASS_PREFIX, + }); + + // clipPath that corresponds to the element's quads. Only applied for shape-outside. + // This ensures only the parts of the shape that are within the element's quads are + // outlined by a solid line. + const shapeClipSvg = this.markup.createSVGNode({ + nodeType: "clipPath", + parent: mainSvg, + attributes: { + id: "quad-clip-path", + class: "quad-clip-path", + }, + prefix: this.ID_CLASS_PREFIX, + }); + + this.markup.createSVGNode({ + nodeType: "rect", + parent: shapeClipSvg, + attributes: { + id: "quad-clip", + class: "quad-clip", + x: -1, + y: -1, + width: 102, + height: 102, + }, + prefix: this.ID_CLASS_PREFIX, + }); + + const mainGroup = this.markup.createSVGNode({ + nodeType: "g", + parent: mainSvg, + attributes: { + id: "group", + }, + prefix: this.ID_CLASS_PREFIX, + }); + + // Append a polygon for polygon shapes. + this.markup.createSVGNode({ + nodeType: "polygon", + parent: mainGroup, + attributes: { + id: "polygon", + class: "polygon", + hidden: "true", + }, + prefix: this.ID_CLASS_PREFIX, + }); + + // Append an ellipse for circle/ellipse shapes. + this.markup.createSVGNode({ + nodeType: "ellipse", + parent: mainGroup, + attributes: { + id: "ellipse", + class: "ellipse", + hidden: true, + }, + prefix: this.ID_CLASS_PREFIX, + }); + + // Append a rect for inset(). + this.markup.createSVGNode({ + nodeType: "rect", + parent: mainGroup, + attributes: { + id: "rect", + class: "rect", + hidden: true, + }, + prefix: this.ID_CLASS_PREFIX, + }); + + // Dashed versions of each shape. Only shown for the parts of the shape + // that extends past the element's quads. + this.markup.createSVGNode({ + nodeType: "polygon", + parent: mainGroup, + attributes: { + id: "dashed-polygon", + class: "polygon", + hidden: "true", + "stroke-dasharray": "5, 5", + }, + prefix: this.ID_CLASS_PREFIX, + }); + + this.markup.createSVGNode({ + nodeType: "ellipse", + parent: mainGroup, + attributes: { + id: "dashed-ellipse", + class: "ellipse", + hidden: "true", + "stroke-dasharray": "5, 5", + }, + prefix: this.ID_CLASS_PREFIX, + }); + + this.markup.createSVGNode({ + nodeType: "rect", + parent: mainGroup, + attributes: { + id: "dashed-rect", + class: "rect", + hidden: "true", + "stroke-dasharray": "5, 5", + }, + prefix: this.ID_CLASS_PREFIX, + }); + + this.markup.createSVGNode({ + nodeType: "path", + parent: mainGroup, + attributes: { + id: "bounding-box", + class: "bounding-box", + "stroke-dasharray": "5, 5", + hidden: true, + }, + prefix: this.ID_CLASS_PREFIX, + }); + + this.markup.createSVGNode({ + nodeType: "path", + parent: mainGroup, + attributes: { + id: "rotate-line", + class: "rotate-line", + }, + prefix: this.ID_CLASS_PREFIX, + }); + + // Append a path to display the markers for the shape. + this.markup.createSVGNode({ + nodeType: "path", + parent: mainGroup, + attributes: { + id: "markers-outline", + class: "markers-outline", + }, + prefix: this.ID_CLASS_PREFIX, + }); + + this.markup.createSVGNode({ + nodeType: "path", + parent: mainGroup, + attributes: { + id: "markers", + class: "markers", + }, + prefix: this.ID_CLASS_PREFIX, + }); + + this.markup.createSVGNode({ + nodeType: "path", + parent: mainGroup, + attributes: { + id: "marker-hover", + class: "marker-hover", + hidden: true, + }, + prefix: this.ID_CLASS_PREFIX, + }); + + return container; + } + + get currentDimensions() { + let dims = this.currentQuads[this.referenceBox][0].bounds; + const zoom = getCurrentZoom(this.win); + + // If an SVG element has a stroke, currentQuads will return the stroke bounding box. + // However, clip-path always uses the object bounding box unless "stroke-box" is + // specified. So, we must calculate the object bounding box if there is a stroke + // and "stroke-box" is not specified. stroke only applies to SVG elements, so use + // getBBox, which only exists for SVG, to check if currentNode is an SVG element. + if ( + this.drawingNode.getBBox && + getComputedStyle(this.drawingNode).stroke !== "none" && + !this.useStrokeBox + ) { + dims = getObjectBoundingBox( + dims.top, + dims.left, + dims.width, + dims.height, + this.drawingNode + ); + } + + return { + top: dims.top / zoom, + left: dims.left / zoom, + width: dims.width / zoom, + height: dims.height / zoom, + }; + } + + get frameDimensions() { + // In an iframe, we get the node's quads relative to the frame, instead of the parent + // document. + let dims = + this.highlighterEnv.window.document === this.drawingNode.ownerDocument + ? this.currentQuads[this.referenceBox][0].bounds + : getAdjustedQuads( + this.drawingNode.ownerGlobal, + this.drawingNode, + this.referenceBox + )[0].bounds; + const zoom = getCurrentZoom(this.win); + + // If an SVG element has a stroke, currentQuads will return the stroke bounding box. + // However, clip-path always uses the object bounding box unless "stroke-box" is + // specified. So, we must calculate the object bounding box if there is a stroke + // and "stroke-box" is not specified. stroke only applies to SVG elements, so use + // getBBox, which only exists for SVG, to check if currentNode is an SVG element. + if ( + this.drawingNode.getBBox && + getComputedStyle(this.drawingNode).stroke !== "none" && + !this.useStrokeBox + ) { + dims = getObjectBoundingBox( + dims.top, + dims.left, + dims.width, + dims.height, + this.drawingNode + ); + } + + return { + top: dims.top / zoom, + left: dims.left / zoom, + width: dims.width / zoom, + height: dims.height / zoom, + }; + } + + /** + * Changes the appearance of the mouse cursor on the highlighter. + * + * Because we can't attach event handlers to individual elements in the + * highlighter, we determine if the mouse is hovering over a point by seeing if + * it's within 5 pixels of it. This creates a square hitbox that doesn't match + * perfectly with the circular markers. So if we were to use the :hover + * pseudo-class to apply changes to the mouse cursor, the cursor change would not + * always accurately reflect whether you can interact with the point. This is + * also the reason we have the hidden marker-hover element instead of using CSS + * to fill in the marker. + * + * In addition, the cursor CSS property is applied to .shapes-root because if + * it were attached to .shapes-marker, the cursor change no longer applies if + * you are for example resizing the shape and your mouse goes off the point. + * Also, if you are dragging a polygon point, the marker plays catch up to your + * mouse position, resulting in an undesirable visual effect where the cursor + * rapidly flickers between "grab" and "auto". + * + * @param {String} cursorType the name of the cursor to display + */ + setCursor(cursorType) { + const container = this.getElement("root"); + let style = container.getAttribute("style"); + // remove existing cursor definitions in the style + style = style.replace(/cursor:.*?;/g, ""); + style = style.replace(/pointer-events:.*?;/g, ""); + const pointerEvents = cursorType === "auto" ? "none" : "auto"; + container.setAttribute( + "style", + `${style}pointer-events:${pointerEvents};cursor:${cursorType};` + ); + } + + /** + * Set the absolute pixel offsets which define the current viewport in relation to + * the full page size. + * + * If a padding value is given, inset the viewport by this value. This is used to define + * a virtual viewport which ensures some element remains visible even when at the edges + * of the actual viewport. + * + * @param {Number} padding + * Optional. Amount by which to inset the viewport in all directions. + */ + setViewport(padding = 0) { + let xOffset = 0; + let yOffset = 0; + + // If the node exists within an iframe, get offsets for the virtual viewport so that + // points can be dragged to the extent of the global window, outside of the iframe + // window. + if (this.currentNode.ownerGlobal !== this.win) { + const win = this.win; + const nodeWin = this.currentNode.ownerGlobal; + // Get bounding box of iframe document relative to global document. + const bounds = nodeWin.document + .getBoxQuads({ + relativeTo: win.document, + createFramesForSuppressedWhitespace: false, + })[0] + .getBounds(); + xOffset = bounds.left - nodeWin.scrollX + win.scrollX; + yOffset = bounds.top - nodeWin.scrollY + win.scrollY; + } + + const { pageXOffset, pageYOffset } = this.win; + const { clientHeight, clientWidth } = this.win.document.documentElement; + const left = pageXOffset + padding - xOffset; + const right = clientWidth + pageXOffset - padding - xOffset; + const top = pageYOffset + padding - yOffset; + const bottom = clientHeight + pageYOffset - padding - yOffset; + this.viewport = { left, right, top, bottom, padding }; + } + + // eslint-disable-next-line complexity + handleEvent(event, id) { + // No event handling if the highlighter is hidden + if (this.areShapesHidden()) { + return; + } + + let { target, type, pageX, pageY } = event; + + // For events on highlighted nodes in an iframe, when the event takes place + // outside the iframe. Check if event target belongs to the iframe. If it doesn't, + // adjust pageX/pageY to be relative to the iframe rather than the parent. + const nodeDocument = this.currentNode.ownerDocument; + if (target !== nodeDocument && target.ownerDocument !== nodeDocument) { + const [xOffset, yOffset] = getFrameOffsets( + target.ownerGlobal, + this.currentNode + ); + const zoom = getCurrentZoom(this.win); + // xOffset/yOffset are relative to the viewport, so first find the top/left + // edges of the viewport relative to the page. + const viewportLeft = pageX - event.clientX; + const viewportTop = pageY - event.clientY; + // Also adjust for scrolling in the iframe. + const { scrollTop, scrollLeft } = nodeDocument.documentElement; + pageX -= viewportLeft + xOffset / zoom - scrollLeft; + pageY -= viewportTop + yOffset / zoom - scrollTop; + } + + switch (type) { + case "pagehide": + // If a page hide event is triggered for current window's highlighter, hide the + // highlighter. + if (target.defaultView === this.win) { + this.destroy(); + } + + break; + case "mousedown": + if (this.transformMode) { + this._handleTransformClick(pageX, pageY); + } else if (this.shapeType === "polygon") { + this._handlePolygonClick(pageX, pageY); + } else if (this.shapeType === "circle") { + this._handleCircleClick(pageX, pageY); + } else if (this.shapeType === "ellipse") { + this._handleEllipseClick(pageX, pageY); + } else if (this.shapeType === "inset") { + this._handleInsetClick(pageX, pageY); + } + event.stopPropagation(); + event.preventDefault(); + + // Calculate constraints for a virtual viewport which ensures that a dragged + // marker remains visible even at the edges of the actual viewport. + this.setViewport(BASE_MARKER_SIZE); + break; + case "mouseup": + if (this[_dragging]) { + this[_dragging] = null; + this._handleMarkerHover(this.hoveredPoint); + } + break; + case "mousemove": + if (!this[_dragging]) { + this._handleMouseMoveNotDragging(pageX, pageY); + return; + } + event.stopPropagation(); + event.preventDefault(); + + // Set constraints for mouse position to ensure dragged marker stays in viewport. + const { left, right, top, bottom } = this.viewport; + pageX = Math.min(Math.max(left, pageX), right); + pageY = Math.min(Math.max(top, pageY), bottom); + + const { point } = this[_dragging]; + if (this.transformMode) { + this._handleTransformMove(pageX, pageY); + } else if (this.shapeType === "polygon") { + this._handlePolygonMove(pageX, pageY); + } else if (this.shapeType === "circle") { + this._handleCircleMove(point, pageX, pageY); + } else if (this.shapeType === "ellipse") { + this._handleEllipseMove(point, pageX, pageY); + } else if (this.shapeType === "inset") { + this._handleInsetMove(point, pageX, pageY); + } + break; + case "dblclick": + if (this.shapeType === "polygon" && !this.transformMode) { + const { percentX, percentY } = this.convertPageCoordsToPercent( + pageX, + pageY + ); + const index = this.getPolygonPointAt(percentX, percentY); + if (index === -1) { + this.getPolygonClickedLine(percentX, percentY); + return; + } + + this._deletePolygonPoint(index); + } + break; + } + } + + /** + * Handle a mouse click in transform mode. + * @param {Number} pageX the x coordinate of the mouse + * @param {Number} pageY the y coordinate of the mouse + */ + _handleTransformClick(pageX, pageY) { + const { percentX, percentY } = this.convertPageCoordsToPercent( + pageX, + pageY + ); + const type = this.getTransformPointAt(percentX, percentY); + if (!type) { + return; + } + + if (this.shapeType === "polygon") { + this._handlePolygonTransformClick(pageX, pageY, type); + } else if (this.shapeType === "circle") { + this._handleCircleTransformClick(pageX, pageY, type); + } else if (this.shapeType === "ellipse") { + this._handleEllipseTransformClick(pageX, pageY, type); + } else if (this.shapeType === "inset") { + this._handleInsetTransformClick(pageX, pageY, type); + } + } + + /** + * Handle a click in transform mode while highlighting a polygon. + * @param {Number} pageX the x coordinate of the mouse. + * @param {Number} pageY the y coordinate of the mouse. + * @param {String} type the type of transform handle that was clicked. + */ + _handlePolygonTransformClick(pageX, pageY, type) { + const { width, height } = this.currentDimensions; + const pointsInfo = this.origCoordUnits.map(([x, y], i) => { + const xComputed = (this.origCoordinates[i][0] / 100) * width; + const yComputed = (this.origCoordinates[i][1] / 100) * height; + const unitX = getUnit(x); + const unitY = getUnit(y); + const valueX = isUnitless(x) ? xComputed : parseFloat(x); + const valueY = isUnitless(y) ? yComputed : parseFloat(y); + + const ratioX = this.getUnitToPixelRatio(unitX, width); + const ratioY = this.getUnitToPixelRatio(unitY, height); + return { unitX, unitY, valueX, valueY, ratioX, ratioY }; + }); + this[_dragging] = { + type, + pointsInfo, + x: pageX, + y: pageY, + bb: this.boundingBox, + matrix: this.transformMatrix, + transformedBB: this.transformedBoundingBox, + }; + this._handleMarkerHover(this.hoveredPoint); + } + + /** + * Handle a click in transform mode while highlighting a circle. + * @param {Number} pageX the x coordinate of the mouse. + * @param {Number} pageY the y coordinate of the mouse. + * @param {String} type the type of transform handle that was clicked. + */ + _handleCircleTransformClick(pageX, pageY, type) { + const { width, height } = this.currentDimensions; + const { cx, cy } = this.origCoordUnits; + const cxComputed = (this.origCoordinates.cx / 100) * width; + const cyComputed = (this.origCoordinates.cy / 100) * height; + const unitX = getUnit(cx); + const unitY = getUnit(cy); + const valueX = isUnitless(cx) ? cxComputed : parseFloat(cx); + const valueY = isUnitless(cy) ? cyComputed : parseFloat(cy); + + const ratioX = this.getUnitToPixelRatio(unitX, width); + const ratioY = this.getUnitToPixelRatio(unitY, height); + + let { radius } = this.origCoordinates; + const computedSize = Math.sqrt(width ** 2 + height ** 2) / Math.sqrt(2); + radius = (radius / 100) * computedSize; + let valueRad = this.origCoordUnits.radius; + const unitRad = getUnit(valueRad); + valueRad = isUnitless(valueRad) ? radius : parseFloat(valueRad); + const ratioRad = this.getUnitToPixelRatio(unitRad, computedSize); + + this[_dragging] = { + type, + unitX, + unitY, + unitRad, + valueX, + valueY, + ratioX, + ratioY, + ratioRad, + x: pageX, + y: pageY, + bb: this.boundingBox, + matrix: this.transformMatrix, + transformedBB: this.transformedBoundingBox, + }; + } + + /** + * Handle a click in transform mode while highlighting an ellipse. + * @param {Number} pageX the x coordinate of the mouse. + * @param {Number} pageY the y coordinate of the mouse. + * @param {String} type the type of transform handle that was clicked. + */ + _handleEllipseTransformClick(pageX, pageY, type) { + const { width, height } = this.currentDimensions; + const { cx, cy } = this.origCoordUnits; + const cxComputed = (this.origCoordinates.cx / 100) * width; + const cyComputed = (this.origCoordinates.cy / 100) * height; + const unitX = getUnit(cx); + const unitY = getUnit(cy); + const valueX = isUnitless(cx) ? cxComputed : parseFloat(cx); + const valueY = isUnitless(cy) ? cyComputed : parseFloat(cy); + + const ratioX = this.getUnitToPixelRatio(unitX, width); + const ratioY = this.getUnitToPixelRatio(unitY, height); + + let { rx, ry } = this.origCoordinates; + rx = (rx / 100) * width; + let valueRX = this.origCoordUnits.rx; + const unitRX = getUnit(valueRX); + valueRX = isUnitless(valueRX) ? rx : parseFloat(valueRX); + const ratioRX = valueRX / rx || 1; + ry = (ry / 100) * height; + let valueRY = this.origCoordUnits.ry; + const unitRY = getUnit(valueRY); + valueRY = isUnitless(valueRY) ? ry : parseFloat(valueRY); + const ratioRY = valueRY / ry || 1; + + this[_dragging] = { + type, + unitX, + unitY, + unitRX, + unitRY, + valueX, + valueY, + ratioX, + ratioY, + ratioRX, + ratioRY, + x: pageX, + y: pageY, + bb: this.boundingBox, + matrix: this.transformMatrix, + transformedBB: this.transformedBoundingBox, + }; + } + + /** + * Handle a click in transform mode while highlighting an inset. + * @param {Number} pageX the x coordinate of the mouse. + * @param {Number} pageY the y coordinate of the mouse. + * @param {String} type the type of transform handle that was clicked. + */ + _handleInsetTransformClick(pageX, pageY, type) { + const { width, height } = this.currentDimensions; + const pointsInfo = {}; + ["top", "right", "bottom", "left"].forEach(point => { + let value = this.origCoordUnits[point]; + const size = point === "left" || point === "right" ? width : height; + const computedValue = (this.origCoordinates[point] / 100) * size; + const unit = getUnit(value); + value = isUnitless(value) ? computedValue : parseFloat(value); + const ratio = this.getUnitToPixelRatio(unit, size); + + pointsInfo[point] = { value, unit, ratio }; + }); + this[_dragging] = { + type, + pointsInfo, + x: pageX, + y: pageY, + bb: this.boundingBox, + matrix: this.transformMatrix, + transformedBB: this.transformedBoundingBox, + }; + } + + /** + * Handle mouse movement after a click on a handle in transform mode. + * @param {Number} pageX the x coordinate of the mouse + * @param {Number} pageY the y coordinate of the mouse + */ + _handleTransformMove(pageX, pageY) { + const { type } = this[_dragging]; + if (type === "translate") { + this._translateShape(pageX, pageY); + } else if (type.includes("scale")) { + this._scaleShape(pageX, pageY); + } else if (type === "rotate" && this.shapeType === "polygon") { + this._rotateShape(pageX, pageY); + } + + this.transformedBoundingBox = this.calculateTransformedBoundingBox(); + } + + /** + * Translates a shape based on the current mouse position. + * @param {Number} pageX the x coordinate of the mouse. + * @param {Number} pageY the y coordinate of the mouse. + */ + _translateShape(pageX, pageY) { + const { x, y, matrix } = this[_dragging]; + const deltaX = pageX - x; + const deltaY = pageY - y; + this.transformMatrix = multiply(translate(deltaX, deltaY), matrix); + + if (this.shapeType === "polygon") { + this._transformPolygon(); + } else if (this.shapeType === "circle") { + this._transformCircle(); + } else if (this.shapeType === "ellipse") { + this._transformEllipse(); + } else if (this.shapeType === "inset") { + this._transformInset(); + } + } + + /** + * Scales a shape according to the current mouse position. + * @param {Number} pageX the x coordinate of the mouse. + * @param {Number} pageY the y coordinate of the mouse. + */ + _scaleShape(pageX, pageY) { + /** + * To scale a shape: + * 1) Get the change of basis matrix corresponding to the current transformation + * matrix of the shape. + * 2) Convert the mouse x/y deltas to the "transformed" coordinate system, using + * the change of base matrix. + * 3) Calculate the proportion to which the shape should be scaled to, using the + * mouse x/y deltas and the width/height of the transformed shape. + * 4) Translate the shape such that the anchor (the point opposite to the one + * being dragged) is at the top left of the element. + * 5) Scale each point by multiplying by the scaling proportion. + * 6) Translate the shape back such that the anchor is in its original position. + */ + const { type, x, y, matrix } = this[_dragging]; + const { width, height } = this.currentDimensions; + // The point opposite to the one being dragged + const anchor = getAnchorPoint(type); + + const { ne, nw, sw } = this[_dragging].transformedBB; + // u/v are the basis vectors of the transformed coordinate system. + const u = [ + ((ne[0] - nw[0]) / 100) * width, + ((ne[1] - nw[1]) / 100) * height, + ]; + const v = [ + ((sw[0] - nw[0]) / 100) * width, + ((sw[1] - nw[1]) / 100) * height, + ]; + // uLength/vLength represent the width/height of the shape in the + // transformed coordinate system. + const { basis, invertedBasis, uLength, vLength } = getBasis(u, v); + + // How much points on each axis should be translated before scaling + const transX = (this[_dragging].transformedBB[anchor][0] / 100) * width; + const transY = (this[_dragging].transformedBB[anchor][1] / 100) * height; + + // Distance from original click to current mouse position + const distanceX = pageX - x; + const distanceY = pageY - y; + // Convert from original coordinate system to transformed coordinate system + const tDistanceX = + invertedBasis[0] * distanceX + invertedBasis[1] * distanceY; + const tDistanceY = + invertedBasis[3] * distanceX + invertedBasis[4] * distanceY; + + // Proportion of distance to bounding box width/height of shape + const proportionX = tDistanceX / uLength; + const proportionY = tDistanceY / vLength; + // proportionX is positive for size reductions dragging on w/nw/sw, + // negative for e/ne/se. + const scaleX = type.includes("w") ? 1 - proportionX : 1 + proportionX; + // proportionT is positive for size reductions dragging on n/nw/ne, + // negative for s/sw/se. + const scaleY = type.includes("n") ? 1 - proportionY : 1 + proportionY; + // Take the average of scaleX/scaleY for scaling on two axes + const scaleXY = (scaleX + scaleY) / 2; + + const translateMatrix = translate(-transX, -transY); + let scaleMatrix = identity(); + // The scale matrices are in the transformed coordinate system. We must convert + // them to the original coordinate system before applying it to the transformation + // matrix. + if (type === "scale-e" || type === "scale-w") { + scaleMatrix = changeMatrixBase(scale(scaleX, 1), invertedBasis, basis); + } else if (type === "scale-n" || type === "scale-s") { + scaleMatrix = changeMatrixBase(scale(1, scaleY), invertedBasis, basis); + } else { + scaleMatrix = changeMatrixBase( + scale(scaleXY, scaleXY), + invertedBasis, + basis + ); + } + const translateBackMatrix = translate(transX, transY); + this.transformMatrix = multiply( + translateBackMatrix, + multiply(scaleMatrix, multiply(translateMatrix, matrix)) + ); + + if (this.shapeType === "polygon") { + this._transformPolygon(); + } else if (this.shapeType === "circle") { + this._transformCircle(transX); + } else if (this.shapeType === "ellipse") { + this._transformEllipse(transX, transY); + } else if (this.shapeType === "inset") { + this._transformInset(); + } + } + + /** + * Rotates a polygon based on the current mouse position. + * @param {Number} pageX the x coordinate of the mouse. + * @param {Number} pageY the y coordinate of the mouse. + */ + _rotateShape(pageX, pageY) { + const { matrix } = this[_dragging]; + const { center, ne, nw, sw } = this[_dragging].transformedBB; + const { width, height } = this.currentDimensions; + const centerX = (center[0] / 100) * width; + const centerY = (center[1] / 100) * height; + const { x: pageCenterX, y: pageCenterY } = this.convertPercentToPageCoords( + ...center + ); + + const dx = pageCenterX - pageX; + const dy = pageCenterY - pageY; + + const u = [ + ((ne[0] - nw[0]) / 100) * width, + ((ne[1] - nw[1]) / 100) * height, + ]; + const v = [ + ((sw[0] - nw[0]) / 100) * width, + ((sw[1] - nw[1]) / 100) * height, + ]; + const { invertedBasis } = getBasis(u, v); + + const tdx = invertedBasis[0] * dx + invertedBasis[1] * dy; + const tdy = invertedBasis[3] * dx + invertedBasis[4] * dy; + const angle = Math.atan2(tdx, tdy); + const translateMatrix = translate(-centerX, -centerY); + const rotateMatrix = rotate(angle); + const translateBackMatrix = translate(centerX, centerY); + this.transformMatrix = multiply( + translateBackMatrix, + multiply(rotateMatrix, multiply(translateMatrix, matrix)) + ); + + this._transformPolygon(); + } + + /** + * Transform a polygon depending on the current transformation matrix. + */ + _transformPolygon() { + const { pointsInfo } = this[_dragging]; + + let polygonDef = this.fillRule ? `${this.fillRule}, ` : ""; + polygonDef += pointsInfo + .map(point => { + const { unitX, unitY, valueX, valueY, ratioX, ratioY } = point; + const vector = [valueX / ratioX, valueY / ratioY]; + let [newX, newY] = apply(this.transformMatrix, vector); + newX = round(newX * ratioX, unitX); + newY = round(newY * ratioY, unitY); + + return `${newX}${unitX} ${newY}${unitY}`; + }) + .join(", "); + polygonDef = `polygon(${polygonDef}) ${this.geometryBox}`.trim(); + + this.emit("highlighter-event", { type: "shape-change", value: polygonDef }); + } + + /** + * Transform a circle depending on the current transformation matrix. + * @param {Number} transX the number of pixels the shape is translated on the x axis + * before scaling + */ + _transformCircle(transX = null) { + const { unitX, unitY, unitRad, valueX, valueY, ratioX, ratioY, ratioRad } = + this[_dragging]; + let { radius } = this.coordUnits; + + let [newCx, newCy] = apply(this.transformMatrix, [ + valueX / ratioX, + valueY / ratioY, + ]); + if (transX !== null) { + // As part of scaling, the shape is translated to be tangent to the line y=0. + // To get the new radius, we translate the new cx back to that point and get + // the distance to the line y=0. + radius = round(Math.abs((newCx - transX) * ratioRad), unitRad); + radius = `${radius}${unitRad}`; + } + + newCx = round(newCx * ratioX, unitX); + newCy = round(newCy * ratioY, unitY); + const circleDef = + `circle(${radius} at ${newCx}${unitX} ${newCy}${unitY})` + + ` ${this.geometryBox}`.trim(); + this.emit("highlighter-event", { type: "shape-change", value: circleDef }); + } + + /** + * Transform an ellipse depending on the current transformation matrix. + * @param {Number} transX the number of pixels the shape is translated on the x axis + * before scaling + * @param {Number} transY the number of pixels the shape is translated on the y axis + * before scaling + */ + _transformEllipse(transX = null, transY = null) { + const { + unitX, + unitY, + unitRX, + unitRY, + valueX, + valueY, + ratioX, + ratioY, + ratioRX, + ratioRY, + } = this[_dragging]; + let { rx, ry } = this.coordUnits; + + let [newCx, newCy] = apply(this.transformMatrix, [ + valueX / ratioX, + valueY / ratioY, + ]); + if (transX !== null && transY !== null) { + // As part of scaling, the shape is translated to be tangent to the lines y=0 & x=0. + // To get the new radii, we translate the new center back to that point and get the + // distances to the line x=0 and y=0. + rx = round(Math.abs((newCx - transX) * ratioRX), unitRX); + rx = `${rx}${unitRX}`; + ry = round(Math.abs((newCy - transY) * ratioRY), unitRY); + ry = `${ry}${unitRY}`; + } + + newCx = round(newCx * ratioX, unitX); + newCy = round(newCy * ratioY, unitY); + + const centerStr = `${newCx}${unitX} ${newCy}${unitY}`; + const ellipseDef = + `ellipse(${rx} ${ry} at ${centerStr}) ${this.geometryBox}`.trim(); + this.emit("highlighter-event", { type: "shape-change", value: ellipseDef }); + } + + /** + * Transform an inset depending on the current transformation matrix. + */ + _transformInset() { + const { top, left, right, bottom } = this[_dragging].pointsInfo; + const { width, height } = this.currentDimensions; + + const topLeft = [left.value / left.ratio, top.value / top.ratio]; + let [newLeft, newTop] = apply(this.transformMatrix, topLeft); + newLeft = round(newLeft * left.ratio, left.unit); + newLeft = `${newLeft}${left.unit}`; + newTop = round(newTop * top.ratio, top.unit); + newTop = `${newTop}${top.unit}`; + + // Right and bottom values are relative to the right and bottom edges of the + // element, so convert to the value relative to the left/top edges before scaling + // and convert back. + const bottomRight = [ + width - right.value / right.ratio, + height - bottom.value / bottom.ratio, + ]; + let [newRight, newBottom] = apply(this.transformMatrix, bottomRight); + newRight = round((width - newRight) * right.ratio, right.unit); + newRight = `${newRight}${right.unit}`; + newBottom = round((height - newBottom) * bottom.ratio, bottom.unit); + newBottom = `${newBottom}${bottom.unit}`; + + let insetDef = this.insetRound + ? `inset(${newTop} ${newRight} ${newBottom} ${newLeft} round ${this.insetRound})` + : `inset(${newTop} ${newRight} ${newBottom} ${newLeft})`; + insetDef += this.geometryBox ? this.geometryBox : ""; + + this.emit("highlighter-event", { type: "shape-change", value: insetDef }); + } + + /** + * Handle a click when highlighting a polygon. + * @param {Number} pageX the x coordinate of the click + * @param {Number} pageY the y coordinate of the click + */ + _handlePolygonClick(pageX, pageY) { + const { width, height } = this.currentDimensions; + const { percentX, percentY } = this.convertPageCoordsToPercent( + pageX, + pageY + ); + const point = this.getPolygonPointAt(percentX, percentY); + if (point === -1) { + return; + } + + const [x, y] = this.coordUnits[point]; + const xComputed = (this.coordinates[point][0] / 100) * width; + const yComputed = (this.coordinates[point][1] / 100) * height; + const unitX = getUnit(x); + const unitY = getUnit(y); + const valueX = isUnitless(x) ? xComputed : parseFloat(x); + const valueY = isUnitless(y) ? yComputed : parseFloat(y); + + const ratioX = this.getUnitToPixelRatio(unitX, width); + const ratioY = this.getUnitToPixelRatio(unitY, height); + + this.setCursor("grabbing"); + this[_dragging] = { + point, + unitX, + unitY, + valueX, + valueY, + ratioX, + ratioY, + x: pageX, + y: pageY, + }; + } + + /** + * Update the dragged polygon point with the given x/y coords and update + * the element style. + * @param {Number} pageX the new x coordinate of the point + * @param {Number} pageY the new y coordinate of the point + */ + _handlePolygonMove(pageX, pageY) { + const { point, unitX, unitY, valueX, valueY, ratioX, ratioY, x, y } = + this[_dragging]; + const deltaX = (pageX - x) * ratioX; + const deltaY = (pageY - y) * ratioY; + const newX = round(valueX + deltaX, unitX); + const newY = round(valueY + deltaY, unitY); + + let polygonDef = this.fillRule ? `${this.fillRule}, ` : ""; + polygonDef += this.coordUnits + .map((coords, i) => { + return i === point + ? `${newX}${unitX} ${newY}${unitY}` + : `${coords[0]} ${coords[1]}`; + }) + .join(", "); + polygonDef = `polygon(${polygonDef}) ${this.geometryBox}`.trim(); + + this.emit("highlighter-event", { type: "shape-change", value: polygonDef }); + } + + /** + * Add new point to the polygon defintion and update element style. + * TODO: Bug 1436054 - Do not default to percentage unit when inserting new point. + * https://bugzilla.mozilla.org/show_bug.cgi?id=1436054 + * + * @param {Number} after the index of the point that the new point should be added after + * @param {Number} x the x coordinate of the new point + * @param {Number} y the y coordinate of the new point + */ + _addPolygonPoint(after, x, y) { + let polygonDef = this.fillRule ? `${this.fillRule}, ` : ""; + polygonDef += this.coordUnits + .map((coords, i) => { + return i === after + ? `${coords[0]} ${coords[1]}, ${x}% ${y}%` + : `${coords[0]} ${coords[1]}`; + }) + .join(", "); + polygonDef = `polygon(${polygonDef}) ${this.geometryBox}`.trim(); + + this.hoveredPoint = after + 1; + this._emitHoverEvent(this.hoveredPoint); + this.emit("highlighter-event", { type: "shape-change", value: polygonDef }); + } + + /** + * Remove point from polygon defintion and update the element style. + * @param {Number} point the index of the point to delete + */ + _deletePolygonPoint(point) { + const coordinates = this.coordUnits.slice(); + coordinates.splice(point, 1); + let polygonDef = this.fillRule ? `${this.fillRule}, ` : ""; + polygonDef += coordinates + .map((coords, i) => { + return `${coords[0]} ${coords[1]}`; + }) + .join(", "); + polygonDef = `polygon(${polygonDef}) ${this.geometryBox}`.trim(); + + this.hoveredPoint = null; + this._emitHoverEvent(this.hoveredPoint); + this.emit("highlighter-event", { type: "shape-change", value: polygonDef }); + } + /** + * Handle a click when highlighting a circle. + * @param {Number} pageX the x coordinate of the click + * @param {Number} pageY the y coordinate of the click + */ + _handleCircleClick(pageX, pageY) { + const { width, height } = this.currentDimensions; + const { percentX, percentY } = this.convertPageCoordsToPercent( + pageX, + pageY + ); + const point = this.getCirclePointAt(percentX, percentY); + if (!point) { + return; + } + + this.setCursor("grabbing"); + if (point === "center") { + const { cx, cy } = this.coordUnits; + const cxComputed = (this.coordinates.cx / 100) * width; + const cyComputed = (this.coordinates.cy / 100) * height; + const unitX = getUnit(cx); + const unitY = getUnit(cy); + const valueX = isUnitless(cx) ? cxComputed : parseFloat(cx); + const valueY = isUnitless(cy) ? cyComputed : parseFloat(cy); + + const ratioX = this.getUnitToPixelRatio(unitX, width); + const ratioY = this.getUnitToPixelRatio(unitY, height); + + this[_dragging] = { + point, + unitX, + unitY, + valueX, + valueY, + ratioX, + ratioY, + x: pageX, + y: pageY, + }; + } else if (point === "radius") { + let { radius } = this.coordinates; + const computedSize = Math.sqrt(width ** 2 + height ** 2) / Math.sqrt(2); + radius = (radius / 100) * computedSize; + let value = this.coordUnits.radius; + const unit = getUnit(value); + value = isUnitless(value) ? radius : parseFloat(value); + const ratio = this.getUnitToPixelRatio(unit, computedSize); + + this[_dragging] = { point, value, origRadius: radius, unit, ratio }; + } + } + + /** + * Set the center/radius of the circle according to the mouse position and + * update the element style. + * @param {String} point either "center" or "radius" + * @param {Number} pageX the x coordinate of the mouse position, in terms of % + * relative to the element + * @param {Number} pageY the y coordinate of the mouse position, in terms of % + * relative to the element + */ + _handleCircleMove(point, pageX, pageY) { + const { radius, cx, cy } = this.coordUnits; + + if (point === "center") { + const { unitX, unitY, valueX, valueY, ratioX, ratioY, x, y } = + this[_dragging]; + const deltaX = (pageX - x) * ratioX; + const deltaY = (pageY - y) * ratioY; + const newCx = `${round(valueX + deltaX, unitX)}${unitX}`; + const newCy = `${round(valueY + deltaY, unitY)}${unitY}`; + // if not defined by the user, geometryBox will be an empty string; trim() cleans up + const circleDef = + `circle(${radius} at ${newCx} ${newCy}) ${this.geometryBox}`.trim(); + + this.emit("highlighter-event", { + type: "shape-change", + value: circleDef, + }); + } else if (point === "radius") { + const { value, unit, origRadius, ratio } = this[_dragging]; + // convert center point to px, then get distance between center and mouse. + const { x: pageCx, y: pageCy } = this.convertPercentToPageCoords( + this.coordinates.cx, + this.coordinates.cy + ); + const newRadiusPx = getDistance(pageCx, pageCy, pageX, pageY); + + const delta = (newRadiusPx - origRadius) * ratio; + const newRadius = `${round(value + delta, unit)}${unit}`; + + const position = cx !== "" ? ` at ${cx} ${cy}` : ""; + const circleDef = + `circle(${newRadius}${position}) ${this.geometryBox}`.trim(); + + this.emit("highlighter-event", { + type: "shape-change", + value: circleDef, + }); + } + } + + /** + * Handle a click when highlighting an ellipse. + * @param {Number} pageX the x coordinate of the click + * @param {Number} pageY the y coordinate of the click + */ + _handleEllipseClick(pageX, pageY) { + const { width, height } = this.currentDimensions; + const { percentX, percentY } = this.convertPageCoordsToPercent( + pageX, + pageY + ); + const point = this.getEllipsePointAt(percentX, percentY); + if (!point) { + return; + } + + this.setCursor("grabbing"); + if (point === "center") { + const { cx, cy } = this.coordUnits; + const cxComputed = (this.coordinates.cx / 100) * width; + const cyComputed = (this.coordinates.cy / 100) * height; + const unitX = getUnit(cx); + const unitY = getUnit(cy); + const valueX = isUnitless(cx) ? cxComputed : parseFloat(cx); + const valueY = isUnitless(cy) ? cyComputed : parseFloat(cy); + + const ratioX = this.getUnitToPixelRatio(unitX, width); + const ratioY = this.getUnitToPixelRatio(unitY, height); + + this[_dragging] = { + point, + unitX, + unitY, + valueX, + valueY, + ratioX, + ratioY, + x: pageX, + y: pageY, + }; + } else if (point === "rx") { + let { rx } = this.coordinates; + rx = (rx / 100) * width; + let value = this.coordUnits.rx; + const unit = getUnit(value); + value = isUnitless(value) ? rx : parseFloat(value); + const ratio = this.getUnitToPixelRatio(unit, width); + + this[_dragging] = { point, value, origRadius: rx, unit, ratio }; + } else if (point === "ry") { + let { ry } = this.coordinates; + ry = (ry / 100) * height; + let value = this.coordUnits.ry; + const unit = getUnit(value); + value = isUnitless(value) ? ry : parseFloat(value); + const ratio = this.getUnitToPixelRatio(unit, height); + + this[_dragging] = { point, value, origRadius: ry, unit, ratio }; + } + } + + /** + * Set center/rx/ry of the ellispe according to the mouse position and update the + * element style. + * @param {String} point "center", "rx", or "ry" + * @param {Number} pageX the x coordinate of the mouse position, in terms of % + * relative to the element + * @param {Number} pageY the y coordinate of the mouse position, in terms of % + * relative to the element + */ + _handleEllipseMove(point, pageX, pageY) { + const { percentX, percentY } = this.convertPageCoordsToPercent( + pageX, + pageY + ); + const { rx, ry, cx, cy } = this.coordUnits; + const position = cx !== "" ? ` at ${cx} ${cy}` : ""; + + if (point === "center") { + const { unitX, unitY, valueX, valueY, ratioX, ratioY, x, y } = + this[_dragging]; + const deltaX = (pageX - x) * ratioX; + const deltaY = (pageY - y) * ratioY; + const newCx = `${round(valueX + deltaX, unitX)}${unitX}`; + const newCy = `${round(valueY + deltaY, unitY)}${unitY}`; + const ellipseDef = + `ellipse(${rx} ${ry} at ${newCx} ${newCy}) ${this.geometryBox}`.trim(); + + this.emit("highlighter-event", { + type: "shape-change", + value: ellipseDef, + }); + } else if (point === "rx") { + const { value, unit, origRadius, ratio } = this[_dragging]; + const newRadiusPercent = Math.abs(percentX - this.coordinates.cx); + const { width } = this.currentDimensions; + const delta = ((newRadiusPercent / 100) * width - origRadius) * ratio; + const newRadius = `${round(value + delta, unit)}${unit}`; + + const ellipseDef = + `ellipse(${newRadius} ${ry}${position}) ${this.geometryBox}`.trim(); + + this.emit("highlighter-event", { + type: "shape-change", + value: ellipseDef, + }); + } else if (point === "ry") { + const { value, unit, origRadius, ratio } = this[_dragging]; + const newRadiusPercent = Math.abs(percentY - this.coordinates.cy); + const { height } = this.currentDimensions; + const delta = ((newRadiusPercent / 100) * height - origRadius) * ratio; + const newRadius = `${round(value + delta, unit)}${unit}`; + + const ellipseDef = + `ellipse(${rx} ${newRadius}${position}) ${this.geometryBox}`.trim(); + + this.emit("highlighter-event", { + type: "shape-change", + value: ellipseDef, + }); + } + } + + /** + * Handle a click when highlighting an inset. + * @param {Number} pageX the x coordinate of the click + * @param {Number} pageY the y coordinate of the click + */ + _handleInsetClick(pageX, pageY) { + const { width, height } = this.currentDimensions; + const { percentX, percentY } = this.convertPageCoordsToPercent( + pageX, + pageY + ); + const point = this.getInsetPointAt(percentX, percentY); + if (!point) { + return; + } + + this.setCursor("grabbing"); + let value = this.coordUnits[point]; + const size = point === "left" || point === "right" ? width : height; + const computedValue = (this.coordinates[point] / 100) * size; + const unit = getUnit(value); + value = isUnitless(value) ? computedValue : parseFloat(value); + const ratio = this.getUnitToPixelRatio(unit, size); + const origValue = point === "left" || point === "right" ? pageX : pageY; + + this[_dragging] = { point, value, origValue, unit, ratio }; + } + + /** + * Set the top/left/right/bottom of the inset shape according to the mouse position + * and update the element style. + * @param {String} point "top", "left", "right", or "bottom" + * @param {Number} pageX the x coordinate of the mouse position, in terms of % + * relative to the element + * @param {Number} pageY the y coordinate of the mouse position, in terms of % + * relative to the element + * @memberof ShapesHighlighter + */ + _handleInsetMove(point, pageX, pageY) { + let { top, left, right, bottom } = this.coordUnits; + const { value, origValue, unit, ratio } = this[_dragging]; + + if (point === "left") { + const delta = (pageX - origValue) * ratio; + left = `${round(value + delta, unit)}${unit}`; + } else if (point === "right") { + const delta = (pageX - origValue) * ratio; + right = `${round(value - delta, unit)}${unit}`; + } else if (point === "top") { + const delta = (pageY - origValue) * ratio; + top = `${round(value + delta, unit)}${unit}`; + } else if (point === "bottom") { + const delta = (pageY - origValue) * ratio; + bottom = `${round(value - delta, unit)}${unit}`; + } + + let insetDef = this.insetRound + ? `inset(${top} ${right} ${bottom} ${left} round ${this.insetRound})` + : `inset(${top} ${right} ${bottom} ${left})`; + + insetDef += this.geometryBox ? this.geometryBox : ""; + + this.emit("highlighter-event", { type: "shape-change", value: insetDef }); + } + + _handleMouseMoveNotDragging(pageX, pageY) { + const { percentX, percentY } = this.convertPageCoordsToPercent( + pageX, + pageY + ); + if (this.transformMode) { + const point = this.getTransformPointAt(percentX, percentY); + this.hoveredPoint = point; + this._handleMarkerHover(point); + } else if (this.shapeType === "polygon") { + const point = this.getPolygonPointAt(percentX, percentY); + const oldHoveredPoint = this.hoveredPoint; + this.hoveredPoint = point !== -1 ? point : null; + if (this.hoveredPoint !== oldHoveredPoint) { + this._emitHoverEvent(this.hoveredPoint); + } + this._handleMarkerHover(point); + } else if (this.shapeType === "circle") { + const point = this.getCirclePointAt(percentX, percentY); + const oldHoveredPoint = this.hoveredPoint; + this.hoveredPoint = point ? point : null; + if (this.hoveredPoint !== oldHoveredPoint) { + this._emitHoverEvent(this.hoveredPoint); + } + this._handleMarkerHover(point); + } else if (this.shapeType === "ellipse") { + const point = this.getEllipsePointAt(percentX, percentY); + const oldHoveredPoint = this.hoveredPoint; + this.hoveredPoint = point ? point : null; + if (this.hoveredPoint !== oldHoveredPoint) { + this._emitHoverEvent(this.hoveredPoint); + } + this._handleMarkerHover(point); + } else if (this.shapeType === "inset") { + const point = this.getInsetPointAt(percentX, percentY); + const oldHoveredPoint = this.hoveredPoint; + this.hoveredPoint = point ? point : null; + if (this.hoveredPoint !== oldHoveredPoint) { + this._emitHoverEvent(this.hoveredPoint); + } + this._handleMarkerHover(point); + } + } + + /** + * Change the appearance of the given marker when the mouse hovers over it. + * @param {String|Number} point if the shape is a polygon, the integer index of the + * point being hovered. Otherwise, a string identifying the point being hovered. + * Integers < 0 and falsey values excluding 0 indicate no point is being hovered. + */ + _handleMarkerHover(point) { + // Hide hover marker for now, will be shown if point is a valid hover target + this.getElement("marker-hover").setAttribute("hidden", true); + // Catch all falsey values except when point === 0, as that's a valid point + if (!point && point !== 0) { + this.setCursor("auto"); + return; + } + const hoverCursor = this[_dragging] ? "grabbing" : "grab"; + + if (this.transformMode) { + if (!point) { + this.setCursor("auto"); + return; + } + const { nw, ne, sw, se, n, w, s, e, rotatePoint, center } = + this.transformedBoundingBox; + + const points = [ + { + pointName: "translate", + x: center[0], + y: center[1], + cursor: hoverCursor, + }, + { pointName: "scale-se", x: se[0], y: se[1], anchor: "nw" }, + { pointName: "scale-ne", x: ne[0], y: ne[1], anchor: "sw" }, + { pointName: "scale-sw", x: sw[0], y: sw[1], anchor: "ne" }, + { pointName: "scale-nw", x: nw[0], y: nw[1], anchor: "se" }, + { pointName: "scale-n", x: n[0], y: n[1], anchor: "s" }, + { pointName: "scale-s", x: s[0], y: s[1], anchor: "n" }, + { pointName: "scale-e", x: e[0], y: e[1], anchor: "w" }, + { pointName: "scale-w", x: w[0], y: w[1], anchor: "e" }, + { + pointName: "rotate", + x: rotatePoint[0], + y: rotatePoint[1], + cursor: hoverCursor, + }, + ]; + + for (const { pointName, x, y, cursor, anchor } of points) { + if (point === pointName) { + this._drawHoverMarker([[x, y]]); + + // If the point is a scale handle, we will need to determine the direction + // of the resize cursor based on the position of the handle relative to its + // "anchor" (the handle opposite to it). + if (pointName.includes("scale")) { + const direction = this.getRoughDirection(pointName, anchor); + this.setCursor(`${direction}-resize`); + } else { + this.setCursor(cursor); + } + } + } + } else if (this.shapeType === "polygon") { + if (point === -1) { + this.setCursor("auto"); + return; + } + this.setCursor(hoverCursor); + this._drawHoverMarker([this.coordinates[point]]); + } else if (this.shapeType === "circle") { + this.setCursor(hoverCursor); + + const { cx, cy, rx } = this.coordinates; + if (point === "radius") { + this._drawHoverMarker([[cx + rx, cy]]); + } else if (point === "center") { + this._drawHoverMarker([[cx, cy]]); + } + } else if (this.shapeType === "ellipse") { + this.setCursor(hoverCursor); + + if (point === "center") { + const { cx, cy } = this.coordinates; + this._drawHoverMarker([[cx, cy]]); + } else if (point === "rx") { + const { cx, cy, rx } = this.coordinates; + this._drawHoverMarker([[cx + rx, cy]]); + } else if (point === "ry") { + const { cx, cy, ry } = this.coordinates; + this._drawHoverMarker([[cx, cy + ry]]); + } + } else if (this.shapeType === "inset") { + this.setCursor(hoverCursor); + + const { top, right, bottom, left } = this.coordinates; + const centerX = (left + (100 - right)) / 2; + const centerY = (top + (100 - bottom)) / 2; + const points = point.split(","); + const coords = points.map(side => { + if (side === "top") { + return [centerX, top]; + } else if (side === "right") { + return [100 - right, centerY]; + } else if (side === "bottom") { + return [centerX, 100 - bottom]; + } else if (side === "left") { + return [left, centerY]; + } + return null; + }); + + this._drawHoverMarker(coords); + } + } + + _drawHoverMarker(points) { + const { width, height } = this.currentDimensions; + const zoom = getCurrentZoom(this.win); + const path = points + .map(([x, y]) => { + return getCirclePath(BASE_MARKER_SIZE, x, y, width, height, zoom); + }) + .join(" "); + + const markerHover = this.getElement("marker-hover"); + markerHover.setAttribute("d", path); + markerHover.removeAttribute("hidden"); + } + + _emitHoverEvent(point) { + if (point === null || point === undefined) { + this.emit("highlighter-event", { + type: "shape-hover-off", + }); + } else { + this.emit("highlighter-event", { + type: "shape-hover-on", + point: point.toString(), + }); + } + } + + /** + * Convert the given coordinates on the page to percentages relative to the current + * element. + * @param {Number} pageX the x coordinate on the page + * @param {Number} pageY the y coordinate on the page + * @returns {Object} object of form {percentX, percentY}, which are the x/y coords + * in percentages relative to the element. + */ + convertPageCoordsToPercent(pageX, pageY) { + // If the current node is in an iframe, we get dimensions relative to the frame. + const dims = this.frameDimensions; + const { top, left, width, height } = dims; + pageX -= left; + pageY -= top; + const percentX = (pageX * 100) / width; + const percentY = (pageY * 100) / height; + return { percentX, percentY }; + } + + /** + * Convert the given x/y coordinates, in percentages relative to the current element, + * to pixel coordinates relative to the page + * @param {Number} x the x coordinate + * @param {Number} y the y coordinate + * @returns {Object} object of form {x, y}, which are the x/y coords in pixels + * relative to the page + * + * @memberof ShapesHighlighter + */ + convertPercentToPageCoords(x, y) { + const dims = this.frameDimensions; + const { top, left, width, height } = dims; + x = (x * width) / 100; + y = (y * height) / 100; + x += left; + y += top; + return { x, y }; + } + + /** + * Get which transformation should be applied based on the mouse position. + * @param {Number} pageX the x coordinate of the mouse. + * @param {Number} pageY the y coordinate of the mouse. + * @returns {String} a string describing the transformation that should be applied + * to the shape. + */ + getTransformPointAt(pageX, pageY) { + const { nw, ne, sw, se, n, w, s, e, rotatePoint, center } = + this.transformedBoundingBox; + const { width, height } = this.currentDimensions; + const zoom = getCurrentZoom(this.win); + const clickRadiusX = ((BASE_MARKER_SIZE / zoom) * 100) / width; + const clickRadiusY = ((BASE_MARKER_SIZE / zoom) * 100) / height; + + const points = [ + { pointName: "translate", x: center[0], y: center[1] }, + { pointName: "scale-se", x: se[0], y: se[1] }, + { pointName: "scale-ne", x: ne[0], y: ne[1] }, + { pointName: "scale-sw", x: sw[0], y: sw[1] }, + { pointName: "scale-nw", x: nw[0], y: nw[1] }, + ]; + + if (this.shapeType === "polygon" || this.shapeType === "ellipse") { + points.push( + { pointName: "scale-n", x: n[0], y: n[1] }, + { pointName: "scale-s", x: s[0], y: s[1] }, + { pointName: "scale-e", x: e[0], y: e[1] }, + { pointName: "scale-w", x: w[0], y: w[1] } + ); + } + + if (this.shapeType === "polygon") { + const x = rotatePoint[0]; + const y = rotatePoint[1]; + if ( + pageX >= x - clickRadiusX && + pageX <= x + clickRadiusX && + pageY >= y - clickRadiusY && + pageY <= y + clickRadiusY + ) { + return "rotate"; + } + } + + for (const { pointName, x, y } of points) { + if ( + pageX >= x - clickRadiusX && + pageX <= x + clickRadiusX && + pageY >= y - clickRadiusY && + pageY <= y + clickRadiusY + ) { + return pointName; + } + } + + return ""; + } + + /** + * Get the id of the point on the polygon highlighter at the given coordinate. + * @param {Number} pageX the x coordinate on the page, in % relative to the element + * @param {Number} pageY the y coordinate on the page, in % relative to the element + * @returns {Number} the index of the point that was clicked on in this.coordinates, + * or -1 if none of the points were clicked on. + */ + getPolygonPointAt(pageX, pageY) { + const { coordinates } = this; + const { width, height } = this.currentDimensions; + const zoom = getCurrentZoom(this.win); + const clickRadiusX = ((BASE_MARKER_SIZE / zoom) * 100) / width; + const clickRadiusY = ((BASE_MARKER_SIZE / zoom) * 100) / height; + + for (const [index, coord] of coordinates.entries()) { + const [x, y] = coord; + if ( + pageX >= x - clickRadiusX && + pageX <= x + clickRadiusX && + pageY >= y - clickRadiusY && + pageY <= y + clickRadiusY + ) { + return index; + } + } + + return -1; + } + + /** + * Check if the mouse clicked on a line of the polygon, and if so, add a point near + * the click. + * @param {Number} pageX the x coordinate on the page, in % relative to the element + * @param {Number} pageY the y coordinate on the page, in % relative to the element + */ + getPolygonClickedLine(pageX, pageY) { + const { coordinates } = this; + const { width } = this.currentDimensions; + const clickWidth = (LINE_CLICK_WIDTH * 100) / width; + + for (let i = 0; i < coordinates.length; i++) { + const [x1, y1] = coordinates[i]; + const [x2, y2] = + i === coordinates.length - 1 ? coordinates[0] : coordinates[i + 1]; + // Get the distance between clicked point and line drawn between points 1 and 2 + // to check if the click was on the line between those two points. + const distance = distanceToLine(x1, y1, x2, y2, pageX, pageY); + if ( + distance <= clickWidth && + Math.min(x1, x2) - clickWidth <= pageX && + pageX <= Math.max(x1, x2) + clickWidth && + Math.min(y1, y2) - clickWidth <= pageY && + pageY <= Math.max(y1, y2) + clickWidth + ) { + // Get the point on the line closest to the clicked point. + const [newX, newY] = projection(x1, y1, x2, y2, pageX, pageY); + // Default unit for new points is percentages + this._addPolygonPoint(i, round(newX, "%"), round(newY, "%")); + return; + } + } + } + + /** + * Check if the center point or radius of the circle highlighter is at given coords + * @param {Number} pageX the x coordinate on the page, in % relative to the element + * @param {Number} pageY the y coordinate on the page, in % relative to the element + * @returns {String} "center" if the center point was clicked, "radius" if the radius + * was clicked, "" if neither was clicked. + */ + getCirclePointAt(pageX, pageY) { + const { cx, cy, rx, ry } = this.coordinates; + const { width, height } = this.currentDimensions; + const zoom = getCurrentZoom(this.win); + const clickRadiusX = ((BASE_MARKER_SIZE / zoom) * 100) / width; + const clickRadiusY = ((BASE_MARKER_SIZE / zoom) * 100) / height; + + if (clickedOnPoint(pageX, pageY, cx, cy, clickRadiusX, clickRadiusY)) { + return "center"; + } + + const clickWidthX = (LINE_CLICK_WIDTH * 100) / width; + const clickWidthY = (LINE_CLICK_WIDTH * 100) / height; + if ( + clickedOnEllipseEdge( + pageX, + pageY, + cx, + cy, + rx, + ry, + clickWidthX, + clickWidthY + ) || + clickedOnPoint(pageX, pageY, cx + rx, cy, clickRadiusX, clickRadiusY) + ) { + return "radius"; + } + + return ""; + } + + /** + * Check if the center or rx/ry points of the ellipse highlighter is at given point + * @param {Number} pageX the x coordinate on the page, in % relative to the element + * @param {Number} pageY the y coordinate on the page, in % relative to the element + * @returns {String} "center" if the center point was clicked, "rx" if the x-radius + * point was clicked, "ry" if the y-radius point was clicked, + * "" if none was clicked. + */ + getEllipsePointAt(pageX, pageY) { + const { cx, cy, rx, ry } = this.coordinates; + const { width, height } = this.currentDimensions; + const zoom = getCurrentZoom(this.win); + const clickRadiusX = ((BASE_MARKER_SIZE / zoom) * 100) / width; + const clickRadiusY = ((BASE_MARKER_SIZE / zoom) * 100) / height; + + if (clickedOnPoint(pageX, pageY, cx, cy, clickRadiusX, clickRadiusY)) { + return "center"; + } + + if (clickedOnPoint(pageX, pageY, cx + rx, cy, clickRadiusX, clickRadiusY)) { + return "rx"; + } + + if (clickedOnPoint(pageX, pageY, cx, cy + ry, clickRadiusX, clickRadiusY)) { + return "ry"; + } + + return ""; + } + + /** + * Check if the edges of the inset highlighter is at given coords + * @param {Number} pageX the x coordinate on the page, in % relative to the element + * @param {Number} pageY the y coordinate on the page, in % relative to the element + * @returns {String} "top", "left", "right", or "bottom" if any of those edges were + * clicked. "" if none were clicked. + */ + // eslint-disable-next-line complexity + getInsetPointAt(pageX, pageY) { + const { top, left, right, bottom } = this.coordinates; + const zoom = getCurrentZoom(this.win); + const { width, height } = this.currentDimensions; + const clickWidthX = (LINE_CLICK_WIDTH * 100) / width; + const clickWidthY = (LINE_CLICK_WIDTH * 100) / height; + const clickRadiusX = ((BASE_MARKER_SIZE / zoom) * 100) / width; + const clickRadiusY = ((BASE_MARKER_SIZE / zoom) * 100) / height; + const centerX = (left + (100 - right)) / 2; + const centerY = (top + (100 - bottom)) / 2; + + if ( + (pageX >= left - clickWidthX && + pageX <= left + clickWidthX && + pageY >= top && + pageY <= 100 - bottom) || + clickedOnPoint(pageX, pageY, left, centerY, clickRadiusX, clickRadiusY) + ) { + return "left"; + } + + if ( + (pageX >= 100 - right - clickWidthX && + pageX <= 100 - right + clickWidthX && + pageY >= top && + pageY <= 100 - bottom) || + clickedOnPoint( + pageX, + pageY, + 100 - right, + centerY, + clickRadiusX, + clickRadiusY + ) + ) { + return "right"; + } + + if ( + (pageY >= top - clickWidthY && + pageY <= top + clickWidthY && + pageX >= left && + pageX <= 100 - right) || + clickedOnPoint(pageX, pageY, centerX, top, clickRadiusX, clickRadiusY) + ) { + return "top"; + } + + if ( + (pageY >= 100 - bottom - clickWidthY && + pageY <= 100 - bottom + clickWidthY && + pageX >= left && + pageX <= 100 - right) || + clickedOnPoint( + pageX, + pageY, + centerX, + 100 - bottom, + clickRadiusX, + clickRadiusY + ) + ) { + return "bottom"; + } + + return ""; + } + + /** + * Parses the CSS definition given and returns the shape type associated + * with the definition and the coordinates necessary to draw the shape. + * @param {String} definition the input CSS definition + * @returns {Object} null if the definition is not of a known shape type, + * or an object of the type { shapeType, coordinates }, where + * shapeType is the name of the shape and coordinates are an array + * or object of the coordinates needed to draw the shape. + */ + _parseCSSShapeValue(definition) { + const shapeTypes = [ + { + name: "polygon", + prefix: "polygon(", + coordParser: this.polygonPoints.bind(this), + }, + { + name: "circle", + prefix: "circle(", + coordParser: this.circlePoints.bind(this), + }, + { + name: "ellipse", + prefix: "ellipse(", + coordParser: this.ellipsePoints.bind(this), + }, + { + name: "inset", + prefix: "inset(", + coordParser: this.insetPoints.bind(this), + }, + ]; + const geometryTypes = ["margin", "border", "padding", "content"]; + // default to border for clip-path and offset-path, and margin for shape-outside + const defaultGeometryTypesByProperty = new Map([ + ["clip-path", "border"], + ["offset-path", "border"], + ["shape-outside", "margin"], + ]); + + let referenceBox = defaultGeometryTypesByProperty.get(this.property); + for (const geometry of geometryTypes) { + if (definition.includes(geometry)) { + referenceBox = geometry; + } + } + this.referenceBox = referenceBox; + + this.useStrokeBox = definition.includes("stroke-box"); + this.geometryBox = definition + .substring(definition.lastIndexOf(")") + 1) + .trim(); + + for (const { name, prefix, coordParser } of shapeTypes) { + if (definition.includes(prefix)) { + // the closing paren of the shape function is always the last one in definition. + definition = definition.substring( + prefix.length, + definition.lastIndexOf(")") + ); + return { + shapeType: name, + coordinates: coordParser(definition), + }; + } + } + + return null; + } + + /** + * Parses the definition of the CSS polygon() function and returns its points, + * converted to percentages. + * @param {String} definition the arguments of the polygon() function + * @returns {Array} an array of the points of the polygon, with all values + * evaluated and converted to percentages + */ + polygonPoints(definition) { + this.coordUnits = this.polygonRawPoints(); + if (!this.origCoordUnits) { + this.origCoordUnits = this.coordUnits; + } + const splitDef = definition.split(", "); + if (splitDef[0] === "evenodd" || splitDef[0] === "nonzero") { + splitDef.shift(); + } + let minX = Number.MAX_SAFE_INTEGER; + let minY = Number.MAX_SAFE_INTEGER; + let maxX = Number.MIN_SAFE_INTEGER; + let maxY = Number.MIN_SAFE_INTEGER; + const coordinates = splitDef.map(coords => { + const [x, y] = splitCoords(coords).map( + this.convertCoordsToPercent.bind(this) + ); + if (x < minX) { + minX = x; + } + if (y < minY) { + minY = y; + } + if (x > maxX) { + maxX = x; + } + if (y > maxY) { + maxY = y; + } + return [x, y]; + }); + this.boundingBox = { minX, minY, maxX, maxY }; + if (!this.origBoundingBox) { + this.origBoundingBox = this.boundingBox; + } + return coordinates; + } + + /** + * Parse the raw (non-computed) definition of the CSS polygon. + * @returns {Array} an array of the points of the polygon, with units preserved. + */ + polygonRawPoints() { + let definition = getDefinedShapeProperties(this.currentNode, this.property); + if (definition === this.rawDefinition && this.coordUnits) { + return this.coordUnits; + } + this.rawDefinition = definition; + definition = definition.substring(8, definition.lastIndexOf(")")); + const splitDef = definition.split(", "); + if (splitDef[0].includes("evenodd") || splitDef[0].includes("nonzero")) { + this.fillRule = splitDef[0].trim(); + splitDef.shift(); + } else { + this.fillRule = ""; + } + return splitDef.map(coords => { + return splitCoords(coords).map(coord => { + // Undo the insertion of that was done in splitCoords. + return coord.replace(/\u00a0/g, " "); + }); + }); + } + + /** + * Parses the definition of the CSS circle() function and returns the x/y radiuses and + * center coordinates, converted to percentages. + * @param {String} definition the arguments of the circle() function + * @returns {Object} an object of the form { rx, ry, cx, cy }, where rx and ry are the + * radiuses for the x and y axes, and cx and cy are the x/y coordinates for the + * center of the circle. All values are evaluated and converted to percentages. + */ + circlePoints(definition) { + this.coordUnits = this.circleRawPoints(); + if (!this.origCoordUnits) { + this.origCoordUnits = this.coordUnits; + } + + const values = definition.split("at"); + let radius = values[0] ? values[0].trim() : "closest-side"; + const { width, height } = this.currentDimensions; + // This defaults to center if omitted. + const position = values[1] || "50% 50%"; + const center = splitCoords(position).map( + this.convertCoordsToPercent.bind(this) + ); + + // Percentage values for circle() are resolved from the + // used width and height of the reference box as sqrt(width^2+height^2)/sqrt(2). + const computedSize = Math.sqrt(width ** 2 + height ** 2) / Math.sqrt(2); + + // Position coordinates for circle center in pixels. + const cxPx = (width * center[0]) / 100; + const cyPx = (height * center[1]) / 100; + + if (radius === "closest-side") { + // radius is the distance from center to closest side of reference box + radius = Math.min(cxPx, cyPx, width - cxPx, height - cyPx); + radius = coordToPercent(`${radius}px`, computedSize); + } else if (radius === "farthest-side") { + // radius is the distance from center to farthest side of reference box + radius = Math.max(cxPx, cyPx, width - cxPx, height - cyPx); + radius = coordToPercent(`${radius}px`, computedSize); + } else if (radius.includes("calc(")) { + radius = evalCalcExpression( + radius.substring(5, radius.length - 1), + computedSize + ); + } else { + radius = coordToPercent(radius, computedSize); + } + + // Scale both radiusX and radiusY to match the radius computed + // using the above equation. + const ratioX = width / computedSize; + const ratioY = height / computedSize; + const radiusX = radius / ratioX; + const radiusY = radius / ratioY; + + this.boundingBox = { + minX: center[0] - radiusX, + maxX: center[0] + radiusX, + minY: center[1] - radiusY, + maxY: center[1] + radiusY, + }; + if (!this.origBoundingBox) { + this.origBoundingBox = this.boundingBox; + } + return { radius, rx: radiusX, ry: radiusY, cx: center[0], cy: center[1] }; + } + + /** + * Parse the raw (non-computed) definition of the CSS circle. + * @returns {Object} an object of the points of the circle (cx, cy, radius), + * with units preserved. + */ + circleRawPoints() { + let definition = getDefinedShapeProperties(this.currentNode, this.property); + if (definition === this.rawDefinition && this.coordUnits) { + return this.coordUnits; + } + this.rawDefinition = definition; + definition = definition.substring(7, definition.lastIndexOf(")")); + + const values = definition.split("at"); + const [cx = "", cy = ""] = values[1] + ? splitCoords(values[1]).map(coord => { + // Undo the insertion of that was done in splitCoords. + return coord.replace(/\u00a0/g, " "); + }) + : []; + const radius = values[0] ? values[0].trim() : "closest-side"; + return { cx, cy, radius }; + } + + /** + * Parses the computed style definition of the CSS ellipse() function and returns the + * x/y radii and center coordinates, converted to percentages. + * @param {String} definition the arguments of the ellipse() function + * @returns {Object} an object of the form { rx, ry, cx, cy }, where rx and ry are the + * radiuses for the x and y axes, and cx and cy are the x/y coordinates for the + * center of the ellipse. All values are evaluated and converted to percentages + */ + ellipsePoints(definition) { + this.coordUnits = this.ellipseRawPoints(); + if (!this.origCoordUnits) { + this.origCoordUnits = this.coordUnits; + } + + const values = definition.split("at"); + // This defaults to center if omitted. + const position = values[1] || "50% 50%"; + const center = splitCoords(position).map( + this.convertCoordsToPercent.bind(this) + ); + + let radii = values[0] ? values[0].trim() : "closest-side closest-side"; + radii = splitCoords(radii).map((radius, i) => { + if (radius === "closest-side") { + // radius is the distance from center to closest x/y side of reference box + return i % 2 === 0 + ? Math.min(center[0], 100 - center[0]) + : Math.min(center[1], 100 - center[1]); + } else if (radius === "farthest-side") { + // radius is the distance from center to farthest x/y side of reference box + return i % 2 === 0 + ? Math.max(center[0], 100 - center[0]) + : Math.max(center[1], 100 - center[1]); + } + return this.convertCoordsToPercent(radius, i); + }); + + this.boundingBox = { + minX: center[0] - radii[0], + maxX: center[0] + radii[0], + minY: center[1] - radii[1], + maxY: center[1] + radii[1], + }; + if (!this.origBoundingBox) { + this.origBoundingBox = this.boundingBox; + } + return { rx: radii[0], ry: radii[1], cx: center[0], cy: center[1] }; + } + + /** + * Parse the raw (non-computed) definition of the CSS ellipse. + * @returns {Object} an object of the points of the ellipse (cx, cy, rx, ry), + * with units preserved. + */ + ellipseRawPoints() { + let definition = getDefinedShapeProperties(this.currentNode, this.property); + if (definition === this.rawDefinition && this.coordUnits) { + return this.coordUnits; + } + this.rawDefinition = definition; + definition = definition.substring(8, definition.lastIndexOf(")")); + + const values = definition.split("at"); + const [rx = "closest-side", ry = "closest-side"] = values[0] + ? splitCoords(values[0]).map(coord => { + // Undo the insertion of that was done in splitCoords. + return coord.replace(/\u00a0/g, " "); + }) + : []; + const [cx = "", cy = ""] = values[1] + ? splitCoords(values[1]).map(coord => { + return coord.replace(/\u00a0/g, " "); + }) + : []; + return { rx, ry, cx, cy }; + } + + /** + * Parses the definition of the CSS inset() function and returns the x/y offsets and + * width/height of the shape, converted to percentages. Border radiuses (given after + * "round" in the definition) are currently ignored. + * @param {String} definition the arguments of the inset() function + * @returns {Object} an object of the form { x, y, width, height }, which are the top/ + * left positions and width/height of the shape. + */ + insetPoints(definition) { + this.coordUnits = this.insetRawPoints(); + if (!this.origCoordUnits) { + this.origCoordUnits = this.coordUnits; + } + const values = definition.split(" round "); + const offsets = splitCoords(values[0]); + + let top, left, right, bottom; + // The offsets, like margin/padding/border, are in order: top, right, bottom, left. + if (offsets.length === 1) { + top = left = right = bottom = offsets[0]; + } else if (offsets.length === 2) { + top = bottom = offsets[0]; + left = right = offsets[1]; + } else if (offsets.length === 3) { + top = offsets[0]; + left = right = offsets[1]; + bottom = offsets[2]; + } else if (offsets.length === 4) { + top = offsets[0]; + right = offsets[1]; + bottom = offsets[2]; + left = offsets[3]; + } + + top = this.convertCoordsToPercentFromCurrentDimension(top, "height"); + bottom = this.convertCoordsToPercentFromCurrentDimension(bottom, "height"); + left = this.convertCoordsToPercentFromCurrentDimension(left, "width"); + right = this.convertCoordsToPercentFromCurrentDimension(right, "width"); + + // maxX/maxY are found by subtracting the right/bottom edges from 100 + // (the width/height of the element in %) + this.boundingBox = { + minX: left, + maxX: 100 - right, + minY: top, + maxY: 100 - bottom, + }; + if (!this.origBoundingBox) { + this.origBoundingBox = this.boundingBox; + } + return { top, left, right, bottom }; + } + + /** + * Parse the raw (non-computed) definition of the CSS inset. + * @returns {Object} an object of the points of the inset (top, right, bottom, left), + * with units preserved. + */ + insetRawPoints() { + let definition = getDefinedShapeProperties(this.currentNode, this.property); + if (definition === this.rawDefinition && this.coordUnits) { + return this.coordUnits; + } + this.rawDefinition = definition; + definition = definition.substring(6, definition.lastIndexOf(")")); + + const values = definition.split(" round "); + this.insetRound = values[1]; + const offsets = splitCoords(values[0]).map(coord => { + // Undo the insertion of that was done in splitCoords. + return coord.replace(/\u00a0/g, " "); + }); + + let top, + left, + right, + bottom = 0; + + if (offsets.length === 1) { + top = left = right = bottom = offsets[0]; + } else if (offsets.length === 2) { + top = bottom = offsets[0]; + left = right = offsets[1]; + } else if (offsets.length === 3) { + top = offsets[0]; + left = right = offsets[1]; + bottom = offsets[2]; + } else if (offsets.length === 4) { + top = offsets[0]; + right = offsets[1]; + bottom = offsets[2]; + left = offsets[3]; + } + + return { top, left, right, bottom }; + } + + /** + * This uses the index to decide whether to use width or height for the + * computation. See `convertCoordsToPercentFromCurrentDimension()` if you + * need to specify width or height. + * @param {Number} coord a single coordinate + * @param {Number} i the index of its position in the function + * @returns {Number} the coordinate as a percentage value + */ + convertCoordsToPercent(coord, i) { + const { width, height } = this.currentDimensions; + const size = i % 2 === 0 ? width : height; + if (coord.includes("calc(")) { + return evalCalcExpression(coord.substring(5, coord.length - 1), size); + } + return coordToPercent(coord, size); + } + + /** + * Converts a value to percent based on the specified dimension. + * @param {Number} coord a single coordinate + * @param {Number} currentDimensionProperty the dimension ("width" or + * "height") to base the calculation off of + * @returns {Number} the coordinate as a percentage value + */ + convertCoordsToPercentFromCurrentDimension(coord, currentDimensionProperty) { + const size = this.currentDimensions[currentDimensionProperty]; + if (coord.includes("calc(")) { + return evalCalcExpression(coord.substring(5, coord.length - 1), size); + } + return coordToPercent(coord, size); + } + + /** + * Destroy the nodes. Remove listeners. + */ + destroy() { + const { pageListenerTarget } = this.highlighterEnv; + if (pageListenerTarget) { + DOM_EVENTS.forEach(type => + pageListenerTarget.removeEventListener(type, this) + ); + } + super.destroy(this); + this.markup.destroy(); + } + + /** + * Get the element in the highlighter markup with the given id + * @param {String} id + * @returns {Object} the element with the given id + */ + getElement(id) { + return this.markup.getElement(this.ID_CLASS_PREFIX + id); + } + + /** + * Return whether all the elements used to draw shapes are hidden. + * @returns {Boolean} + */ + areShapesHidden() { + return ( + this.getElement("ellipse").hasAttribute("hidden") && + this.getElement("polygon").hasAttribute("hidden") && + this.getElement("rect").hasAttribute("hidden") && + this.getElement("bounding-box").hasAttribute("hidden") + ); + } + + /** + * Show the highlighter on a given node + */ + _show() { + this.hoveredPoint = this.options.hoverPoint; + this.transformMode = this.options.transformMode; + this.coordinates = null; + this.coordUnits = null; + this.origBoundingBox = null; + this.origCoordUnits = null; + this.origCoordinates = null; + this.transformedBoundingBox = null; + if (this.transformMode) { + this.transformMatrix = identity(); + } + if (this._hasMoved() && this.transformMode) { + this.transformedBoundingBox = this.calculateTransformedBoundingBox(); + } + return this._update(); + } + + /** + * The AutoRefreshHighlighter's _hasMoved method returns true only if the element's + * quads have changed. Override it so it also returns true if the element's shape has + * changed (which can happen when you change a CSS properties for instance). + */ + _hasMoved() { + let hasMoved = AutoRefreshHighlighter.prototype._hasMoved.call(this); + + if (hasMoved) { + this.origBoundingBox = null; + this.origCoordUnits = null; + this.origCoordinates = null; + if (this.transformMode) { + this.transformMatrix = identity(); + } + } + + const oldShapeCoordinates = JSON.stringify(this.coordinates); + + // TODO: need other modes too. + if (this.options.mode.startsWith("css")) { + const property = shapeModeToCssPropertyName(this.options.mode); + // change camelCase to kebab-case + this.property = property.replace(/([a-z][A-Z])/g, g => { + return g[0] + "-" + g[1].toLowerCase(); + }); + const style = getComputedStyle(this.currentNode)[property]; + + if (!style || style === "none") { + this.coordinates = []; + this.shapeType = "none"; + } else { + const { coordinates, shapeType } = this._parseCSSShapeValue(style); + this.coordinates = coordinates; + if (!this.origCoordinates) { + this.origCoordinates = coordinates; + } + this.shapeType = shapeType; + } + } + + const newShapeCoordinates = JSON.stringify(this.coordinates); + hasMoved = hasMoved || oldShapeCoordinates !== newShapeCoordinates; + if (this.transformMode && hasMoved) { + this.transformedBoundingBox = this.calculateTransformedBoundingBox(); + } + + return hasMoved; + } + + /** + * Hide all elements used to highlight CSS different shapes. + */ + _hideShapes() { + this.getElement("ellipse").setAttribute("hidden", true); + this.getElement("polygon").setAttribute("hidden", true); + this.getElement("rect").setAttribute("hidden", true); + this.getElement("bounding-box").setAttribute("hidden", true); + this.getElement("markers").setAttribute("d", ""); + this.getElement("markers-outline").setAttribute("d", ""); + this.getElement("rotate-line").setAttribute("d", ""); + this.getElement("quad").setAttribute("hidden", true); + this.getElement("clip-ellipse").setAttribute("hidden", true); + this.getElement("clip-polygon").setAttribute("hidden", true); + this.getElement("clip-rect").setAttribute("hidden", true); + this.getElement("dashed-polygon").setAttribute("hidden", true); + this.getElement("dashed-ellipse").setAttribute("hidden", true); + this.getElement("dashed-rect").setAttribute("hidden", true); + } + + /** + * Update the highlighter for the current node. Called whenever the element's quads + * or CSS shape has changed. + * @returns {Boolean} whether the highlighter was successfully updated + */ + _update() { + setIgnoreLayoutChanges(true); + this.getElement("group").setAttribute("transform", ""); + const root = this.getElement("root"); + root.setAttribute("hidden", true); + + const { top, left, width, height } = this.currentDimensions; + const zoom = getCurrentZoom(this.win); + + // Size the SVG like the current node. + this.getElement("shape-container").setAttribute( + "style", + `top:${top}px;left:${left}px;width:${width}px;height:${height}px;` + ); + + this._hideShapes(); + this._updateShapes(width, height, zoom); + + // For both shape-outside and clip-path the element's quads are displayed for the + // parts that overlap with the shape. The parts of the shape that extend past the + // element's quads are shown with a dashed line. + const quadRect = this.getElement("quad"); + quadRect.removeAttribute("hidden"); + + this.getElement("polygon").setAttribute( + "clip-path", + "url(#shapes-quad-clip-path)" + ); + this.getElement("ellipse").setAttribute( + "clip-path", + "url(#shapes-quad-clip-path)" + ); + this.getElement("rect").setAttribute( + "clip-path", + "url(#shapes-quad-clip-path)" + ); + + const { width: winWidth, height: winHeight } = this._winDimensions; + root.removeAttribute("hidden"); + root.setAttribute( + "style", + `position:absolute; width:${winWidth}px;height:${winHeight}px; overflow:hidden;` + ); + + this._handleMarkerHover(this.hoveredPoint); + + setIgnoreLayoutChanges( + false, + this.highlighterEnv.window.document.documentElement + ); + + return true; + } + + /** + * Update the SVGs to render the current CSS shape and add markers depending on shape + * type and transform mode. + * @param {Number} width the width of the element quads + * @param {Number} height the height of the element quads + * @param {Number} zoom the zoom level of the window + */ + _updateShapes(width, height, zoom) { + if (this.transformMode && this.shapeType !== "none") { + this._updateTransformMode(width, height, zoom); + } else if (this.shapeType === "polygon") { + this._updatePolygonShape(width, height, zoom); + // Draw markers for each of the polygon's points. + this._drawMarkers(this.coordinates, width, height, zoom); + } else if (this.shapeType === "circle") { + const { rx, cx, cy } = this.coordinates; + // Shape renders for "circle()" and "ellipse()" use the same SVG nodes. + this._updateEllipseShape(width, height, zoom); + // Draw markers for center and radius points. + this._drawMarkers( + [ + [cx, cy], + [cx + rx, cy], + ], + width, + height, + zoom + ); + } else if (this.shapeType === "ellipse") { + const { rx, ry, cx, cy } = this.coordinates; + this._updateEllipseShape(width, height, zoom); + // Draw markers for center, horizontal radius and vertical radius points. + this._drawMarkers( + [ + [cx, cy], + [cx + rx, cy], + [cx, cy + ry], + ], + width, + height, + zoom + ); + } else if (this.shapeType === "inset") { + const { top, left, right, bottom } = this.coordinates; + const centerX = (left + (100 - right)) / 2; + const centerY = (top + (100 - bottom)) / 2; + const markerCoords = [ + [centerX, top], + [100 - right, centerY], + [centerX, 100 - bottom], + [left, centerY], + ]; + this._updateInsetShape(width, height, zoom); + // Draw markers for each of the inset's sides. + this._drawMarkers(markerCoords, width, height, zoom); + } + } + + /** + * Update the SVGs for transform mode to fit the new shape. + * @param {Number} width the width of the element quads + * @param {Number} height the height of the element quads + * @param {Number} zoom the zoom level of the window + */ + _updateTransformMode(width, height, zoom) { + const { nw, ne, sw, se, n, w, s, e, rotatePoint, center } = + this.transformedBoundingBox; + const boundingBox = this.getElement("bounding-box"); + const path = `M${nw.join(" ")} L${ne.join(" ")} L${se.join(" ")} L${sw.join( + " " + )} Z`; + boundingBox.setAttribute("d", path); + boundingBox.removeAttribute("hidden"); + + const markerPoints = [center, nw, ne, se, sw]; + if (this.shapeType === "polygon" || this.shapeType === "ellipse") { + markerPoints.push(n, s, w, e); + } + + if (this.shapeType === "polygon") { + this._updatePolygonShape(width, height, zoom); + markerPoints.push(rotatePoint); + const rotateLine = `M ${center.join(" ")} L ${rotatePoint.join(" ")}`; + this.getElement("rotate-line").setAttribute("d", rotateLine); + } else if (this.shapeType === "circle" || this.shapeType === "ellipse") { + // Shape renders for "circle()" and "ellipse()" use the same SVG nodes. + this._updateEllipseShape(width, height, zoom); + } else if (this.shapeType === "inset") { + this._updateInsetShape(width, height, zoom); + } + + this._drawMarkers(markerPoints, width, height, zoom); + } + + /** + * Update the SVG polygon to fit the CSS polygon. + * @param {Number} width the width of the element quads + * @param {Number} height the height of the element quads + * @param {Number} zoom the zoom level of the window + */ + _updatePolygonShape(width, height, zoom) { + // Draw and show the polygon. + const points = this.coordinates.map(point => point.join(",")).join(" "); + + const polygonEl = this.getElement("polygon"); + polygonEl.setAttribute("points", points); + polygonEl.removeAttribute("hidden"); + + const clipPolygon = this.getElement("clip-polygon"); + clipPolygon.setAttribute("points", points); + clipPolygon.removeAttribute("hidden"); + + const dashedPolygon = this.getElement("dashed-polygon"); + dashedPolygon.setAttribute("points", points); + dashedPolygon.removeAttribute("hidden"); + } + + /** + * Update the SVG ellipse to fit the CSS circle or ellipse. + * @param {Number} width the width of the element quads + * @param {Number} height the height of the element quads + * @param {Number} zoom the zoom level of the window + */ + _updateEllipseShape(width, height, zoom) { + const { rx, ry, cx, cy } = this.coordinates; + const ellipseEl = this.getElement("ellipse"); + ellipseEl.setAttribute("rx", rx); + ellipseEl.setAttribute("ry", ry); + ellipseEl.setAttribute("cx", cx); + ellipseEl.setAttribute("cy", cy); + ellipseEl.removeAttribute("hidden"); + + const clipEllipse = this.getElement("clip-ellipse"); + clipEllipse.setAttribute("rx", rx); + clipEllipse.setAttribute("ry", ry); + clipEllipse.setAttribute("cx", cx); + clipEllipse.setAttribute("cy", cy); + clipEllipse.removeAttribute("hidden"); + + const dashedEllipse = this.getElement("dashed-ellipse"); + dashedEllipse.setAttribute("rx", rx); + dashedEllipse.setAttribute("ry", ry); + dashedEllipse.setAttribute("cx", cx); + dashedEllipse.setAttribute("cy", cy); + dashedEllipse.removeAttribute("hidden"); + } + + /** + * Update the SVG rect to fit the CSS inset. + * @param {Number} width the width of the element quads + * @param {Number} height the height of the element quads + * @param {Number} zoom the zoom level of the window + */ + _updateInsetShape(width, height, zoom) { + const { top, left, right, bottom } = this.coordinates; + const rectEl = this.getElement("rect"); + rectEl.setAttribute("x", left); + rectEl.setAttribute("y", top); + rectEl.setAttribute("width", 100 - left - right); + rectEl.setAttribute("height", 100 - top - bottom); + rectEl.removeAttribute("hidden"); + + const clipRect = this.getElement("clip-rect"); + clipRect.setAttribute("x", left); + clipRect.setAttribute("y", top); + clipRect.setAttribute("width", 100 - left - right); + clipRect.setAttribute("height", 100 - top - bottom); + clipRect.removeAttribute("hidden"); + + const dashedRect = this.getElement("dashed-rect"); + dashedRect.setAttribute("x", left); + dashedRect.setAttribute("y", top); + dashedRect.setAttribute("width", 100 - left - right); + dashedRect.setAttribute("height", 100 - top - bottom); + dashedRect.removeAttribute("hidden"); + } + + /** + * Draw markers for the given coordinates. + * @param {Array} coords an array of coordinate arrays, of form [[x, y] ...] + * @param {Number} width the width of the element markers are being drawn for + * @param {Number} height the height of the element markers are being drawn for + * @param {Number} zoom the zoom level of the window + */ + _drawMarkers(coords, width, height, zoom) { + const markers = coords + .map(([x, y]) => { + return getCirclePath(BASE_MARKER_SIZE, x, y, width, height, zoom); + }) + .join(" "); + const outline = coords + .map(([x, y]) => { + return getCirclePath(BASE_MARKER_SIZE + 2, x, y, width, height, zoom); + }) + .join(" "); + + this.getElement("markers").setAttribute("d", markers); + this.getElement("markers-outline").setAttribute("d", outline); + } + + /** + * Calculate the bounding box of the shape after it is transformed according to + * the transformation matrix. + * @returns {Object} of form { nw, ne, sw, se, n, s, w, e, rotatePoint, center }. + * Each element in the object is an array of form [x,y], denoting the x/y + * coordinates of the given point. + */ + calculateTransformedBoundingBox() { + const { minX, minY, maxX, maxY } = this.origBoundingBox; + const { width, height } = this.currentDimensions; + const toPixel = scale(width / 100, height / 100); + const toPercent = scale(100 / width, 100 / height); + const matrix = multiply(toPercent, multiply(this.transformMatrix, toPixel)); + const centerX = (minX + maxX) / 2; + const centerY = (minY + maxY) / 2; + const nw = apply(matrix, [minX, minY]); + const ne = apply(matrix, [maxX, minY]); + const sw = apply(matrix, [minX, maxY]); + const se = apply(matrix, [maxX, maxY]); + const n = apply(matrix, [centerX, minY]); + const s = apply(matrix, [centerX, maxY]); + const w = apply(matrix, [minX, centerY]); + const e = apply(matrix, [maxX, centerY]); + const center = apply(matrix, [centerX, centerY]); + + const u = [ + ((ne[0] - nw[0]) / 100) * width, + ((ne[1] - nw[1]) / 100) * height, + ]; + const v = [ + ((sw[0] - nw[0]) / 100) * width, + ((sw[1] - nw[1]) / 100) * height, + ]; + const { basis, invertedBasis } = getBasis(u, v); + let rotatePointMatrix = changeMatrixBase( + translate(0, -ROTATE_LINE_LENGTH), + invertedBasis, + basis + ); + rotatePointMatrix = multiply( + toPercent, + multiply(rotatePointMatrix, multiply(this.transformMatrix, toPixel)) + ); + const rotatePoint = apply(rotatePointMatrix, [centerX, centerY]); + return { nw, ne, sw, se, n, s, w, e, rotatePoint, center }; + } + + /** + * Hide the highlighter, the outline and the infobar. + */ + _hide() { + setIgnoreLayoutChanges(true); + + this._hideShapes(); + this.getElement("markers").setAttribute("d", ""); + this.getElement("root").setAttribute("style", ""); + + setIgnoreLayoutChanges( + false, + this.highlighterEnv.window.document.documentElement + ); + } + + onPageHide({ target }) { + // If a page hide event is triggered for current window's highlighter, hide the + // highlighter. + if (target.defaultView === this.win) { + this.hide(); + } + } + + /** + * Get the rough direction of the point relative to the anchor. + * If the handle is roughly horizontal relative to the anchor, return "ew". + * If the handle is roughly vertical relative to the anchor, return "ns" + * If the handle is roughly above/right or below/left, return "nesw" + * If the handle is roughly above/left or below/right, return "nwse" + * @param {String} pointName the name of the point being hovered + * @param {String} anchor the name of the anchor point + * @returns {String} The rough direction of the point relative to the anchor + */ + getRoughDirection(pointName, anchor) { + const scalePoint = pointName.split("-")[1]; + const anchorPos = this.transformedBoundingBox[anchor]; + const scalePos = this.transformedBoundingBox[scalePoint]; + const { minX, minY, maxX, maxY } = this.boundingBox; + const width = maxX - minX; + const height = maxY - minY; + const dx = (scalePos[0] - anchorPos[0]) / width; + const dy = (scalePos[1] - anchorPos[1]) / height; + if (dx >= -0.33 && dx <= 0.33) { + return "ns"; + } else if (dy >= -0.33 && dy <= 0.33) { + return "ew"; + } else if ((dx > 0.33 && dy < -0.33) || (dx < -0.33 && dy > 0.33)) { + return "nesw"; + } + return "nwse"; + } + + /** + * Given a unit type, get the ratio by which to multiply a pixel value in order to + * convert pixels to that unit. + * + * Percentage units (%) are relative to a size. This must be provided when requesting + * a ratio for converting from pixels to percentages. + * + * @param {String} unit + * One of: %, em, rem, vw, vh + * @param {Number} size + * Size to which percentage values are relative to. + * @return {Number} + */ + getUnitToPixelRatio(unit, size) { + let ratio; + const windowHeight = this.currentNode.ownerGlobal.innerHeight; + const windowWidth = this.currentNode.ownerGlobal.innerWidth; + switch (unit) { + case "%": + ratio = 100 / size; + break; + case "em": + ratio = 1 / parseFloat(getComputedStyle(this.currentNode).fontSize); + break; + case "rem": + const root = this.currentNode.ownerDocument.documentElement; + ratio = 1 / parseFloat(getComputedStyle(root).fontSize); + break; + case "vw": + ratio = 100 / windowWidth; + break; + case "vh": + ratio = 100 / windowHeight; + break; + case "vmin": + ratio = 100 / Math.min(windowHeight, windowWidth); + break; + case "vmax": + ratio = 100 / Math.max(windowHeight, windowWidth); + break; + default: + // If unit is not recognized, peg ratio 1:1 to pixels. + ratio = 1; + } + + return ratio; + } +} + +/** + * Get the "raw" (i.e. non-computed) shape definition on the given node. + * @param {Node} node the node to analyze + * @param {String} property the CSS property for which a value should be retrieved. + * @returns {String} the value of the given CSS property on the given node. + */ +function getDefinedShapeProperties(node, property) { + let prop = ""; + if (!node) { + return prop; + } + + const cssRules = getCSSStyleRules(node); + for (let i = 0; i < cssRules.length; i++) { + const rule = cssRules[i]; + const value = rule.style.getPropertyValue(property); + if (value && value !== "auto") { + prop = value; + } + } + + if (node.style) { + const value = node.style.getPropertyValue(property); + if (value && value !== "auto") { + prop = value; + } + } + + return prop.trim(); +} + +/** + * Split coordinate pairs separated by a space and return an array. + * @param {String} coords the coordinate pair, where each coord is separated by a space. + * @returns {Array} a 2 element array containing the coordinates. + */ +function splitCoords(coords) { + // All coordinate pairs are of the form "x y" where x and y are values or + // calc() expressions. calc() expressions have spaces around operators, so + // replace those spaces with \u00a0 (non-breaking space) so they will not be + // split later. + return coords + .trim() + .replace(/ [\+\-\*\/] /g, match => { + return `\u00a0${match.trim()}\u00a0`; + }) + .split(" "); +} +exports.splitCoords = splitCoords; + +/** + * Convert a coordinate to a percentage value. + * @param {String} coord a single coordinate + * @param {Number} size the size of the element (width or height) that the percentages + * are relative to + * @returns {Number} the coordinate as a percentage value + */ +function coordToPercent(coord, size) { + if (coord.includes("%")) { + // Just remove the % sign, nothing else to do, we're in a viewBox that's 100% + // worth. + return parseFloat(coord.replace("%", "")); + } else if (coord.includes("px")) { + // Convert the px value to a % value. + const px = parseFloat(coord.replace("px", "")); + return (px * 100) / size; + } + + // Unit-less value, so 0. + return 0; +} +exports.coordToPercent = coordToPercent; + +/** + * Evaluates a CSS calc() expression (only handles addition) + * @param {String} expression the arguments to the calc() function + * @param {Number} size the size of the element (width or height) that percentage values + * are relative to + * @returns {Number} the result of the expression as a percentage value + */ +function evalCalcExpression(expression, size) { + // the calc() values returned by getComputedStyle only have addition, as it + // computes calc() expressions as much as possible without resolving percentages, + // leaving only addition. + const values = expression.split("+").map(v => v.trim()); + + return values.reduce((prev, curr) => { + return prev + coordToPercent(curr, size); + }, 0); +} +exports.evalCalcExpression = evalCalcExpression; + +/** + * Converts a shape mode to the proper CSS property name. + * @param {String} mode the mode of the CSS shape + * @returns the equivalent CSS property name + */ +const shapeModeToCssPropertyName = mode => { + const property = mode.substring(3); + return property.substring(0, 1).toLowerCase() + property.substring(1); +}; +exports.shapeModeToCssPropertyName = shapeModeToCssPropertyName; + +/** + * Get the SVG path definition for a circle with given attributes. + * @param {Number} size the radius of the circle in pixels + * @param {Number} cx the x coordinate of the centre of the circle + * @param {Number} cy the y coordinate of the centre of the circle + * @param {Number} width the width of the element the circle is being drawn for + * @param {Number} height the height of the element the circle is being drawn for + * @param {Number} zoom the zoom level of the window the circle is drawn in + * @returns {String} the definition of the circle in SVG path description format. + */ +const getCirclePath = (size, cx, cy, width, height, zoom) => { + // We use a viewBox of 100x100 for shape-container so it's easy to position things + // based on their percentage, but this makes it more difficult to create circles. + // Therefor, 100px is the base size of shape-container. In order to make the markers' + // size scale properly, we must adjust the radius based on zoom and the width/height of + // the element being highlighted, then calculate a radius for both x/y axes based + // on the aspect ratio of the element. + const radius = (size * (100 / Math.max(width, height))) / zoom; + const ratio = width / height; + const rx = ratio > 1 ? radius : radius / ratio; + const ry = ratio > 1 ? radius * ratio : radius; + // a circle is drawn as two arc lines, starting at the leftmost point of the circle. + return ( + `M${cx - rx},${cy}a${rx},${ry} 0 1,0 ${rx * 2},0` + + `a${rx},${ry} 0 1,0 ${rx * -2},0` + ); +}; +exports.getCirclePath = getCirclePath; + +/** + * Calculates the object bounding box for a node given its stroke bounding box. + * @param {Number} top the y coord of the top edge of the stroke bounding box + * @param {Number} left the x coord of the left edge of the stroke bounding box + * @param {Number} width the width of the stroke bounding box + * @param {Number} height the height of the stroke bounding box + * @param {Object} node the node object + * @returns {Object} an object of the form { top, left, width, height }, which + * are the top/left/width/height of the object bounding box for the node. + */ +const getObjectBoundingBox = (top, left, width, height, node) => { + // See https://drafts.fxtf.org/css-masking-1/#stroke-bounding-box for details + // on this algorithm. Note that we intentionally do not check "stroke-linecap". + const strokeWidth = parseFloat(getComputedStyle(node).strokeWidth); + let delta = strokeWidth / 2; + const tagName = node.tagName; + + if ( + tagName !== "rect" && + tagName !== "ellipse" && + tagName !== "circle" && + tagName !== "image" + ) { + if (getComputedStyle(node).strokeLinejoin === "miter") { + const miter = getComputedStyle(node).strokeMiterlimit; + if (miter < Math.SQRT2) { + delta *= Math.SQRT2; + } else { + delta *= miter; + } + } else { + delta *= Math.SQRT2; + } + } + + return { + top: top + delta, + left: left + delta, + width: width - 2 * delta, + height: height - 2 * delta, + }; +}; + +/** + * Get the unit (e.g. px, %, em) for the given point value. + * @param {any} point a point value for which a unit should be retrieved. + * @returns {String} the unit. + */ +const getUnit = point => { + // If the point has no unit, default to px. + if (isUnitless(point)) { + return "px"; + } + const [unit] = point.match(/[^\d]+$/) || ["px"]; + return unit; +}; +exports.getUnit = getUnit; + +/** + * Check if the given point value has a unit. + * @param {any} point a point value. + * @returns {Boolean} whether the given value has a unit. + */ +const isUnitless = point => { + return ( + !point || + !point.match(/[^\d]+$/) || + // If zero doesn't have a unit, its numeric and string forms should be equal. + (parseFloat(point) === 0 && parseFloat(point).toString() === point) || + point.includes("(") || + point === "center" || + point === "closest-side" || + point === "farthest-side" + ); +}; + +/** + * Return the anchor corresponding to the given scale type. + * @param {String} type a scale type, of form "scale-[direction]" + * @returns {String} a string describing the anchor, one of the 8 cardinal directions. + */ +const getAnchorPoint = type => { + let anchor = type.split("-")[1]; + if (anchor.includes("n")) { + anchor = anchor.replace("n", "s"); + } else if (anchor.includes("s")) { + anchor = anchor.replace("s", "n"); + } + if (anchor.includes("w")) { + anchor = anchor.replace("w", "e"); + } else if (anchor.includes("e")) { + anchor = anchor.replace("e", "w"); + } + + if (anchor === "e" || anchor === "w") { + anchor = "n" + anchor; + } else if (anchor === "n" || anchor === "s") { + anchor = anchor + "w"; + } + + return anchor; +}; + +/** + * Get the decimal point precision for values depending on unit type. + * Only handle pixels and falsy values for now. Round them to the nearest integer value. + * All other unit types round to two decimal points. + * + * @param {String|undefined} unitType any one of the accepted CSS unit types for position. + * @return {Number} decimal precision when rounding a value + */ +function getDecimalPrecision(unitType) { + switch (unitType) { + case "px": + case "": + case undefined: + return 0; + default: + return 2; + } +} +exports.getDecimalPrecision = getDecimalPrecision; + +/** + * Round up a numeric value to a fixed number of decimals depending on CSS unit type. + * Used when generating output shape values when: + * - transforming shapes + * - inserting new points on a polygon. + * + * @param {Number} number + * Value to round up. + * @param {String} unitType + * CSS unit type, like "px", "%", "em", "vh", etc. + * @return {Number} + * Rounded value + */ +function round(number, unitType) { + return number.toFixed(getDecimalPrecision(unitType)); +} + +exports.ShapesHighlighter = ShapesHighlighter; diff --git a/devtools/server/actors/highlighters/tabbing-order.js b/devtools/server/actors/highlighters/tabbing-order.js new file mode 100644 index 0000000000..ab96d30fe6 --- /dev/null +++ b/devtools/server/actors/highlighters/tabbing-order.js @@ -0,0 +1,247 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const lazy = {}; +loader.lazyGetter( + lazy, + "ContentDOMReference", + () => + ChromeUtils.importESModule( + "resource://gre/modules/ContentDOMReference.sys.mjs", + { + // ContentDOMReference needs to be retrieved from the shared global + // since it is a shared singleton. + loadInDevToolsLoader: false, + } + ).ContentDOMReference +); +loader.lazyRequireGetter( + this, + ["isFrameWithChildTarget", "isWindowIncluded"], + "resource://devtools/shared/layout/utils.js", + true +); +loader.lazyRequireGetter( + this, + "NodeTabbingOrderHighlighter", + "resource://devtools/server/actors/highlighters/node-tabbing-order.js", + true +); + +const DEFAULT_FOCUS_FLAGS = Services.focus.FLAG_NOSCROLL; + +/** + * The TabbingOrderHighlighter uses focus manager to traverse all focusable + * nodes on the page and then uses the NodeTabbingOrderHighlighter to highlight + * these nodes. + */ +class TabbingOrderHighlighter { + constructor(highlighterEnv) { + this.highlighterEnv = highlighterEnv; + this._highlighters = new Map(); + + this.onMutation = this.onMutation.bind(this); + this.onPageHide = this.onPageHide.bind(this); + this.onWillNavigate = this.onWillNavigate.bind(this); + + this.highlighterEnv.on("will-navigate", this.onWillNavigate); + + const { pageListenerTarget } = highlighterEnv; + pageListenerTarget.addEventListener("pagehide", this.onPageHide); + } + + /** + * Static getter that indicates that TabbingOrderHighlighter supports + * highlighting in XUL windows. + */ + static get XULSupported() { + return true; + } + + get win() { + return this.highlighterEnv.window; + } + + get focusedElement() { + return Services.focus.getFocusedElementForWindow(this.win, true, {}); + } + + set focusedElement(element) { + Services.focus.setFocus(element, DEFAULT_FOCUS_FLAGS); + } + + moveFocus(startElement) { + return Services.focus.moveFocus( + this.win, + startElement.nodeType === Node.DOCUMENT_NODE + ? startElement.documentElement + : startElement, + Services.focus.MOVEFOCUS_FORWARD, + DEFAULT_FOCUS_FLAGS + ); + } + + /** + * Show NodeTabbingOrderHighlighter on each node that belongs to the keyboard + * tabbing order. + * + * @param {DOMNode} startElm + * Starting element to calculate tabbing order from. + * + * @param {JSON} options + * - options.index + * Start index for the tabbing order. Starting index will be 0 at + * the start of the tabbing order highlighting; in remote frames + * starting index will, typically, be greater than 0 (unless there + * was nothing to focus in the top level content document prior to + * the remote frame). + */ + async show(startElm, { index }) { + const focusableElements = []; + const originalFocusedElement = this.focusedElement; + let currentFocusedElement = this.moveFocus(startElm); + while ( + currentFocusedElement && + isWindowIncluded(this.win, currentFocusedElement.ownerGlobal) + ) { + focusableElements.push(currentFocusedElement); + currentFocusedElement = this.moveFocus(currentFocusedElement); + } + + // Allow to flush pending notifications to ensure the PresShell and frames + // are updated. + await new Promise(resolve => Services.tm.dispatchToMainThread(resolve)); + let endElm = this.focusedElement; + if ( + currentFocusedElement && + !isWindowIncluded(this.win, currentFocusedElement.ownerGlobal) + ) { + endElm = null; + } + + if ( + !endElm && + !!focusableElements.length && + isFrameWithChildTarget( + this.highlighterEnv.targetActor, + focusableElements[focusableElements.length - 1] + ) + ) { + endElm = focusableElements[focusableElements.length - 1]; + } + + if (originalFocusedElement && originalFocusedElement !== endElm) { + this.focusedElement = originalFocusedElement; + } + + const highlighters = []; + for (let i = 0; i < focusableElements.length; i++) { + highlighters.push( + this._accumulateHighlighter(focusableElements[i], index++) + ); + } + await Promise.all(highlighters); + + this._trackMutations(); + + return { + contentDOMReference: endElm && lazy.ContentDOMReference.get(endElm), + index, + }; + } + + async _accumulateHighlighter(node, index) { + const highlighter = new NodeTabbingOrderHighlighter(this.highlighterEnv); + await highlighter.isReady; + + highlighter.show(node, { index: index + 1 }); + this._highlighters.set(node, highlighter); + } + + hide() { + this._untrackMutations(); + for (const highlighter of this._highlighters.values()) { + highlighter.destroy(); + } + + this._highlighters.clear(); + } + + /** + * Track mutations in the top level document subtree so that the appropriate + * NodeTabbingOrderHighlighter infobar's could be updated to reflect the + * attribute mutations on relevant nodes. + */ + _trackMutations() { + const { win } = this; + this.currentMutationObserver = new win.MutationObserver(this.onMutation); + this.currentMutationObserver.observe(win.document.documentElement, { + subtree: true, + attributes: true, + }); + } + + _untrackMutations() { + if (!this.currentMutationObserver) { + return; + } + + this.currentMutationObserver.disconnect(); + this.currentMutationObserver = null; + } + + onMutation(mutationList) { + for (const { target } of mutationList) { + const highlighter = this._highlighters.get(target); + if (highlighter) { + highlighter.update(); + } + } + } + + /** + * Update NodeTabbingOrderHighlighter focus styling for a node that, + * potentially, belongs to the tabbing order. + * @param {Object} options + * Options specifying the node and its focused state. + */ + updateFocus({ node, focused }) { + const highlighter = this._highlighters.get(node); + if (!highlighter) { + return; + } + + highlighter.updateFocus(focused); + } + + destroy() { + this.highlighterEnv.off("will-navigate", this.onWillNavigate); + + const { pageListenerTarget } = this.highlighterEnv; + if (pageListenerTarget) { + pageListenerTarget.removeEventListener("pagehide", this.onPageHide); + } + + this.hide(); + this.highlighterEnv = null; + } + + onPageHide({ target }) { + // If a pagehide event is triggered for current window's highlighter, hide + // the highlighter. + if (target.defaultView === this.win) { + this.hide(); + } + } + + onWillNavigate({ isTopLevel }) { + if (isTopLevel) { + this.hide(); + } + } +} + +exports.TabbingOrderHighlighter = TabbingOrderHighlighter; diff --git a/devtools/server/actors/highlighters/utils/accessibility.js b/devtools/server/actors/highlighters/utils/accessibility.js new file mode 100644 index 0000000000..23c4210a65 --- /dev/null +++ b/devtools/server/actors/highlighters/utils/accessibility.js @@ -0,0 +1,774 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const DevToolsUtils = require("resource://devtools/shared/DevToolsUtils.js"); +const { + getCurrentZoom, +} = require("resource://devtools/shared/layout/utils.js"); +const { + moveInfobar, +} = require("resource://devtools/server/actors/highlighters/utils/markup.js"); +const { + truncateString, +} = require("resource://devtools/shared/inspector/utils.js"); + +const STRINGS_URI = "devtools/shared/locales/accessibility.properties"; +loader.lazyRequireGetter( + this, + "LocalizationHelper", + "resource://devtools/shared/l10n.js", + true +); +DevToolsUtils.defineLazyGetter( + this, + "L10N", + () => new LocalizationHelper(STRINGS_URI) +); + +const { + accessibility: { + AUDIT_TYPE, + ISSUE_TYPE: { + [AUDIT_TYPE.KEYBOARD]: { + FOCUSABLE_NO_SEMANTICS, + FOCUSABLE_POSITIVE_TABINDEX, + INTERACTIVE_NO_ACTION, + INTERACTIVE_NOT_FOCUSABLE, + MOUSE_INTERACTIVE_ONLY, + NO_FOCUS_VISIBLE, + }, + [AUDIT_TYPE.TEXT_LABEL]: { + AREA_NO_NAME_FROM_ALT, + DIALOG_NO_NAME, + DOCUMENT_NO_TITLE, + EMBED_NO_NAME, + FIGURE_NO_NAME, + FORM_FIELDSET_NO_NAME, + FORM_FIELDSET_NO_NAME_FROM_LEGEND, + FORM_NO_NAME, + FORM_NO_VISIBLE_NAME, + FORM_OPTGROUP_NO_NAME_FROM_LABEL, + FRAME_NO_NAME, + HEADING_NO_CONTENT, + HEADING_NO_NAME, + IFRAME_NO_NAME_FROM_TITLE, + IMAGE_NO_NAME, + INTERACTIVE_NO_NAME, + MATHML_GLYPH_NO_NAME, + TOOLBAR_NO_NAME, + }, + }, + SCORES, + }, +} = require("resource://devtools/shared/constants.js"); + +// Max string length for truncating accessible name values. +const MAX_STRING_LENGTH = 50; + +/** + * The AccessibleInfobar is a class responsible for creating the markup for the + * accessible highlighter. It is also reponsible for updating content within the + * infobar such as role and name values. + */ +class Infobar { + constructor(highlighter) { + this.highlighter = highlighter; + this.audit = new Audit(this); + } + + get markup() { + return this.highlighter.markup; + } + + get document() { + return this.highlighter.win.document; + } + + get bounds() { + return this.highlighter._bounds; + } + + get options() { + return this.highlighter.options; + } + + get prefix() { + return this.highlighter.ID_CLASS_PREFIX; + } + + get win() { + return this.highlighter.win; + } + + /** + * Move the Infobar to the right place in the highlighter. + * + * @param {Element} container + * Container of infobar. + */ + _moveInfobar(container) { + // Position the infobar using accessible's bounds + const { left: x, top: y, bottom, width } = this.bounds; + const infobarBounds = { x, y, bottom, width }; + + moveInfobar(container, infobarBounds, this.win); + } + + /** + * Build markup for infobar. + * + * @param {Element} root + * Root element to build infobar with. + */ + buildMarkup(root) { + const container = this.markup.createNode({ + parent: root, + attributes: { + class: "infobar-container", + id: "infobar-container", + "aria-hidden": "true", + hidden: "true", + }, + prefix: this.prefix, + }); + + const infobar = this.markup.createNode({ + parent: container, + attributes: { + class: "infobar", + id: "infobar", + }, + prefix: this.prefix, + }); + + const infobarText = this.markup.createNode({ + parent: infobar, + attributes: { + class: "infobar-text", + id: "infobar-text", + }, + prefix: this.prefix, + }); + + this.markup.createNode({ + nodeType: "span", + parent: infobarText, + attributes: { + class: "infobar-role", + id: "infobar-role", + }, + prefix: this.prefix, + }); + + this.markup.createNode({ + nodeType: "span", + parent: infobarText, + attributes: { + class: "infobar-name", + id: "infobar-name", + }, + prefix: this.prefix, + }); + + this.audit.buildMarkup(infobarText); + } + + /** + * Destroy the Infobar's highlighter. + */ + destroy() { + this.highlighter = null; + this.audit.destroy(); + this.audit = null; + } + + /** + * Gets the element with the specified ID. + * + * @param {String} id + * Element ID. + * @return {Element} The element with specified ID. + */ + getElement(id) { + return this.highlighter.getElement(id); + } + + /** + * Gets the text content of element. + * + * @param {String} id + * Element ID to retrieve text content from. + * @return {String} The text content of the element. + */ + getTextContent(id) { + const anonymousContent = this.markup.content; + return anonymousContent.root.getElementById(`${this.prefix}${id}`) + .textContent; + } + + /** + * Hide the accessible infobar. + */ + hide() { + const container = this.getElement("infobar-container"); + container.setAttribute("hidden", "true"); + } + + /** + * Show the accessible infobar highlighter. + */ + show() { + const container = this.getElement("infobar-container"); + + // Remove accessible's infobar "hidden" attribute. We do this first to get the + // computed styles of the infobar container. + container.removeAttribute("hidden"); + + // Update the infobar's position and content. + this.update(container); + } + + /** + * Update content of the infobar. + */ + update(container) { + const { audit, name, role } = this.options; + + this.updateRole(role, this.getElement("infobar-role")); + this.updateName(name, this.getElement("infobar-name")); + this.audit.update(audit); + + // Position the infobar. + this._moveInfobar(container); + } + + /** + * Sets the text content of the specified element. + * + * @param {Element} el + * Element to set text content on. + * @param {String} text + * Text for content. + */ + setTextContent(el, text) { + el.setTextContent(text); + } + + /** + * Show the accessible's name message. + * + * @param {String} name + * Accessible's name value. + * @param {Element} el + * Element to set text content on. + */ + updateName(name, el) { + const nameText = name ? `"${truncateString(name, MAX_STRING_LENGTH)}"` : ""; + this.setTextContent(el, nameText); + } + + /** + * Show the accessible's role. + * + * @param {String} role + * Accessible's role value. + * @param {Element} el + * Element to set text content on. + */ + updateRole(role, el) { + this.setTextContent(el, role); + } +} + +/** + * Audit component used within the accessible highlighter infobar. This component is + * responsible for rendering and updating its containing AuditReport components that + * display various audit information such as contrast ratio score. + */ +class Audit { + constructor(infobar) { + this.infobar = infobar; + + // A list of audit reports to be shown on the fly when highlighting an accessible + // object. + this.reports = { + [AUDIT_TYPE.CONTRAST]: new ContrastRatio(this), + [AUDIT_TYPE.KEYBOARD]: new Keyboard(this), + [AUDIT_TYPE.TEXT_LABEL]: new TextLabel(this), + }; + } + + get prefix() { + return this.infobar.prefix; + } + + get markup() { + return this.infobar.markup; + } + + buildMarkup(root) { + const audit = this.markup.createNode({ + nodeType: "span", + parent: root, + attributes: { + class: "infobar-audit", + id: "infobar-audit", + }, + prefix: this.prefix, + }); + + Object.values(this.reports).forEach(report => report.buildMarkup(audit)); + } + + update(audit = {}) { + const el = this.getElement("infobar-audit"); + el.setAttribute("hidden", true); + + let updated = false; + Object.values(this.reports).forEach(report => { + if (report.update(audit)) { + updated = true; + } + }); + + if (updated) { + el.removeAttribute("hidden"); + } + } + + getElement(id) { + return this.infobar.getElement(id); + } + + setTextContent(el, text) { + return this.infobar.setTextContent(el, text); + } + + destroy() { + this.infobar = null; + Object.values(this.reports).forEach(report => report.destroy()); + this.reports = null; + } +} + +/** + * A common interface between audit report components used to render accessibility audit + * information for the currently highlighted accessible object. + */ +class AuditReport { + constructor(audit) { + this.audit = audit; + } + + get prefix() { + return this.audit.prefix; + } + + get markup() { + return this.audit.markup; + } + + getElement(id) { + return this.audit.getElement(id); + } + + setTextContent(el, text) { + return this.audit.setTextContent(el, text); + } + + destroy() { + this.audit = null; + } +} + +/** + * Contrast ratio audit report that is used to display contrast ratio score as part of the + * inforbar, + */ +class ContrastRatio extends AuditReport { + buildMarkup(root) { + this.markup.createNode({ + nodeType: "span", + parent: root, + attributes: { + class: "contrast-ratio-label", + id: "contrast-ratio-label", + }, + prefix: this.prefix, + }); + + this.markup.createNode({ + nodeType: "span", + parent: root, + attributes: { + class: "contrast-ratio-error", + id: "contrast-ratio-error", + }, + prefix: this.prefix, + text: L10N.getStr("accessibility.contrast.ratio.error"), + }); + + this.markup.createNode({ + nodeType: "span", + parent: root, + attributes: { + class: "contrast-ratio", + id: "contrast-ratio-min", + }, + prefix: this.prefix, + }); + + this.markup.createNode({ + nodeType: "span", + parent: root, + attributes: { + class: "contrast-ratio-separator", + id: "contrast-ratio-separator", + }, + prefix: this.prefix, + }); + + this.markup.createNode({ + nodeType: "span", + parent: root, + attributes: { + class: "contrast-ratio", + id: "contrast-ratio-max", + }, + prefix: this.prefix, + }); + } + + _fillAndStyleContrastValue(el, { value, className, color, backgroundColor }) { + value = value.toFixed(2); + this.setTextContent(el, value); + el.classList.add(className); + el.setAttribute( + "style", + `--accessibility-highlighter-contrast-ratio-color: rgba(${color});` + + `--accessibility-highlighter-contrast-ratio-bg: rgba(${backgroundColor});` + ); + el.removeAttribute("hidden"); + } + + /** + * Update contrast ratio score infobar markup. + * @param {Object} + * Audit report for a given highlighted accessible. + * @return {Boolean} + * True if the contrast ratio markup was updated correctly and infobar audit + * block should be visible. + */ + update(audit) { + const els = {}; + for (const key of ["label", "min", "max", "error", "separator"]) { + const el = (els[key] = this.getElement(`contrast-ratio-${key}`)); + if (["min", "max"].includes(key)) { + Object.values(SCORES).forEach(className => + el.classList.remove(className) + ); + this.setTextContent(el, ""); + } + + el.setAttribute("hidden", true); + el.removeAttribute("style"); + } + + if (!audit) { + return false; + } + + const contrastRatio = audit[AUDIT_TYPE.CONTRAST]; + if (!contrastRatio) { + return false; + } + + const { isLargeText, error } = contrastRatio; + this.setTextContent( + els.label, + L10N.getStr( + `accessibility.contrast.ratio.label${isLargeText ? ".large" : ""}` + ) + ); + els.label.removeAttribute("hidden"); + if (error) { + els.error.removeAttribute("hidden"); + return true; + } + + if (contrastRatio.value) { + const { value, color, score, backgroundColor } = contrastRatio; + this._fillAndStyleContrastValue(els.min, { + value, + className: score, + color, + backgroundColor, + }); + return true; + } + + const { + min, + max, + color, + backgroundColorMin, + backgroundColorMax, + scoreMin, + scoreMax, + } = contrastRatio; + this._fillAndStyleContrastValue(els.min, { + value: min, + className: scoreMin, + color, + backgroundColor: backgroundColorMin, + }); + els.separator.removeAttribute("hidden"); + this._fillAndStyleContrastValue(els.max, { + value: max, + className: scoreMax, + color, + backgroundColor: backgroundColorMax, + }); + + return true; + } +} + +/** + * Keyboard audit report that is used to display a problem with keyboard + * accessibility as part of the inforbar. + */ +class Keyboard extends AuditReport { + /** + * A map from keyboard issues to annotation component properties. + */ + static get ISSUE_TO_INFOBAR_LABEL_MAP() { + return { + [FOCUSABLE_NO_SEMANTICS]: "accessibility.keyboard.issue.semantics", + [FOCUSABLE_POSITIVE_TABINDEX]: "accessibility.keyboard.issue.tabindex", + [INTERACTIVE_NO_ACTION]: "accessibility.keyboard.issue.action", + [INTERACTIVE_NOT_FOCUSABLE]: "accessibility.keyboard.issue.focusable", + [MOUSE_INTERACTIVE_ONLY]: "accessibility.keyboard.issue.mouse.only", + [NO_FOCUS_VISIBLE]: "accessibility.keyboard.issue.focus.visible", + }; + } + + buildMarkup(root) { + this.markup.createNode({ + nodeType: "span", + parent: root, + attributes: { + class: "audit", + id: "keyboard", + }, + prefix: this.prefix, + }); + } + + /** + * Update keyboard audit infobar markup. + * @param {Object} + * Audit report for a given highlighted accessible. + * @return {Boolean} + * True if the keyboard markup was updated correctly and infobar audit + * block should be visible. + */ + update(audit) { + const el = this.getElement("keyboard"); + el.setAttribute("hidden", true); + Object.values(SCORES).forEach(className => el.classList.remove(className)); + + if (!audit) { + return false; + } + + const keyboardAudit = audit[AUDIT_TYPE.KEYBOARD]; + if (!keyboardAudit) { + return false; + } + + const { issue, score } = keyboardAudit; + this.setTextContent( + el, + L10N.getStr(Keyboard.ISSUE_TO_INFOBAR_LABEL_MAP[issue]) + ); + el.classList.add(score); + el.removeAttribute("hidden"); + + return true; + } +} + +/** + * Text label audit report that is used to display a problem with text alternatives + * as part of the inforbar. + */ +class TextLabel extends AuditReport { + /** + * A map from text label issues to annotation component properties. + */ + static get ISSUE_TO_INFOBAR_LABEL_MAP() { + return { + [AREA_NO_NAME_FROM_ALT]: "accessibility.text.label.issue.area", + [DIALOG_NO_NAME]: "accessibility.text.label.issue.dialog", + [DOCUMENT_NO_TITLE]: "accessibility.text.label.issue.document.title", + [EMBED_NO_NAME]: "accessibility.text.label.issue.embed", + [FIGURE_NO_NAME]: "accessibility.text.label.issue.figure", + [FORM_FIELDSET_NO_NAME]: "accessibility.text.label.issue.fieldset", + [FORM_FIELDSET_NO_NAME_FROM_LEGEND]: + "accessibility.text.label.issue.fieldset.legend2", + [FORM_NO_NAME]: "accessibility.text.label.issue.form", + [FORM_NO_VISIBLE_NAME]: "accessibility.text.label.issue.form.visible", + [FORM_OPTGROUP_NO_NAME_FROM_LABEL]: + "accessibility.text.label.issue.optgroup.label2", + [FRAME_NO_NAME]: "accessibility.text.label.issue.frame", + [HEADING_NO_CONTENT]: "accessibility.text.label.issue.heading.content", + [HEADING_NO_NAME]: "accessibility.text.label.issue.heading", + [IFRAME_NO_NAME_FROM_TITLE]: "accessibility.text.label.issue.iframe", + [IMAGE_NO_NAME]: "accessibility.text.label.issue.image", + [INTERACTIVE_NO_NAME]: "accessibility.text.label.issue.interactive", + [MATHML_GLYPH_NO_NAME]: "accessibility.text.label.issue.glyph", + [TOOLBAR_NO_NAME]: "accessibility.text.label.issue.toolbar", + }; + } + + buildMarkup(root) { + this.markup.createNode({ + nodeType: "span", + parent: root, + attributes: { + class: "audit", + id: "text-label", + }, + prefix: this.prefix, + }); + } + + /** + * Update text label audit infobar markup. + * @param {Object} + * Audit report for a given highlighted accessible. + * @return {Boolean} + * True if the text label markup was updated correctly and infobar + * audit block should be visible. + */ + update(audit) { + const el = this.getElement("text-label"); + el.setAttribute("hidden", true); + Object.values(SCORES).forEach(className => el.classList.remove(className)); + + if (!audit) { + return false; + } + + const textLabelAudit = audit[AUDIT_TYPE.TEXT_LABEL]; + if (!textLabelAudit) { + return false; + } + + const { issue, score } = textLabelAudit; + this.setTextContent( + el, + L10N.getStr(TextLabel.ISSUE_TO_INFOBAR_LABEL_MAP[issue]) + ); + el.classList.add(score); + el.removeAttribute("hidden"); + + return true; + } +} + +/** + * A helper function that calculate accessible object bounds and positioning to + * be used for highlighting. + * + * @param {Object} win + * window that contains accessible object. + * @param {Object} options + * Object used for passing options: + * - {Number} x + * x coordinate of the top left corner of the accessible object + * - {Number} y + * y coordinate of the top left corner of the accessible object + * - {Number} w + * width of the the accessible object + * - {Number} h + * height of the the accessible object + * @return {Object|null} Returns, if available, positioning and bounds information for + * the accessible object. + */ +function getBounds(win, { x, y, w, h }) { + const { mozInnerScreenX, mozInnerScreenY, scrollX, scrollY } = win; + const zoom = getCurrentZoom(win); + let left = x; + let right = x + w; + let top = y; + let bottom = y + h; + + left -= mozInnerScreenX - scrollX; + right -= mozInnerScreenX - scrollX; + top -= mozInnerScreenY - scrollY; + bottom -= mozInnerScreenY - scrollY; + + left *= zoom; + right *= zoom; + top *= zoom; + bottom *= zoom; + + const width = right - left; + const height = bottom - top; + + return { left, right, top, bottom, width, height }; +} + +/** + * A helper function that calculate accessible object bounds and positioning to + * be used for highlighting in browser toolbox. + * + * @param {Object} win + * window that contains accessible object. + * @param {Object} options + * Object used for passing options: + * - {Number} x + * x coordinate of the top left corner of the accessible object + * - {Number} y + * y coordinate of the top left corner of the accessible object + * - {Number} w + * width of the the accessible object + * - {Number} h + * height of the the accessible object + * - {Number} zoom + * zoom level of the accessible object's parent window + * @return {Object|null} Returns, if available, positioning and bounds information for + * the accessible object. + */ +function getBoundsXUL(win, { x, y, w, h, zoom }) { + const { mozInnerScreenX, mozInnerScreenY } = win; + let left = x; + let right = x + w; + let top = y; + let bottom = y + h; + + left *= zoom; + right *= zoom; + top *= zoom; + bottom *= zoom; + + left -= mozInnerScreenX; + right -= mozInnerScreenX; + top -= mozInnerScreenY; + bottom -= mozInnerScreenY; + + const width = right - left; + const height = bottom - top; + + return { left, right, top, bottom, width, height }; +} + +exports.MAX_STRING_LENGTH = MAX_STRING_LENGTH; +exports.getBounds = getBounds; +exports.getBoundsXUL = getBoundsXUL; +exports.Infobar = Infobar; diff --git a/devtools/server/actors/highlighters/utils/canvas.js b/devtools/server/actors/highlighters/utils/canvas.js new file mode 100644 index 0000000000..24285f02e0 --- /dev/null +++ b/devtools/server/actors/highlighters/utils/canvas.js @@ -0,0 +1,596 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const { + apply, + getNodeTransformationMatrix, + getWritingModeMatrix, + identity, + isIdentity, + multiply, + scale, + translate, +} = require("resource://devtools/shared/layout/dom-matrix-2d.js"); +const { + getCurrentZoom, + getViewportDimensions, +} = require("resource://devtools/shared/layout/utils.js"); +const { + getComputedStyle, +} = require("resource://devtools/server/actors/highlighters/utils/markup.js"); + +// A set of utility functions for highlighters that render their content to a <canvas> +// element. + +// We create a <canvas> element that has always 4096x4096 physical pixels, to displays +// our grid's overlay. +// Then, we move the element around when needed, to give the perception that it always +// covers the screen (See bug 1345434). +// +// This canvas size value is the safest we can use because most GPUs can handle it. +// It's also far from the maximum canvas memory allocation limit (4096x4096x4 is +// 67.108.864 bytes, where the limit is 500.000.000 bytes, see +// gfx_max_alloc_size in modules/libpref/init/StaticPrefList.yaml. +// +// Note: +// Once bug 1232491 lands, we could try to refactor this code to use the values from +// the displayport API instead. +// +// Using a fixed value should also solve bug 1348293. +const CANVAS_SIZE = 4096; + +// The default color used for the canvas' font, fill and stroke colors. +const DEFAULT_COLOR = "#9400FF"; + +/** + * Draws a rect to the context given and applies a transformation matrix if passed. + * The coordinates are the start and end points of the rectangle's diagonal. + * + * @param {CanvasRenderingContext2D} ctx + * The 2D canvas context. + * @param {Number} x1 + * The x-axis coordinate of the rectangle's diagonal start point. + * @param {Number} y1 + * The y-axis coordinate of the rectangle's diagonal start point. + * @param {Number} x2 + * The x-axis coordinate of the rectangle's diagonal end point. + * @param {Number} y2 + * The y-axis coordinate of the rectangle's diagonal end point. + * @param {Array} [matrix=identity()] + * The transformation matrix to apply. + */ +function clearRect(ctx, x1, y1, x2, y2, matrix = identity()) { + const p = getPointsFromDiagonal(x1, y1, x2, y2, matrix); + + // We are creating a clipping path and want it removed after we clear it's + // contents so we need to save the context. + ctx.save(); + + // Create a path to be cleared. + ctx.beginPath(); + ctx.moveTo(Math.round(p[0].x), Math.round(p[0].y)); + ctx.lineTo(Math.round(p[1].x), Math.round(p[1].y)); + ctx.lineTo(Math.round(p[2].x), Math.round(p[2].y)); + ctx.lineTo(Math.round(p[3].x), Math.round(p[3].y)); + ctx.closePath(); + + // Restrict future drawing to the inside of the path. + ctx.clip(); + + // Clear any transforms applied to the canvas so that clearRect() really does + // clear everything. + ctx.setTransform(1, 0, 0, 1, 0, 0); + + // Clear the contents of our clipped path by attempting to clear the canvas. + ctx.clearRect(0, 0, CANVAS_SIZE, CANVAS_SIZE); + + // Restore the context to the state it was before changing transforms and + // adding clipping paths. + ctx.restore(); +} + +/** + * Draws an arrow-bubble rectangle in the provided canvas context. + * + * @param {CanvasRenderingContext2D} ctx + * The 2D canvas context. + * @param {Number} x + * The x-axis origin of the rectangle. + * @param {Number} y + * The y-axis origin of the rectangle. + * @param {Number} width + * The width of the rectangle. + * @param {Number} height + * The height of the rectangle. + * @param {Number} radius + * The radius of the rounding. + * @param {Number} margin + * The distance of the origin point from the pointer. + * @param {Number} arrowSize + * The size of the arrow. + * @param {String} alignment + * The alignment of the rectangle in relation to its position to the grid. + */ +function drawBubbleRect( + ctx, + x, + y, + width, + height, + radius, + margin, + arrowSize, + alignment +) { + let angle = 0; + + if (alignment === "bottom") { + angle = 180; + } else if (alignment === "right") { + angle = 90; + [width, height] = [height, width]; + } else if (alignment === "left") { + [width, height] = [height, width]; + angle = 270; + } + + const originX = x; + const originY = y; + + ctx.save(); + ctx.translate(originX, originY); + ctx.rotate(angle * (Math.PI / 180)); + ctx.translate(-originX, -originY); + ctx.translate(-width / 2, -height - arrowSize - margin); + + // The contour of the bubble is drawn with a path. The canvas context will have taken + // care of transforming the coordinates before calling the function, so we just always + // draw with the arrow pointing down. The top edge has rounded corners too. + ctx.beginPath(); + // Start at the top/left corner (below the rounded corner). + ctx.moveTo(x, y + radius); + // Go down. + ctx.lineTo(x, y + height); + // Go down and the right, to draw the first half of the arrow tip. + ctx.lineTo(x + width / 2, y + height + arrowSize); + // Go back up and to the right, to draw the second half of the arrow tip. + ctx.lineTo(x + width, y + height); + // Go up to just below the top/right rounded corner. + ctx.lineTo(x + width, y + radius); + // Draw the top/right rounded corner. + ctx.arcTo(x + width, y, x + width - radius, y, radius); + // Go to the left. + ctx.lineTo(x + radius, y); + // Draw the top/left rounded corner. + ctx.arcTo(x, y, x, y + radius, radius); + + ctx.stroke(); + ctx.fill(); + + ctx.restore(); +} + +/** + * Draws a line to the context given and applies a transformation matrix if passed. + * + * @param {CanvasRenderingContext2D} ctx + * The 2D canvas context. + * @param {Number} x1 + * The x-axis of the coordinate for the begin of the line. + * @param {Number} y1 + * The y-axis of the coordinate for the begin of the line. + * @param {Number} x2 + * The x-axis of the coordinate for the end of the line. + * @param {Number} y2 + * The y-axis of the coordinate for the end of the line. + * @param {Object} [options] + * The options object. + * @param {Array} [options.matrix=identity()] + * The transformation matrix to apply. + * @param {Array} [options.extendToBoundaries] + * If set, the line will be extended to reach the boundaries specified. + */ +function drawLine(ctx, x1, y1, x2, y2, options) { + const matrix = options.matrix || identity(); + + const p1 = apply(matrix, [x1, y1]); + const p2 = apply(matrix, [x2, y2]); + + x1 = p1[0]; + y1 = p1[1]; + x2 = p2[0]; + y2 = p2[1]; + + if (options.extendToBoundaries) { + if (p1[1] === p2[1]) { + x1 = options.extendToBoundaries[0]; + x2 = options.extendToBoundaries[2]; + } else { + y1 = options.extendToBoundaries[1]; + x1 = ((p2[0] - p1[0]) * (y1 - p1[1])) / (p2[1] - p1[1]) + p1[0]; + y2 = options.extendToBoundaries[3]; + x2 = ((p2[0] - p1[0]) * (y2 - p1[1])) / (p2[1] - p1[1]) + p1[0]; + } + } + + ctx.beginPath(); + ctx.moveTo(Math.round(x1), Math.round(y1)); + ctx.lineTo(Math.round(x2), Math.round(y2)); +} + +/** + * Draws a rect to the context given and applies a transformation matrix if passed. + * The coordinates are the start and end points of the rectangle's diagonal. + * + * @param {CanvasRenderingContext2D} ctx + * The 2D canvas context. + * @param {Number} x1 + * The x-axis coordinate of the rectangle's diagonal start point. + * @param {Number} y1 + * The y-axis coordinate of the rectangle's diagonal start point. + * @param {Number} x2 + * The x-axis coordinate of the rectangle's diagonal end point. + * @param {Number} y2 + * The y-axis coordinate of the rectangle's diagonal end point. + * @param {Array} [matrix=identity()] + * The transformation matrix to apply. + */ +function drawRect(ctx, x1, y1, x2, y2, matrix = identity()) { + const p = getPointsFromDiagonal(x1, y1, x2, y2, matrix); + + ctx.beginPath(); + ctx.moveTo(Math.round(p[0].x), Math.round(p[0].y)); + ctx.lineTo(Math.round(p[1].x), Math.round(p[1].y)); + ctx.lineTo(Math.round(p[2].x), Math.round(p[2].y)); + ctx.lineTo(Math.round(p[3].x), Math.round(p[3].y)); + ctx.closePath(); +} + +/** + * Draws a rounded rectangle in the provided canvas context. + * + * @param {CanvasRenderingContext2D} ctx + * The 2D canvas context. + * @param {Number} x + * The x-axis origin of the rectangle. + * @param {Number} y + * The y-axis origin of the rectangle. + * @param {Number} width + * The width of the rectangle. + * @param {Number} height + * The height of the rectangle. + * @param {Number} radius + * The radius of the rounding. + */ +function drawRoundedRect(ctx, x, y, width, height, radius) { + ctx.beginPath(); + ctx.moveTo(x, y + radius); + ctx.lineTo(x, y + height - radius); + ctx.arcTo(x, y + height, x + radius, y + height, radius); + ctx.lineTo(x + width - radius, y + height); + ctx.arcTo(x + width, y + height, x + width, y + height - radius, radius); + ctx.lineTo(x + width, y + radius); + ctx.arcTo(x + width, y, x + width - radius, y, radius); + ctx.lineTo(x + radius, y); + ctx.arcTo(x, y, x, y + radius, radius); + ctx.stroke(); + ctx.fill(); +} + +/** + * Given an array of four points and returns a DOMRect-like object representing the + * boundaries defined by the four points. + * + * @param {Array} points + * An array with 4 pointer objects {x, y} representing the box quads. + * @return {Object} DOMRect-like object of the 4 points. + */ +function getBoundsFromPoints(points) { + const bounds = {}; + + bounds.left = Math.min(points[0].x, points[1].x, points[2].x, points[3].x); + bounds.right = Math.max(points[0].x, points[1].x, points[2].x, points[3].x); + bounds.top = Math.min(points[0].y, points[1].y, points[2].y, points[3].y); + bounds.bottom = Math.max(points[0].y, points[1].y, points[2].y, points[3].y); + + bounds.x = bounds.left; + bounds.y = bounds.top; + bounds.width = bounds.right - bounds.left; + bounds.height = bounds.bottom - bounds.top; + + return bounds; +} + +/** + * Returns the current matrices for both canvas drawing and SVG taking into account the + * following transformations, in this order: + * 1. The scale given by the display pixel ratio. + * 2. The translation to the top left corner of the element. + * 3. The scale given by the current zoom. + * 4. The translation given by the top and left padding of the element. + * 5. Any CSS transformation applied directly to the element (only 2D + * transformation; the 3D transformation are flattened, see `dom-matrix-2d` module + * for further details.) + * 6. Rotate, translate, and reflect as needed to match the writing mode and text + * direction of the element. + * + * The transformations of the element's ancestors are not currently computed (see + * bug 1355675). + * + * @param {Element} element + * The current element. + * @param {Window} window + * The window object. + * @param {Object} [options.ignoreWritingModeAndTextDirection=false] + * Avoid transforming the current matrix to match the text direction + * and writing mode. + * @return {Object} An object with the following properties: + * - {Array} currentMatrix + * The current matrix. + * - {Boolean} hasNodeTransformations + * true if the node has transformed and false otherwise. + */ +function getCurrentMatrix( + element, + window, + { ignoreWritingModeAndTextDirection } = {} +) { + const computedStyle = getComputedStyle(element); + + const paddingTop = parseFloat(computedStyle.paddingTop); + const paddingRight = parseFloat(computedStyle.paddingRight); + const paddingBottom = parseFloat(computedStyle.paddingBottom); + const paddingLeft = parseFloat(computedStyle.paddingLeft); + const borderTop = parseFloat(computedStyle.borderTopWidth); + const borderRight = parseFloat(computedStyle.borderRightWidth); + const borderBottom = parseFloat(computedStyle.borderBottomWidth); + const borderLeft = parseFloat(computedStyle.borderLeftWidth); + + const nodeMatrix = getNodeTransformationMatrix( + element, + window.document.documentElement + ); + + let currentMatrix = identity(); + let hasNodeTransformations = false; + + // Scale based on the device pixel ratio. + currentMatrix = multiply(currentMatrix, scale(window.devicePixelRatio)); + + // Apply the current node's transformation matrix, relative to the inspected window's + // root element, but only if it's not a identity matrix. + if (isIdentity(nodeMatrix)) { + hasNodeTransformations = false; + } else { + currentMatrix = multiply(currentMatrix, nodeMatrix); + hasNodeTransformations = true; + } + + // Translate the origin based on the node's padding and border values. + currentMatrix = multiply( + currentMatrix, + translate(paddingLeft + borderLeft, paddingTop + borderTop) + ); + + // Adjust as needed to match the writing mode and text direction of the element. + const size = { + width: + element.offsetWidth - + borderLeft - + borderRight - + paddingLeft - + paddingRight, + height: + element.offsetHeight - + borderTop - + borderBottom - + paddingTop - + paddingBottom, + }; + + if (!ignoreWritingModeAndTextDirection) { + const writingModeMatrix = getWritingModeMatrix(size, computedStyle); + if (!isIdentity(writingModeMatrix)) { + currentMatrix = multiply(currentMatrix, writingModeMatrix); + } + } + + return { currentMatrix, hasNodeTransformations }; +} + +/** + * Given an array of four points, returns a string represent a path description. + * + * @param {Array} points + * An array with 4 pointer objects {x, y} representing the box quads. + * @return {String} a Path Description that can be used in svg's <path> element. + */ +function getPathDescriptionFromPoints(points) { + return ( + "M" + + points[0].x + + "," + + points[0].y + + " " + + "L" + + points[1].x + + "," + + points[1].y + + " " + + "L" + + points[2].x + + "," + + points[2].y + + " " + + "L" + + points[3].x + + "," + + points[3].y + ); +} + +/** + * Given the rectangle's diagonal start and end coordinates, returns an array containing + * the four coordinates of a rectangle. If a matrix is provided, applies the matrix + * function to each of the coordinates' value. + * + * @param {Number} x1 + * The x-axis coordinate of the rectangle's diagonal start point. + * @param {Number} y1 + * The y-axis coordinate of the rectangle's diagonal start point. + * @param {Number} x2 + * The x-axis coordinate of the rectangle's diagonal end point. + * @param {Number} y2 + * The y-axis coordinate of the rectangle's diagonal end point. + * @param {Array} [matrix=identity()] + * A transformation matrix to apply. + * @return {Array} the four coordinate points of the given rectangle transformed by the + * matrix given. + */ +function getPointsFromDiagonal(x1, y1, x2, y2, matrix = identity()) { + return [ + [x1, y1], + [x2, y1], + [x2, y2], + [x1, y2], + ].map(point => { + const transformedPoint = apply(matrix, point); + + return { x: transformedPoint[0], y: transformedPoint[1] }; + }); +} + +/** + * Updates the <canvas> element's style in accordance with the current window's + * device pixel ratio, and the position calculated in `getCanvasPosition`. It also + * clears the drawing context. This is called on canvas update after a scroll event where + * `getCanvasPosition` updates the new canvasPosition. + * + * @param {Canvas} canvas + * The <canvas> element. + * @param {Object} canvasPosition + * A pointer object {x, y} representing the <canvas> position to the top left + * corner of the page. + * @param {Number} devicePixelRatio + * The device pixel ratio. + * @param {Window} [options.zoomWindow] + * Optional window object used to calculate zoom (default = undefined). + */ +function updateCanvasElement( + canvas, + canvasPosition, + devicePixelRatio, + { zoomWindow } = {} +) { + let { x, y } = canvasPosition; + const size = CANVAS_SIZE / devicePixelRatio; + + if (zoomWindow) { + const zoom = getCurrentZoom(zoomWindow); + x *= zoom; + y *= zoom; + } + + // Resize the canvas taking the dpr into account so as to have crisp lines, and + // translating it to give the perception that it always covers the viewport. + canvas.setAttribute( + "style", + `width: ${size}px; height: ${size}px; transform: translate(${x}px, ${y}px);` + ); + canvas.getCanvasContext("2d").clearRect(0, 0, CANVAS_SIZE, CANVAS_SIZE); +} + +/** + * Calculates and returns the <canvas>'s position in accordance with the page's scroll, + * document's size, canvas size, and viewport's size. This is called when a page's scroll + * is detected. + * + * @param {Object} canvasPosition + * A pointer object {x, y} representing the <canvas> position to the top left + * corner of the page. + * @param {Object} scrollPosition + * A pointer object {x, y} representing the window's pageXOffset and pageYOffset. + * @param {Window} window + * The window object. + * @param {Object} windowDimensions + * An object {width, height} representing the window's dimensions for the + * `window` given. + * @return {Boolean} true if the <canvas> position was updated and false otherwise. + */ +function updateCanvasPosition( + canvasPosition, + scrollPosition, + window, + windowDimensions +) { + let { x: canvasX, y: canvasY } = canvasPosition; + const { x: scrollX, y: scrollY } = scrollPosition; + const cssCanvasSize = CANVAS_SIZE / window.devicePixelRatio; + const viewportSize = getViewportDimensions(window); + const { height, width } = windowDimensions; + const canvasWidth = cssCanvasSize; + const canvasHeight = cssCanvasSize; + let hasUpdated = false; + + // Those values indicates the relative horizontal and vertical space the page can + // scroll before we have to reposition the <canvas>; they're 1/4 of the delta between + // the canvas' size and the viewport's size: that's because we want to consider both + // sides (top/bottom, left/right; so 1/2 for each side) and also we don't want to + // shown the edges of the canvas in case of fast scrolling (to avoid showing undraw + // areas, therefore another 1/2 here). + const bufferSizeX = (canvasWidth - viewportSize.width) >> 2; + const bufferSizeY = (canvasHeight - viewportSize.height) >> 2; + + // Defines the boundaries for the canvas. + const leftBoundary = 0; + const rightBoundary = width - canvasWidth; + const topBoundary = 0; + const bottomBoundary = height - canvasHeight; + + // Defines the thresholds that triggers the canvas' position to be updated. + const leftThreshold = scrollX - bufferSizeX; + const rightThreshold = + scrollX - canvasWidth + viewportSize.width + bufferSizeX; + const topThreshold = scrollY - bufferSizeY; + const bottomThreshold = + scrollY - canvasHeight + viewportSize.height + bufferSizeY; + + if (canvasX < rightBoundary && canvasX < rightThreshold) { + canvasX = Math.min(leftThreshold, rightBoundary); + hasUpdated = true; + } else if (canvasX > leftBoundary && canvasX > leftThreshold) { + canvasX = Math.max(rightThreshold, leftBoundary); + hasUpdated = true; + } + + if (canvasY < bottomBoundary && canvasY < bottomThreshold) { + canvasY = Math.min(topThreshold, bottomBoundary); + hasUpdated = true; + } else if (canvasY > topBoundary && canvasY > topThreshold) { + canvasY = Math.max(bottomThreshold, topBoundary); + hasUpdated = true; + } + + // Update the canvas position with the calculated canvasX and canvasY positions. + canvasPosition.x = canvasX; + canvasPosition.y = canvasY; + + return hasUpdated; +} + +exports.CANVAS_SIZE = CANVAS_SIZE; +exports.DEFAULT_COLOR = DEFAULT_COLOR; +exports.clearRect = clearRect; +exports.drawBubbleRect = drawBubbleRect; +exports.drawLine = drawLine; +exports.drawRect = drawRect; +exports.drawRoundedRect = drawRoundedRect; +exports.getBoundsFromPoints = getBoundsFromPoints; +exports.getCurrentMatrix = getCurrentMatrix; +exports.getPathDescriptionFromPoints = getPathDescriptionFromPoints; +exports.getPointsFromDiagonal = getPointsFromDiagonal; +exports.updateCanvasElement = updateCanvasElement; +exports.updateCanvasPosition = updateCanvasPosition; diff --git a/devtools/server/actors/highlighters/utils/markup.js b/devtools/server/actors/highlighters/utils/markup.js new file mode 100644 index 0000000000..a550ca0076 --- /dev/null +++ b/devtools/server/actors/highlighters/utils/markup.js @@ -0,0 +1,787 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const { + getCurrentZoom, + getWindowDimensions, + getViewportDimensions, +} = require("resource://devtools/shared/layout/utils.js"); +const EventEmitter = require("resource://devtools/shared/event-emitter.js"); + +const lazyContainer = {}; + +loader.lazyRequireGetter( + lazyContainer, + "CssLogic", + "resource://devtools/server/actors/inspector/css-logic.js", + true +); +loader.lazyRequireGetter( + this, + "isDocumentReady", + "resource://devtools/server/actors/inspector/utils.js", + true +); + +exports.getComputedStyle = node => + lazyContainer.CssLogic.getComputedStyle(node); + +exports.getBindingElementAndPseudo = node => + lazyContainer.CssLogic.getBindingElementAndPseudo(node); + +exports.hasPseudoClassLock = (...args) => + InspectorUtils.hasPseudoClassLock(...args); + +exports.addPseudoClassLock = (...args) => + InspectorUtils.addPseudoClassLock(...args); + +exports.removePseudoClassLock = (...args) => + InspectorUtils.removePseudoClassLock(...args); + +const SVG_NS = "http://www.w3.org/2000/svg"; +const XHTML_NS = "http://www.w3.org/1999/xhtml"; +const XUL_NS = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"; +const STYLESHEET_URI = + "resource://devtools-highlighter-styles/highlighters.css"; + +const _tokens = Symbol("classList/tokens"); + +/** + * Shims the element's `classList` for anonymous content elements; used + * internally by `CanvasFrameAnonymousContentHelper.getElement()` method. + */ +function ClassList(className) { + const trimmed = (className || "").trim(); + this[_tokens] = trimmed ? trimmed.split(/\s+/) : []; +} + +ClassList.prototype = { + item(index) { + return this[_tokens][index]; + }, + contains(token) { + return this[_tokens].includes(token); + }, + add(token) { + if (!this.contains(token)) { + this[_tokens].push(token); + } + EventEmitter.emit(this, "update"); + }, + remove(token) { + const index = this[_tokens].indexOf(token); + + if (index > -1) { + this[_tokens].splice(index, 1); + } + EventEmitter.emit(this, "update"); + }, + toggle(token, force) { + // If force parameter undefined retain the toggle behavior + if (force === undefined) { + if (this.contains(token)) { + this.remove(token); + } else { + this.add(token); + } + } else if (force) { + // If force is true, enforce token addition + this.add(token); + } else { + // If force is falsy value, enforce token removal + this.remove(token); + } + }, + get length() { + return this[_tokens].length; + }, + *[Symbol.iterator]() { + for (let i = 0; i < this.tokens.length; i++) { + yield this[_tokens][i]; + } + }, + toString() { + return this[_tokens].join(" "); + }, +}; + +/** + * Is this content window a XUL window? + * @param {Window} window + * @return {Boolean} + */ +function isXUL(window) { + return window.document.documentElement.namespaceURI === XUL_NS; +} +exports.isXUL = isXUL; + +/** + * Returns true if a DOM node is "valid", where "valid" means that the node isn't a dead + * object wrapper, is still attached to a document, and is of a given type. + * @param {DOMNode} node + * @param {Number} nodeType Optional, defaults to ELEMENT_NODE + * @return {Boolean} + */ +function isNodeValid(node, nodeType = Node.ELEMENT_NODE) { + // Is it still alive? + if (!node || Cu.isDeadWrapper(node)) { + return false; + } + + // Is it of the right type? + if (node.nodeType !== nodeType) { + return false; + } + + // Is its document accessible? + const doc = node.nodeType === Node.DOCUMENT_NODE ? node : node.ownerDocument; + if (!doc || !doc.defaultView) { + return false; + } + + // Is the node connected to the document? + if (!node.isConnected) { + return false; + } + + return true; +} +exports.isNodeValid = isNodeValid; + +/** + * Every highlighters should insert their markup content into the document's + * canvasFrame anonymous content container (see dom/webidl/Document.webidl). + * + * Since this container gets cleared when the document navigates, highlighters + * should use this helper to have their markup content automatically re-inserted + * in the new document. + * + * Since the markup content is inserted in the canvasFrame using + * insertAnonymousContent, this means that it can be modified using the API + * described in AnonymousContent.webidl. + * To retrieve the AnonymousContent instance, use the content getter. + * + * @param {HighlighterEnv} highlighterEnv + * The environemnt which windows will be used to insert the node. + * @param {Function} nodeBuilder + * A function that, when executed, returns a DOM node to be inserted into + * the canvasFrame. + * @param {Object} options + * @param {Boolean} options.waitForDocumentToLoad + * Set to false to try to insert the anonymous content even if the document + * isn't loaded yet. Defaults to true. + */ +function CanvasFrameAnonymousContentHelper( + highlighterEnv, + nodeBuilder, + { waitForDocumentToLoad = true } = {} +) { + this.highlighterEnv = highlighterEnv; + this.nodeBuilder = nodeBuilder; + this.waitForDocumentToLoad = !!waitForDocumentToLoad; + + this._onWindowReady = this._onWindowReady.bind(this); + this.highlighterEnv.on("window-ready", this._onWindowReady); + + this.listeners = new Map(); + this.elements = new Map(); +} + +CanvasFrameAnonymousContentHelper.prototype = { + initialize() { + // _insert will resolve this promise once the markup is displayed + const onInitialized = new Promise(resolve => { + this._initialized = resolve; + }); + // Only try to create the highlighter when the document is loaded, + // otherwise, wait for the window-ready event to fire. + const doc = this.highlighterEnv.document; + if ( + doc.documentElement && + (!this.waitForDocumentToLoad || + isDocumentReady(doc) || + doc.readyState !== "uninitialized") + ) { + this._insert(); + } + + return onInitialized; + }, + + destroy() { + this._remove(); + + this.highlighterEnv.off("window-ready", this._onWindowReady); + this.highlighterEnv = this.nodeBuilder = this._content = null; + this.anonymousContentDocument = null; + this.anonymousContentWindow = null; + this.pageListenerTarget = null; + + this._removeAllListeners(); + this.elements.clear(); + }, + + async _insert() { + if (this.waitForDocumentToLoad) { + await waitForContentLoaded(this.highlighterEnv.window); + } + if (!this.highlighterEnv) { + // CanvasFrameAnonymousContentHelper was already destroyed. + return; + } + + // Highlighters are drawn inside the anonymous content of the + // highlighter environment document. + this.anonymousContentDocument = this.highlighterEnv.document; + this.anonymousContentWindow = this.highlighterEnv.window; + this.pageListenerTarget = this.highlighterEnv.pageListenerTarget; + + // It was stated that hidden documents don't accept + // `insertAnonymousContent` calls yet. That doesn't seems the case anymore, + // at least on desktop. Therefore, removing the code that was dealing with + // that scenario, fixes when we're adding anonymous content in a tab that + // is not the active one (see bug 1260043 and bug 1260044) + try { + // If we didn't wait for the document to load, we want to force a layout update + // to ensure the anonymous content will be rendered (see Bug 1580394). + const forceSynchronousLayoutUpdate = !this.waitForDocumentToLoad; + this._content = this.anonymousContentDocument.insertAnonymousContent( + forceSynchronousLayoutUpdate + ); + } catch (e) { + // If the `insertAnonymousContent` fails throwing a `NS_ERROR_UNEXPECTED`, it means + // we don't have access to a `CustomContentContainer` yet (see bug 1365075). + // At this point, it could only happen on document's interactive state, and we + // need to wait until the `complete` state before inserting the anonymous content + // again. + if ( + e.result === Cr.NS_ERROR_UNEXPECTED && + this.anonymousContentDocument.readyState === "interactive" + ) { + // The next state change will be "complete" since the current is "interactive" + await new Promise(resolve => { + this.anonymousContentDocument.addEventListener( + "readystatechange", + resolve, + { once: true } + ); + }); + this._content = this.anonymousContentDocument.insertAnonymousContent(); + } else { + throw e; + } + } + + // Use createElementNS to make sure this is an HTML element. + // Document.createElement's behavior is different between SVG and HTML + // documents, see bug 1850007. + const link = this.anonymousContentDocument.createElementNS( + XHTML_NS, + "link" + ); + link.href = STYLESHEET_URI; + link.rel = "stylesheet"; + this._content.root.appendChild(link); + this._content.root.appendChild(this.nodeBuilder()); + + this._initialized(); + }, + + _remove() { + try { + this.anonymousContentDocument.removeAnonymousContent(this._content); + } catch (e) { + // If the current window isn't the one the content was inserted into, this + // will fail, but that's fine. + } + }, + + /** + * The "window-ready" event can be triggered when: + * - a new window is created + * - a window is unfrozen from bfcache + * - when first attaching to a page + * - when swapping frame loaders (moving tabs, toggling RDM) + */ + _onWindowReady({ isTopLevel }) { + if (isTopLevel) { + this._removeAllListeners(); + this.elements.clear(); + this._insert(); + } + }, + + _getNodeById(id) { + return this.content?.root.getElementById(id); + }, + + getBoundingClientRect(id) { + const node = this._getNodeById(id); + if (!node) { + return null; + } + return node.getBoundingClientRect(); + }, + + getComputedStylePropertyValue(id, property) { + const node = this._getNodeById(id); + if (!node) { + return null; + } + return this.anonymousContentWindow + .getComputedStyle(node) + .getPropertyValue(property); + }, + + getTextContentForElement(id) { + return this._getNodeById(id)?.textContent; + }, + + setTextContentForElement(id, text) { + const node = this._getNodeById(id); + if (!node) { + return; + } + node.textContent = text; + }, + + setAttributeForElement(id, name, value) { + this._getNodeById(id)?.setAttribute(name, value); + }, + + getAttributeForElement(id, name) { + return this._getNodeById(id)?.getAttribute(name); + }, + + removeAttributeForElement(id, name) { + this._getNodeById(id)?.removeAttribute(name); + }, + + hasAttributeForElement(id, name) { + return typeof this.getAttributeForElement(id, name) === "string"; + }, + + getCanvasContext(id, type = "2d") { + return this._getNodeById(id)?.getContext(type); + }, + + /** + * Add an event listener to one of the elements inserted in the canvasFrame + * native anonymous container. + * Like other methods in this helper, this requires the ID of the element to + * be passed in. + * + * Note that if the content page navigates, the event listeners won't be + * added again. + * + * Also note that unlike traditional DOM events, the events handled by + * listeners added here will propagate through the document only through + * bubbling phase, so the useCapture parameter isn't supported. + * It is possible however to call e.stopPropagation() to stop the bubbling. + * + * IMPORTANT: the chrome-only canvasFrame insertion API takes great care of + * not leaking references to inserted elements to chrome JS code. That's + * because otherwise, chrome JS code could freely modify native anon elements + * inside the canvasFrame and probably change things that are assumed not to + * change by the C++ code managing this frame. + * See https://wiki.mozilla.org/DevTools/Highlighter#The_AnonymousContent_API + * Unfortunately, the inserted nodes are still available via + * event.originalTarget, and that's what the event handler here uses to check + * that the event actually occured on the right element, but that also means + * consumers of this code would be able to access the inserted elements. + * Therefore, the originalTarget property will be nullified before the event + * is passed to your handler. + * + * IMPL DETAIL: A single event listener is added per event types only, at + * browser level and if the event originalTarget is found to have the provided + * ID, the callback is executed (and then IDs of parent nodes of the + * originalTarget are checked too). + * + * @param {String} id + * @param {String} type + * @param {Function} handler + */ + addEventListenerForElement(id, type, handler) { + if (typeof id !== "string") { + throw new Error( + "Expected a string ID in addEventListenerForElement but" + " got: " + id + ); + } + + // If no one is listening for this type of event yet, add one listener. + if (!this.listeners.has(type)) { + const target = this.pageListenerTarget; + target.addEventListener(type, this, true); + // Each type entry in the map is a map of ids:handlers. + this.listeners.set(type, new Map()); + } + + const listeners = this.listeners.get(type); + listeners.set(id, handler); + }, + + /** + * Remove an event listener from one of the elements inserted in the + * canvasFrame native anonymous container. + * @param {String} id + * @param {String} type + */ + removeEventListenerForElement(id, type) { + const listeners = this.listeners.get(type); + if (!listeners) { + return; + } + listeners.delete(id); + + // If no one is listening for event type anymore, remove the listener. + if (!this.listeners.has(type)) { + const target = this.pageListenerTarget; + target.removeEventListener(type, this, true); + } + }, + + handleEvent(event) { + const listeners = this.listeners.get(event.type); + if (!listeners) { + return; + } + + // Hide the originalTarget property to avoid exposing references to native + // anonymous elements. See addEventListenerForElement's comment. + let isPropagationStopped = false; + const eventProxy = new Proxy(event, { + get: (obj, name) => { + if (name === "originalTarget") { + return null; + } else if (name === "stopPropagation") { + return () => { + isPropagationStopped = true; + }; + } + return obj[name]; + }, + }); + + // Start at originalTarget, bubble through ancestors and call handlers when + // needed. + let node = event.originalTarget; + while (node) { + const handler = listeners.get(node.id); + if (handler) { + handler(eventProxy, node.id); + if (isPropagationStopped) { + break; + } + } + node = node.parentNode; + } + }, + + _removeAllListeners() { + if (this.pageListenerTarget) { + const target = this.pageListenerTarget; + for (const [type] of this.listeners) { + target.removeEventListener(type, this, true); + } + } + this.listeners.clear(); + }, + + getElement(id) { + if (this.elements.has(id)) { + return this.elements.get(id); + } + + const classList = new ClassList(this.getAttributeForElement(id, "class")); + + EventEmitter.on(classList, "update", () => { + this.setAttributeForElement(id, "class", classList.toString()); + }); + + const element = { + getTextContent: () => this.getTextContentForElement(id), + setTextContent: text => this.setTextContentForElement(id, text), + setAttribute: (name, val) => this.setAttributeForElement(id, name, val), + getAttribute: name => this.getAttributeForElement(id, name), + removeAttribute: name => this.removeAttributeForElement(id, name), + hasAttribute: name => this.hasAttributeForElement(id, name), + getCanvasContext: type => this.getCanvasContext(id, type), + addEventListener: (type, handler) => { + return this.addEventListenerForElement(id, type, handler); + }, + removeEventListener: (type, handler) => { + return this.removeEventListenerForElement(id, type, handler); + }, + computedStyle: { + getPropertyValue: property => + this.getComputedStylePropertyValue(id, property), + }, + classList, + }; + + this.elements.set(id, element); + + return element; + }, + + get content() { + if (!this._content || Cu.isDeadWrapper(this._content)) { + return null; + } + return this._content; + }, + + /** + * The canvasFrame anonymous content container gets zoomed in/out with the + * page. If this is unwanted, i.e. if you want the inserted element to remain + * unzoomed, then this method can be used. + * + * Consumers of the CanvasFrameAnonymousContentHelper should call this method, + * it isn't executed automatically. Typically, AutoRefreshHighlighter can call + * it when _update is executed. + * + * The matching element will be scaled down or up by 1/zoomLevel (using css + * transform) to cancel the current zoom. The element's width and height + * styles will also be set according to the scale. Finally, the element's + * position will be set as absolute. + * + * Note that if the matching element already has an inline style attribute, it + * *won't* be preserved. + * + * @param {DOMNode} node This node is used to determine which container window + * should be used to read the current zoom value. + * @param {String} id The ID of the root element inserted with this API. + */ + scaleRootElement(node, id) { + const boundaryWindow = this.highlighterEnv.window; + const zoom = getCurrentZoom(node); + // Hide the root element and force the reflow in order to get the proper window's + // dimensions without increasing them. + const root = this._getNodeById(id); + root.style.display = "none"; + node.offsetWidth; + + let { width, height } = getWindowDimensions(boundaryWindow); + let value = ""; + + if (zoom !== 1) { + value = `transform-origin:top left; transform:scale(${1 / zoom}); `; + width *= zoom; + height *= zoom; + } + + value += `position:absolute; width:${width}px;height:${height}px; overflow:hidden;`; + root.style = value; + }, + + /** + * Helper function that creates SVG DOM nodes. + * @param {Object} Options for the node include: + * - nodeType: the type of node, defaults to "box". + * - attributes: a {name:value} object to be used as attributes for the node. + * - prefix: a string that will be used to prefix the values of the id and class + * attributes. + * - parent: if provided, the newly created element will be appended to this + * node. + */ + createSVGNode(options) { + if (!options.nodeType) { + options.nodeType = "box"; + } + + options.namespace = SVG_NS; + + return this.createNode(options); + }, + + /** + * Helper function that creates DOM nodes. + * @param {Object} Options for the node include: + * - nodeType: the type of node, defaults to "div". + * - namespace: the namespace to use to create the node, defaults to XHTML namespace. + * - attributes: a {name:value} object to be used as attributes for the node. + * - prefix: a string that will be used to prefix the values of the id and class + * attributes. + * - parent: if provided, the newly created element will be appended to this + * node. + * - text: if provided, set the text content of the element. + */ + createNode(options) { + const type = options.nodeType || "div"; + const namespace = options.namespace || XHTML_NS; + const doc = this.anonymousContentDocument; + + const node = doc.createElementNS(namespace, type); + + for (const name in options.attributes || {}) { + let value = options.attributes[name]; + if (options.prefix && (name === "class" || name === "id")) { + value = options.prefix + value; + } + node.setAttribute(name, value); + } + + if (options.parent) { + options.parent.appendChild(node); + } + + if (options.text) { + node.appendChild(doc.createTextNode(options.text)); + } + + return node; + }, +}; +exports.CanvasFrameAnonymousContentHelper = CanvasFrameAnonymousContentHelper; + +/** + * Wait for document readyness. + * @param {Object} iframeOrWindow + * IFrame or Window for which the content should be loaded. + */ +function waitForContentLoaded(iframeOrWindow) { + let loadEvent = "DOMContentLoaded"; + // If we are waiting for an iframe to load and it is for a XUL window + // highlighter that is not browser toolbox, we must wait for IFRAME's "load". + if ( + iframeOrWindow.contentWindow && + iframeOrWindow.ownerGlobal !== + iframeOrWindow.contentWindow.browsingContext.topChromeWindow + ) { + loadEvent = "load"; + } + + const doc = iframeOrWindow.contentDocument || iframeOrWindow.document; + if (isDocumentReady(doc)) { + return Promise.resolve(); + } + + return new Promise(resolve => { + iframeOrWindow.addEventListener(loadEvent, resolve, { once: true }); + }); +} + +/** + * Move the infobar to the right place in the highlighter. This helper method is utilized + * in both css-grid.js and box-model.js to help position the infobar in an appropriate + * space over the highlighted node element or grid area. The infobar is used to display + * relevant information about the highlighted item (ex, node or grid name and dimensions). + * + * This method will first try to position the infobar to top or bottom of the container + * such that it has enough space for the height of the infobar. Afterwards, it will try + * to horizontally center align with the container element if possible. + * + * @param {DOMNode} container + * The container element which will be used to position the infobar. + * @param {Object} bounds + * The content bounds of the container element. + * @param {Window} win + * The window object. + * @param {Object} [options={}] + * Advanced options for the infobar. + * @param {String} options.position + * Force the infobar to be displayed either on "top" or "bottom". Any other value + * will be ingnored. + */ +function moveInfobar(container, bounds, win, options = {}) { + const zoom = getCurrentZoom(win); + const viewport = getViewportDimensions(win); + + const { computedStyle } = container; + + const margin = 2; + const arrowSize = parseFloat( + computedStyle.getPropertyValue("--highlighter-bubble-arrow-size") + ); + const containerHeight = parseFloat(computedStyle.getPropertyValue("height")); + const containerWidth = parseFloat(computedStyle.getPropertyValue("width")); + const containerHalfWidth = containerWidth / 2; + + const viewportWidth = viewport.width * zoom; + const viewportHeight = viewport.height * zoom; + let { pageXOffset, pageYOffset } = win; + + pageYOffset *= zoom; + pageXOffset *= zoom; + + // Defines the boundaries for the infobar. + const topBoundary = margin; + const bottomBoundary = viewportHeight - containerHeight - margin - 1; + const leftBoundary = containerHalfWidth + margin; + const rightBoundary = viewportWidth - containerHalfWidth - margin; + + // Set the default values. + let top = bounds.y - containerHeight - arrowSize; + const bottom = bounds.bottom + margin + arrowSize; + let left = bounds.x + bounds.width / 2; + let isOverlapTheNode = false; + let positionAttribute = "top"; + let position = "absolute"; + + // Here we start the math. + // We basically want to position absolutely the infobar, except when is pointing to a + // node that is offscreen or partially offscreen, in a way that the infobar can't + // be placed neither on top nor on bottom. + // In such cases, the infobar will overlap the node, and to limit the latency given + // by APZ (See Bug 1312103) it will be positioned as "fixed". + // It's a sort of "position: sticky" (but positioned as absolute instead of relative). + const canBePlacedOnTop = top >= pageYOffset; + const canBePlacedOnBottom = bottomBoundary + pageYOffset - bottom > 0; + const forcedOnTop = options.position === "top"; + const forcedOnBottom = options.position === "bottom"; + + if ( + (!canBePlacedOnTop && canBePlacedOnBottom && !forcedOnTop) || + forcedOnBottom + ) { + top = bottom; + positionAttribute = "bottom"; + } + + const isOffscreenOnTop = top < topBoundary + pageYOffset; + const isOffscreenOnBottom = top > bottomBoundary + pageYOffset; + const isOffscreenOnLeft = left < leftBoundary + pageXOffset; + const isOffscreenOnRight = left > rightBoundary + pageXOffset; + + if (isOffscreenOnTop) { + top = topBoundary; + isOverlapTheNode = true; + } else if (isOffscreenOnBottom) { + top = bottomBoundary; + isOverlapTheNode = true; + } else if (isOffscreenOnLeft || isOffscreenOnRight) { + isOverlapTheNode = true; + top -= pageYOffset; + } + + if (isOverlapTheNode) { + left = Math.min(Math.max(leftBoundary, left - pageXOffset), rightBoundary); + + position = "fixed"; + container.setAttribute("hide-arrow", "true"); + } else { + position = "absolute"; + container.removeAttribute("hide-arrow"); + } + + // We need to scale the infobar Independently from the highlighter's container; + // otherwise the `position: fixed` won't work, since "any value other than `none` for + // the transform, results in the creation of both a stacking context and a containing + // block. The object acts as a containing block for fixed positioned descendants." + // (See https://www.w3.org/TR/css-transforms-1/#transform-rendering) + // We also need to shift the infobar 50% to the left in order for it to appear centered + // on the element it points to. + container.setAttribute( + "style", + ` + position:${position}; + transform-origin: 0 0; + transform: scale(${1 / zoom}) translate(calc(${left}px - 50%), ${top}px)` + ); + + container.setAttribute("position", positionAttribute); +} +exports.moveInfobar = moveInfobar; diff --git a/devtools/server/actors/highlighters/utils/moz.build b/devtools/server/actors/highlighters/utils/moz.build new file mode 100644 index 0000000000..ab4f96912d --- /dev/null +++ b/devtools/server/actors/highlighters/utils/moz.build @@ -0,0 +1,7 @@ +# -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*- +# vim: set filetype=python: +# 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/. + +DevToolsModules("accessibility.js", "canvas.js", "markup.js") diff --git a/devtools/server/actors/highlighters/viewport-size.js b/devtools/server/actors/highlighters/viewport-size.js new file mode 100644 index 0000000000..4c85a305ca --- /dev/null +++ b/devtools/server/actors/highlighters/viewport-size.js @@ -0,0 +1,129 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const EventEmitter = require("resource://devtools/shared/event-emitter.js"); +const { + setIgnoreLayoutChanges, +} = require("resource://devtools/shared/layout/utils.js"); +const { + CanvasFrameAnonymousContentHelper, +} = require("resource://devtools/server/actors/highlighters/utils/markup.js"); + +/** + * The ViewportSizeHighlighter is a class that displays the viewport + * width and height on a small overlay on the top right edge of the page + * while the rulers are turned on. + */ +class ViewportSizeHighlighter { + constructor(highlighterEnv) { + this.env = highlighterEnv; + this.markup = new CanvasFrameAnonymousContentHelper( + highlighterEnv, + this._buildMarkup.bind(this) + ); + this.isReady = this.markup.initialize(); + + const { pageListenerTarget } = highlighterEnv; + pageListenerTarget.addEventListener("pagehide", this); + } + + ID_CLASS_PREFIX = "viewport-size-highlighter-"; + + _buildMarkup() { + const prefix = this.ID_CLASS_PREFIX; + + const container = this.markup.createNode({ + attributes: { class: "highlighter-container" }, + }); + + this.markup.createNode({ + parent: container, + attributes: { + class: "viewport-infobar-container", + id: "viewport-infobar-container", + position: "top", + }, + prefix, + }); + + return container; + } + + handleEvent(event) { + switch (event.type) { + case "pagehide": + // If a page hide event is triggered for current window's highlighter, hide the + // highlighter. + if (event.target.defaultView === this.env.window) { + this.destroy(); + } + break; + } + } + + _update() { + const { window } = this.env; + + setIgnoreLayoutChanges(true); + + this.updateViewportInfobar(); + + setIgnoreLayoutChanges(false, window.document.documentElement); + + this._rafID = window.requestAnimationFrame(() => this._update()); + } + + _cancelUpdate() { + if (this._rafID) { + this.env.window.cancelAnimationFrame(this._rafID); + this._rafID = 0; + } + } + + updateViewportInfobar() { + const { window } = this.env; + const { innerHeight, innerWidth } = window; + const infobarId = this.ID_CLASS_PREFIX + "viewport-infobar-container"; + const textContent = innerWidth + "px \u00D7 " + innerHeight + "px"; + this.markup.getElement(infobarId).setTextContent(textContent); + } + + destroy() { + this.hide(); + + const { pageListenerTarget } = this.env; + + if (pageListenerTarget) { + pageListenerTarget.removeEventListener("pagehide", this); + } + + this.markup.destroy(); + + EventEmitter.emit(this, "destroy"); + } + + show() { + this.markup.removeAttributeForElement( + this.ID_CLASS_PREFIX + "viewport-infobar-container", + "hidden" + ); + + this._update(); + + return true; + } + + hide() { + this.markup.setAttributeForElement( + this.ID_CLASS_PREFIX + "viewport-infobar-container", + "hidden", + "true" + ); + + this._cancelUpdate(); + } +} +exports.ViewportSizeHighlighter = ViewportSizeHighlighter; diff --git a/devtools/server/actors/inspector/constants.js b/devtools/server/actors/inspector/constants.js new file mode 100644 index 0000000000..c253c67b02 --- /dev/null +++ b/devtools/server/actors/inspector/constants.js @@ -0,0 +1,17 @@ +/* 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"; + +/** + * Any event listener flagged with this symbol will not be considered when + * the EventCollector class enumerates listeners for nodes. For example: + * + * const someListener = () => {}; + * someListener[EXCLUDED_LISTENER] = true; + * eventListenerService.addSystemEventListener(node, "event", someListener); + */ +const EXCLUDED_LISTENER = Symbol("event-collector-excluded-listener"); + +exports.EXCLUDED_LISTENER = EXCLUDED_LISTENER; diff --git a/devtools/server/actors/inspector/css-logic.js b/devtools/server/actors/inspector/css-logic.js new file mode 100644 index 0000000000..8ef0978915 --- /dev/null +++ b/devtools/server/actors/inspector/css-logic.js @@ -0,0 +1,1604 @@ +/* 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/. */ + +/* + * About the objects defined in this file: + * - CssLogic contains style information about a view context. It provides + * access to 2 sets of objects: Css[Sheet|Rule|Selector] provide access to + * information that does not change when the selected element changes while + * Css[Property|Selector]Info provide information that is dependent on the + * selected element. + * Its key methods are highlight(), getPropertyInfo() and forEachSheet(), etc + * + * - CssSheet provides a more useful API to a DOM CSSSheet for our purposes, + * including shortSource and href. + * - CssRule a more useful API to a DOM CSSRule including access to the group + * of CssSelectors that the rule provides properties for + * - CssSelector A single selector - i.e. not a selector group. In other words + * a CssSelector does not contain ','. This terminology is different from the + * standard DOM API, but more inline with the definition in the spec. + * + * - CssPropertyInfo contains style information for a single property for the + * highlighted element. + * - CssSelectorInfo is a wrapper around CssSelector, which adds sorting with + * reference to the selected element. + */ + +"use strict"; + +const nodeConstants = require("resource://devtools/shared/dom-node-constants.js"); +const { + getBindingElementAndPseudo, + getCSSStyleRules, + hasVisitedState, + isAgentStylesheet, + isAuthorStylesheet, + isUserStylesheet, + shortSource, + FILTER, + STATUS, +} = require("resource://devtools/shared/inspector/css-logic.js"); + +const COMPAREMODE = { + BOOLEAN: "bool", + INTEGER: "int", +}; + +class CssLogic { + constructor() { + this._propertyInfos = {}; + } + + // Both setup by highlight(). + viewedElement = null; + viewedDocument = null; + + // The cache of the known sheets. + _sheets = null; + + // Have the sheets been cached? + _sheetsCached = false; + + // The total number of rules, in all stylesheets, after filtering. + _ruleCount = 0; + + // The computed styles for the viewedElement. + _computedStyle = null; + + // Source filter. Only display properties coming from the given source + _sourceFilter = FILTER.USER; + + // Used for tracking unique CssSheet/CssRule/CssSelector objects, in a run of + // processMatchedSelectors(). + _passId = 0; + + // Used for tracking matched CssSelector objects. + _matchId = 0; + + _matchedRules = null; + _matchedSelectors = null; + + // Cached keyframes rules in all stylesheets + _keyframesRules = null; + + /** + * Reset various properties + */ + reset() { + this._propertyInfos = {}; + this._ruleCount = 0; + this._sheetIndex = 0; + this._sheets = {}; + this._sheetsCached = false; + this._matchedRules = null; + this._matchedSelectors = null; + this._keyframesRules = []; + } + + /** + * Focus on a new element - remove the style caches. + * + * @param {Element} aViewedElement the element the user has highlighted + * in the Inspector. + */ + highlight(viewedElement) { + if (!viewedElement) { + this.viewedElement = null; + this.viewedDocument = null; + this._computedStyle = null; + this.reset(); + return; + } + + if (viewedElement === this.viewedElement) { + return; + } + + this.viewedElement = viewedElement; + + const doc = this.viewedElement.ownerDocument; + if (doc != this.viewedDocument) { + // New document: clear/rebuild the cache. + this.viewedDocument = doc; + + // Hunt down top level stylesheets, and cache them. + this._cacheSheets(); + } else { + // Clear cached data in the CssPropertyInfo objects. + this._propertyInfos = {}; + } + + this._matchedRules = null; + this._matchedSelectors = null; + this._computedStyle = CssLogic.getComputedStyle(this.viewedElement); + } + + /** + * Get the values of all the computed CSS properties for the highlighted + * element. + * @returns {object} The computed CSS properties for a selected element + */ + get computedStyle() { + return this._computedStyle; + } + + /** + * Get the source filter. + * @returns {string} The source filter being used. + */ + get sourceFilter() { + return this._sourceFilter; + } + + /** + * Source filter. Only display properties coming from the given source (web + * address). Note that in order to avoid information overload we DO NOT show + * unmatched system rules. + * @see FILTER.* + */ + set sourceFilter(value) { + const oldValue = this._sourceFilter; + this._sourceFilter = value; + + let ruleCount = 0; + + // Update the CssSheet objects. + this.forEachSheet(function (sheet) { + if (sheet.authorSheet && sheet.sheetAllowed) { + ruleCount += sheet.ruleCount; + } + }, this); + + this._ruleCount = ruleCount; + + // Full update is needed because the this.processMatchedSelectors() method + // skips UA stylesheets if the filter does not allow such sheets. + const needFullUpdate = oldValue == FILTER.UA || value == FILTER.UA; + + if (needFullUpdate) { + this._matchedRules = null; + this._matchedSelectors = null; + this._propertyInfos = {}; + } else { + // Update the CssPropertyInfo objects. + for (const property in this._propertyInfos) { + this._propertyInfos[property].needRefilter = true; + } + } + } + + /** + * Return a CssPropertyInfo data structure for the currently viewed element + * and the specified CSS property. If there is no currently viewed element we + * return an empty object. + * + * @param {string} property The CSS property to look for. + * @return {CssPropertyInfo} a CssPropertyInfo structure for the given + * property. + */ + getPropertyInfo(property) { + if (!this.viewedElement) { + return {}; + } + + let info = this._propertyInfos[property]; + if (!info) { + info = new CssPropertyInfo(this, property); + this._propertyInfos[property] = info; + } + + return info; + } + + /** + * Cache all the stylesheets in the inspected document + * @private + */ + _cacheSheets() { + this._passId++; + this.reset(); + + // styleSheets isn't an array, but forEach can work on it anyway + const styleSheets = InspectorUtils.getAllStyleSheets( + this.viewedDocument, + true + ); + Array.prototype.forEach.call(styleSheets, this._cacheSheet, this); + + this._sheetsCached = true; + } + + /** + * Cache a stylesheet if it falls within the requirements: if it's enabled, + * and if the @media is allowed. This method also walks through the stylesheet + * cssRules to find @imported rules, to cache the stylesheets of those rules + * as well. In addition, the @keyframes rules in the stylesheet are cached. + * + * @private + * @param {CSSStyleSheet} domSheet the CSSStyleSheet object to cache. + */ + _cacheSheet(domSheet) { + if (domSheet.disabled) { + return; + } + + // Only work with stylesheets that have their media allowed. + if (!this.mediaMatches(domSheet)) { + return; + } + + // Cache the sheet. + const cssSheet = this.getSheet(domSheet, this._sheetIndex++); + if (cssSheet._passId != this._passId) { + cssSheet._passId = this._passId; + + // Find import and keyframes rules. + for (const aDomRule of cssSheet.getCssRules()) { + const ruleClassName = ChromeUtils.getClassName(aDomRule); + if ( + ruleClassName === "CSSImportRule" && + aDomRule.styleSheet && + this.mediaMatches(aDomRule) + ) { + this._cacheSheet(aDomRule.styleSheet); + } else if (ruleClassName === "CSSKeyframesRule") { + this._keyframesRules.push(aDomRule); + } + } + } + } + + /** + * Retrieve the list of stylesheets in the document. + * + * @return {array} the list of stylesheets in the document. + */ + get sheets() { + if (!this._sheetsCached) { + this._cacheSheets(); + } + + const sheets = []; + this.forEachSheet(function (sheet) { + if (sheet.authorSheet) { + sheets.push(sheet); + } + }, this); + + return sheets; + } + + /** + * Retrieve the list of keyframes rules in the document. + * + * @ return {array} the list of keyframes rules in the document. + */ + get keyframesRules() { + if (!this._sheetsCached) { + this._cacheSheets(); + } + return this._keyframesRules; + } + + /** + * Retrieve a CssSheet object for a given a CSSStyleSheet object. If the + * stylesheet is already cached, you get the existing CssSheet object, + * otherwise the new CSSStyleSheet object is cached. + * + * @param {CSSStyleSheet} domSheet the CSSStyleSheet object you want. + * @param {number} index the index, within the document, of the stylesheet. + * + * @return {CssSheet} the CssSheet object for the given CSSStyleSheet object. + */ + getSheet(domSheet, index) { + let cacheId = ""; + + if (domSheet.href) { + cacheId = domSheet.href; + } else if (domSheet.associatedDocument) { + cacheId = domSheet.associatedDocument.location; + } + + let sheet = null; + let sheetFound = false; + + if (cacheId in this._sheets) { + for (sheet of this._sheets[cacheId]) { + if (sheet.domSheet === domSheet) { + if (index != -1) { + sheet.index = index; + } + sheetFound = true; + break; + } + } + } + + if (!sheetFound) { + if (!(cacheId in this._sheets)) { + this._sheets[cacheId] = []; + } + + sheet = new CssSheet(this, domSheet, index); + if (sheet.sheetAllowed && sheet.authorSheet) { + this._ruleCount += sheet.ruleCount; + } + + this._sheets[cacheId].push(sheet); + } + + return sheet; + } + + /** + * Process each cached stylesheet in the document using your callback. + * + * @param {function} callback the function you want executed for each of the + * CssSheet objects cached. + * @param {object} scope the scope you want for the callback function. scope + * will be the this object when callback executes. + */ + forEachSheet(callback, scope) { + for (const cacheId in this._sheets) { + const sheets = this._sheets[cacheId]; + for (let i = 0; i < sheets.length; i++) { + // We take this as an opportunity to clean dead sheets + try { + const sheet = sheets[i]; + // If accessing domSheet raises an exception, then the style + // sheet is a dead object. + sheet.domSheet; + callback.call(scope, sheet, i, sheets); + } catch (e) { + sheets.splice(i, 1); + i--; + } + } + } + } + + /** + + /** + * Get the number CSSRule objects in the document, counted from all of + * the stylesheets. System sheets are excluded. If a filter is active, this + * tells only the number of CSSRule objects inside the selected + * CSSStyleSheet. + * + * WARNING: This only provides an estimate of the rule count, and the results + * could change at a later date. Todo remove this + * + * @return {number} the number of CSSRule (all rules). + */ + get ruleCount() { + if (!this._sheetsCached) { + this._cacheSheets(); + } + + return this._ruleCount; + } + + /** + * Process the CssSelector objects that match the highlighted element and its + * parent elements. scope.callback() is executed for each CssSelector + * object, being passed the CssSelector object and the match status. + * + * This method also includes all of the element.style properties, for each + * highlighted element parent and for the highlighted element itself. + * + * Note that the matched selectors are cached, such that next time your + * callback is invoked for the cached list of CssSelector objects. + * + * @param {function} callback the function you want to execute for each of + * the matched selectors. + * @param {object} scope the scope you want for the callback function. scope + * will be the this object when callback executes. + */ + processMatchedSelectors(callback, scope) { + if (this._matchedSelectors) { + if (callback) { + this._passId++; + this._matchedSelectors.forEach(function (value) { + callback.call(scope, value[0], value[1]); + value[0].cssRule._passId = this._passId; + }, this); + } + return; + } + + if (!this._matchedRules) { + this._buildMatchedRules(); + } + + this._matchedSelectors = []; + this._passId++; + + for (const matchedRule of this._matchedRules) { + const [rule, status, distance] = matchedRule; + + rule.selectors.forEach(function (selector) { + if ( + selector._matchId !== this._matchId && + (selector.inlineStyle || + this.selectorMatchesElement(rule.domRule, selector.selectorIndex)) + ) { + selector._matchId = this._matchId; + this._matchedSelectors.push([selector, status, distance]); + if (callback) { + callback.call(scope, selector, status, distance); + } + } + }, this); + + rule._passId = this._passId; + } + } + + /** + * Check if the given selector matches the highlighted element or any of its + * parents. + * + * @private + * @param {DOMRule} domRule + * The DOM Rule containing the selector. + * @param {Number} idx + * The index of the selector within the DOMRule. + * @return {boolean} + * true if the given selector matches the highlighted element or any + * of its parents, otherwise false is returned. + */ + selectorMatchesElement(domRule, idx) { + let element = this.viewedElement; + do { + if (domRule.selectorMatchesElement(idx, element)) { + return true; + } + } while ( + // Loop on flattenedTreeParentNode instead of parentNode to reach the + // shadow host from the shadow dom. + (element = element.flattenedTreeParentNode) && + element.nodeType === nodeConstants.ELEMENT_NODE + ); + + return false; + } + + /** + * Check if the highlighted element or it's parents have matched selectors. + * + * @param {Array} properties: The list of properties you want to check if they + * have matched selectors or not. + * @return {object} An object that tells for each property if it has matched + * selectors or not. Object keys are property names and values are booleans. + */ + hasMatchedSelectors(properties) { + if (!this._matchedRules) { + this._buildMatchedRules(); + } + + const result = {}; + + this._matchedRules.some(function (value) { + const rule = value[0]; + const status = value[1]; + properties = properties.filter(property => { + // We just need to find if a rule has this property while it matches + // the viewedElement (or its parents). + if ( + rule.getPropertyValue(property) && + (status == STATUS.MATCHED || + (status == STATUS.PARENT_MATCH && + InspectorUtils.isInheritedProperty( + this.viewedDocument, + property + ))) + ) { + result[property] = true; + return false; + } + // Keep the property for the next rule. + return true; + }); + return !properties.length; + }, this); + + return result; + } + + /** + * Build the array of matched rules for the currently highlighted element. + * The array will hold rules that match the viewedElement and its parents. + * + * @private + */ + _buildMatchedRules() { + let domRules; + let element = this.viewedElement; + const filter = this.sourceFilter; + let sheetIndex = 0; + + // distance is used to tell us how close an ancestor is to an element e.g. + // 0: The rule is directly applied to the current element. + // -1: The rule is inherited from the current element's first parent. + // -2: The rule is inherited from the current element's second parent. + // etc. + let distance = 0; + + this._matchId++; + this._passId++; + this._matchedRules = []; + + if (!element) { + return; + } + + do { + const status = + this.viewedElement === element ? STATUS.MATCHED : STATUS.PARENT_MATCH; + + try { + domRules = getCSSStyleRules(element); + } catch (ex) { + console.log("CL__buildMatchedRules error: " + ex); + continue; + } + + // Add element.style information. Order matters here, and style attribute wins over + // other rules, so we need to add it in `this._matchesRules` before the regular rules. + if (element.style && element.style.length) { + const rule = new CssRule(null, { style: element.style }, element); + rule._matchId = this._matchId; + rule._passId = this._passId; + this._matchedRules.push([rule, status, distance]); + } + + // getCSSStyleRules can return null with a shadow DOM element. + if (domRules !== null) { + // getCSSStyleRules returns ordered from least-specific to most-specific, + // but we do want them from most-specific to least specific, so we need to loop + // through the rules backward. + for (let i = domRules.length - 1; i >= 0; i--) { + const domRule = domRules[i]; + if (!CSSStyleRule.isInstance(domRule)) { + continue; + } + + const sheet = this.getSheet(domRule.parentStyleSheet, -1); + if (sheet._passId !== this._passId) { + sheet.index = sheetIndex++; + sheet._passId = this._passId; + } + + if (filter === FILTER.USER && !sheet.authorSheet) { + continue; + } + + const rule = sheet.getRule(domRule); + if (rule._passId === this._passId) { + continue; + } + + rule._matchId = this._matchId; + rule._passId = this._passId; + this._matchedRules.push([rule, status, distance]); + } + } + + distance--; + } while ( + // Loop on flattenedTreeParentNode instead of parentNode to reach the + // shadow host from the shadow dom. + (element = element.flattenedTreeParentNode) && + element.nodeType === nodeConstants.ELEMENT_NODE + ); + } + + /** + * Tells if the given DOM CSS object matches the current view media. + * + * @param {object} domObject The DOM CSS object to check. + * @return {boolean} True if the DOM CSS object matches the current view + * media, or false otherwise. + */ + mediaMatches(domObject) { + const mediaText = domObject.media.mediaText; + return ( + !mediaText || + this.viewedDocument.defaultView.matchMedia(mediaText).matches + ); + } +} + +/** + * If the element has an id, return '#id'. Otherwise return 'tagname[n]' where + * n is the index of this element in its siblings. + * <p>A technically more 'correct' output from the no-id case might be: + * 'tagname:nth-of-type(n)' however this is unlikely to be more understood + * and it is longer. + * + * @param {Element} element the element for which you want the short name. + * @return {string} the string to be displayed for element. + */ +CssLogic.getShortName = function (element) { + if (!element) { + return "null"; + } + if (element.id) { + return "#" + element.id; + } + let priorSiblings = 0; + let temp = element; + while ((temp = temp.previousElementSibling)) { + priorSiblings++; + } + return element.tagName + "[" + priorSiblings + "]"; +}; + +/** + * Get a string list of selectors for a given DOMRule. + * + * @param {DOMRule} domRule + * The DOMRule to parse. + * @param {Boolean} desugared + * Set to true to get the desugared selector (see https://drafts.csswg.org/css-nesting-1/#nest-selector) + * @return {Array} + * An array of string selectors. + */ +CssLogic.getSelectors = function (domRule, desugared = false) { + if (ChromeUtils.getClassName(domRule) !== "CSSStyleRule") { + // Return empty array since CSSRule#selectorCount assumes only STYLE_RULE type. + return []; + } + + const selectors = []; + + const len = domRule.selectorCount; + for (let i = 0; i < len; i++) { + selectors.push(domRule.selectorTextAt(i, desugared)); + } + return selectors; +}; + +/** + * Given a node, check to see if it is a ::before or ::after element. + * If so, return the node that is accessible from within the document + * (the parent of the anonymous node), along with which pseudo element + * it was. Otherwise, return the node itself. + * + * @returns {Object} + * - {DOMNode} node The non-anonymous node + * - {string} pseudo One of ':marker', ':before', ':after', or null. + */ +CssLogic.getBindingElementAndPseudo = getBindingElementAndPseudo; + +/** + * Get the computed style on a node. Automatically handles reading + * computed styles on a ::before/::after element by reading on the + * parent node with the proper pseudo argument. + * + * @param {Node} + * @returns {CSSStyleDeclaration} + */ +CssLogic.getComputedStyle = function (node) { + if ( + !node || + Cu.isDeadWrapper(node) || + node.nodeType !== nodeConstants.ELEMENT_NODE || + !node.ownerGlobal + ) { + return null; + } + + const { bindingElement, pseudo } = CssLogic.getBindingElementAndPseudo(node); + + // For reasons that still escape us, pseudo-elements can sometimes be "unattached" (i.e. + // not have a parentNode defined). This seems to happen when a page is reloaded while + // the inspector is open. Bailing out here ensures that the inspector does not fail at + // presenting DOM nodes and CSS styles when this happens. This is a temporary measure. + // See bug 1506792. + if (!bindingElement) { + return null; + } + + return node.ownerGlobal.getComputedStyle(bindingElement, pseudo); +}; + +/** + * Get a source for a stylesheet, taking into account embedded stylesheets + * for which we need to use document.defaultView.location.href rather than + * sheet.href + * + * @param {CSSStyleSheet} sheet the DOM object for the style sheet. + * @return {string} the address of the stylesheet. + */ +CssLogic.href = function (sheet) { + return sheet.href || sheet.associatedDocument.location; +}; + +/** + * Returns true if the given node has visited state. + */ +CssLogic.hasVisitedState = hasVisitedState; + +class CssSheet { + /** + * A safe way to access cached bits of information about a stylesheet. + * + * @constructor + * @param {CssLogic} cssLogic pointer to the CssLogic instance working with + * this CssSheet object. + * @param {CSSStyleSheet} domSheet reference to a DOM CSSStyleSheet object. + * @param {number} index tells the index/position of the stylesheet within the + * main document. + */ + constructor(cssLogic, domSheet, index) { + this._cssLogic = cssLogic; + this.domSheet = domSheet; + this.index = this.authorSheet ? index : -100 * index; + + // Cache of the sheets href. Cached by the getter. + this._href = null; + // Short version of href for use in select boxes etc. Cached by getter. + this._shortSource = null; + + // null for uncached. + this._sheetAllowed = null; + + // Cached CssRules from the given stylesheet. + this._rules = {}; + + this._ruleCount = -1; + } + + _passId = null; + _agentSheet = null; + _authorSheet = null; + _userSheet = null; + + /** + * Check if the stylesheet is an agent stylesheet (provided by the browser). + * + * @return {boolean} true if this is an agent stylesheet, false otherwise. + */ + get agentSheet() { + if (this._agentSheet === null) { + this._agentSheet = isAgentStylesheet(this.domSheet); + } + return this._agentSheet; + } + + /** + * Check if the stylesheet is an author stylesheet (provided by the content page). + * + * @return {boolean} true if this is an author stylesheet, false otherwise. + */ + get authorSheet() { + if (this._authorSheet === null) { + this._authorSheet = isAuthorStylesheet(this.domSheet); + } + return this._authorSheet; + } + + /** + * Check if the stylesheet is a user stylesheet (provided by userChrome.css or + * userContent.css). + * + * @return {boolean} true if this is a user stylesheet, false otherwise. + */ + get userSheet() { + if (this._userSheet === null) { + this._userSheet = isUserStylesheet(this.domSheet); + } + return this._userSheet; + } + + /** + * Check if the stylesheet is disabled or not. + * @return {boolean} true if this stylesheet is disabled, or false otherwise. + */ + get disabled() { + return this.domSheet.disabled; + } + + /** + * Get a source for a stylesheet, using CssLogic.href + * + * @return {string} the address of the stylesheet. + */ + get href() { + if (this._href) { + return this._href; + } + + this._href = CssLogic.href(this.domSheet); + return this._href; + } + + /** + * Create a shorthand version of the href of a stylesheet. + * + * @return {string} the shorthand source of the stylesheet. + */ + get shortSource() { + if (this._shortSource) { + return this._shortSource; + } + + this._shortSource = shortSource(this.domSheet); + return this._shortSource; + } + + /** + * Tells if the sheet is allowed or not by the current CssLogic.sourceFilter. + * + * @return {boolean} true if the stylesheet is allowed by the sourceFilter, or + * false otherwise. + */ + get sheetAllowed() { + if (this._sheetAllowed !== null) { + return this._sheetAllowed; + } + + this._sheetAllowed = true; + + const filter = this._cssLogic.sourceFilter; + if (filter === FILTER.USER && !this.authorSheet) { + this._sheetAllowed = false; + } + if (filter !== FILTER.USER && filter !== FILTER.UA) { + this._sheetAllowed = filter === this.href; + } + + return this._sheetAllowed; + } + + /** + * Retrieve the number of rules in this stylesheet. + * + * @return {number} the number of CSSRule objects in this stylesheet. + */ + get ruleCount() { + try { + return this._ruleCount > -1 ? this._ruleCount : this.getCssRules().length; + } catch (e) { + return 0; + } + } + + /** + * Retrieve the array of css rules for this stylesheet. + * + * Accessing cssRules on a stylesheet that is not completely loaded can throw a + * DOMException (Bug 625013). This wrapper will return an empty array instead. + * + * @return {Array} array of css rules. + **/ + getCssRules() { + try { + return this.domSheet.cssRules; + } catch (e) { + return []; + } + } + + /** + * Retrieve a CssRule object for the given CSSStyleRule. The CssRule object is + * cached, such that subsequent retrievals return the same CssRule object for + * the same CSSStyleRule object. + * + * @param {CSSStyleRule} aDomRule the CSSStyleRule object for which you want a + * CssRule object. + * @return {CssRule} the cached CssRule object for the given CSSStyleRule + * object. + */ + getRule(domRule) { + const cacheId = domRule.type + domRule.selectorText; + + let rule = null; + let ruleFound = false; + + if (cacheId in this._rules) { + for (rule of this._rules[cacheId]) { + if (rule.domRule === domRule) { + ruleFound = true; + break; + } + } + } + + if (!ruleFound) { + if (!(cacheId in this._rules)) { + this._rules[cacheId] = []; + } + + rule = new CssRule(this, domRule); + this._rules[cacheId].push(rule); + } + + return rule; + } + + toString() { + return "CssSheet[" + this.shortSource + "]"; + } +} + +class CssRule { + /** + * Information about a single CSSStyleRule. + * + * @param {CSSStyleSheet|null} cssSheet the CssSheet object of the stylesheet that + * holds the CSSStyleRule. If the rule comes from element.style, set this + * argument to null. + * @param {CSSStyleRule|object} domRule the DOM CSSStyleRule for which you want + * to cache data. If the rule comes from element.style, then provide + * an object of the form: {style: element.style}. + * @param {Element} [element] If the rule comes from element.style, then this + * argument must point to the element. + * @constructor + */ + constructor(cssSheet, domRule, element) { + this._cssSheet = cssSheet; + this.domRule = domRule; + + if (this._cssSheet) { + // parse domRule.selectorText on call to this.selectors + this._selectors = null; + this.line = InspectorUtils.getRelativeRuleLine(this.domRule); + this.column = InspectorUtils.getRuleColumn(this.domRule); + this.href = this._cssSheet.href; + this.authorRule = this._cssSheet.authorSheet; + this.userRule = this._cssSheet.userSheet; + this.agentRule = this._cssSheet.agentSheet; + } else if (element) { + this._selectors = [new CssSelector(this, "@element.style", 0)]; + this.line = -1; + this.href = "#"; + this.authorRule = true; + this.userRule = false; + this.agentRule = false; + this.sourceElement = element; + } + } + + _passId = null; + + /** + * Check if the parent stylesheet is allowed by the CssLogic.sourceFilter. + * + * @return {boolean} true if the parent stylesheet is allowed by the current + * sourceFilter, or false otherwise. + */ + get sheetAllowed() { + return this._cssSheet ? this._cssSheet.sheetAllowed : true; + } + + /** + * Retrieve the parent stylesheet index/position in the viewed document. + * + * @return {number} the parent stylesheet index/position in the viewed + * document. + */ + get sheetIndex() { + return this._cssSheet ? this._cssSheet.index : 0; + } + + /** + * Retrieve the style property value from the current CSSStyleRule. + * + * @param {string} property the CSS property name for which you want the + * value. + * @return {string} the property value. + */ + getPropertyValue(property) { + return this.domRule.style.getPropertyValue(property); + } + + /** + * Retrieve the style property priority from the current CSSStyleRule. + * + * @param {string} property the CSS property name for which you want the + * priority. + * @return {string} the property priority. + */ + getPropertyPriority(property) { + return this.domRule.style.getPropertyPriority(property); + } + + /** + * Retrieve the list of CssSelector objects for each of the parsed selectors + * of the current CSSStyleRule. + * + * @return {array} the array hold the CssSelector objects. + */ + get selectors() { + if (this._selectors) { + return this._selectors; + } + + // Parse the CSSStyleRule.selectorText string. + this._selectors = []; + + if (!this.domRule.selectorText) { + return this._selectors; + } + + const selectors = CssLogic.getSelectors(this.domRule); + + for (let i = 0, len = selectors.length; i < len; i++) { + this._selectors.push(new CssSelector(this, selectors[i], i)); + } + + return this._selectors; + } + + toString() { + return "[CssRule " + this.domRule.selectorText + "]"; + } +} + +class CssSelector { + /** + * The CSS selector class allows us to document the ranking of various CSS + * selectors. + * + * @constructor + * @param {CssRule} cssRule the CssRule instance from where the selector comes. + * @param {string} selector The selector that we wish to investigate. + * @param {Number} index The index of the selector within it's rule. + */ + constructor(cssRule, selector, index) { + this.cssRule = cssRule; + this.text = selector; + this.inlineStyle = this.text == "@element.style"; + this._specificity = null; + this.selectorIndex = index; + } + + _matchId = null; + + /** + * Retrieve the CssSelector source element, which is the source of the CssRule + * owning the selector. This is only available when the CssSelector comes from + * an element.style. + * + * @return {string} the source element selector. + */ + get sourceElement() { + return this.cssRule.sourceElement; + } + + /** + * Retrieve the address of the CssSelector. This points to the address of the + * CssSheet owning this selector. + * + * @return {string} the address of the CssSelector. + */ + get href() { + return this.cssRule.href; + } + + /** + * Check if the selector comes from an agent stylesheet (provided by the browser). + * + * @return {boolean} true if this is an agent stylesheet, false otherwise. + */ + get agentRule() { + return this.cssRule.agentRule; + } + + /** + * Check if the selector comes from an author stylesheet (provided by the content page). + * + * @return {boolean} true if this is an author stylesheet, false otherwise. + */ + get authorRule() { + return this.cssRule.authorRule; + } + + /** + * Check if the selector comes from a user stylesheet (provided by userChrome.css or + * userContent.css). + * + * @return {boolean} true if this is a user stylesheet, false otherwise. + */ + get userRule() { + return this.cssRule.userRule; + } + + /** + * Check if the parent stylesheet is allowed by the CssLogic.sourceFilter. + * + * @return {boolean} true if the parent stylesheet is allowed by the current + * sourceFilter, or false otherwise. + */ + get sheetAllowed() { + return this.cssRule.sheetAllowed; + } + + /** + * Retrieve the parent stylesheet index/position in the viewed document. + * + * @return {number} the parent stylesheet index/position in the viewed + * document. + */ + get sheetIndex() { + return this.cssRule.sheetIndex; + } + + /** + * Retrieve the line of the parent CSSStyleRule in the parent CSSStyleSheet. + * + * @return {number} the line of the parent CSSStyleRule in the parent + * stylesheet. + */ + get ruleLine() { + return this.cssRule.line; + } + + /** + * Retrieve the column of the parent CSSStyleRule in the parent CSSStyleSheet. + * + * @return {number} the column of the parent CSSStyleRule in the parent + * stylesheet. + */ + get ruleColumn() { + return this.cssRule.column; + } + + /** + * Retrieve specificity information for the current selector. + * + * @see http://www.w3.org/TR/css3-selectors/#specificity + * @see http://www.w3.org/TR/CSS2/selector.html + * + * @return {Number} The selector's specificity. + */ + get specificity() { + if (this.inlineStyle) { + // We can't ask specificity from DOMUtils as element styles don't provide + // CSSStyleRule interface DOMUtils expect. However, specificity of element + // style is constant, 1,0,0,0 or 0x40000000, just return the constant + // directly. @see http://www.w3.org/TR/CSS2/cascade.html#specificity + return 0x40000000; + } + + if (typeof this._specificity !== "number") { + this._specificity = this.cssRule.domRule.selectorSpecificityAt( + this.selectorIndex + ); + } + + return this._specificity; + } + + toString() { + return this.text; + } +} + +class CssPropertyInfo { + /** + * A cache of information about the matched rules, selectors and values attached + * to a CSS property, for the highlighted element. + * + * The heart of the CssPropertyInfo object is the _findMatchedSelectors() + * method. This are invoked when the PropertyView tries to access the + * .matchedSelectors array. + * Results are cached, for later reuse. + * + * @param {CssLogic} cssLogic Reference to the parent CssLogic instance + * @param {string} property The CSS property we are gathering information for + * @constructor + */ + constructor(cssLogic, property) { + this._cssLogic = cssLogic; + this.property = property; + this._value = ""; + + // An array holding CssSelectorInfo objects for each of the matched selectors + // that are inside a CSS rule. Only rules that hold the this.property are + // counted. This includes rules that come from filtered stylesheets (those + // that have sheetAllowed = false). + this._matchedSelectors = null; + } + + /** + * Retrieve the computed style value for the current property, for the + * highlighted element. + * + * @return {string} the computed style value for the current property, for the + * highlighted element. + */ + get value() { + if (!this._value && this._cssLogic.computedStyle) { + try { + this._value = this._cssLogic.computedStyle.getPropertyValue( + this.property + ); + } catch (ex) { + console.log("Error reading computed style for " + this.property); + console.log(ex); + } + } + return this._value; + } + + /** + * Retrieve the array holding CssSelectorInfo objects for each of the matched + * selectors, from each of the matched rules. Only selectors coming from + * allowed stylesheets are included in the array. + * + * @return {array} the list of CssSelectorInfo objects of selectors that match + * the highlighted element and its parents. + */ + get matchedSelectors() { + if (!this._matchedSelectors) { + this._findMatchedSelectors(); + } else if (this.needRefilter) { + this._refilterSelectors(); + } + + return this._matchedSelectors; + } + + /** + * Find the selectors that match the highlighted element and its parents. + * Uses CssLogic.processMatchedSelectors() to find the matched selectors, + * passing in a reference to CssPropertyInfo._processMatchedSelector() to + * create CssSelectorInfo objects, which we then sort + * @private + */ + _findMatchedSelectors() { + this._matchedSelectors = []; + this.needRefilter = false; + + this._cssLogic.processMatchedSelectors(this._processMatchedSelector, this); + + // Sort the selectors by how well they match the given element. + this._matchedSelectors.sort((selectorInfo1, selectorInfo2) => + selectorInfo1.compareTo(selectorInfo2, this._matchedSelectors) + ); + + // Now we know which of the matches is best, we can mark it BEST_MATCH. + if ( + this._matchedSelectors.length && + this._matchedSelectors[0].status > STATUS.UNMATCHED + ) { + this._matchedSelectors[0].status = STATUS.BEST; + } + } + + /** + * Process a matched CssSelector object. + * + * @private + * @param {CssSelector} selector: the matched CssSelector object. + * @param {STATUS} status: the CssSelector match status. + * @param {Int} distance: See CssLogic._buildMatchedRules for definition. + */ + _processMatchedSelector(selector, status, distance) { + const cssRule = selector.cssRule; + const value = cssRule.getPropertyValue(this.property); + if ( + value && + (status == STATUS.MATCHED || + (status == STATUS.PARENT_MATCH && + InspectorUtils.isInheritedProperty( + this._cssLogic.viewedDocument, + this.property + ))) + ) { + const selectorInfo = new CssSelectorInfo( + selector, + this.property, + value, + status, + distance + ); + this._matchedSelectors.push(selectorInfo); + } + } + + /** + * Refilter the matched selectors array when the CssLogic.sourceFilter + * changes. This allows for quick filter changes. + * @private + */ + _refilterSelectors() { + const passId = ++this._cssLogic._passId; + + const iterator = function (selectorInfo) { + const cssRule = selectorInfo.selector.cssRule; + if (cssRule._passId != passId) { + cssRule._passId = passId; + } + }; + + if (this._matchedSelectors) { + this._matchedSelectors.forEach(iterator); + } + + this.needRefilter = false; + } + + toString() { + return "CssPropertyInfo[" + this.property + "]"; + } +} + +class CssSelectorInfo { + /** + * A class that holds information about a given CssSelector object. + * + * Instances of this class are given to CssHtmlTree in the array of matched + * selectors. Each such object represents a displayable row in the PropertyView + * objects. The information given by this object blends data coming from the + * CssSheet, CssRule and from the CssSelector that own this object. + * + * @param {CssSelector} selector The CssSelector object for which to + * present information. + * @param {string} property The property for which information should + * be retrieved. + * @param {string} value The property value from the CssRule that owns + * the selector. + * @param {STATUS} status The selector match status. + * @param {number} distance See CssLogic._buildMatchedRules for definition. + * @constructor + */ + constructor(selector, property, value, status, distance) { + this.selector = selector; + this.property = property; + this.status = status; + this.distance = distance; + this.value = value; + const priority = this.selector.cssRule.getPropertyPriority(this.property); + this.important = priority === "important"; + + // Array<string|CSSLayerBlockRule> + this.parentLayers = []; + + // Go through all parent rules to populate this.parentLayers + let rule = selector.cssRule.domRule; + while (rule) { + const className = ChromeUtils.getClassName(rule); + if (className == "CSSLayerBlockRule") { + // If the layer has a name, it's enough to uniquely identify it + // If the layer does not have a name. We put the actual rule here, so we'll + // be able to compare actual rule instances in `compareTo` + this.parentLayers.push(rule.name || rule); + } else if (className == "CSSImportRule" && rule.layerName !== null) { + // Same reasoning for @import rule + layer + this.parentLayers.push(rule.layerName || rule); + } + + // Get the parent rule (could be the parent stylesheet owner rule + // for `@import url(path/to/file.css) layer`) + rule = rule.parentRule || rule.parentStyleSheet?.ownerRule; + } + } + + /** + * Retrieve the CssSelector source element, which is the source of the CssRule + * owning the selector. This is only available when the CssSelector comes from + * an element.style. + * + * @return {string} the source element selector. + */ + get sourceElement() { + return this.selector.sourceElement; + } + + /** + * Retrieve the address of the CssSelector. This points to the address of the + * CssSheet owning this selector. + * + * @return {string} the address of the CssSelector. + */ + get href() { + return this.selector.href; + } + + /** + * Check if the CssSelector comes from element.style or not. + * + * @return {boolean} true if the CssSelector comes from element.style, or + * false otherwise. + */ + get inlineStyle() { + return this.selector.inlineStyle; + } + + /** + * Retrieve specificity information for the current selector. + * + * @return {object} an object holding specificity information for the current + * selector. + */ + get specificity() { + return this.selector.specificity; + } + + /** + * Retrieve the parent stylesheet index/position in the viewed document. + * + * @return {number} the parent stylesheet index/position in the viewed + * document. + */ + get sheetIndex() { + return this.selector.sheetIndex; + } + + /** + * Check if the parent stylesheet is allowed by the CssLogic.sourceFilter. + * + * @return {boolean} true if the parent stylesheet is allowed by the current + * sourceFilter, or false otherwise. + */ + get sheetAllowed() { + return this.selector.sheetAllowed; + } + + /** + * Retrieve the line of the parent CSSStyleRule in the parent CSSStyleSheet. + * + * @return {number} the line of the parent CSSStyleRule in the parent + * stylesheet. + */ + get ruleLine() { + return this.selector.ruleLine; + } + + /** + * Retrieve the column of the parent CSSStyleRule in the parent CSSStyleSheet. + * + * @return {number} the column of the parent CSSStyleRule in the parent + * stylesheet. + */ + get ruleColumn() { + return this.selector.ruleColumn; + } + + /** + * Check if the selector comes from a browser-provided stylesheet. + * + * @return {boolean} true if the selector comes from a browser-provided + * stylesheet, or false otherwise. + */ + get agentRule() { + return this.selector.agentRule; + } + + /** + * Check if the selector comes from a webpage-provided stylesheet. + * + * @return {boolean} true if the selector comes from a webpage-provided + * stylesheet, or false otherwise. + */ + get authorRule() { + return this.selector.authorRule; + } + + /** + * Check if the selector comes from a user stylesheet (userChrome.css or + * userContent.css). + * + * @return {boolean} true if the selector comes from a webpage-provided + * stylesheet, or false otherwise. + */ + get userRule() { + return this.selector.userRule; + } + + /** + * Compare the current CssSelectorInfo instance to another instance. + * Since selectorInfos is computed from `InspectorUtils.getCSSStyleRules`, + * it's already sorted for regular cases. We only need to handle important values. + * + * @param {CssSelectorInfo} that + * The instance to compare ourselves against. + * @param {Array<CssSelectorInfo>} selectorInfos + * The list of CssSelectorInfo we are currently ordering + * @return {Number} + * -1, 0, 1 depending on how that compares with this. + */ + compareTo(that, selectorInfos) { + const originalOrder = + selectorInfos.indexOf(this) < selectorInfos.indexOf(that) ? -1 : 1; + + // If both properties are not important, we can keep the original order + if (!this.important && !that.important) { + return originalOrder; + } + + // If one of the property is important and the other is not, the important one wins + if (this.important !== that.important) { + return this.important ? -1 : 1; + } + + // At this point, this and that are both important + + const thisIsInLayer = !!this.parentLayers.length; + const thatIsInLayer = !!that.parentLayers.length; + + // If they're not in layers, we can keep the original rule order + if (!thisIsInLayer && !thatIsInLayer) { + return originalOrder; + } + + // If one of the rule is the style attribute, it wins + if (this.selector.inlineStyle || that.selector.inlineStyle) { + return this.selector.inlineStyle ? -1 : 1; + } + + // If one of the rule is not in a layer, then the rule in a layer wins. + if (!thisIsInLayer || !thatIsInLayer) { + return thisIsInLayer ? -1 : 1; + } + + const inSameLayers = + this.parentLayers.length === that.parentLayers.length && + this.parentLayers.every((layer, i) => layer === that.parentLayers[i]); + // If both rules are in the same layer, we keep the original order + if (inSameLayers) { + return originalOrder; + } + + // When comparing declarations that belong to different layers, then for + // important rules the declaration whose cascade layer is first wins. + // We get the rules in the most-specific to least-specific order, meaning we'll have + // rules in layers in the reverse order of the order of declarations of layers. + // We can reverse that again to get the order of declarations of layers. + return originalOrder * -1; + } + + compare(that, propertyName, type) { + switch (type) { + case COMPAREMODE.BOOLEAN: + if (this[propertyName] && !that[propertyName]) { + return -1; + } + if (!this[propertyName] && that[propertyName]) { + return 1; + } + break; + case COMPAREMODE.INTEGER: + if (this[propertyName] > that[propertyName]) { + return -1; + } + if (this[propertyName] < that[propertyName]) { + return 1; + } + break; + } + return 0; + } + + toString() { + return this.selector + " -> " + this.value; + } +} + +exports.CssLogic = CssLogic; +exports.CssSelector = CssSelector; diff --git a/devtools/server/actors/inspector/custom-element-watcher.js b/devtools/server/actors/inspector/custom-element-watcher.js new file mode 100644 index 0000000000..8eb57fea40 --- /dev/null +++ b/devtools/server/actors/inspector/custom-element-watcher.js @@ -0,0 +1,144 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const EventEmitter = require("resource://devtools/shared/event-emitter.js"); + +/** + * The CustomElementWatcher can be used to be notified if a custom element definition + * is created for a node. + * + * When a custom element is defined for a monitored name, an "element-defined" event is + * fired with the following Object argument: + * - {String} name: name of the custom element defined + * - {Set} Set of impacted node actors + */ +class CustomElementWatcher extends EventEmitter { + constructor(chromeEventHandler) { + super(); + + this.chromeEventHandler = chromeEventHandler; + this._onCustomElementDefined = this._onCustomElementDefined.bind(this); + this.chromeEventHandler.addEventListener( + "customelementdefined", + this._onCustomElementDefined + ); + + /** + * Each window keeps its own custom element registry, all of them are watched + * separately. The struture of the watchedRegistries is as follows + * + * WeakMap( + * registry -> Map ( + * name -> Set(NodeActors) + * ) + * ) + */ + this.watchedRegistries = new WeakMap(); + } + + destroy() { + this.watchedRegistries = null; + this.chromeEventHandler.removeEventListener( + "customelementdefined", + this._onCustomElementDefined + ); + } + + /** + * Watch for custom element definitions matching the name of the provided NodeActor. + */ + manageNode(nodeActor) { + if (!this._isValidNode(nodeActor)) { + return; + } + + if (!this._shouldWatchDefinition(nodeActor)) { + return; + } + + const registry = nodeActor.rawNode.ownerGlobal.customElements; + const registryMap = this._getMapForRegistry(registry); + + const name = nodeActor.rawNode.localName; + const actorsSet = this._getActorsForName(name, registryMap); + actorsSet.add(nodeActor); + } + + /** + * Stop watching the provided NodeActor. + */ + unmanageNode(nodeActor) { + if (!this._isValidNode(nodeActor)) { + return; + } + + const win = nodeActor.rawNode.ownerGlobal; + const registry = win.customElements; + const registryMap = this._getMapForRegistry(registry); + const name = nodeActor.rawNode.localName; + if (registryMap.has(name)) { + registryMap.get(name).delete(nodeActor); + } + } + + /** + * Retrieve the map of name->nodeActors for a given CustomElementsRegistry. + * Will create the map if not created yet. + */ + _getMapForRegistry(registry) { + if (!this.watchedRegistries.has(registry)) { + this.watchedRegistries.set(registry, new Map()); + } + return this.watchedRegistries.get(registry); + } + + /** + * Retrieve the set of nodeActors for a given name and registry. + * Will create the set if not created yet. + */ + _getActorsForName(name, registryMap) { + if (!registryMap.has(name)) { + registryMap.set(name, new Set()); + } + return registryMap.get(name); + } + + _shouldWatchDefinition(nodeActor) { + const doc = nodeActor.rawNode.ownerDocument; + const namespaceURI = doc.documentElement.namespaceURI; + const name = nodeActor.rawNode.localName; + const isValidName = InspectorUtils.isCustomElementName(name, namespaceURI); + + const customElements = doc.defaultView.customElements; + return isValidName && !customElements.get(name); + } + + _onCustomElementDefined(event) { + const doc = event.target; + const registry = doc.defaultView.customElements; + const registryMap = this._getMapForRegistry(registry); + + const name = event.detail; + const actors = this._getActorsForName(name, registryMap); + this.emit("element-defined", { name, actors }); + registryMap.delete(name); + } + + /** + * Some nodes (e.g. inside of <template> tags) don't have a documentElement or an + * ownerGlobal and can't be watched by this helper. + */ + _isValidNode(nodeActor) { + const node = nodeActor.rawNode; + return ( + !Cu.isDeadWrapper(node) && + node.ownerGlobal && + node.ownerDocument?.documentElement + ); + } +} + +exports.CustomElementWatcher = CustomElementWatcher; diff --git a/devtools/server/actors/inspector/document-walker.js b/devtools/server/actors/inspector/document-walker.js new file mode 100644 index 0000000000..7ced18ecd8 --- /dev/null +++ b/devtools/server/actors/inspector/document-walker.js @@ -0,0 +1,196 @@ +/* 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"; + +loader.lazyRequireGetter( + this, + "nodeFilterConstants", + "resource://devtools/shared/dom-node-filter-constants.js" +); +loader.lazyRequireGetter( + this, + "standardTreeWalkerFilter", + "resource://devtools/server/actors/inspector/utils.js", + true +); + +// SKIP_TO_* arguments are used with the DocumentWalker, driving the strategy to use if +// the starting node is incompatible with the filter function of the walker. +const SKIP_TO_PARENT = "SKIP_TO_PARENT"; +const SKIP_TO_SIBLING = "SKIP_TO_SIBLING"; + +class DocumentWalker { + /** + * Wrapper for inDeepTreeWalker. Adds filtering to the traversal methods. + * See inDeepTreeWalker for more information about the methods. + * + * @param {DOMNode} node + * @param {Window} rootWin + * @param {Object} + * - {Function} filter + * A custom filter function Taking in a DOMNode and returning an Int. See + * WalkerActor.nodeFilter for an example. + * - {String} skipTo + * Either SKIP_TO_PARENT or SKIP_TO_SIBLING. If the provided node is not + * compatible with the filter function for this walker, try to find a compatible + * one either in the parents or in the siblings of the node. + * - {Boolean} showAnonymousContent + * Pass true to let the walker return and traverse anonymous content. + * When navigating host elements to which shadow DOM is attached, the light tree + * will be visible only to a walker with showAnonymousContent=false. The shadow + * tree will only be visible to a walker with showAnonymousContent=true. + */ + constructor( + node, + rootWin, + { + filter = standardTreeWalkerFilter, + skipTo = SKIP_TO_PARENT, + showAnonymousContent = true, + } = {} + ) { + if (Cu.isDeadWrapper(rootWin) || !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 = showAnonymousContent; + this.walker.showSubDocuments = true; + this.walker.showDocumentsAsNodes = true; + this.walker.init(rootWin.document); + this.filter = filter; + + // Make sure that the walker knows about the initial node (which could + // be skipped due to a filter). + this.walker.currentNode = this.getStartingNode(node, skipTo); + } + + get currentNode() { + return this.walker.currentNode; + } + set currentNode(val) { + this.walker.currentNode = val; + } + + parentNode() { + return this.walker.parentNode(); + } + + nextNode() { + const node = this.walker.currentNode; + if (!node) { + return null; + } + + let nextNode = this.walker.nextNode(); + while (nextNode && this.isSkippedNode(nextNode)) { + nextNode = this.walker.nextNode(); + } + + return nextNode; + } + + firstChild() { + if (!this.walker.currentNode) { + return null; + } + + let firstChild = this.walker.firstChild(); + while (firstChild && this.isSkippedNode(firstChild)) { + firstChild = this.walker.nextSibling(); + } + + return firstChild; + } + + lastChild() { + if (!this.walker.currentNode) { + return null; + } + + let lastChild = this.walker.lastChild(); + while (lastChild && this.isSkippedNode(lastChild)) { + lastChild = this.walker.previousSibling(); + } + + return lastChild; + } + + previousSibling() { + let node = this.walker.previousSibling(); + while (node && this.isSkippedNode(node)) { + node = this.walker.previousSibling(); + } + return node; + } + + nextSibling() { + let node = this.walker.nextSibling(); + while (node && this.isSkippedNode(node)) { + node = this.walker.nextSibling(); + } + return node; + } + + getStartingNode(node, skipTo) { + // Keep a reference on the starting node in case we can't find a node compatible with + // the filter. + const startingNode = node; + + if (skipTo === SKIP_TO_PARENT) { + while (node && this.isSkippedNode(node)) { + node = node.parentNode; + } + } else if (skipTo === SKIP_TO_SIBLING) { + node = this.getClosestAcceptedSibling(node); + } + + return node || startingNode; + } + + /** + * Loop on all of the provided node siblings until finding one that is compliant with + * the filter function. + */ + getClosestAcceptedSibling(node) { + if (this.filter(node) === nodeFilterConstants.FILTER_ACCEPT) { + // node is already valid, return immediately. + return node; + } + + // Loop on starting node siblings. + let previous = node; + let next = node; + while (previous || next) { + previous = previous?.previousSibling; + next = next?.nextSibling; + + if ( + previous && + this.filter(previous) === nodeFilterConstants.FILTER_ACCEPT + ) { + // A valid node was found in the previous siblings of the node. + return previous; + } + + if (next && this.filter(next) === nodeFilterConstants.FILTER_ACCEPT) { + // A valid node was found in the next siblings of the node. + return next; + } + } + + return null; + } + + isSkippedNode(node) { + return this.filter(node) === nodeFilterConstants.FILTER_SKIP; + } +} + +exports.DocumentWalker = DocumentWalker; +exports.SKIP_TO_PARENT = SKIP_TO_PARENT; +exports.SKIP_TO_SIBLING = SKIP_TO_SIBLING; diff --git a/devtools/server/actors/inspector/event-collector.js b/devtools/server/actors/inspector/event-collector.js new file mode 100644 index 0000000000..4ee8dc388f --- /dev/null +++ b/devtools/server/actors/inspector/event-collector.js @@ -0,0 +1,1069 @@ +/* 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/. */ + +// This file contains event collectors that are then used by developer tools in +// order to find information about events affecting an HTML element. + +"use strict"; + +const { + isAfterPseudoElement, + isBeforePseudoElement, + isMarkerPseudoElement, + isNativeAnonymous, +} = require("resource://devtools/shared/layout/utils.js"); +const Debugger = require("Debugger"); +const { + EXCLUDED_LISTENER, +} = require("resource://devtools/server/actors/inspector/constants.js"); + +// eslint-disable-next-line +const JQUERY_LIVE_REGEX = + /return typeof \w+.*.event\.triggered[\s\S]*\.event\.(dispatch|handle).*arguments/; + +const REACT_EVENT_NAMES = [ + "onAbort", + "onAnimationEnd", + "onAnimationIteration", + "onAnimationStart", + "onAuxClick", + "onBeforeInput", + "onBlur", + "onCanPlay", + "onCanPlayThrough", + "onCancel", + "onChange", + "onClick", + "onClose", + "onCompositionEnd", + "onCompositionStart", + "onCompositionUpdate", + "onContextMenu", + "onCopy", + "onCut", + "onDoubleClick", + "onDrag", + "onDragEnd", + "onDragEnter", + "onDragExit", + "onDragLeave", + "onDragOver", + "onDragStart", + "onDrop", + "onDurationChange", + "onEmptied", + "onEncrypted", + "onEnded", + "onError", + "onFocus", + "onGotPointerCapture", + "onInput", + "onInvalid", + "onKeyDown", + "onKeyPress", + "onKeyUp", + "onLoad", + "onLoadStart", + "onLoadedData", + "onLoadedMetadata", + "onLostPointerCapture", + "onMouseDown", + "onMouseEnter", + "onMouseLeave", + "onMouseMove", + "onMouseOut", + "onMouseOver", + "onMouseUp", + "onPaste", + "onPause", + "onPlay", + "onPlaying", + "onPointerCancel", + "onPointerDown", + "onPointerEnter", + "onPointerLeave", + "onPointerMove", + "onPointerOut", + "onPointerOver", + "onPointerUp", + "onProgress", + "onRateChange", + "onReset", + "onScroll", + "onSeeked", + "onSeeking", + "onSelect", + "onStalled", + "onSubmit", + "onSuspend", + "onTimeUpdate", + "onToggle", + "onTouchCancel", + "onTouchEnd", + "onTouchMove", + "onTouchStart", + "onTransitionEnd", + "onVolumeChange", + "onWaiting", + "onWheel", + "onAbortCapture", + "onAnimationEndCapture", + "onAnimationIterationCapture", + "onAnimationStartCapture", + "onAuxClickCapture", + "onBeforeInputCapture", + "onBlurCapture", + "onCanPlayCapture", + "onCanPlayThroughCapture", + "onCancelCapture", + "onChangeCapture", + "onClickCapture", + "onCloseCapture", + "onCompositionEndCapture", + "onCompositionStartCapture", + "onCompositionUpdateCapture", + "onContextMenuCapture", + "onCopyCapture", + "onCutCapture", + "onDoubleClickCapture", + "onDragCapture", + "onDragEndCapture", + "onDragEnterCapture", + "onDragExitCapture", + "onDragLeaveCapture", + "onDragOverCapture", + "onDragStartCapture", + "onDropCapture", + "onDurationChangeCapture", + "onEmptiedCapture", + "onEncryptedCapture", + "onEndedCapture", + "onErrorCapture", + "onFocusCapture", + "onGotPointerCaptureCapture", + "onInputCapture", + "onInvalidCapture", + "onKeyDownCapture", + "onKeyPressCapture", + "onKeyUpCapture", + "onLoadCapture", + "onLoadStartCapture", + "onLoadedDataCapture", + "onLoadedMetadataCapture", + "onLostPointerCaptureCapture", + "onMouseDownCapture", + "onMouseEnterCapture", + "onMouseLeaveCapture", + "onMouseMoveCapture", + "onMouseOutCapture", + "onMouseOverCapture", + "onMouseUpCapture", + "onPasteCapture", + "onPauseCapture", + "onPlayCapture", + "onPlayingCapture", + "onPointerCancelCapture", + "onPointerDownCapture", + "onPointerEnterCapture", + "onPointerLeaveCapture", + "onPointerMoveCapture", + "onPointerOutCapture", + "onPointerOverCapture", + "onPointerUpCapture", + "onProgressCapture", + "onRateChangeCapture", + "onResetCapture", + "onScrollCapture", + "onSeekedCapture", + "onSeekingCapture", + "onSelectCapture", + "onStalledCapture", + "onSubmitCapture", + "onSuspendCapture", + "onTimeUpdateCapture", + "onToggleCapture", + "onTouchCancelCapture", + "onTouchEndCapture", + "onTouchMoveCapture", + "onTouchStartCapture", + "onTransitionEndCapture", + "onVolumeChangeCapture", + "onWaitingCapture", + "onWheelCapture", +]; + +/** + * The base class that all the enent collectors should be based upon. + */ +class MainEventCollector { + /** + * We allow displaying chrome events if the page is chrome or if + * `devtools.chrome.enabled = true`. + */ + get chromeEnabled() { + if (typeof this._chromeEnabled === "undefined") { + this._chromeEnabled = Services.prefs.getBoolPref( + "devtools.chrome.enabled" + ); + } + + return this._chromeEnabled; + } + + /** + * Check if a node has any event listeners attached. Please do not override + * this method... your getListeners() implementation needs to have the + * following signature: + * `getListeners(node, {checkOnly} = {})` + * + * @param {DOMNode} node + * The not for which we want to check for event listeners. + * @return {Boolean} + * true if the node has event listeners, false otherwise. + */ + hasListeners(node) { + return this.getListeners(node, { + checkOnly: true, + }); + } + + /** + * Get all listeners for a node. This method must be overridden. + * + * @param {DOMNode} node + * The not for which we want to get event listeners. + * @param {Object} options + * An object for passing in options. + * @param {Boolean} [options.checkOnly = false] + * Don't get any listeners but return true when the first event is + * found. + * @return {Array} + * An array of event handlers. + */ + getListeners(node, { checkOnly }) { + throw new Error("You have to implement the method getListeners()!"); + } + + /** + * Get unfiltered DOM Event listeners for a node. + * NOTE: These listeners may contain invalid events and events based + * on C++ rather than JavaScript. + * + * @param {DOMNode} node + * The node for which we want to get unfiltered event listeners. + * @return {Array} + * An array of unfiltered event listeners or an empty array + */ + getDOMListeners(node) { + let listeners; + if ( + typeof node.nodeName !== "undefined" && + node.nodeName.toLowerCase() === "html" + ) { + const winListeners = + Services.els.getListenerInfoFor(node.ownerGlobal) || []; + const docElementListeners = Services.els.getListenerInfoFor(node) || []; + const docListeners = + Services.els.getListenerInfoFor(node.parentNode) || []; + + listeners = [...winListeners, ...docElementListeners, ...docListeners]; + } else { + listeners = Services.els.getListenerInfoFor(node) || []; + } + + return listeners.filter(listener => { + const obj = this.unwrap(listener.listenerObject); + return !obj || !obj[EXCLUDED_LISTENER]; + }); + } + + getJQuery(node) { + if (Cu.isDeadWrapper(node)) { + return null; + } + + const global = this.unwrap(node.ownerGlobal); + if (!global) { + return null; + } + + const hasJQuery = global.jQuery?.fn?.jquery; + + if (hasJQuery) { + return global.jQuery; + } + return null; + } + + unwrap(obj) { + return Cu.isXrayWrapper(obj) ? obj.wrappedJSObject : obj; + } + + isChromeHandler(handler) { + try { + const handlerPrincipal = Cu.getObjectPrincipal(handler); + + // Chrome codebase may register listeners on the page from a frame script or + // JSM <video> tags may also report internal listeners, but they won't be + // coming from the system principal. Instead, they will be using an expanded + // principal. + return ( + handlerPrincipal.isSystemPrincipal || + handlerPrincipal.isExpandedPrincipal + ); + } catch (e) { + // Anything from a dead object to a CSP error can leave us here so let's + // return false so that we can fail gracefully. + return false; + } + } +} + +/** + * Get or detect DOM events. These may include DOM events created by libraries + * that enable their custom events to work. At this point we are unable to + * effectively filter them as they may be proxied or wrapped. Although we know + * there is an event, we may not know the true contents until it goes + * through `processHandlerForEvent()`. + */ +class DOMEventCollector extends MainEventCollector { + getListeners(node, { checkOnly } = {}) { + const handlers = []; + const listeners = this.getDOMListeners(node); + + for (const listener of listeners) { + // Ignore listeners without a type, e.g. + // node.addEventListener("", function() {}) + if (!listener.type) { + continue; + } + + // Get the listener object, either a Function or an Object. + const obj = listener.listenerObject; + + // Ignore listeners without any listener, e.g. + // node.addEventListener("mouseover", null); + if (!obj) { + continue; + } + + let handler = null; + + // An object without a valid handleEvent is not a valid listener. + if (typeof obj === "object") { + const unwrapped = this.unwrap(obj); + if (typeof unwrapped.handleEvent === "function") { + handler = Cu.unwaiveXrays(unwrapped.handleEvent); + } + } else if (typeof obj === "function") { + // Ignore DOM events used to trigger jQuery events as they are only + // useful to the developers of the jQuery library. + if (JQUERY_LIVE_REGEX.test(obj.toString())) { + continue; + } + // Otherwise, the other valid listener type is function. + handler = obj; + } + + // Ignore listeners that have no handler. + if (!handler) { + continue; + } + + // If we shouldn't be showing chrome events due to context and this is a + // chrome handler we can ignore it. + if (!this.chromeEnabled && this.isChromeHandler(handler)) { + continue; + } + + // If this is checking if a node has any listeners then we have found one + // so return now. + if (checkOnly) { + return true; + } + + const eventInfo = { + nsIEventListenerInfo: listener, + capturing: listener.capturing, + type: listener.type, + handler, + enabled: listener.enabled, + }; + + handlers.push(eventInfo); + } + + // If this is checking if a node has any listeners then none were found so + // return false. + if (checkOnly) { + return false; + } + + return handlers; + } +} + +/** + * Get or detect jQuery events. + */ +class JQueryEventCollector extends MainEventCollector { + // eslint-disable-next-line complexity + getListeners(node, { checkOnly } = {}) { + const jQuery = this.getJQuery(node); + const handlers = []; + + // If jQuery is not on the page, if this is an anonymous node or a pseudo + // element we need to return early. + if ( + !jQuery || + isNativeAnonymous(node) || + isMarkerPseudoElement(node) || + isBeforePseudoElement(node) || + isAfterPseudoElement(node) + ) { + if (checkOnly) { + return false; + } + return handlers; + } + + let eventsObj = null; + const data = jQuery._data || jQuery.data; + + if (data) { + // jQuery 1.2+ + try { + eventsObj = data(node, "events"); + } catch (e) { + // We have no access to a JS object. This is probably due to a CORS + // violation. Using try / catch is the only way to avoid this error. + } + } else { + // JQuery 1.0 & 1.1 + let entry; + try { + entry = entry = jQuery(node)[0]; + } catch (e) { + // We have no access to a JS object. This is probably due to a CORS + // violation. Using try / catch is the only way to avoid this error. + } + + if (!entry || !entry.events) { + if (checkOnly) { + return false; + } + return handlers; + } + + eventsObj = entry.events; + } + + if (eventsObj) { + for (const [type, events] of Object.entries(eventsObj)) { + for (const [, event] of Object.entries(events)) { + // Skip events that are part of jQueries internals. + if (node.nodeType == node.DOCUMENT_NODE && event.selector) { + continue; + } + + if (typeof event === "function" || typeof event === "object") { + // If we shouldn't be showing chrome events due to context and this + // is a chrome handler we can ignore it. + const handler = event.handler || event; + if (!this.chromeEnabled && this.isChromeHandler(handler)) { + continue; + } + + if (checkOnly) { + return true; + } + + const eventInfo = { + type, + handler, + tags: "jQuery", + hide: { + capturing: true, + }, + }; + + handlers.push(eventInfo); + } + } + } + } + + if (checkOnly) { + return false; + } + return handlers; + } +} + +/** + * Get or detect jQuery live events. + */ +class JQueryLiveEventCollector extends MainEventCollector { + // eslint-disable-next-line complexity + getListeners(node, { checkOnly } = {}) { + const jQuery = this.getJQuery(node); + const handlers = []; + + if (!jQuery) { + if (checkOnly) { + return false; + } + return handlers; + } + + const data = jQuery._data || jQuery.data; + + if (data) { + // Live events are added to the document and bubble up to all elements. + // Any element matching the specified selector will trigger the live + // event. + const win = this.unwrap(node.ownerGlobal); + let events = null; + + try { + events = data(win.document, "events"); + } catch (e) { + // We have no access to a JS object. This is probably due to a CORS + // violation. Using try / catch is the only way to avoid this error. + } + + if (events) { + for (const [, eventHolder] of Object.entries(events)) { + for (const [idx, event] of Object.entries(eventHolder)) { + if (typeof idx !== "string" || isNaN(parseInt(idx, 10))) { + continue; + } + + let selector = event.selector; + + if (!selector && event.data) { + selector = event.data.selector || event.data || event.selector; + } + + if (!selector || !node.ownerDocument) { + continue; + } + + let matches; + try { + matches = node.matches && node.matches(selector); + } catch (e) { + // Invalid selector, do nothing. + } + + if (!matches) { + continue; + } + + if (typeof event === "function" || typeof event === "object") { + // If we shouldn't be showing chrome events due to context and this + // is a chrome handler we can ignore it. + const handler = event.handler || event; + if (!this.chromeEnabled && this.isChromeHandler(handler)) { + continue; + } + + if (checkOnly) { + return true; + } + const eventInfo = { + type: event.origType || event.type.substr(selector.length + 1), + handler, + tags: "jQuery,Live", + hide: { + capturing: true, + }, + }; + + if (!eventInfo.type && event.data?.live) { + eventInfo.type = event.data.live; + } + + handlers.push(eventInfo); + } + } + } + } + } + + if (checkOnly) { + return false; + } + return handlers; + } + + normalizeListener(handlerDO) { + function isFunctionInProxy(funcDO) { + // If the anonymous function is inside the |proxy| function and the + // function only has guessed atom, the guessed atom should starts with + // "proxy/". + const displayName = funcDO.displayName; + if (displayName && displayName.startsWith("proxy/")) { + return true; + } + + // If the anonymous function is inside the |proxy| function and the + // function gets name at compile time by SetFunctionName, its guessed + // atom doesn't contain "proxy/". In that case, check if the caller is + // "proxy" function, as a fallback. + const calleeDS = funcDO.environment?.calleeScript; + if (!calleeDS) { + return false; + } + const calleeName = calleeDS.displayName; + return calleeName == "proxy"; + } + + function getFirstFunctionVariable(funcDO) { + // The handler function inside the |proxy| function should point the + // unwrapped function via environment variable. + const names = funcDO.environment ? funcDO.environment.names() : []; + for (const varName of names) { + const varDO = handlerDO.environment + ? handlerDO.environment.getVariable(varName) + : null; + if (!varDO) { + continue; + } + if (varDO.class == "Function") { + return varDO; + } + } + return null; + } + + if (!isFunctionInProxy(handlerDO)) { + return handlerDO; + } + + const MAX_NESTED_HANDLER_COUNT = 2; + for (let i = 0; i < MAX_NESTED_HANDLER_COUNT; i++) { + const funcDO = getFirstFunctionVariable(handlerDO); + if (!funcDO) { + return handlerDO; + } + + handlerDO = funcDO; + if (isFunctionInProxy(handlerDO)) { + continue; + } + break; + } + + return handlerDO; + } +} + +/** + * Get or detect React events. + */ +class ReactEventCollector extends MainEventCollector { + getListeners(node, { checkOnly } = {}) { + const handlers = []; + const props = this.getProps(node); + + if (props) { + for (const [name, prop] of Object.entries(props)) { + if (REACT_EVENT_NAMES.includes(name)) { + const listener = prop?.__reactBoundMethod || prop; + + if (typeof listener !== "function") { + continue; + } + + if (!this.chromeEnabled && this.isChromeHandler(listener)) { + continue; + } + + if (checkOnly) { + return true; + } + + const handler = { + type: name, + handler: listener, + tags: "React", + override: { + capturing: name.endsWith("Capture"), + }, + }; + + handlers.push(handler); + } + } + } + + if (checkOnly) { + return false; + } + + return handlers; + } + + getProps(node) { + node = this.unwrap(node); + + for (const key of Object.keys(node)) { + if (key.startsWith("__reactInternalInstance$")) { + const value = node[key]; + if (value.memoizedProps) { + return value.memoizedProps; // React 16 + } + return value?._currentElement?.props; // React 15 + } + } + return null; + } + + normalizeListener(handlerDO, listener) { + let functionText = ""; + + if (handlerDO.boundTargetFunction) { + handlerDO = handlerDO.boundTargetFunction; + } + + const script = handlerDO.script; + // Script might be undefined (eg for methods bound several times, see + // https://bugzilla.mozilla.org/show_bug.cgi?id=1589658) + const introScript = script?.source.introductionScript; + + // If this is a Babel transpiled function we have no access to the + // source location so we need to hide the filename and debugger + // icon. + if (introScript && introScript.displayName.endsWith("/transform.run")) { + listener.hide.debugger = true; + listener.hide.filename = true; + + if (!handlerDO.isArrowFunction) { + functionText += "function ("; + } else { + functionText += "("; + } + + functionText += handlerDO.parameterNames.join(", "); + + functionText += ") {\n"; + + const scriptSource = script.source.text; + functionText += scriptSource.substr( + script.sourceStart, + script.sourceLength + ); + + listener.override.handler = functionText; + } + + return handlerDO; + } +} + +/** + * The exposed class responsible for gathering events. + */ +class EventCollector { + constructor(targetActor) { + this.targetActor = targetActor; + + // The event collector array. Please preserve the order otherwise there will + // be multiple failing tests. + this.eventCollectors = [ + new ReactEventCollector(), + new JQueryLiveEventCollector(), + new JQueryEventCollector(), + new DOMEventCollector(), + ]; + } + + /** + * Destructor (must be called manually). + */ + destroy() { + this.eventCollectors = null; + } + + /** + * Iterate through all event collectors returning on the first found event. + * + * @param {DOMNode} node + * The node to be checked for events. + * @return {Boolean} + * True if the node has event listeners, false otherwise. + */ + hasEventListeners(node) { + for (const collector of this.eventCollectors) { + if (collector.hasListeners(node)) { + return true; + } + } + + return false; + } + + /** + * We allow displaying chrome events if the page is chrome or if + * `devtools.chrome.enabled = true`. + */ + get chromeEnabled() { + if (typeof this._chromeEnabled === "undefined") { + this._chromeEnabled = Services.prefs.getBoolPref( + "devtools.chrome.enabled" + ); + } + + return this._chromeEnabled; + } + + /** + * + * @param {DOMNode} node + * The node for which events are to be gathered. + * @return {Array<Object>} + * An array containing objects in the following format: + * { + * {String} type: The event type, e.g. "click" + * {Function} handler: The function called when event is triggered. + * {Boolean} enabled: Whether the listener is enabled or not (event listeners can + * be disabled via the inspector) + * {String} tags: Comma separated list of tags displayed inside event bubble (e.g. "JQuery") + * {Object} hide: Flags for hiding certain properties. + * {Boolean} capturing + * } + * {Boolean} native + * {String|undefined} sourceActor: The sourceActor id of the event listener + * {nsIEventListenerInfo|undefined} nsIEventListenerInfo + * } + */ + getEventListeners(node) { + const listenerArray = []; + let dbg; + if (!this.chromeEnabled) { + dbg = new Debugger(); + } else { + // When the chrome pref is turned on, we may try to debug system compartments. + // But since bug 1517210, the server is also loaded using the system principal + // and so here, we have to ensure using a special Debugger instance, loaded + // in a compartment flagged with invisibleToDebugger=true. This helps the Debugger + // know about the precise boundary between debuggee and debugger code. + const ChromeDebugger = require("ChromeDebugger"); + dbg = new ChromeDebugger(); + } + + for (const collector of this.eventCollectors) { + const listeners = collector.getListeners(node); + + if (!listeners) { + continue; + } + + for (const listener of listeners) { + const eventObj = this.processHandlerForEvent( + listener, + dbg, + collector.normalizeListener + ); + if (eventObj) { + listenerArray.push(eventObj); + } + } + } + + listenerArray.sort((a, b) => { + return a.type.localeCompare(b.type); + }); + + return listenerArray; + } + + /** + * Process an event listener. + * + * @param {EventListener} listener + * The event listener to process. + * @param {Debugger} dbg + * Debugger instance. + * @param {Function|null} normalizeListener + * An optional function that will be called to retrieve data about the listener. + * It should be a *Collector method. + * + * @return {Array} + * An array of objects where a typical object looks like this: + * { + * type: "click", + * handler: function() { doSomething() }, + * origin: "http://www.mozilla.com", + * tags: tags, + * capturing: true, + * hide: { + * capturing: true + * }, + * native: false, + * enabled: true + * sourceActor: "sourceActor.1234", + * nsIEventListenerInfo: nsIEventListenerInfo {…}, + * } + */ + // eslint-disable-next-line complexity + processHandlerForEvent(listener, dbg, normalizeListener) { + let globalDO; + let eventObj; + + try { + const { capturing, handler } = listener; + + const global = Cu.getGlobalForObject(handler); + + // It is important that we recreate the globalDO for each handler because + // their global object can vary e.g. resource:// URLs on a video control. If + // we don't do this then all chrome listeners simply display "native code." + globalDO = dbg.addDebuggee(global); + let listenerDO = globalDO.makeDebuggeeValue(handler); + + if (normalizeListener) { + listenerDO = normalizeListener(listenerDO, listener); + } + + const hide = listener.hide || {}; + const override = listener.override || {}; + const tags = listener.tags || ""; + const type = listener.type || ""; + const enabled = !!listener.enabled; + let functionSource = handler.toString(); + let line = 0; + let column = null; + let native = false; + let url = ""; + let sourceActor = ""; + + // If the listener is an object with a 'handleEvent' method, use that. + if ( + listenerDO.class === "Object" || + /^XUL\w*Element$/.test(listenerDO.class) + ) { + let desc; + + while (!desc && listenerDO) { + desc = listenerDO.getOwnPropertyDescriptor("handleEvent"); + listenerDO = listenerDO.proto; + } + + if (desc?.value) { + listenerDO = desc.value; + } + } + + // If the listener is bound to a different context then we need to switch + // to the bound function. + if (listenerDO.isBoundFunction) { + listenerDO = listenerDO.boundTargetFunction; + } + + const { isArrowFunction, name, script, parameterNames } = listenerDO; + + if (script) { + const scriptSource = script.source.text; + + // NOTE: Debugger.Script.prototype.startColumn is 1-based. + // Convert to 0-based, while keeping the wasm's column (1) as is. + // (bug 1863878) + const columnBase = script.format === "wasm" ? 0 : 1; + + line = script.startLine; + column = script.startColumn - columnBase; + url = script.url; + const actor = this.targetActor.sourcesManager.getOrCreateSourceActor( + script.source + ); + sourceActor = actor ? actor.actorID : null; + + // Checking for the string "[native code]" is the only way at this point + // to check for native code. Even if this provides a false positive then + // grabbing the source code a second time is harmless. + if ( + functionSource === "[object Object]" || + functionSource === "[object XULElement]" || + functionSource.includes("[native code]") + ) { + functionSource = scriptSource.substr( + script.sourceStart, + script.sourceLength + ); + + // At this point the script looks like this: + // () { ... } + // We prefix this with "function" if it is not a fat arrow function. + if (!isArrowFunction) { + functionSource = "function " + functionSource; + } + } + } else { + // If the listener is a native one (provided by C++ code) then we have no + // access to the script. We use the native flag to prevent showing the + // debugger button because the script is not available. + native = true; + } + + // Arrow function text always contains the parameters. Function + // parameters are often missing e.g. if Array.sort is used as a handler. + // If they are missing we provide the parameters ourselves. + if (parameterNames && parameterNames.length) { + const prefix = "function " + name + "()"; + const paramString = parameterNames.join(", "); + + if (functionSource.startsWith(prefix)) { + functionSource = functionSource.substr(prefix.length); + + functionSource = `function ${name} (${paramString})${functionSource}`; + } + } + + // If the listener is native code we display the filename "[native code]." + // This is the official string and should *not* be translated. + let origin; + if (native) { + origin = "[native code]"; + } else { + origin = + url + + (line ? ":" + line + (column === null ? "" : ":" + column) : ""); + } + + eventObj = { + type: override.type || type, + handler: override.handler || functionSource.trim(), + origin: override.origin || origin, + tags: override.tags || tags, + capturing: + typeof override.capturing !== "undefined" + ? override.capturing + : capturing, + hide: typeof override.hide !== "undefined" ? override.hide : hide, + native, + sourceActor, + nsIEventListenerInfo: listener.nsIEventListenerInfo, + enabled, + }; + + // Hide the debugger icon for DOM0 and native listeners. DOM0 listeners are + // generated dynamically from e.g. an onclick="" attribute so the script + // doesn't actually exist. + if (!sourceActor) { + eventObj.hide.debugger = true; + } + } finally { + // Ensure that we always remove the debuggee. + if (globalDO) { + dbg.removeDebuggee(globalDO); + } + } + + return eventObj; + } +} + +exports.EventCollector = EventCollector; diff --git a/devtools/server/actors/inspector/inspector.js b/devtools/server/actors/inspector/inspector.js new file mode 100644 index 0000000000..cdfa892889 --- /dev/null +++ b/devtools/server/actors/inspector/inspector.js @@ -0,0 +1,355 @@ +/* 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 { Actor } = require("resource://devtools/shared/protocol.js"); +const { + inspectorSpec, +} = require("resource://devtools/shared/specs/inspector.js"); + +const { setTimeout } = ChromeUtils.importESModule( + "resource://gre/modules/Timer.sys.mjs" +); +const { + LongStringActor, +} = require("resource://devtools/server/actors/string.js"); + +loader.lazyRequireGetter( + this, + "InspectorActorUtils", + "resource://devtools/server/actors/inspector/utils.js" +); +loader.lazyRequireGetter( + this, + "WalkerActor", + "resource://devtools/server/actors/inspector/walker.js", + true +); +loader.lazyRequireGetter( + this, + "EyeDropper", + "resource://devtools/server/actors/highlighters/eye-dropper.js", + true +); +loader.lazyRequireGetter( + this, + "PageStyleActor", + "resource://devtools/server/actors/page-style.js", + true +); +loader.lazyRequireGetter( + this, + ["CustomHighlighterActor", "isTypeRegistered", "HighlighterEnvironment"], + "resource://devtools/server/actors/highlighters.js", + true +); +loader.lazyRequireGetter( + this, + "CompatibilityActor", + "resource://devtools/server/actors/compatibility/compatibility.js", + true +); + +const SVG_NS = "http://www.w3.org/2000/svg"; +const XUL_NS = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"; + +/** + * Server side of the inspector actor, which is used to create + * inspector-related actors, including the walker. + */ +class InspectorActor extends Actor { + constructor(conn, targetActor) { + super(conn, inspectorSpec); + this.targetActor = targetActor; + + this._onColorPicked = this._onColorPicked.bind(this); + this._onColorPickCanceled = this._onColorPickCanceled.bind(this); + this.destroyEyeDropper = this.destroyEyeDropper.bind(this); + } + + destroy() { + super.destroy(); + this.destroyEyeDropper(); + + this._compatibility = null; + this._pageStylePromise = null; + this._walkerPromise = null; + this.walker = null; + this.targetActor = null; + } + + get window() { + return this.targetActor.window; + } + + getWalker(options = {}) { + if (this._walkerPromise) { + return this._walkerPromise; + } + + this._walkerPromise = new Promise(resolve => { + const domReady = () => { + const targetActor = this.targetActor; + this.walker = new WalkerActor(this.conn, targetActor, options); + this.manage(this.walker); + this.walker.once("destroyed", () => { + this._walkerPromise = null; + this._pageStylePromise = null; + }); + resolve(this.walker); + }; + + if (this.window.document.readyState === "loading") { + // Expose an abort controller for DOMContentLoaded to remove the + // listener unconditionally, even if the race hits the timeout. + const abortController = new AbortController(); + Promise.race([ + new Promise(r => { + this.window.addEventListener("DOMContentLoaded", r, { + capture: true, + once: true, + signal: abortController.signal, + }); + }), + // The DOMContentLoaded event will never be emitted on documents stuck + // in the loading state, for instance if document.write was called + // without calling document.close. + // TODO: It is not clear why we are waiting for the event overall, see + // Bug 1766279 to actually stop listening to the event altogether. + new Promise(r => setTimeout(r, 500)), + ]) + .then(domReady) + .finally(() => abortController.abort()); + } else { + domReady(); + } + }); + + return this._walkerPromise; + } + + getPageStyle() { + if (this._pageStylePromise) { + return this._pageStylePromise; + } + + this._pageStylePromise = this.getWalker().then(walker => { + const pageStyle = new PageStyleActor(this); + this.manage(pageStyle); + return pageStyle; + }); + return this._pageStylePromise; + } + + getCompatibility() { + if (this._compatibility) { + return this._compatibility; + } + + this._compatibility = new CompatibilityActor(this); + this.manage(this._compatibility); + return this._compatibility; + } + + /** + * 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 + */ + async getHighlighterByType(typeName) { + if (isTypeRegistered(typeName)) { + const highlighterActor = new CustomHighlighterActor(this, typeName); + if (highlighterActor.instance.isReady) { + await highlighterActor.instance.isReady; + } + + return highlighterActor; + } + 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(url, maxDim) { + const img = new this.window.Image(); + img.src = url; + + // imageToImageData waits for the image to load. + return InspectorActorUtils.imageToImageData(img, maxDim).then(imageData => { + return { + data: new 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(url, node) { + const document = InspectorActorUtils.isNodeDead(node) + ? this.window.document + : InspectorActorUtils.nodeDocument(node.rawNode); + + if (!document) { + return url; + } + + const baseURI = Services.io.newURI(document.location.href); + 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() { + this.destroyEyeDropper(); + this._highlighterEnv = new HighlighterEnvironment(); + this._highlighterEnv.initFromTargetActor(this.targetActor); + this._eyeDropper = new EyeDropper(this._highlighterEnv); + return this._eyeDropper.isReady; + } + + /** + * Destroy the current eye-dropper highlighter instance. + */ + destroyEyeDropper() { + 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 + */ + async pickColorFromPage(options) { + await this.createEyeDropper(); + this._eyeDropper.show(this.window.document.documentElement, options); + this._eyeDropper.once("selected", this._onColorPicked); + this._eyeDropper.once("canceled", this._onColorPickCanceled); + this.targetActor.once("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() { + if (this._eyeDropper) { + this._eyeDropper.hide(); + this._eyeDropper.off("selected", this._onColorPicked); + this._eyeDropper.off("canceled", this._onColorPickCanceled); + this.targetActor.off("will-navigate", this.destroyEyeDropper); + } + } + + /** + * Check if the current document supports highlighters using a canvasFrame anonymous + * content container. + * It is impossible to detect the feature programmatically as some document types simply + * don't render the canvasFrame without throwing any error. + */ + supportsHighlighters() { + const doc = this.targetActor.window.document; + const ns = doc.documentElement.namespaceURI; + + // XUL documents do not support insertAnonymousContent(). + if (ns === XUL_NS) { + return false; + } + + // SVG documents do not render the canvasFrame (see Bug 1157592). + if (ns === SVG_NS) { + return false; + } + + return true; + } + + _onColorPicked(color) { + this.emit("color-picked", color); + } + + _onColorPickCanceled() { + this.emit("color-pick-canceled"); + } +} + +exports.InspectorActor = InspectorActor; diff --git a/devtools/server/actors/inspector/moz.build b/devtools/server/actors/inspector/moz.build new file mode 100644 index 0000000000..03c69dc9fe --- /dev/null +++ b/devtools/server/actors/inspector/moz.build @@ -0,0 +1,21 @@ +# -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*- +# vim: set filetype=python: +# 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/. + +DevToolsModules( + "constants.js", + "css-logic.js", + "custom-element-watcher.js", + "document-walker.js", + "event-collector.js", + "inspector.js", + "node-picker.js", + "node.js", + "utils.js", + "walker.js", +) + +with Files("**"): + BUG_COMPONENT = ("DevTools", "Inspector") diff --git a/devtools/server/actors/inspector/node-picker.js b/devtools/server/actors/inspector/node-picker.js new file mode 100644 index 0000000000..4e090959c9 --- /dev/null +++ b/devtools/server/actors/inspector/node-picker.js @@ -0,0 +1,435 @@ +/* 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"; + +loader.lazyRequireGetter( + this, + "isRemoteBrowserElement", + "resource://devtools/shared/layout/utils.js", + true +); +loader.lazyRequireGetter( + this, + "HighlighterEnvironment", + "resource://devtools/server/actors/highlighters.js", + true +); +loader.lazyRequireGetter( + this, + "RemoteNodePickerNotice", + "resource://devtools/server/actors/highlighters/remote-node-picker-notice.js", + true +); + +const IS_OSX = Services.appinfo.OS === "Darwin"; + +class NodePicker { + #eventListenersAbortController; + #remoteNodePickerNoticeHighlighter; + + constructor(walker, targetActor) { + this._walker = walker; + this._targetActor = targetActor; + + this._isPicking = false; + this._hoveredNode = null; + this._currentNode = null; + + this._onHovered = this._onHovered.bind(this); + this._onKey = this._onKey.bind(this); + this._onPick = this._onPick.bind(this); + this._onSuppressedEvent = this._onSuppressedEvent.bind(this); + this._preventContentEvent = this._preventContentEvent.bind(this); + } + + get remoteNodePickerNoticeHighlighter() { + if (!this.#remoteNodePickerNoticeHighlighter) { + const env = new HighlighterEnvironment(); + env.initFromTargetActor(this._targetActor); + this.#remoteNodePickerNoticeHighlighter = new RemoteNodePickerNotice(env); + } + + return this.#remoteNodePickerNoticeHighlighter; + } + + _findAndAttachElement(event) { + // originalTarget allows access to the "real" element before any retargeting + // is applied, such as in the case of XBL anonymous elements. See also + // https://developer.mozilla.org/docs/XBL/XBL_1.0_Reference/Anonymous_Content#Event_Flow_and_Targeting + let node = event.originalTarget || event.target; + + // When holding the Shift key, search for the element at the mouse position (as opposed + // to the event target). This would make it possible to pick nodes for which we won't + // get events for (e.g. elements with `pointer-events: none`). + if (event.shiftKey) { + node = this._findNodeAtMouseEventPosition(event) || node; + } + + return this._walker.attachElement(node); + } + + /** + * Return the topmost visible element located at the event mouse position. This is + * different from retrieving the event target as it allows to retrieve elements for which + * we wouldn't have mouse event triggered (e.g. elements with `pointer-events: none`) + * + * @param {MouseEvent} event + * @returns HTMLElement + */ + _findNodeAtMouseEventPosition(event) { + const winUtils = this._targetActor.window.windowUtils; + const rectSize = 1; + const elements = winUtils.nodesFromRect( + // aX + event.clientX, + // aY + event.clientY, + // aTopSize + rectSize, + // aRightSize + rectSize, + // aBottomSize + rectSize, + // aLeftSize + rectSize, + // aIgnoreRootScrollFrame + true, + // aFlushLayout + false, + // aOnlyVisible + true, + // aTransparencyThreshold + 1 + ); + + // ⚠️ When a highlighter was added to the page (which is the case at this point), + // the first element is the html node, and might be the last one as well (See Bug 1744941). + // Until we figure this out, let's pick the second returned item when hit this. + if ( + elements.length > 1 && + ChromeUtils.getClassName(elements[0]) == "HTMLHtmlElement" + ) { + return elements[1]; + } + + return elements[0]; + } + + /** + * Returns `true` if the event was dispatched from a window included in + * the current highlighter environment; or if the highlighter environment has + * chrome privileges + * + * @param {Event} event + * The event to allow + * @return {Boolean} + */ + _isEventAllowed({ view }) { + // Allow "non multiprocess" browser toolbox to inspect documents loaded in the parent + // process (e.g. about:robots) + if (this._targetActor.window.isChromeWindow) { + return true; + } + + return this._targetActor.windows.includes(view); + } + + /** + * Returns true if the passed event original target is in the RemoteNodePickerNotice. + * + * @param {Event} event + * @returns {Boolean} + */ + _isEventInRemoteNodePickerNotice(event) { + return ( + this.#remoteNodePickerNoticeHighlighter && + event.originalTarget?.closest?.( + `#${this.#remoteNodePickerNoticeHighlighter.rootElementId}` + ) + ); + } + + /** + * Pick a node on click. + * + * This method doesn't respond anything interesting, however, it starts + * mousemove, and click listeners on the content document to fire + * events and let connected clients know when nodes are hovered over or + * clicked. + * + * Once a node is picked, events will cease, and listeners will be removed. + */ + _onPick(event) { + // If the picked node is a remote frame, then we need to let the event through + // since there's a highlighter actor in that sub-frame also picking. + if (isRemoteBrowserElement(event.target)) { + return; + } + + this._preventContentEvent(event); + if (!this._isEventAllowed(event)) { + return; + } + + // If the click was done inside the node picker notice highlighter (e.g. clicking the + // close button), directly call its `onClick` method, as it doesn't have event listeners + // itself, to avoid managing events (+ suppressedEventListeners) for the same target + // from different places. + if (this._isEventInRemoteNodePickerNotice(event)) { + this.#remoteNodePickerNoticeHighlighter.onClick(event); + return; + } + + // If Ctrl (Or Cmd on OSX) is pressed, this is only a preview click. + // Send the event to the client, but don't stop picking. + if ((IS_OSX && event.metaKey) || (!IS_OSX && event.ctrlKey)) { + this._walker.emit( + "picker-node-previewed", + this._findAndAttachElement(event) + ); + return; + } + + this._stopPicking(); + + if (!this._currentNode) { + this._currentNode = this._findAndAttachElement(event); + } + + this._walker.emit("picker-node-picked", this._currentNode); + } + + _onHovered(event) { + // If the hovered node is a remote frame, then we need to let the event through + // since there's a highlighter actor in that sub-frame also picking. + if (isRemoteBrowserElement(event.target)) { + return; + } + + this._preventContentEvent(event); + if (!this._isEventAllowed(event)) { + return; + } + + // Always call remoteNodePickerNotice handleHoveredElement so the hover state can be updated + // (it doesn't have its own event listeners to avoid managing events and suppressed + // events for the same target from different places). + if (this.#remoteNodePickerNoticeHighlighter) { + this.#remoteNodePickerNoticeHighlighter.handleHoveredElement(event); + if (this._isEventInRemoteNodePickerNotice(event)) { + return; + } + } + + this._currentNode = this._findAndAttachElement(event); + if (this._hoveredNode !== this._currentNode.node) { + this._walker.emit("picker-node-hovered", this._currentNode); + this._hoveredNode = this._currentNode.node; + } + } + + _onKey(event) { + if (!this._currentNode || !this._isPicking) { + return; + } + + this._preventContentEvent(event); + if (!this._isEventAllowed(event)) { + return; + } + + let currentNode = this._currentNode.node.rawNode; + + /** + * KEY: Action/scope + * LEFT_KEY: wider or parent + * RIGHT_KEY: narrower or child + * ENTER/CARRIAGE_RETURN: Picks currentNode + * ESC/CTRL+SHIFT+C: Cancels picker, picks currentNode + */ + switch (event.keyCode) { + // Wider. + case event.DOM_VK_LEFT: + if (!currentNode.parentElement) { + return; + } + currentNode = currentNode.parentElement; + break; + + // Narrower. + case event.DOM_VK_RIGHT: + if (!currentNode.children.length) { + return; + } + + // Set firstElementChild by default + let child = currentNode.firstElementChild; + // If currentNode is parent of hoveredNode, then + // previously selected childNode is set + const hoveredNode = this._hoveredNode.rawNode; + for (const sibling of currentNode.children) { + if (sibling.contains(hoveredNode) || sibling === hoveredNode) { + child = sibling; + } + } + + currentNode = child; + break; + + // Select the element. + case event.DOM_VK_RETURN: + this._onPick(event); + return; + + // Cancel pick mode. + case event.DOM_VK_ESCAPE: + this.cancelPick(); + this._walker.emit("picker-node-canceled"); + return; + case event.DOM_VK_C: + const { altKey, ctrlKey, metaKey, shiftKey } = event; + + if ( + (IS_OSX && metaKey && altKey | shiftKey) || + (!IS_OSX && ctrlKey && shiftKey) + ) { + this.cancelPick(); + this._walker.emit("picker-node-canceled"); + } + return; + default: + return; + } + + // Store currently attached element + this._currentNode = this._walker.attachElement(currentNode); + this._walker.emit("picker-node-hovered", this._currentNode); + } + + _onSuppressedEvent(event) { + if (event.type == "mousemove") { + this._onHovered(event); + } else if (event.type == "mouseup") { + // Suppressed mousedown/mouseup events will be sent to us before they have + // been converted into click events. Just treat any mouseup as a click. + this._onPick(event); + } + } + + // In most cases, we need to prevent content events from reaching the content. This is + // needed to avoid triggering actions such as submitting forms or following links. + // In the case where the event happens on a remote frame however, we do want to let it + // through. That is because otherwise the pickers started in nested remote frames will + // never have a chance of picking their own elements. + _preventContentEvent(event) { + if (isRemoteBrowserElement(event.target)) { + return; + } + event.stopPropagation(); + event.preventDefault(); + } + + /** + * When the debugger pauses execution in a page, events will not be delivered + * to any handlers added to elements on that page. This method uses the + * document's setSuppressedEventListener interface to bypass this restriction: + * events will be delivered to the callback at times when they would + * otherwise be suppressed. The set of events delivered this way is currently + * limited to mouse events. + * + * @param callback The function to call with suppressed events, or null. + */ + _setSuppressedEventListener(callback) { + if (!this._targetActor?.window?.document) { + return; + } + + // Pass the callback to setSuppressedEventListener as an EventListener. + this._targetActor.window.document.setSuppressedEventListener( + callback ? { handleEvent: callback } : null + ); + } + + _startPickerListeners() { + const target = this._targetActor.chromeEventHandler; + this.#eventListenersAbortController = new AbortController(); + const config = { + capture: true, + signal: this.#eventListenersAbortController.signal, + }; + target.addEventListener("mousemove", this._onHovered, config); + target.addEventListener("click", this._onPick, config); + target.addEventListener("mousedown", this._preventContentEvent, config); + target.addEventListener("mouseup", this._preventContentEvent, config); + target.addEventListener("dblclick", this._preventContentEvent, config); + target.addEventListener("keydown", this._onKey, config); + target.addEventListener("keyup", this._preventContentEvent, config); + + this._setSuppressedEventListener(this._onSuppressedEvent); + } + + _stopPickerListeners() { + this._setSuppressedEventListener(null); + + if (this.#eventListenersAbortController) { + this.#eventListenersAbortController.abort(); + this.#eventListenersAbortController = null; + } + } + + _stopPicking() { + this._stopPickerListeners(); + this._isPicking = false; + this._hoveredNode = null; + if (this.#remoteNodePickerNoticeHighlighter) { + this.#remoteNodePickerNoticeHighlighter.hide(); + } + } + + cancelPick() { + if (this._targetActor.threadActor) { + this._targetActor.threadActor.showOverlay(); + } + + if (this._isPicking) { + this._stopPicking(); + } + } + + pick(doFocus = false, isLocalTab = true) { + if (this._targetActor.threadActor) { + this._targetActor.threadActor.hideOverlay(); + } + + if (this._isPicking) { + return; + } + + this._startPickerListeners(); + this._isPicking = true; + + if (doFocus) { + this._targetActor.window.focus(); + } + + if (!isLocalTab) { + this.remoteNodePickerNoticeHighlighter.show(); + } + } + + resetHoveredNodeReference() { + this._hoveredNode = null; + } + + destroy() { + this.cancelPick(); + + this._targetActor = null; + this._walker = null; + this.#remoteNodePickerNoticeHighlighter = null; + } +} + +exports.NodePicker = NodePicker; diff --git a/devtools/server/actors/inspector/node.js b/devtools/server/actors/inspector/node.js new file mode 100644 index 0000000000..294e3e9564 --- /dev/null +++ b/devtools/server/actors/inspector/node.js @@ -0,0 +1,861 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const { Actor } = require("resource://devtools/shared/protocol.js"); +const { + nodeSpec, + nodeListSpec, +} = require("resource://devtools/shared/specs/node.js"); + +const { + PSEUDO_CLASSES, +} = require("resource://devtools/shared/css/constants.js"); + +loader.lazyRequireGetter( + this, + ["getCssPath", "getXPath", "findCssSelector"], + "resource://devtools/shared/inspector/css-logic.js", + true +); + +loader.lazyRequireGetter( + this, + [ + "getShadowRootMode", + "isAfterPseudoElement", + "isAnonymous", + "isBeforePseudoElement", + "isDirectShadowHostChild", + "isFrameBlockedByCSP", + "isFrameWithChildTarget", + "isMarkerPseudoElement", + "isNativeAnonymous", + "isShadowHost", + "isShadowRoot", + ], + "resource://devtools/shared/layout/utils.js", + true +); + +loader.lazyRequireGetter( + this, + [ + "getBackgroundColor", + "getClosestBackgroundColor", + "getNodeDisplayName", + "imageToImageData", + "isNodeDead", + ], + "resource://devtools/server/actors/inspector/utils.js", + true +); +loader.lazyRequireGetter( + this, + "LongStringActor", + "resource://devtools/server/actors/string.js", + true +); +loader.lazyRequireGetter( + this, + "getFontPreviewData", + "resource://devtools/server/actors/utils/style-utils.js", + true +); +loader.lazyRequireGetter( + this, + "CssLogic", + "resource://devtools/server/actors/inspector/css-logic.js", + true +); +loader.lazyRequireGetter( + this, + "EventCollector", + "resource://devtools/server/actors/inspector/event-collector.js", + true +); +loader.lazyRequireGetter( + this, + "DOMHelpers", + "resource://devtools/shared/dom-helpers.js", + true +); + +const FONT_FAMILY_PREVIEW_TEXT = "The quick brown fox jumps over the lazy dog"; +const FONT_FAMILY_PREVIEW_TEXT_SIZE = 20; + +/** + * Server side of the node actor. + */ +class NodeActor extends Actor { + constructor(walker, node) { + super(walker.conn, nodeSpec); + this.walker = walker; + this.rawNode = node; + this._eventCollector = new EventCollector(this.walker.targetActor); + // Map<id -> nsIEventListenerInfo> that we maintain to be able to disable/re-enable event listeners + // The id is generated from getEventListenerInfo + this._nsIEventListenersInfo = new Map(); + + // Store the original display type and scrollable state and whether or not the node is + // displayed to track changes when reflows occur. + const wasScrollable = this.isScrollable; + + this.currentDisplayType = this.displayType; + this.wasDisplayed = this.isDisplayed; + this.wasScrollable = wasScrollable; + this.currentContainerType = this.containerType; + + if (wasScrollable) { + this.walker.updateOverflowCausingElements( + this, + this.walker.overflowCausingElementsMap + ); + } + } + + toString() { + return ( + "[NodeActor " + this.actorID + " for " + this.rawNode.toString() + "]" + ); + } + + isDocumentElement() { + return ( + this.rawNode.ownerDocument && + this.rawNode.ownerDocument.documentElement === this.rawNode + ); + } + + destroy() { + super.destroy(); + + if (this.mutationObserver) { + if (!Cu.isDeadWrapper(this.mutationObserver)) { + this.mutationObserver.disconnect(); + } + this.mutationObserver = null; + } + + if (this.slotchangeListener) { + if (!isNodeDead(this)) { + this.rawNode.removeEventListener("slotchange", this.slotchangeListener); + } + this.slotchangeListener = null; + } + + if (this._waitForFrameLoadAbortController) { + this._waitForFrameLoadAbortController.abort(); + this._waitForFrameLoadAbortController = null; + } + if (this._waitForFrameLoadIntervalId) { + clearInterval(this._waitForFrameLoadIntervalId); + this._waitForFrameLoadIntervalId = null; + } + + if (this._nsIEventListenersInfo) { + // Re-enable all event listeners that we might have disabled + for (const nsIEventListenerInfo of this._nsIEventListenersInfo.values()) { + // If event listeners/node don't exist anymore, accessing nsIEventListenerInfo.enabled + // will throw. + try { + if (!nsIEventListenerInfo.enabled) { + nsIEventListenerInfo.enabled = true; + } + } catch (e) { + // ignore + } + } + this._nsIEventListenersInfo = null; + } + + this._eventCollector.destroy(); + this._eventCollector = null; + this.rawNode = null; + this.walker = null; + } + + // Returns the JSON representation of this object over the wire. + form() { + const parentNode = this.walker.parentNode(this); + const inlineTextChild = this.walker.inlineTextChild(this); + const shadowRoot = isShadowRoot(this.rawNode); + const hostActor = shadowRoot + ? this.walker.getNode(this.rawNode.host) + : null; + + const form = { + actor: this.actorID, + host: hostActor ? hostActor.actorID : undefined, + 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, + displayType: this.displayType, + isScrollable: this.isScrollable, + isTopLevelDocument: this.isTopLevelDocument, + causesOverflow: this.walker.overflowCausingElementsMap.has(this.rawNode), + containerType: this.containerType, + + // doctype attributes + name: this.rawNode.name, + publicId: this.rawNode.publicId, + systemId: this.rawNode.systemId, + + attrs: this.writeAttrs(), + customElementLocation: this.getCustomElementLocation(), + isMarkerPseudoElement: isMarkerPseudoElement(this.rawNode), + isBeforePseudoElement: isBeforePseudoElement(this.rawNode), + isAfterPseudoElement: isAfterPseudoElement(this.rawNode), + isAnonymous: isAnonymous(this.rawNode), + isNativeAnonymous: isNativeAnonymous(this.rawNode), + isShadowRoot: shadowRoot, + shadowRootMode: getShadowRootMode(this.rawNode), + isShadowHost: isShadowHost(this.rawNode), + isDirectShadowHostChild: isDirectShadowHostChild(this.rawNode), + pseudoClassLocks: this.writePseudoClassLocks(), + mutationBreakpoints: this.walker.getMutationBreakpoints(this), + + isDisplayed: this.isDisplayed, + isInHTMLDocument: + this.rawNode.ownerDocument && + this.rawNode.ownerDocument.contentType === "text/html", + hasEventListeners: this._hasEventListeners, + traits: {}, + }; + + if (this.isDocumentElement()) { + form.isDocumentElement = true; + } + + if (isFrameBlockedByCSP(this.rawNode)) { + form.numChildren = 0; + } + + // Flag the node if a different walker is needed to retrieve its children (i.e. if + // this is a remote frame, or if it's an iframe and we're creating targets for every iframes) + if (this.useChildTargetToFetchChildren) { + form.useChildTargetToFetchChildren = true; + // Declare at least one child (the #document element) so + // that they can be expanded. + form.numChildren = 1; + } + form.browsingContextID = this.rawNode.browsingContext?.id; + + return form; + } + + /** + * Watch the given document node for mutations using the DOM observer + * API. + */ + watchDocument(doc, callback) { + if (!doc.defaultView) { + return; + } + + const 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. + const observer = new doc.defaultView.MutationObserver(callback); + observer.mergeAttributeRecords = true; + observer.observe(node, { + attributes: true, + characterData: true, + characterDataOldValue: true, + childList: true, + subtree: true, + chromeOnlyNodes: true, + }); + this.mutationObserver = observer; + } + + /** + * Watch for all "slotchange" events on the node. + */ + watchSlotchange(callback) { + this.slotchangeListener = callback; + this.rawNode.addEventListener("slotchange", this.slotchangeListener); + } + + /** + * Check if the current node represents an element (e.g. an iframe) which has a dedicated + * target for its underlying document that we would need to use to fetch the child nodes. + * This will be the case for iframes if EFT is enabled, or if this is a remote iframe and + * fission is enabled. + */ + get useChildTargetToFetchChildren() { + return isFrameWithChildTarget(this.walker.targetActor, this.rawNode); + } + + get isTopLevelDocument() { + return this.rawNode === this.walker.rootDoc; + } + + // 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 ( + isMarkerPseudoElement(this.rawNode) || + isBeforePseudoElement(this.rawNode) || + isAfterPseudoElement(this.rawNode) + ) { + return 0; + } + + const rawNode = this.rawNode; + let numChildren = rawNode.childNodes.length; + const hasContentDocument = rawNode.contentDocument; + const 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. + // + // FIXME: We should be able to just check <slot> rather than + // containingShadowRoot. + if ( + numChildren === 0 || + isShadowHost(this.rawNode) || + this.rawNode.containingShadowRoot + ) { + numChildren = this.walker.countChildren(this); + } + + return numChildren; + } + + get computedStyle() { + if (!this._computedStyle) { + this._computedStyle = CssLogic.getComputedStyle(this.rawNode); + } + return this._computedStyle; + } + + /** + * Returns the computed display style property value of the node. + */ + get displayType() { + // Consider all non-element nodes as displayed. + if (isNodeDead(this) || this.rawNode.nodeType !== Node.ELEMENT_NODE) { + return null; + } + + const style = this.computedStyle; + if (!style) { + return null; + } + + let display = null; + try { + display = style.display; + } catch (e) { + // Fails for <scrollbar> elements. + } + + if ( + (display === "grid" || display === "inline-grid") && + (style.gridTemplateRows.startsWith("subgrid") || + style.gridTemplateColumns.startsWith("subgrid")) + ) { + display = "subgrid"; + } + + return display; + } + + /** + * Returns the computed containerType style property value of the node. + */ + get containerType() { + // non-element nodes can't be containers + if ( + isNodeDead(this) || + this.rawNode.nodeType !== Node.ELEMENT_NODE || + !this.computedStyle + ) { + return null; + } + + return this.computedStyle.containerType; + } + + /** + * Check whether the node currently has scrollbars and is scrollable. + */ + get isScrollable() { + return ( + this.rawNode.nodeType === Node.ELEMENT_NODE && + this.rawNode.hasVisibleScrollbars + ); + } + + /** + * Is the node currently displayed? + */ + get isDisplayed() { + const type = this.displayType; + + // Consider all non-elements or elements with no display-types to be displayed. + if (!type) { + return true; + } + + // Otherwise consider elements to be displayed only if their display-types is other + // than "none"". + return type !== "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() { + // We need to pass a debugger instance from this compartment because + // otherwise we can't make use of it inside the event-collector module. + const dbg = this.getParent().targetActor.makeDebugger(); + return this._eventCollector.hasEventListeners(this.rawNode, dbg); + } + + writeAttrs() { + // If the node has no attributes or this.rawNode is the document node and a + // node with `name="attributes"` exists in the DOM we need to bail. + if ( + !this.rawNode.attributes || + !NamedNodeMap.isInstance(this.rawNode.attributes) + ) { + return undefined; + } + + return [...this.rawNode.attributes].map(attr => { + return { namespace: attr.namespace, name: attr.name, value: attr.value }; + }); + } + + writePseudoClassLocks() { + if (this.rawNode.nodeType !== Node.ELEMENT_NODE) { + return undefined; + } + let ret = undefined; + for (const pseudo of PSEUDO_CLASSES) { + if (InspectorUtils.hasPseudoClassLock(this.rawNode, pseudo)) { + ret = ret || []; + ret.push(pseudo); + } + } + return ret; + } + + /** + * Retrieve the script location of the custom element definition for this node, when + * relevant. To be linked to a custom element definition + */ + getCustomElementLocation() { + // Get a reference to the custom element definition function. + const name = this.rawNode.localName; + + if (!this.rawNode.ownerGlobal) { + return undefined; + } + + const customElementsRegistry = this.rawNode.ownerGlobal.customElements; + const customElement = + customElementsRegistry && customElementsRegistry.get(name); + if (!customElement) { + return undefined; + } + // Create debugger object for the customElement function. + const global = Cu.getGlobalForObject(customElement); + + const dbg = this.getParent().targetActor.makeDebugger(); + + // If we hit a <browser> element of Firefox, its global will be the chrome window + // which is system principal and will be in the same compartment as the debuggee. + // For some reason, this happens when we run the content toolbox. As for the content + // toolboxes, the modules are loaded in the same compartment as the <browser> element, + // this throws as the debugger can _not_ be in the same compartment as the debugger. + // This happens when we toggle fission for content toolbox because we try to reparent + // the Walker of the tab. This happens because we do not detect in Walker.reparentRemoteFrame + // that the target of the tab is the top level. That's because the target is a WindowGlobalTargetActor + // which is retrieved via Node.getEmbedderElement and doesn't return the LocalTabTargetActor. + // We should probably work on TabDescriptor so that the LocalTabTargetActor has a descriptor, + // and see if we can possibly move the local tab specific out of the TargetActor and have + // the TabDescriptor expose a pure WindowGlobalTargetActor?? (See bug 1579042) + if (Cu.getObjectPrincipal(global) == Cu.getObjectPrincipal(dbg)) { + return undefined; + } + + const globalDO = dbg.addDebuggee(global); + const customElementDO = globalDO.makeDebuggeeValue(customElement); + + // Return undefined if we can't find a script for the custom element definition. + if (!customElementDO.script) { + return undefined; + } + + // NOTE: Debugger.Script.prototype.startColumn is 1-based. + // Convert to 0-based, while keeping the wasm's column (1) as is. + // (bug 1863878) + const columnBase = customElementDO.script.format === "wasm" ? 0 : 1; + + return { + url: customElementDO.script.url, + line: customElementDO.script.startLine, + column: customElementDO.script.startColumn - columnBase, + }; + } + + /** + * Returns a LongStringActor with the node's value. + */ + getNodeValue() { + return new LongStringActor(this.conn, this.rawNode.nodeValue || ""); + } + + /** + * Set the node's value to a given string. + */ + setNodeValue(value) { + this.rawNode.nodeValue = value; + } + + /** + * Get a unique selector string for this node. + */ + getUniqueSelector() { + if (Cu.isDeadWrapper(this.rawNode)) { + return ""; + } + return findCssSelector(this.rawNode); + } + + /** + * Get the full CSS path for this node. + * + * @return {String} A CSS selector with a part for the node and each of its ancestors. + */ + getCssPath() { + if (Cu.isDeadWrapper(this.rawNode)) { + return ""; + } + return getCssPath(this.rawNode); + } + + /** + * Get the XPath for this node. + * + * @return {String} The XPath for finding this node on the page. + */ + getXPath() { + if (Cu.isDeadWrapper(this.rawNode)) { + return ""; + } + return getXPath(this.rawNode); + } + + /** + * Scroll the selected node into view. + */ + scrollIntoView() { + 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(maxDim) { + return imageToImageData(this.rawNode, maxDim).then(imageData => { + return { + data: new LongStringActor(this.conn, imageData.data), + size: imageData.size, + }; + }); + } + + /** + * Get all event listeners that are listening on this node. + */ + getEventListenerInfo() { + this._nsIEventListenersInfo.clear(); + + const eventListenersData = this._eventCollector.getEventListeners( + this.rawNode + ); + let counter = 0; + for (const eventListenerData of eventListenersData) { + if (eventListenerData.nsIEventListenerInfo) { + const id = `event-listener-info-${++counter}`; + this._nsIEventListenersInfo.set( + id, + eventListenerData.nsIEventListenerInfo + ); + + eventListenerData.eventListenerInfoId = id; + // remove the nsIEventListenerInfo since we don't want to send it to the client. + delete eventListenerData.nsIEventListenerInfo; + } + } + return eventListenersData; + } + + /** + * Disable a specific event listener given its associated id + * + * @param {String} eventListenerInfoId + */ + disableEventListener(eventListenerInfoId) { + const nsEventListenerInfo = + this._nsIEventListenersInfo.get(eventListenerInfoId); + if (!nsEventListenerInfo) { + throw new Error("Unkown nsEventListenerInfo"); + } + nsEventListenerInfo.enabled = false; + } + + /** + * (Re-)enable a specific event listener given its associated id + * + * @param {String} eventListenerInfoId + */ + enableEventListener(eventListenerInfoId) { + const nsEventListenerInfo = + this._nsIEventListenersInfo.get(eventListenerInfoId); + if (!nsEventListenerInfo) { + throw new Error("Unkown nsEventListenerInfo"); + } + nsEventListenerInfo.enabled = true; + } + + /** + * 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(modifications) { + const rawNode = this.rawNode; + for (const 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.setAttributeDevtoolsNS( + change.attributeNamespace, + change.attributeName, + change.newValue + ); + } else { + rawNode.setAttributeDevtools(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(font, fillStyle = "black") { + const doc = this.rawNode.ownerDocument; + const options = { + previewText: FONT_FAMILY_PREVIEW_TEXT, + previewFontSize: FONT_FAMILY_PREVIEW_TEXT_SIZE, + fillStyle, + }; + const { dataURL, size } = getFontPreviewData(font, doc, options); + + return { data: new LongStringActor(this.conn, dataURL), size }; + } + + /** + * Finds the computed background color of the closest parent with a set background + * color. + * + * @return {String} + * String with the background color of the form rgba(r, g, b, a). Defaults to + * rgba(255, 255, 255, 1) if no background color is found. + */ + getClosestBackgroundColor() { + return getClosestBackgroundColor(this.rawNode); + } + + /** + * Finds the background color range for the parent of a single text node + * (i.e. for multi-colored backgrounds with gradients, images) or a single + * background color for single-colored backgrounds. Defaults to the closest + * background color if an error is encountered. + * + * @return {Object} + * Object with one or more of the following properties: value, min, max + */ + getBackgroundColor() { + return getBackgroundColor(this); + } + + /** + * Returns an object with the width and height of the node's owner window. + * + * @return {Object} + */ + getOwnerGlobalDimensions() { + const win = this.rawNode.ownerGlobal; + return { + innerWidth: win.innerWidth, + innerHeight: win.innerHeight, + }; + } + + /** + * If the current node is an iframe, wait for the content window to be loaded. + */ + async waitForFrameLoad() { + if (this.useChildTargetToFetchChildren) { + // If the document is handled by a dedicated target, we'll wait for a DOCUMENT_EVENT + // on the created target. + throw new Error( + "iframe content document has its own target, use that one instead" + ); + } + + if (Cu.isDeadWrapper(this.rawNode)) { + throw new Error("Node is dead"); + } + + const { contentDocument } = this.rawNode; + if (!contentDocument) { + throw new Error("Can't access contentDocument"); + } + + if (contentDocument.readyState === "uninitialized") { + // If the readyState is "uninitialized", the document is probably an about:blank + // transient document. In such case, we want to wait until the "final" document + // is inserted. + + const { chromeEventHandler } = this.rawNode.ownerGlobal.docShell; + const browsingContextID = this.rawNode.browsingContext.id; + await new Promise((resolve, reject) => { + this._waitForFrameLoadAbortController = new AbortController(); + + chromeEventHandler.addEventListener( + "DOMDocElementInserted", + e => { + const { browsingContext } = e.target.defaultView; + // Check that the document we're notified about is the iframe one. + if (browsingContext.id == browsingContextID) { + resolve(); + this._waitForFrameLoadAbortController.abort(); + } + }, + { signal: this._waitForFrameLoadAbortController.signal } + ); + + // It might happen that the "final" document will be a remote one, living in a + // different process, which means we won't get the DOMDocElementInserted event + // here, and will wait forever. To prevent this Promise to hang forever, we use + // a setInterval to check if the final document can be reached, so we can reject + // if it's not. + // This is definitely not a perfect solution, but I wasn't able to find something + // better for this feature. I think it's _fine_ as this method will be removed + // when EFT is enabled everywhere in release. + this._waitForFrameLoadIntervalId = setInterval(() => { + if (Cu.isDeadWrapper(this.rawNode) || !this.rawNode.contentDocument) { + reject("Can't access the iframe content document"); + clearInterval(this._waitForFrameLoadIntervalId); + this._waitForFrameLoadIntervalId = null; + this._waitForFrameLoadAbortController.abort(); + } + }, 50); + }); + } + + if (this.rawNode.contentDocument.readyState === "loading") { + await new Promise(resolve => { + DOMHelpers.onceDOMReady(this.rawNode.contentWindow, resolve); + }); + } + } +} + +/** + * Server side of a node list as returned by querySelectorAll() + */ +class NodeListActor extends Actor { + constructor(walker, nodeList) { + super(walker.conn, nodeListSpec); + this.walker = walker; + this.nodeList = nodeList || []; + } + + /** + * Items returned by this actor should belong to the parent walker. + */ + marshallPool() { + return this.walker; + } + + // Returns the JSON representation of this object over the wire. + form() { + return { + actor: this.actorID, + length: this.nodeList ? this.nodeList.length : 0, + }; + } + + /** + * Get a single node from the node list. + */ + item(index) { + return this.walker.attachElement(this.nodeList[index]); + } + + /** + * Get a range of the items from the node list. + */ + items(start = 0, end = this.nodeList.length) { + const items = Array.prototype.slice + .call(this.nodeList, start, end) + .map(item => this.walker._getOrCreateNodeActor(item)); + return this.walker.attachElements(items); + } + + release() {} +} + +exports.NodeActor = NodeActor; +exports.NodeListActor = NodeListActor; diff --git a/devtools/server/actors/inspector/utils.js b/devtools/server/actors/inspector/utils.js new file mode 100644 index 0000000000..88c1d45605 --- /dev/null +++ b/devtools/server/actors/inspector/utils.js @@ -0,0 +1,570 @@ +/* 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"; + +loader.lazyRequireGetter( + this, + "colorUtils", + "resource://devtools/shared/css/color.js", + true +); +loader.lazyRequireGetter( + this, + "AsyncUtils", + "resource://devtools/shared/async-utils.js" +); +loader.lazyRequireGetter(this, "flags", "resource://devtools/shared/flags.js"); +loader.lazyRequireGetter( + this, + "DevToolsUtils", + "resource://devtools/shared/DevToolsUtils.js" +); +loader.lazyRequireGetter( + this, + "nodeFilterConstants", + "resource://devtools/shared/dom-node-filter-constants.js" +); +loader.lazyRequireGetter( + this, + ["isNativeAnonymous", "getAdjustedQuads"], + "resource://devtools/shared/layout/utils.js", + true +); +loader.lazyRequireGetter( + this, + "CssLogic", + "resource://devtools/server/actors/inspector/css-logic.js", + true +); +loader.lazyRequireGetter( + this, + "getBackgroundFor", + "resource://devtools/server/actors/accessibility/audit/contrast.js", + true +); +loader.lazyRequireGetter( + this, + ["loadSheetForBackgroundCalculation", "removeSheetForBackgroundCalculation"], + "resource://devtools/server/actors/utils/accessibility.js", + true +); +loader.lazyRequireGetter( + this, + "getTextProperties", + "resource://devtools/shared/accessibility.js", + true +); + +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; + +/** + * 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; +}; + +/** + * Returns flex and grid information about a DOM node. + * In particular is it a grid flex/container and/or item? + * + * @param {DOMNode} node + * The node for which then information is required + * @return {Object} + * An object like { grid: { isContainer, isItem }, flex: { isContainer, isItem } } + */ +function getNodeGridFlexType(node) { + return { + grid: getNodeGridType(node), + flex: getNodeFlexType(node), + }; +} + +function getNodeFlexType(node) { + return { + isContainer: node.getAsFlexContainer && !!node.getAsFlexContainer(), + isItem: !!node.parentFlexElement, + }; +} + +function getNodeGridType(node) { + return { + isContainer: node.hasGridFragments && node.hasGridFragments(), + isItem: !!findGridParentContainerForNode(node), + }; +} + +function nodeDocument(node) { + if (Cu.isDeadWrapper(node)) { + return null; + } + return ( + node.ownerDocument || (node.nodeType == Node.DOCUMENT_NODE ? node : null) + ); +} + +function isNodeDead(node) { + return !node || !node.rawNode || Cu.isDeadWrapper(node.rawNode); +} + +function isInXULDocument(el) { + const doc = nodeDocument(el); + return doc?.documentElement && doc.documentElement.namespaceURI === XUL_NS; +} + +/** + * This DeepTreeWalker filter skips whitespace text nodes and anonymous + * content with the exception of ::marker, ::before, and ::after, plus anonymous + * content in XUL document (needed to show all elements in the browser toolbox). + */ +function standardTreeWalkerFilter(node) { + // ::marker, ::before, and ::after are native anonymous content, but we always + // want to show them + if ( + node.nodeName === "_moz_generated_content_marker" || + 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 anonymous roots inside a non-XUL document. + // We need to do this to skip things like form controls, scrollbars, + // video controls, etc (see bug 1187482). + if (isNativeAnonymous(node) && !isInXULDocument(node)) { + return nodeFilterConstants.FILTER_SKIP; + } + + return nodeFilterConstants.FILTER_ACCEPT; +} + +/** + * This DeepTreeWalker filter ignores anonymous content. + */ +function noAnonymousContentTreeWalkerFilter(node) { + // Ignore all native anonymous content inside a non-XUL document. + // We need to do this to skip things like form controls, scrollbars, + // video controls, etc (see bug 1187482). + if (!isInXULDocument(node) && isNativeAnonymous(node)) { + 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 == Node.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; + } + + const quads = node.getBoxQuads({ + createFramesForSuppressedWhitespace: false, + }); + return quads.some(quad => { + const bounds = quad.getBounds(); + return bounds.width && 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) { + const { HTMLImageElement } = image.ownerGlobal; + 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. + const onLoad = AsyncUtils.listenOnce(image, "load"); + + // Reject if loading fails. + const 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. + */ +const imageToImageData = async function (node, maxDim) { + const { HTMLCanvasElement, HTMLImageElement } = node.ownerGlobal; + + const isImg = node instanceof HTMLImageElement; + const 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. + await ensureImageLoaded(node, IMAGE_FETCHING_TIMEOUT); + } + + // Get the image resize ratio if a maxDim was provided + let resizeRatio = 1; + const imgWidth = node.naturalWidth || node.width; + const imgHeight = node.naturalHeight || node.height; + const 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 + const canvas = node.ownerDocument.createElementNS(XHTML_NS, "canvas"); + canvas.width = imgWidth * resizeRatio; + canvas.height = imgHeight * resizeRatio; + const 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, + }, + }; +}; + +/** + * Finds the computed background color of the closest parent with a set background color. + * + * @param {DOMNode} node + * Node for which we want to find closest background color. + * @return {String} + * String with the background color of the form rgba(r, g, b, a). Defaults to + * rgba(255, 255, 255, 1) if no background color is found. + */ +function getClosestBackgroundColor(node) { + let current = node; + + while (current) { + const computedStyle = CssLogic.getComputedStyle(current); + if (computedStyle) { + const currentStyle = computedStyle.getPropertyValue("background-color"); + if (InspectorUtils.isValidCSSColor(currentStyle)) { + const currentCssColor = new colorUtils.CssColor(currentStyle); + if (!currentCssColor.isTransparent()) { + return currentCssColor.rgba; + } + } + } + + current = current.parentNode; + } + + return "rgba(255, 255, 255, 1)"; +} + +/** + * Finds the background image of the closest parent where it is set. + * + * @param {DOMNode} node + * Node for which we want to find the background image. + * @return {String} + * String with the value of the background iamge property. Defaults to "none" if + * no background image is found. + */ +function getClosestBackgroundImage(node) { + let current = node; + + while (current) { + const computedStyle = CssLogic.getComputedStyle(current); + if (computedStyle) { + const currentBackgroundImage = + computedStyle.getPropertyValue("background-image"); + if (currentBackgroundImage !== "none") { + return currentBackgroundImage; + } + } + + current = current.parentNode; + } + + return "none"; +} + +/** + * If the provided node is a grid item, then return its parent grid. + * + * @param {DOMNode} node + * The node that is supposedly a grid item. + * @return {DOMNode|null} + * The parent grid if found, null otherwise. + */ +function findGridParentContainerForNode(node) { + try { + while ((node = node.parentNode)) { + const display = node.ownerGlobal.getComputedStyle(node).display; + + if (display.includes("grid")) { + return node; + } else if (display === "contents") { + // Continue walking up the tree since the parent node is a content element. + continue; + } + + break; + } + } catch (e) { + // Getting the parentNode can fail when the supplied node is in shadow DOM. + } + + return null; +} + +/** + * Finds the background color range for the parent of a single text node + * (i.e. for multi-colored backgrounds with gradients, images) or a single + * background color for single-colored backgrounds. Defaults to the closest + * background color if an error is encountered. + * + * @param {Object} + * Node actor containing the following properties: + * {DOMNode} rawNode + * Node for which we want to calculate the color contrast. + * {WalkerActor} walker + * Walker actor used to check whether the node is the parent elm of a single text node. + * @return {Object} + * Object with one or more of the following properties: + * {Array|null} value + * RGBA array for single-colored background. Null for multi-colored backgrounds. + * {Array|null} min + * RGBA array for the min luminance color in a multi-colored background. + * Null for single-colored backgrounds. + * {Array|null} max + * RGBA array for the max luminance color in a multi-colored background. + * Null for single-colored backgrounds. + */ +async function getBackgroundColor({ rawNode: node, walker }) { + // Fall back to calculating contrast against closest bg if: + // - not element node + // - more than one child + // Avoid calculating bounds and creating doc walker by returning early. + if ( + node.nodeType != Node.ELEMENT_NODE || + node.childNodes.length > 1 || + !node.firstChild + ) { + return { + value: getClosestBackgroundColorInRGBA(node), + }; + } + + const quads = getAdjustedQuads(node.ownerGlobal, node.firstChild, "content"); + + // Fall back to calculating contrast against closest bg if there are no bounds for text node. + // Avoid creating doc walker by returning early. + if (quads.length === 0 || !quads[0].bounds) { + return { + value: getClosestBackgroundColorInRGBA(node), + }; + } + + const bounds = quads[0].bounds; + + const docWalker = walker.getDocumentWalker(node); + const firstChild = docWalker.firstChild(); + + // Fall back to calculating contrast against closest bg if: + // - more than one child + // - unique child is not a text node + if ( + !firstChild || + docWalker.nextSibling() || + firstChild.nodeType !== Node.TEXT_NODE + ) { + return { + value: getClosestBackgroundColorInRGBA(node), + }; + } + + // Try calculating complex backgrounds for node + const win = node.ownerGlobal; + loadSheetForBackgroundCalculation(win); + const computedStyle = CssLogic.getComputedStyle(node); + const props = computedStyle ? getTextProperties(computedStyle) : null; + + // Fall back to calculating contrast against closest bg if there are no text props. + if (!props) { + return { + value: getClosestBackgroundColorInRGBA(node), + }; + } + + const bgColor = await getBackgroundFor(node, { + bounds, + win, + convertBoundsRelativeToViewport: false, + size: props.size, + isBoldText: props.isBoldText, + }); + removeSheetForBackgroundCalculation(win); + + return ( + bgColor || { + value: getClosestBackgroundColorInRGBA(node), + } + ); +} + +/** + * + * @param {DOMNode} node: The node we want the background color of + * @returns {Array[r,g,b,a]} + */ +function getClosestBackgroundColorInRGBA(node) { + const { r, g, b, a } = InspectorUtils.colorToRGBA( + getClosestBackgroundColor(node) + ); + return [r, g, b, a]; +} +/** + * Indicates if a document is ready (i.e. if it's not loading anymore) + * + * @param {HTMLDocument} document: The document we want to check + * @returns {Boolean} + */ +function isDocumentReady(document) { + if (!document) { + return false; + } + + const { readyState } = document; + if (readyState == "interactive" || readyState == "complete") { + return true; + } + + // A document might stay forever in unitialized state. + // If the target actor is not currently loading a document, + // assume the document is ready. + const webProgress = document.defaultView.docShell.QueryInterface( + Ci.nsIWebProgress + ); + return !webProgress.isLoadingDocument; +} + +module.exports = { + allAnonymousContentTreeWalkerFilter, + isDocumentReady, + isWhitespaceTextNode, + findGridParentContainerForNode, + getBackgroundColor, + getClosestBackgroundColor, + getClosestBackgroundImage, + getNodeDisplayName, + getNodeGridFlexType, + imageToImageData, + isNodeDead, + nodeDocument, + standardTreeWalkerFilter, + noAnonymousContentTreeWalkerFilter, +}; diff --git a/devtools/server/actors/inspector/walker.js b/devtools/server/actors/inspector/walker.js new file mode 100644 index 0000000000..f8da1385e9 --- /dev/null +++ b/devtools/server/actors/inspector/walker.js @@ -0,0 +1,2764 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const { Actor } = require("resource://devtools/shared/protocol.js"); +const { walkerSpec } = require("resource://devtools/shared/specs/walker.js"); + +const { + LongStringActor, +} = require("resource://devtools/server/actors/string.js"); +const { + EXCLUDED_LISTENER, +} = require("resource://devtools/server/actors/inspector/constants.js"); + +loader.lazyRequireGetter( + this, + "nodeFilterConstants", + "resource://devtools/shared/dom-node-filter-constants.js" +); + +loader.lazyRequireGetter( + this, + [ + "getFrameElement", + "isAfterPseudoElement", + "isBeforePseudoElement", + "isDirectShadowHostChild", + "isMarkerPseudoElement", + "isFrameBlockedByCSP", + "isFrameWithChildTarget", + "isShadowHost", + "isShadowRoot", + "loadSheet", + ], + "resource://devtools/shared/layout/utils.js", + true +); + +loader.lazyRequireGetter( + this, + "throttle", + "resource://devtools/shared/throttle.js", + true +); + +loader.lazyRequireGetter( + this, + [ + "allAnonymousContentTreeWalkerFilter", + "findGridParentContainerForNode", + "isNodeDead", + "noAnonymousContentTreeWalkerFilter", + "nodeDocument", + "standardTreeWalkerFilter", + ], + "resource://devtools/server/actors/inspector/utils.js", + true +); + +loader.lazyRequireGetter( + this, + "CustomElementWatcher", + "resource://devtools/server/actors/inspector/custom-element-watcher.js", + true +); +loader.lazyRequireGetter( + this, + ["DocumentWalker", "SKIP_TO_SIBLING"], + "resource://devtools/server/actors/inspector/document-walker.js", + true +); +loader.lazyRequireGetter( + this, + ["NodeActor", "NodeListActor"], + "resource://devtools/server/actors/inspector/node.js", + true +); +loader.lazyRequireGetter( + this, + "NodePicker", + "resource://devtools/server/actors/inspector/node-picker.js", + true +); +loader.lazyRequireGetter( + this, + "LayoutActor", + "resource://devtools/server/actors/layout.js", + true +); +loader.lazyRequireGetter( + this, + ["getLayoutChangesObserver", "releaseLayoutChangesObserver"], + "resource://devtools/server/actors/reflow.js", + true +); +loader.lazyRequireGetter( + this, + "WalkerSearch", + "resource://devtools/server/actors/utils/walker-search.js", + true +); + +// ContentDOMReference requires ChromeUtils, which isn't available in worker context. +const lazy = {}; +if (!isWorker) { + loader.lazyGetter( + lazy, + "ContentDOMReference", + () => + ChromeUtils.importESModule( + "resource://gre/modules/ContentDOMReference.sys.mjs", + { + // ContentDOMReference needs to be retrieved from the shared global + // since it is a shared singleton. + loadInDevToolsLoader: false, + } + ).ContentDOMReference + ); +} + +loader.lazyServiceGetter( + this, + "eventListenerService", + "@mozilla.org/eventlistenerservice;1", + "nsIEventListenerService" +); + +// Minimum delay between two "new-mutations" events. +const MUTATIONS_THROTTLING_DELAY = 100; +// List of mutation types that should -not- be throttled. +const IMMEDIATE_MUTATIONS = ["pseudoClassLock"]; + +const HIDDEN_CLASS = "__fx-devtools-hide-shortcut__"; + +// 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], + ["::marker", 0], +]; + +const HELPER_SHEET = + "data:text/css;charset=utf-8," + + encodeURIComponent(` + .__fx-devtools-hide-shortcut__ { + visibility: hidden !important; + } +`); + +/** + * 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; +}; + +/** + * Server side of the DOM walker. + */ +class WalkerActor extends Actor { + /** + * Create the WalkerActor + * @param {DevToolsServerConnection} conn + * The server connection. + * @param {TargetActor} targetActor + * The top-level Actor for this tab. + * @param {Object} options + * - {Boolean} showAllAnonymousContent: Show all native anonymous content + */ + constructor(conn, targetActor, options) { + super(conn, walkerSpec); + this.targetActor = targetActor; + this.rootWin = targetActor.window; + this.rootDoc = this.rootWin.document; + + // Map of already created node actors, keyed by their corresponding DOMNode. + this._nodeActorsMap = new Map(); + + this._pendingMutations = []; + this._activePseudoClassLocks = new Set(); + this._mutationBreakpoints = new WeakMap(); + this._anonParents = new WeakMap(); + this.customElementWatcher = new CustomElementWatcher( + targetActor.chromeEventHandler + ); + + // In this map, the key-value pairs are the overflow causing elements and their + // respective ancestor scrollable node actor. + this.overflowCausingElementsMap = new Map(); + + 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.onSubtreeModified = this.onSubtreeModified.bind(this); + this.onSubtreeModified[EXCLUDED_LISTENER] = true; + this.onNodeRemoved = this.onNodeRemoved.bind(this); + this.onNodeRemoved[EXCLUDED_LISTENER] = true; + this.onAttributeModified = this.onAttributeModified.bind(this); + this.onAttributeModified[EXCLUDED_LISTENER] = true; + + this.onMutations = this.onMutations.bind(this); + this.onSlotchange = this.onSlotchange.bind(this); + this.onShadowrootattached = this.onShadowrootattached.bind(this); + this.onAnonymousrootcreated = this.onAnonymousrootcreated.bind(this); + this.onAnonymousrootremoved = this.onAnonymousrootremoved.bind(this); + this.onFrameLoad = this.onFrameLoad.bind(this); + this.onFrameUnload = this.onFrameUnload.bind(this); + this.onCustomElementDefined = this.onCustomElementDefined.bind(this); + this._throttledEmitNewMutations = throttle( + this._emitNewMutations.bind(this), + MUTATIONS_THROTTLING_DELAY + ); + + targetActor.on("will-navigate", this.onFrameUnload); + targetActor.on("window-ready", this.onFrameLoad); + + this.customElementWatcher.on( + "element-defined", + this.onCustomElementDefined + ); + + // Keep a reference to the chromeEventHandler for the current targetActor, to make + // sure we will be able to remove the listener during the WalkerActor destroy(). + this.chromeEventHandler = targetActor.chromeEventHandler; + // shadowrootattached is a chrome-only event. We enable it below. + this.chromeEventHandler.addEventListener( + "shadowrootattached", + this.onShadowrootattached + ); + // anonymousrootcreated is a chrome-only event. We enable it below. + this.chromeEventHandler.addEventListener( + "anonymousrootcreated", + this.onAnonymousrootcreated + ); + this.chromeEventHandler.addEventListener( + "anonymousrootremoved", + this.onAnonymousrootremoved + ); + for (const { document } of this.targetActor.windows) { + document.devToolsAnonymousAndShadowEventsEnabled = true; + } + + // Ensure that the root document node actor is ready and + // managed. + this.rootNode = this.document(); + + this.layoutChangeObserver = getLayoutChangesObserver(this.targetActor); + 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); + } + + get nodePicker() { + if (!this._nodePicker) { + this._nodePicker = new NodePicker(this, this.targetActor); + } + + return this._nodePicker; + } + + watchRootNode() { + if (this.rootNode) { + this.emit("root-available", this.rootNode); + } + } + + /** + * Callback for eventListenerService.addListenerChangeListener + * @param nsISimpleEnumerator changesEnum + * enumerator of nsIEventListenerChange + */ + _onEventListenerChange(changesEnum) { + for (const current of changesEnum.enumerate(Ci.nsIEventListenerChange)) { + const target = current.target; + + if (this._nodeActorsMap.has(target)) { + const actor = this.getNode(target); + const mutation = { + type: "events", + target: actor.actorID, + hasEventListeners: actor._hasEventListeners, + }; + this.queueMutation(mutation); + } + } + } + + // Returns the JSON representation of this object over the wire. + form() { + return { + actor: this.actorID, + root: this.rootNode.form(), + traits: {}, + }; + } + + toString() { + return "[WalkerActor " + this.actorID + "]"; + } + + getDocumentWalker(node, skipTo) { + // Allow native anon content (like <video> controls) if preffed on + const filter = this.showAllAnonymousContent + ? allAnonymousContentTreeWalkerFilter + : standardTreeWalkerFilter; + + return new DocumentWalker(node, this.rootWin, { + filter, + skipTo, + showAnonymousContent: true, + }); + } + + destroy() { + if (this._destroyed) { + return; + } + this._destroyed = true; + super.destroy(); + try { + this.clearPseudoClassLocks(); + this._activePseudoClassLocks = null; + + this.overflowCausingElementsMap.clear(); + this.overflowCausingElementsMap = null; + + this._hoveredNode = null; + this.rootWin = null; + this.rootDoc = null; + this.rootNode = null; + this.layoutHelpers = null; + this._orphaned = null; + this._retainedOrphans = null; + this._nodeActorsMap = null; + + this.targetActor.off("will-navigate", this.onFrameUnload); + this.targetActor.off("window-ready", this.onFrameLoad); + this.customElementWatcher.off( + "element-defined", + this.onCustomElementDefined + ); + + this.chromeEventHandler.removeEventListener( + "shadowrootattached", + this.onShadowrootattached + ); + this.chromeEventHandler.removeEventListener( + "anonymousrootcreated", + this.onAnonymousrootcreated + ); + this.chromeEventHandler.removeEventListener( + "anonymousrootremoved", + this.onAnonymousrootremoved + ); + + // This attribute is just for devtools, so we can unset once we're done. + for (const { document } of this.targetActor.windows) { + document.devToolsAnonymousAndShadowEventsEnabled = false; + } + + this.onFrameLoad = null; + this.onFrameUnload = null; + + this.customElementWatcher.destroy(); + this.customElementWatcher = null; + + this.walkerSearch.destroy(); + + if (this._nodePicker) { + this._nodePicker.destroy(); + this._nodePicker = null; + } + + this.layoutChangeObserver.off("reflows", this._onReflows); + this.layoutChangeObserver.off("resize", this._onResize); + this.layoutChangeObserver = null; + releaseLayoutChangesObserver(this.targetActor); + + eventListenerService.removeListenerChangeListener( + this._onEventListenerChange + ); + + this.onMutations = null; + + this.layoutActor = null; + this.targetActor = null; + this.chromeEventHandler = null; + + this.emit("destroyed"); + } catch (e) { + console.error(e); + } + } + + release() {} + + unmanage(actor) { + if (actor instanceof NodeActor) { + if ( + this._activePseudoClassLocks && + this._activePseudoClassLocks.has(actor) + ) { + this.clearPseudoClassLocks(actor); + } + + this.customElementWatcher.unmanageNode(actor); + + this._nodeActorsMap.delete(actor.rawNode); + } + super.unmanage(actor); + } + + /** + * Determine if the walker has come across this DOM node before. + * @param {DOMNode} rawNode + * @return {Boolean} + */ + hasNode(rawNode) { + return this._nodeActorsMap.has(rawNode); + } + + /** + * If the walker has come across this DOM node before, then get the + * corresponding node actor. + * @param {DOMNode} rawNode + * @return {NodeActor} + */ + getNode(rawNode) { + return this._nodeActorsMap.get(rawNode); + } + + /** + * Internal helper that will either retrieve the existing NodeActor for the + * provided node or create the actor on the fly if it doesn't exist. + * This method should only be called when we are sure that the node should be + * known by the client and that the parent node is already known. + * + * Otherwise prefer `getNode` to only retrieve known actors or `attachElement` + * to create node actors recursively. + * + * @param {DOMNode} node + * The node for which we want to create or get an actor + * @return {NodeActor} The corresponding NodeActor + */ + _getOrCreateNodeActor(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._nodeActorsMap.set(node, actor); + + if (node.nodeType === Node.DOCUMENT_NODE) { + actor.watchDocument(node, this.onMutations); + } + + if (isShadowRoot(actor.rawNode)) { + actor.watchDocument(node.ownerDocument, this.onMutations); + actor.watchSlotchange(this.onSlotchange); + } + + this.customElementWatcher.manageNode(actor); + + return actor; + } + + /** + * When a custom element is defined, send a customElementDefined mutation for all the + * NodeActors using this tag name. + */ + onCustomElementDefined({ name, actors }) { + actors.forEach(actor => + this.queueMutation({ + target: actor.actorID, + type: "customElementDefined", + customElementLocation: actor.getCustomElementLocation(), + }) + ); + } + + _onReflows(reflows) { + // Going through the nodes the walker knows about, see which ones have had their + // containerType, display, scrollable or overflow state changed and send events if any. + const containerTypeChanges = []; + const displayTypeChanges = []; + const scrollableStateChanges = []; + + const currentOverflowCausingElementsMap = new Map(); + + for (const [node, actor] of this._nodeActorsMap) { + if (Cu.isDeadWrapper(node)) { + continue; + } + + const displayType = actor.displayType; + const isDisplayed = actor.isDisplayed; + + if ( + displayType !== actor.currentDisplayType || + isDisplayed !== actor.wasDisplayed + ) { + displayTypeChanges.push(actor); + + // Updating the original value + actor.currentDisplayType = displayType; + actor.wasDisplayed = isDisplayed; + } + + const isScrollable = actor.isScrollable; + if (isScrollable !== actor.wasScrollable) { + scrollableStateChanges.push(actor); + actor.wasScrollable = isScrollable; + } + + if (isScrollable) { + this.updateOverflowCausingElements( + actor, + currentOverflowCausingElementsMap + ); + } + + const containerType = actor.containerType; + if (containerType !== actor.currentContainerType) { + containerTypeChanges.push(actor); + actor.currentContainerType = containerType; + } + } + + // Get the NodeActor for each node in the symmetric difference of + // currentOverflowCausingElementsMap and this.overflowCausingElementsMap + const overflowStateChanges = [...currentOverflowCausingElementsMap.keys()] + .filter(node => !this.overflowCausingElementsMap.has(node)) + .concat( + [...this.overflowCausingElementsMap.keys()].filter( + node => !currentOverflowCausingElementsMap.has(node) + ) + ) + .filter(node => this.hasNode(node)) + .map(node => this.getNode(node)); + + this.overflowCausingElementsMap = currentOverflowCausingElementsMap; + + if (overflowStateChanges.length) { + this.emit("overflow-change", overflowStateChanges); + } + + if (displayTypeChanges.length) { + this.emit("display-change", displayTypeChanges); + } + + if (scrollableStateChanges.length) { + this.emit("scrollable-change", scrollableStateChanges); + } + + if (containerTypeChanges.length) { + this.emit("container-type-change", containerTypeChanges); + } + } + + /** + * When the browser window gets resized, relay the event to the front. + */ + _onResize() { + this.emit("resize"); + } + + /** + * 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(node) { + const { nodes, newParents } = this.attachElements([node]); + return { + node: nodes[0], + 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(nodes) { + const nodeActors = []; + const 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 use the closest ancestor. + if (!this.showAllAnonymousContent) { + while ( + node && + standardTreeWalkerFilter(node) != nodeFilterConstants.FILTER_ACCEPT + ) { + node = this.rawParentNode(node); + } + if (!node) { + continue; + } + } + + node = this._getOrCreateNodeActor(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(node) { + const doc = isNodeDead(node) ? this.rootDoc : nodeDocument(node.rawNode); + return this._getOrCreateNodeActor(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(node) { + const elt = isNodeDead(node) + ? this.rootDoc.documentElement + : nodeDocument(node.rawNode).documentElement; + return this._getOrCreateNodeActor(elt); + } + + parentNode(node) { + const parent = this.rawParentNode(node); + if (parent) { + return this._getOrCreateNodeActor(parent); + } + + return null; + } + + rawParentNode(node) { + const rawNode = node instanceof NodeActor ? node.rawNode : node; + if (rawNode == this.rootDoc) { + return null; + } + return InspectorUtils.getParentForNode(rawNode, /* anonymous = */ true); + } + + /** + * 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({ rawNode }) { + // Quick checks to prevent creating a new walker if possible. + if ( + isMarkerPseudoElement(rawNode) || + isBeforePseudoElement(rawNode) || + isAfterPseudoElement(rawNode) || + isShadowHost(rawNode) || + rawNode.nodeType != Node.ELEMENT_NODE || + !!rawNode.children.length || + isFrameWithChildTarget(this.targetActor, rawNode) || + isFrameBlockedByCSP(rawNode) + ) { + return undefined; + } + + const children = this._rawChildren(rawNode, /* includeAssigned = */ true); + const firstChild = children[0]; + + // 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 + // - we are a slot -> these are always represented on their own lines with + // a link to the original node. + // - we are a flex item -> these are always shown on their own lines so they can be + // selected by the flexbox inspector. + const isAssignedToSlot = + firstChild && + rawNode.nodeName === "SLOT" && + isDirectShadowHostChild(firstChild); + + const isFlexItem = !!firstChild?.parentFlexElement; + + if ( + !firstChild || + children.length > 1 || + firstChild.nodeType !== Node.TEXT_NODE || + firstChild.nodeValue.length > gValueSummaryLength || + isAssignedToSlot || + isFlexItem + ) { + return undefined; + } + + return this._getOrCreateNodeActor(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(node) { + node.retained = true; + } + + /** + * Remove the 'retained' mark from a node. If the node was a + * retained orphan, release it. + */ + unretainNode(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(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); + } + + for (const child of this._rawChildren(node.rawNode)) { + const childActor = this.getNode(child); + if (childActor) { + this.releaseNode(childActor, options); + } + } + + node.destroy(); + } + + /** + * Add any nodes between `node` and the walker's root node that have not + * yet been seen by the client. + */ + ensurePathToRoot(node, newParents = new Set()) { + if (!node) { + return newParents; + } + let parent = this.rawParentNode(node); + while (parent) { + let parentActor = this.getNode(parent); + if (parentActor) { + // This parent did exist, so the client knows about it. + return newParents; + } + // This parent didn't exist, so hasn't been seen by the client yet. + parentActor = this._getOrCreateNodeActor(parent); + newParents.add(parentActor); + parent = this.rawParentNode(parentActor); + } + return newParents; + } + + /** + * Return the number of children under the provided NodeActor. + * + * @param NodeActor node + * See JSDoc for children() + * @param object options + * See JSDoc for children() + * @return Number the number of children + */ + countChildren(node, options = {}) { + return this._getChildren(node, options).nodes.length; + } + + /** + * 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`. + * + * @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: Array of NodeActor representing the nodes returned by the request. + */ + children(node, options = {}) { + const { hasFirst, hasLast, nodes } = this._getChildren(node, options); + return { + hasFirst, + hasLast, + nodes: nodes.map(n => this._getOrCreateNodeActor(n)), + }; + } + + /** + * Returns the raw children of the DOM node, with anon content filtered as needed + * @param Node rawNode. + * @param boolean includeAssigned + * Whether <slot> assigned children should be returned. See + * HTMLSlotElement.assignedNodes(). + * @returns Array<Node> the list of children. + */ + _rawChildren(rawNode, includeAssigned) { + const filter = this.showAllAnonymousContent + ? allAnonymousContentTreeWalkerFilter + : standardTreeWalkerFilter; + const ret = []; + const children = InspectorUtils.getChildrenForNode( + rawNode, + /* anonymous = */ true, + includeAssigned + ); + for (const child of children) { + if (filter(child) == nodeFilterConstants.FILTER_ACCEPT) { + ret.push(child); + } + } + return ret; + } + + /** + * Return chidlren of the given node. Contrary to children children(), this method only + * returns DOMNodes. Therefore it will not create NodeActor wrappers and will not + * update the nodeActors map for the discovered nodes either. This makes this method + * safe to call when you are not sure if the discovered nodes will be communicated to + * the client. + * + * @param NodeActor node + * See JSDoc for children() + * @param object options + * See JSDoc for children() + * @return 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: Array of DOMNodes. + */ + // eslint-disable-next-line complexity + _getChildren(node, options = {}) { + if (isNodeDead(node) || isFrameBlockedByCSP(node.rawNode)) { + 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; + } + + let nodes = this._rawChildren(node.rawNode, /* includeAssigned = */ true); + let hasFirst = true; + let hasLast = true; + if (nodes.length > maxNodes) { + let startIndex; + if (options.center) { + const centerIndex = nodes.indexOf(options.center.rawNode); + const backwardCount = Math.floor(maxNodes / 2); + // If centering would hit the end, just read the last maxNodes nodes. + if (centerIndex - backwardCount + maxNodes >= nodes.length) { + startIndex = nodes.length - maxNodes; + } else { + startIndex = Math.max(0, centerIndex - backwardCount); + } + } else if (options.start) { + startIndex = Math.max(0, nodes.indexOf(options.start.rawNode)); + } else { + startIndex = 0; + } + const endIndex = Math.min(startIndex + maxNodes, nodes.length); + hasFirst = startIndex == 0; + hasLast = endIndex >= nodes.length; + nodes = nodes.slice(startIndex, endIndex); + } + + return { hasFirst, hasLast, nodes }; + } + + /** + * Get the next sibling of a given node. Getting nodes one at a time + * might be inefficient, be careful. + */ + nextSibling(node) { + if (isNodeDead(node)) { + return null; + } + + const walker = this.getDocumentWalker(node.rawNode); + const sibling = walker.nextSibling(); + return sibling ? this._getOrCreateNodeActor(sibling) : null; + } + + /** + * Get the previous sibling of a given node. Getting nodes one at a time + * might be inefficient, be careful. + */ + previousSibling(node) { + if (isNodeDead(node)) { + return null; + } + + const walker = this.getDocumentWalker(node.rawNode); + const sibling = walker.previousSibling(); + return sibling ? this._getOrCreateNodeActor(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(walker, count) { + const ret = []; + + let node = walker.currentNode; + do { + if (!walker.isSkippedNode(node)) { + // The walker can be on a node that would be filtered out if it didn't find any + // other node to fallback to. + ret.push(node); + } + node = walker.nextSibling(); + } while (node && --count); + return ret; + } + + /** + * 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(baseNode, selector) { + if (isNodeDead(baseNode)) { + return {}; + } + + const 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(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(selector) { + let nodes = []; + + for (const { document } of this.targetActor.windows) { + try { + nodes = [...nodes, ...document.querySelectorAll(selector)]; + } catch (e) { + // Bad selector. Do nothing as the selector can come from a searchbox. + } + } + + return nodes; + } + + /** + * Get a list of nodes that match the given XPath in all known frames of + * the current content page. + * @param {String} xPath. + * @return {Array} + */ + _multiFrameXPath(xPath) { + const nodes = []; + + for (const window of this.targetActor.windows) { + const document = window.document; + try { + const result = document.evaluate( + xPath, + document.documentElement, + null, + window.XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, + null + ); + + for (let i = 0; i < result.snapshotLength; i++) { + nodes.push(result.snapshotItem(i)); + } + } catch (e) { + // Bad XPath. Do nothing as the XPath can come from a searchbox. + } + } + + return nodes; + } + + /** + * Return a NodeListActor with all nodes that match the given XPath in all + * frames of the current content page. + * @param {String} xPath + */ + multiFrameXPath(xPath) { + return new NodeListActor(this, this._multiFrameXPath(xPath)); + } + + /** + * 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(query) { + const results = this.walkerSearch.search(query); + const 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" + */ + // eslint-disable-next-line complexity + getSuggestionsForQuery(query, completing, selectorState) { + const 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 (const node of nodes) { + for (const className of node.classList) { + sugs.classes.set(className, (sugs.classes.get(className) | 0) + 1); + } + } + sugs.classes.delete(""); + sugs.classes.delete(HIDDEN_CLASS); + for (const [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 (const node of nodes) { + sugs.ids.set(node.id, (sugs.ids.get(node.id) | 0) + 1); + } + for (const [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 (const node of nodes) { + const tag = node.localName; + sugs.tags.set(tag, (sugs.tags.get(tag) | 0) + 1); + } + for (const [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 (const node of nodes) { + sugs.ids.set(node.id, (sugs.ids.get(node.id) | 0) + 1); + const tag = node.localName; + sugs.tags.set(tag, (sugs.tags.get(tag) | 0) + 1); + for (const className of node.classList) { + sugs.classes.set(className, (sugs.classes.get(className) | 0) + 1); + } + } + for (const [tag, count] of sugs.tags) { + tag && result.push([tag, count]); + } + for (const [id, count] of sugs.ids) { + id && result.push(["#" + id, count]); + } + sugs.classes.delete(""); + sugs.classes.delete(HIDDEN_CLASS); + for (const [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 + const firstA = a[0].substring(0, 1); + const firstB = b[0].substring(0, 1); + + const getSortKeyPrefix = firstLetter => { + if (firstLetter === "#") { + return "2"; + } + if (firstLetter === ".") { + return "1"; + } + return "0"; + }; + + sortA = getSortKeyPrefix(firstA) + sortA; + sortB = getSortKeyPrefix(firstB) + sortB; + + // String compare + return sortA.localeCompare(sortB); + }); + + result = result.slice(0, 25); + + return { + query, + suggestions: result, + }; + } + + /** + * Add a pseudo-class lock to a node. + * + * @param NodeActor node + * @param string pseudo + * A pseudoclass: ':hover', ':active', ':focus', ':focus-within' + * @param options + * Options object: + * `parents`: True if the pseudo-class should be added + * to parent nodes. + * `enabled`: False if the pseudo-class should be locked + * to 'off'. Defaults to true. + * + * @returns An empty packet. A "pseudoClassLock" mutation will + * be queued for any changed nodes. + */ + addPseudoClassLock(node, pseudo, options = {}) { + if (isNodeDead(node)) { + return; + } + + // There can be only one node locked per pseudo, so dismiss all existing + // ones + for (const locked of this._activePseudoClassLocks) { + if (InspectorUtils.hasPseudoClassLock(locked.rawNode, pseudo)) { + this._removePseudoClassLock(locked, pseudo); + } + } + + const enabled = options.enabled === undefined || options.enabled; + this._addPseudoClassLock(node, pseudo, enabled); + + if (!options.parents) { + return; + } + + const walker = this.getDocumentWalker(node.rawNode); + let cur; + while ((cur = walker.parentNode())) { + const curNode = this._getOrCreateNodeActor(cur); + this._addPseudoClassLock(curNode, pseudo, enabled); + } + } + + _queuePseudoClassMutation(node) { + this.queueMutation({ + target: node.actorID, + type: "pseudoClassLock", + pseudoClassLocks: node.writePseudoClassLocks(), + }); + } + + _addPseudoClassLock(node, pseudo, enabled) { + if (node.rawNode.nodeType !== Node.ELEMENT_NODE) { + return false; + } + InspectorUtils.addPseudoClassLock(node.rawNode, pseudo, enabled); + this._activePseudoClassLocks.add(node); + this._queuePseudoClassMutation(node); + return true; + } + + hideNode(node) { + if (isNodeDead(node)) { + return; + } + + loadSheet(node.rawNode.ownerGlobal, HELPER_SHEET); + node.rawNode.classList.add(HIDDEN_CLASS); + } + + unhideNode(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', ':focus-within' + * @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(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 (const locked of this._activePseudoClassLocks) { + if ( + node.rawNode.contains(locked.rawNode) && + InspectorUtils.hasPseudoClassLock(locked.rawNode, pseudo) + ) { + this._removePseudoClassLock(locked, pseudo); + } + } + + if (!options.parents) { + return; + } + + const walker = this.getDocumentWalker(node.rawNode); + let cur; + while ((cur = walker.parentNode())) { + const curNode = this._getOrCreateNodeActor(cur); + this._removePseudoClassLock(curNode, pseudo); + } + } + + _removePseudoClassLock(node, pseudo) { + if (node.rawNode.nodeType != Node.ELEMENT_NODE) { + return false; + } + InspectorUtils.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(node) { + if (node && isNodeDead(node)) { + return; + } + + if (node) { + InspectorUtils.clearPseudoClassLocks(node.rawNode); + this._activePseudoClassLocks.delete(node); + this._queuePseudoClassMutation(node); + } else { + for (const locked of this._activePseudoClassLocks) { + InspectorUtils.clearPseudoClassLocks(locked.rawNode); + this._activePseudoClassLocks.delete(locked); + this._queuePseudoClassMutation(locked); + } + } + } + + /** + * Get a node's innerHTML property. + */ + innerHTML(node) { + let html = ""; + if (!isNodeDead(node)) { + html = node.rawNode.innerHTML; + } + return new LongStringActor(this.conn, html); + } + + /** + * Set a node's innerHTML property. + * + * @param {NodeActor} node The node. + * @param {string} value The piece of HTML content. + */ + setInnerHTML(node, value) { + if (isNodeDead(node)) { + return; + } + + const rawNode = node.rawNode; + if ( + rawNode.nodeType !== rawNode.ownerDocument.ELEMENT_NODE && + rawNode.nodeType !== rawNode.ownerDocument.DOCUMENT_FRAGMENT_NODE + ) { + throw new Error("Can only change innerHTML to element or fragment nodes"); + } + // eslint-disable-next-line no-unsanitized/property + rawNode.innerHTML = value; + } + + /** + * Get a node's outerHTML property. + * + * @param {NodeActor} node The node. + */ + outerHTML(node) { + let outerHTML = ""; + if (!isNodeDead(node)) { + outerHTML = node.rawNode.outerHTML; + } + return new LongStringActor(this.conn, outerHTML); + } + + /** + * Set a node's outerHTML property. + * + * @param {NodeActor} node The node. + * @param {string} value The piece of HTML content. + */ + setOuterHTML(node, value) { + if (isNodeDead(node)) { + return; + } + + const rawNode = node.rawNode; + const doc = nodeDocument(rawNode); + const win = doc.defaultView; + let parser; + if (!win) { + throw new Error("The window object shouldn't be null"); + } else { + // We create DOMParser under window object because we want a content + // DOMParser, which means all the DOM objects created by this DOMParser + // will be in the same DocGroup as rawNode.parentNode. Then the newly + // created nodes can be adopted into rawNode.parentNode. + parser = new win.DOMParser(); + } + + const mimeType = rawNode.tagName === "svg" ? "image/svg+xml" : "text/html"; + const parsedDOM = parser.parseFromString(value, mimeType); + const 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 { + // eslint-disable-next-line no-unsanitized/property + rawNode.outerHTML = value; + } + } else if (rawNode.tagName === "HEAD") { + if (parsedDOM.body.innerHTML === "") { + parentNode.replaceChild(parsedDOM.head, rawNode); + } else { + // eslint-disable-next-line no-unsanitized/property + rawNode.outerHTML = value; + } + } else if (node.isDocumentElement()) { + // Unable to set outerHTML on the document element. Fall back by + // setting attributes manually. Then replace all the child nodes. + const finalAttributeModifications = []; + const attributeModifications = {}; + for (const attribute of rawNode.attributes) { + attributeModifications[attribute.name] = null; + } + for (const attribute of parsedDOM.documentElement.attributes) { + attributeModifications[attribute.name] = attribute.value; + } + for (const key in attributeModifications) { + finalAttributeModifications.push({ + attributeName: key, + newValue: attributeModifications[key], + }); + } + node.modifyAttributes(finalAttributeModifications); + + rawNode.replaceChildren(...parsedDOM.firstElementChild.childNodes); + } else { + // eslint-disable-next-line no-unsanitized/property + 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(node, position, value) { + if (isNodeDead(node)) { + return { node: [], newParents: [] }; + } + + const rawNode = node.rawNode; + const 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."); + } + + const 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(). + const range = rawNode.ownerDocument.createRange(); + if (position === "beforeBegin" || position === "afterEnd") { + range.selectNode(rawNode); + } else { + range.selectNodeContents(rawNode); + } + // eslint-disable-next-line no-unsanitized/method + const docFrag = range.createContextualFragment(value); + const 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({ rawNode }) { + const 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(node) { + return ( + (node.rawNode.ownerDocument && + node.rawNode.ownerDocument.documentElement === this.rawNode) || + node.rawNode.nodeType === Node.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(node) { + if (isNodeDead(node) || this.isDocumentOrDocumentElementNode(node)) { + throw Error("Cannot remove document, document elements or dead nodes."); + } + + const 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(nodes) { + // Check that all nodes are valid before processing the removals. + for (const node of nodes) { + if (isNodeDead(node) || this.isDocumentOrDocumentElementNode(node)) { + throw Error("Cannot remove document, document elements or dead nodes"); + } + } + + for (const node of nodes) { + node.rawNode.remove(); + // Mutation events will take care of the rest. + } + } + + /** + * Insert a node into the DOM. + */ + insertBefore(node, parent, sibling) { + if ( + isNodeDead(node) || + isNodeDead(parent) || + (sibling && isNodeDead(sibling)) + ) { + return; + } + + const rawNode = node.rawNode; + const rawParent = parent.rawNode; + const 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(node, tagName) { + if (isNodeDead(node)) { + return null; + } + + const 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) + ); + } + + const 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; + } + + /** + * Gets the state of the mutation breakpoint types for this actor. + * + * @param {NodeActor} node The node to get breakpoint info for. + */ + getMutationBreakpoints(node) { + let bps; + if (!isNodeDead(node)) { + bps = this._breakpointInfoForNode(node.rawNode); + } + + return ( + bps || { + subtree: false, + removal: false, + attribute: false, + } + ); + } + + /** + * Set the state of some subset of mutation breakpoint types for this actor. + * + * @param {NodeActor} node The node to set breakpoint info for. + * @param {Object} bps A subset of the breakpoints for this actor that + * should be updated to new states. + */ + setMutationBreakpoints(node, bps) { + if (isNodeDead(node)) { + return; + } + const rawNode = node.rawNode; + + if ( + rawNode.ownerDocument && + rawNode.getRootNode({ composed: true }) != rawNode.ownerDocument + ) { + // We only allow watching for mutations on nodes that are attached to + // documents. That allows us to clean up our mutation listeners when all + // of the watched nodes have been removed from the document. + return; + } + + // This argument has nullable fields so we want to only update boolean + // field values. + const bpsForNode = Object.keys(bps).reduce((obj, bp) => { + if (typeof bps[bp] === "boolean") { + obj[bp] = bps[bp]; + } + return obj; + }, {}); + + this._updateMutationBreakpointState("api", rawNode, { + ...this.getMutationBreakpoints(node), + ...bpsForNode, + }); + } + + /** + * Update the mutation breakpoint state for the given DOM node. + * + * @param {Node} rawNode The DOM node. + * @param {Object} bpsForNode The state of each mutation bp type we support. + */ + _updateMutationBreakpointState(mutationReason, rawNode, bpsForNode) { + const rawDoc = rawNode.ownerDocument || rawNode; + + const docMutationBreakpoints = this._mutationBreakpointsForDoc( + rawDoc, + true /* createIfNeeded */ + ); + let originalBpsForNode = this._breakpointInfoForNode(rawNode); + + if (!bpsForNode && !originalBpsForNode) { + return; + } + + bpsForNode = bpsForNode || {}; + originalBpsForNode = originalBpsForNode || {}; + + if (Object.values(bpsForNode).some(Boolean)) { + docMutationBreakpoints.nodes.set(rawNode, bpsForNode); + } else { + docMutationBreakpoints.nodes.delete(rawNode); + } + if (originalBpsForNode.subtree && !bpsForNode.subtree) { + docMutationBreakpoints.counts.subtree -= 1; + } else if (!originalBpsForNode.subtree && bpsForNode.subtree) { + docMutationBreakpoints.counts.subtree += 1; + } + + if (originalBpsForNode.removal && !bpsForNode.removal) { + docMutationBreakpoints.counts.removal -= 1; + } else if (!originalBpsForNode.removal && bpsForNode.removal) { + docMutationBreakpoints.counts.removal += 1; + } + + if (originalBpsForNode.attribute && !bpsForNode.attribute) { + docMutationBreakpoints.counts.attribute -= 1; + } else if (!originalBpsForNode.attribute && bpsForNode.attribute) { + docMutationBreakpoints.counts.attribute += 1; + } + + this._updateDocumentMutationListeners(rawDoc); + + const actor = this.getNode(rawNode); + if (actor) { + this.queueMutation({ + target: actor.actorID, + type: "mutationBreakpoint", + mutationBreakpoints: this.getMutationBreakpoints(actor), + mutationReason, + }); + } + } + + /** + * Controls whether this DOM document has event listeners attached for + * handling of DOM mutation breakpoints. + * + * @param {Document} rawDoc The DOM document. + */ + _updateDocumentMutationListeners(rawDoc) { + const docMutationBreakpoints = this._mutationBreakpointsForDoc(rawDoc); + if (!docMutationBreakpoints) { + rawDoc.devToolsWatchingDOMMutations = false; + return; + } + + const anyBreakpoint = + docMutationBreakpoints.counts.subtree > 0 || + docMutationBreakpoints.counts.removal > 0 || + docMutationBreakpoints.counts.attribute > 0; + + rawDoc.devToolsWatchingDOMMutations = anyBreakpoint; + + if (docMutationBreakpoints.counts.subtree > 0) { + this.chromeEventHandler.addEventListener( + "devtoolschildinserted", + this.onSubtreeModified, + true /* capture */ + ); + } else { + this.chromeEventHandler.removeEventListener( + "devtoolschildinserted", + this.onSubtreeModified, + true /* capture */ + ); + } + + if (anyBreakpoint) { + this.chromeEventHandler.addEventListener( + "devtoolschildremoved", + this.onNodeRemoved, + true /* capture */ + ); + } else { + this.chromeEventHandler.removeEventListener( + "devtoolschildremoved", + this.onNodeRemoved, + true /* capture */ + ); + } + + if (docMutationBreakpoints.counts.attribute > 0) { + this.chromeEventHandler.addEventListener( + "devtoolsattrmodified", + this.onAttributeModified, + true /* capture */ + ); + } else { + this.chromeEventHandler.removeEventListener( + "devtoolsattrmodified", + this.onAttributeModified, + true /* capture */ + ); + } + } + + _breakOnMutation(mutationType, targetNode, ancestorNode, action) { + this.targetActor.threadActor.pauseForMutationBreakpoint( + mutationType, + targetNode, + ancestorNode, + action + ); + } + + _mutationBreakpointsForDoc(rawDoc, createIfNeeded = false) { + let docMutationBreakpoints = this._mutationBreakpoints.get(rawDoc); + if (!docMutationBreakpoints && createIfNeeded) { + docMutationBreakpoints = { + counts: { + subtree: 0, + removal: 0, + attribute: 0, + }, + nodes: new Map(), + }; + this._mutationBreakpoints.set(rawDoc, docMutationBreakpoints); + } + return docMutationBreakpoints; + } + + _breakpointInfoForNode(target) { + const docMutationBreakpoints = this._mutationBreakpointsForDoc( + target.ownerDocument || target + ); + return ( + (docMutationBreakpoints && docMutationBreakpoints.nodes.get(target)) || + null + ); + } + + onNodeRemoved(evt) { + const mutationBpInfo = this._breakpointInfoForNode(evt.target); + const hasNodeRemovalEvent = mutationBpInfo?.removal; + + this._clearMutationBreakpointsFromSubtree(evt.target); + if (hasNodeRemovalEvent) { + this._breakOnMutation("nodeRemoved", evt.target); + } else { + this.onSubtreeModified(evt); + } + } + + onAttributeModified(evt) { + const mutationBpInfo = this._breakpointInfoForNode(evt.target); + if (mutationBpInfo?.attribute) { + this._breakOnMutation("attributeModified", evt.target); + } + } + + onSubtreeModified(evt) { + const action = evt.type === "devtoolschildinserted" ? "add" : "remove"; + let node = evt.target; + if (node.isNativeAnonymous && !this.showAllAnonymousContent) { + return; + } + while ((node = node.parentNode) !== null) { + const mutationBpInfo = this._breakpointInfoForNode(node); + if (mutationBpInfo?.subtree) { + this._breakOnMutation("subtreeModified", evt.target, node, action); + break; + } + } + } + + _clearMutationBreakpointsFromSubtree(targetNode) { + const targetDoc = targetNode.ownerDocument || targetNode; + const docMutationBreakpoints = this._mutationBreakpointsForDoc(targetDoc); + if (!docMutationBreakpoints || docMutationBreakpoints.nodes.size === 0) { + // Bail early for performance. If the doc has no mutation BPs, there is + // no reason to iterate through the children looking for things to detach. + return; + } + + // The walker is not limited to the subtree of the argument node, so we + // need to ensure that we stop walking when we leave the subtree. + const nextWalkerSibling = this._getNextTraversalSibling(targetNode); + + const walker = new DocumentWalker(targetNode, this.rootWin, { + filter: noAnonymousContentTreeWalkerFilter, + skipTo: SKIP_TO_SIBLING, + }); + + do { + this._updateMutationBreakpointState("detach", walker.currentNode, null); + } while (walker.nextNode() && walker.currentNode !== nextWalkerSibling); + } + + _getNextTraversalSibling(targetNode) { + const walker = new DocumentWalker(targetNode, this.rootWin, { + filter: noAnonymousContentTreeWalkerFilter, + skipTo: SKIP_TO_SIBLING, + }); + + while (!walker.nextSibling()) { + if (!walker.parentNode()) { + // If we try to step past the walker root, there is no next sibling. + return null; + } + } + return walker.currentNode; + } + + /** + * 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(options = {}) { + const pending = this._pendingMutations || []; + this._pendingMutations = []; + this._waitingForGetMutations = false; + + if (options.cleanup) { + for (const 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(mutation) { + if (!this.actorID || this._destroyed) { + // We've been destroyed, don't bother queueing this mutation. + return; + } + + // Add the mutation to the list of mutations to be retrieved next. + this._pendingMutations.push(mutation); + + // Bail out if we already emitted a new-mutations event and are waiting for a client + // to retrieve them. + if (this._waitingForGetMutations) { + return; + } + + if (IMMEDIATE_MUTATIONS.includes(mutation.type)) { + this._emitNewMutations(); + } else { + /** + * If many mutations are fired at the same time, clients might sequentially request + * children/siblings for updated nodes, which can be costly. By throttling the calls + * to getMutations, duplicated mutations will be ignored. + */ + this._throttledEmitNewMutations(); + } + } + + _emitNewMutations() { + if (!this.actorID || this._destroyed) { + // Bail out if the actor was destroyed after throttling this call. + return; + } + + if (this._waitingForGetMutations || !this._pendingMutations.length) { + // Bail out if we already fired the new-mutation event or if no mutations are + // waiting to be retrieved. + return; + } + + this._waitingForGetMutations = true; + this.emit("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(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. + this.emit("any-mutation"); + + for (const change of mutations) { + const targetActor = this.getNode(change.target); + if (!targetActor) { + continue; + } + const targetNode = change.target; + const type = change.type; + const mutation = { + 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") { + // Get the list of removed and added actors that the client has seen + // so that it can keep its ownership tree up to date. + const removedActors = []; + const addedActors = []; + for (const removed of change.removedNodes) { + const 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 (const added of change.addedNodes) { + const 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; + + const 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(mutation) { + const { oldValue, target } = mutation; + const newValue = target.nodeValue; + const 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; + } + + const parentActor = this.getNode(target.parentNode); + if (!parentActor || parentActor.rawNode.children.length) { + // If the parent node has other children, a character data mutation will + // not change anything regarding inlining text nodes. + return; + } + + const inlineTextChild = this.inlineTextChild(parentActor); + this.queueMutation({ + type: "inlineTextChild", + target: parentActor.actorID, + inlineTextChild: inlineTextChild ? inlineTextChild.form() : undefined, + }); + } + + onSlotchange(event) { + const target = event.target; + const targetActor = this.getNode(target); + if (!targetActor) { + return; + } + + this.queueMutation({ + type: "slotchange", + target: targetActor.actorID, + }); + } + + /** + * Fires when an anonymous root is created. + * This is needed because regular mutation observers don't fire on some kinds + * of NAC creation. We want to treat this like a regular insertion. + */ + onAnonymousrootcreated(event) { + const root = event.target; + const parent = this.rawParentNode(root); + if (!parent) { + // These events are async. The node might have been removed already, in + // which case there's nothing to do anymore. + return; + } + // By the time onAnonymousrootremoved fires, the node is already detached + // from its parent, so we need to remember it by hand. + this._anonParents.set(root, parent); + this.onMutations([ + { + type: "childList", + target: parent, + addedNodes: [root], + removedNodes: [], + }, + ]); + } + + /** + * @see onAnonymousrootcreated + */ + onAnonymousrootremoved(event) { + const root = event.target; + const parent = this._anonParents.get(root); + if (!parent) { + return; + } + this._anonParents.delete(root); + this.onMutations([ + { + type: "childList", + target: parent, + addedNodes: [], + removedNodes: [root], + }, + ]); + } + + onShadowrootattached(event) { + const actor = this.getNode(event.target); + if (!actor) { + return; + } + + const mutation = { + type: "shadowRootAttached", + target: actor.actorID, + }; + this.queueMutation(mutation); + } + + onFrameLoad({ window, isTopLevel }) { + // By the time we receive the DOMContentLoaded event, we might have been destroyed + if (this._destroyed) { + return; + } + const { readyState } = window.document; + if (readyState != "interactive" && readyState != "complete") { + // The document is not loaded, so we want to register to fire again when the + // DOM has been loaded. + window.addEventListener( + "DOMContentLoaded", + this.onFrameLoad.bind(this, { window, isTopLevel }), + { once: true } + ); + return; + } + + window.document.shadowRootAttachedEventEnabled = true; + + 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 && + this.rootDoc !== window.document && + !Cu.isDeadWrapper(this.rootDoc) && + this.rootDoc.defaultView + ) { + this.onFrameUnload({ window: this.rootDoc.defaultView }); + } + // Update all DOM objects references to target the new document. + this.rootWin = window; + this.rootDoc = window.document; + this.rootNode = this.document(); + this.emit("root-available", this.rootNode); + } else { + const frame = getFrameElement(window); + const frameActor = this.getNode(frame); + if (frameActor) { + // If the parent frame is in the map of known node actors, create the + // actor for the new document and emit a root-available event. + const documentActor = this._getOrCreateNodeActor(window.document); + this.emit("root-available", documentActor); + } + } + } + + // Returns true if domNode is in window or a subframe. + _childOfWindow(window, domNode) { + while (domNode) { + const win = nodeDocument(domNode).defaultView; + if (win === window) { + return true; + } + domNode = getFrameElement(win); + } + return false; + } + + onFrameUnload({ window }) { + // Any retained orphans that belong to this document + // or its children need to be released, and a mutation sent + // to notify of that. + const releasedOrphans = []; + + for (const 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) { + this.queueMutation({ + target: this.rootNode.actorID, + type: "unretained", + nodes: releasedOrphans, + }); + } + + const doc = window.document; + const documentActor = this.getNode(doc); + if (!documentActor) { + return; + } + + // Removing a frame also removes any mutation breakpoints set on that + // document so that clients can clear their set of active breakpoints. + const mutationBps = this._mutationBreakpointsForDoc(doc); + const nodes = mutationBps ? Array.from(mutationBps.nodes.keys()) : []; + for (const node of nodes) { + this._updateMutationBreakpointState("unload", node, null); + } + + this.emit("root-destroyed", documentActor); + + // Cleanup root doc references if we just unloaded the top level root + // document. + if (this.rootDoc === doc) { + this.rootDoc = null; + this.rootNode = null; + } + + // Release the actor for the unloaded document. + this.releaseNode(documentActor, { force: true }); + } + + /** + * Check if a node is attached to the DOM tree of the current page. + * @param {Node} rawNode + * @return {Boolean} false if the node is removed from the tree or within a + * document fragment + */ + _isInDOMTree(rawNode) { + let walker; + try { + walker = this.getDocumentWalker(rawNode); + } catch (e) { + // The DocumentWalker may throw NS_ERROR_ILLEGAL_VALUE when the node isn't found as a legit children of its parent + // ex: <iframe> manually added as immediate child of another <iframe> + if (e.name == "NS_ERROR_ILLEGAL_VALUE") { + return false; + } + throw e; + } + 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 === Node.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(node) { + if (isNodeDead(node)) { + return false; + } + return this._isInDOMTree(node.rawNode); + } + + /** + * Given a windowID return the NodeActor for the corresponding frameElement, + * unless it's the root window + */ + getNodeActorFromWindowID(windowID) { + let win; + + try { + win = Services.wm.getOuterWindowWithId(windowID); + } catch (e) { + // ignore + } + + if (!win) { + return { + error: "noWindow", + message: "The related docshell is destroyed or not found", + }; + } else if (!win.frameElement) { + // the frame element of the root document is privileged & thus + // inaccessible, so return the document body/element instead + return this.attachElement( + win.document.body || win.document.documentElement + ); + } + + return this.attachElement(win.frameElement); + } + + /** + * Given a contentDomReference return the NodeActor for the corresponding frameElement. + */ + getNodeActorFromContentDomReference(contentDomReference) { + let rawNode = lazy.ContentDOMReference.resolve(contentDomReference); + if (!rawNode || !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 StyleSheet resource 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(resourceId) { + const manager = this.targetActor.getStyleSheetsManager(); + const ownerNode = manager.getOwnerNode(resourceId); + return this.attachElement(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. + * const inspectorFront = await toolbox.target.getFront("inspector"); + * // Retrieve the walker. + * const walker = inspectorFront.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(actorID, path) { + const actor = this.conn.getActor(actorID); + if (!actor) { + return null; + } + + let obj = actor; + for (const 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() { + if (!this.layoutActor) { + this.layoutActor = new LayoutActor(this.conn, this.targetActor, this); + } + + return this.layoutActor; + } + + /** + * Returns the parent grid DOMNode of the given node if it exists, otherwise, it + * returns null. + */ + getParentGridNode(node) { + if (isNodeDead(node)) { + return null; + } + + const parentGridNode = findGridParentContainerForNode(node.rawNode); + return parentGridNode ? this._getOrCreateNodeActor(parentGridNode) : null; + } + + /** + * Returns the offset parent DOMNode of the given node if it exists, otherwise, it + * returns null. + */ + getOffsetParent(node) { + if (isNodeDead(node)) { + return null; + } + + const offsetParent = node.rawNode.offsetParent; + + if (!offsetParent) { + return null; + } + + return this._getOrCreateNodeActor(offsetParent); + } + + getEmbedderElement(browsingContextID) { + const browsingContext = BrowsingContext.get(browsingContextID); + let rawNode = browsingContext.embedderElement; + 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); + } + + pick(doFocus, isLocalTab) { + this.nodePicker.pick(doFocus, isLocalTab); + } + + cancelPick() { + this.nodePicker.cancelPick(); + } + + clearPicker() { + this.nodePicker.resetHoveredNodeReference(); + } + + /** + * Given a scrollable node, find its descendants which are causing overflow in it and + * add their raw nodes to the map as keys with the scrollable element as the values. + * + * @param {NodeActor} scrollableNode A scrollable node. + * @param {Map} map The map to which the overflow causing elements are added. + */ + updateOverflowCausingElements(scrollableNode, map) { + if ( + isNodeDead(scrollableNode) || + scrollableNode.rawNode.nodeType !== Node.ELEMENT_NODE + ) { + return; + } + + const overflowCausingChildren = [ + ...InspectorUtils.getOverflowingChildrenOfElement(scrollableNode.rawNode), + ]; + + for (let overflowCausingChild of overflowCausingChildren) { + // overflowCausingChild is a Node, but not necessarily an Element. + // So, get the containing Element + if (overflowCausingChild.nodeType !== Node.ELEMENT_NODE) { + overflowCausingChild = overflowCausingChild.parentElement; + } + map.set(overflowCausingChild, scrollableNode); + } + } + + /** + * Returns an array of the overflow causing elements' NodeActor for the given node. + * + * @param {NodeActor} node The scrollable node. + * @return {Array<NodeActor>} An array of the overflow causing elements. + */ + getOverflowCausingElements(node) { + if ( + isNodeDead(node) || + node.rawNode.nodeType !== Node.ELEMENT_NODE || + !node.isScrollable + ) { + return []; + } + + const overflowCausingElements = [ + ...InspectorUtils.getOverflowingChildrenOfElement(node.rawNode), + ].map(overflowCausingChild => { + if (overflowCausingChild.nodeType !== Node.ELEMENT_NODE) { + overflowCausingChild = overflowCausingChild.parentElement; + } + + return overflowCausingChild; + }); + + return this.attachElements(overflowCausingElements); + } + + /** + * Return the scrollable ancestor node which has overflow because of the given node. + * + * @param {NodeActor} overflowCausingNode + */ + getScrollableAncestorNode(overflowCausingNode) { + if ( + isNodeDead(overflowCausingNode) || + !this.overflowCausingElementsMap.has(overflowCausingNode.rawNode) + ) { + return null; + } + + return this.overflowCausingElementsMap.get(overflowCausingNode.rawNode); + } +} + +exports.WalkerActor = WalkerActor; diff --git a/devtools/server/actors/layout.js b/devtools/server/actors/layout.js new file mode 100644 index 0000000000..d046a6ca17 --- /dev/null +++ b/devtools/server/actors/layout.js @@ -0,0 +1,518 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const { Actor } = require("resource://devtools/shared/protocol.js"); +const { + flexboxSpec, + flexItemSpec, + gridSpec, + layoutSpec, +} = require("resource://devtools/shared/specs/layout.js"); + +const { + getStringifiableFragments, +} = require("resource://devtools/server/actors/utils/css-grid-utils.js"); + +loader.lazyRequireGetter( + this, + "CssLogic", + "resource://devtools/server/actors/inspector/css-logic.js", + true +); +loader.lazyRequireGetter( + this, + "findGridParentContainerForNode", + "resource://devtools/server/actors/inspector/utils.js", + true +); +loader.lazyRequireGetter( + this, + "getCSSStyleRules", + "resource://devtools/shared/inspector/css-logic.js", + true +); +loader.lazyRequireGetter( + this, + "isCssPropertyKnown", + "resource://devtools/server/actors/css-properties.js", + true +); +loader.lazyRequireGetter( + this, + "parseDeclarations", + "resource://devtools/shared/css/parsing-utils.js", + true +); +loader.lazyRequireGetter( + this, + "nodeConstants", + "resource://devtools/shared/dom-node-constants.js" +); + +/** + * Set of actors the expose the CSS layout information to the devtools protocol clients. + * + * The |Layout| actor is the main entry point. It is used to get various CSS + * layout-related information from the document. + * + * The |Flexbox| actor provides the container node information to inspect the flexbox + * container. It is also used to return an array of |FlexItem| actors which provide the + * flex item information. + * + * The |Grid| actor provides the grid fragment information to inspect the grid container. + */ + +class FlexboxActor extends Actor { + /** + * @param {LayoutActor} layoutActor + * The LayoutActor instance. + * @param {DOMNode} containerEl + * The flex container element. + */ + constructor(layoutActor, containerEl) { + super(layoutActor.conn, flexboxSpec); + + this.containerEl = containerEl; + this.walker = layoutActor.walker; + } + + destroy() { + super.destroy(); + + this.containerEl = null; + this.walker = null; + } + + form() { + const styles = CssLogic.getComputedStyle(this.containerEl); + + const form = { + actor: this.actorID, + // The computed style properties of the flex container. + properties: { + "align-content": styles.alignContent, + "align-items": styles.alignItems, + "flex-direction": styles.flexDirection, + "flex-wrap": styles.flexWrap, + "justify-content": styles.justifyContent, + }, + }; + + // If the WalkerActor already knows the container element, then also return its + // ActorID so we avoid the client from doing another round trip to get it in many + // cases. + if (this.walker.hasNode(this.containerEl)) { + form.containerNodeActorID = this.walker.getNode(this.containerEl).actorID; + } + + return form; + } + + /** + * Returns an array of FlexItemActor objects for all the flex item elements contained + * in the flex container element. + * + * @return {Array} + * An array of FlexItemActor objects. + */ + getFlexItems() { + if (isNodeDead(this.containerEl)) { + return []; + } + + const flex = this.containerEl.getAsFlexContainer(); + if (!flex) { + return []; + } + + const flexItemActors = []; + const { crossAxisDirection, mainAxisDirection } = flex; + + for (const line of flex.getLines()) { + for (const item of line.getItems()) { + flexItemActors.push( + new FlexItemActor(this, item.node, { + crossAxisDirection, + mainAxisDirection, + crossMaxSize: item.crossMaxSize, + crossMinSize: item.crossMinSize, + mainBaseSize: item.mainBaseSize, + mainDeltaSize: item.mainDeltaSize, + mainMaxSize: item.mainMaxSize, + mainMinSize: item.mainMinSize, + lineGrowthState: line.growthState, + clampState: item.clampState, + }) + ); + } + } + + return flexItemActors; + } +} + +/** + * The FlexItemActor provides information about a flex items' data. + */ +class FlexItemActor extends Actor { + /** + * @param {FlexboxActor} flexboxActor + * The FlexboxActor instance. + * @param {DOMNode} element + * The flex item element. + * @param {Object} flexItemSizing + * The flex item sizing data. + */ + constructor(flexboxActor, element, flexItemSizing) { + super(flexboxActor.conn, flexItemSpec); + + this.containerEl = flexboxActor.containerEl; + this.element = element; + this.flexItemSizing = flexItemSizing; + this.walker = flexboxActor.walker; + } + + destroy() { + super.destroy(); + + this.containerEl = null; + this.element = null; + this.flexItemSizing = null; + this.walker = null; + } + + form() { + const { mainAxisDirection } = this.flexItemSizing; + const dimension = mainAxisDirection.startsWith("horizontal") + ? "width" + : "height"; + + // Find the authored sizing properties for this item. + const properties = { + "flex-basis": "", + "flex-grow": "", + "flex-shrink": "", + [`min-${dimension}`]: "", + [`max-${dimension}`]: "", + [dimension]: "", + }; + + const isElementNode = this.element.nodeType === this.element.ELEMENT_NODE; + + if (isElementNode) { + for (const name in properties) { + const values = []; + const cssRules = getCSSStyleRules(this.element); + + for (const rule of cssRules) { + // For each rule, go through *all* properties, because there may be several of + // them in the same rule and some with !important flags (which would be more + // important even if placed before another property with the same name) + const declarations = parseDeclarations( + isCssPropertyKnown, + rule.style.cssText + ); + + for (const declaration of declarations) { + if (declaration.name === name && declaration.value !== "auto") { + values.push({ + value: declaration.value, + priority: declaration.priority, + }); + } + } + } + + // Then go through the element style because it's usually more important, but + // might not be if there is a prior !important property + if ( + this.element.style && + this.element.style[name] && + this.element.style[name] !== "auto" + ) { + values.push({ + value: this.element.style.getPropertyValue(name), + priority: this.element.style.getPropertyPriority(name), + }); + } + + // Now that we have a list of all the property's rule values, go through all the + // values and show the property value with the highest priority. Therefore, show + // the last !important value. Otherwise, show the last value stored. + let rulePropertyValue = ""; + + if (values.length) { + const lastValueIndex = values.length - 1; + rulePropertyValue = values[lastValueIndex].value; + + for (const { priority, value } of values) { + if (priority === "important") { + rulePropertyValue = `${value} !important`; + } + } + } + + properties[name] = rulePropertyValue; + } + } + + // Also find some computed sizing properties that will be useful for this item. + const { flexGrow, flexShrink } = isElementNode + ? CssLogic.getComputedStyle(this.element) + : { flexGrow: null, flexShrink: null }; + const computedStyle = { flexGrow, flexShrink }; + + const form = { + actor: this.actorID, + // The flex item sizing data. + flexItemSizing: this.flexItemSizing, + // The authored style properties of the flex item. + properties, + // The computed style properties of the flex item. + computedStyle, + }; + + // If the WalkerActor already knows the flex item element, then also return its + // ActorID so we avoid the client from doing another round trip to get it in many + // cases. + if (this.walker.hasNode(this.element)) { + form.nodeActorID = this.walker.getNode(this.element).actorID; + } + + return form; + } +} + +/** + * The GridActor provides information about a given grid's fragment data. + */ +class GridActor extends Actor { + /** + * @param {LayoutActor} layoutActor + * The LayoutActor instance. + * @param {DOMNode} containerEl + * The grid container element. + */ + constructor(layoutActor, containerEl) { + super(layoutActor.conn, gridSpec); + + this.containerEl = containerEl; + this.walker = layoutActor.walker; + } + + destroy() { + super.destroy(); + + this.containerEl = null; + this.gridFragments = null; + this.walker = null; + } + + form() { + // Seralize the grid fragment data into JSON so protocol.js knows how to write + // and read the data. + const gridFragments = this.containerEl.getGridFragments(); + this.gridFragments = getStringifiableFragments(gridFragments); + + // Record writing mode and text direction for use by the grid outline. + const { direction, gridTemplateColumns, gridTemplateRows, writingMode } = + CssLogic.getComputedStyle(this.containerEl); + + const form = { + actor: this.actorID, + direction, + gridFragments: this.gridFragments, + writingMode, + }; + + // If the WalkerActor already knows the container element, then also return its + // ActorID so we avoid the client from doing another round trip to get it in many + // cases. + if (this.walker.hasNode(this.containerEl)) { + form.containerNodeActorID = this.walker.getNode(this.containerEl).actorID; + } + + form.isSubgrid = + gridTemplateRows.startsWith("subgrid") || + gridTemplateColumns.startsWith("subgrid"); + + return form; + } +} + +/** + * The CSS layout actor provides layout information for the given document. + */ +class LayoutActor extends Actor { + constructor(conn, targetActor, walker) { + super(conn, layoutSpec); + + this.targetActor = targetActor; + this.walker = walker; + } + + destroy() { + super.destroy(); + + this.targetActor = null; + this.walker = null; + } + + /** + * Helper function for getAsFlexItem, getCurrentGrid and getCurrentFlexbox. Returns the + * grid or flex container (whichever is requested) found by iterating on the given + * selected node. The current node can be a grid/flex container or grid/flex item. + * If it is a grid/flex item, returns the parent grid/flex container. Otherwise, returns + * null if the current or parent node is not a grid/flex container. + * + * @param {Node|NodeActor} node + * The node to start iterating at. + * @param {String} type + * Can be "grid" or "flex", the display type we are searching for. + * @param {Boolean} onlyLookAtContainer + * If true, only look at given node's container and iterate from there. + * @return {GridActor|FlexboxActor|null} + * The GridActor or FlexboxActor of the grid/flex container of the given node. + * Otherwise, returns null. + */ + getCurrentDisplay(node, type, onlyLookAtContainer) { + if (isNodeDead(node)) { + return null; + } + + // Given node can either be a Node or a NodeActor. + if (node.rawNode) { + node = node.rawNode; + } + + const flexType = type === "flex"; + const gridType = type === "grid"; + const displayType = this.walker.getNode(node).displayType; + + // If the node is an element, check first if it is itself a flex or a grid. + if (node.nodeType === node.ELEMENT_NODE) { + if (!displayType) { + return null; + } + + if (flexType && displayType.includes("flex")) { + if (!onlyLookAtContainer) { + return new FlexboxActor(this, node); + } + + const container = node.parentFlexElement; + if (container) { + return new FlexboxActor(this, container); + } + + return null; + } else if (gridType && displayType.includes("grid")) { + return new GridActor(this, node); + } + } + + // Otherwise, check if this is a flex/grid item or the parent node is a flex/grid + // container. + // Note that text nodes that are children of flex/grid containers are wrapped in + // anonymous containers, so even if their displayType getter returns null we still + // want to walk up the chain to find their container. + const parentFlexElement = node.parentFlexElement; + if (parentFlexElement && flexType) { + return new FlexboxActor(this, parentFlexElement); + } + const container = findGridParentContainerForNode(node); + if (container && gridType) { + return new GridActor(this, container); + } + + return null; + } + + /** + * Returns the grid container for a given selected node. + * The node itself can be a container, but if not, walk up the DOM to find its + * container. + * Returns null if no container can be found. + * + * @param {Node|NodeActor} node + * The node to start iterating at. + * @return {GridActor|null} + * The GridActor of the grid container of the given node. Otherwise, returns + * null. + */ + getCurrentGrid(node) { + return this.getCurrentDisplay(node, "grid"); + } + + /** + * Returns the flex container for a given selected node. + * The node itself can be a container, but if not, walk up the DOM to find its + * container. + * Returns null if no container can be found. + * + * @param {Node|NodeActor} node + * The node to start iterating at. + * @param {Boolean|null} onlyLookAtParents + * If true, skip the passed node and only start looking at its parent and up. + * @return {FlexboxActor|null} + * The FlexboxActor of the flex container of the given node. Otherwise, returns + * null. + */ + getCurrentFlexbox(node, onlyLookAtParents) { + return this.getCurrentDisplay(node, "flex", onlyLookAtParents); + } + + /** + * Returns an array of GridActor objects for all the grid elements contained in the + * given root node. + * + * @param {Node|NodeActor} node + * The root node for grid elements + * @return {Array} An array of GridActor objects. + */ + getGrids(node) { + if (isNodeDead(node)) { + return []; + } + + // Root node can either be a Node or a NodeActor. + if (node.rawNode) { + node = node.rawNode; + } + + // Root node can be a #document object, which does not support getElementsWithGrid. + if (node.nodeType === nodeConstants.DOCUMENT_NODE) { + node = node.documentElement; + } + + if (!node) { + return []; + } + + const gridElements = node.getElementsWithGrid(); + let gridActors = gridElements.map(n => new GridActor(this, n)); + + if (this.targetActor.ignoreSubFrames) { + return gridActors; + } + + const frames = node.querySelectorAll("iframe, frame"); + for (const frame of frames) { + gridActors = gridActors.concat(this.getGrids(frame.contentDocument)); + } + + return gridActors; + } +} + +function isNodeDead(node) { + return !node || (node.rawNode && Cu.isDeadWrapper(node.rawNode)); +} + +exports.FlexboxActor = FlexboxActor; +exports.FlexItemActor = FlexItemActor; +exports.GridActor = GridActor; +exports.LayoutActor = LayoutActor; diff --git a/devtools/server/actors/manifest.js b/devtools/server/actors/manifest.js new file mode 100644 index 0000000000..5436d4a53a --- /dev/null +++ b/devtools/server/actors/manifest.js @@ -0,0 +1,40 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const { Actor } = require("resource://devtools/shared/protocol.js"); +const { + manifestSpec, +} = require("resource://devtools/shared/specs/manifest.js"); + +const lazy = {}; + +ChromeUtils.defineESModuleGetters(lazy, { + ManifestObtainer: "resource://gre/modules/ManifestObtainer.sys.mjs", +}); + +/** + * An actor for a Web Manifest + */ +class ManifestActor extends Actor { + constructor(conn, targetActor) { + super(conn, manifestSpec); + this.targetActor = targetActor; + } + + async fetchCanonicalManifest() { + try { + const manifest = await lazy.ManifestObtainer.contentObtainManifest( + this.targetActor.window, + { checkConformance: true } + ); + return { manifest }; + } catch (error) { + return { manifest: null, errorMessage: error.message }; + } + } +} + +exports.ManifestActor = ManifestActor; diff --git a/devtools/server/actors/memory.js b/devtools/server/actors/memory.js new file mode 100644 index 0000000000..482596ed4a --- /dev/null +++ b/devtools/server/actors/memory.js @@ -0,0 +1,90 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const { Actor } = require("resource://devtools/shared/protocol.js"); +const { memorySpec } = require("resource://devtools/shared/specs/memory.js"); + +const { Memory } = require("resource://devtools/server/performance/memory.js"); +const { + actorBridgeWithSpec, +} = require("resource://devtools/server/actors/common.js"); + +loader.lazyRequireGetter( + this, + "StackFrameCache", + "resource://devtools/server/actors/utils/stack.js", + true +); + +/** + * An actor that returns memory usage data for its parent actor's window. + * A target-scoped instance of this actor will measure the memory footprint of + * the target, such as a tab. A global-scoped instance however, will measure the memory + * footprint of the chrome window referenced by the root actor. + * + * This actor wraps the Memory module at devtools/server/performance/memory.js + * and provides RDP definitions. + * + * @see devtools/server/performance/memory.js for documentation. + */ +exports.MemoryActor = class MemoryActor extends Actor { + constructor(conn, parent, frameCache = new StackFrameCache()) { + super(conn, memorySpec); + + this._onGarbageCollection = this._onGarbageCollection.bind(this); + this._onAllocations = this._onAllocations.bind(this); + this.bridge = new Memory(parent, frameCache); + this.bridge.on("garbage-collection", this._onGarbageCollection); + this.bridge.on("allocations", this._onAllocations); + } + + destroy() { + this.bridge.off("garbage-collection", this._onGarbageCollection); + this.bridge.off("allocations", this._onAllocations); + this.bridge.destroy(); + super.destroy(); + } + + attach = actorBridgeWithSpec("attach"); + + detach = actorBridgeWithSpec("detach"); + + getState = actorBridgeWithSpec("getState"); + + saveHeapSnapshot(boundaries) { + return this.bridge.saveHeapSnapshot(boundaries); + } + + takeCensus = actorBridgeWithSpec("takeCensus"); + + startRecordingAllocations = actorBridgeWithSpec("startRecordingAllocations"); + + stopRecordingAllocations = actorBridgeWithSpec("stopRecordingAllocations"); + + getAllocationsSettings = actorBridgeWithSpec("getAllocationsSettings"); + + getAllocations = actorBridgeWithSpec("getAllocations"); + + forceGarbageCollection = actorBridgeWithSpec("forceGarbageCollection"); + + forceCycleCollection = actorBridgeWithSpec("forceCycleCollection"); + + measure = actorBridgeWithSpec("measure"); + + residentUnique = actorBridgeWithSpec("residentUnique"); + + _onGarbageCollection(data) { + if (this.conn.transport) { + this.emit("garbage-collection", data); + } + } + + _onAllocations(data) { + if (this.conn.transport) { + this.emit("allocations", data); + } + } +}; diff --git a/devtools/server/actors/moz.build b/devtools/server/actors/moz.build new file mode 100644 index 0000000000..45af465249 --- /dev/null +++ b/devtools/server/actors/moz.build @@ -0,0 +1,90 @@ +# -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*- +# vim: set filetype=python: +# 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/. + +DIRS += [ + "accessibility", + "addon", + "compatibility", + "descriptors", + "emulation", + "highlighters", + "inspector", + "network-monitor", + "object", + "resources", + "targets", + "utils", + "watcher", + "webconsole", + "worker", +] + +DevToolsModules( + "animation-type-longhand.js", + "animation.js", + "array-buffer.js", + "blackboxing.js", + "breakpoint-list.js", + "breakpoint.js", + "changes.js", + "common.js", + "css-properties.js", + "device.js", + "environment.js", + "errordocs.js", + "frame.js", + "heap-snapshot-file.js", + "highlighters.js", + "layout.js", + "manifest.js", + "memory.js", + "object.js", + "objects-manager.js", + "page-style.js", + "pause-scoped.js", + "perf.js", + "preference.js", + "process.js", + "reflow.js", + "root.js", + "screenshot-content.js", + "screenshot.js", + "source.js", + "string.js", + "style-rule.js", + "style-sheets.js", + "target-configuration.js", + "thread-configuration.js", + "thread.js", + "tracer.js", + "watcher.js", + "webbrowser.js", + "webconsole.js", +) + +with Files("animation.js"): + BUG_COMPONENT = ("DevTools", "Inspector: Animations") + +with Files("breakpoint.js"): + BUG_COMPONENT = ("DevTools", "Debugger") + +with Files("css-properties.js"): + BUG_COMPONENT = ("DevTools", "Inspector: Rules") + +with Files("memory.js"): + BUG_COMPONENT = ("DevTools", "Memory") + +with Files("performance*"): + BUG_COMPONENT = ("DevTools", "Performance Tools (Profiler/Timeline)") + +with Files("source.js"): + BUG_COMPONENT = ("DevTools", "Debugger") + +with Files("stylesheets.js"): + BUG_COMPONENT = ("DevTools", "Style Editor") + +with Files("webconsole.js"): + BUG_COMPONENT = ("DevTools", "Console") diff --git a/devtools/server/actors/network-monitor/channel-event-sink.js b/devtools/server/actors/network-monitor/channel-event-sink.js new file mode 100644 index 0000000000..8ff00302f9 --- /dev/null +++ b/devtools/server/actors/network-monitor/channel-event-sink.js @@ -0,0 +1,99 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const { ComponentUtils } = ChromeUtils.importESModule( + "resource://gre/modules/ComponentUtils.sys.mjs" +); + +/** + * This is a nsIChannelEventSink implementation that monitors channel redirects and + * informs the registered "collectors" about the old and new channels. + */ +const SINK_CLASS_DESCRIPTION = "NetworkMonitor Channel Event Sink"; +const SINK_CLASS_ID = Components.ID("{e89fa076-c845-48a8-8c45-2604729eba1d}"); +const SINK_CONTRACT_ID = "@mozilla.org/network/monitor/channeleventsink;1"; +const SINK_CATEGORY_NAME = "net-channel-event-sinks"; + +class ChannelEventSink { + constructor() { + this.wrappedJSObject = this; + this.collectors = new Set(); + } + + QueryInterface = ChromeUtils.generateQI(["nsIChannelEventSink"]); + + registerCollector(collector) { + this.collectors.add(collector); + } + + unregisterCollector(collector) { + this.collectors.delete(collector); + + if (this.collectors.size == 0) { + ChannelEventSinkFactory.unregister(); + } + } + + // eslint-disable-next-line no-shadow + asyncOnChannelRedirect(oldChannel, newChannel, flags, callback) { + for (const collector of this.collectors) { + try { + collector.onChannelRedirect(oldChannel, newChannel, flags); + } catch (ex) { + console.error( + "ChannelEventSink collector's 'onChannelRedirect' threw an exception", + ex + ); + } + } + callback.onRedirectVerifyCallback(Cr.NS_OK); + } +} + +const ChannelEventSinkFactory = + ComponentUtils.generateSingletonFactory(ChannelEventSink); + +ChannelEventSinkFactory.register = function () { + const registrar = Components.manager.QueryInterface(Ci.nsIComponentRegistrar); + if (registrar.isCIDRegistered(SINK_CLASS_ID)) { + return; + } + + registrar.registerFactory( + SINK_CLASS_ID, + SINK_CLASS_DESCRIPTION, + SINK_CONTRACT_ID, + ChannelEventSinkFactory + ); + + Services.catMan.addCategoryEntry( + SINK_CATEGORY_NAME, + SINK_CONTRACT_ID, + SINK_CONTRACT_ID, + false, + true + ); +}; + +ChannelEventSinkFactory.unregister = function () { + const registrar = Components.manager.QueryInterface(Ci.nsIComponentRegistrar); + registrar.unregisterFactory(SINK_CLASS_ID, ChannelEventSinkFactory); + + Services.catMan.deleteCategoryEntry( + SINK_CATEGORY_NAME, + SINK_CONTRACT_ID, + false + ); +}; + +ChannelEventSinkFactory.getService = function () { + // Make sure the ChannelEventSink service is registered before accessing it + ChannelEventSinkFactory.register(); + + return Cc[SINK_CONTRACT_ID].getService(Ci.nsIChannelEventSink) + .wrappedJSObject; +}; +exports.ChannelEventSinkFactory = ChannelEventSinkFactory; diff --git a/devtools/server/actors/network-monitor/moz.build b/devtools/server/actors/network-monitor/moz.build new file mode 100644 index 0000000000..717ccc2807 --- /dev/null +++ b/devtools/server/actors/network-monitor/moz.build @@ -0,0 +1,12 @@ +# -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*- +# vim: set filetype=python: +# 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/. + +DevToolsModules( + "channel-event-sink.js", + "network-content.js", + "network-event-actor.js", + "network-parent.js", +) diff --git a/devtools/server/actors/network-monitor/network-content.js b/devtools/server/actors/network-monitor/network-content.js new file mode 100644 index 0000000000..52606a9597 --- /dev/null +++ b/devtools/server/actors/network-monitor/network-content.js @@ -0,0 +1,140 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const { Actor } = require("resource://devtools/shared/protocol.js"); +const { + networkContentSpec, +} = require("resource://devtools/shared/specs/network-content.js"); + +const lazy = {}; + +ChromeUtils.defineESModuleGetters(lazy, { + NetUtil: "resource://gre/modules/NetUtil.sys.mjs", + NetworkUtils: + "resource://devtools/shared/network-observer/NetworkUtils.sys.mjs", +}); + +loader.lazyRequireGetter( + this, + "WebConsoleUtils", + "resource://devtools/server/actors/webconsole/utils.js", + true +); + +const { + TYPES: { NETWORK_EVENT_STACKTRACE }, + getResourceWatcher, +} = require("resource://devtools/server/actors/resources/index.js"); + +/** + * This actor manages all network functionality runnning + * in the content process. + * + * @constructor + * + */ +class NetworkContentActor extends Actor { + constructor(conn, targetActor) { + super(conn, networkContentSpec); + this.targetActor = targetActor; + } + + get networkEventStackTraceWatcher() { + return getResourceWatcher(this.targetActor, NETWORK_EVENT_STACKTRACE); + } + + /** + * Send an HTTP request + * + * @param {Object} request + * The details of the HTTP Request. + * @return {Number} + * The channel id for the request + */ + async sendHTTPRequest(request) { + return new Promise(resolve => { + const { url, method, headers, body, cause } = request; + // Set the loadingNode and loadGroup to the target document - otherwise the + // request won't show up in the opened netmonitor. + const doc = this.targetActor.window.document; + + const channel = lazy.NetUtil.newChannel({ + uri: lazy.NetUtil.newURI(url), + loadingNode: doc, + securityFlags: + Ci.nsILoadInfo.SEC_ALLOW_CROSS_ORIGIN_INHERITS_SEC_CONTEXT, + contentPolicyType: + lazy.NetworkUtils.stringToCauseType(cause.type) || + Ci.nsIContentPolicy.TYPE_OTHER, + }); + + channel.QueryInterface(Ci.nsIHttpChannel); + channel.loadGroup = doc.documentLoadGroup; + channel.loadFlags |= + Ci.nsIRequest.LOAD_BYPASS_CACHE | + Ci.nsIRequest.INHIBIT_CACHING | + Ci.nsIRequest.LOAD_ANONYMOUS; + + if (method == "CONNECT") { + throw new Error( + "The CONNECT method is restricted and cannot be sent by devtools" + ); + } + channel.requestMethod = method; + + if (headers) { + for (const { name, value } of headers) { + if (name.toLowerCase() == "referer") { + // The referer header and referrerInfo object should always match. So + // if we want to set the header from privileged context, we should set + // referrerInfo. The referrer header will get set internally. + channel.setNewReferrerInfo( + value, + Ci.nsIReferrerInfo.UNSAFE_URL, + true + ); + } else { + channel.setRequestHeader(name, value, false); + } + } + } + + if (body) { + channel.QueryInterface(Ci.nsIUploadChannel2); + const bodyStream = Cc[ + "@mozilla.org/io/string-input-stream;1" + ].createInstance(Ci.nsIStringInputStream); + bodyStream.setData(body, body.length); + channel.explicitSetUploadStream(bodyStream, null, -1, method, false); + } + + // Make sure the fetch has completed before sending the channel id, + // so that there is a higher possibilty that the request get into the + // redux store beforehand (but this does not gurantee that). + lazy.NetUtil.asyncFetch(channel, () => + resolve({ channelId: channel.channelId }) + ); + }); + } + + /** + * Gets the stacktrace for the specified network resource. + * @param {Number} resourceId + * The id for the network resource + * @return {Object} + * The response packet - stack trace. + */ + getStackTrace(resourceId) { + if (!this.networkEventStackTraceWatcher) { + throw new Error("Not listening for network event stacktraces"); + } + const stacktrace = + this.networkEventStackTraceWatcher.getStackTrace(resourceId); + return WebConsoleUtils.removeFramesAboveDebuggerEval(stacktrace); + } +} + +exports.NetworkContentActor = NetworkContentActor; diff --git a/devtools/server/actors/network-monitor/network-event-actor.js b/devtools/server/actors/network-monitor/network-event-actor.js new file mode 100644 index 0000000000..e59738dd38 --- /dev/null +++ b/devtools/server/actors/network-monitor/network-event-actor.js @@ -0,0 +1,684 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const { Actor } = require("resource://devtools/shared/protocol.js"); +const { + networkEventSpec, +} = require("resource://devtools/shared/specs/network-event.js"); + +const { + TYPES: { NETWORK_EVENT }, +} = require("resource://devtools/server/actors/resources/index.js"); +const { + LongStringActor, +} = require("resource://devtools/server/actors/string.js"); + +const lazy = {}; + +ChromeUtils.defineESModuleGetters(lazy, { + NetworkUtils: + "resource://devtools/shared/network-observer/NetworkUtils.sys.mjs", +}); + +const CONTENT_TYPE_REGEXP = /^content-type/i; + +/** + * Creates an actor for a network event. + * + * @constructor + * @param {DevToolsServerConnection} conn + * The connection into which this Actor will be added. + * @param {Object} sessionContext + * The Session Context to help know what is debugged. + * See devtools/server/actors/watcher/session-context.js + * @param {Object} options + * Dictionary object with the following attributes: + * - onNetworkEventUpdate: optional function + * Callback for updates for the network event + * - onNetworkEventDestroy: optional function + * Callback for the destruction of the network event + * @param {Object} networkEventOptions + * Object describing the network event or the configuration of the + * network observer, and which cannot be easily inferred from the raw + * channel. + * - blockingExtension: optional string + * id of the blocking webextension if any + * - blockedReason: optional number or string + * - discardRequestBody: boolean + * - discardResponseBody: boolean + * - fromCache: boolean + * - fromServiceWorker: boolean + * - rawHeaders: string + * - timestamp: number + * @param {nsIChannel} channel + * The channel related to this network event + */ +class NetworkEventActor extends Actor { + constructor( + conn, + sessionContext, + { onNetworkEventUpdate, onNetworkEventDestroy }, + networkEventOptions, + channel + ) { + super(conn, networkEventSpec); + + this._sessionContext = sessionContext; + this._onNetworkEventUpdate = onNetworkEventUpdate; + this._onNetworkEventDestroy = onNetworkEventDestroy; + + // Store the channelId which will act as resource id. + this._channelId = channel.channelId; + + this._timings = {}; + this._serverTimings = []; + + this._discardRequestBody = !!networkEventOptions.discardRequestBody; + this._discardResponseBody = !!networkEventOptions.discardResponseBody; + + this._response = { + headers: [], + cookies: [], + content: {}, + }; + + if (channel instanceof Ci.nsIFileChannel) { + this._innerWindowId = null; + this._isNavigationRequest = false; + + this._resource = this._createResource(networkEventOptions, channel); + return; + } + + // innerWindowId and isNavigationRequest are used to check if the actor + // should be destroyed when a window is destroyed. See network-events.js. + this._innerWindowId = lazy.NetworkUtils.getChannelInnerWindowId(channel); + this._isNavigationRequest = lazy.NetworkUtils.isNavigationRequest(channel); + + // Retrieve cookies and headers from the channel + const { cookies, headers } = + lazy.NetworkUtils.fetchRequestHeadersAndCookies(channel); + + this._request = { + cookies, + headers, + postData: {}, + rawHeaders: networkEventOptions.rawHeaders, + }; + + this._resource = this._createResource(networkEventOptions, channel); + } + + /** + * Return the network event actor as a resource, and add the actorID which is + * not available in the constructor yet. + */ + asResource() { + return { + actor: this.actorID, + ...this._resource, + }; + } + + /** + * Create the resource corresponding to this actor. + */ + _createResource(networkEventOptions, channel) { + let wsChannel; + let method; + if (channel instanceof Ci.nsIFileChannel) { + channel = channel.QueryInterface(Ci.nsIFileChannel); + channel.QueryInterface(Ci.nsIChannel); + wsChannel = null; + method = "GET"; + } else { + channel = channel.QueryInterface(Ci.nsIHttpChannel); + wsChannel = lazy.NetworkUtils.getWebSocketChannel(channel); + method = channel.requestMethod; + } + + // Use the WebSocket channel URL for websockets. + const url = wsChannel ? wsChannel.URI.spec : channel.URI.spec; + + let browsingContextID = + lazy.NetworkUtils.getChannelBrowsingContextID(channel); + + // Ensure that we have a browsing context ID for all requests. + // Only privileged requests debugged via the Browser Toolbox (sessionContext.type == "all") can be unrelated to any browsing context. + if (!browsingContextID && this._sessionContext.type != "all") { + throw new Error(`Got a request ${url} without a browsingContextID set`); + } + + // The browsingContextID is used by the ResourceCommand on the client + // to find the related Target Front. + // + // For now in the browser and web extension toolboxes, requests + // do not relate to any specific WindowGlobalTargetActor + // as we are still using a unique target (ParentProcessTargetActor) for everything. + if ( + this._sessionContext.type == "all" || + this._sessionContext.type == "webextension" + ) { + browsingContextID = -1; + } + + const cause = lazy.NetworkUtils.getCauseDetails(channel); + // Both xhr and fetch are flagged as XHR in DevTools. + const isXHR = cause.type == "xhr" || cause.type == "fetch"; + + // For websocket requests the serial is used instead of the channel id. + const stacktraceResourceId = + cause.type == "websocket" ? wsChannel.serial : channel.channelId; + + // If a timestamp was provided, it is a high resolution timestamp + // corresponding to ACTIVITY_SUBTYPE_REQUEST_HEADER. Fallback to Date.now(). + const timeStamp = networkEventOptions.timestamp + ? networkEventOptions.timestamp / 1000 + : Date.now(); + + let blockedReason = networkEventOptions.blockedReason; + + // Check if blockedReason was set to a falsy value, meaning the blocked did + // not give an explicit blocked reason. + if ( + blockedReason === 0 || + blockedReason === false || + blockedReason === null || + blockedReason === "" + ) { + blockedReason = "unknown"; + } + + const resource = { + resourceId: channel.channelId, + resourceType: NETWORK_EVENT, + blockedReason, + blockingExtension: networkEventOptions.blockingExtension, + browsingContextID, + cause, + // This is used specifically in the browser toolbox console to distinguish privileged + // resources from the parent process from those from the contet + chromeContext: lazy.NetworkUtils.isChannelFromSystemPrincipal(channel), + fromCache: networkEventOptions.fromCache, + fromServiceWorker: networkEventOptions.fromServiceWorker, + innerWindowId: this._innerWindowId, + isNavigationRequest: this._isNavigationRequest, + isFileRequest: channel instanceof Ci.nsIFileChannel, + isThirdPartyTrackingResource: + lazy.NetworkUtils.isThirdPartyTrackingResource(channel), + isXHR, + method, + priority: lazy.NetworkUtils.getChannelPriority(channel), + private: lazy.NetworkUtils.isChannelPrivate(channel), + referrerPolicy: lazy.NetworkUtils.getReferrerPolicy(channel), + stacktraceResourceId, + startedDateTime: new Date(timeStamp).toISOString(), + timeStamp, + timings: {}, + url, + }; + + return resource; + } + + /** + * Releases this actor from the pool. + */ + destroy(conn) { + if (!this._channelId) { + return; + } + + if (this._onNetworkEventDestroy) { + this._onNetworkEventDestroy(this._channelId); + } + + this._channelId = null; + super.destroy(conn); + } + + release() { + // Per spec, destroy is automatically going to be called after this request + } + + getInnerWindowId() { + return this._innerWindowId; + } + + isNavigationRequest() { + return this._isNavigationRequest; + } + + /** + * The "getRequestHeaders" packet type handler. + * + * @return object + * The response packet - network request headers. + */ + getRequestHeaders() { + let rawHeaders; + let headersSize = 0; + if (this._request.rawHeaders) { + headersSize = this._request.rawHeaders.length; + rawHeaders = this._createLongStringActor(this._request.rawHeaders); + } + + return { + headers: this._request.headers.map(header => ({ + name: header.name, + value: this._createLongStringActor(header.value), + })), + headersSize, + rawHeaders, + }; + } + + /** + * The "getRequestCookies" packet type handler. + * + * @return object + * The response packet - network request cookies. + */ + getRequestCookies() { + return { + cookies: this._request.cookies.map(cookie => ({ + name: cookie.name, + value: this._createLongStringActor(cookie.value), + })), + }; + } + + /** + * The "getRequestPostData" packet type handler. + * + * @return object + * The response packet - network POST data. + */ + getRequestPostData() { + let postDataText; + if (this._request.postData.text) { + // Create a long string actor for the postData text if needed. + postDataText = this._createLongStringActor(this._request.postData.text); + } + + return { + postData: { + size: this._request.postData.size, + text: postDataText, + }, + postDataDiscarded: this._discardRequestBody, + }; + } + + /** + * The "getSecurityInfo" packet type handler. + * + * @return object + * The response packet - connection security information. + */ + getSecurityInfo() { + return { + securityInfo: this._securityInfo, + }; + } + + /** + * The "getResponseHeaders" packet type handler. + * + * @return object + * The response packet - network response headers. + */ + getResponseHeaders() { + let rawHeaders; + let headersSize = 0; + if (this._response.rawHeaders) { + headersSize = this._response.rawHeaders.length; + rawHeaders = this._createLongStringActor(this._response.rawHeaders); + } + + return { + headers: this._response.headers.map(header => ({ + name: header.name, + value: this._createLongStringActor(header.value), + })), + headersSize, + rawHeaders, + }; + } + + /** + * The "getResponseCache" packet type handler. + * + * @return object + * The cache packet - network cache information. + */ + getResponseCache() { + return { + cache: this._response.responseCache, + }; + } + + /** + * The "getResponseCookies" packet type handler. + * + * @return object + * The response packet - network response cookies. + */ + getResponseCookies() { + // As opposed to request cookies, response cookies can come with additional + // properties. + const cookieOptionalProperties = [ + "domain", + "expires", + "httpOnly", + "path", + "samesite", + "secure", + ]; + + return { + cookies: this._response.cookies.map(cookie => { + const cookieResponse = { + name: cookie.name, + value: this._createLongStringActor(cookie.value), + }; + + for (const prop of cookieOptionalProperties) { + if (prop in cookie) { + cookieResponse[prop] = cookie[prop]; + } + } + return cookieResponse; + }), + }; + } + + /** + * The "getResponseContent" packet type handler. + * + * @return object + * The response packet - network response content. + */ + getResponseContent() { + return { + content: this._response.content, + contentDiscarded: this._discardResponseBody, + }; + } + + /** + * The "getEventTimings" packet type handler. + * + * @return object + * The response packet - network event timings. + */ + getEventTimings() { + return { + timings: this._timings, + totalTime: this._totalTime, + offsets: this._offsets, + serverTimings: this._serverTimings, + serviceWorkerTimings: this._serviceWorkerTimings, + }; + } + + /** **************************************************************** + * Listeners for new network event data coming from NetworkMonitor. + ******************************************************************/ + + /** + * Add network request POST data. + * + * @param object postData + * The request POST data. + */ + addRequestPostData(postData) { + // Ignore calls when this actor is already destroyed + if (this.isDestroyed()) { + return; + } + + this._request.postData = postData; + this._onEventUpdate("requestPostData", {}); + } + + /** + * Add the initial network response information. + * + * @param {object} options + * @param {nsIChannel} options.channel + * @param {boolean} options.fromCache + * @param {string} options.rawHeaders + * @param {string} options.proxyResponseRawHeaders + */ + addResponseStart({ + channel, + fromCache, + rawHeaders = "", + proxyResponseRawHeaders, + }) { + // Ignore calls when this actor is already destroyed + if (this.isDestroyed()) { + return; + } + + fromCache = fromCache || lazy.NetworkUtils.isFromCache(channel); + + // Read response headers and cookies. + let responseHeaders = []; + let responseCookies = []; + if (!this._blockedReason && !(channel instanceof Ci.nsIFileChannel)) { + const { cookies, headers } = + lazy.NetworkUtils.fetchResponseHeadersAndCookies(channel); + responseCookies = cookies; + responseHeaders = headers; + } + + // Handle response headers + this._response.rawHeaders = rawHeaders; + this._response.headers = responseHeaders; + this._response.cookies = responseCookies; + + // Handle the rest of the response start metadata. + this._response.headersSize = rawHeaders ? rawHeaders.length : 0; + + // Discard the response body for known response statuses. + if (lazy.NetworkUtils.isRedirectedChannel(channel)) { + this._discardResponseBody = true; + } + + // Mime type needs to be sent on response start for identifying an sse channel. + const contentTypeHeader = responseHeaders.find(header => + CONTENT_TYPE_REGEXP.test(header.name) + ); + + let mimeType = ""; + if (contentTypeHeader) { + mimeType = contentTypeHeader.value; + } + + let waitingTime = null; + if (!(channel instanceof Ci.nsIFileChannel)) { + const timedChannel = channel.QueryInterface(Ci.nsITimedChannel); + waitingTime = Math.round( + (timedChannel.responseStartTime - timedChannel.requestStartTime) / 1000 + ); + } + + let proxyInfo = []; + if (proxyResponseRawHeaders) { + // The typical format for proxy raw headers is `HTTP/2 200 Connected\r\nConnection: keep-alive` + // The content is parsed and split into http version (HTTP/2), status(200) and status text (Connected) + proxyInfo = proxyResponseRawHeaders.split("\r\n")[0].split(" "); + } + + const isFileChannel = channel instanceof Ci.nsIFileChannel; + this._onEventUpdate("responseStart", { + httpVersion: isFileChannel + ? null + : lazy.NetworkUtils.getHttpVersion(channel), + mimeType, + remoteAddress: fromCache ? "" : channel.remoteAddress, + remotePort: fromCache ? "" : channel.remotePort, + status: isFileChannel ? "200" : channel.responseStatus + "", + statusText: isFileChannel ? "0K" : channel.responseStatusText, + waitingTime, + isResolvedByTRR: channel.isResolvedByTRR, + proxyHttpVersion: proxyInfo[0], + proxyStatus: proxyInfo[1], + proxyStatusText: proxyInfo[2], + }); + } + + /** + * Add connection security information. + * + * @param object info + * The object containing security information. + */ + addSecurityInfo(info, isRacing) { + // Ignore calls when this actor is already destroyed + if (this.isDestroyed()) { + return; + } + + this._securityInfo = info; + + this._onEventUpdate("securityInfo", { + state: info.state, + isRacing, + }); + } + + /** + * Add network response content. + * + * @param object content + * The response content. + * @param object + * - boolean discardedResponseBody + * Tells if the response content was recorded or not. + */ + addResponseContent( + content, + { discardResponseBody, blockedReason, blockingExtension } + ) { + // Ignore calls when this actor is already destroyed + if (this.isDestroyed()) { + return; + } + + this._response.content = content; + content.text = new LongStringActor(this.conn, content.text); + // bug 1462561 - Use "json" type and manually manage/marshall actors to workaround + // protocol.js performance issue + this.manage(content.text); + content.text = content.text.form(); + + this._onEventUpdate("responseContent", { + mimeType: content.mimeType, + contentSize: content.size, + transferredSize: content.transferredSize, + blockedReason, + blockingExtension, + }); + } + + addResponseCache(content) { + // Ignore calls when this actor is already destroyed + if (this.isDestroyed()) { + return; + } + this._response.responseCache = content.responseCache; + this._onEventUpdate("responseCache", {}); + } + + /** + * Add network event timing information. + * + * @param number total + * The total time of the network event. + * @param object timings + * Timing details about the network event. + * @param object offsets + */ + addEventTimings(total, timings, offsets) { + // Ignore calls when this actor is already destroyed + if (this.isDestroyed()) { + return; + } + + this._totalTime = total; + this._timings = timings; + this._offsets = offsets; + + this._onEventUpdate("eventTimings", { totalTime: total }); + } + + /** + * Store server timing information. They are merged together + * with network event timing data when they are available and + * notification sent to the client. + * See `addEventTimings` above for more information. + * + * @param object serverTimings + * Timing details extracted from the Server-Timing header. + */ + addServerTimings(serverTimings) { + if (!serverTimings || this.isDestroyed()) { + return; + } + this._serverTimings = serverTimings; + } + + /** + * Store service worker timing information. They are merged together + * with network event timing data when they are available and + * notification sent to the client. + * See `addEventTimnings`` above for more information. + * + * @param object serviceWorkerTimings + * Timing details extracted from the Timed Channel. + */ + addServiceWorkerTimings(serviceWorkerTimings) { + if (!serviceWorkerTimings || this.isDestroyed()) { + return; + } + this._serviceWorkerTimings = serviceWorkerTimings; + } + + _createLongStringActor(string) { + if (string?.actorID) { + return string; + } + + const longStringActor = new LongStringActor(this.conn, string); + // bug 1462561 - Use "json" type and manually manage/marshall actors to workaround + // protocol.js performance issue + this.manage(longStringActor); + return longStringActor.form(); + } + + /** + * Sends the updated event data to the client + * + * @private + * @param string updateType + * @param object data + * The properties that have changed for the event + */ + _onEventUpdate(updateType, data) { + if (this._onNetworkEventUpdate) { + this._onNetworkEventUpdate({ + resourceId: this._channelId, + updateType, + ...data, + }); + } + } +} + +exports.NetworkEventActor = NetworkEventActor; diff --git a/devtools/server/actors/network-monitor/network-parent.js b/devtools/server/actors/network-monitor/network-parent.js new file mode 100644 index 0000000000..bc7eab1051 --- /dev/null +++ b/devtools/server/actors/network-monitor/network-parent.js @@ -0,0 +1,175 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const { Actor } = require("resource://devtools/shared/protocol.js"); +const { + networkParentSpec, +} = require("resource://devtools/shared/specs/network-parent.js"); + +const { + TYPES: { NETWORK_EVENT }, + getResourceWatcher, +} = require("resource://devtools/server/actors/resources/index.js"); + +/** + * This actor manages all network functionality running + * in the parent process. + * + * @constructor + * + */ +class NetworkParentActor extends Actor { + constructor(watcherActor) { + super(watcherActor.conn, networkParentSpec); + this.watcherActor = watcherActor; + } + + // Caches the throttling data so that on clearing the + // current network throttling it can be reset to the previous. + defaultThrottleData = undefined; + + isEqual(next, current) { + // If both objects, check all entries + if (current && next && next == current) { + return Object.entries(current).every(([k, v]) => { + return next[k] === v; + }); + } + return false; + } + + get networkEventWatcher() { + return getResourceWatcher(this.watcherActor, NETWORK_EVENT); + } + + setNetworkThrottling(throttleData) { + if (!this.networkEventWatcher) { + throw new Error("Not listening for network events"); + } + + if (throttleData !== null) { + throttleData = { + latencyMean: throttleData.latency, + latencyMax: throttleData.latency, + downloadBPSMean: throttleData.downloadThroughput, + downloadBPSMax: throttleData.downloadThroughput, + uploadBPSMean: throttleData.uploadThroughput, + uploadBPSMax: throttleData.uploadThroughput, + }; + } + + const currentThrottleData = this.networkEventWatcher.getThrottleData(); + if (this.isEqual(throttleData, currentThrottleData)) { + return; + } + + if (this.defaultThrottleData === undefined) { + this.defaultThrottleData = currentThrottleData; + } + + this.networkEventWatcher.setThrottleData(throttleData); + } + + getNetworkThrottling() { + if (!this.networkEventWatcher) { + throw new Error("Not listening for network events"); + } + const throttleData = this.networkEventWatcher.getThrottleData(); + if (!throttleData) { + return null; + } + return { + downloadThroughput: throttleData.downloadBPSMax, + uploadThroughput: throttleData.uploadBPSMax, + latency: throttleData.latencyMax, + }; + } + + clearNetworkThrottling() { + if (this.defaultThrottleData !== undefined) { + this.setNetworkThrottling(this.defaultThrottleData); + } + } + + setSaveRequestAndResponseBodies(save) { + if (!this.networkEventWatcher) { + throw new Error("Not listening for network events"); + } + this.networkEventWatcher.setSaveRequestAndResponseBodies(save); + } + + /** + * Sets the urls to block. + * + * @param Array urls + * The response packet - stack trace. + */ + setBlockedUrls(urls) { + if (!this.networkEventWatcher) { + throw new Error("Not listening for network events"); + } + this.networkEventWatcher.setBlockedUrls(urls); + return {}; + } + + /** + * Returns the urls that are block + */ + getBlockedUrls() { + if (!this.networkEventWatcher) { + throw new Error("Not listening for network events"); + } + return this.networkEventWatcher.getBlockedUrls(); + } + + /** + * Blocks the requests based on the filters + * @param {Object} filters + */ + blockRequest(filters) { + if (!this.networkEventWatcher) { + throw new Error("Not listening for network events"); + } + this.networkEventWatcher.blockRequest(filters); + } + + /** + * Unblocks requests based on the filters + * @param {Object} filters + */ + unblockRequest(filters) { + if (!this.networkEventWatcher) { + throw new Error("Not listening for network events"); + } + this.networkEventWatcher.unblockRequest(filters); + } + + setPersist(enabled) { + // We will always call this method, even if we are still using legacy listener. + // Do not throw, we will always persist in that deprecated codepath. + if (!this.networkEventWatcher) { + return; + } + this.networkEventWatcher.setPersist(enabled); + } + + override(url, path) { + if (!this.networkEventWatcher) { + throw new Error("Not listening for network events"); + } + this.networkEventWatcher.override(url, path); + return {}; + } + + removeOverride(url) { + if (!this.networkEventWatcher) { + throw new Error("Not listening for network events"); + } + this.networkEventWatcher.removeOverride(url); + } +} + +exports.NetworkParentActor = NetworkParentActor; diff --git a/devtools/server/actors/object.js b/devtools/server/actors/object.js new file mode 100644 index 0000000000..9b52c4ebe7 --- /dev/null +++ b/devtools/server/actors/object.js @@ -0,0 +1,847 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const { Actor } = require("resource://devtools/shared/protocol/Actor.js"); +const { objectSpec } = require("resource://devtools/shared/specs/object.js"); + +const DevToolsUtils = require("resource://devtools/shared/DevToolsUtils.js"); +const { assert } = DevToolsUtils; + +loader.lazyRequireGetter( + this, + "PropertyIteratorActor", + "resource://devtools/server/actors/object/property-iterator.js", + true +); +loader.lazyRequireGetter( + this, + "SymbolIteratorActor", + "resource://devtools/server/actors/object/symbol-iterator.js", + true +); +loader.lazyRequireGetter( + this, + "PrivatePropertiesIteratorActor", + "resource://devtools/server/actors/object/private-properties-iterator.js", + true +); +loader.lazyRequireGetter( + this, + "previewers", + "resource://devtools/server/actors/object/previewers.js" +); + +loader.lazyRequireGetter( + this, + ["customFormatterHeader", "customFormatterBody"], + "resource://devtools/server/actors/utils/custom-formatters.js", + true +); + +// This is going to be used by findSafeGetters, where we want to avoid calling getters for +// deprecated properties (otherwise a warning message is displayed in the console). +// We could do something like EagerEvaluation, where we create a new Sandbox which is then +// used to compare functions, but, we'd need to make new classes available in +// the Sandbox, and possibly do it again when a new property gets deprecated. +// Since this is only to be able to automatically call getters, we can simply check against +// a list of unsafe getters that we generate from webidls. +loader.lazyRequireGetter( + this, + "unsafeGettersNames", + "resource://devtools/server/actors/webconsole/webidl-unsafe-getters-names.js" +); + +// ContentDOMReference requires ChromeUtils, which isn't available in worker context. +const lazy = {}; +if (!isWorker) { + loader.lazyGetter( + lazy, + "ContentDOMReference", + () => + ChromeUtils.importESModule( + "resource://gre/modules/ContentDOMReference.sys.mjs", + { + // ContentDOMReference needs to be retrieved from the shared global + // since it is a shared singleton. + loadInDevToolsLoader: false, + } + ).ContentDOMReference + ); +} + +const { + getArrayLength, + getPromiseState, + getStorageLength, + isArray, + isStorage, + isTypedArray, +} = require("resource://devtools/server/actors/object/utils.js"); + +class ObjectActor extends Actor { + /** + * Creates an actor for the specified object. + * + * @param obj Debugger.Object + * The debuggee object. + * @param Object + * A collection of abstract methods that are implemented by the caller. + * ObjectActor requires the following functions to be implemented by + * the caller: + * - createValueGrip + * Creates a value grip for the given object + * - createEnvironmentActor + * Creates and return an environment actor + * - getGripDepth + * An actor's grip depth getter + * - incrementGripDepth + * Increment the actor's grip depth + * - decrementGripDepth + * Decrement the actor's grip depth + * @param DevToolsServerConnection conn + */ + constructor( + obj, + { + thread, + createValueGrip: createValueGripHook, + createEnvironmentActor, + getGripDepth, + incrementGripDepth, + decrementGripDepth, + customFormatterObjectTagDepth, + customFormatterConfigDbgObj, + }, + conn + ) { + super(conn, objectSpec); + + assert( + !obj.optimizedOut, + "Should not create object actors for optimized out values!" + ); + + this.obj = obj; + this.thread = thread; + this.hooks = { + createValueGrip: createValueGripHook, + createEnvironmentActor, + getGripDepth, + incrementGripDepth, + decrementGripDepth, + customFormatterObjectTagDepth, + customFormatterConfigDbgObj, + }; + } + + rawValue() { + return this.obj.unsafeDereference(); + } + + addWatchpoint(property, label, watchpointType) { + this.thread.addWatchpoint(this, { property, label, watchpointType }); + } + + removeWatchpoint(property) { + this.thread.removeWatchpoint(this, property); + } + + removeWatchpoints() { + this.thread.removeWatchpoint(this); + } + + /** + * Returns a grip for this actor for returning in a protocol message. + */ + form() { + const g = { + type: "object", + actor: this.actorID, + }; + + const unwrapped = DevToolsUtils.unwrap(this.obj); + if (unwrapped === undefined) { + // Objects belonging to an invisible-to-debugger compartment might be proxies, + // so just in case they shouldn't be accessed. + g.class = "InvisibleToDebugger: " + this.obj.class; + return g; + } + + // Only process custom formatters if the feature is enabled. + if (this.thread?._parent?.customFormatters) { + const result = customFormatterHeader(this); + if (result) { + const { formatter, ...header } = result; + this._customFormatterItem = formatter; + + return { + ...g, + ...header, + }; + } + } + + if (unwrapped?.isProxy) { + // Proxy objects can run traps when accessed, so just create a preview with + // the target and the handler. + g.class = "Proxy"; + this.hooks.incrementGripDepth(); + previewers.Proxy[0](this, g, null); + this.hooks.decrementGripDepth(); + return g; + } + + const ownPropertyLength = this._getOwnPropertyLength(); + + Object.assign(g, { + // If the debuggee does not subsume the object's compartment, most properties won't + // be accessible. Cross-orgin Window and Location objects might expose some, though. + // Change the displayed class, but when creating the preview use the original one. + class: unwrapped === null ? "Restricted" : this.obj.class, + ownPropertyLength: Number.isFinite(ownPropertyLength) + ? ownPropertyLength + : undefined, + extensible: this.obj.isExtensible(), + frozen: this.obj.isFrozen(), + sealed: this.obj.isSealed(), + isError: this.obj.isError, + }); + + this.hooks.incrementGripDepth(); + + if (g.class == "Function") { + g.isClassConstructor = this.obj.isClassConstructor; + } + + const raw = this.getRawObject(); + this._populateGripPreview(g, raw); + this.hooks.decrementGripDepth(); + + if (raw && Node.isInstance(raw) && lazy.ContentDOMReference) { + // ContentDOMReference.get takes a DOM element and returns an object with + // its browsing context id, as well as a unique identifier. We are putting it in + // the grip here in order to be able to retrieve the node later, potentially from a + // different DevToolsServer running in the same process. + // If ContentDOMReference.get throws, we simply don't add the property to the grip. + try { + g.contentDomReference = lazy.ContentDOMReference.get(raw); + } catch (e) {} + } + + return g; + } + + customFormatterBody() { + return customFormatterBody(this, this._customFormatterItem); + } + + _getOwnPropertyLength() { + if (isTypedArray(this.obj)) { + // Bug 1348761: getOwnPropertyNames is unnecessary slow on TypedArrays + return getArrayLength(this.obj); + } + + if (isStorage(this.obj)) { + return getStorageLength(this.obj); + } + + try { + return this.obj.getOwnPropertyNamesLength(); + } catch (err) { + // The above can throw when the debuggee does not subsume the object's + // compartment, or for some WrappedNatives like Cu.Sandbox. + } + + return null; + } + + getRawObject() { + let raw = this.obj.unsafeDereference(); + + // If Cu is not defined, we are running on a worker thread, where xrays + // don't exist. + if (raw && Cu) { + raw = Cu.unwaiveXrays(raw); + } + + if (raw && !DevToolsUtils.isSafeJSObject(raw)) { + raw = null; + } + + return raw; + } + + /** + * Populate the `preview` property on `grip` given its type. + */ + _populateGripPreview(grip, raw) { + // Cache obj.class as it can be costly if this is in a hot path (e.g. logging objects + // within a for loop). + const className = this.obj.class; + for (const previewer of previewers[className] || previewers.Object) { + try { + const previewerResult = previewer(this, grip, raw, className); + if (previewerResult) { + return; + } + } catch (e) { + const msg = + "ObjectActor.prototype._populateGripPreview previewer function"; + DevToolsUtils.reportException(msg, e); + } + } + } + + /** + * Returns an object exposing the internal Promise state. + */ + promiseState() { + const { state, value, reason } = getPromiseState(this.obj); + const promiseState = { state }; + + if (state == "fulfilled") { + promiseState.value = this.hooks.createValueGrip(value); + } else if (state == "rejected") { + promiseState.reason = this.hooks.createValueGrip(reason); + } + + promiseState.creationTimestamp = Date.now() - this.obj.promiseLifetime; + + // Only add the timeToSettle property if the Promise isn't pending. + if (state !== "pending") { + promiseState.timeToSettle = this.obj.promiseTimeToResolution; + } + + return { promiseState }; + } + + /** + * Creates an actor to iterate over an object property names and values. + * See PropertyIteratorActor constructor for more info about options param. + * + * @param options object + */ + enumProperties(options) { + return new PropertyIteratorActor(this, options, this.conn); + } + + /** + * Creates an actor to iterate over entries of a Map/Set-like object. + */ + enumEntries() { + return new PropertyIteratorActor(this, { enumEntries: true }, this.conn); + } + + /** + * Creates an actor to iterate over an object symbols properties. + */ + enumSymbols() { + return new SymbolIteratorActor(this, this.conn); + } + + /** + * Creates an actor to iterate over an object private properties. + */ + enumPrivateProperties() { + return new PrivatePropertiesIteratorActor(this, this.conn); + } + + /** + * Handle a protocol request to provide the prototype and own properties of + * the object. + * + * @returns {Object} An object containing the data of this.obj, of the following form: + * - {Object} prototype: The descriptor of this.obj's prototype. + * - {Object} ownProperties: an object where the keys are the names of the + * this.obj's ownProperties, and the values the descriptors of + * the properties. + * - {Array} ownSymbols: An array containing all descriptors of this.obj's + * ownSymbols. Here we have an array, and not an object like for + * ownProperties, because we can have multiple symbols with the same + * name in this.obj, e.g. `{[Symbol()]: "a", [Symbol()]: "b"}`. + * - {Object} safeGetterValues: an object that maps this.obj's property names + * with safe getters descriptors. + */ + prototypeAndProperties() { + let objProto = null; + let names = []; + let symbols = []; + if (DevToolsUtils.isSafeDebuggerObject(this.obj)) { + try { + objProto = this.obj.proto; + names = this.obj.getOwnPropertyNames(); + symbols = this.obj.getOwnPropertySymbols(); + } catch (err) { + // The above can throw when the debuggee does not subsume the object's + // compartment, or for some WrappedNatives like Cu.Sandbox. + } + } + + const ownProperties = Object.create(null); + const ownSymbols = []; + + for (const name of names) { + ownProperties[name] = this._propertyDescriptor(name); + } + + for (const sym of symbols) { + ownSymbols.push({ + name: sym.toString(), + descriptor: this._propertyDescriptor(sym), + }); + } + + return { + prototype: this.hooks.createValueGrip(objProto), + ownProperties, + ownSymbols, + safeGetterValues: this._findSafeGetterValues(names), + }; + } + + /** + * Find the safe getter values for the current Debugger.Object, |this.obj|. + * + * @private + * @param array ownProperties + * The array that holds the list of known ownProperties names for + * |this.obj|. + * @param number [limit=Infinity] + * Optional limit of getter values to find. + * @return object + * An object that maps property names to safe getter descriptors as + * defined by the remote debugging protocol. + */ + _findSafeGetterValues(ownProperties, limit = Infinity) { + const safeGetterValues = Object.create(null); + let obj = this.obj; + let level = 0, + currentGetterValuesCount = 0; + + // Do not search safe getters in unsafe objects. + if (!DevToolsUtils.isSafeDebuggerObject(obj)) { + return safeGetterValues; + } + + // Most objects don't have any safe getters but inherit some from their + // prototype. Avoid calling getOwnPropertyNames on objects that may have + // many properties like Array, strings or js objects. That to avoid + // freezing firefox when doing so. + if (isArray(this.obj) || ["Object", "String"].includes(this.obj.class)) { + obj = obj.proto; + level++; + } + + while (obj && DevToolsUtils.isSafeDebuggerObject(obj)) { + for (const name of this._findSafeGetters(obj)) { + // Avoid overwriting properties from prototypes closer to this.obj. Also + // avoid providing safeGetterValues from prototypes if property |name| + // is already defined as an own property. + if ( + name in safeGetterValues || + (obj != this.obj && ownProperties.includes(name)) + ) { + continue; + } + + // Ignore __proto__ on Object.prototye. + if (!obj.proto && name == "__proto__") { + continue; + } + + const desc = safeGetOwnPropertyDescriptor(obj, name); + if (!desc?.get) { + // If no getter matches the name, the cache is stale and should be cleaned up. + obj._safeGetters = null; + continue; + } + + const getterValue = this._evaluateGetter(desc.get); + if (getterValue === undefined) { + continue; + } + + // Treat an already-rejected Promise as we would a thrown exception + // by not including it as a safe getter value (see Bug 1477765). + if (isRejectedPromise(getterValue)) { + // Until we have a good way to handle Promise rejections through the + // debugger API (Bug 1478076), call `catch` when it's safe to do so. + const raw = getterValue.unsafeDereference(); + if (DevToolsUtils.isSafeJSObject(raw)) { + raw.catch(e => e); + } + continue; + } + + // WebIDL attributes specified with the LenientThis extended attribute + // return undefined and should be ignored. + safeGetterValues[name] = { + getterValue: this.hooks.createValueGrip(getterValue), + getterPrototypeLevel: level, + enumerable: desc.enumerable, + writable: level == 0 ? desc.writable : true, + }; + + ++currentGetterValuesCount; + if (currentGetterValuesCount == limit) { + return safeGetterValues; + } + } + + obj = obj.proto; + level++; + } + + return safeGetterValues; + } + + /** + * Evaluate the getter function |desc.get|. + * @param {Object} getter + */ + _evaluateGetter(getter) { + const result = getter.call(this.obj); + if (!result || "throw" in result) { + return undefined; + } + + let getterValue = undefined; + if ("return" in result) { + getterValue = result.return; + } else if ("yield" in result) { + getterValue = result.yield; + } + + return getterValue; + } + + /** + * Find the safe getters for a given Debugger.Object. Safe getters are native + * getters which are safe to execute. + * + * @private + * @param Debugger.Object object + * The Debugger.Object where you want to find safe getters. + * @return Set + * A Set of names of safe getters. This result is cached for each + * Debugger.Object. + */ + _findSafeGetters(object) { + if (object._safeGetters) { + return object._safeGetters; + } + + const getters = new Set(); + + if (!DevToolsUtils.isSafeDebuggerObject(object)) { + object._safeGetters = getters; + return getters; + } + + let names = []; + try { + names = object.getOwnPropertyNames(); + } catch (ex) { + // Calling getOwnPropertyNames() on some wrapped native prototypes is not + // allowed: "cannot modify properties of a WrappedNative". See bug 952093. + } + + for (const name of names) { + let desc = null; + try { + desc = object.getOwnPropertyDescriptor(name); + } catch (e) { + // Calling getOwnPropertyDescriptor on wrapped native prototypes is not + // allowed (bug 560072). + } + if (!desc || desc.value !== undefined || !("get" in desc)) { + continue; + } + + if ( + DevToolsUtils.hasSafeGetter(desc) && + !unsafeGettersNames.includes(name) + ) { + getters.add(name); + } + } + + object._safeGetters = getters; + return getters; + } + + /** + * Handle a protocol request to provide the prototype of the object. + */ + prototype() { + let objProto = null; + if (DevToolsUtils.isSafeDebuggerObject(this.obj)) { + objProto = this.obj.proto; + } + return { prototype: this.hooks.createValueGrip(objProto) }; + } + + /** + * Handle a protocol request to provide the property descriptor of the + * object's specified property. + * + * @param name string + * The property we want the description of. + */ + property(name) { + if (!name) { + return this.throwError( + "missingParameter", + "no property name was specified" + ); + } + + return { descriptor: this._propertyDescriptor(name) }; + } + + /** + * Handle a protocol request to provide the value of the object's + * specified property. + * + * Note: Since this will evaluate getters, it can trigger execution of + * content code and may cause side effects. This endpoint should only be used + * when you are confident that the side-effects will be safe, or the user + * is expecting the effects. + * + * @param {string} name + * The property we want the value of. + * @param {string|null} receiverId + * The actorId of the receiver to be used if the property is a getter. + * If null or invalid, the receiver will be the referent. + */ + propertyValue(name, receiverId) { + if (!name) { + return this.throwError( + "missingParameter", + "no property name was specified" + ); + } + + let receiver; + if (receiverId) { + const receiverActor = this.conn.getActor(receiverId); + if (receiverActor) { + receiver = receiverActor.obj; + } + } + + const value = receiver + ? this.obj.getProperty(name, receiver) + : this.obj.getProperty(name); + + return { value: this._buildCompletion(value) }; + } + + /** + * Handle a protocol request to evaluate a function and provide the value of + * the result. + * + * Note: Since this will evaluate the function, it can trigger execution of + * content code and may cause side effects. This endpoint should only be used + * when you are confident that the side-effects will be safe, or the user + * is expecting the effects. + * + * @param {any} context + * The 'this' value to call the function with. + * @param {Array<any>} args + * The array of un-decoded actor objects, or primitives. + */ + apply(context, args) { + if (!this.obj.callable) { + return this.throwError("notCallable", "debugee object is not callable"); + } + + const debugeeContext = this._getValueFromGrip(context); + const debugeeArgs = args && args.map(this._getValueFromGrip, this); + + const value = this.obj.apply(debugeeContext, debugeeArgs); + + return { value: this._buildCompletion(value) }; + } + + _getValueFromGrip(grip) { + if (typeof grip !== "object" || !grip) { + return grip; + } + + if (typeof grip.actor !== "string") { + return this.throwError( + "invalidGrip", + "grip argument did not include actor ID" + ); + } + + const actor = this.conn.getActor(grip.actor); + + if (!actor) { + return this.throwError( + "unknownActor", + "grip actor did not match a known object" + ); + } + + return actor.obj; + } + + /** + * Converts a Debugger API completion value record into an equivalent + * object grip for use by the API. + * + * See https://firefox-source-docs.mozilla.org/devtools-user/debugger-api/ + * for more specifics on the expected behavior. + */ + _buildCompletion(value) { + let completionGrip = null; + + // .apply result will be falsy if the script being executed is terminated + // via the "slow script" dialog. + if (value) { + completionGrip = {}; + if ("return" in value) { + completionGrip.return = this.hooks.createValueGrip(value.return); + } + if ("throw" in value) { + completionGrip.throw = this.hooks.createValueGrip(value.throw); + } + } + + return completionGrip; + } + + /** + * A helper method that creates a property descriptor for the provided object, + * properly formatted for sending in a protocol response. + * + * @private + * @param string name + * The property that the descriptor is generated for. + * @param boolean [onlyEnumerable] + * Optional: true if you want a descriptor only for an enumerable + * property, false otherwise. + * @return object|undefined + * The property descriptor, or undefined if this is not an enumerable + * property and onlyEnumerable=true. + */ + _propertyDescriptor(name, onlyEnumerable) { + if (!DevToolsUtils.isSafeDebuggerObject(this.obj)) { + return undefined; + } + + let desc; + try { + desc = this.obj.getOwnPropertyDescriptor(name); + } catch (e) { + // Calling getOwnPropertyDescriptor on wrapped native prototypes is not + // allowed (bug 560072). Inform the user with a bogus, but hopefully + // explanatory, descriptor. + return { + configurable: false, + writable: false, + enumerable: false, + value: e.name, + }; + } + + if (isStorage(this.obj)) { + if (name === "length") { + return undefined; + } + return desc; + } + + if (!desc || (onlyEnumerable && !desc.enumerable)) { + return undefined; + } + + const retval = { + configurable: desc.configurable, + enumerable: desc.enumerable, + }; + const obj = this.rawValue(); + + if ("value" in desc) { + retval.writable = desc.writable; + retval.value = this.hooks.createValueGrip(desc.value); + } else if (this.thread.getWatchpoint(obj, name.toString())) { + const watchpoint = this.thread.getWatchpoint(obj, name.toString()); + retval.value = this.hooks.createValueGrip(watchpoint.desc.value); + retval.watchpoint = watchpoint.watchpointType; + } else { + if ("get" in desc) { + retval.get = this.hooks.createValueGrip(desc.get); + } + + if ("set" in desc) { + retval.set = this.hooks.createValueGrip(desc.set); + } + } + return retval; + } + + /** + * Handle a protocol request to get the target and handler internal slots of a proxy. + */ + proxySlots() { + // There could be transparent security wrappers, unwrap to check if it's a proxy. + // However, retrieve proxyTarget and proxyHandler from `this.obj` to avoid exposing + // the unwrapped target and handler. + const unwrapped = DevToolsUtils.unwrap(this.obj); + if (!unwrapped || !unwrapped.isProxy) { + return this.throwError( + "objectNotProxy", + "'proxySlots' request is only valid for grips with a 'Proxy' class." + ); + } + return { + proxyTarget: this.hooks.createValueGrip(this.obj.proxyTarget), + proxyHandler: this.hooks.createValueGrip(this.obj.proxyHandler), + }; + } + + /** + * Release the actor, when it isn't needed anymore. + * Protocol.js uses this release method to call the destroy method. + */ + release() { + if (this.hooks) { + this.hooks.customFormatterConfigDbgObj = null; + } + this._customFormatterItem = null; + this.obj = null; + this.thread = null; + } +} + +exports.ObjectActor = ObjectActor; + +function safeGetOwnPropertyDescriptor(obj, name) { + let desc = null; + try { + desc = obj.getOwnPropertyDescriptor(name); + } catch (ex) { + // The above can throw if the cache becomes stale. + } + return desc; +} + +/** + * Check if the value is rejected promise + * + * @param {Object} getterValue + * @returns {boolean} true if the value is rejected promise, false otherwise. + */ +function isRejectedPromise(getterValue) { + return ( + getterValue && + getterValue.class == "Promise" && + getterValue.promiseState == "rejected" + ); +} diff --git a/devtools/server/actors/object/moz.build b/devtools/server/actors/object/moz.build new file mode 100644 index 0000000000..28fc2307da --- /dev/null +++ b/devtools/server/actors/object/moz.build @@ -0,0 +1,12 @@ +# 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/. + +DevToolsModules( + "previewers.js", + "private-properties-iterator.js", + "property-iterator.js", + "symbol-iterator.js", + "symbol.js", + "utils.js", +) diff --git a/devtools/server/actors/object/previewers.js b/devtools/server/actors/object/previewers.js new file mode 100644 index 0000000000..451858a826 --- /dev/null +++ b/devtools/server/actors/object/previewers.js @@ -0,0 +1,1142 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const { DevToolsServer } = require("resource://devtools/server/devtools-server.js"); +const DevToolsUtils = require("resource://devtools/shared/DevToolsUtils.js"); +loader.lazyRequireGetter( + this, + "ObjectUtils", + "resource://devtools/server/actors/object/utils.js" +); +loader.lazyRequireGetter( + this, + "PropertyIterators", + "resource://devtools/server/actors/object/property-iterator.js" +); + +// Number of items to preview in objects, arrays, maps, sets, lists, +// collections, etc. +const OBJECT_PREVIEW_MAX_ITEMS = 10; + +const ERROR_CLASSNAMES = new Set([ + "Error", + "EvalError", + "RangeError", + "ReferenceError", + "SyntaxError", + "TypeError", + "URIError", + "InternalError", + "AggregateError", + "CompileError", + "DebuggeeWouldRun", + "LinkError", + "RuntimeError", + "Exception", // This related to Components.Exception() +]); +const ARRAY_LIKE_CLASSNAMES = new Set([ + "DOMStringList", + "DOMTokenList", + "CSSRuleList", + "MediaList", + "StyleSheetList", + "NamedNodeMap", + "FileList", + "NodeList", +]); +const OBJECT_WITH_URL_CLASSNAMES = new Set([ + "CSSImportRule", + "CSSStyleSheet", + "Location", +]); + +/** + * Functions for adding information to ObjectActor grips for the purpose of + * having customized output. This object holds arrays mapped by + * Debugger.Object.prototype.class. + * + * In each array you can add functions that take three + * arguments: + * - the ObjectActor instance and its hooks to make a preview for, + * - the grip object being prepared for the client, + * - the raw JS object after calling Debugger.Object.unsafeDereference(). This + * argument is only provided if the object is safe for reading properties and + * executing methods. See DevToolsUtils.isSafeJSObject(). + * - the object class (result of objectActor.obj.class). This is passed so we don't have + * to access it on each previewer, which can add some overhead. + * + * Functions must return false if they cannot provide preview + * information for the debugger object, or true otherwise. + */ +const previewers = { + String: [ + function(objectActor, grip, rawObj) { + return wrappedPrimitivePreviewer( + "String", + String, + objectActor, + grip, + rawObj + ); + }, + ], + + Boolean: [ + function(objectActor, grip, rawObj) { + return wrappedPrimitivePreviewer( + "Boolean", + Boolean, + objectActor, + grip, + rawObj + ); + }, + ], + + Number: [ + function(objectActor, grip, rawObj) { + return wrappedPrimitivePreviewer( + "Number", + Number, + objectActor, + grip, + rawObj + ); + }, + ], + + Symbol: [ + function(objectActor, grip, rawObj) { + return wrappedPrimitivePreviewer( + "Symbol", + Symbol, + objectActor, + grip, + rawObj + ); + }, + ], + + Function: [ + function({ obj, hooks }, grip) { + if (obj.name) { + grip.name = obj.name; + } + + if (obj.displayName) { + grip.displayName = obj.displayName.substr(0, 500); + } + + if (obj.parameterNames) { + grip.parameterNames = obj.parameterNames; + } + + // Check if the developer has added a de-facto standard displayName + // property for us to use. + let userDisplayName; + try { + userDisplayName = obj.getOwnPropertyDescriptor("displayName"); + } catch (e) { + // The above can throw "permission denied" errors when the debuggee + // does not subsume the function's compartment. + } + + if ( + userDisplayName && + typeof userDisplayName.value == "string" && + userDisplayName.value + ) { + grip.userDisplayName = hooks.createValueGrip(userDisplayName.value); + } + + grip.isAsync = obj.isAsyncFunction; + grip.isGenerator = obj.isGeneratorFunction; + + if (obj.script) { + // NOTE: Debugger.Script.prototype.startColumn is 1-based. + // Convert to 0-based, while keeping the wasm's column (1) as is. + // (bug 1863878) + const columnBase = obj.script.format === "wasm" ? 0 : 1; + grip.location = { + url: obj.script.url, + line: obj.script.startLine, + column: obj.script.startColumn - columnBase, + }; + } + + return true; + }, + ], + + RegExp: [ + function({ obj, hooks }, grip) { + const str = DevToolsUtils.callPropertyOnObject(obj, "toString"); + if (typeof str != "string") { + return false; + } + + grip.displayString = hooks.createValueGrip(str); + return true; + }, + ], + + Date: [ + function({ obj, hooks }, grip) { + const time = DevToolsUtils.callPropertyOnObject(obj, "getTime"); + if (typeof time != "number") { + return false; + } + + grip.preview = { + timestamp: hooks.createValueGrip(time), + }; + return true; + }, + ], + + Array: [ + function({ obj, hooks }, grip) { + const length = ObjectUtils.getArrayLength(obj); + + grip.preview = { + kind: "ArrayLike", + length: length, + }; + + if (hooks.getGripDepth() > 1) { + return true; + } + + const raw = obj.unsafeDereference(); + const items = (grip.preview.items = []); + + for (let i = 0; i < length; ++i) { + if (raw && !isWorker) { + // Array Xrays filter out various possibly-unsafe properties (like + // functions, and claim that the value is undefined instead. This + // is generally the right thing for privileged code accessing untrusted + // objects, but quite confusing for Object previews. So we manually + // override this protection by waiving Xrays on the array, and re-applying + // Xrays on any indexed value props that we pull off of it. + const desc = Object.getOwnPropertyDescriptor(Cu.waiveXrays(raw), i); + if (desc && !desc.get && !desc.set) { + let value = Cu.unwaiveXrays(desc.value); + value = ObjectUtils.makeDebuggeeValueIfNeeded(obj, value); + items.push(hooks.createValueGrip(value)); + } else if (!desc) { + items.push(null); + } else { + const item = {}; + if (desc.get) { + let getter = Cu.unwaiveXrays(desc.get); + getter = ObjectUtils.makeDebuggeeValueIfNeeded(obj, getter); + item.get = hooks.createValueGrip(getter); + } + if (desc.set) { + let setter = Cu.unwaiveXrays(desc.set); + setter = ObjectUtils.makeDebuggeeValueIfNeeded(obj, setter); + item.set = hooks.createValueGrip(setter); + } + items.push(item); + } + } else if (raw && !obj.getOwnPropertyDescriptor(i)) { + items.push(null); + } else { + // Workers do not have access to Cu. + const value = DevToolsUtils.getProperty(obj, i); + items.push(hooks.createValueGrip(value)); + } + + if (items.length == OBJECT_PREVIEW_MAX_ITEMS) { + break; + } + } + + return true; + }, + ], + + Set: [ + function(objectActor, grip) { + const size = DevToolsUtils.getProperty(objectActor.obj, "size"); + if (typeof size != "number") { + return false; + } + + grip.preview = { + kind: "ArrayLike", + length: size, + }; + + // Avoid recursive object grips. + if (objectActor.hooks.getGripDepth() > 1) { + return true; + } + + const items = (grip.preview.items = []); + for (const item of PropertyIterators.enumSetEntries(objectActor)) { + items.push(item); + if (items.length == OBJECT_PREVIEW_MAX_ITEMS) { + break; + } + } + + return true; + }, + ], + + WeakSet: [ + function(objectActor, grip) { + const enumEntries = PropertyIterators.enumWeakSetEntries(objectActor); + + grip.preview = { + kind: "ArrayLike", + length: enumEntries.size, + }; + + // Avoid recursive object grips. + if (objectActor.hooks.getGripDepth() > 1) { + return true; + } + + const items = (grip.preview.items = []); + for (const item of enumEntries) { + items.push(item); + if (items.length == OBJECT_PREVIEW_MAX_ITEMS) { + break; + } + } + + return true; + }, + ], + + Map: [ + function(objectActor, grip) { + const size = DevToolsUtils.getProperty(objectActor.obj, "size"); + if (typeof size != "number") { + return false; + } + + grip.preview = { + kind: "MapLike", + size: size, + }; + + if (objectActor.hooks.getGripDepth() > 1) { + return true; + } + + const entries = (grip.preview.entries = []); + for (const entry of PropertyIterators.enumMapEntries(objectActor)) { + entries.push(entry); + if (entries.length == OBJECT_PREVIEW_MAX_ITEMS) { + break; + } + } + + return true; + }, + ], + + WeakMap: [ + function(objectActor, grip) { + const enumEntries = PropertyIterators.enumWeakMapEntries(objectActor); + + grip.preview = { + kind: "MapLike", + size: enumEntries.size, + }; + + if (objectActor.hooks.getGripDepth() > 1) { + return true; + } + + const entries = (grip.preview.entries = []); + for (const entry of enumEntries) { + entries.push(entry); + if (entries.length == OBJECT_PREVIEW_MAX_ITEMS) { + break; + } + } + + return true; + }, + ], + + URLSearchParams: [ + function(objectActor, grip) { + const enumEntries = PropertyIterators.enumURLSearchParamsEntries(objectActor); + + grip.preview = { + kind: "MapLike", + size: enumEntries.size, + }; + + if (objectActor.hooks.getGripDepth() > 1) { + return true; + } + + const entries = (grip.preview.entries = []); + for (const entry of enumEntries) { + entries.push(entry); + if (entries.length == OBJECT_PREVIEW_MAX_ITEMS) { + break; + } + } + + return true; + }, + ], + + FormData: [ + function(objectActor, grip) { + const enumEntries = PropertyIterators.enumFormDataEntries(objectActor); + + grip.preview = { + kind: "MapLike", + size: enumEntries.size, + }; + + if (objectActor.hooks.getGripDepth() > 1) { + return true; + } + + const entries = (grip.preview.entries = []); + for (const entry of enumEntries) { + entries.push(entry); + if (entries.length == OBJECT_PREVIEW_MAX_ITEMS) { + break; + } + } + + return true; + }, + ], + + Headers: [ + function(objectActor, grip) { + // Bug 1863776: Headers can't be yet previewed from workers + if (isWorker) { + return false; + } + const enumEntries = PropertyIterators.enumHeadersEntries(objectActor); + + grip.preview = { + kind: "MapLike", + size: enumEntries.size, + }; + + if (objectActor.hooks.getGripDepth() > 1) { + return true; + } + + const entries = (grip.preview.entries = []); + for (const entry of enumEntries) { + entries.push(entry); + if (entries.length == OBJECT_PREVIEW_MAX_ITEMS) { + break; + } + } + + return true; + }, + ], + + + HighlightRegistry: [ + function(objectActor, grip) { + const enumEntries = PropertyIterators.enumHighlightRegistryEntries(objectActor); + + grip.preview = { + kind: "MapLike", + size: enumEntries.size, + }; + + if (objectActor.hooks.getGripDepth() > 1) { + return true; + } + + const entries = (grip.preview.entries = []); + for (const entry of enumEntries) { + entries.push(entry); + if (entries.length == OBJECT_PREVIEW_MAX_ITEMS) { + break; + } + } + + return true; + }, + ], + + MIDIInputMap: [ + function(objectActor, grip) { + const enumEntries = PropertyIterators.enumMidiInputMapEntries( + objectActor + ); + + grip.preview = { + kind: "MapLike", + size: enumEntries.size, + }; + + if (objectActor.hooks.getGripDepth() > 1) { + return true; + } + + const entries = (grip.preview.entries = []); + for (const entry of enumEntries) { + entries.push(entry); + if (entries.length == OBJECT_PREVIEW_MAX_ITEMS) { + break; + } + } + + return true; + }, + ], + + MIDIOutputMap: [ + function(objectActor, grip) { + const enumEntries = PropertyIterators.enumMidiOutputMapEntries( + objectActor + ); + + grip.preview = { + kind: "MapLike", + size: enumEntries.size, + }; + + if (objectActor.hooks.getGripDepth() > 1) { + return true; + } + + const entries = (grip.preview.entries = []); + for (const entry of enumEntries) { + entries.push(entry); + if (entries.length == OBJECT_PREVIEW_MAX_ITEMS) { + break; + } + } + + return true; + }, + ], + + DOMStringMap: [ + function({ obj, hooks }, grip, rawObj) { + if (!rawObj) { + return false; + } + + const keys = obj.getOwnPropertyNames(); + grip.preview = { + kind: "MapLike", + size: keys.length, + }; + + if (hooks.getGripDepth() > 1) { + return true; + } + + const entries = (grip.preview.entries = []); + for (const key of keys) { + const value = ObjectUtils.makeDebuggeeValueIfNeeded(obj, rawObj[key]); + entries.push([key, hooks.createValueGrip(value)]); + if (entries.length == OBJECT_PREVIEW_MAX_ITEMS) { + break; + } + } + + return true; + }, + ], + + Promise: [ + function({ obj, hooks }, grip, rawObj) { + const { state, value, reason } = ObjectUtils.getPromiseState(obj); + const ownProperties = Object.create(null); + ownProperties["<state>"] = { value: state }; + let ownPropertiesLength = 1; + + // Only expose <value> or <reason> in top-level promises, to avoid recursion. + // <state> is not problematic because it's a string. + if (hooks.getGripDepth() === 1) { + if (state == "fulfilled") { + ownProperties["<value>"] = { value: hooks.createValueGrip(value) }; + ++ownPropertiesLength; + } else if (state == "rejected") { + ownProperties["<reason>"] = { value: hooks.createValueGrip(reason) }; + ++ownPropertiesLength; + } + } + + grip.preview = { + kind: "Object", + ownProperties, + ownPropertiesLength, + }; + + return true; + }, + ], + + Proxy: [ + function({ obj, hooks }, grip, rawObj) { + // Only preview top-level proxies, avoiding recursion. Otherwise, since both the + // target and handler can also be proxies, we could get an exponential behavior. + if (hooks.getGripDepth() > 1) { + return true; + } + + // The `isProxy` getter of the debuggee object only detects proxies without + // security wrappers. If false, the target and handler are not available. + const hasTargetAndHandler = obj.isProxy; + + grip.preview = { + kind: "Object", + ownProperties: Object.create(null), + ownPropertiesLength: 2 * hasTargetAndHandler, + }; + + if (hasTargetAndHandler) { + Object.assign(grip.preview.ownProperties, { + "<target>": { value: hooks.createValueGrip(obj.proxyTarget) }, + "<handler>": { value: hooks.createValueGrip(obj.proxyHandler) }, + }); + } + + return true; + }, + ], +}; + +/** + * Generic previewer for classes wrapping primitives, like String, + * Number and Boolean. + * + * @param string className + * Class name to expect. + * @param object classObj + * The class to expect, eg. String. The valueOf() method of the class is + * invoked on the given object. + * @param ObjectActor objectActor + * The object actor + * @param Object grip + * The result grip to fill in + * @return Booolean true if the object was handled, false otherwise + */ +function wrappedPrimitivePreviewer( + className, + classObj, + objectActor, + grip, + rawObj +) { + let v = null; + try { + v = classObj.prototype.valueOf.call(rawObj); + } catch (ex) { + // valueOf() can throw if the raw JS object is "misbehaved". + return false; + } + + if (v === null) { + return false; + } + + const { obj, hooks } = objectActor; + + const canHandle = GenericObject(objectActor, grip, rawObj, className); + if (!canHandle) { + return false; + } + + grip.preview.wrappedValue = hooks.createValueGrip( + ObjectUtils.makeDebuggeeValueIfNeeded(obj, v) + ); + return true; +} + +/** + * @param {ObjectActor} objectActor + * @param {Object} grip: The grip built by the objectActor, for which we need to populate + * the `preview` property. + * @param {*} rawObj: The native js object + * @param {String} className: objectActor.obj.class + * @returns + */ +function GenericObject(objectActor, grip, rawObj, className) { + const { obj, hooks } = objectActor; + if (grip.preview || grip.displayString || hooks.getGripDepth() > 1) { + return false; + } + + const preview = (grip.preview = { + kind: "Object", + ownProperties: Object.create(null), + }); + + const names = ObjectUtils.getPropNamesFromObject(obj, rawObj); + preview.ownPropertiesLength = names.length; + + let length, + i = 0; + let specialStringBehavior = className === "String"; + if (specialStringBehavior) { + length = DevToolsUtils.getProperty(obj, "length"); + if (typeof length != "number") { + specialStringBehavior = false; + } + } + + for (const name of names) { + if (specialStringBehavior && /^[0-9]+$/.test(name)) { + const num = parseInt(name, 10); + if (num.toString() === name && num >= 0 && num < length) { + continue; + } + } + + const desc = objectActor._propertyDescriptor(name, true); + if (!desc) { + continue; + } + + preview.ownProperties[name] = desc; + if (++i == OBJECT_PREVIEW_MAX_ITEMS) { + break; + } + } + + if (i === OBJECT_PREVIEW_MAX_ITEMS) { + return true; + } + + const privatePropertiesSymbols = ObjectUtils.getSafePrivatePropertiesSymbols( + obj + ); + if (privatePropertiesSymbols.length > 0) { + preview.privatePropertiesLength = privatePropertiesSymbols.length; + preview.privateProperties = []; + + // Retrieve private properties, which are represented as non-enumerable Symbols + for (const privateProperty of privatePropertiesSymbols) { + if ( + !privateProperty.description || + !privateProperty.description.startsWith("#") + ) { + continue; + } + const descriptor = objectActor._propertyDescriptor(privateProperty); + if (!descriptor) { + continue; + } + + preview.privateProperties.push( + Object.assign( + { + descriptor, + }, + hooks.createValueGrip(privateProperty) + ) + ); + + if (++i == OBJECT_PREVIEW_MAX_ITEMS) { + break; + } + } + } + + if (i === OBJECT_PREVIEW_MAX_ITEMS) { + return true; + } + + const symbols = ObjectUtils.getSafeOwnPropertySymbols(obj); + if (symbols.length > 0) { + preview.ownSymbolsLength = symbols.length; + preview.ownSymbols = []; + + for (const symbol of symbols) { + const descriptor = objectActor._propertyDescriptor(symbol, true); + if (!descriptor) { + continue; + } + + preview.ownSymbols.push( + Object.assign( + { + descriptor, + }, + hooks.createValueGrip(symbol) + ) + ); + + if (++i == OBJECT_PREVIEW_MAX_ITEMS) { + break; + } + } + } + + if (i === OBJECT_PREVIEW_MAX_ITEMS) { + return true; + } + + const safeGetterValues = objectActor._findSafeGetterValues( + Object.keys(preview.ownProperties), + OBJECT_PREVIEW_MAX_ITEMS - i + ); + if (Object.keys(safeGetterValues).length) { + preview.safeGetterValues = safeGetterValues; + } + + return true; +} + +// Preview functions that do not rely on the object class. +previewers.Object = [ + function TypedArray({ obj, hooks }, grip) { + if (!ObjectUtils.isTypedArray(obj)) { + return false; + } + + grip.preview = { + kind: "ArrayLike", + length: ObjectUtils.getArrayLength(obj), + }; + + if (hooks.getGripDepth() > 1) { + return true; + } + + const previewLength = Math.min( + OBJECT_PREVIEW_MAX_ITEMS, + grip.preview.length + ); + grip.preview.items = []; + for (let i = 0; i < previewLength; i++) { + const desc = obj.getOwnPropertyDescriptor(i); + if (!desc) { + break; + } + grip.preview.items.push(desc.value); + } + + return true; + }, + + function Error(objectActor, grip, rawObj, className) { + if (!ERROR_CLASSNAMES.has(className)) { + return false; + } + + const { hooks, obj } = objectActor; + + // The name and/or message could be getters, and even if it's unsafe, we do want + // to show it to the user (See Bug 1710694). + const name = DevToolsUtils.getProperty(obj, "name", true); + const msg = DevToolsUtils.getProperty(obj, "message", true); + const stack = DevToolsUtils.getProperty(obj, "stack"); + const fileName = DevToolsUtils.getProperty(obj, "fileName"); + const lineNumber = DevToolsUtils.getProperty(obj, "lineNumber"); + const columnNumber = DevToolsUtils.getProperty(obj, "columnNumber"); + + grip.preview = { + kind: "Error", + name: hooks.createValueGrip(name), + message: hooks.createValueGrip(msg), + stack: hooks.createValueGrip(stack), + fileName: hooks.createValueGrip(fileName), + lineNumber: hooks.createValueGrip(lineNumber), + columnNumber: hooks.createValueGrip(columnNumber), + }; + + const errorHasCause = obj.getOwnPropertyNames().includes("cause"); + if (errorHasCause) { + grip.preview.cause = hooks.createValueGrip( + DevToolsUtils.getProperty(obj, "cause", true) + ); + } + + return true; + }, + + function CSSMediaRule(objectActor, grip, rawObj, className) { + if (!rawObj || className != "CSSMediaRule" || isWorker) { + return false; + } + const { hooks } = objectActor; + grip.preview = { + kind: "ObjectWithText", + text: hooks.createValueGrip(rawObj.conditionText), + }; + return true; + }, + + function CSSStyleRule(objectActor, grip, rawObj, className) { + if (!rawObj || className != "CSSStyleRule" || isWorker) { + return false; + } + const { hooks } = objectActor; + grip.preview = { + kind: "ObjectWithText", + text: hooks.createValueGrip(rawObj.selectorText), + }; + return true; + }, + + function ObjectWithURL(objectActor, grip, rawObj, className) { + if (isWorker || !rawObj) { + return false; + } + + const isWindow = Window.isInstance(rawObj); + if (!OBJECT_WITH_URL_CLASSNAMES.has(className) && !isWindow) { + return false; + } + + const { hooks } = objectActor; + + let url; + if (isWindow && rawObj.location) { + try { + url = rawObj.location.href; + } catch(e) { + // This can happen when we have a cross-process window. + // In such case, let's retrieve the url from the iframe. + // For window.top from a remote iframe, there's no way we can't retrieve the URL, + // so return a label that help user know what's going on. + url = rawObj.browsingContext?.embedderElement?.src || "Restricted"; + } + } else if (rawObj.href) { + url = rawObj.href; + } else { + return false; + } + + grip.preview = { + kind: "ObjectWithURL", + url: hooks.createValueGrip(url), + }; + + return true; + }, + + function ArrayLike(objectActor, grip, rawObj, className) { + if ( + !rawObj || + !ARRAY_LIKE_CLASSNAMES.has(className) || + typeof rawObj.length != "number" || + isWorker + ) { + return false; + } + + const { obj, hooks } = objectActor; + grip.preview = { + kind: "ArrayLike", + length: rawObj.length, + }; + + if (hooks.getGripDepth() > 1) { + return true; + } + + const items = (grip.preview.items = []); + + for ( + let i = 0; + i < rawObj.length && items.length < OBJECT_PREVIEW_MAX_ITEMS; + i++ + ) { + const value = ObjectUtils.makeDebuggeeValueIfNeeded(obj, rawObj[i]); + items.push(hooks.createValueGrip(value)); + } + + return true; + }, + + function CSSStyleDeclaration(objectActor, grip, rawObj, className) { + if ( + !rawObj || + (className != "CSSStyleDeclaration" && className != "CSS2Properties") || + isWorker + ) { + return false; + } + + const { hooks } = objectActor; + grip.preview = { + kind: "MapLike", + size: rawObj.length, + }; + + const entries = (grip.preview.entries = []); + + for (let i = 0; i < OBJECT_PREVIEW_MAX_ITEMS && i < rawObj.length; i++) { + const prop = rawObj[i]; + const value = rawObj.getPropertyValue(prop); + entries.push([prop, hooks.createValueGrip(value)]); + } + + return true; + }, + + function DOMNode(objectActor, grip, rawObj, className) { + if ( + className == "Object" || + !rawObj || + !Node.isInstance(rawObj) || + isWorker + ) { + return false; + } + + const { obj, hooks } = objectActor; + + const preview = (grip.preview = { + kind: "DOMNode", + nodeType: rawObj.nodeType, + nodeName: rawObj.nodeName, + isConnected: rawObj.isConnected === true, + }); + + if (rawObj.nodeType == rawObj.DOCUMENT_NODE && rawObj.location) { + preview.location = hooks.createValueGrip(rawObj.location.href); + } else if (obj.class == "DocumentFragment") { + preview.childNodesLength = rawObj.childNodes.length; + + if (hooks.getGripDepth() < 2) { + preview.childNodes = []; + for (const node of rawObj.childNodes) { + const actor = hooks.createValueGrip(obj.makeDebuggeeValue(node)); + preview.childNodes.push(actor); + if (preview.childNodes.length == OBJECT_PREVIEW_MAX_ITEMS) { + break; + } + } + } + } else if (Element.isInstance(rawObj)) { + // For HTML elements (in an HTML document, at least), the nodeName is an + // uppercased version of the actual element name. Check for HTML + // elements, that is elements in the HTML namespace, and lowercase the + // nodeName in that case. + if (rawObj.namespaceURI == "http://www.w3.org/1999/xhtml") { + preview.nodeName = preview.nodeName.toLowerCase(); + } + + // Add preview for DOM element attributes. + preview.attributes = {}; + preview.attributesLength = rawObj.attributes.length; + for (const attr of rawObj.attributes) { + preview.attributes[attr.nodeName] = hooks.createValueGrip(attr.value); + } + } else if (obj.class == "Attr") { + preview.value = hooks.createValueGrip(rawObj.value); + } else if ( + obj.class == "Text" || + obj.class == "CDATASection" || + obj.class == "Comment" + ) { + preview.textContent = hooks.createValueGrip(rawObj.textContent); + } + + return true; + }, + + function DOMEvent(objectActor, grip, rawObj) { + if (!rawObj || !Event.isInstance(rawObj) || isWorker) { + return false; + } + + const { obj, hooks } = objectActor; + const preview = (grip.preview = { + kind: "DOMEvent", + type: rawObj.type, + properties: Object.create(null), + }); + + if (hooks.getGripDepth() < 2) { + const target = obj.makeDebuggeeValue(rawObj.target); + preview.target = hooks.createValueGrip(target); + } + + if (obj.class == "KeyboardEvent") { + preview.eventKind = "key"; + preview.modifiers = ObjectUtils.getModifiersForEvent(rawObj); + } + + const props = ObjectUtils.getPropsForEvent(obj.class); + + // Add event-specific properties. + for (const prop of props) { + let value = rawObj[prop]; + if (ObjectUtils.isObjectOrFunction(value)) { + // Skip properties pointing to objects. + if (hooks.getGripDepth() > 1) { + continue; + } + value = obj.makeDebuggeeValue(value); + } + preview.properties[prop] = hooks.createValueGrip(value); + } + + // Add any properties we find on the event object. + if (!props.length) { + let i = 0; + for (const prop in rawObj) { + let value = rawObj[prop]; + if ( + prop == "target" || + prop == "type" || + value === null || + typeof value == "function" + ) { + continue; + } + if (value && typeof value == "object") { + if (hooks.getGripDepth() > 1) { + continue; + } + value = obj.makeDebuggeeValue(value); + } + preview.properties[prop] = hooks.createValueGrip(value); + if (++i == OBJECT_PREVIEW_MAX_ITEMS) { + break; + } + } + } + + return true; + }, + + function DOMException(objectActor, grip, rawObj, className) { + if (!rawObj || className !== "DOMException" || isWorker) { + return false; + } + + const { hooks } = objectActor; + grip.preview = { + kind: "DOMException", + name: hooks.createValueGrip(rawObj.name), + message: hooks.createValueGrip(rawObj.message), + code: hooks.createValueGrip(rawObj.code), + result: hooks.createValueGrip(rawObj.result), + filename: hooks.createValueGrip(rawObj.filename), + lineNumber: hooks.createValueGrip(rawObj.lineNumber), + columnNumber: hooks.createValueGrip(rawObj.columnNumber), + stack: hooks.createValueGrip(rawObj.stack), + }; + + return true; + }, + + function Object(objectActor, grip, rawObj, className) { + return GenericObject(objectActor, grip, rawObj, className); + }, +]; + +module.exports = previewers; diff --git a/devtools/server/actors/object/private-properties-iterator.js b/devtools/server/actors/object/private-properties-iterator.js new file mode 100644 index 0000000000..12dc7c98e8 --- /dev/null +++ b/devtools/server/actors/object/private-properties-iterator.js @@ -0,0 +1,70 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const { Actor } = require("resource://devtools/shared/protocol.js"); +const { + privatePropertiesIteratorSpec, +} = require("resource://devtools/shared/specs/private-properties-iterator.js"); + +const DevToolsUtils = require("resource://devtools/shared/DevToolsUtils.js"); + +/** + * Creates an actor to iterate over an object's private properties. + * + * @param objectActor ObjectActor + * The object actor. + */ +class PrivatePropertiesIteratorActor extends Actor { + constructor(objectActor, conn) { + super(conn, privatePropertiesIteratorSpec); + + let privateProperties = []; + if (DevToolsUtils.isSafeDebuggerObject(objectActor.obj)) { + try { + privateProperties = objectActor.obj.getOwnPrivateProperties(); + } catch (err) { + // The above can throw when the debuggee does not subsume the object's + // compartment, or for some WrappedNatives like Cu.Sandbox. + } + } + + this.iterator = { + size: privateProperties.length, + propertyDescription(index) { + // private properties are represented as Symbols on platform + const symbol = privateProperties[index]; + return { + name: symbol.description, + descriptor: objectActor._propertyDescriptor(symbol), + }; + }, + }; + } + + form() { + return { + type: this.typeName, + actor: this.actorID, + count: this.iterator.size, + }; + } + + slice({ start, count }) { + const privateProperties = []; + for (let i = start, m = start + count; i < m; i++) { + privateProperties.push(this.iterator.propertyDescription(i)); + } + return { + privateProperties, + }; + } + + all() { + return this.slice({ start: 0, count: this.iterator.size }); + } + } + +exports.PrivatePropertiesIteratorActor = PrivatePropertiesIteratorActor; diff --git a/devtools/server/actors/object/property-iterator.js b/devtools/server/actors/object/property-iterator.js new file mode 100644 index 0000000000..7bd2c0a704 --- /dev/null +++ b/devtools/server/actors/object/property-iterator.js @@ -0,0 +1,685 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const { Actor } = require("resource://devtools/shared/protocol.js"); +const { + propertyIteratorSpec, +} = require("resource://devtools/shared/specs/property-iterator.js"); + +const DevToolsUtils = require("resource://devtools/shared/DevToolsUtils.js"); +loader.lazyRequireGetter( + this, + "ObjectUtils", + "resource://devtools/server/actors/object/utils.js" +); + +/** + * Creates an actor to iterate over an object's property names and values. + * + * @param objectActor ObjectActor + * The object actor. + * @param options Object + * A dictionary object with various boolean attributes: + * - enumEntries Boolean + * If true, enumerates the entries of a Map or Set object + * instead of enumerating properties. + * - ignoreIndexedProperties Boolean + * If true, filters out Array items. + * e.g. properties names between `0` and `object.length`. + * - ignoreNonIndexedProperties Boolean + * If true, filters out items that aren't array items + * e.g. properties names that are not a number between `0` + * and `object.length`. + * - sort Boolean + * If true, the iterator will sort the properties by name + * before dispatching them. + * - query String + * If non-empty, will filter the properties by names and values + * containing this query string. The match is not case-sensitive. + * Regarding value filtering it just compare to the stringification + * of the property value. + */ +class PropertyIteratorActor extends Actor { + constructor(objectActor, options, conn) { + super(conn, propertyIteratorSpec); + if (!DevToolsUtils.isSafeDebuggerObject(objectActor.obj)) { + this.iterator = { + size: 0, + propertyName: index => undefined, + propertyDescription: index => undefined, + }; + } else if (options.enumEntries) { + const cls = objectActor.obj.class; + if (cls == "Map") { + this.iterator = enumMapEntries(objectActor); + } else if (cls == "WeakMap") { + this.iterator = enumWeakMapEntries(objectActor); + } else if (cls == "Set") { + this.iterator = enumSetEntries(objectActor); + } else if (cls == "WeakSet") { + this.iterator = enumWeakSetEntries(objectActor); + } else if (cls == "Storage") { + this.iterator = enumStorageEntries(objectActor); + } else if (cls == "URLSearchParams") { + this.iterator = enumURLSearchParamsEntries(objectActor); + } else if (cls == "Headers") { + this.iterator = enumHeadersEntries(objectActor); + } else if (cls == "HighlightRegistry") { + this.iterator = enumHighlightRegistryEntries(objectActor); + } else if (cls == "FormData") { + this.iterator = enumFormDataEntries(objectActor); + } else if (cls == "MIDIInputMap") { + this.iterator = enumMidiInputMapEntries(objectActor); + } else if (cls == "MIDIOutputMap") { + this.iterator = enumMidiOutputMapEntries(objectActor); + } else { + throw new Error( + "Unsupported class to enumerate entries from: " + cls + ); + } + } else if ( + ObjectUtils.isArray(objectActor.obj) && + options.ignoreNonIndexedProperties && + !options.query + ) { + this.iterator = enumArrayProperties(objectActor, options); + } else { + this.iterator = enumObjectProperties(objectActor, options); + } + } + + form() { + return { + type: this.typeName, + actor: this.actorID, + count: this.iterator.size, + }; + } + + names({ indexes }) { + const list = []; + for (const idx of indexes) { + list.push(this.iterator.propertyName(idx)); + } + return indexes; + } + + slice({ start, count }) { + const ownProperties = Object.create(null); + for (let i = start, m = start + count; i < m; i++) { + const name = this.iterator.propertyName(i); + ownProperties[name] = this.iterator.propertyDescription(i); + } + + return { + ownProperties, + }; + } + + all() { + return this.slice({ start: 0, count: this.iterator.size }); + } + } + +function waiveXrays(obj) { + return isWorker ? obj : Cu.waiveXrays(obj); +} + +function unwaiveXrays(obj) { + return isWorker ? obj : Cu.unwaiveXrays(obj); +} + +/** + * Helper function to create a grip from a Map/Set entry + */ +function gripFromEntry({ obj, hooks }, entry) { + entry = unwaiveXrays(entry); + return hooks.createValueGrip( + ObjectUtils.makeDebuggeeValueIfNeeded(obj, entry) + ); +} + +function enumArrayProperties(objectActor, options) { + return { + size: ObjectUtils.getArrayLength(objectActor.obj), + propertyName(index) { + return index; + }, + propertyDescription(index) { + return objectActor._propertyDescriptor(index); + }, + }; +} + +function enumObjectProperties(objectActor, options) { + let names = []; + try { + names = objectActor.obj.getOwnPropertyNames(); + } catch (ex) { + // Calling getOwnPropertyNames() on some wrapped native prototypes is not + // allowed: "cannot modify properties of a WrappedNative". See bug 952093. + } + + if (options.ignoreNonIndexedProperties || options.ignoreIndexedProperties) { + const length = DevToolsUtils.getProperty(objectActor.obj, "length"); + let sliceIndex; + + const isLengthTrustworthy = + isUint32(length) && + (!length || ObjectUtils.isArrayIndex(names[length - 1])) && + !ObjectUtils.isArrayIndex(names[length]); + + if (!isLengthTrustworthy) { + // The length property may not reflect what the object looks like, let's find + // where indexed properties end. + + if (!ObjectUtils.isArrayIndex(names[0])) { + // If the first item is not a number, this means there is no indexed properties + // in this object. + sliceIndex = 0; + } else { + sliceIndex = names.length; + while (sliceIndex > 0) { + if (ObjectUtils.isArrayIndex(names[sliceIndex - 1])) { + break; + } + sliceIndex--; + } + } + } else { + sliceIndex = length; + } + + // It appears that getOwnPropertyNames always returns indexed properties + // first, so we can safely slice `names` for/against indexed properties. + // We do such clever operation to optimize very large array inspection. + if (options.ignoreIndexedProperties) { + // Keep items after `sliceIndex` index + names = names.slice(sliceIndex); + } else if (options.ignoreNonIndexedProperties) { + // Keep `sliceIndex` first items + names.length = sliceIndex; + } + } + + const safeGetterValues = objectActor._findSafeGetterValues(names); + const safeGetterNames = Object.keys(safeGetterValues); + // Merge the safe getter values into the existing properties list. + for (const name of safeGetterNames) { + if (!names.includes(name)) { + names.push(name); + } + } + + if (options.query) { + let { query } = options; + query = query.toLowerCase(); + names = names.filter(name => { + // Filter on attribute names + if (name.toLowerCase().includes(query)) { + return true; + } + // and then on attribute values + let desc; + try { + desc = objectActor.obj.getOwnPropertyDescriptor(name); + } catch (e) { + // Calling getOwnPropertyDescriptor on wrapped native prototypes is not + // allowed (bug 560072). + } + if (desc?.value && String(desc.value).includes(query)) { + return true; + } + return false; + }); + } + + if (options.sort) { + names.sort(); + } + + return { + size: names.length, + propertyName(index) { + return names[index]; + }, + propertyDescription(index) { + const name = names[index]; + let desc = objectActor._propertyDescriptor(name); + if (!desc) { + desc = safeGetterValues[name]; + } else if (name in safeGetterValues) { + // Merge the safe getter values into the existing properties list. + const { getterValue, getterPrototypeLevel } = safeGetterValues[name]; + desc.getterValue = getterValue; + desc.getterPrototypeLevel = getterPrototypeLevel; + } + return desc; + }, + }; +} + +function getMapEntries(obj) { + // Iterating over a Map via .entries goes through various intermediate + // objects - an Iterator object, then a 2-element Array object, then the + // actual values we care about. We don't have Xrays to Iterator objects, + // so we get Opaque wrappers for them. And even though we have Xrays to + // Arrays, the semantics often deny access to the entires based on the + // nature of the values. So we need waive Xrays for the iterator object + // and the tupes, and then re-apply them on the underlying values until + // we fix bug 1023984. + // + // Even then though, we might want to continue waiving Xrays here for the + // same reason we do so for Arrays above - this filtering behavior is likely + // to be more confusing than beneficial in the case of Object previews. + const raw = obj.unsafeDereference(); + const iterator = obj.makeDebuggeeValue( + waiveXrays(Map.prototype.keys.call(raw)) + ); + return [...DevToolsUtils.makeDebuggeeIterator(iterator)].map(k => { + const key = waiveXrays(ObjectUtils.unwrapDebuggeeValue(k)); + const value = Map.prototype.get.call(raw, key); + return [key, value]; + }); +} + +function enumMapEntries(objectActor) { + const entries = getMapEntries(objectActor.obj); + + return { + [Symbol.iterator]: function*() { + for (const [key, value] of entries) { + yield [key, value].map(val => gripFromEntry(objectActor, val)); + } + }, + size: entries.length, + propertyName(index) { + return index; + }, + propertyDescription(index) { + const [key, val] = entries[index]; + return { + enumerable: true, + value: { + type: "mapEntry", + preview: { + key: gripFromEntry(objectActor, key), + value: gripFromEntry(objectActor, val), + }, + }, + }; + }, + }; +} + +function enumStorageEntries(objectActor) { + // Iterating over local / sessionStorage entries goes through various + // intermediate objects - an Iterator object, then a 2-element Array object, + // then the actual values we care about. We don't have Xrays to Iterator + // objects, so we get Opaque wrappers for them. + const raw = objectActor.obj.unsafeDereference(); + const keys = []; + for (let i = 0; i < raw.length; i++) { + keys.push(raw.key(i)); + } + return { + [Symbol.iterator]: function*() { + for (const key of keys) { + const value = raw.getItem(key); + yield [key, value].map(val => gripFromEntry(objectActor, val)); + } + }, + size: keys.length, + propertyName(index) { + return index; + }, + propertyDescription(index) { + const key = keys[index]; + const val = raw.getItem(key); + return { + enumerable: true, + value: { + type: "storageEntry", + preview: { + key: gripFromEntry(objectActor, key), + value: gripFromEntry(objectActor, val), + }, + }, + }; + }, + }; +} + +function enumURLSearchParamsEntries(objectActor) { + let obj = objectActor.obj; + let raw = obj.unsafeDereference(); + const entries = [...waiveXrays(URLSearchParams.prototype.entries.call(raw))]; + + return { + [Symbol.iterator]: function*() { + for (const [key, value] of entries) { + yield [key, value]; + } + }, + size: entries.length, + propertyName(index) { + // UrlSearchParams entries can have the same key multiple times (e.g. `?a=1&a=2`), + // so let's return the index as a name to be able to display them properly in the client. + return index; + }, + propertyDescription(index) { + const [key, value] = entries[index]; + + return { + enumerable: true, + value: { + type: "urlSearchParamsEntry", + preview: { + key: gripFromEntry(objectActor, key), + value: gripFromEntry(objectActor, value), + }, + }, + }; + }, + }; +} + +function enumFormDataEntries(objectActor) { + let obj = objectActor.obj; + let raw = obj.unsafeDereference(); + const entries = [...waiveXrays(FormData.prototype.entries.call(raw))]; + + return { + [Symbol.iterator]: function*() { + for (const [key, value] of entries) { + yield [key, value]; + } + }, + size: entries.length, + propertyName(index) { + return index; + }, + propertyDescription(index) { + const [key, value] = entries[index]; + + return { + enumerable: true, + value: { + type: "formDataEntry", + preview: { + key: gripFromEntry(objectActor, key), + value: gripFromEntry(objectActor, value), + }, + }, + }; + }, + }; +} + +function enumHeadersEntries(objectActor) { + let raw = objectActor.obj.unsafeDereference(); + const entries = [...waiveXrays(Headers.prototype.entries.call(raw))]; + + return { + [Symbol.iterator]: function*() { + for (const [key, value] of entries) { + yield [key, value]; + } + }, + size: entries.length, + propertyName(index) { + return entries[index][0]; + }, + propertyDescription(index) { + return { + enumerable: true, + value: gripFromEntry(objectActor, entries[index][1]), + }; + }, + }; +} + +function enumHighlightRegistryEntries(objectActor) { + const entriesFuncDbgObj = objectActor.obj.getProperty("entries").return; + const entriesDbgObj = entriesFuncDbgObj ? entriesFuncDbgObj.call(objectActor.obj).return : null; + const entries = entriesDbgObj + ? [...waiveXrays( entriesDbgObj.unsafeDereference())] + : []; + + return { + [Symbol.iterator]: function*() { + for (const [key, value] of entries) { + yield [key, gripFromEntry(objectActor, value)]; + } + }, + size: entries.length, + propertyName(index) { + return index; + }, + propertyDescription(index) { + const [key, value] = entries[index]; + return { + enumerable: true, + value: { + type: "highlightRegistryEntry", + preview: { + key: key, + value: gripFromEntry(objectActor, value), + }, + }, + }; + }, + }; +} + +function enumMidiInputMapEntries(objectActor) { + let raw = objectActor.obj.unsafeDereference(); + // We need to waive `raw` as we can't get the iterator from the Xray for MapLike (See Bug 1173651). + // We also need to waive Xrays on the result of the call to `entries` as we don't have + // Xrays to Iterator objects (see Bug 1023984) + const entries = Array.from( + waiveXrays(MIDIInputMap.prototype.entries.call(waiveXrays(raw))) + ); + + return { + [Symbol.iterator]: function*() { + for (const [key, value] of entries) { + yield [key, gripFromEntry(objectActor, value)]; + } + }, + size: entries.length, + propertyName(index) { + return entries[index][0]; + }, + propertyDescription(index) { + return { + enumerable: true, + value: gripFromEntry(objectActor, entries[index][1]), + }; + }, + }; +} + +function enumMidiOutputMapEntries(objectActor) { + let raw = objectActor.obj.unsafeDereference(); + // We need to waive `raw` as we can't get the iterator from the Xray for MapLike (See Bug 1173651). + // We also need to waive Xrays on the result of the call to `entries` as we don't have + // Xrays to Iterator objects (see Bug 1023984) + const entries = Array.from( + waiveXrays(MIDIOutputMap.prototype.entries.call(waiveXrays(raw))) + ); + + return { + [Symbol.iterator]: function*() { + for (const [key, value] of entries) { + yield [key, gripFromEntry(objectActor, value)]; + } + }, + size: entries.length, + propertyName(index) { + return entries[index][0]; + }, + propertyDescription(index) { + return { + enumerable: true, + value: gripFromEntry(objectActor, entries[index][1]), + }; + }, + }; +} + +function getWeakMapEntries(obj) { + // We currently lack XrayWrappers for WeakMap, so when we iterate over + // the values, the temporary iterator objects get created in the target + // compartment. However, we _do_ have Xrays to Object now, so we end up + // Xraying those temporary objects, and filtering access to |it.value| + // based on whether or not it's Xrayable and/or callable, which breaks + // the for/of iteration. + // + // This code is designed to handle untrusted objects, so we can safely + // waive Xrays on the iterable, and relying on the Debugger machinery to + // make sure we handle the resulting objects carefully. + const raw = obj.unsafeDereference(); + const keys = waiveXrays(ChromeUtils.nondeterministicGetWeakMapKeys(raw)); + + return keys.map(k => [k, WeakMap.prototype.get.call(raw, k)]); +} + +function enumWeakMapEntries(objectActor) { + const entries = getWeakMapEntries(objectActor.obj); + + return { + [Symbol.iterator]: function*() { + for (let i = 0; i < entries.length; i++) { + yield entries[i].map(val => gripFromEntry(objectActor, val)); + } + }, + size: entries.length, + propertyName(index) { + return index; + }, + propertyDescription(index) { + const [key, val] = entries[index]; + return { + enumerable: true, + value: { + type: "mapEntry", + preview: { + key: gripFromEntry(objectActor, key), + value: gripFromEntry(objectActor, val), + }, + }, + }; + }, + }; +} + +function getSetValues(obj) { + // We currently lack XrayWrappers for Set, so when we iterate over + // the values, the temporary iterator objects get created in the target + // compartment. However, we _do_ have Xrays to Object now, so we end up + // Xraying those temporary objects, and filtering access to |it.value| + // based on whether or not it's Xrayable and/or callable, which breaks + // the for/of iteration. + // + // This code is designed to handle untrusted objects, so we can safely + // waive Xrays on the iterable, and relying on the Debugger machinery to + // make sure we handle the resulting objects carefully. + const raw = obj.unsafeDereference(); + const iterator = obj.makeDebuggeeValue( + waiveXrays(Set.prototype.values.call(raw)) + ); + return [...DevToolsUtils.makeDebuggeeIterator(iterator)]; +} + +function enumSetEntries(objectActor) { + const values = getSetValues(objectActor.obj).map(v => + waiveXrays(ObjectUtils.unwrapDebuggeeValue(v)) + ); + + return { + [Symbol.iterator]: function*() { + for (const item of values) { + yield gripFromEntry(objectActor, item); + } + }, + size: values.length, + propertyName(index) { + return index; + }, + propertyDescription(index) { + const val = values[index]; + return { + enumerable: true, + value: gripFromEntry(objectActor, val), + }; + }, + }; +} + +function getWeakSetEntries(obj) { + // We currently lack XrayWrappers for WeakSet, so when we iterate over + // the values, the temporary iterator objects get created in the target + // compartment. However, we _do_ have Xrays to Object now, so we end up + // Xraying those temporary objects, and filtering access to |it.value| + // based on whether or not it's Xrayable and/or callable, which breaks + // the for/of iteration. + // + // This code is designed to handle untrusted objects, so we can safely + // waive Xrays on the iterable, and relying on the Debugger machinery to + // make sure we handle the resulting objects carefully. + const raw = obj.unsafeDereference(); + return waiveXrays(ChromeUtils.nondeterministicGetWeakSetKeys(raw)); +} + +function enumWeakSetEntries(objectActor) { + const keys = getWeakSetEntries(objectActor.obj); + + return { + [Symbol.iterator]: function*() { + for (const item of keys) { + yield gripFromEntry(objectActor, item); + } + }, + size: keys.length, + propertyName(index) { + return index; + }, + propertyDescription(index) { + const val = keys[index]; + return { + enumerable: true, + value: gripFromEntry(objectActor, val), + }; + }, + }; +} + +/** + * Returns true if the parameter can be stored as a 32-bit unsigned integer. + * If so, it will be suitable for use as the length of an array object. + * + * @param num Number + * The number to test. + * @return Boolean + */ +function isUint32(num) { + return num >>> 0 === num; +} + +module.exports = { + PropertyIteratorActor, + enumMapEntries, + enumMidiInputMapEntries, + enumMidiOutputMapEntries, + enumSetEntries, + enumURLSearchParamsEntries, + enumFormDataEntries, + enumHeadersEntries, + enumHighlightRegistryEntries, + enumWeakMapEntries, + enumWeakSetEntries, +}; diff --git a/devtools/server/actors/object/symbol-iterator.js b/devtools/server/actors/object/symbol-iterator.js new file mode 100644 index 0000000000..e0b05f9cd1 --- /dev/null +++ b/devtools/server/actors/object/symbol-iterator.js @@ -0,0 +1,67 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const { Actor } = require("resource://devtools/shared/protocol.js"); +const { symbolIteratorSpec } = require("resource://devtools/shared/specs/symbol-iterator.js"); + +const DevToolsUtils = require("resource://devtools/shared/DevToolsUtils.js"); + +/** + * Creates an actor to iterate over an object's symbols. + * + * @param objectActor ObjectActor + * The object actor. + */ +class SymbolIteratorActor extends Actor { + constructor(objectActor, conn) { + super(conn, symbolIteratorSpec); + + let symbols = []; + if (DevToolsUtils.isSafeDebuggerObject(objectActor.obj)) { + try { + symbols = objectActor.obj.getOwnPropertySymbols(); + } catch (err) { + // The above can throw when the debuggee does not subsume the object's + // compartment, or for some WrappedNatives like Cu.Sandbox. + } + } + + this.iterator = { + size: symbols.length, + symbolDescription(index) { + const symbol = symbols[index]; + return { + name: symbol.toString(), + descriptor: objectActor._propertyDescriptor(symbol), + }; + }, + }; + } + + form() { + return { + type: this.typeName, + actor: this.actorID, + count: this.iterator.size, + }; + } + + slice({ start, count }) { + const ownSymbols = []; + for (let i = start, m = start + count; i < m; i++) { + ownSymbols.push(this.iterator.symbolDescription(i)); + } + return { + ownSymbols, + }; + } + + all() { + return this.slice({ start: 0, count: this.iterator.size }); + } +} + +exports.SymbolIteratorActor = SymbolIteratorActor; diff --git a/devtools/server/actors/object/symbol.js b/devtools/server/actors/object/symbol.js new file mode 100644 index 0000000000..bd8bb97005 --- /dev/null +++ b/devtools/server/actors/object/symbol.js @@ -0,0 +1,109 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const { Actor } = require("resource://devtools/shared/protocol.js"); +const { symbolSpec } = require("resource://devtools/shared/specs/symbol.js"); +loader.lazyRequireGetter( + this, + "createValueGrip", + "resource://devtools/server/actors/object/utils.js", + true +); + +/** + * Creates an actor for the specified symbol. + * + * @param {DevToolsServerConnection} conn: The connection to the client. + * @param {Symbol} symbol: The symbol we want to create an actor for. + */ +class SymbolActor extends Actor { + constructor(conn, symbol) { + super(conn, symbolSpec); + this.symbol = symbol; + } + + rawValue() { + return this.symbol; + } + + destroy() { + // Because symbolActors is not a weak map, we won't automatically leave + // it so we need to manually leave on destroy so that we don't leak + // memory. + this._releaseActor(); + super.destroy(); + } + + /** + * Returns a grip for this actor for returning in a protocol message. + */ + form() { + const form = { + type: this.typeName, + actor: this.actorID, + }; + const name = getSymbolName(this.symbol); + if (name !== undefined) { + // Create a grip for the name because it might be a longString. + form.name = createValueGrip(name, this.getParent()); + } + return form; + } + + /** + * Handle a request to release this SymbolActor instance. + */ + release() { + // TODO: also check if this.getParent() === threadActor.threadLifetimePool + // when the web console moves away from manually releasing pause-scoped + // actors. + this._releaseActor(); + this.destroy(); + return {}; + } + + _releaseActor() { + const parent = this.getParent(); + if (parent && parent.symbolActors) { + delete parent.symbolActors[this.symbol]; + } + } +} + +const symbolProtoToString = Symbol.prototype.toString; + +function getSymbolName(symbol) { + const name = symbolProtoToString.call(symbol).slice("Symbol(".length, -1); + return name || undefined; +} + +/** + * Create a grip for the given symbol. + * + * @param sym Symbol + * The symbol we are creating a grip for. + * @param pool Pool + * The actor pool where the new actor will be added. + */ +function symbolGrip(sym, pool) { + if (!pool.symbolActors) { + pool.symbolActors = Object.create(null); + } + + if (sym in pool.symbolActors) { + return pool.symbolActors[sym].form(); + } + + const actor = new SymbolActor(pool.conn, sym); + pool.manage(actor); + pool.symbolActors[sym] = actor; + return actor.form(); +} + +module.exports = { + SymbolActor, + symbolGrip, +}; diff --git a/devtools/server/actors/object/utils.js b/devtools/server/actors/object/utils.js new file mode 100644 index 0000000000..d397b4badf --- /dev/null +++ b/devtools/server/actors/object/utils.js @@ -0,0 +1,615 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const { + DevToolsServer, +} = require("resource://devtools/server/devtools-server.js"); +const DevToolsUtils = require("resource://devtools/shared/DevToolsUtils.js"); +const { assert } = DevToolsUtils; + +loader.lazyRequireGetter( + this, + "LongStringActor", + "resource://devtools/server/actors/string.js", + true +); + +loader.lazyRequireGetter( + this, + "symbolGrip", + "resource://devtools/server/actors/object/symbol.js", + true +); + +loader.lazyRequireGetter( + this, + "ObjectActor", + "resource://devtools/server/actors/object.js", + true +); + +loader.lazyRequireGetter( + this, + "EnvironmentActor", + "resource://devtools/server/actors/environment.js", + true +); + +/** + * Get thisDebugger.Object referent's `promiseState`. + * + * @returns Object + * An object of one of the following forms: + * - { state: "pending" } + * - { state: "fulfilled", value } + * - { state: "rejected", reason } + */ +function getPromiseState(obj) { + if (obj.class != "Promise") { + throw new Error( + "Can't call `getPromiseState` on `Debugger.Object`s that don't " + + "refer to Promise objects." + ); + } + + const state = { state: obj.promiseState }; + if (state.state === "fulfilled") { + state.value = obj.promiseValue; + } else if (state.state === "rejected") { + state.reason = obj.promiseReason; + } + return state; +} + +/** + * Returns true if value is an object or function. + * + * @param value + * @returns {boolean} + */ + +function isObjectOrFunction(value) { + // Handle null, whose typeof is object + if (!value) { + return false; + } + + const type = typeof value; + return type == "object" || type == "function"; +} + +/** + * Make a debuggee value for the given object, if needed. Primitive values + * are left the same. + * + * Use case: you have a raw JS object (after unsafe dereference) and you want to + * send it to the client. In that case you need to use an ObjectActor which + * requires a debuggee value. The Debugger.Object.prototype.makeDebuggeeValue() + * method works only for JS objects and functions. + * + * @param Debugger.Object obj + * @param any value + * @return object + */ +function makeDebuggeeValueIfNeeded(obj, value) { + if (isObjectOrFunction(value)) { + return obj.makeDebuggeeValue(value); + } + return value; +} + +/** + * Convert a debuggee value into the underlying raw object, if needed. + */ +function unwrapDebuggeeValue(value) { + if (value && typeof value == "object") { + return value.unsafeDereference(); + } + return value; +} + +/** + * Create a grip for the given debuggee value. If the value is an object or a long string, + * it will create an actor and add it to the pool + * @param {any} value: The debuggee value. + * @param {Pool} pool: The pool where the created actor will be added. + * @param {Function} makeObjectGrip: Function that will be called to create the grip for + * non-primitive values. + */ +function createValueGrip(value, pool, makeObjectGrip) { + switch (typeof value) { + case "boolean": + return value; + + case "string": + return createStringGrip(pool, value); + + case "number": + if (value === Infinity) { + return { type: "Infinity" }; + } else if (value === -Infinity) { + return { type: "-Infinity" }; + } else if (Number.isNaN(value)) { + return { type: "NaN" }; + } else if (!value && 1 / value === -Infinity) { + return { type: "-0" }; + } + return value; + + case "bigint": + return { + type: "BigInt", + text: value.toString(), + }; + + // TODO(bug 1772157) + // Record/tuple grips aren't fully implemented yet. + case "record": + return { + class: "Record", + }; + case "tuple": + return { + class: "Tuple", + }; + case "undefined": + return { type: "undefined" }; + + case "object": + if (value === null) { + return { type: "null" }; + } else if ( + value.optimizedOut || + value.uninitialized || + value.missingArguments + ) { + // The slot is optimized out, an uninitialized binding, or + // arguments on a dead scope + return { + type: "null", + optimizedOut: value.optimizedOut, + uninitialized: value.uninitialized, + missingArguments: value.missingArguments, + }; + } + return makeObjectGrip(value, pool); + + case "symbol": + return symbolGrip(value, pool); + + default: + assert(false, "Failed to provide a grip for: " + value); + return null; + } +} + +/** + * of passing the value directly over the protocol. + * + * @param str String + * The string we are checking the length of. + */ +function stringIsLong(str) { + return str.length >= DevToolsServer.LONG_STRING_LENGTH; +} + +const TYPED_ARRAY_CLASSES = [ + "Uint8Array", + "Uint8ClampedArray", + "Uint16Array", + "Uint32Array", + "Int8Array", + "Int16Array", + "Int32Array", + "Float32Array", + "Float64Array", + "BigInt64Array", + "BigUint64Array", +]; + +/** + * Returns true if a debuggee object is a typed array. + * + * @param obj Debugger.Object + * The debuggee object to test. + * @return Boolean + */ +function isTypedArray(object) { + return TYPED_ARRAY_CLASSES.includes(object.class); +} + +/** + * Returns true if a debuggee object is an array, including a typed array. + * + * @param obj Debugger.Object + * The debuggee object to test. + * @return Boolean + */ +function isArray(object) { + return isTypedArray(object) || object.class === "Array"; +} + +/** + * Returns the length of an array (or typed array). + * + * @param object Debugger.Object + * The debuggee object of the array. + * @return Number + * @throws if the object is not an array. + */ +function getArrayLength(object) { + if (!isArray(object)) { + throw new Error("Expected an array, got a " + object.class); + } + + // Real arrays have a reliable `length` own property. + if (object.class === "Array") { + return DevToolsUtils.getProperty(object, "length"); + } + + // For typed arrays, `DevToolsUtils.getProperty` is not reliable because the `length` + // getter could be shadowed by an own property, and `getOwnPropertyNames` is + // unnecessarily slow. Obtain the `length` getter safely and call it manually. + const typedProto = Object.getPrototypeOf(Uint8Array.prototype); + const getter = Object.getOwnPropertyDescriptor(typedProto, "length").get; + return getter.call(object.unsafeDereference()); +} + +/** + * Returns true if the parameter is suitable to be an array index. + * + * @param str String + * @return Boolean + */ +function isArrayIndex(str) { + // Transform the parameter to a 32-bit unsigned integer. + const num = str >>> 0; + // Check that the parameter is a canonical Uint32 index. + return ( + num + "" === str && + // Array indices cannot attain the maximum Uint32 value. + num != -1 >>> 0 + ); +} + +/** + * Returns true if a debuggee object is a local or sessionStorage object. + * + * @param object Debugger.Object + * The debuggee object to test. + * @return Boolean + */ +function isStorage(object) { + return object.class === "Storage"; +} + +/** + * Returns the length of a local or sessionStorage object. + * + * @param object Debugger.Object + * The debuggee object of the array. + * @return Number + * @throws if the object is not a local or sessionStorage object. + */ +function getStorageLength(object) { + if (!isStorage(object)) { + throw new Error("Expected a storage object, got a " + object.class); + } + return DevToolsUtils.getProperty(object, "length"); +} + +/** + * Returns an array of properties based on event class name. + * + * @param className + * @returns {Array} + */ +function getPropsForEvent(className) { + const positionProps = ["buttons", "clientX", "clientY", "layerX", "layerY"]; + const eventToPropsMap = { + MouseEvent: positionProps, + DragEvent: positionProps, + PointerEvent: positionProps, + SimpleGestureEvent: positionProps, + WheelEvent: positionProps, + KeyboardEvent: ["key", "charCode", "keyCode"], + TransitionEvent: ["propertyName", "pseudoElement"], + AnimationEvent: ["animationName", "pseudoElement"], + ClipboardEvent: ["clipboardData"], + }; + + if (className in eventToPropsMap) { + return eventToPropsMap[className]; + } + + return []; +} + +/** + * Returns an array of of all properties of an object + * + * @param obj + * @param rawObj + * @returns {Array|Iterable} If rawObj is localStorage/sessionStorage, we don't return an + * array but an iterable object (with the proper `length` property) to avoid + * performance issues. + */ +function getPropNamesFromObject(obj, rawObj) { + try { + if (isStorage(obj)) { + // local and session storage cannot be iterated over using + // Object.getOwnPropertyNames() because it skips keys that are duplicated + // on the prototype e.g. "key", "getKeys" so we need to gather the real + // keys using the storage.key() function. + // As the method is pretty slow, we return an iterator here, so we don't consume + // more than we need, especially since we're calling this from previewers in which + // we only need the first 10 entries for the preview (See Bug 1741804). + + // Still return the proper number of entries. + const length = rawObj.length; + const iterable = { length }; + iterable[Symbol.iterator] = function*() { + for (let j = 0; j < length; j++) { + yield rawObj.key(j); + } + }; + return iterable; + } + + return obj.getOwnPropertyNames(); + } catch (ex) { + // Calling getOwnPropertyNames() on some wrapped native prototypes is not + // allowed: "cannot modify properties of a WrappedNative". See bug 952093. + } + + return []; +} + +/** + * Returns an array of private properties of an object + * + * @param obj + * @returns {Array} + */ +function getSafePrivatePropertiesSymbols(obj) { + try { + return obj.getOwnPrivateProperties(); + } catch (ex) { + return []; + } +} + +/** + * Returns an array of all symbol properties of an object + * + * @param obj + * @returns {Array} + */ +function getSafeOwnPropertySymbols(obj) { + try { + return obj.getOwnPropertySymbols(); + } catch (ex) { + return []; + } +} + +/** + * Returns an array modifiers based on keys + * + * @param rawObj + * @returns {Array} + */ +function getModifiersForEvent(rawObj) { + const modifiers = []; + const keysToModifiersMap = { + altKey: "Alt", + ctrlKey: "Control", + metaKey: "Meta", + shiftKey: "Shift", + }; + + for (const key in keysToModifiersMap) { + if (keysToModifiersMap.hasOwnProperty(key) && rawObj[key]) { + modifiers.push(keysToModifiersMap[key]); + } + } + + return modifiers; +} + +/** + * Make a debuggee value for the given value. + * + * @param TargetActor targetActor + * The Target Actor from which this object originates. + * @param mixed value + * The value you want to get a debuggee value for. + * @return object + * Debuggee value for |value|. + */ +function makeDebuggeeValue(targetActor, value) { + // Primitive types are debuggee values and Debugger.Object.makeDebuggeeValue + // would return them unchanged. So avoid the expense of: + // getGlobalForObject+makeGlobalObjectReference+makeDebugeeValue for them. + // + // It is actually easier to identify non primitive which can only be object or function. + if (!isObjectOrFunction(value)) { + return value; + } + + // `value` may come from various globals. + // And Debugger.Object.makeDebuggeeValue only works for objects + // related to the same global. So fetch the global first, + // in order to instantiate a Debugger.Object for it. + // + // In the worker thread, we don't have access to Cu, + // but at the same time, there is only one global, the worker one. + const valueGlobal = isWorker ? targetActor.workerGlobal : Cu.getGlobalForObject(value); + let dbgGlobal; + try { + dbgGlobal = targetActor.dbg.makeGlobalObjectReference( + valueGlobal + ); + } catch(e) { + // makeGlobalObjectReference will throw if the global is invisible to Debugger, + // in this case instantiate a Debugger.Object for the top level global + // of the target. Even if value will come from another global, it will "work", + // but the Debugger.Object created via dbgGlobal.makeDebuggeeValue will throw + // on most methods as the object will also be invisible to Debuggee... + if (e.message.includes("object in compartment marked as invisible to Debugger")) { + dbgGlobal = targetActor.dbg.makeGlobalObjectReference( + targetActor.window + ); + + } else { + throw e; + } + } + + return dbgGlobal.makeDebuggeeValue(value); +} + +/** + * Create a grip for the given string. + * + * @param TargetActor targetActor + * The Target Actor from which this object originates. + */ +function createStringGrip(targetActor, string) { + if (string && stringIsLong(string)) { + const actor = new LongStringActor(targetActor.conn, string); + targetActor.manage(actor); + return actor.form(); + } + return string; +} + +/** + * Create a grip for the given value. + * + * @param TargetActor targetActor + * The Target Actor from which this object originates. + * @param mixed value + * The value you want to get a debuggee value for. + * @param Number depth + * Depth of the object compared to the top level object, + * when we are inspecting nested attributes. + * @param Object [objectActorAttributes] + * An optional object whose properties will be assigned to the ObjectActor if one + * is created. + * @return object + */ +function createValueGripForTarget( + targetActor, + value, + depth = 0, + objectActorAttributes = {} +) { + const makeObjectGrip = (objectActorValue, pool) => + createObjectGrip( + targetActor, + depth, + objectActorValue, + pool, + objectActorAttributes + ); + return createValueGrip(value, targetActor, makeObjectGrip); +} + +/** + * Create and return an environment actor that corresponds to the provided + * Debugger.Environment. This is a straightforward clone of the ThreadActor's + * method except that it stores the environment actor in the web console + * actor's pool. + * + * @param Debugger.Environment environment + * The lexical environment we want to extract. + * @param TargetActor targetActor + * The Target Actor to use as parent actor. + * @return The EnvironmentActor for |environment| or |undefined| for host + * functions or functions scoped to a non-debuggee global. + */ +function createEnvironmentActor(environment, targetActor) { + if (!environment) { + return undefined; + } + + if (environment.actor) { + return environment.actor; + } + + const actor = new EnvironmentActor(environment, targetActor); + targetActor.manage(actor); + environment.actor = actor; + + return actor; +} + +/** + * Create a grip for the given object. + * + * @param TargetActor targetActor + * The Target Actor from which this object originates. + * @param Number depth + * Depth of the object compared to the top level object, + * when we are inspecting nested attributes. + * @param object object + * The object you want. + * @param object pool + * A Pool where the new actor instance is added. + * @param object [objectActorAttributes] + * An optional object whose properties will be assigned to the ObjectActor being created. + * @param object + * The object grip. + */ +function createObjectGrip( + targetActor, + depth, + object, + pool, + objectActorAttributes = {} +) { + let gripDepth = depth; + const actor = new ObjectActor( + object, + { + ...objectActorAttributes, + thread: targetActor.threadActor, + getGripDepth: () => gripDepth, + incrementGripDepth: () => gripDepth++, + decrementGripDepth: () => gripDepth--, + createValueGrip: v => createValueGripForTarget(targetActor, v, gripDepth), + createEnvironmentActor: env => createEnvironmentActor(env, targetActor), + }, + targetActor.conn + ); + pool.manage(actor); + + return actor.form(); +} + +module.exports = { + getPromiseState, + makeDebuggeeValueIfNeeded, + unwrapDebuggeeValue, + createValueGrip, + stringIsLong, + isTypedArray, + isArray, + isStorage, + getArrayLength, + getStorageLength, + isArrayIndex, + getPropsForEvent, + getPropNamesFromObject, + getSafeOwnPropertySymbols, + getSafePrivatePropertiesSymbols, + getModifiersForEvent, + isObjectOrFunction, + createStringGrip, + makeDebuggeeValue, + createValueGripForTarget, +}; diff --git a/devtools/server/actors/objects-manager.js b/devtools/server/actors/objects-manager.js new file mode 100644 index 0000000000..529b33b246 --- /dev/null +++ b/devtools/server/actors/objects-manager.js @@ -0,0 +1,39 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const { Actor } = require("resource://devtools/shared/protocol.js"); +const { + objectsManagerSpec, +} = require("resource://devtools/shared/specs/objects-manager.js"); + +/** + * This actor is a singleton per Target which allows interacting with JS Object + * inspected by DevTools. Typically from the Console or Debugger. + */ +class ObjectsManagerActor extends Actor { + constructor(conn, targetActor) { + super(conn, objectsManagerSpec); + } + + /** + * Release Actors by bulk by specifying their actor IDs. + * (Passing the whole Front [i.e. Actor's form] would be more expensive than passing only their IDs) + * + * @param {Array<string>} actorIDs + * List of all actor's IDs to release. + */ + releaseObjects(actorIDs) { + for (const actorID of actorIDs) { + const actor = this.conn.getActor(actorID); + // Note that release will also typically call Actor's destroy and unregister the actor from its Pool + if (actor) { + actor.release(); + } + } + } +} + +exports.ObjectsManagerActor = ObjectsManagerActor; diff --git a/devtools/server/actors/page-style.js b/devtools/server/actors/page-style.js new file mode 100644 index 0000000000..cfaa35ed46 --- /dev/null +++ b/devtools/server/actors/page-style.js @@ -0,0 +1,1297 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const { Actor } = require("resource://devtools/shared/protocol.js"); +const { + pageStyleSpec, +} = require("resource://devtools/shared/specs/page-style.js"); + +const { getCSSLexer } = require("resource://devtools/shared/css/lexer.js"); +const { + LongStringActor, +} = require("resource://devtools/server/actors/string.js"); +const TrackChangeEmitter = require("resource://devtools/server/actors/utils/track-change-emitter.js"); + +const { + style: { ELEMENT_STYLE }, +} = require("resource://devtools/shared/constants.js"); + +loader.lazyRequireGetter( + this, + "StyleRuleActor", + "resource://devtools/server/actors/style-rule.js", + true +); +loader.lazyRequireGetter( + this, + "getFontPreviewData", + "resource://devtools/server/actors/utils/style-utils.js", + true +); +loader.lazyRequireGetter( + this, + "CssLogic", + "resource://devtools/server/actors/inspector/css-logic.js", + true +); +loader.lazyRequireGetter( + this, + "SharedCssLogic", + "resource://devtools/shared/inspector/css-logic.js" +); +loader.lazyRequireGetter( + this, + "getDefinedGeometryProperties", + "resource://devtools/server/actors/highlighters/geometry-editor.js", + true +); +loader.lazyRequireGetter( + this, + "UPDATE_GENERAL", + "resource://devtools/server/actors/utils/stylesheets-manager.js", + true +); + +loader.lazyGetter(this, "PSEUDO_ELEMENTS", () => { + return InspectorUtils.getCSSPseudoElementNames(); +}); +loader.lazyGetter(this, "FONT_VARIATIONS_ENABLED", () => { + return Services.prefs.getBoolPref("layout.css.font-variations.enabled"); +}); + +const NORMAL_FONT_WEIGHT = 400; +const BOLD_FONT_WEIGHT = 700; + +/** + * The PageStyle actor lets the client look at the styles on a page, as + * they are applied to a given node. + */ +class PageStyleActor extends Actor { + /** + * Create a PageStyleActor. + * + * @param inspector + * The InspectorActor that owns this PageStyleActor. + * + * @constructor + */ + constructor(inspector) { + super(inspector.conn, pageStyleSpec); + this.inspector = inspector; + if (!this.inspector.walker) { + throw Error( + "The inspector's WalkerActor must be created before " + + "creating a PageStyleActor." + ); + } + this.walker = inspector.walker; + this.cssLogic = new CssLogic(); + + // Stores the association of DOM objects -> actors + this.refMap = new Map(); + + // Latest node queried for its applied styles. + this.selectedElement = null; + + // Maps document elements to style elements, used to add new rules. + this.styleElements = new WeakMap(); + + this.onFrameUnload = this.onFrameUnload.bind(this); + + this.inspector.targetActor.on("will-navigate", this.onFrameUnload); + + this._observedRules = []; + this._styleApplied = this._styleApplied.bind(this); + + this.styleSheetsManager = + this.inspector.targetActor.getStyleSheetsManager(); + + this._onStylesheetUpdated = this._onStylesheetUpdated.bind(this); + this.styleSheetsManager.on("stylesheet-updated", this._onStylesheetUpdated); + } + + destroy() { + if (!this.walker) { + return; + } + super.destroy(); + this.inspector.targetActor.off("will-navigate", this.onFrameUnload); + this.inspector = null; + this.walker = null; + this.refMap = null; + this.selectedElement = null; + this.cssLogic = null; + this.styleElements = null; + + this._observedRules = []; + } + + get ownerWindow() { + return this.inspector.targetActor.window; + } + + form() { + // We need to use CSS from the inspected window in order to use CSS.supports() and + // detect the right platform features from there. + const CSS = this.inspector.targetActor.window.CSS; + + return { + actor: this.actorID, + traits: { + // Whether the page supports values of font-stretch from CSS Fonts Level 4. + fontStretchLevel4: CSS.supports("font-stretch: 100%"), + // Whether the page supports values of font-style from CSS Fonts Level 4. + fontStyleLevel4: CSS.supports("font-style: oblique 20deg"), + // Whether getAllUsedFontFaces/getUsedFontFaces accepts the includeVariations + // argument. + fontVariations: FONT_VARIATIONS_ENABLED, + // Whether the page supports values of font-weight from CSS Fonts Level 4. + // font-weight at CSS Fonts Level 4 accepts values in increments of 1 rather + // than 100. However, CSS.supports() returns false positives, so we guard with the + // expected support of font-stretch at CSS Fonts Level 4. + fontWeightLevel4: + CSS.supports("font-weight: 1") && CSS.supports("font-stretch: 100%"), + }, + }; + } + + /** + * Called when a style sheet is updated. + */ + _styleApplied(kind) { + // No matter what kind of update is done, we need to invalidate + // the keyframe cache. + this.cssLogic.reset(); + if (kind === UPDATE_GENERAL) { + this.emit("stylesheet-updated"); + } + } + + /** + * Return or create a StyleRuleActor for the given item. + * @param item Either a CSSStyleRule or a DOM element. + * @param userAdded Optional boolean to distinguish rules added by the user. + */ + _styleRef(item, userAdded = false) { + if (this.refMap.has(item)) { + return this.refMap.get(item); + } + const actor = new StyleRuleActor(this, item, userAdded); + this.manage(actor); + this.refMap.set(item, actor); + + return actor; + } + + /** + * Update the association between a StyleRuleActor and its + * corresponding item. This is used when a StyleRuleActor updates + * as style sheet and starts using a new rule. + * + * @param oldItem The old association; either a CSSStyleRule or a + * DOM element. + * @param item Either a CSSStyleRule or a DOM element. + * @param actor a StyleRuleActor + */ + updateStyleRef(oldItem, item, actor) { + this.refMap.delete(oldItem); + this.refMap.set(item, actor); + } + + /** + * Get the StyleRuleActor matching the given rule id or null if no match is found. + * + * @param {String} ruleId + * Actor ID of the StyleRuleActor + * @return {StyleRuleActor|null} + */ + getRule(ruleId) { + let match = null; + + for (const actor of this.refMap.values()) { + if (actor.actorID === ruleId) { + match = actor; + continue; + } + } + + return match; + } + + /** + * Get the computed style for a node. + * + * @param NodeActor node + * @param object options + * `filter`: A string filter that affects the "matched" handling. + * 'user': Include properties from user style sheets. + * 'ua': Include properties from user and user-agent sheets. + * Default value is 'ua' + * `markMatched`: true if you want the 'matched' property to be added + * when a computed property has been modified by a style included + * by `filter`. + * `onlyMatched`: true if unmatched properties shouldn't be included. + * `filterProperties`: An array of properties names that you would like + * returned. + * + * @returns a JSON blob with the following form: + * { + * "property-name": { + * value: "property-value", + * priority: "!important" <optional> + * matched: <true if there are matched selectors for this value> + * }, + * ... + * } + */ + getComputed(node, options) { + const ret = Object.create(null); + + this.cssLogic.sourceFilter = options.filter || SharedCssLogic.FILTER.UA; + this.cssLogic.highlight(node.rawNode); + const computed = this.cssLogic.computedStyle || []; + + Array.prototype.forEach.call(computed, name => { + if ( + Array.isArray(options.filterProperties) && + !options.filterProperties.includes(name) + ) { + return; + } + ret[name] = { + value: computed.getPropertyValue(name), + priority: computed.getPropertyPriority(name) || undefined, + }; + }); + + if (options.markMatched || options.onlyMatched) { + const matched = this.cssLogic.hasMatchedSelectors(Object.keys(ret)); + for (const key in ret) { + if (matched[key]) { + ret[key].matched = options.markMatched ? true : undefined; + } else if (options.onlyMatched) { + delete ret[key]; + } + } + } + + return ret; + } + + /** + * Get all the fonts from a page. + * + * @param object options + * `includePreviews`: Whether to also return image previews of the fonts. + * `previewText`: The text to display in the previews. + * `previewFontSize`: The font size of the text in the previews. + * + * @returns object + * object with 'fontFaces', a list of fonts that apply to this node. + */ + getAllUsedFontFaces(options) { + const windows = this.inspector.targetActor.windows; + let fontsList = []; + for (const win of windows) { + // Fall back to the documentElement for XUL documents. + const node = win.document.body + ? win.document.body + : win.document.documentElement; + fontsList = [...fontsList, ...this.getUsedFontFaces(node, options)]; + } + + return fontsList; + } + + /** + * Get the font faces used in an element. + * + * @param NodeActor node / actual DOM node + * The node to get fonts from. + * @param object options + * `includePreviews`: Whether to also return image previews of the fonts. + * `previewText`: The text to display in the previews. + * `previewFontSize`: The font size of the text in the previews. + * + * @returns object + * object with 'fontFaces', a list of fonts that apply to this node. + */ + getUsedFontFaces(node, options) { + // node.rawNode is defined for NodeActor objects + const actualNode = node.rawNode || node; + const contentDocument = actualNode.ownerDocument; + // We don't get fonts for a node, but for a range + const rng = contentDocument.createRange(); + const isPseudoElement = Boolean( + CssLogic.getBindingElementAndPseudo(actualNode).pseudo + ); + if (isPseudoElement) { + rng.selectNodeContents(actualNode); + } else { + rng.selectNode(actualNode); + } + const fonts = InspectorUtils.getUsedFontFaces(rng); + const fontsArray = []; + + for (let i = 0; i < fonts.length; i++) { + const font = fonts[i]; + const fontFace = { + name: font.name, + CSSFamilyName: font.CSSFamilyName, + CSSGeneric: font.CSSGeneric || null, + srcIndex: font.srcIndex, + URI: font.URI, + format: font.format, + localName: font.localName, + metadata: font.metadata, + }; + + // If this font comes from a @font-face rule + if (font.rule) { + const styleActor = new StyleRuleActor(this, font.rule); + this.manage(styleActor); + fontFace.rule = styleActor; + fontFace.ruleText = font.rule.cssText; + } + + // Get the weight and style of this font for the preview and sort order + let weight = NORMAL_FONT_WEIGHT, + style = ""; + if (font.rule) { + weight = + font.rule.style.getPropertyValue("font-weight") || NORMAL_FONT_WEIGHT; + if (weight == "bold") { + weight = BOLD_FONT_WEIGHT; + } else if (weight == "normal") { + weight = NORMAL_FONT_WEIGHT; + } + style = font.rule.style.getPropertyValue("font-style") || ""; + } + fontFace.weight = weight; + fontFace.style = style; + + if (options.includePreviews) { + const opts = { + previewText: options.previewText, + previewFontSize: options.previewFontSize, + fontStyle: weight + " " + style, + fillStyle: options.previewFillStyle, + }; + const { dataURL, size } = getFontPreviewData( + font.CSSFamilyName, + contentDocument, + opts + ); + fontFace.preview = { + data: new LongStringActor(this.conn, dataURL), + size, + }; + } + + if (options.includeVariations && FONT_VARIATIONS_ENABLED) { + fontFace.variationAxes = font.getVariationAxes(); + fontFace.variationInstances = font.getVariationInstances(); + } + + fontsArray.push(fontFace); + } + + // @font-face fonts at the top, then alphabetically, then by weight + fontsArray.sort(function (a, b) { + return a.weight > b.weight ? 1 : -1; + }); + fontsArray.sort(function (a, b) { + if (a.CSSFamilyName == b.CSSFamilyName) { + return 0; + } + return a.CSSFamilyName > b.CSSFamilyName ? 1 : -1; + }); + fontsArray.sort(function (a, b) { + if ((a.rule && b.rule) || (!a.rule && !b.rule)) { + return 0; + } + return !a.rule && b.rule ? 1 : -1; + }); + + return fontsArray; + } + + /** + * Get a list of selectors that match a given property for a node. + * + * @param NodeActor node + * @param string property + * @param object options + * `filter`: A string filter that affects the "matched" handling. + * 'user': Include properties from user style sheets. + * 'ua': Include properties from user and user-agent sheets. + * Default value is 'ua' + * + * @returns a JSON object with the following form: + * { + * // An ordered list of rules that apply + * matched: [{ + * rule: <rule actorid>, + * sourceText: <string>, // The source of the selector, relative + * // to the node in question. + * selector: <string>, // the selector ID that matched + * value: <string>, // the value of the property + * status: <int>, + * // The status of the match - high numbers are better placed + * // to provide styling information: + * // 3: Best match, was used. + * // 2: Matched, but was overridden. + * // 1: Rule from a parent matched. + * // 0: Unmatched (never returned in this API) + * }, ...], + * + * // The full form of any domrule referenced. + * rules: [ <domrule>, ... ], // The full form of any domrule referenced + * + * // The full form of any sheets referenced. + * sheets: [ <domsheet>, ... ] + * } + */ + getMatchedSelectors(node, property, options) { + this.cssLogic.sourceFilter = options.filter || SharedCssLogic.FILTER.UA; + this.cssLogic.highlight(node.rawNode); + + const rules = new Set(); + + const matched = []; + const propInfo = this.cssLogic.getPropertyInfo(property); + for (const selectorInfo of propInfo.matchedSelectors) { + const cssRule = selectorInfo.selector.cssRule; + const domRule = cssRule.sourceElement || cssRule.domRule; + + const rule = this._styleRef(domRule); + rules.add(rule); + + matched.push({ + rule, + sourceText: this.getSelectorSource(selectorInfo, node.rawNode), + selector: selectorInfo.selector.text, + name: selectorInfo.property, + value: selectorInfo.value, + status: selectorInfo.status, + }); + } + + return { + matched, + rules: [...rules], + }; + } + + // Get a selector source for a CssSelectorInfo relative to a given + // node. + getSelectorSource(selectorInfo, relativeTo) { + let result = selectorInfo.selector.text; + if (selectorInfo.inlineStyle) { + const source = selectorInfo.sourceElement; + if (source === relativeTo) { + result = "this"; + } else { + result = CssLogic.getShortName(source); + } + result += ".style"; + } + return result; + } + + /** + * Get the set of styles that apply to a given node. + * @param NodeActor node + * @param object options + * `filter`: A string filter that affects the "matched" handling. + * 'user': Include properties from user style sheets. + * 'ua': Include properties from user and user-agent sheets. + * Default value is 'ua' + * `inherited`: Include styles inherited from parent nodes. + * `matchedSelectors`: Include an array of specific selectors that + * caused this rule to match its node. + * `skipPseudo`: Exclude styles applied to pseudo elements of the provided node. + */ + async getApplied(node, options) { + // Clear any previous references to StyleRuleActor instances for CSS rules. + // Assume the consumer has switched context to a new node and no longer + // interested in state changes of previous rules. + this._observedRules = []; + this.selectedElement = node.rawNode; + + if (!node) { + return { entries: [] }; + } + + this.cssLogic.highlight(node.rawNode); + + const entries = this.getAppliedProps( + node, + this._getAllElementRules(node, undefined, options), + options + ); + + const entryRules = new Set(); + entries.forEach(entry => { + entryRules.add(entry.rule); + }); + + await Promise.all(entries.map(entry => entry.rule.getAuthoredCssText())); + + // Reference to instances of StyleRuleActor for CSS rules matching the node. + // Assume these are used by a consumer which wants to be notified when their + // state or declarations change either directly or indirectly. + this._observedRules = entryRules; + + return { entries }; + } + + _hasInheritedProps(style) { + const doc = this.inspector.targetActor.window.document; + return Array.prototype.some.call(style, prop => + InspectorUtils.isInheritedProperty(doc, prop) + ); + } + + async isPositionEditable(node) { + if (!node || node.rawNode.nodeType !== node.rawNode.ELEMENT_NODE) { + return false; + } + + const props = getDefinedGeometryProperties(node.rawNode); + + // Elements with only `width` and `height` are currently not considered + // editable. + return ( + props.has("top") || + props.has("right") || + props.has("left") || + props.has("bottom") + ); + } + + /** + * Helper function for getApplied, gets all the rules from a given + * element. See getApplied for documentation on parameters. + * @param NodeActor node + * @param bool inherited + * @param object options + + * @return Array The rules for a given element. Each item in the + * array has the following signature: + * - rule RuleActor + * - isSystem Boolean + * - inherited Boolean + * - pseudoElement String + */ + _getAllElementRules(node, inherited, options) { + const { bindingElement, pseudo } = CssLogic.getBindingElementAndPseudo( + node.rawNode + ); + const rules = []; + + if (!bindingElement || !bindingElement.style) { + return rules; + } + + const elementStyle = this._styleRef(bindingElement); + const showElementStyles = !inherited && !pseudo; + const showInheritedStyles = + inherited && this._hasInheritedProps(bindingElement.style); + + const rule = { + rule: elementStyle, + pseudoElement: null, + isSystem: false, + inherited: false, + }; + + // First any inline styles + if (showElementStyles) { + rules.push(rule); + } + + // Now any inherited styles + if (showInheritedStyles) { + rule.inherited = inherited; + rules.push(rule); + } + + // Add normal rules. Typically this is passing in the node passed into the + // function, unless if that node was ::before/::after. In which case, + // it will pass in the parentNode along with "::before"/"::after". + this._getElementRules(bindingElement, pseudo, inherited, options).forEach( + oneRule => { + // The only case when there would be a pseudo here is + // ::before/::after, and in this case we want to tell the + // view that it belongs to the element (which is a + // _moz_generated_content native anonymous element). + oneRule.pseudoElement = null; + rules.push(oneRule); + } + ); + + // Now any pseudos. + if (showElementStyles && !options.skipPseudo) { + const relevantPseudoElements = []; + for (const readPseudo of PSEUDO_ELEMENTS) { + if (!this._pseudoIsRelevant(bindingElement, readPseudo)) { + continue; + } + + if (readPseudo === "::highlight") { + InspectorUtils.getRegisteredCssHighlights( + this.inspector.targetActor.window.document, + // only active + true + ).forEach(name => { + relevantPseudoElements.push(`::highlight(${name})`); + }); + } else { + relevantPseudoElements.push(readPseudo); + } + } + + for (const readPseudo of relevantPseudoElements) { + const pseudoRules = this._getElementRules( + bindingElement, + readPseudo, + inherited, + options + ); + rules.push(...pseudoRules); + } + } + + return rules; + } + + _nodeIsTextfieldLike(node) { + if (node.nodeName == "TEXTAREA") { + return true; + } + return ( + node.mozIsTextField && + (node.mozIsTextField(false) || node.type == "number") + ); + } + + _nodeIsButtonLike(node) { + if (node.nodeName == "BUTTON") { + return true; + } + return ( + node.nodeName == "INPUT" && + ["submit", "color", "button"].includes(node.type) + ); + } + + _nodeIsListItem(node) { + const display = CssLogic.getComputedStyle(node).getPropertyValue("display"); + // This is written this way to handle `inline list-item` and such. + return display.split(" ").includes("list-item"); + } + + // eslint-disable-next-line complexity + _pseudoIsRelevant(node, pseudo) { + switch (pseudo) { + case "::after": + case "::before": + case "::first-letter": + case "::first-line": + case "::selection": + case "::highlight": + return true; + case "::marker": + return this._nodeIsListItem(node); + case "::backdrop": + return node.matches(":modal"); + case "::cue": + return node.nodeName == "VIDEO"; + case "::file-selector-button": + return node.nodeName == "INPUT" && node.type == "file"; + case "::placeholder": + case "::-moz-placeholder": + return this._nodeIsTextfieldLike(node); + case "::-moz-focus-inner": + return this._nodeIsButtonLike(node); + case "::-moz-meter-bar": + return node.nodeName == "METER"; + case "::-moz-progress-bar": + return node.nodeName == "PROGRESS"; + case "::-moz-color-swatch": + return node.nodeName == "INPUT" && node.type == "color"; + case "::-moz-range-progress": + case "::-moz-range-thumb": + case "::-moz-range-track": + return node.nodeName == "INPUT" && node.type == "range"; + default: + throw Error("Unhandled pseudo-element " + pseudo); + } + } + + /** + * Helper function for _getAllElementRules, returns the rules from a given + * element. See getApplied for documentation on parameters. + * @param DOMNode node + * @param string pseudo + * @param DOMNode inherited + * @param object options + * + * @returns Array + */ + _getElementRules(node, pseudo, inherited, options) { + const domRules = InspectorUtils.getCSSStyleRules( + node, + pseudo, + CssLogic.hasVisitedState(node) + ); + + if (!domRules) { + return []; + } + + const rules = []; + + const doc = this.inspector.targetActor.window.document; + + // getCSSStyleRules returns ordered from least-specific to + // most-specific. + for (let i = domRules.length - 1; i >= 0; i--) { + const domRule = domRules[i]; + + const isSystem = SharedCssLogic.isAgentStylesheet( + domRule.parentStyleSheet + ); + + if (isSystem && options.filter != SharedCssLogic.FILTER.UA) { + continue; + } + + if (inherited) { + // Don't include inherited rules if none of its properties + // are inheritable. + const hasInherited = [...domRule.style].some(prop => + InspectorUtils.isInheritedProperty(doc, prop) + ); + if (!hasInherited) { + continue; + } + } + + const ruleActor = this._styleRef(domRule); + + rules.push({ + rule: ruleActor, + inherited, + isSystem, + pseudoElement: pseudo, + }); + } + return rules; + } + + /** + * Given a node and a CSS rule, walk up the DOM looking for a + * matching element rule. Return an array of all found entries, in + * the form generated by _getAllElementRules. Note that this will + * always return an array of either zero or one element. + * + * @param {NodeActor} node the node + * @param {CSSStyleRule} filterRule the rule to filter for + * @return {Array} array of zero or one elements; if one, the element + * is the entry as returned by _getAllElementRules. + */ + findEntryMatchingRule(node, filterRule) { + const options = { matchedSelectors: true, inherited: true }; + let entries = []; + let parent = this.walker.parentNode(node); + while (parent && parent.rawNode.nodeType != Node.DOCUMENT_NODE) { + entries = entries.concat( + this._getAllElementRules(parent, parent, options) + ); + parent = this.walker.parentNode(parent); + } + + return entries.filter(entry => entry.rule.rawRule === filterRule); + } + + /** + * Helper function for getApplied that fetches a set of style properties that + * apply to the given node and associated rules + * @param NodeActor node + * @param object options + * `filter`: A string filter that affects the "matched" handling. + * 'user': Include properties from user style sheets. + * 'ua': Include properties from user and user-agent sheets. + * Default value is 'ua' + * `inherited`: Include styles inherited from parent nodes. + * `matchedSelectors`: Include an array of specific (desugared) selectors that + * caused this rule to match its node. + * `skipPseudo`: Exclude styles applied to pseudo elements of the provided node. + * @param array entries + * List of appliedstyle objects that lists the rules that apply to the + * node. If adding a new rule to the stylesheet, only the new rule entry + * is provided and only the style properties that apply to the new + * rule is fetched. + * @returns Array of rule entries that applies to the given node and its associated rules. + */ + getAppliedProps(node, entries, options) { + if (options.inherited) { + let parent = this.walker.parentNode(node); + while (parent && parent.rawNode.nodeType != Node.DOCUMENT_NODE) { + entries = entries.concat( + this._getAllElementRules(parent, parent, options) + ); + parent = this.walker.parentNode(parent); + } + } + + if (options.matchedSelectors) { + for (const entry of entries) { + if (entry.rule.type === ELEMENT_STYLE) { + continue; + } + + const domRule = entry.rule.rawRule; + const desugaredSelectors = entry.rule.getDesugaredSelectors(); + const element = entry.inherited + ? entry.inherited.rawNode + : node.rawNode; + + const { bindingElement, pseudo } = + CssLogic.getBindingElementAndPseudo(element); + const relevantLinkVisited = CssLogic.hasVisitedState(bindingElement); + entry.matchedDesugaredSelectors = []; + + for (let i = 0; i < desugaredSelectors.length; i++) { + if ( + domRule.selectorMatchesElement( + i, + bindingElement, + pseudo, + relevantLinkVisited + ) + ) { + entry.matchedDesugaredSelectors.push(desugaredSelectors[i]); + } + } + } + } + + // Add all the keyframes rule associated with the element + const computedStyle = this.cssLogic.computedStyle; + if (computedStyle) { + let animationNames = computedStyle.animationName.split(","); + animationNames = animationNames.map(name => name.trim()); + + if (animationNames) { + // Traverse through all the available keyframes rule and add + // the keyframes rule that matches the computed animation name + for (const keyframesRule of this.cssLogic.keyframesRules) { + if (animationNames.indexOf(keyframesRule.name) > -1) { + for (const rule of keyframesRule.cssRules) { + entries.push({ + rule: this._styleRef(rule), + keyframes: this._styleRef(keyframesRule), + }); + } + } + } + } + } + + return entries; + } + + /** + * Get layout-related information about a node. + * This method returns an object with properties giving information about + * the node's margin, border, padding and content region sizes, as well + * as information about the type of box, its position, z-index, etc... + * @param {NodeActor} node + * @param {Object} options The only available option is autoMargins. + * If set to true, the element's margins will receive an extra check to see + * whether they are set to "auto" (knowing that the computed-style in this + * case would return "0px"). + * The returned object will contain an extra property (autoMargins) listing + * all margins that are set to auto, e.g. {top: "auto", left: "auto"}. + * @return {Object} + */ + getLayout(node, options) { + this.cssLogic.highlight(node.rawNode); + + const layout = {}; + + // First, we update the first part of the box model view, with + // the size of the element. + + const clientRect = node.rawNode.getBoundingClientRect(); + layout.width = parseFloat(clientRect.width.toPrecision(6)); + layout.height = parseFloat(clientRect.height.toPrecision(6)); + + // We compute and update the values of margins & co. + const style = CssLogic.getComputedStyle(node.rawNode); + for (const prop of [ + "position", + "top", + "right", + "bottom", + "left", + "margin-top", + "margin-right", + "margin-bottom", + "margin-left", + "padding-top", + "padding-right", + "padding-bottom", + "padding-left", + "border-top-width", + "border-right-width", + "border-bottom-width", + "border-left-width", + "z-index", + "box-sizing", + "display", + "float", + "line-height", + ]) { + layout[prop] = style.getPropertyValue(prop); + } + + if (options.autoMargins) { + layout.autoMargins = this.processMargins(this.cssLogic); + } + + for (const i in this.map) { + const property = this.map[i].property; + this.map[i].value = parseFloat(style.getPropertyValue(property)); + } + + return layout; + } + + /** + * Find 'auto' margin properties. + */ + processMargins(cssLogic) { + const margins = {}; + + for (const prop of ["top", "bottom", "left", "right"]) { + const info = cssLogic.getPropertyInfo("margin-" + prop); + const selectors = info.matchedSelectors; + if (selectors && !!selectors.length && selectors[0].value == "auto") { + margins[prop] = "auto"; + } + } + + return margins; + } + + /** + * On page navigation, tidy up remaining objects. + */ + onFrameUnload() { + this.styleElements = new WeakMap(); + } + + _onStylesheetUpdated({ resourceId, updateKind, updates = {} }) { + if (updateKind != "style-applied") { + return; + } + const kind = updates.event.kind; + // Duplicate refMap content before looping as onStyleApplied may mutate it + for (const styleActor of [...this.refMap.values()]) { + // Ignore StyleRuleActor that don't have a parent stylesheet. + // i.e. actor whose type is ELEMENT_STYLE. + if (!styleActor._parentSheet) { + continue; + } + const resId = this.styleSheetsManager.getStyleSheetResourceId( + styleActor._parentSheet + ); + if (resId === resourceId) { + styleActor.onStyleApplied(kind); + } + } + this._styleApplied(kind); + } + + /** + * Helper function for adding a new rule and getting its applied style + * properties + * @param NodeActor node + * @param CSSStyleRule rule + * @returns Array containing its applied style properties + */ + getNewAppliedProps(node, rule) { + const ruleActor = this._styleRef(rule); + return this.getAppliedProps(node, [{ rule: ruleActor }], { + matchedSelectors: true, + }); + } + + /** + * Adds a new rule, and returns the new StyleRuleActor. + * @param {NodeActor} node + * @param {String} pseudoClasses The list of pseudo classes to append to the + * new selector. + * @returns {StyleRuleActor} the new rule + */ + async addNewRule(node, pseudoClasses) { + let sheet = null; + const doc = node.rawNode.ownerDocument; + if ( + this.styleElements.has(doc) && + this.styleElements.get(doc).ownerNode?.isConnected + ) { + sheet = this.styleElements.get(doc); + } else { + sheet = await this.styleSheetsManager.addStyleSheet(doc); + this.styleElements.set(doc, sheet); + } + + const cssRules = sheet.cssRules; + const rawNode = node.rawNode; + const classes = [...rawNode.classList]; + + let selector; + if (rawNode.id) { + selector = "#" + CSS.escape(rawNode.id); + } else if (classes.length) { + selector = "." + classes.map(c => CSS.escape(c)).join("."); + } else { + selector = rawNode.localName; + } + + if (pseudoClasses && pseudoClasses.length) { + selector += pseudoClasses.join(""); + } + + const index = sheet.insertRule(selector + " {}", cssRules.length); + + const resourceId = this.styleSheetsManager.getStyleSheetResourceId(sheet); + let authoredText = await this.styleSheetsManager.getText(resourceId); + authoredText += "\n" + selector + " {\n" + "}"; + await this.styleSheetsManager.setStyleSheetText(resourceId, authoredText); + + const cssRule = sheet.cssRules.item(index); + const ruleActor = this._styleRef(cssRule, true); + + TrackChangeEmitter.trackChange({ + ...ruleActor.metadata, + type: "rule-add", + add: null, + remove: null, + selector, + }); + + return { entries: this.getNewAppliedProps(node, cssRule) }; + } + + /** + * Cause all StyleRuleActor instances of observed CSS rules to check whether the + * states of their declarations have changed. + * + * Observed rules are the latest rules returned by a call to PageStyleActor.getApplied() + * + * This is necessary because changes in one rule can cause the declarations in another + * to not be applicable (inactive CSS). The observers of those rules should be notified. + * Rules will fire a "rule-updated" event if any of their declarations changed state. + * + * Call this method whenever a CSS rule is mutated: + * - a CSS declaration is added/changed/disabled/removed + * - a selector is added/changed/removed + * + * @param {Array<StyleRuleActor>} rulesToForceRefresh: An array of rules that, + * if observed, should be refreshed even if the state of their declaration + * didn't change. + */ + refreshObservedRules(rulesToForceRefresh) { + for (const rule of this._observedRules) { + const force = rulesToForceRefresh && rulesToForceRefresh.includes(rule); + rule.maybeRefresh(force); + } + } + + /** + * Get an array of existing attribute values in a node document. + * + * @param {String} search: A string to filter attribute value on. + * @param {String} attributeType: The type of attribute we want to retrieve the values. + * @param {Element} node: The element we want to get possible attributes for. This will + * be used to get the document where the search is happening. + * @returns {Array<String>} An array of strings + */ + getAttributesInOwnerDocument(search, attributeType, node) { + if (!search) { + throw new Error("search is mandatory"); + } + + // In a non-fission world, a node from an iframe shares the same `rootNode` as a node + // in the top-level document. So here we need to retrieve the document from the node + // in parameter in order to retrieve the right document. + // This may change once we have a dedicated walker for every target in a tab, as we'll + // be able to directly talk to the "right" walker actor. + const targetDocument = node.rawNode.ownerDocument; + + // We store the result in a Set which will contain the attribute value + const result = new Set(); + const lcSearch = search.toLowerCase(); + this._collectAttributesFromDocumentDOM( + result, + lcSearch, + attributeType, + targetDocument, + node.rawNode + ); + this._collectAttributesFromDocumentStyleSheets( + result, + lcSearch, + attributeType, + targetDocument + ); + + return Array.from(result).sort(); + } + + /** + * Collect attribute values from the document DOM tree, matching the passed filter and + * type, to the result Set. + * + * @param {Set<String>} result: A Set to which the results will be added. + * @param {String} search: A string to filter attribute value on. + * @param {String} attributeType: The type of attribute we want to retrieve the values. + * @param {Document} targetDocument: The document the search occurs in. + * @param {Node} currentNode: The current element rawNode + */ + _collectAttributesFromDocumentDOM( + result, + search, + attributeType, + targetDocument, + nodeRawNode + ) { + // In order to retrieve attributes from DOM elements in the document, we're going to + // do a query on the root node using attributes selector, to directly get the elements + // matching the attributes we're looking for. + + // For classes, we need something a bit different as the className we're looking + // for might not be the first in the attribute value, meaning we can't use the + // "attribute starts with X" selector. + const attributeSelectorPositionChar = attributeType === "class" ? "*" : "^"; + const selector = `[${attributeType}${attributeSelectorPositionChar}=${search} i]`; + + const matchingElements = targetDocument.querySelectorAll(selector); + + for (const element of matchingElements) { + if (element === nodeRawNode) { + return; + } + // For class attribute, we need to add the elements of the classList that match + // the filter string. + if (attributeType === "class") { + for (const cls of element.classList) { + if (!result.has(cls) && cls.toLowerCase().startsWith(search)) { + result.add(cls); + } + } + } else { + const { value } = element.attributes[attributeType]; + // For other attributes, we can directly use the attribute value. + result.add(value); + } + } + } + + /** + * Collect attribute values from the document stylesheets, matching the passed filter + * and type, to the result Set. + * + * @param {Set<String>} result: A Set to which the results will be added. + * @param {String} search: A string to filter attribute value on. + * @param {String} attributeType: The type of attribute we want to retrieve the values. + * It only supports "class" and "id" at the moment. + * @param {Document} targetDocument: The document the search occurs in. + */ + _collectAttributesFromDocumentStyleSheets( + result, + search, + attributeType, + targetDocument + ) { + if (attributeType !== "class" && attributeType !== "id") { + return; + } + + // We loop through all the stylesheets and their rules, recursively so we can go through + // nested rules, and then use the lexer to only get the attributes we're looking for. + const traverseRules = ruleList => { + for (const rule of ruleList) { + this._collectAttributesFromRule(result, rule, search, attributeType); + if (rule.cssRules) { + traverseRules(rule.cssRules); + } + } + }; + for (const styleSheet of targetDocument.styleSheets) { + traverseRules(styleSheet.rules); + } + } + + /** + * Collect attribute values from the rule, matching the passed filter and type, to the + * result Set. + * + * @param {Set<String>} result: A Set to which the results will be added. + * @param {Rule} rule: The rule the search occurs in. + * @param {String} search: A string to filter attribute value on. + * @param {String} attributeType: The type of attribute we want to retrieve the values. + * It only supports "class" and "id" at the moment. + */ + _collectAttributesFromRule(result, rule, search, attributeType) { + const shouldRetrieveClasses = attributeType === "class"; + const shouldRetrieveIds = attributeType === "id"; + + const { selectorText } = rule; + // If there's no selectorText, or if the selectorText does not include the + // filter, we can bail out. + if (!selectorText || !selectorText.toLowerCase().includes(search)) { + return; + } + + // Check if we should parse the selectorText (do we need to check for class/id and + // if so, does the selector contains class/id related chars). + const parseForClasses = + shouldRetrieveClasses && + selectorText.toLowerCase().includes(`.${search}`); + const parseForIds = + shouldRetrieveIds && selectorText.toLowerCase().includes(`#${search}`); + + if (!parseForClasses && !parseForIds) { + return; + } + + const lexer = getCSSLexer(selectorText); + let token; + while ((token = lexer.nextToken())) { + if ( + token.tokenType === "symbol" && + ((shouldRetrieveClasses && token.text === ".") || + (shouldRetrieveIds && token.text === "#")) + ) { + token = lexer.nextToken(); + if ( + token.tokenType === "ident" && + token.text.toLowerCase().startsWith(search) + ) { + result.add(token.text); + } + } + } + } +} +exports.PageStyleActor = PageStyleActor; diff --git a/devtools/server/actors/pause-scoped.js b/devtools/server/actors/pause-scoped.js new file mode 100644 index 0000000000..dc1f2700ee --- /dev/null +++ b/devtools/server/actors/pause-scoped.js @@ -0,0 +1,80 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const { ObjectActor } = require("resource://devtools/server/actors/object.js"); + +class PauseScopedObjectActor extends ObjectActor { + /** + * Creates a pause-scoped actor for the specified object. + * @see ObjectActor + */ + constructor(obj, hooks, conn) { + super(obj, hooks, conn); + + this.hooks.promote = hooks.promote; + this.hooks.isThreadLifetimePool = hooks.isThreadLifetimePool; + + const guardWithPaused = [ + "decompile", + "displayString", + "ownPropertyNames", + "parameterNames", + "property", + "prototype", + "prototypeAndProperties", + "scope", + ]; + + for (const methodName of guardWithPaused) { + this[methodName] = this.withPaused(this[methodName]); + } + + /** + * Handle a protocol request to promote a pause-lifetime grip to a + * thread-lifetime grip. + */ + this.threadGrip = this.withPaused(function () { + this.hooks.promote(); + return {}; + }); + } + + isPaused() { + return this.threadActor ? this.threadActor.state === "paused" : true; + } + + withPaused(method) { + return function () { + if (this.isPaused()) { + return method.apply(this, arguments); + } + + return { + error: "wrongState", + message: + this.constructor.name + + " actors can only be accessed while the thread is paused.", + }; + }; + } + + /** + * Handle a protocol request to release a thread-lifetime grip. + */ + destroy() { + if (this.hooks.isThreadLifetimePool()) { + return { + error: "notReleasable", + message: "Only thread-lifetime actors can be released.", + }; + } + + super.destroy(); + return null; + } +} + +exports.PauseScopedObjectActor = PauseScopedObjectActor; diff --git a/devtools/server/actors/perf.js b/devtools/server/actors/perf.js new file mode 100644 index 0000000000..3f561256c9 --- /dev/null +++ b/devtools/server/actors/perf.js @@ -0,0 +1,187 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ +"use strict"; + +const { Actor } = require("resource://devtools/shared/protocol.js"); +const { perfSpec } = require("resource://devtools/shared/specs/perf.js"); + +loader.lazyRequireGetter( + this, + "RecordingUtils", + "resource://devtools/shared/performance-new/recording-utils.js" +); + +// Some platforms are built without the Gecko Profiler. +const IS_SUPPORTED_PLATFORM = "nsIProfiler" in Ci; + +/** + * The PerfActor wraps the Gecko Profiler interface (aka Services.profiler). + */ +exports.PerfActor = class PerfActor extends Actor { + constructor(conn) { + super(conn, perfSpec); + + // Only setup the observers on a supported platform. + if (IS_SUPPORTED_PLATFORM) { + this._observer = { + observe: this._observe.bind(this), + }; + Services.obs.addObserver(this._observer, "profiler-started"); + Services.obs.addObserver(this._observer, "profiler-stopped"); + } + } + + destroy() { + super.destroy(); + + if (!IS_SUPPORTED_PLATFORM) { + return; + } + Services.obs.removeObserver(this._observer, "profiler-started"); + Services.obs.removeObserver(this._observer, "profiler-stopped"); + } + + startProfiler(options) { + if (!IS_SUPPORTED_PLATFORM) { + return false; + } + + // For a quick implementation, decide on some default values. These may need + // to be tweaked or made configurable as needed. + const settings = { + entries: options.entries || 1000000, + duration: options.duration || 0, + interval: options.interval || 1, + features: options.features || [ + "js", + "stackwalk", + "cpu", + "responsiveness", + ], + threads: options.threads || ["GeckoMain", "Compositor"], + activeTabID: RecordingUtils.getActiveBrowserID(), + }; + + try { + // This can throw an error if the profiler is in the wrong state. + Services.profiler.StartProfiler( + settings.entries, + settings.interval, + settings.features, + settings.threads, + settings.activeTabID, + settings.duration + ); + } catch (e) { + // In case any errors get triggered, bailout with a false. + return false; + } + + return true; + } + + stopProfilerAndDiscardProfile() { + if (!IS_SUPPORTED_PLATFORM) { + return; + } + Services.profiler.StopProfiler(); + } + + /** + * @type {string} debugPath + * @type {string} breakpadId + * @returns {Promise<[number[], number[], number[]]>} + */ + async getSymbolTable(debugPath, breakpadId) { + const [addr, index, buffer] = await Services.profiler.getSymbolTable( + debugPath, + breakpadId + ); + // The protocol does not support the transfer of typed arrays, so we convert + // these typed arrays to plain JS arrays of numbers now. + // Our return value type is declared as "array:array:number". + return [Array.from(addr), Array.from(index), Array.from(buffer)]; + } + + async getProfileAndStopProfiler() { + if (!IS_SUPPORTED_PLATFORM) { + return null; + } + + // Pause profiler before we collect the profile, so that we don't capture + // more samples while the parent process or android threads wait for subprocess profiles. + Services.profiler.Pause(); + + let profile; + try { + // Attempt to pull out the data. + profile = await Services.profiler.getProfileDataAsync(); + + if (Object.keys(profile).length === 0) { + console.error( + "An empty object was received from getProfileDataAsync.getProfileDataAsync(), " + + "meaning that a profile could not successfully be serialized and captured." + ); + profile = null; + } + } catch (e) { + // Explicitly set the profile to null if there as an error. + profile = null; + console.error(`There was an error fetching a profile`, e); + } + + // Stop and discard the buffers. + Services.profiler.StopProfiler(); + + // Returns a profile when successful, and null when there is an error. + return profile; + } + + isActive() { + if (!IS_SUPPORTED_PLATFORM) { + return false; + } + return Services.profiler.IsActive(); + } + + isSupportedPlatform() { + return IS_SUPPORTED_PLATFORM; + } + + /** + * Watch for events that happen within the browser. These can affect the + * current availability and state of the Gecko Profiler. + */ + _observe(subject, topic, _data) { + // Note! If emitting new events make sure and update the list of bridged + // events in the perf actor. + switch (topic) { + case "profiler-started": + const param = subject.QueryInterface(Ci.nsIProfilerStartParams); + this.emit( + topic, + param.entries, + param.interval, + param.features, + param.duration, + param.activeTabID + ); + break; + case "profiler-stopped": + this.emit(topic); + break; + } + } + + /** + * Lists the supported features of the profiler for the current browser. + * @returns {string[]} + */ + getSupportedFeatures() { + if (!IS_SUPPORTED_PLATFORM) { + return []; + } + return Services.profiler.GetFeatures(); + } +}; diff --git a/devtools/server/actors/preference.js b/devtools/server/actors/preference.js new file mode 100644 index 0000000000..3435fe9eb1 --- /dev/null +++ b/devtools/server/actors/preference.js @@ -0,0 +1,108 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const { Actor } = require("resource://devtools/shared/protocol.js"); +const { + preferenceSpec, +} = require("resource://devtools/shared/specs/preference.js"); + +const { PREF_STRING, PREF_INT, PREF_BOOL } = Services.prefs; + +function ensurePrefType(name, expectedType) { + const type = Services.prefs.getPrefType(name); + if (type !== expectedType) { + throw new Error(`preference is not of the right type: ${name}`); + } +} + +/** + * Normally the preferences are set using Services.prefs, but this actor allows + * a devtools client to set preferences on the debuggee. This is particularly useful + * when remote debugging, and the preferences should persist to the remote target + * and not to the client. If used for a local target, it effectively behaves the same + * as using Services.prefs. + * + * This actor is used as a global-scoped actor, targeting the entire browser, not an + * individual tab. + */ +class PreferenceActor extends Actor { + constructor(conn) { + super(conn, preferenceSpec); + } + getTraits() { + // The *Pref traits are used to know if remote-debugging bugs related to + // specific preferences are fixed on the server or if the client should set + // default values for them. See the about:debugging module + // runtime-default-preferences.js + return {}; + } + + getBoolPref(name) { + ensurePrefType(name, PREF_BOOL); + return Services.prefs.getBoolPref(name); + } + + getCharPref(name) { + ensurePrefType(name, PREF_STRING); + return Services.prefs.getCharPref(name); + } + + getIntPref(name) { + ensurePrefType(name, PREF_INT); + return Services.prefs.getIntPref(name); + } + + getAllPrefs() { + const prefs = {}; + Services.prefs.getChildList("").forEach(function (name, index) { + // append all key/value pairs into a huge json object. + try { + let value; + switch (Services.prefs.getPrefType(name)) { + case PREF_STRING: + value = Services.prefs.getCharPref(name); + break; + case PREF_INT: + value = Services.prefs.getIntPref(name); + break; + case PREF_BOOL: + value = Services.prefs.getBoolPref(name); + break; + default: + } + prefs[name] = { + value, + hasUserValue: Services.prefs.prefHasUserValue(name), + }; + } catch (e) { + // pref exists but has no user or default value + } + }); + return prefs; + } + + setBoolPref(name, value) { + Services.prefs.setBoolPref(name, value); + Services.prefs.savePrefFile(null); + } + + setCharPref(name, value) { + Services.prefs.setCharPref(name, value); + Services.prefs.savePrefFile(null); + } + + setIntPref(name, value) { + Services.prefs.setIntPref(name, value); + Services.prefs.savePrefFile(null); + } + + clearUserPref(name) { + Services.prefs.clearUserPref(name); + Services.prefs.savePrefFile(null); + } +} + +exports.PreferenceActor = PreferenceActor; diff --git a/devtools/server/actors/process.js b/devtools/server/actors/process.js new file mode 100644 index 0000000000..2ed2da64c0 --- /dev/null +++ b/devtools/server/actors/process.js @@ -0,0 +1,76 @@ +/* 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"; + +loader.lazyGetter(this, "ppmm", () => { + return Cc["@mozilla.org/parentprocessmessagemanager;1"].getService(); +}); + +class ProcessActorList { + constructor() { + this._actors = new Map(); + this._onListChanged = null; + this._mustNotify = false; + this._hasObserver = false; + } + + getList() { + const processes = []; + for (let i = 0; i < ppmm.childCount; i++) { + const mm = ppmm.getChildAt(i); + processes.push({ + // An ID of zero is always used for the parent. It would be nice to fix + // this so that the pid is also used for the parent, see bug 1587443. + id: mm.isInProcess ? 0 : mm.osPid, + parent: mm.isInProcess, + // TODO: exposes process message manager on frameloaders in order to compute this + tabCount: undefined, + }); + } + this._mustNotify = true; + this._checkListening(); + + return processes; + } + + get onListChanged() { + return this._onListChanged; + } + + set onListChanged(onListChanged) { + if (typeof onListChanged !== "function" && onListChanged !== null) { + throw new Error("onListChanged must be either a function or null."); + } + if (onListChanged === this._onListChanged) { + return; + } + + this._onListChanged = onListChanged; + this._checkListening(); + } + + _checkListening() { + if (this._onListChanged !== null && this._mustNotify) { + if (!this._hasObserver) { + Services.obs.addObserver(this, "ipc:content-created"); + Services.obs.addObserver(this, "ipc:content-shutdown"); + this._hasObserver = true; + } + } else if (this._hasObserver) { + Services.obs.removeObserver(this, "ipc:content-created"); + Services.obs.removeObserver(this, "ipc:content-shutdown"); + this._hasObserver = false; + } + } + + observe() { + if (this._mustNotify) { + this._onListChanged(); + this._mustNotify = false; + } + } +} + +exports.ProcessActorList = ProcessActorList; diff --git a/devtools/server/actors/reflow.js b/devtools/server/actors/reflow.js new file mode 100644 index 0000000000..3eda67cc8c --- /dev/null +++ b/devtools/server/actors/reflow.js @@ -0,0 +1,516 @@ +/* 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"; + +/** + * About the types of objects in this file: + * + * - ReflowActor: the actor class used for protocol purposes. + * Mostly empty, just gets an instance of LayoutChangesObserver and forwards + * its "reflows" events to clients. + * + * - LayoutChangesObserver: extends Observable and uses the ReflowObserver, to + * track reflows on the page. + * Used by the LayoutActor, but is also exported on the module, so can be used + * by any other actor that needs it. + * + * - Observable: A utility parent class, meant at being extended by classes that + * need a to observe something on the targetActor's windows. + * + * - Dedicated observers: There's only one of them for now: ReflowObserver which + * listens to reflow events via the docshell, + * These dedicated classes are used by the LayoutChangesObserver. + */ + +const { Actor } = require("resource://devtools/shared/protocol.js"); +const { reflowSpec } = require("resource://devtools/shared/specs/reflow.js"); + +const EventEmitter = require("resource://devtools/shared/event-emitter.js"); + +/** + * The reflow actor tracks reflows and emits events about them. + */ +exports.ReflowActor = class ReflowActor extends Actor { + constructor(conn, targetActor) { + super(conn, reflowSpec); + + this.targetActor = targetActor; + this._onReflow = this._onReflow.bind(this); + this.observer = getLayoutChangesObserver(targetActor); + this._isStarted = false; + } + + destroy() { + this.stop(); + releaseLayoutChangesObserver(this.targetActor); + this.observer = null; + this.targetActor = null; + + super.destroy(); + } + + /** + * Start tracking reflows and sending events to clients about them. + * This is a oneway method, do not expect a response and it won't return a + * promise. + */ + start() { + if (!this._isStarted) { + this.observer.on("reflows", this._onReflow); + this._isStarted = true; + } + } + + /** + * Stop tracking reflows and sending events to clients about them. + * This is a oneway method, do not expect a response and it won't return a + * promise. + */ + stop() { + if (this._isStarted) { + this.observer.off("reflows", this._onReflow); + this._isStarted = false; + } + } + + _onReflow(reflows) { + if (this._isStarted) { + this.emit("reflows", reflows); + } + } +}; + +/** + * Base class for all sorts of observers that need to listen to events on the + * targetActor's windows. + * @param {WindowGlobalTargetActor} targetActor + * @param {Function} callback Executed everytime the observer observes something + */ +class Observable { + constructor(targetActor, callback) { + this.targetActor = targetActor; + this.callback = callback; + + this._onWindowReady = this._onWindowReady.bind(this); + this._onWindowDestroyed = this._onWindowDestroyed.bind(this); + + this.targetActor.on("window-ready", this._onWindowReady); + this.targetActor.on("window-destroyed", this._onWindowDestroyed); + } + + /** + * Is the observer currently observing + */ + isObserving = false; + + /** + * Stop observing and detroy this observer instance + */ + destroy() { + if (this.isDestroyed) { + return; + } + this.isDestroyed = true; + + this.stop(); + + this.targetActor.off("window-ready", this._onWindowReady); + this.targetActor.off("window-destroyed", this._onWindowDestroyed); + + this.callback = null; + this.targetActor = null; + } + + /** + * Start observing whatever it is this observer is supposed to observe + */ + start() { + if (this.isObserving) { + return; + } + this.isObserving = true; + + this._startListeners(this.targetActor.windows); + } + + /** + * Stop observing + */ + stop() { + if (!this.isObserving) { + return; + } + this.isObserving = false; + + if (!this.targetActor.isDestroyed() && this.targetActor.docShell) { + // It's only worth stopping if the targetActor is still active + this._stopListeners(this.targetActor.windows); + } + } + + _onWindowReady({ window }) { + if (this.isObserving) { + this._startListeners([window]); + } + } + + _onWindowDestroyed({ window }) { + if (this.isObserving) { + this._stopListeners([window]); + } + } + + _startListeners(windows) { + // To be implemented by sub-classes. + } + + _stopListeners(windows) { + // To be implemented by sub-classes. + } + + /** + * To be called by sub-classes when something has been observed + */ + notifyCallback(...args) { + this.isObserving && this.callback && this.callback.apply(null, args); + } +} + +/** + * The LayouChangesObserver will observe reflows as soon as it is started. + * Some devtools actors may cause reflows and it may be wanted to "hide" these + * reflows from the LayouChangesObserver consumers. + * If this is the case, such actors should require this module and use this + * global function to turn the ignore mode on and off temporarily. + * + * Note that if a node is provided, it will be used to force a sync reflow to + * make sure all reflows which occurred before switching the mode on or off are + * either observed or ignored depending on the current mode. + * + * @param {Boolean} ignore + * @param {DOMNode} syncReflowNode The node to use to force a sync reflow + */ +var gIgnoreLayoutChanges = false; +exports.setIgnoreLayoutChanges = function (ignore, syncReflowNode) { + if (syncReflowNode) { + let forceSyncReflow = syncReflowNode.offsetWidth; // eslint-disable-line + } + gIgnoreLayoutChanges = ignore; +}; + +class LayoutChangesObserver extends EventEmitter { + /** + * The LayoutChangesObserver class is instantiated only once per given tab + * and is used to track reflows and dom and style changes in that tab. + * The LayoutActor uses this class to send reflow events to its clients. + * + * This class isn't exported on the module because it shouldn't be instantiated + * to avoid creating several instances per tabs. + * Use `getLayoutChangesObserver(targetActor)` + * and `releaseLayoutChangesObserver(targetActor)` + * which are exported to get and release instances. + * + * The observer loops every EVENT_BATCHING_DELAY ms and checks if layout changes + * have happened since the last loop iteration. If there are, it sends the + * corresponding events: + * + * - "reflows", with an array of all the reflows that occured, + * - "resizes", with an array of all the resizes that occured, + * + * @param {WindowGlobalTargetActor} targetActor + */ + constructor(targetActor) { + super(); + + this.targetActor = targetActor; + + this._startEventLoop = this._startEventLoop.bind(this); + this._onReflow = this._onReflow.bind(this); + this._onResize = this._onResize.bind(this); + + // Creating the various observers we're going to need + // For now, just the reflow observer, but later we can add markupMutation, + // styleSheetChanges and styleRuleChanges + this.reflowObserver = new ReflowObserver(this.targetActor, this._onReflow); + this.resizeObserver = new WindowResizeObserver( + this.targetActor, + this._onResize + ); + } + + /** + * How long does this observer waits before emitting batched events. + * The lower the value, the more event packets will be sent to clients, + * potentially impacting performance. + * The higher the value, the more time we'll wait, this is better for + * performance but has an effect on how soon changes are shown in the toolbox. + */ + EVENT_BATCHING_DELAY = 300; + + /** + * Destroying this instance of LayoutChangesObserver will stop the batched + * events from being sent. + */ + destroy() { + this.isObserving = false; + + this.reflowObserver.destroy(); + this.reflows = null; + + this.resizeObserver.destroy(); + this.hasResized = false; + + this.targetActor = null; + } + + start() { + if (this.isObserving) { + return; + } + this.isObserving = true; + + this.reflows = []; + this.hasResized = false; + + this._startEventLoop(); + + this.reflowObserver.start(); + this.resizeObserver.start(); + } + + stop() { + if (!this.isObserving) { + return; + } + this.isObserving = false; + + this._stopEventLoop(); + + this.reflows = []; + this.hasResized = false; + + this.reflowObserver.stop(); + this.resizeObserver.stop(); + } + + /** + * Start the event loop, which regularly checks if there are any observer + * events to be sent as batched events + * Calls itself in a loop. + */ + _startEventLoop() { + // Avoid emitting events if the targetActor has been detached (may happen + // during shutdown) + if (!this.targetActor || this.targetActor.isDestroyed()) { + return; + } + + // Send any reflows we have + if (this.reflows && this.reflows.length) { + this.emit("reflows", this.reflows); + this.reflows = []; + } + + // Send any resizes we have + if (this.hasResized) { + this.emit("resize"); + this.hasResized = false; + } + + this.eventLoopTimer = this._setTimeout( + this._startEventLoop, + this.EVENT_BATCHING_DELAY + ); + } + + _stopEventLoop() { + this._clearTimeout(this.eventLoopTimer); + } + + // Exposing set/clearTimeout here to let tests override them if needed + _setTimeout(cb, ms) { + return setTimeout(cb, ms); + } + _clearTimeout(t) { + return clearTimeout(t); + } + + /** + * Executed whenever a reflow is observed. Only stacks the reflow in the + * reflows array. + * The EVENT_BATCHING_DELAY loop will take care of it later. + * @param {Number} start When the reflow started + * @param {Number} end When the reflow ended + * @param {Boolean} isInterruptible + */ + _onReflow(start, end, isInterruptible) { + if (gIgnoreLayoutChanges) { + return; + } + + // XXX: when/if bug 997092 gets fixed, we will be able to know which + // elements have been reflowed, which would be a nice thing to add here. + this.reflows.push({ + start, + end, + isInterruptible, + }); + } + + /** + * Executed whenever a resize is observed. Only store a flag saying that a + * resize occured. + * The EVENT_BATCHING_DELAY loop will take care of it later. + */ + _onResize() { + if (gIgnoreLayoutChanges) { + return; + } + + this.hasResized = true; + } +} +exports.LayoutChangesObserver = LayoutChangesObserver; + +/** + * Get a LayoutChangesObserver instance for a given window. This function makes + * sure there is only one instance per window. + * @param {WindowGlobalTargetActor} targetActor + * @return {LayoutChangesObserver} + */ +var observedWindows = new Map(); +function getLayoutChangesObserver(targetActor) { + const observerData = observedWindows.get(targetActor); + if (observerData) { + observerData.refCounting++; + return observerData.observer; + } + + const obs = new LayoutChangesObserver(targetActor); + observedWindows.set(targetActor, { + observer: obs, + // counting references allows to stop the observer when no targetActor owns an + // instance. + refCounting: 1, + }); + obs.start(); + return obs; +} +exports.getLayoutChangesObserver = getLayoutChangesObserver; + +/** + * Release a LayoutChangesObserver instance that was retrieved by + * getLayoutChangesObserver. This is required to ensure the targetActor reference + * is removed and the observer is eventually stopped and destroyed. + * @param {WindowGlobalTargetActor} targetActor + */ +function releaseLayoutChangesObserver(targetActor) { + const observerData = observedWindows.get(targetActor); + if (!observerData) { + return; + } + + observerData.refCounting--; + if (!observerData.refCounting) { + observerData.observer.destroy(); + observedWindows.delete(targetActor); + } +} +exports.releaseLayoutChangesObserver = releaseLayoutChangesObserver; + +/** + * Reports any reflow that occurs in the targetActor's docshells. + * @extends Observable + * @param {WindowGlobalTargetActor} targetActor + * @param {Function} callback Executed everytime a reflow occurs + */ +class ReflowObserver extends Observable { + constructor(targetActor, callback) { + super(targetActor, callback); + } + + _startListeners(windows) { + for (const window of windows) { + window.docShell.addWeakReflowObserver(this); + } + } + + _stopListeners(windows) { + for (const window of windows) { + try { + window.docShell.removeWeakReflowObserver(this); + } catch (e) { + // Corner cases where a global has already been freed may happen, in + // which case, no need to remove the observer. + } + } + } + + reflow(start, end) { + this.notifyCallback(start, end, false); + } + + reflowInterruptible(start, end) { + this.notifyCallback(start, end, true); + } +} + +ReflowObserver.prototype.QueryInterface = ChromeUtils.generateQI([ + "nsIReflowObserver", + "nsISupportsWeakReference", +]); + +/** + * Reports window resize events on the targetActor's windows. + * @extends Observable + * @param {WindowGlobalTargetActor} targetActor + * @param {Function} callback Executed everytime a resize occurs + */ +class WindowResizeObserver extends Observable { + constructor(targetActor, callback) { + super(targetActor, callback); + + this.onNavigate = this.onNavigate.bind(this); + this.onResize = this.onResize.bind(this); + + this.targetActor.on("navigate", this.onNavigate); + } + + _startListeners() { + this.listenerTarget.addEventListener("resize", this.onResize); + } + + _stopListeners() { + this.listenerTarget.removeEventListener("resize", this.onResize); + } + + onNavigate() { + if (this.isObserving) { + this._stopListeners(); + this._startListeners(); + } + } + + onResize() { + this.notifyCallback(); + } + + destroy() { + if (this.targetActor) { + this.targetActor.off("navigate", this.onNavigate); + } + super.destroy(); + } + + get listenerTarget() { + // For the rootActor, return its window. + if (this.targetActor.isRootActor) { + return this.targetActor.window; + } + + // Otherwise, get the targetActor's chromeEventHandler. + return this.targetActor.chromeEventHandler; + } +} diff --git a/devtools/server/actors/resources/console-messages.js b/devtools/server/actors/resources/console-messages.js new file mode 100644 index 0000000000..a643546692 --- /dev/null +++ b/devtools/server/actors/resources/console-messages.js @@ -0,0 +1,302 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const { + TYPES: { CONSOLE_MESSAGE }, +} = require("devtools/server/actors/resources/index"); +const Targets = require("devtools/server/actors/targets/index"); + +const consoleAPIListenerModule = isWorker + ? "devtools/server/actors/webconsole/worker-listeners" + : "devtools/server/actors/webconsole/listeners/console-api"; +const { ConsoleAPIListener } = require(consoleAPIListenerModule); + +const { isArray } = require("devtools/server/actors/object/utils"); + +const { + makeDebuggeeValue, + createValueGripForTarget, +} = require("devtools/server/actors/object/utils"); + +const { + getActorIdForInternalSourceId, +} = require("devtools/server/actors/utils/dbg-source"); + +const { + isSupportedByConsoleTable, +} = require("devtools/shared/webconsole/messages"); + +/** + * Start watching for all console messages related to a given Target Actor. + * This will notify about existing console messages, but also the one created in future. + * + * @param TargetActor targetActor + * The target actor from which we should observe console messages + * @param Object options + * Dictionary object with following attributes: + * - onAvailable: mandatory function + * This will be called for each resource. + */ +class ConsoleMessageWatcher { + async watch(targetActor, { onAvailable }) { + this.targetActor = targetActor; + this.onAvailable = onAvailable; + + // Bug 1642297: Maybe we could merge ConsoleAPI Listener into this module? + const onConsoleAPICall = message => { + onAvailable([ + { + resourceType: CONSOLE_MESSAGE, + message: prepareConsoleMessageForRemote(targetActor, message), + }, + ]); + }; + + const isTargetActorContentProcess = + targetActor.targetType === Targets.TYPES.PROCESS; + + // Only consider messages from a given window for all FRAME targets (this includes + // WebExt and ParentProcess which inherits from WindowGlobalTargetActor) + // But ParentProcess should be ignored as we want all messages emitted directly from + // that process (window and window-less). + // To do that we pass a null window and ConsoleAPIListener will catch everything. + // And also ignore WebExtension as we will filter out only by addonId, which is + // passed via consoleAPIListenerOptions. WebExtension may have multiple windows/documents + // but all of them will be flagged with the same addon ID. + const messagesShouldMatchWindow = + targetActor.targetType === Targets.TYPES.FRAME && + targetActor.typeName != "parentProcessTarget" && + targetActor.typeName != "webExtensionTarget"; + const window = messagesShouldMatchWindow ? targetActor.window : null; + + // If we should match messages for a given window but for some reason, targetActor.window + // did not return a window, bail out. Otherwise we wouldn't have anything to match against + // and would consume all the messages, which could lead to issue (e.g. infinite loop, + // see Bug 1828026). + if (messagesShouldMatchWindow && !window) { + return; + } + + const listener = new ConsoleAPIListener(window, onConsoleAPICall, { + excludeMessagesBoundToWindow: isTargetActorContentProcess, + matchExactWindow: targetActor.ignoreSubFrames, + ...(targetActor.consoleAPIListenerOptions || {}), + }); + this.listener = listener; + listener.init(); + + // It can happen that the targetActor does not have a window reference (e.g. in worker + // thread, targetActor exposes a workerGlobal property) + const winStartTime = + targetActor.window?.performance?.timing?.navigationStart || 0; + + const cachedMessages = listener.getCachedMessages(!targetActor.isRootActor); + const messages = []; + // Filter out messages that came from a ServiceWorker but happened + // before the page was requested. + for (const message of cachedMessages) { + if ( + message.innerID === "ServiceWorker" && + winStartTime > message.timeStamp + ) { + continue; + } + messages.push({ + resourceType: CONSOLE_MESSAGE, + message: prepareConsoleMessageForRemote(targetActor, message), + }); + } + onAvailable(messages); + } + + /** + * Stop watching for console messages. + */ + destroy() { + if (this.listener) { + this.listener.destroy(); + this.listener = null; + } + this.targetActor = null; + this.onAvailable = null; + } + + /** + * Spawn some custom console messages. + * This is used for example for log points and JS tracing. + * + * @param Array<Object> messages + * A list of fake nsIConsoleMessage, which looks like the one being generated by + * the platform API. + */ + emitMessages(messages) { + if (!this.listener) { + throw new Error("This target actor isn't listening to console messages"); + } + this.onAvailable( + messages.map(message => { + if (!message.timeStamp) { + throw new Error("timeStamp property is mandatory"); + } + + return { + resourceType: CONSOLE_MESSAGE, + message: prepareConsoleMessageForRemote(this.targetActor, message), + }; + }) + ); + } +} + +module.exports = ConsoleMessageWatcher; + +/** + * Return the properties needed to display the appropriate table for a given + * console.table call. + * This function does a little more than creating an ObjectActor for the first + * parameter of the message. When layout out the console table in the output, we want + * to be able to look into sub-properties so the table can have a different layout ( + * for arrays of arrays, objects with objects properties, arrays of objects, …). + * So here we need to retrieve the properties of the first parameter, and also all the + * sub-properties we might need. + * + * @param {TargetActor} targetActor: The Target Actor from which this object originates. + * @param {Object} result: The console.table message. + * @returns {Object} An object containing the properties of the first argument of the + * console.table call. + */ +function getConsoleTableMessageItems(targetActor, result) { + const [tableItemGrip] = result.arguments; + const dataType = tableItemGrip.class; + const needEntries = ["Map", "WeakMap", "Set", "WeakSet"].includes(dataType); + const ignoreNonIndexedProperties = isArray(tableItemGrip); + + const tableItemActor = targetActor.getActorByID(tableItemGrip.actor); + if (!tableItemActor) { + return null; + } + + // Retrieve the properties (or entries for Set/Map) of the console table first arg. + const iterator = needEntries + ? tableItemActor.enumEntries() + : tableItemActor.enumProperties({ + ignoreNonIndexedProperties, + }); + const { ownProperties } = iterator.all(); + + // The iterator returns a descriptor for each property, wherein the value could be + // in one of those sub-property. + const descriptorKeys = ["safeGetterValues", "getterValue", "value"]; + + Object.values(ownProperties).forEach(desc => { + if (typeof desc !== "undefined") { + descriptorKeys.forEach(key => { + if (desc && desc.hasOwnProperty(key)) { + const grip = desc[key]; + + // We need to load sub-properties as well to render the table in a nice way. + const actor = grip && targetActor.getActorByID(grip.actor); + if (actor) { + const res = actor + .enumProperties({ + ignoreNonIndexedProperties: isArray(grip), + }) + .all(); + if (res?.ownProperties) { + desc[key].ownProperties = res.ownProperties; + } + } + } + }); + } + }); + + return ownProperties; +} + +/** + * Prepare a message from the console API to be sent to the remote Web Console + * instance. + * + * @param TargetActor targetActor + * The related target actor + * @param object message + * The original message received from the console storage listener. + * @return object + * The object that can be sent to the remote client. + */ +function prepareConsoleMessageForRemote(targetActor, message) { + const result = { + arguments: message.arguments + ? message.arguments.map(obj => { + const dbgObj = makeDebuggeeValue(targetActor, obj); + return createValueGripForTarget(targetActor, dbgObj); + }) + : [], + columnNumber: message.columnNumber, + filename: message.filename, + level: message.level, + lineNumber: message.lineNumber, + // messages emitted from Console.sys.mjs don't have a microSecondTimeStamp property + timeStamp: message.microSecondTimeStamp + ? message.microSecondTimeStamp / 1000 + : message.timeStamp || ChromeUtils.dateNow(), + sourceId: getActorIdForInternalSourceId(targetActor, message.sourceId), + innerWindowID: message.innerID, + }; + + // This can be a hot path when loading lots of messages, and it only make sense to + // include the following properties in the message when they have a meaningful value. + // Otherwise we simply don't include them so we save cycles in JSActor communication. + if (message.chromeContext) { + result.chromeContext = message.chromeContext; + } + + if (message.counter) { + result.counter = message.counter; + } + if (message.private) { + result.private = message.private; + } + if (message.prefix) { + result.prefix = message.prefix; + } + + if (message.stacktrace) { + result.stacktrace = message.stacktrace.map(frame => { + return { + ...frame, + sourceId: getActorIdForInternalSourceId(targetActor, frame.sourceId), + }; + }); + } + + if (message.styles && message.styles.length) { + result.styles = message.styles.map(string => { + return createValueGripForTarget(targetActor, string); + }); + } + + if (message.timer) { + result.timer = message.timer; + } + + if (message.level === "table") { + if (result && isSupportedByConsoleTable(result.arguments)) { + const tableItems = getConsoleTableMessageItems(targetActor, result); + if (tableItems) { + result.arguments[0].ownProperties = tableItems; + result.arguments[0].preview = null; + + // Only return the 2 first params. + result.arguments = result.arguments.slice(0, 2); + } + } + // NOTE: See transformConsoleAPICallResource for not-supported case. + } + + return result; +} diff --git a/devtools/server/actors/resources/css-changes.js b/devtools/server/actors/resources/css-changes.js new file mode 100644 index 0000000000..e86503be87 --- /dev/null +++ b/devtools/server/actors/resources/css-changes.js @@ -0,0 +1,42 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const { + TYPES: { CSS_CHANGE }, +} = require("resource://devtools/server/actors/resources/index.js"); +const TrackChangeEmitter = require("resource://devtools/server/actors/utils/track-change-emitter.js"); + +/** + * Start watching for all css changes related to a given Target Actor. + * + * @param TargetActor targetActor + * The target actor from which we should observe css changes. + * @param Object options + * Dictionary object with following attributes: + * - onAvailable: mandatory function + * This will be called for each resource. + */ +class CSSChangeWatcher { + constructor() { + this.onTrackChange = this.onTrackChange.bind(this); + } + + async watch(targetActor, { onAvailable }) { + this.onAvailable = onAvailable; + TrackChangeEmitter.on("track-change", this.onTrackChange); + } + + onTrackChange(change) { + change.resourceType = CSS_CHANGE; + this.onAvailable([change]); + } + + destroy() { + TrackChangeEmitter.off("track-change", this.onTrackChange); + } +} + +module.exports = CSSChangeWatcher; diff --git a/devtools/server/actors/resources/css-messages.js b/devtools/server/actors/resources/css-messages.js new file mode 100644 index 0000000000..0bc6e7ac8a --- /dev/null +++ b/devtools/server/actors/resources/css-messages.js @@ -0,0 +1,202 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const nsIConsoleListenerWatcher = require("resource://devtools/server/actors/resources/utils/nsi-console-listener-watcher.js"); +const { + DevToolsServer, +} = require("resource://devtools/server/devtools-server.js"); +const { + createStringGrip, +} = require("resource://devtools/server/actors/object/utils.js"); +const { + getActorIdForInternalSourceId, +} = require("resource://devtools/server/actors/utils/dbg-source.js"); +const { + WebConsoleUtils, +} = require("resource://devtools/server/actors/webconsole/utils.js"); + +loader.lazyRequireGetter( + this, + ["getStyleSheetText"], + "resource://devtools/server/actors/utils/stylesheet-utils.js", + true +); + +const { + TYPES: { CSS_MESSAGE }, +} = require("resource://devtools/server/actors/resources/index.js"); + +const { MESSAGE_CATEGORY } = require("resource://devtools/shared/constants.js"); + +class CSSMessageWatcher extends nsIConsoleListenerWatcher { + /** + * Start watching for all CSS messages related to a given Target Actor. + * This will notify about existing messages, but also the one created in future. + * + * @param TargetActor targetActor + * The target actor from which we should observe messages + * @param Object options + * Dictionary object with following attributes: + * - onAvailable: mandatory function + * This will be called for each resource. + */ + async watch(targetActor, { onAvailable }) { + super.watch(targetActor, { onAvailable }); + + // Calling ensureCSSErrorReportingEnabled will make the server parse the stylesheets to + // retrieve the warnings if the docShell wasn't already watching for CSS messages. + await this.#ensureCSSErrorReportingEnabled(targetActor); + } + + /** + * Returns true if the message is considered a CSS message, and as a result, should + * be sent to the client. + * + * @param {nsIConsoleMessage|nsIScriptError} message + */ + shouldHandleMessage(targetActor, message) { + // The listener we use can be called either with a nsIConsoleMessage or as nsIScriptError. + // In this file, we want to ignore anything but nsIScriptError. + if ( + // We only care about CSS Parser nsIScriptError + !(message instanceof Ci.nsIScriptError) || + message.category !== MESSAGE_CATEGORY.CSS_PARSER + ) { + return false; + } + + // Filter specific to CONTENT PROCESS targets + // Process targets listen for everything but messages from private windows. + if (this.isProcessTarget(targetActor)) { + return !message.isFromPrivateWindow; + } + + if (!message.innerWindowID) { + return false; + } + + const ids = targetActor.windows.map(window => + WebConsoleUtils.getInnerWindowId(window) + ); + return ids.includes(message.innerWindowID); + } + + /** + * Prepare an nsIScriptError to be sent to the client. + * + * @param nsIScriptError error + * The page error we need to send to the client. + * @return object + * The object you can send to the remote client. + */ + buildResource(targetActor, error) { + const stack = this.prepareStackForRemote(targetActor, error.stack); + let lineText = error.sourceLine; + if ( + lineText && + lineText.length > DevToolsServer.LONG_STRING_INITIAL_LENGTH + ) { + lineText = lineText.substr(0, DevToolsServer.LONG_STRING_INITIAL_LENGTH); + } + + const notesArray = this.prepareNotesForRemote(targetActor, error.notes); + + // If there is no location information in the error but we have a stack, + // fill in the location with the first frame on the stack. + let { sourceName, sourceId, lineNumber, columnNumber } = error; + if (!sourceName && !sourceId && !lineNumber && !columnNumber && stack) { + sourceName = stack[0].filename; + sourceId = stack[0].sourceId; + lineNumber = stack[0].lineNumber; + columnNumber = stack[0].columnNumber; + } + + const pageError = { + errorMessage: createStringGrip(targetActor, error.errorMessage), + sourceName, + sourceId: getActorIdForInternalSourceId(targetActor, sourceId), + lineText, + lineNumber, + columnNumber, + category: error.category, + innerWindowID: error.innerWindowID, + timeStamp: error.microSecondTimeStamp / 1000, + warning: !!(error.flags & error.warningFlag), + error: !(error.flags & (error.warningFlag | error.infoFlag)), + info: !!(error.flags & error.infoFlag), + private: error.isFromPrivateWindow, + stacktrace: stack, + notes: notesArray, + chromeContext: error.isFromChromeContext, + isForwardedFromContentProcess: error.isForwardedFromContentProcess, + }; + + return { + pageError, + resourceType: CSS_MESSAGE, + cssSelectors: error.cssSelectors, + }; + } + + /** + * Ensure that CSS error reporting is enabled for the provided target actor. + * + * @param {TargetActor} targetActor + * The target actor for which CSS Error Reporting should be enabled. + * @return {Promise} Promise that resolves when cssErrorReportingEnabled was + * set in all the docShells owned by the provided target, and existing + * stylesheets have been re-parsed if needed. + */ + async #ensureCSSErrorReportingEnabled(targetActor) { + const docShells = targetActor.docShells; + if (!docShells) { + // If the target actor does not expose a docShells getter (ie is not an + // instance of WindowGlobalTargetActor), nothing to do here. + return; + } + + const promises = docShells.map(async docShell => { + if (docShell.cssErrorReportingEnabled) { + // CSS Error Reporting already enabled here, nothing to do. + return; + } + + try { + docShell.cssErrorReportingEnabled = true; + } catch (e) { + return; + } + + // After enabling CSS Error Reporting, reparse existing stylesheets to + // detect potential CSS errors. + + // Ensure docShell.document is available. + docShell.QueryInterface(Ci.nsIWebNavigation); + // We don't really want to reparse UA sheets and such, but want to do + // Shadow DOM / XBL. + const sheets = InspectorUtils.getAllStyleSheets( + docShell.document, + /* documentOnly = */ true + ); + for (const sheet of sheets) { + if (InspectorUtils.hasRulesModifiedByCSSOM(sheet)) { + continue; + } + + try { + // Reparse the sheet so that we see the existing errors. + const text = await getStyleSheetText(sheet); + InspectorUtils.parseStyleSheet(sheet, text, /* aUpdate = */ false); + } catch (e) { + console.error("Error while parsing stylesheet"); + } + } + }); + + await Promise.all(promises); + } +} +module.exports = CSSMessageWatcher; diff --git a/devtools/server/actors/resources/css-registered-properties.js b/devtools/server/actors/resources/css-registered-properties.js new file mode 100644 index 0000000000..7ac2871a11 --- /dev/null +++ b/devtools/server/actors/resources/css-registered-properties.js @@ -0,0 +1,270 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const { + TYPES: { CSS_REGISTERED_PROPERTIES }, +} = require("resource://devtools/server/actors/resources/index.js"); + +/** + * @typedef InspectorCSSPropertyDefinition (see InspectorUtils.webidl) + * @type {object} + * @property {string} name + * @property {string} syntax + * @property {boolean} inherits + * @property {string} initialValue + * @property {boolean} fromJS - true if property was registered via CSS.registerProperty + */ + +class CSSRegisteredPropertiesWatcher { + #abortController; + #onAvailable; + #onUpdated; + #onDestroyed; + #registeredPropertiesCache = new Map(); + #styleSheetsManager; + #targetActor; + + /** + * Start watching for all registered CSS properties (@property/CSS.registerProperty) + * related to a given Target Actor. + * + * @param TargetActor targetActor + * The target actor from which we should observe css changes. + * @param Object options + * Dictionary object with following attributes: + * - onAvailable: mandatory function + * - onUpdated: mandatory function + * - onDestroyed: mandatory function + * This will be called for each resource. + */ + async watch(targetActor, { onAvailable, onUpdated, onDestroyed }) { + this.#targetActor = targetActor; + this.#onAvailable = onAvailable; + this.#onUpdated = onUpdated; + this.#onDestroyed = onDestroyed; + + // Notify about existing properties + const registeredProperties = this.#getRegisteredProperties(); + for (const registeredProperty of registeredProperties) { + this.#registeredPropertiesCache.set( + registeredProperty.name, + registeredProperty + ); + } + + this.#notifyResourcesAvailable(registeredProperties); + + // Listen for new properties being registered via CSS.registerProperty + this.#abortController = new AbortController(); + const { signal } = this.#abortController; + this.#targetActor.chromeEventHandler.addEventListener( + "csscustompropertyregistered", + this.#onCssCustomPropertyRegistered, + { capture: true, signal } + ); + + // Watch for stylesheets being added/modified or destroyed, but don't handle existing + // stylesheets, as we already have the existing properties from this.#getRegisteredProperties. + this.#styleSheetsManager = targetActor.getStyleSheetsManager(); + await this.#styleSheetsManager.watch({ + onAvailable: this.#refreshCacheAndNotify, + onUpdated: this.#refreshCacheAndNotify, + onDestroyed: this.#refreshCacheAndNotify, + ignoreExisting: true, + }); + } + + /** + * Get all the registered properties for the target actor document. + * + * @returns Array<InspectorCSSPropertyDefinition> + */ + #getRegisteredProperties() { + return InspectorUtils.getCSSRegisteredProperties( + this.#targetActor.window.document + ); + } + + /** + * Compute a resourceId from a given property definition + * + * @param {InspectorCSSPropertyDefinition} propertyDefinition + * @returns string + */ + #getRegisteredPropertyResourceId(propertyDefinition) { + return `${this.#targetActor.actorID}:css-registered-property:${ + propertyDefinition.name + }`; + } + + /** + * Called when a stylesheet is added, removed or modified. + * This will retrieve the registered properties at this very moment, and notify + * about new, updated and removed registered properties. + */ + #refreshCacheAndNotify = async () => { + const registeredProperties = this.#getRegisteredProperties(); + const existingPropertiesNames = new Set( + this.#registeredPropertiesCache.keys() + ); + + const added = []; + const updated = []; + const removed = []; + + for (const registeredProperty of registeredProperties) { + // If the property isn't in the cache already, this is a new one. + if (!this.#registeredPropertiesCache.has(registeredProperty.name)) { + added.push(registeredProperty); + this.#registeredPropertiesCache.set( + registeredProperty.name, + registeredProperty + ); + continue; + } + + // Removing existing property from the Set so we can then later get the properties + // that don't exist anymore. + existingPropertiesNames.delete(registeredProperty.name); + + // The property already existed, so we need to check if its definition was modified + const cachedRegisteredProperty = this.#registeredPropertiesCache.get( + registeredProperty.name + ); + + const resourceUpdates = {}; + let wasUpdated = false; + if (registeredProperty.syntax !== cachedRegisteredProperty.syntax) { + resourceUpdates.syntax = registeredProperty.syntax; + wasUpdated = true; + } + if (registeredProperty.inherits !== cachedRegisteredProperty.inherits) { + resourceUpdates.inherits = registeredProperty.inherits; + wasUpdated = true; + } + if ( + registeredProperty.initialValue !== + cachedRegisteredProperty.initialValue + ) { + resourceUpdates.initialValue = registeredProperty.initialValue; + wasUpdated = true; + } + + if (wasUpdated === true) { + updated.push({ + registeredProperty, + resourceUpdates, + }); + this.#registeredPropertiesCache.set( + registeredProperty.name, + registeredProperty + ); + } + } + + // If there are items left in the Set, it means they weren't processed in the for loop + // before, meaning they don't exist anymore. + for (const registeredPropertyName of existingPropertiesNames) { + removed.push(this.#registeredPropertiesCache.get(registeredPropertyName)); + this.#registeredPropertiesCache.delete(registeredPropertyName); + } + + this.#notifyResourcesAvailable(added); + this.#notifyResourcesUpdated(updated); + this.#notifyResourcesDestroyed(removed); + }; + + /** + * csscustompropertyregistered event listener callback (fired when a property + * is registered via CSS.registerProperty). + * + * @param {CSSCustomPropertyRegisteredEvent} event + */ + #onCssCustomPropertyRegistered = event => { + // Ignore event if property was registered from a global different from the target global. + if ( + this.#targetActor.ignoreSubFrames && + event.target.ownerGlobal !== this.#targetActor.window + ) { + return; + } + + const registeredProperty = event.propertyDefinition; + this.#registeredPropertiesCache.set( + registeredProperty.name, + registeredProperty + ); + this.#notifyResourcesAvailable([registeredProperty]); + }; + + /** + * @param {Array<InspectorCSSPropertyDefinition>} registeredProperties + */ + #notifyResourcesAvailable = registeredProperties => { + if (!registeredProperties.length) { + return; + } + + for (const registeredProperty of registeredProperties) { + registeredProperty.resourceId = + this.#getRegisteredPropertyResourceId(registeredProperty); + registeredProperty.resourceType = CSS_REGISTERED_PROPERTIES; + } + this.#onAvailable(registeredProperties); + }; + + /** + * @param {Array<Object>} updates: Array of update object, which have the following properties: + * - {InspectorCSSPropertyDefinition} registeredProperty: The property definition + * of the updated property + * - {Object} resourceUpdates: An object containing all the fields that are + * modified for the registered property. + */ + #notifyResourcesUpdated = updates => { + if (!updates.length) { + return; + } + + for (const update of updates) { + update.resourceId = this.#getRegisteredPropertyResourceId( + update.registeredProperty + ); + update.resourceType = CSS_REGISTERED_PROPERTIES; + // We don't need to send the property definition + delete update.registeredProperty; + } + + this.#onUpdated(updates); + }; + + /** + * @param {Array<InspectorCSSPropertyDefinition>} registeredProperties + */ + #notifyResourcesDestroyed = registeredProperties => { + if (!registeredProperties.length) { + return; + } + + this.#onDestroyed( + registeredProperties.map(registeredProperty => ({ + resourceType: CSS_REGISTERED_PROPERTIES, + resourceId: this.#getRegisteredPropertyResourceId(registeredProperty), + })) + ); + }; + + destroy() { + this.#styleSheetsManager.unwatch({ + onAvailable: this.#refreshCacheAndNotify, + onUpdated: this.#refreshCacheAndNotify, + onDestroyed: this.#refreshCacheAndNotify, + }); + + this.#abortController.abort(); + } +} + +module.exports = CSSRegisteredPropertiesWatcher; diff --git a/devtools/server/actors/resources/document-event.js b/devtools/server/actors/resources/document-event.js new file mode 100644 index 0000000000..bd6667b2b5 --- /dev/null +++ b/devtools/server/actors/resources/document-event.js @@ -0,0 +1,112 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const { + TYPES: { DOCUMENT_EVENT }, +} = require("resource://devtools/server/actors/resources/index.js"); +const { + DocumentEventsListener, +} = require("resource://devtools/server/actors/webconsole/listeners/document-events.js"); + +class DocumentEventWatcher { + #abortController = new AbortController(); + /** + * Start watching for all document event related to a given Target Actor. + * + * @param TargetActor targetActor + * The target actor from which we should observe document event + * @param Object options + * Dictionary object with following attributes: + * - onAvailable: mandatory function + * This will be called for each resource. + */ + async watch(targetActor, { onAvailable }) { + if (isWorker) { + return; + } + + const onDocumentEvent = ( + name, + { + time, + // This will be `true` when the user selected a document in the frame picker tool, + // in the toolbox toolbar. + isFrameSwitching, + // This is only passed for dom-complete event + hasNativeConsoleAPI, + // This is only passed for will-navigate event + newURI, + } = {} + ) => { + // Ignore will-navigate as that's managed by parent-process-document-event.js. + // Except frame switching, when selecting an iframe document via the dropdown menu, + // this is handled by the target actor in the content process and the parent process + // doesn't know about it. + if (name == "will-navigate" && !isFrameSwitching) { + return; + } + onAvailable([ + { + resourceType: DOCUMENT_EVENT, + name, + time, + isFrameSwitching, + // only send `title` on dom interactive (once the HTML was parsed) so we don't + // make the payload bigger for events where we either don't have a title yet, + // or where we already had a chance to get the title. + title: name === "dom-interactive" ? targetActor.title : undefined, + // only send `url` on dom loading and dom-interactive so we don't make the + // payload bigger for other events + url: + name === "dom-loading" || name === "dom-interactive" + ? targetActor.url + : undefined, + // only send `newURI` on will navigate so we don't make the payload bigger for + // other events + newURI: name === "will-navigate" ? newURI : null, + // only send `hasNativeConsoleAPI` on dom complete so we don't make the payload bigger for + // other events + hasNativeConsoleAPI: + name == "dom-complete" ? hasNativeConsoleAPI : null, + }, + ]); + }; + + this.listener = new DocumentEventsListener(targetActor); + + this.listener.on( + "will-navigate", + data => onDocumentEvent("will-navigate", data), + { signal: this.#abortController.signal } + ); + this.listener.on( + "dom-loading", + data => onDocumentEvent("dom-loading", data), + { signal: this.#abortController.signal } + ); + this.listener.on( + "dom-interactive", + data => onDocumentEvent("dom-interactive", data), + { signal: this.#abortController.signal } + ); + this.listener.on( + "dom-complete", + data => onDocumentEvent("dom-complete", data), + { signal: this.#abortController.signal } + ); + + this.listener.listen(); + } + + destroy() { + this.#abortController.abort(); + if (this.listener) { + this.listener.destroy(); + } + } +} + +module.exports = DocumentEventWatcher; diff --git a/devtools/server/actors/resources/error-messages.js b/devtools/server/actors/resources/error-messages.js new file mode 100644 index 0000000000..7628d7fd6d --- /dev/null +++ b/devtools/server/actors/resources/error-messages.js @@ -0,0 +1,192 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const nsIConsoleListenerWatcher = require("resource://devtools/server/actors/resources/utils/nsi-console-listener-watcher.js"); +const { + DevToolsServer, +} = require("resource://devtools/server/devtools-server.js"); +const ErrorDocs = require("resource://devtools/server/actors/errordocs.js"); +const { + createStringGrip, + makeDebuggeeValue, + createValueGripForTarget, +} = require("resource://devtools/server/actors/object/utils.js"); +const { + getActorIdForInternalSourceId, +} = require("resource://devtools/server/actors/utils/dbg-source.js"); +const { + WebConsoleUtils, +} = require("resource://devtools/server/actors/webconsole/utils.js"); + +const { + TYPES: { ERROR_MESSAGE }, +} = require("resource://devtools/server/actors/resources/index.js"); +const Targets = require("resource://devtools/server/actors/targets/index.js"); + +const { MESSAGE_CATEGORY } = require("resource://devtools/shared/constants.js"); + +const PLATFORM_SPECIFIC_CATEGORIES = [ + "XPConnect JavaScript", + "component javascript", + "chrome javascript", + "chrome registration", +]; + +class ErrorMessageWatcher extends nsIConsoleListenerWatcher { + shouldHandleMessage(targetActor, message, isCachedMessage = false) { + // The listener we use can be called either with a nsIConsoleMessage or a nsIScriptError. + // In this file, we only want to handle nsIScriptError. + if ( + // We only care about nsIScriptError + !(message instanceof Ci.nsIScriptError) || + !this.isCategoryAllowed(targetActor, message.category) || + // Block any error that was triggered by eager evaluation + message.sourceName === "debugger eager eval code" + ) { + return false; + } + + // Filter specific to CONTENT PROCESS targets + if (this.isProcessTarget(targetActor)) { + // Don't want to display cached messages from private windows. + const isCachedFromPrivateWindow = + isCachedMessage && message.isFromPrivateWindow; + if (isCachedFromPrivateWindow) { + return false; + } + + // `ContentChild` forwards all errors to the parent process (via IPC) all errors up + // the parent process and sets a `isForwardedFromContentProcess` property on them. + // Ignore these forwarded messages as the original ones will be logged either in a + // content process target (if window-less message) or frame target (if related to a window) + if (message.isForwardedFromContentProcess) { + return false; + } + + // Ignore all messages related to a given window for content process targets + // These messages will be handled by Watchers instantiated for the related frame targets + if ( + targetActor.targetType == Targets.TYPES.PROCESS && + message.innerWindowID + ) { + return false; + } + + return true; + } + + if (!message.innerWindowID) { + return false; + } + + const ids = targetActor.windows.map(window => + WebConsoleUtils.getInnerWindowId(window) + ); + return ids.includes(message.innerWindowID); + } + + /** + * Check if the given message category is allowed to be tracked or not. + * We ignore chrome-originating errors as we only care about content. + * + * @param string category + * The message category you want to check. + * @return boolean + * True if the category is allowed to be logged, false otherwise. + */ + isCategoryAllowed(targetActor, category) { + // CSS Parser errors will be handled by the CSSMessageWatcher. + if (!category || category === MESSAGE_CATEGORY.CSS_PARSER) { + return false; + } + + // We listen for everything on Process targets + if (this.isProcessTarget(targetActor)) { + return true; + } + + // Don't restrict any categories in the Browser Toolbox/Browser Console + if (targetActor.sessionContext.type == "all") { + return true; + } + + // For non-process targets in other toolboxes, we filter-out platform-specific errors. + return !PLATFORM_SPECIFIC_CATEGORIES.includes(category); + } + + /** + * Prepare an nsIScriptError to be sent to the client. + * + * @param nsIScriptError error + * The page error we need to send to the client. + * @return object + * The object you can send to the remote client. + */ + buildResource(targetActor, error) { + const stack = this.prepareStackForRemote(targetActor, error.stack); + let lineText = error.sourceLine; + if ( + lineText && + lineText.length > DevToolsServer.LONG_STRING_INITIAL_LENGTH + ) { + lineText = lineText.substr(0, DevToolsServer.LONG_STRING_INITIAL_LENGTH); + } + + const notesArray = this.prepareNotesForRemote(targetActor, error.notes); + + // If there is no location information in the error but we have a stack, + // fill in the location with the first frame on the stack. + let { sourceName, sourceId, lineNumber, columnNumber } = error; + if (!sourceName && !sourceId && !lineNumber && !columnNumber && stack) { + sourceName = stack[0].filename; + sourceId = stack[0].sourceId; + lineNumber = stack[0].lineNumber; + columnNumber = stack[0].columnNumber; + } + + const pageError = { + errorMessage: createStringGrip(targetActor, error.errorMessage), + errorMessageName: error.errorMessageName, + exceptionDocURL: ErrorDocs.GetURL(error), + sourceName, + sourceId: getActorIdForInternalSourceId(targetActor, sourceId), + lineText, + lineNumber, + columnNumber, + category: error.category, + innerWindowID: error.innerWindowID, + timeStamp: error.microSecondTimeStamp / 1000, + warning: !!(error.flags & error.warningFlag), + error: !(error.flags & (error.warningFlag | error.infoFlag)), + info: !!(error.flags & error.infoFlag), + private: error.isFromPrivateWindow, + stacktrace: stack, + notes: notesArray, + chromeContext: error.isFromChromeContext, + isPromiseRejection: error.isPromiseRejection, + isForwardedFromContentProcess: error.isForwardedFromContentProcess, + }; + + // If the pageError does have an exception object, we want to return the grip for it, + // but only if we do manage to get the grip, as we're checking the property on the + // client to render things differently. + if (error.hasException) { + try { + const obj = makeDebuggeeValue(targetActor, error.exception); + if (obj?.class !== "DeadObject") { + pageError.exception = createValueGripForTarget(targetActor, obj); + pageError.hasException = true; + } + } catch (e) {} + } + + return { + pageError, + resourceType: ERROR_MESSAGE, + }; + } +} +module.exports = ErrorMessageWatcher; diff --git a/devtools/server/actors/resources/extensions-backgroundscript-status.js b/devtools/server/actors/resources/extensions-backgroundscript-status.js new file mode 100644 index 0000000000..08f51a23f5 --- /dev/null +++ b/devtools/server/actors/resources/extensions-backgroundscript-status.js @@ -0,0 +1,68 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const { + TYPES: { EXTENSIONS_BGSCRIPT_STATUS }, +} = require("resource://devtools/server/actors/resources/index.js"); + +class ExtensionsBackgroundScriptStatusWatcher { + /** + * Start watching for the status updates related to a background + * scripts extension context (either an event page or a background + * service worker). + * + * This is used in about:debugging to update the background script + * row updated visible in Extensions details cards (only for extensions + * with a non persistent background script defined in the manifest) + * when the background contex is terminated on idle or started back + * to handle a persistent WebExtensions API event. + * + * @param RootActor rootActor + * The root actor in the parent process from which we should + * observe root resources. + * @param Object options + * Dictionary object with following attributes: + * - onAvailable: mandatory function + * This will be called for each resource. + */ + async watch(rootActor, { onAvailable }) { + this.rootActor = rootActor; + this.onAvailable = onAvailable; + + Services.obs.addObserver(this, "extension:background-script-status"); + } + + observe(subject, topic, data) { + switch (topic) { + case "extension:background-script-status": { + const { addonId, isRunning } = subject.wrappedJSObject; + this.onBackgroundScriptStatus(addonId, isRunning); + break; + } + } + } + + onBackgroundScriptStatus(addonId, isRunning) { + this.onAvailable([ + { + resourceType: EXTENSIONS_BGSCRIPT_STATUS, + payload: { + addonId, + isRunning, + }, + }, + ]); + } + + destroy() { + if (this.onAvailable) { + this.onAvailable = null; + Services.obs.removeObserver(this, "extension:background-script-status"); + } + } +} + +module.exports = ExtensionsBackgroundScriptStatusWatcher; diff --git a/devtools/server/actors/resources/index.js b/devtools/server/actors/resources/index.js new file mode 100644 index 0000000000..e2857502ad --- /dev/null +++ b/devtools/server/actors/resources/index.js @@ -0,0 +1,471 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const Targets = require("resource://devtools/server/actors/targets/index.js"); + +const TYPES = { + CONSOLE_MESSAGE: "console-message", + CSS_CHANGE: "css-change", + CSS_MESSAGE: "css-message", + CSS_REGISTERED_PROPERTIES: "css-registered-properties", + DOCUMENT_EVENT: "document-event", + ERROR_MESSAGE: "error-message", + LAST_PRIVATE_CONTEXT_EXIT: "last-private-context-exit", + NETWORK_EVENT: "network-event", + NETWORK_EVENT_STACKTRACE: "network-event-stacktrace", + PLATFORM_MESSAGE: "platform-message", + REFLOW: "reflow", + SERVER_SENT_EVENT: "server-sent-event", + SOURCE: "source", + STYLESHEET: "stylesheet", + THREAD_STATE: "thread-state", + JSTRACER_TRACE: "jstracer-trace", + JSTRACER_STATE: "jstracer-state", + WEBSOCKET: "websocket", + + // storage types + CACHE_STORAGE: "Cache", + COOKIE: "cookies", + EXTENSION_STORAGE: "extension-storage", + INDEXED_DB: "indexed-db", + LOCAL_STORAGE: "local-storage", + SESSION_STORAGE: "session-storage", + + // root types + EXTENSIONS_BGSCRIPT_STATUS: "extensions-backgroundscript-status", +}; +exports.TYPES = TYPES; + +// Helper dictionaries, which will contain data specific to each resource type. +// - `path` is the absolute path to the module defining the Resource Watcher class. +// +// Also see the attributes added by `augmentResourceDictionary` for each type: +// - `watchers` is a weak map which will store Resource Watchers +// (i.e. devtools/server/actors/resources/ class instances) +// keyed by target actor -or- watcher actor. +// - `WatcherClass` is a shortcut to the Resource Watcher module. +// Each module exports a Resource Watcher class. +// +// These are several dictionaries, which depend how the resource watcher classes are instantiated. + +// Frame target resources are spawned via a BrowsingContext Target Actor. +// Their watcher class receives a target actor as first argument. +// They are instantiated for each observed BrowsingContext, from the content process where it runs. +// They are meant to observe all resources related to a given Browsing Context. +const FrameTargetResources = augmentResourceDictionary({ + [TYPES.CACHE_STORAGE]: { + path: "devtools/server/actors/resources/storage-cache", + }, + [TYPES.CONSOLE_MESSAGE]: { + path: "devtools/server/actors/resources/console-messages", + }, + [TYPES.CSS_CHANGE]: { + path: "devtools/server/actors/resources/css-changes", + }, + [TYPES.CSS_MESSAGE]: { + path: "devtools/server/actors/resources/css-messages", + }, + [TYPES.CSS_REGISTERED_PROPERTIES]: { + path: "devtools/server/actors/resources/css-registered-properties", + }, + [TYPES.DOCUMENT_EVENT]: { + path: "devtools/server/actors/resources/document-event", + }, + [TYPES.ERROR_MESSAGE]: { + path: "devtools/server/actors/resources/error-messages", + }, + [TYPES.JSTRACER_STATE]: { + path: "devtools/server/actors/resources/jstracer-state", + }, + [TYPES.JSTRACER_TRACE]: { + path: "devtools/server/actors/resources/jstracer-trace", + }, + [TYPES.LOCAL_STORAGE]: { + path: "devtools/server/actors/resources/storage-local-storage", + }, + [TYPES.PLATFORM_MESSAGE]: { + path: "devtools/server/actors/resources/platform-messages", + }, + [TYPES.SESSION_STORAGE]: { + path: "devtools/server/actors/resources/storage-session-storage", + }, + [TYPES.STYLESHEET]: { + path: "devtools/server/actors/resources/stylesheets", + }, + [TYPES.NETWORK_EVENT]: { + path: "devtools/server/actors/resources/network-events-content", + }, + [TYPES.NETWORK_EVENT_STACKTRACE]: { + path: "devtools/server/actors/resources/network-events-stacktraces", + }, + [TYPES.REFLOW]: { + path: "devtools/server/actors/resources/reflow", + }, + [TYPES.SOURCE]: { + path: "devtools/server/actors/resources/sources", + }, + [TYPES.THREAD_STATE]: { + path: "devtools/server/actors/resources/thread-states", + }, + [TYPES.SERVER_SENT_EVENT]: { + path: "devtools/server/actors/resources/server-sent-events", + }, + [TYPES.WEBSOCKET]: { + path: "devtools/server/actors/resources/websockets", + }, +}); + +// Process target resources are spawned via a Process Target Actor. +// Their watcher class receives a process target actor as first argument. +// They are instantiated for each observed Process (parent and all content processes). +// They are meant to observe all resources related to a given process. +const ProcessTargetResources = augmentResourceDictionary({ + [TYPES.CONSOLE_MESSAGE]: { + path: "devtools/server/actors/resources/console-messages", + }, + [TYPES.JSTRACER_TRACE]: { + path: "devtools/server/actors/resources/jstracer-trace", + }, + [TYPES.JSTRACER_STATE]: { + path: "devtools/server/actors/resources/jstracer-state", + }, + [TYPES.ERROR_MESSAGE]: { + path: "devtools/server/actors/resources/error-messages", + }, + [TYPES.PLATFORM_MESSAGE]: { + path: "devtools/server/actors/resources/platform-messages", + }, + [TYPES.SOURCE]: { + path: "devtools/server/actors/resources/sources", + }, + [TYPES.THREAD_STATE]: { + path: "devtools/server/actors/resources/thread-states", + }, +}); + +// Worker target resources are spawned via a Worker Target Actor. +// Their watcher class receives a worker target actor as first argument. +// They are instantiated for each observed worker, from the worker thread. +// They are meant to observe all resources related to a given worker. +// +// We'll only support a few resource types in Workers (console-message, source, +// thread state, …) as error and platform messages are not supported since we need access +// to Ci, which isn't available in worker context. +// Errors are emitted from the content process main thread so the user would still get them. +const WorkerTargetResources = augmentResourceDictionary({ + [TYPES.CONSOLE_MESSAGE]: { + path: "devtools/server/actors/resources/console-messages", + }, + [TYPES.JSTRACER_TRACE]: { + path: "devtools/server/actors/resources/jstracer-trace", + }, + [TYPES.JSTRACER_STATE]: { + path: "devtools/server/actors/resources/jstracer-state", + }, + [TYPES.SOURCE]: { + path: "devtools/server/actors/resources/sources", + }, + [TYPES.THREAD_STATE]: { + path: "devtools/server/actors/resources/thread-states", + }, +}); + +// Parent process resources are spawned via the Watcher Actor. +// Their watcher class receives the watcher actor as first argument. +// They are instantiated once per watcher from the parent process. +// They are meant to observe all resources related to a given context designated by the Watcher (and its sessionContext) +// they should be observed from the parent process. +const ParentProcessResources = augmentResourceDictionary({ + [TYPES.NETWORK_EVENT]: { + path: "devtools/server/actors/resources/network-events", + }, + [TYPES.COOKIE]: { + path: "devtools/server/actors/resources/storage-cookie", + }, + [TYPES.EXTENSION_STORAGE]: { + path: "devtools/server/actors/resources/storage-extension", + }, + [TYPES.INDEXED_DB]: { + path: "devtools/server/actors/resources/storage-indexed-db", + }, + [TYPES.DOCUMENT_EVENT]: { + path: "devtools/server/actors/resources/parent-process-document-event", + }, + [TYPES.LAST_PRIVATE_CONTEXT_EXIT]: { + path: "devtools/server/actors/resources/last-private-context-exit", + }, +}); + +// Root resources are spawned via the Root Actor. +// Their watcher class receives the root actor as first argument. +// They are instantiated only once from the parent process. +// They are meant to observe anything easily observable from the parent process +// that isn't related to any particular context/target. +// This is especially useful when you need to observe something without having to instantiate a Watcher actor. +const RootResources = augmentResourceDictionary({ + [TYPES.EXTENSIONS_BGSCRIPT_STATUS]: { + path: "devtools/server/actors/resources/extensions-backgroundscript-status", + }, +}); +exports.RootResources = RootResources; + +function augmentResourceDictionary(dict) { + for (const resource of Object.values(dict)) { + resource.watchers = new WeakMap(); + + loader.lazyRequireGetter(resource, "WatcherClass", resource.path); + } + return dict; +} + +/** + * For a given actor, return the related dictionary defined just before, + * that contains info about how to listen for a given resource type, from a given actor. + * + * @param Actor rootOrWatcherOrTargetActor + * Either a RootActor or WatcherActor or a TargetActor which can be listening to a resource. + */ +function getResourceTypeDictionary(rootOrWatcherOrTargetActor) { + const { typeName } = rootOrWatcherOrTargetActor; + if (typeName == "root") { + return RootResources; + } + if (typeName == "watcher") { + return ParentProcessResources; + } + const { targetType } = rootOrWatcherOrTargetActor; + return getResourceTypeDictionaryForTargetType(targetType); +} + +/** + * For a targetType, return the related dictionary. + * + * @param String targetType + * A targetType string (See Targets.TYPES) + */ +function getResourceTypeDictionaryForTargetType(targetType) { + switch (targetType) { + case Targets.TYPES.FRAME: + return FrameTargetResources; + case Targets.TYPES.PROCESS: + return ProcessTargetResources; + case Targets.TYPES.WORKER: + return WorkerTargetResources; + case Targets.TYPES.SERVICE_WORKER: + return WorkerTargetResources; + default: + throw new Error(`Unsupported target actor typeName '${targetType}'`); + } +} + +/** + * For a given actor, return the object stored in one of the previous dictionary + * that contains info about how to listen for a given resource type, from a given actor. + * + * @param Actor rootOrWatcherOrTargetActor + * Either a RootActor or WatcherActor or a TargetActor which can be listening to a resource. + * @param String resourceType + * The resource type to be observed. + */ +function getResourceTypeEntry(rootOrWatcherOrTargetActor, resourceType) { + const dict = getResourceTypeDictionary(rootOrWatcherOrTargetActor); + if (!(resourceType in dict)) { + throw new Error( + `Unsupported resource type '${resourceType}' for ${rootOrWatcherOrTargetActor.typeName}` + ); + } + return dict[resourceType]; +} + +/** + * Start watching for a new list of resource types. + * This will also emit all already existing resources before resolving. + * + * @param Actor rootOrWatcherOrTargetActor + * Either a RootActor or WatcherActor or a TargetActor which can be listening to a resource: + * * RootActor will be used for resources observed from the parent process and aren't related to any particular + * context/descriptor. They can be observed right away when connecting to the RDP server + * without instantiating any actor other than the root actor. + * * WatcherActor will be used for resources listened from the parent process. + * * TargetActor will be used for resources listened from the content process. + * This actor: + * - defines what context to observe (browsing context, process, worker, ...) + * Via browsingContextID, windows, docShells attributes for the target actor. + * Via the `sessionContext` object for the watcher actor. + * (only for Watcher and Target actors. Root actor is context-less.) + * - exposes `notifyResources` method to be notified about all the resources updates + * This method will receive two arguments: + * - {String} updateType, which can be "available", "updated", or "destroyed" + * - {Array<Object>} resources, which will be the list of resource's forms + * or special update object for "updated" scenario. + * @param Array<String> resourceTypes + * List of all type of resource to listen to. + */ +async function watchResources(rootOrWatcherOrTargetActor, resourceTypes) { + // If we are given a target actor, filter out the resource types supported by the target. + // When using sharedData to pass types between processes, we are passing them for all target types. + const { targetType } = rootOrWatcherOrTargetActor; + // Only target actors usecase will have a target type. + // For Root and Watcher we process the `resourceTypes` list unfiltered. + if (targetType) { + resourceTypes = getResourceTypesForTargetType(resourceTypes, targetType); + } + const promises = []; + for (const resourceType of resourceTypes) { + const { watchers, WatcherClass } = getResourceTypeEntry( + rootOrWatcherOrTargetActor, + resourceType + ); + + // Ignore resources we're already listening to + if (watchers.has(rootOrWatcherOrTargetActor)) { + continue; + } + + // Don't watch for console messages from the worker target if worker messages are still + // being cloned to the main process, otherwise we'll get duplicated messages in the + // console output (See Bug 1778852). + if ( + resourceType == TYPES.CONSOLE_MESSAGE && + rootOrWatcherOrTargetActor.workerConsoleApiMessagesDispatchedToMainThread + ) { + continue; + } + + const watcher = new WatcherClass(); + promises.push( + watcher.watch(rootOrWatcherOrTargetActor, { + onAvailable: rootOrWatcherOrTargetActor.notifyResources.bind( + rootOrWatcherOrTargetActor, + "available" + ), + onUpdated: rootOrWatcherOrTargetActor.notifyResources.bind( + rootOrWatcherOrTargetActor, + "updated" + ), + onDestroyed: rootOrWatcherOrTargetActor.notifyResources.bind( + rootOrWatcherOrTargetActor, + "destroyed" + ), + }) + ); + watchers.set(rootOrWatcherOrTargetActor, watcher); + } + await Promise.all(promises); +} +exports.watchResources = watchResources; + +function getParentProcessResourceTypes(resourceTypes) { + return resourceTypes.filter(resourceType => { + return resourceType in ParentProcessResources; + }); +} +exports.getParentProcessResourceTypes = getParentProcessResourceTypes; + +function getResourceTypesForTargetType(resourceTypes, targetType) { + const resourceDictionnary = + getResourceTypeDictionaryForTargetType(targetType); + return resourceTypes.filter(resourceType => { + return resourceType in resourceDictionnary; + }); +} +exports.getResourceTypesForTargetType = getResourceTypesForTargetType; + +function hasResourceTypesForTargets(resourceTypes) { + return resourceTypes.some(resourceType => { + return resourceType in FrameTargetResources; + }); +} +exports.hasResourceTypesForTargets = hasResourceTypesForTargets; + +/** + * Stop watching for a list of resource types. + * + * @param Actor rootOrWatcherOrTargetActor + * The related actor, already passed to watchResources. + * @param Array<String> resourceTypes + * List of all type of resource to stop listening to. + */ +function unwatchResources(rootOrWatcherOrTargetActor, resourceTypes) { + for (const resourceType of resourceTypes) { + // Pull all info about this resource type from `Resources` global object + const { watchers } = getResourceTypeEntry( + rootOrWatcherOrTargetActor, + resourceType + ); + + const watcher = watchers.get(rootOrWatcherOrTargetActor); + if (watcher) { + watcher.destroy(); + watchers.delete(rootOrWatcherOrTargetActor); + } + } +} +exports.unwatchResources = unwatchResources; + +/** + * Clear resources for a list of resource types. + * + * @param Actor rootOrWatcherOrTargetActor + * The related actor, already passed to watchResources. + * @param Array<String> resourceTypes + * List of all type of resource to clear. + */ +function clearResources(rootOrWatcherOrTargetActor, resourceTypes) { + for (const resourceType of resourceTypes) { + const { watchers } = getResourceTypeEntry( + rootOrWatcherOrTargetActor, + resourceType + ); + + const watcher = watchers.get(rootOrWatcherOrTargetActor); + if (watcher && typeof watcher.clear == "function") { + watcher.clear(); + } + } +} + +exports.clearResources = clearResources; + +/** + * Stop watching for all watched resources on a given actor. + * + * @param Actor rootOrWatcherOrTargetActor + * The related actor, already passed to watchResources. + */ +function unwatchAllResources(rootOrWatcherOrTargetActor) { + for (const { watchers } of Object.values( + getResourceTypeDictionary(rootOrWatcherOrTargetActor) + )) { + const watcher = watchers.get(rootOrWatcherOrTargetActor); + if (watcher) { + watcher.destroy(); + watchers.delete(rootOrWatcherOrTargetActor); + } + } +} +exports.unwatchAllResources = unwatchAllResources; + +/** + * If we are watching for the given resource type, + * return the current ResourceWatcher instance used by this target actor + * in order to observe this resource type. + * + * @param Actor watcherOrTargetActor + * Either a WatcherActor or a TargetActor which can be listening to a resource. + * WatcherActor will be used for resources listened from the parent process, + * and TargetActor will be used for resources listened from the content process. + * @param String resourceType + * The resource type to query + * @return ResourceWatcher + * The resource watcher instance, defined in devtools/server/actors/resources/ + */ +function getResourceWatcher(watcherOrTargetActor, resourceType) { + const { watchers } = getResourceTypeEntry(watcherOrTargetActor, resourceType); + + return watchers.get(watcherOrTargetActor); +} +exports.getResourceWatcher = getResourceWatcher; diff --git a/devtools/server/actors/resources/jstracer-state.js b/devtools/server/actors/resources/jstracer-state.js new file mode 100644 index 0000000000..74491a6ced --- /dev/null +++ b/devtools/server/actors/resources/jstracer-state.js @@ -0,0 +1,96 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const { + TYPES: { JSTRACER_STATE }, +} = require("resource://devtools/server/actors/resources/index.js"); + +// Bug 1827382, as this module can be used from the worker thread, +// the following JSM may be loaded by the worker loader until +// we have proper support for ESM from workers. +const { + addTracingListener, + removeTracingListener, +} = require("resource://devtools/server/tracer/tracer.jsm"); + +const { LOG_METHODS } = require("resource://devtools/server/actors/tracer.js"); +const Targets = require("resource://devtools/server/actors/targets/index.js"); + +class TracingStateWatcher { + /** + * Start watching for tracing state changes for a given target actor. + * + * @param TargetActor targetActor + * The target actor from which we should observe + * @param Object options + * Dictionary object with following attributes: + * - onAvailable: mandatory function + * This will be called for each resource. + */ + async watch(targetActor, { onAvailable }) { + // Bug 1874204: tracer doesn't support tracing content process from the browser toolbox just yet + if (targetActor.targetType == Targets.TYPES.PROCESS) { + return; + } + + this.targetActor = targetActor; + this.onAvailable = onAvailable; + + this.tracingListener = { + onTracingToggled: this.onTracingToggled.bind(this), + }; + addTracingListener(this.tracingListener); + } + + /** + * Stop watching for tracing state + */ + destroy() { + if (!this.tracingListener) { + return; + } + removeTracingListener(this.tracingListener); + } + + /** + * Be notified by the underlying JavaScriptTracer class + * in case it stops by itself, instead of being stopped when the Actor's stopTracing + * method is called by the user. + * + * @param {Boolean} enabled + * True if the tracer starts tracing, false it it stops. + * @param {String} reason + * Optional string to justify why the tracer stopped. + */ + onTracingToggled(enabled, reason) { + const tracerActor = this.targetActor.getTargetScopedActor("tracer"); + const logMethod = tracerActor?.getLogMethod(); + + // JavascriptTracer only supports recording once in the same process/thread. + // If we open another DevTools, on the same process, we would receive notification + // about a JavascriptTracer controlled by another toolbox's tracer actor. + // Ignore them as our current tracer actor didn't start tracing. + if (!logMethod) { + return; + } + + this.onAvailable([ + { + resourceType: JSTRACER_STATE, + enabled, + logMethod, + profile: + logMethod == LOG_METHODS.PROFILER && !enabled + ? tracerActor.getProfile() + : undefined, + timeStamp: ChromeUtils.dateNow(), + reason, + }, + ]); + } +} + +module.exports = TracingStateWatcher; diff --git a/devtools/server/actors/resources/jstracer-trace.js b/devtools/server/actors/resources/jstracer-trace.js new file mode 100644 index 0000000000..0a614fd6a9 --- /dev/null +++ b/devtools/server/actors/resources/jstracer-trace.js @@ -0,0 +1,43 @@ +/* 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"; + +class JSTraceWatcher { + /** + * Start watching for traces for a given target actor. + * + * @param TargetActor targetActor + * The target actor from which we should observe + * @param Object options + * Dictionary object with following attributes: + * - onAvailable: mandatory function + * This will be called for each resource. + */ + async watch(targetActor, { onAvailable }) { + this.#onAvailable = onAvailable; + } + + #onAvailable; + + /** + * Stop watching for traces + */ + destroy() { + // The traces are being emitted by the TracerActor via `emitTraces` method, + // we start and stop recording and emitting tracer from this actor. + // Watching for JSTRACER_TRACE only allows receiving these trace events. + } + + /** + * Emit a JSTRACER_TRACE resource. + * + * This is being called by the Tracer Actor. + */ + emitTraces(traces) { + this.#onAvailable(traces); + } +} + +module.exports = JSTraceWatcher; diff --git a/devtools/server/actors/resources/last-private-context-exit.js b/devtools/server/actors/resources/last-private-context-exit.js new file mode 100644 index 0000000000..ec9ee6b91d --- /dev/null +++ b/devtools/server/actors/resources/last-private-context-exit.js @@ -0,0 +1,46 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const { + TYPES: { LAST_PRIVATE_CONTEXT_EXIT }, +} = require("resource://devtools/server/actors/resources/index.js"); + +class LastPrivateContextExitWatcher { + #onAvailable; + + /** + * Start watching for all times where we close a private browsing top level window. + * Meaning we should clear the console for all logs generated from these private browsing contexts. + * + * @param WatcherActor watcherActor + * The watcher actor in the parent process from which we should + * observe these events. + * @param Object options + * Dictionary object with following attributes: + * - onAvailable: mandatory function + * This will be called for each resource. + */ + async watch(watcherActor, { onAvailable }) { + this.#onAvailable = onAvailable; + Services.obs.addObserver(this, "last-pb-context-exited"); + } + + observe(subject, topic) { + if (topic === "last-pb-context-exited") { + this.#onAvailable([ + { + resourceType: LAST_PRIVATE_CONTEXT_EXIT, + }, + ]); + } + } + + destroy() { + Services.obs.removeObserver(this, "last-pb-context-exited"); + } +} + +module.exports = LastPrivateContextExitWatcher; diff --git a/devtools/server/actors/resources/moz.build b/devtools/server/actors/resources/moz.build new file mode 100644 index 0000000000..b3d2656b94 --- /dev/null +++ b/devtools/server/actors/resources/moz.build @@ -0,0 +1,44 @@ +# -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*- +# vim: set filetype=python: +# 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/. + +DIRS += [ + "storage", + "utils", +] + +DevToolsModules( + "console-messages.js", + "css-changes.js", + "css-messages.js", + "css-registered-properties.js", + "document-event.js", + "error-messages.js", + "extensions-backgroundscript-status.js", + "index.js", + "jstracer-state.js", + "jstracer-trace.js", + "last-private-context-exit.js", + "network-events-content.js", + "network-events-stacktraces.js", + "network-events.js", + "parent-process-document-event.js", + "platform-messages.js", + "reflow.js", + "server-sent-events.js", + "sources.js", + "storage-cache.js", + "storage-cookie.js", + "storage-extension.js", + "storage-indexed-db.js", + "storage-local-storage.js", + "storage-session-storage.js", + "stylesheets.js", + "thread-states.js", + "websockets.js", +) + +with Files("*-messages.js"): + BUG_COMPONENT = ("DevTools", "Console") diff --git a/devtools/server/actors/resources/network-events-content.js b/devtools/server/actors/resources/network-events-content.js new file mode 100644 index 0000000000..5135583fab --- /dev/null +++ b/devtools/server/actors/resources/network-events-content.js @@ -0,0 +1,267 @@ +/* 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"; + +loader.lazyRequireGetter( + this, + "NetworkEventActor", + "resource://devtools/server/actors/network-monitor/network-event-actor.js", + true +); + +const lazy = {}; + +ChromeUtils.defineESModuleGetters(lazy, { + NetworkUtils: + "resource://devtools/shared/network-observer/NetworkUtils.sys.mjs", +}); + +/** + * Handles network events from the content process + * This currently only handles events for requests (js/css) blocked by CSP. + */ +class NetworkEventContentWatcher { + /** + * Start watching for all network events related to a given Target Actor. + * + * @param TargetActor targetActor + * The target actor in the content process from which we should + * observe network events. + * @param Object options + * Dictionary object with following attributes: + * - onAvailable: mandatory function + * This will be called for each resource. + * - onUpdated: optional function + * This would be called multiple times for each resource. + */ + async watch(targetActor, { onAvailable, onUpdated }) { + // Map from channelId to network event objects. + this.networkEvents = new Map(); + + this.targetActor = targetActor; + this.onAvailable = onAvailable; + this.onUpdated = onUpdated; + + this.httpFailedOpeningRequest = this.httpFailedOpeningRequest.bind(this); + this.httpOnImageCacheResponse = this.httpOnImageCacheResponse.bind(this); + + Services.obs.addObserver( + this.httpFailedOpeningRequest, + "http-on-failed-opening-request" + ); + + Services.obs.addObserver( + this.httpOnImageCacheResponse, + "http-on-image-cache-response" + ); + } + /** + * Allows clearing of network events + */ + clear() { + this.networkEvents.clear(); + } + + httpFailedOpeningRequest(subject, topic) { + const channel = subject.QueryInterface(Ci.nsIHttpChannel); + + // Ignore preload requests to avoid duplicity request entries in + // the Network panel. If a preload fails (for whatever reason) + // then the platform kicks off another 'real' request. + if (lazy.NetworkUtils.isPreloadRequest(channel)) { + return; + } + + if ( + !lazy.NetworkUtils.matchRequest(channel, { + targetActor: this.targetActor, + }) + ) { + return; + } + + this.onNetworkEventAvailable(channel, { + networkEventOptions: { + blockedReason: channel.loadInfo.requestBlockingReason, + }, + }); + } + + httpOnImageCacheResponse(subject, topic) { + if ( + topic != "http-on-image-cache-response" || + !(subject instanceof Ci.nsIHttpChannel) + ) { + return; + } + + const channel = subject.QueryInterface(Ci.nsIHttpChannel); + + if ( + !lazy.NetworkUtils.matchRequest(channel, { + targetActor: this.targetActor, + }) + ) { + return; + } + + // Only one network request should be created per URI for images from the cache + const hasURI = Array.from(this.networkEvents.values()).some( + networkEvent => networkEvent.uri === channel.URI.spec + ); + + if (hasURI) { + return; + } + + this.onNetworkEventAvailable(channel, { + networkEventOptions: { fromCache: true }, + }); + } + + onNetworkEventAvailable(channel, { networkEventOptions }) { + const actor = new NetworkEventActor( + this.targetActor.conn, + this.targetActor.sessionContext, + { + onNetworkEventUpdate: this.onNetworkEventUpdate.bind(this), + onNetworkEventDestroy: this.onNetworkEventDestroyed.bind(this), + }, + networkEventOptions, + channel + ); + this.targetActor.manage(actor); + + const resource = actor.asResource(); + + const networkEvent = { + browsingContextID: resource.browsingContextID, + innerWindowId: resource.innerWindowId, + resourceId: resource.resourceId, + resourceType: resource.resourceType, + receivedUpdates: [], + resourceUpdates: { + // Requests already come with request cookies and headers, so those + // should always be considered as available. But the client still + // heavily relies on those `Available` flags to fetch additional data, + // so it is better to keep them for consistency. + requestCookiesAvailable: true, + requestHeadersAvailable: true, + }, + uri: channel.URI.spec, + }; + this.networkEvents.set(resource.resourceId, networkEvent); + + this.onAvailable([resource]); + const isBlocked = !!resource.blockedReason; + if (isBlocked) { + this._emitUpdate(networkEvent); + } else { + actor.addResponseStart({ channel, fromCache: true }); + actor.addEventTimings( + 0 /* totalTime */, + {} /* timings */, + {} /* offsets */ + ); + actor.addServerTimings({}); + actor.addResponseContent( + { + mimeType: channel.contentType, + size: channel.contentLength, + text: "", + transferredSize: 0, + }, + {} + ); + } + } + + onNetworkEventUpdate(updateResource) { + const networkEvent = this.networkEvents.get(updateResource.resourceId); + + if (!networkEvent) { + return; + } + + const { resourceUpdates, receivedUpdates } = networkEvent; + + switch (updateResource.updateType) { + case "responseStart": + // For cached image requests channel.responseStatus is set to 200 as + // expected. However responseStatusText is empty. In this case fallback + // to the expected statusText "OK". + let statusText = updateResource.statusText; + if (!statusText && updateResource.status === "200") { + statusText = "OK"; + } + resourceUpdates.httpVersion = updateResource.httpVersion; + resourceUpdates.status = updateResource.status; + resourceUpdates.statusText = statusText; + resourceUpdates.remoteAddress = updateResource.remoteAddress; + resourceUpdates.remotePort = updateResource.remotePort; + resourceUpdates.waitingTime = updateResource.waitingTime; + + resourceUpdates.responseHeadersAvailable = true; + resourceUpdates.responseCookiesAvailable = true; + break; + case "responseContent": + resourceUpdates.contentSize = updateResource.contentSize; + resourceUpdates.mimeType = updateResource.mimeType; + resourceUpdates.transferredSize = updateResource.transferredSize; + break; + case "eventTimings": + resourceUpdates.totalTime = updateResource.totalTime; + break; + } + + resourceUpdates[`${updateResource.updateType}Available`] = true; + receivedUpdates.push(updateResource.updateType); + + // Here we explicitly call all three `add` helpers on each network event + // actor so in theory we could check only the last one to be called, ie + // responseContent. + const isComplete = + receivedUpdates.includes("responseStart") && + receivedUpdates.includes("responseContent") && + receivedUpdates.includes("eventTimings"); + + if (isComplete) { + this._emitUpdate(networkEvent); + } + } + + _emitUpdate(networkEvent) { + this.onUpdated([ + { + resourceType: networkEvent.resourceType, + resourceId: networkEvent.resourceId, + resourceUpdates: networkEvent.resourceUpdates, + browsingContextID: networkEvent.browsingContextID, + innerWindowId: networkEvent.innerWindowId, + }, + ]); + } + + onNetworkEventDestroyed(channelId) { + if (this.networkEvents.has(channelId)) { + this.networkEvents.delete(channelId); + } + } + + destroy() { + this.clear(); + Services.obs.removeObserver( + this.httpFailedOpeningRequest, + "http-on-failed-opening-request" + ); + + Services.obs.removeObserver( + this.httpOnImageCacheResponse, + "http-on-image-cache-response" + ); + } +} + +module.exports = NetworkEventContentWatcher; diff --git a/devtools/server/actors/resources/network-events-stacktraces.js b/devtools/server/actors/resources/network-events-stacktraces.js new file mode 100644 index 0000000000..a458278680 --- /dev/null +++ b/devtools/server/actors/resources/network-events-stacktraces.js @@ -0,0 +1,214 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const { + TYPES: { NETWORK_EVENT_STACKTRACE }, +} = require("resource://devtools/server/actors/resources/index.js"); + +loader.lazyRequireGetter( + this, + "ChannelEventSinkFactory", + "resource://devtools/server/actors/network-monitor/channel-event-sink.js", + true +); + +const lazy = {}; + +ChromeUtils.defineESModuleGetters(lazy, { + NetworkUtils: + "resource://devtools/shared/network-observer/NetworkUtils.sys.mjs", +}); + +class NetworkEventStackTracesWatcher { + /** + * Start watching for all network event's stack traces related to a given Target actor. + * + * @param TargetActor targetActor + * The target actor from which we should observe the strack traces + * @param Object options + * Dictionary object with following attributes: + * - onAvailable: mandatory + * This will be called for each resource. + */ + async watch(targetActor, { onAvailable }) { + this.stacktraces = new Map(); + this.onStackTraceAvailable = onAvailable; + this.targetActor = targetActor; + + Services.obs.addObserver(this, "http-on-opening-request"); + Services.obs.addObserver(this, "document-on-opening-request"); + Services.obs.addObserver(this, "network-monitor-alternate-stack"); + ChannelEventSinkFactory.getService().registerCollector(this); + } + + /** + * Allows clearing of network stacktrace resources + */ + clear() { + this.stacktraces.clear(); + } + + /** + * Stop watching for network event's strack traces related to a given Target Actor. + * + * @param TargetActor targetActor + * The target actor from which we should stop observing the strack traces + */ + destroy(targetActor) { + this.clear(); + Services.obs.removeObserver(this, "http-on-opening-request"); + Services.obs.removeObserver(this, "document-on-opening-request"); + Services.obs.removeObserver(this, "network-monitor-alternate-stack"); + ChannelEventSinkFactory.getService().unregisterCollector(this); + } + + onChannelRedirect(oldChannel, newChannel, flags) { + // We can be called with any nsIChannel, but are interested only in HTTP channels + try { + oldChannel.QueryInterface(Ci.nsIHttpChannel); + newChannel.QueryInterface(Ci.nsIHttpChannel); + } catch (ex) { + return; + } + + const oldId = oldChannel.channelId; + const stacktrace = this.stacktraces.get(oldId); + if (stacktrace) { + this._setStackTrace(newChannel.channelId, stacktrace); + } + } + + observe(subject, topic, data) { + let channel, id; + try { + // We need to QI nsIHttpChannel in order to load the interface's + // methods / attributes for later code that could assume we are dealing + // with a nsIHttpChannel. + channel = subject.QueryInterface(Ci.nsIHttpChannel); + id = channel.channelId; + } catch (e1) { + try { + channel = subject.QueryInterface(Ci.nsIIdentChannel); + id = channel.channelId; + } catch (e2) { + // WebSocketChannels do not have IDs, so use the serial. When a WebSocket is + // opened in a content process, a channel is created locally but the HTTP + // channel for the connection lives entirely in the parent process. When + // the server code running in the parent sees that HTTP channel, it will + // look for the creation stack using the websocket's serial. + try { + channel = subject.QueryInterface(Ci.nsIWebSocketChannel); + id = channel.serial; + } catch (e3) { + // Try if the channel is a nsIWorkerChannelInfo which is the substitute + // of the channel in the parent process. + try { + channel = subject.QueryInterface(Ci.nsIWorkerChannelInfo); + id = channel.channelId; + } catch (e4) { + // Channels which don't implement the above interfaces can appear here, + // such as nsIFileChannel. Ignore these channels. + return; + } + } + } + } + + if ( + !lazy.NetworkUtils.matchRequest(channel, { + targetActor: this.targetActor, + }) + ) { + return; + } + + if (this.stacktraces.has(id)) { + // We can get up to two stack traces for the same channel: one each from + // the two observer topics we are listening to. Use the first stack trace + // which is specified, and ignore any later one. + return; + } + + const stacktrace = []; + switch (topic) { + case "http-on-opening-request": + case "document-on-opening-request": { + // The channel is being opened on the main thread, associate the current + // stack with it. + // + // Convert the nsIStackFrame XPCOM objects to a nice JSON that can be + // passed around through message managers etc. + let frame = Components.stack; + if (frame?.caller) { + frame = frame.caller; + while (frame) { + stacktrace.push({ + filename: frame.filename, + lineNumber: frame.lineNumber, + columnNumber: frame.columnNumber, + functionName: frame.name, + asyncCause: frame.asyncCause, + }); + frame = frame.caller || frame.asyncCaller; + } + } + break; + } + case "network-monitor-alternate-stack": { + // An alternate stack trace is being specified for this channel. + // The topic data is the JSON for the saved frame stack we should use, + // so convert this into the expected format. + // + // This topic is used in the following cases: + // + // - The HTTP channel is opened asynchronously or on a different thread + // from the code which triggered its creation, in which case the stack + // from Components.stack will be empty. The alternate stack will be + // for the point we want to associate with the channel. + // + // - The channel is not a nsIHttpChannel, and we will receive no + // opening request notification for it. + let frame = JSON.parse(data); + while (frame) { + stacktrace.push({ + filename: frame.source, + lineNumber: frame.line, + columnNumber: frame.column, + functionName: frame.functionDisplayName, + asyncCause: frame.asyncCause, + }); + frame = frame.parent || frame.asyncParent; + } + break; + } + default: + throw new Error("Unexpected observe() topic"); + } + + this._setStackTrace(id, stacktrace); + } + + _setStackTrace(resourceId, stacktrace) { + this.stacktraces.set(resourceId, stacktrace); + this.onStackTraceAvailable([ + { + resourceType: NETWORK_EVENT_STACKTRACE, + resourceId, + stacktraceAvailable: stacktrace && !!stacktrace.length, + lastFrame: stacktrace && stacktrace.length ? stacktrace[0] : undefined, + }, + ]); + } + + getStackTrace(id) { + let stacktrace = []; + if (this.stacktraces.has(id)) { + stacktrace = this.stacktraces.get(id); + } + return stacktrace; + } +} +module.exports = NetworkEventStackTracesWatcher; diff --git a/devtools/server/actors/resources/network-events.js b/devtools/server/actors/resources/network-events.js new file mode 100644 index 0000000000..c1440f2c8d --- /dev/null +++ b/devtools/server/actors/resources/network-events.js @@ -0,0 +1,420 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const { Pool } = require("resource://devtools/shared/protocol/Pool.js"); +const { isWindowGlobalPartOfContext } = ChromeUtils.importESModule( + "resource://devtools/server/actors/watcher/browsing-context-helpers.sys.mjs" +); +const { WatcherRegistry } = ChromeUtils.importESModule( + "resource://devtools/server/actors/watcher/WatcherRegistry.sys.mjs", + { + // WatcherRegistry needs to be a true singleton and loads ActorManagerParent + // which also has to be a true singleton. + loadInDevToolsLoader: false, + } +); +const Targets = require("resource://devtools/server/actors/targets/index.js"); + +const lazy = {}; + +ChromeUtils.defineESModuleGetters(lazy, { + NetworkObserver: + "resource://devtools/shared/network-observer/NetworkObserver.sys.mjs", + NetworkUtils: + "resource://devtools/shared/network-observer/NetworkUtils.sys.mjs", +}); + +loader.lazyRequireGetter( + this, + "NetworkEventActor", + "resource://devtools/server/actors/network-monitor/network-event-actor.js", + true +); + +/** + * Handles network events from the parent process + */ +class NetworkEventWatcher { + /** + * Start watching for all network events related to a given Watcher Actor. + * + * @param WatcherActor watcherActor + * The watcher actor in the parent process from which we should + * observe network events. + * @param Object options + * Dictionary object with following attributes: + * - onAvailable: mandatory function + * This will be called for each resource. + * - onUpdated: optional function + * This would be called multiple times for each resource. + */ + async watch(watcherActor, { onAvailable, onUpdated }) { + this.networkEvents = new Map(); + + this.watcherActor = watcherActor; + this.onNetworkEventAvailable = onAvailable; + this.onNetworkEventUpdated = onUpdated; + // Boolean to know if we keep previous document network events or not. + this.persist = false; + this.listener = new lazy.NetworkObserver({ + ignoreChannelFunction: this.shouldIgnoreChannel.bind(this), + onNetworkEvent: this.onNetworkEvent.bind(this), + }); + + Services.obs.addObserver(this, "window-global-destroyed"); + } + + /** + * Clear all the network events and the related actors. + * + * This is called on actor destroy, but also from WatcherActor.clearResources(NETWORK_EVENT) + */ + clear() { + this.networkEvents.clear(); + this.listener.clear(); + if (this._pool) { + this._pool.destroy(); + this._pool = null; + } + } + + /** + * A protocol.js Pool to store all NetworkEventActor's which may be destroyed on navigations. + */ + get pool() { + if (this._pool) { + return this._pool; + } + this._pool = new Pool(this.watcherActor.conn, "network-events"); + this.watcherActor.manage(this._pool); + return this._pool; + } + + /** + * Instruct to keep reference to previous document requests or not. + * If persist is disabled, we will clear all informations about previous document + * on each navigation. + * If persist is enabled, we will keep all informations for all documents, leading + * to lots of allocations! + * + * @param {Boolean} enabled + */ + setPersist(enabled) { + this.persist = enabled; + } + + /** + * Gets the throttle settings + * + * @return {*} data + * + */ + getThrottleData() { + return this.listener.getThrottleData(); + } + + /** + * Sets the throttle data + * + * @param {*} data + * + */ + setThrottleData(data) { + this.listener.setThrottleData(data); + } + + /** + * Instruct to save or ignore request and response bodies + * @param {Boolean} save + */ + setSaveRequestAndResponseBodies(save) { + this.listener.setSaveRequestAndResponseBodies(save); + } + + /** + * Block requests based on the filters + * @param {Object} filters + */ + blockRequest(filters) { + this.listener.blockRequest(filters); + } + + /** + * Unblock requests based on the fitlers + * @param {Object} filters + */ + unblockRequest(filters) { + this.listener.unblockRequest(filters); + } + + /** + * Calls the listener to set blocked urls + * + * @param {Array} urls + * The urls to block + */ + + setBlockedUrls(urls) { + this.listener.setBlockedUrls(urls); + } + + /** + * Calls the listener to get the blocked urls + * + * @return {Array} urls + * The blocked urls + */ + + getBlockedUrls() { + return this.listener.getBlockedUrls(); + } + + override(url, path) { + this.listener.override(url, path); + } + + removeOverride(url) { + this.listener.removeOverride(url); + } + + /** + * Watch for previous document being unloaded in order to clear + * all related network events, in case persist is disabled. + * (which is the default behavior) + */ + observe(windowGlobal, topic) { + if (topic !== "window-global-destroyed") { + return; + } + // If we persist, we will keep all requests allocated. + // For now, consider that the Browser console and toolbox persist all the requests. + if (this.persist || this.watcherActor.sessionContext.type == "all") { + return; + } + // Only process WindowGlobals which are related to the debugged scope. + if ( + !isWindowGlobalPartOfContext( + windowGlobal, + this.watcherActor.sessionContext + ) + ) { + return; + } + const { innerWindowId } = windowGlobal; + + for (const child of this.pool.poolChildren()) { + // Destroy all network events matching the destroyed WindowGlobal + if (!child.isNavigationRequest()) { + if (child.getInnerWindowId() == innerWindowId) { + child.destroy(); + } + // Avoid destroying the navigation request, which is flagged with previous document's innerWindowId. + // When navigating, the WindowGlobal we navigate *from* will be destroyed and notified here. + // We should explicitly avoid destroying it here. + // But, we still want to eventually destroy them. + // So do this when navigating a second time, we will navigate from a distinct WindowGlobal + // and check that this is the top level window global and not an iframe one. + // So that we avoid clearing the top navigation when an iframe navigates + // + // Avoid destroying the request if innerWindowId isn't set. This happens when we reload many times in a row. + // The previous navigation request will be cancelled and because of that its innerWindowId will be null. + // But the frontend will receive it after the navigation begins (after will-navigate) and will display it + // and try to fetch extra data about it. So, avoid destroying its NetworkEventActor. + } else if ( + child.getInnerWindowId() && + child.getInnerWindowId() != innerWindowId && + windowGlobal.browsingContext == + this.watcherActor.browserElement?.browsingContext + ) { + child.destroy(); + } + } + } + + /** + * Called by NetworkObserver in order to know if the channel should be ignored + */ + shouldIgnoreChannel(channel) { + // First of all, check if the channel matches the watcherActor's session. + const filters = { sessionContext: this.watcherActor.sessionContext }; + if (!lazy.NetworkUtils.matchRequest(channel, filters)) { + return true; + } + + // When we are in the browser toolbox in parent process scope, + // the session context is still "all", but we are no longer watching frame and process targets. + // In this case, we should ignore all requests belonging to a BrowsingContext that isn't in the parent process + // (i.e. the process where this Watcher runs) + const isParentProcessOnlyBrowserToolbox = + this.watcherActor.sessionContext.type == "all" && + !WatcherRegistry.isWatchingTargets( + this.watcherActor, + Targets.TYPES.FRAME + ); + if (isParentProcessOnlyBrowserToolbox) { + // We should ignore all requests coming from BrowsingContext running in another process + const browsingContextID = + lazy.NetworkUtils.getChannelBrowsingContextID(channel); + const browsingContext = BrowsingContext.get(browsingContextID); + // We accept any request that isn't bound to any BrowsingContext. + // This is most likely a privileged request done from a JSM/C++. + // `isInProcess` will be true, when the document executes in the parent process. + // + // Note that we will still accept all requests that aren't bound to any BrowsingContext + // See browser_resources_network_events_parent_process.js test with privileged request + // made from the content processes. + // We miss some attribute on channel/loadInfo to know that it comes from the content process. + if (browsingContext?.currentWindowGlobal.isInProcess === false) { + return true; + } + } + return false; + } + + onNetworkEvent(networkEventOptions, channel) { + if (channel.channelId && this.networkEvents.has(channel.channelId)) { + throw new Error( + `Got notified about channel ${channel.channelId} more than once.` + ); + } + + const actor = new NetworkEventActor( + this.watcherActor.conn, + this.watcherActor.sessionContext, + { + onNetworkEventUpdate: this.onNetworkEventUpdate.bind(this), + onNetworkEventDestroy: this.onNetworkEventDestroy.bind(this), + }, + networkEventOptions, + channel + ); + this.pool.manage(actor); + + const resource = actor.asResource(); + const isBlocked = !!resource.blockedReason; + const networkEvent = { + browsingContextID: resource.browsingContextID, + innerWindowId: resource.innerWindowId, + resourceId: resource.resourceId, + resourceType: resource.resourceType, + isBlocked, + isFileRequest: resource.isFileRequest, + receivedUpdates: [], + resourceUpdates: { + // Requests already come with request cookies and headers, so those + // should always be considered as available. But the client still + // heavily relies on those `Available` flags to fetch additional data, + // so it is better to keep them for consistency. + requestCookiesAvailable: true, + requestHeadersAvailable: true, + }, + }; + this.networkEvents.set(resource.resourceId, networkEvent); + + this.onNetworkEventAvailable([resource]); + + // Blocked requests will not receive further updates and should emit an + // update packet immediately. + // The frontend expects to receive a dedicated update to consider the + // request as completed. TODO: lift this restriction so that we can only + // emit a resource available notification if no update is needed. + if (isBlocked) { + this._emitUpdate(networkEvent); + } + + return actor; + } + + onNetworkEventUpdate(updateResource) { + const networkEvent = this.networkEvents.get(updateResource.resourceId); + + if (!networkEvent) { + return; + } + + const { resourceUpdates, receivedUpdates } = networkEvent; + + switch (updateResource.updateType) { + case "responseStart": + resourceUpdates.httpVersion = updateResource.httpVersion; + resourceUpdates.status = updateResource.status; + resourceUpdates.statusText = updateResource.statusText; + resourceUpdates.remoteAddress = updateResource.remoteAddress; + resourceUpdates.remotePort = updateResource.remotePort; + // The mimetype is only set when then the contentType is available + // in the _onResponseHeader and not for cached/service worker requests + // in _httpResponseExaminer. + resourceUpdates.mimeType = updateResource.mimeType; + resourceUpdates.waitingTime = updateResource.waitingTime; + resourceUpdates.isResolvedByTRR = updateResource.isResolvedByTRR; + resourceUpdates.proxyHttpVersion = updateResource.proxyHttpVersion; + resourceUpdates.proxyStatus = updateResource.proxyStatus; + resourceUpdates.proxyStatusText = updateResource.proxyStatusText; + + resourceUpdates.responseHeadersAvailable = true; + resourceUpdates.responseCookiesAvailable = true; + break; + case "responseContent": + resourceUpdates.contentSize = updateResource.contentSize; + resourceUpdates.transferredSize = updateResource.transferredSize; + resourceUpdates.mimeType = updateResource.mimeType; + resourceUpdates.blockingExtension = updateResource.blockingExtension; + resourceUpdates.blockedReason = updateResource.blockedReason; + break; + case "eventTimings": + resourceUpdates.totalTime = updateResource.totalTime; + break; + case "securityInfo": + resourceUpdates.securityState = updateResource.state; + resourceUpdates.isRacing = updateResource.isRacing; + break; + } + + resourceUpdates[`${updateResource.updateType}Available`] = true; + receivedUpdates.push(updateResource.updateType); + + const isComplete = networkEvent.isFileRequest + ? receivedUpdates.includes("responseStart") + : receivedUpdates.includes("eventTimings") && + receivedUpdates.includes("responseContent") && + receivedUpdates.includes("securityInfo"); + + if (isComplete) { + this._emitUpdate(networkEvent); + } + } + + _emitUpdate(networkEvent) { + this.onNetworkEventUpdated([ + { + resourceType: networkEvent.resourceType, + resourceId: networkEvent.resourceId, + resourceUpdates: networkEvent.resourceUpdates, + browsingContextID: networkEvent.browsingContextID, + innerWindowId: networkEvent.innerWindowId, + }, + ]); + } + + onNetworkEventDestroy(channelId) { + if (this.networkEvents.has(channelId)) { + this.networkEvents.delete(channelId); + } + } + + /** + * Stop watching for network event related to a given Watcher Actor. + */ + destroy() { + if (this.listener) { + this.clear(); + this.listener.destroy(); + Services.obs.removeObserver(this, "window-global-destroyed"); + } + } +} + +module.exports = NetworkEventWatcher; diff --git a/devtools/server/actors/resources/parent-process-document-event.js b/devtools/server/actors/resources/parent-process-document-event.js new file mode 100644 index 0000000000..e156a32fe5 --- /dev/null +++ b/devtools/server/actors/resources/parent-process-document-event.js @@ -0,0 +1,174 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const { + TYPES: { DOCUMENT_EVENT }, +} = require("resource://devtools/server/actors/resources/index.js"); +const isEveryFrameTargetEnabled = Services.prefs.getBoolPref( + "devtools.every-frame-target.enabled", + false +); +const { + WILL_NAVIGATE_TIME_SHIFT, +} = require("resource://devtools/server/actors/webconsole/listeners/document-events.js"); + +class ParentProcessDocumentEventWatcher { + /** + * Start watching, from the parent process, for DOCUMENT_EVENT's "will-navigate" event related to a given Watcher Actor. + * + * All other DOCUMENT_EVENT events are implemented from another watcher class, running in the content process. + * Note that this other content process watcher will also emit one special edgecase of will-navigate + * retlated to the iframe dropdown menu. + * + * We have to move listen for navigation in the parent to better handle bfcache navigations + * and more generally all navigations which are initiated from the parent process. + * 'bfcacheInParent' feature enabled many types of navigations to be controlled from the parent process. + * + * This was especially important to have this implementation in the parent + * because the navigation event may be fired too late in the content process. + * Leading to will-navigate being emitted *after* the new target we navigate to is notified to the client. + * + * @param WatcherActor watcherActor + * The watcher actor from which we should observe document event + * @param Object options + * Dictionary object with following attributes: + * - onAvailable: mandatory function + * This will be called for each resource. + */ + async watch(watcherActor, { onAvailable }) { + this.watcherActor = watcherActor; + this.onAvailable = onAvailable; + + // List of listeners keyed by innerWindowId. + // Listeners are called as soon as we emitted the will-navigate + // resource for the related WindowGlobal. + this._onceWillNavigate = new Map(); + + // Filter browsing contexts to only have the top BrowsingContext of each tree of BrowsingContexts… + const topLevelBrowsingContexts = this.watcherActor + .getAllBrowsingContexts() + .filter(browsingContext => browsingContext.top == browsingContext); + + // Only register one WebProgressListener per BrowsingContext tree. + // We will be notified about children BrowsingContext navigations/state changes via the top level BrowsingContextWebProgressListener, + // and BrowsingContextWebProgress.browsingContext attribute will be updated dynamically everytime + // we get notified about a child BrowsingContext. + // Note that regular web page toolbox will only have one BrowsingContext tree, for the given tab. + // But the Browser Toolbox will have many trees to listen to, one per top-level Window, and also one per tab, + // as tabs's BrowsingContext context aren't children of their top level window! + // + // Also save the WebProgress and not the BrowsingContext because `BrowsingContext.webProgress` will be undefined in destroy(), + // while it is still valuable to call `webProgress.removeProgressListener`. Otherwise events keeps being notified!! + this.webProgresses = topLevelBrowsingContexts.map( + browsingContext => browsingContext.webProgress + ); + this.webProgresses.forEach(webProgress => { + webProgress.addProgressListener( + this, + Ci.nsIWebProgress.NOTIFY_STATE_DOCUMENT + ); + }); + } + + /** + * Wait for the emission of will-navigate for a given WindowGlobal + * + * @param Number innerWindowId + * WindowGlobal's id we want to track + * @return Promise + * Resolves immediatly if the WindowGlobal isn't tracked by any target + * -or- resolve later, once the WindowGlobal navigates to another document + * and will-navigate has been emitted. + */ + onceWillNavigateIsEmitted(innerWindowId) { + // Only delay the target-destroyed event if the target is for BrowsingContext for which we will emit will-navigate + const isTracked = this.webProgresses.find( + webProgress => + webProgress.browsingContext.currentWindowGlobal.innerWindowId == + innerWindowId + ); + if (isTracked) { + return new Promise(resolve => { + this._onceWillNavigate.set(innerWindowId, resolve); + }); + } + return Promise.resolve(); + } + + onStateChange(progress, request, flag, status) { + const isStart = flag & Ci.nsIWebProgressListener.STATE_START; + const isDocument = flag & Ci.nsIWebProgressListener.STATE_IS_DOCUMENT; + if (isDocument && isStart) { + const { browsingContext } = progress; + // Ignore navigation for same-process iframes when EFT is disabled + if ( + !browsingContext.currentWindowGlobal.isProcessRoot && + !isEveryFrameTargetEnabled + ) { + return; + } + // Ignore if we are still on the initial document, + // as that's the navigation from it (about:blank) to the actual first location. + // The target isn't created yet. + if (browsingContext.currentWindowGlobal.isInitialDocument) { + return; + } + + // Only emit will-navigate for top-level targets. + if ( + this.watcherActor.sessionContext.type == "all" && + browsingContext.isContent + ) { + // Never emit will-navigate for content browsing contexts in the Browser Toolbox. + // They might verify `browsingContext.top == browsingContext` because of the chrome/content + // boundary, but they do not represent a top-level target for this DevTools session. + return; + } + const isTopLevel = browsingContext.top == browsingContext; + if (!isTopLevel) { + return; + } + + const newURI = request instanceof Ci.nsIChannel ? request.URI.spec : null; + const { innerWindowId } = browsingContext.currentWindowGlobal; + this.onAvailable([ + { + browsingContextID: browsingContext.id, + innerWindowId, + resourceType: DOCUMENT_EVENT, + name: "will-navigate", + time: Date.now() - WILL_NAVIGATE_TIME_SHIFT, + isFrameSwitching: false, + newURI, + }, + ]); + const callback = this._onceWillNavigate.get(innerWindowId); + if (callback) { + this._onceWillNavigate.delete(innerWindowId); + callback(); + } + } + } + + get QueryInterface() { + return ChromeUtils.generateQI([ + "nsIWebProgressListener", + "nsISupportsWeakReference", + ]); + } + + destroy() { + this.webProgresses.forEach(webProgress => { + webProgress.removeProgressListener( + this, + Ci.nsIWebProgress.NOTIFY_STATE_DOCUMENT + ); + }); + this.webProgresses = null; + } +} + +module.exports = ParentProcessDocumentEventWatcher; diff --git a/devtools/server/actors/resources/platform-messages.js b/devtools/server/actors/resources/platform-messages.js new file mode 100644 index 0000000000..6d9750c0a2 --- /dev/null +++ b/devtools/server/actors/resources/platform-messages.js @@ -0,0 +1,60 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const nsIConsoleListenerWatcher = require("resource://devtools/server/actors/resources/utils/nsi-console-listener-watcher.js"); + +const { + TYPES: { PLATFORM_MESSAGE }, +} = require("resource://devtools/server/actors/resources/index.js"); + +const { + createStringGrip, +} = require("resource://devtools/server/actors/object/utils.js"); + +class PlatformMessageWatcher extends nsIConsoleListenerWatcher { + shouldHandleTarget(targetActor) { + return this.isProcessTarget(targetActor); + } + + /** + * Returns true if the message is considered a platform message, and as a result, should + * be sent to the client. + * + * @param {TargetActor} targetActor + * @param {nsIConsoleMessage} message + */ + shouldHandleMessage(targetActor, message) { + // The listener we use can be called either with a nsIConsoleMessage or as nsIScriptError. + // In this file, we want to ignore nsIScriptError, which are handled by the + // error-messages resource handler (See Bug 1644186). + if (message instanceof Ci.nsIScriptError) { + return false; + } + + // Ignore message that were forwarded from the content process to the parent process, + // since we're getting those directly from the content process. + if (message.isForwardedFromContentProcess) { + return false; + } + + return true; + } + + /** + * Returns an object from the nsIConsoleMessage. + * + * @param {Actor} targetActor + * @param {nsIConsoleMessage} message + */ + buildResource(targetActor, message) { + return { + message: createStringGrip(targetActor, message.message), + timeStamp: message.microSecondTimeStamp / 1000, + resourceType: PLATFORM_MESSAGE, + }; + } +} +module.exports = PlatformMessageWatcher; diff --git a/devtools/server/actors/resources/reflow.js b/devtools/server/actors/resources/reflow.js new file mode 100644 index 0000000000..5be9d6e7b2 --- /dev/null +++ b/devtools/server/actors/resources/reflow.js @@ -0,0 +1,63 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const { + TYPES: { REFLOW }, +} = require("resource://devtools/server/actors/resources/index.js"); +const Targets = require("resource://devtools/server/actors/targets/index.js"); + +const { + getLayoutChangesObserver, + releaseLayoutChangesObserver, +} = require("resource://devtools/server/actors/reflow.js"); + +class ReflowWatcher { + /** + * Start watching for reflows related to a given Target Actor. + * + * @param TargetActor targetActor + * The target actor from which we should observe reflows + * @param Object options + * Dictionary object with following attributes: + * - onAvailable: mandatory function + * This will be called for each resource. + */ + async watch(targetActor, { onAvailable }) { + // Only track reflow for non-ParentProcess FRAME targets + if ( + targetActor.targetType !== Targets.TYPES.FRAME || + targetActor.typeName === "parentProcessTarget" + ) { + return; + } + + this._targetActor = targetActor; + + const onReflows = reflows => { + onAvailable([ + { + resourceType: REFLOW, + reflows, + }, + ]); + }; + + this._observer = getLayoutChangesObserver(targetActor); + this._offReflows = this._observer.on("reflows", onReflows); + this._observer.start(); + } + + destroy() { + releaseLayoutChangesObserver(this._targetActor); + + if (this._offReflows) { + this._offReflows(); + this._offReflows = null; + } + } +} + +module.exports = ReflowWatcher; diff --git a/devtools/server/actors/resources/server-sent-events.js b/devtools/server/actors/resources/server-sent-events.js new file mode 100644 index 0000000000..5b16f8bb9f --- /dev/null +++ b/devtools/server/actors/resources/server-sent-events.js @@ -0,0 +1,135 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + + * License, v. 2.0. If a copy of the MPL was not distributed with this + + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const { + LongStringActor, +} = require("resource://devtools/server/actors/string.js"); + +const { + TYPES: { SERVER_SENT_EVENT }, +} = require("resource://devtools/server/actors/resources/index.js"); + +const eventSourceEventService = Cc[ + "@mozilla.org/eventsourceevent/service;1" +].getService(Ci.nsIEventSourceEventService); + +class ServerSentEventWatcher { + constructor() { + this.windowIds = new Set(); + // Register for backend events. + this.onWindowReady = this.onWindowReady.bind(this); + this.onWindowDestroy = this.onWindowDestroy.bind(this); + } + /** + * Start watching for all server sent events related to a given Target Actor. + * + * @param TargetActor targetActor + * The target actor on which we should observe server sent events. + * @param Object options + * Dictionary object with following attributes: + * - onAvailable: mandatory function + * This will be called for each resource. + */ + watch(targetActor, { onAvailable }) { + this.onAvailable = onAvailable; + this.targetActor = targetActor; + + for (const window of this.targetActor.windows) { + const { innerWindowId } = window.windowGlobalChild; + this.startListening(innerWindowId); + } + + // Listen for subsequent top-level-document reloads/navigations, + // new iframe additions or current iframe reloads/navigation. + this.targetActor.on("window-ready", this.onWindowReady); + this.targetActor.on("window-destroyed", this.onWindowDestroy); + } + + static createResource(messageType, eventParams) { + return { + resourceType: SERVER_SENT_EVENT, + messageType, + ...eventParams, + }; + } + + static prepareFramePayload(targetActor, frame) { + const payload = new LongStringActor(targetActor.conn, frame); + targetActor.manage(payload); + return payload.form(); + } + + onWindowReady({ window }) { + const { innerWindowId } = window.windowGlobalChild; + this.startListening(innerWindowId); + } + + onWindowDestroy({ id }) { + this.stopListening(id); + } + + startListening(innerWindowId) { + if (!this.windowIds.has(innerWindowId)) { + this.windowIds.add(innerWindowId); + eventSourceEventService.addListener(innerWindowId, this); + } + } + + stopListening(innerWindowId) { + if (this.windowIds.has(innerWindowId)) { + this.windowIds.delete(innerWindowId); + // The listener might have already been cleaned up on `window-destroy`. + if (!eventSourceEventService.hasListenerFor(innerWindowId)) { + console.warn( + "Already stopped listening to server sent events for this window." + ); + return; + } + eventSourceEventService.removeListener(innerWindowId, this); + } + } + + destroy() { + // cleanup any other listeners not removed on `window-destroy` + for (const id of this.windowIds) { + this.stopListening(id); + } + this.targetActor.off("window-ready", this.onWindowReady); + this.targetActor.off("window-destroyed", this.onWindowDestroy); + } + + // nsIEventSourceEventService specific functions + eventSourceConnectionOpened(httpChannelId) {} + + eventSourceConnectionClosed(httpChannelId) { + const resource = ServerSentEventWatcher.createResource( + "eventSourceConnectionClosed", + { httpChannelId } + ); + this.onAvailable([resource]); + } + + eventReceived(httpChannelId, eventName, lastEventId, data, retry, timeStamp) { + const payload = ServerSentEventWatcher.prepareFramePayload( + this.targetActor, + data + ); + const resource = ServerSentEventWatcher.createResource("eventReceived", { + httpChannelId, + data: { + payload, + eventName, + lastEventId, + retry, + timeStamp, + }, + }); + + this.onAvailable([resource]); + } +} + +module.exports = ServerSentEventWatcher; diff --git a/devtools/server/actors/resources/sources.js b/devtools/server/actors/resources/sources.js new file mode 100644 index 0000000000..6b3ab1d5e1 --- /dev/null +++ b/devtools/server/actors/resources/sources.js @@ -0,0 +1,100 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const { + TYPES: { SOURCE }, +} = require("resource://devtools/server/actors/resources/index.js"); +const Targets = require("resource://devtools/server/actors/targets/index.js"); + +const { + STATES: THREAD_STATES, +} = require("resource://devtools/server/actors/thread.js"); + +/** + * Start watching for all JS sources related to a given Target Actor. + * This will notify about existing sources, but also the ones created in future. + * + * @param TargetActor targetActor + * The target actor from which we should observe sources + * @param Object options + * Dictionary object with following attributes: + * - onAvailable: mandatory function + * This will be called for each resource. + */ +class SourceWatcher { + constructor() { + this.onNewSource = this.onNewSource.bind(this); + } + + async watch(targetActor, { onAvailable }) { + // When debugging the whole browser, we instantiate both content process and browsing context targets. + // But sources will only be debugged the content process target, even browsing context sources. + if ( + targetActor.sessionContext.type == "all" && + targetActor.targetType === Targets.TYPES.FRAME && + targetActor.typeName != "parentProcessTarget" + ) { + return; + } + + const { threadActor } = targetActor; + this.sourcesManager = targetActor.sourcesManager; + this.onAvailable = onAvailable; + + // Disable `ThreadActor.newSource` RDP event in order to avoid unnecessary traffic + threadActor.disableNewSourceEvents(); + + threadActor.sourcesManager.on("newSource", this.onNewSource); + + // For WindowGlobal, Content process and Service Worker targets, + // the thread actor is fully managed by the server codebase. + // For these targets, the actor should be "attached" (initialized) right away in order + // to start observing the sources. + // + // For regular and shared Workers, the thread actor is still managed by the client. + // The client will call `attach` (bug 1691986) later, which will also resume worker execution. + const isTargetCreation = threadActor.state == THREAD_STATES.DETACHED; + const { targetType } = targetActor; + if ( + isTargetCreation && + targetType != Targets.TYPES.WORKER && + targetType != Targets.TYPES.SHARED_WORKER + ) { + await threadActor.attach({}); + } + + // Before fetching all sources, process existing ones. + // The ThreadActor is already up and running before this code runs + // and have sources already registered and for which newSource event already fired. + onAvailable( + threadActor.sourcesManager.iter().map(s => { + const resource = s.form(); + resource.resourceType = SOURCE; + return resource; + }) + ); + + // Requesting all sources should end up emitting newSource on threadActor.sourcesManager + threadActor.addAllSources(); + } + + /** + * Stop watching for sources + */ + destroy() { + if (this.sourcesManager) { + this.sourcesManager.off("newSource", this.onNewSource); + } + } + + onNewSource(source) { + const resource = source.form(); + resource.resourceType = SOURCE; + this.onAvailable([resource]); + } +} + +module.exports = SourceWatcher; diff --git a/devtools/server/actors/resources/storage-cache.js b/devtools/server/actors/resources/storage-cache.js new file mode 100644 index 0000000000..73a2bba40f --- /dev/null +++ b/devtools/server/actors/resources/storage-cache.js @@ -0,0 +1,22 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + + * License, v. 2.0. If a copy of the MPL was not distributed with this + + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const { + TYPES: { CACHE_STORAGE }, +} = require("resource://devtools/server/actors/resources/index.js"); + +const ContentProcessStorage = require("resource://devtools/server/actors/resources/utils/content-process-storage.js"); +const { + CacheStorageActor, +} = require("resource://devtools/server/actors/resources/storage/cache.js"); + +class CacheWatcher extends ContentProcessStorage { + constructor() { + super(CacheStorageActor, "Cache", CACHE_STORAGE); + } +} + +module.exports = CacheWatcher; diff --git a/devtools/server/actors/resources/storage-cookie.js b/devtools/server/actors/resources/storage-cookie.js new file mode 100644 index 0000000000..8d847a5bf0 --- /dev/null +++ b/devtools/server/actors/resources/storage-cookie.js @@ -0,0 +1,22 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const { + TYPES: { COOKIE }, +} = require("resource://devtools/server/actors/resources/index.js"); + +const ParentProcessStorage = require("resource://devtools/server/actors/resources/utils/parent-process-storage.js"); +const { + CookiesStorageActor, +} = require("resource://devtools/server/actors/resources/storage/cookies.js"); + +class CookiesWatcher extends ParentProcessStorage { + constructor() { + super(CookiesStorageActor, "cookies", COOKIE); + } +} + +module.exports = CookiesWatcher; diff --git a/devtools/server/actors/resources/storage-extension.js b/devtools/server/actors/resources/storage-extension.js new file mode 100644 index 0000000000..daacd40778 --- /dev/null +++ b/devtools/server/actors/resources/storage-extension.js @@ -0,0 +1,30 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const { + TYPES: { EXTENSION_STORAGE }, +} = require("resource://devtools/server/actors/resources/index.js"); + +const ParentProcessStorage = require("resource://devtools/server/actors/resources/utils/parent-process-storage.js"); +const { + ExtensionStorageActor, +} = require("resource://devtools/server/actors/resources/storage/extension-storage.js"); + +class ExtensionStorageWatcher extends ParentProcessStorage { + constructor() { + super(ExtensionStorageActor, "extensionStorage", EXTENSION_STORAGE); + } + async watch(watcherActor, { onAvailable }) { + if (watcherActor.sessionContext.type != "webextension") { + throw new Error( + "EXTENSION_STORAGE should only be listened when debugging a webextension" + ); + } + return super.watch(watcherActor, { onAvailable }); + } +} + +module.exports = ExtensionStorageWatcher; diff --git a/devtools/server/actors/resources/storage-indexed-db.js b/devtools/server/actors/resources/storage-indexed-db.js new file mode 100644 index 0000000000..88ee01a000 --- /dev/null +++ b/devtools/server/actors/resources/storage-indexed-db.js @@ -0,0 +1,22 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const { + TYPES: { INDEXED_DB }, +} = require("resource://devtools/server/actors/resources/index.js"); + +const ParentProcessStorage = require("resource://devtools/server/actors/resources/utils/parent-process-storage.js"); +const { + IndexedDBStorageActor, +} = require("resource://devtools/server/actors/resources/storage/indexed-db.js"); + +class IndexedDBWatcher extends ParentProcessStorage { + constructor() { + super(IndexedDBStorageActor, "indexedDB", INDEXED_DB); + } +} + +module.exports = IndexedDBWatcher; diff --git a/devtools/server/actors/resources/storage-local-storage.js b/devtools/server/actors/resources/storage-local-storage.js new file mode 100644 index 0000000000..54b5ea4d5b --- /dev/null +++ b/devtools/server/actors/resources/storage-local-storage.js @@ -0,0 +1,22 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + + * License, v. 2.0. If a copy of the MPL was not distributed with this + + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const { + TYPES: { LOCAL_STORAGE }, +} = require("resource://devtools/server/actors/resources/index.js"); + +const ContentProcessStorage = require("resource://devtools/server/actors/resources/utils/content-process-storage.js"); +const { + LocalStorageActor, +} = require("resource://devtools/server/actors/resources/storage/local-and-session-storage.js"); + +class LocalStorageWatcher extends ContentProcessStorage { + constructor() { + super(LocalStorageActor, "localStorage", LOCAL_STORAGE); + } +} + +module.exports = LocalStorageWatcher; diff --git a/devtools/server/actors/resources/storage-session-storage.js b/devtools/server/actors/resources/storage-session-storage.js new file mode 100644 index 0000000000..fa980aa9f1 --- /dev/null +++ b/devtools/server/actors/resources/storage-session-storage.js @@ -0,0 +1,22 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + + * License, v. 2.0. If a copy of the MPL was not distributed with this + + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const { + TYPES: { SESSION_STORAGE }, +} = require("resource://devtools/server/actors/resources/index.js"); + +const ContentProcessStorage = require("resource://devtools/server/actors/resources/utils/content-process-storage.js"); +const { + SessionStorageActor, +} = require("resource://devtools/server/actors/resources/storage/local-and-session-storage.js"); + +class SessionStorageWatcher extends ContentProcessStorage { + constructor() { + super(SessionStorageActor, "sessionStorage", SESSION_STORAGE); + } +} + +module.exports = SessionStorageWatcher; diff --git a/devtools/server/actors/resources/storage/cache.js b/devtools/server/actors/resources/storage/cache.js new file mode 100644 index 0000000000..2066d181e0 --- /dev/null +++ b/devtools/server/actors/resources/storage/cache.js @@ -0,0 +1,195 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const { + BaseStorageActor, +} = require("resource://devtools/server/actors/resources/storage/index.js"); + +class CacheStorageActor extends BaseStorageActor { + constructor(storageActor) { + super(storageActor, "Cache"); + } + + async populateStoresForHost(host) { + const storeMap = new Map(); + const caches = await this.getCachesForHost(host); + try { + for (const name of await caches.keys()) { + storeMap.set(name, await caches.open(name)); + } + } catch (ex) { + console.warn(`Failed to enumerate CacheStorage for host ${host}: ${ex}`); + } + this.hostVsStores.set(host, storeMap); + } + + async getCachesForHost(host) { + const win = this.storageActor.getWindowFromHost(host); + if (!win) { + return null; + } + + const principal = win.document.effectiveStoragePrincipal; + + // The first argument tells if you want to get |content| cache or |chrome| + // cache. + // The |content| cache is the cache explicitely named by the web content + // (service worker or web page). + // The |chrome| cache is the cache implicitely cached by the platform, + // hosting the source file of the service worker. + const { CacheStorage } = win; + + if (!CacheStorage) { + return null; + } + + const cache = new CacheStorage("content", principal); + return cache; + } + + form() { + const hosts = {}; + for (const host of this.hosts) { + hosts[host] = this.getNamesForHost(host); + } + + return { + actor: this.actorID, + hosts, + traits: this._getTraits(), + }; + } + + getNamesForHost(host) { + // UI code expect each name to be a JSON string of an array :/ + return [...this.hostVsStores.get(host).keys()].map(a => { + return JSON.stringify([a]); + }); + } + + async getValuesForHost(host, name) { + if (!name) { + // if we get here, we most likely clicked on the refresh button + // which called getStoreObjects, itself calling this method, + // all that, without having selected any particular cache name. + // + // Try to detect if a new cache has been added and notify the client + // asynchronously, via a RDP event. + const previousCaches = [...this.hostVsStores.get(host).keys()]; + await this.populateStoresForHosts(); + const updatedCaches = [...this.hostVsStores.get(host).keys()]; + const newCaches = updatedCaches.filter( + cacheName => !previousCaches.includes(cacheName) + ); + newCaches.forEach(cacheName => + this.onItemUpdated("added", host, [cacheName]) + ); + const removedCaches = previousCaches.filter( + cacheName => !updatedCaches.includes(cacheName) + ); + removedCaches.forEach(cacheName => + this.onItemUpdated("deleted", host, [cacheName]) + ); + return []; + } + // UI is weird and expect a JSON stringified array... and pass it back :/ + name = JSON.parse(name)[0]; + + const cache = this.hostVsStores.get(host).get(name); + const requests = await cache.keys(); + const results = []; + for (const request of requests) { + let response = await cache.match(request); + // Unwrap the response to get access to all its properties if the + // response happen to be 'opaque', when it is a Cross Origin Request. + response = response.cloneUnfiltered(); + results.push(await this.processEntry(request, response)); + } + return results; + } + + async processEntry(request, response) { + return { + url: String(request.url), + status: String(response.statusText), + }; + } + + async getFields() { + return [ + { name: "url", editable: false }, + { name: "status", editable: false }, + ]; + } + + /** + * Given a url, correctly determine its protocol + hostname part. + */ + getSchemaAndHost(url) { + const uri = Services.io.newURI(url); + return uri.scheme + "://" + uri.hostPort; + } + + toStoreObject(item) { + return item; + } + + async removeItem(host, name) { + const cacheMap = this.hostVsStores.get(host); + if (!cacheMap) { + return; + } + + const parsedName = JSON.parse(name); + + if (parsedName.length == 1) { + // Delete the whole Cache object + const [cacheName] = parsedName; + cacheMap.delete(cacheName); + const cacheStorage = await this.getCachesForHost(host); + await cacheStorage.delete(cacheName); + this.onItemUpdated("deleted", host, [cacheName]); + } else if (parsedName.length == 2) { + // Delete one cached request + const [cacheName, url] = parsedName; + const cache = cacheMap.get(cacheName); + if (cache) { + await cache.delete(url); + this.onItemUpdated("deleted", host, [cacheName, url]); + } + } + } + + async removeAll(host, name) { + const cacheMap = this.hostVsStores.get(host); + if (!cacheMap) { + return; + } + + const parsedName = JSON.parse(name); + + // Only a Cache object is a valid object to clear + if (parsedName.length == 1) { + const [cacheName] = parsedName; + const cache = cacheMap.get(cacheName); + if (cache) { + const keys = await cache.keys(); + await Promise.all(keys.map(key => cache.delete(key))); + this.onItemUpdated("cleared", host, [cacheName]); + } + } + } + + /** + * CacheStorage API doesn't support any notifications, we must fake them + */ + onItemUpdated(action, host, path) { + this.storageActor.update(action, "Cache", { + [host]: [JSON.stringify(path)], + }); + } +} +exports.CacheStorageActor = CacheStorageActor; diff --git a/devtools/server/actors/resources/storage/cookies.js b/devtools/server/actors/resources/storage/cookies.js new file mode 100644 index 0000000000..6a7d90414a --- /dev/null +++ b/devtools/server/actors/resources/storage/cookies.js @@ -0,0 +1,559 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const { + BaseStorageActor, + DEFAULT_VALUE, + SEPARATOR_GUID, +} = require("resource://devtools/server/actors/resources/storage/index.js"); +const { + LongStringActor, +} = require("resource://devtools/server/actors/string.js"); + +// "Lax", "Strict" and "None" are special values of the SameSite property +// that should not be translated. +const COOKIE_SAMESITE = { + LAX: "Lax", + STRICT: "Strict", + NONE: "None", +}; + +// MAX_COOKIE_EXPIRY should be 2^63-1, but JavaScript can't handle that +// precision. +const MAX_COOKIE_EXPIRY = Math.pow(2, 62); + +/** + * General helpers + */ +function trimHttpHttpsPort(url) { + const match = url.match(/(.+):\d+$/); + + if (match) { + url = match[1]; + } + if (url.startsWith("http://")) { + return url.substr(7); + } + if (url.startsWith("https://")) { + return url.substr(8); + } + return url; +} + +class CookiesStorageActor extends BaseStorageActor { + constructor(storageActor) { + super(storageActor, "cookies"); + + Services.obs.addObserver(this, "cookie-changed"); + Services.obs.addObserver(this, "private-cookie-changed"); + } + + destroy() { + Services.obs.removeObserver(this, "cookie-changed"); + Services.obs.removeObserver(this, "private-cookie-changed"); + + super.destroy(); + } + + populateStoresForHost(host) { + this.hostVsStores.set(host, new Map()); + + const originAttributes = this.getOriginAttributesFromHost(host); + const cookies = this.getCookiesFromHost(host, originAttributes); + + for (const cookie of cookies) { + if (this.isCookieAtHost(cookie, host)) { + const uniqueKey = + `${cookie.name}${SEPARATOR_GUID}${cookie.host}` + + `${SEPARATOR_GUID}${cookie.path}`; + + this.hostVsStores.get(host).set(uniqueKey, cookie); + } + } + } + + getOriginAttributesFromHost(host) { + const win = this.storageActor.getWindowFromHost(host); + let originAttributes; + if (win) { + originAttributes = + win.document.effectiveStoragePrincipal.originAttributes; + } else { + // If we can't find the window by host, fallback to the top window + // origin attributes. + originAttributes = + this.storageActor.document?.effectiveStoragePrincipal.originAttributes; + } + + return originAttributes; + } + + getCookiesFromHost(host, originAttributes) { + // Local files have no host. + if (host.startsWith("file:///")) { + host = ""; + } + + host = trimHttpHttpsPort(host); + + return Services.cookies.getCookiesFromHost(host, originAttributes); + } + + /** + * Given a cookie object, figure out all the matching hosts from the page that + * the cookie belong to. + */ + getMatchingHosts(cookies) { + if (!cookies) { + return []; + } + if (!cookies.length) { + cookies = [cookies]; + } + const hosts = new Set(); + for (const host of this.hosts) { + for (const cookie of cookies) { + if (this.isCookieAtHost(cookie, host)) { + hosts.add(host); + } + } + } + return [...hosts]; + } + + /** + * Given a cookie object and a host, figure out if the cookie is valid for + * that host. + */ + isCookieAtHost(cookie, host) { + if (cookie.host == null) { + return host == null; + } + + host = trimHttpHttpsPort(host); + + if (cookie.host.startsWith(".")) { + return ("." + host).endsWith(cookie.host); + } + if (cookie.host === "") { + return host.startsWith("file://" + cookie.path); + } + + return cookie.host == host; + } + + toStoreObject(cookie) { + if (!cookie) { + return null; + } + + return { + uniqueKey: + `${cookie.name}${SEPARATOR_GUID}${cookie.host}` + + `${SEPARATOR_GUID}${cookie.path}`, + name: cookie.name, + host: cookie.host || "", + path: cookie.path || "", + + // because expires is in seconds + expires: (cookie.expires || 0) * 1000, + + // because creationTime is in micro seconds + creationTime: cookie.creationTime / 1000, + + size: cookie.name.length + (cookie.value || "").length, + + // - do - + lastAccessed: cookie.lastAccessed / 1000, + value: new LongStringActor(this.conn, cookie.value || ""), + hostOnly: !cookie.isDomain, + isSecure: cookie.isSecure, + isHttpOnly: cookie.isHttpOnly, + sameSite: this.getSameSiteStringFromCookie(cookie), + }; + } + + getSameSiteStringFromCookie(cookie) { + switch (cookie.sameSite) { + case cookie.SAMESITE_LAX: + return COOKIE_SAMESITE.LAX; + case cookie.SAMESITE_STRICT: + return COOKIE_SAMESITE.STRICT; + } + // cookie.SAMESITE_NONE + return COOKIE_SAMESITE.NONE; + } + + /** + * Notification observer for "cookie-change". + * + * @param {(nsICookie|nsICookie[])} cookie - Cookie/s changed. Depending on the action + * this is either null, a single cookie or an array of cookies. + * @param {nsICookieNotification_Action} action - The cookie operation, see + * nsICookieNotification for details. + **/ + onCookieChanged(cookie, action) { + const { + COOKIE_ADDED, + COOKIE_CHANGED, + COOKIE_DELETED, + COOKIES_BATCH_DELETED, + ALL_COOKIES_CLEARED, + } = Ci.nsICookieNotification; + + const hosts = this.getMatchingHosts(cookie); + if (!hosts.length) { + return; + } + + const data = {}; + + switch (action) { + case COOKIE_ADDED: + case COOKIE_CHANGED: + if (hosts.length) { + for (const host of hosts) { + const uniqueKey = + `${cookie.name}${SEPARATOR_GUID}${cookie.host}` + + `${SEPARATOR_GUID}${cookie.path}`; + + this.hostVsStores.get(host).set(uniqueKey, cookie); + data[host] = [uniqueKey]; + } + const actionStr = action == COOKIE_ADDED ? "added" : "changed"; + this.storageActor.update(actionStr, "cookies", data); + } + break; + + case COOKIE_DELETED: + if (hosts.length) { + for (const host of hosts) { + const uniqueKey = + `${cookie.name}${SEPARATOR_GUID}${cookie.host}` + + `${SEPARATOR_GUID}${cookie.path}`; + + this.hostVsStores.get(host).delete(uniqueKey); + data[host] = [uniqueKey]; + } + this.storageActor.update("deleted", "cookies", data); + } + break; + + case COOKIES_BATCH_DELETED: + if (hosts.length) { + for (const host of hosts) { + const stores = []; + // For COOKIES_BATCH_DELETED cookie is an array. + for (const batchCookie of cookie) { + const uniqueKey = + `${batchCookie.name}${SEPARATOR_GUID}${batchCookie.host}` + + `${SEPARATOR_GUID}${batchCookie.path}`; + + this.hostVsStores.get(host).delete(uniqueKey); + stores.push(uniqueKey); + } + data[host] = stores; + } + this.storageActor.update("deleted", "cookies", data); + } + break; + + case ALL_COOKIES_CLEARED: + if (hosts.length) { + for (const host of hosts) { + data[host] = []; + } + this.storageActor.update("cleared", "cookies", data); + } + break; + } + } + + async getFields() { + return [ + { name: "uniqueKey", editable: false, private: true }, + { name: "name", editable: true, hidden: false }, + { name: "value", editable: true, hidden: false }, + { name: "host", editable: true, hidden: false }, + { name: "path", editable: true, hidden: false }, + { name: "expires", editable: true, hidden: false }, + { name: "size", editable: false, hidden: false }, + { name: "isHttpOnly", editable: true, hidden: false }, + { name: "isSecure", editable: true, hidden: false }, + { name: "sameSite", editable: false, hidden: false }, + { name: "lastAccessed", editable: false, hidden: false }, + { name: "creationTime", editable: false, hidden: true }, + { name: "hostOnly", editable: false, hidden: true }, + ]; + } + + /** + * Pass the editItem command from the content to the chrome process. + * + * @param {Object} data + * See editCookie() for format details. + */ + async editItem(data) { + data.originAttributes = this.getOriginAttributesFromHost(data.host); + this.editCookie(data); + } + + async addItem(guid, host) { + const window = this.storageActor.getWindowFromHost(host); + const principal = window.document.effectiveStoragePrincipal; + this.addCookie(guid, principal); + } + + async removeItem(host, name) { + const originAttributes = this.getOriginAttributesFromHost(host); + this.removeCookie(host, name, originAttributes); + } + + async removeAll(host, domain) { + const originAttributes = this.getOriginAttributesFromHost(host); + this.removeAllCookies(host, domain, originAttributes); + } + + async removeAllSessionCookies(host, domain) { + const originAttributes = this.getOriginAttributesFromHost(host); + this._removeCookies(host, { domain, originAttributes, session: true }); + } + + addCookie(guid, principal) { + // Set expiry time for cookie 1 day into the future + // NOTE: Services.cookies.add expects the time in seconds. + const ONE_DAY_IN_SECONDS = 60 * 60 * 24; + const time = Math.floor(Date.now() / 1000); + const expiry = time + ONE_DAY_IN_SECONDS; + + // principal throws an error when we try to access principal.host if it + // does not exist (which happens at about: pages). + // We check for asciiHost instead, which is always present, and has a + // value of "" when the host is not available. + const domain = principal.asciiHost ? principal.host : principal.baseDomain; + + Services.cookies.add( + domain, + "/", + guid, // name + DEFAULT_VALUE, // value + false, // isSecure + false, // isHttpOnly, + false, // isSession, + expiry, // expires, + principal.originAttributes, // originAttributes + Ci.nsICookie.SAMESITE_LAX, // sameSite + principal.scheme === "https" // schemeMap + ? Ci.nsICookie.SCHEME_HTTPS + : Ci.nsICookie.SCHEME_HTTP + ); + } + + /** + * Apply the results of a cookie edit. + * + * @param {Object} data + * An object in the following format: + * { + * host: "http://www.mozilla.org", + * field: "value", + * editCookie: "name", + * oldValue: "%7BHello%7D", + * newValue: "%7BHelloo%7D", + * items: { + * name: "optimizelyBuckets", + * path: "/", + * host: ".mozilla.org", + * expires: "Mon, 02 Jun 2025 12:37:37 GMT", + * creationTime: "Tue, 18 Nov 2014 16:21:18 GMT", + * lastAccessed: "Wed, 17 Feb 2016 10:06:23 GMT", + * value: "%7BHelloo%7D", + * isDomain: "true", + * isSecure: "false", + * isHttpOnly: "false" + * } + * } + */ + // eslint-disable-next-line complexity + editCookie(data) { + let { field, oldValue, newValue } = data; + const origName = field === "name" ? oldValue : data.items.name; + const origHost = field === "host" ? oldValue : data.items.host; + const origPath = field === "path" ? oldValue : data.items.path; + let cookie = null; + + const cookies = Services.cookies.getCookiesFromHost( + origHost, + data.originAttributes || {} + ); + for (const nsiCookie of cookies) { + if ( + nsiCookie.name === origName && + nsiCookie.host === origHost && + nsiCookie.path === origPath + ) { + cookie = { + host: nsiCookie.host, + path: nsiCookie.path, + name: nsiCookie.name, + value: nsiCookie.value, + isSecure: nsiCookie.isSecure, + isHttpOnly: nsiCookie.isHttpOnly, + isSession: nsiCookie.isSession, + expires: nsiCookie.expires, + originAttributes: nsiCookie.originAttributes, + schemeMap: nsiCookie.schemeMap, + }; + break; + } + } + + if (!cookie) { + return; + } + + // If the date is expired set it for 10 seconds in the future. + const now = new Date(); + if (!cookie.isSession && cookie.expires * 1000 <= now) { + const tenSecondsFromNow = (now.getTime() + 10 * 1000) / 1000; + + cookie.expires = tenSecondsFromNow; + } + + switch (field) { + case "isSecure": + case "isHttpOnly": + case "isSession": + newValue = newValue === "true"; + break; + + case "expires": + newValue = Date.parse(newValue) / 1000; + + if (isNaN(newValue)) { + newValue = MAX_COOKIE_EXPIRY; + } + break; + + case "host": + case "name": + case "path": + // Remove the edited cookie. + Services.cookies.remove( + origHost, + origName, + origPath, + cookie.originAttributes + ); + break; + } + + // Apply changes. + cookie[field] = newValue; + + // cookie.isSession is not always set correctly on session cookies so we + // need to trust cookie.expires instead. + cookie.isSession = !cookie.expires; + + // Add the edited cookie. + Services.cookies.add( + cookie.host, + cookie.path, + cookie.name, + cookie.value, + cookie.isSecure, + cookie.isHttpOnly, + cookie.isSession, + cookie.isSession ? MAX_COOKIE_EXPIRY : cookie.expires, + cookie.originAttributes, + cookie.sameSite, + cookie.schemeMap + ); + } + + _removeCookies(host, opts = {}) { + // We use a uniqueId to emulate compound keys for cookies. We need to + // extract the cookie name to remove the correct cookie. + if (opts.name) { + const split = opts.name.split(SEPARATOR_GUID); + + opts.name = split[0]; + opts.path = split[2]; + } + + host = trimHttpHttpsPort(host); + + function hostMatches(cookieHost, matchHost) { + if (cookieHost == null) { + return matchHost == null; + } + if (cookieHost.startsWith(".")) { + return ("." + matchHost).endsWith(cookieHost); + } + return cookieHost == host; + } + + const cookies = Services.cookies.getCookiesFromHost( + host, + opts.originAttributes || {} + ); + for (const cookie of cookies) { + if ( + hostMatches(cookie.host, host) && + (!opts.name || cookie.name === opts.name) && + (!opts.domain || cookie.host === opts.domain) && + (!opts.path || cookie.path === opts.path) && + (!opts.session || (!cookie.expires && !cookie.maxAge)) + ) { + Services.cookies.remove( + cookie.host, + cookie.name, + cookie.path, + cookie.originAttributes + ); + } + } + } + + removeCookie(host, name, originAttributes) { + if (name !== undefined) { + this._removeCookies(host, { name, originAttributes }); + } + } + + removeAllCookies(host, domain, originAttributes) { + this._removeCookies(host, { domain, originAttributes }); + } + + observe(subject, topic) { + if ( + !subject || + (topic != "cookie-changed" && topic != "private-cookie-changed") || + !this.storageActor || + !this.storageActor.windows + ) { + return; + } + + const notification = subject.QueryInterface(Ci.nsICookieNotification); + let cookie; + if (notification.action == Ci.nsICookieNotification.COOKIES_BATCH_DELETED) { + // Extract the batch deleted cookies from nsIArray. + const cookiesNoInterface = + notification.batchDeletedCookies.QueryInterface(Ci.nsIArray); + cookie = []; + for (let i = 0; i < cookiesNoInterface.length; i++) { + cookie.push(cookiesNoInterface.queryElementAt(i, Ci.nsICookie)); + } + } else if (notification.cookie) { + // Otherwise, get the single cookie affected by the operation. + cookie = notification.cookie.QueryInterface(Ci.nsICookie); + } + + this.onCookieChanged(cookie, notification.action); + } +} +exports.CookiesStorageActor = CookiesStorageActor; diff --git a/devtools/server/actors/resources/storage/extension-storage.js b/devtools/server/actors/resources/storage/extension-storage.js new file mode 100644 index 0000000000..d14d3320c7 --- /dev/null +++ b/devtools/server/actors/resources/storage/extension-storage.js @@ -0,0 +1,491 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const { + BaseStorageActor, +} = require("resource://devtools/server/actors/resources/storage/index.js"); +const { + parseItemValue, +} = require("resource://devtools/shared/storage/utils.js"); +const { + LongStringActor, +} = require("resource://devtools/server/actors/string.js"); +// Use loadInDevToolsLoader: false for these extension modules, because these +// are singletons with shared state, and we must not create a new instance if a +// dedicated loader was used to load this module. +loader.lazyGetter(this, "ExtensionParent", () => { + return ChromeUtils.importESModule( + "resource://gre/modules/ExtensionParent.sys.mjs", + { loadInDevToolsLoader: false } + ).ExtensionParent; +}); +loader.lazyGetter(this, "ExtensionProcessScript", () => { + return ChromeUtils.importESModule( + "resource://gre/modules/ExtensionProcessScript.sys.mjs", + { loadInDevToolsLoader: false } + ).ExtensionProcessScript; +}); +loader.lazyGetter(this, "ExtensionStorageIDB", () => { + return ChromeUtils.importESModule( + "resource://gre/modules/ExtensionStorageIDB.sys.mjs", + { loadInDevToolsLoader: false } + ).ExtensionStorageIDB; +}); + +/** + * The Extension Storage actor. + */ +class ExtensionStorageActor extends BaseStorageActor { + constructor(storageActor) { + super(storageActor, "extensionStorage"); + + this.addonId = this.storageActor.parentActor.addonId; + + // Retrieve the base moz-extension url for the extension + // (and also remove the final '/' from it). + this.extensionHostURL = this.getExtensionPolicy().getURL().slice(0, -1); + + // Map<host, ExtensionStorageIDB db connection> + // Bug 1542038, 1542039: Each storage area will need its own + // dbConnectionForHost, as they each have different storage backends. + // Anywhere dbConnectionForHost is used, we need to know the storage + // area to access the correct database. + this.dbConnectionForHost = new Map(); + + this.onExtensionStartup = this.onExtensionStartup.bind(this); + + this.onStorageChange = this.onStorageChange.bind(this); + } + + getExtensionPolicy() { + return WebExtensionPolicy.getByID(this.addonId); + } + + destroy() { + ExtensionStorageIDB.removeOnChangedListener( + this.addonId, + this.onStorageChange + ); + ExtensionParent.apiManager.off("startup", this.onExtensionStartup); + + super.destroy(); + } + + /** + * We need to override this method as we ignore BaseStorageActor's hosts + * and only care about the extension host. + */ + async populateStoresForHosts() { + // Ensure the actor's target is an extension and it is enabled + if (!this.addonId || !this.getExtensionPolicy()) { + return; + } + + // Subscribe a listener for event notifications from the WE storage API when + // storage local data has been changed by the extension, and keep track of the + // listener to remove it when the debugger is being disconnected. + ExtensionStorageIDB.addOnChangedListener( + this.addonId, + this.onStorageChange + ); + + try { + // Make sure the extension storage APIs have been loaded, + // otherwise the DevTools storage panel would not be updated + // automatically when the extension storage data is being changed + // if the parent ext-storage.js module wasn't already loaded + // (See Bug 1802929). + const { extension } = WebExtensionPolicy.getByID(this.addonId); + await extension.apiManager.asyncGetAPI("storage", extension); + // Also watch for addon reload in order to also do that + // on next addon startup, otherwise we may also miss updates + ExtensionParent.apiManager.on("startup", this.onExtensionStartup); + } catch (e) { + console.error( + "Exception while trying to initialize webext storage API", + e + ); + } + + await this.populateStoresForHost(this.extensionHostURL); + } + + /** + * AddonManager listener used to force instantiating storage API + * implementation in the parent process so that it forward content process + * messages to ExtensionStorageIDB. + * + * Without this, we may miss storage updated after the addon reload. + */ + async onExtensionStartup(_evtName, extension) { + if (extension.id != this.addonId) { + return; + } + await extension.apiManager.asyncGetAPI("storage", extension); + } + + /** + * This method asynchronously reads the storage data for the target extension + * and caches this data into this.hostVsStores. + * @param {String} host - the hostname for the extension + */ + async populateStoresForHost(host) { + if (host !== this.extensionHostURL) { + return; + } + + const extension = ExtensionProcessScript.getExtensionChild(this.addonId); + if (!extension || !extension.hasPermission("storage")) { + return; + } + + // Make sure storeMap is defined and set in this.hostVsStores before subscribing + // a storage onChanged listener in the parent process + const storeMap = new Map(); + this.hostVsStores.set(host, storeMap); + + const storagePrincipal = await this.getStoragePrincipal(); + + if (!storagePrincipal) { + // This could happen if the extension fails to be migrated to the + // IndexedDB backend + return; + } + + const db = await ExtensionStorageIDB.open(storagePrincipal); + this.dbConnectionForHost.set(host, db); + const data = await db.get(); + + for (const [key, value] of Object.entries(data)) { + storeMap.set(key, value); + } + + if (this.storageActor.parentActor.fallbackWindow) { + // Show the storage actor in the add-on storage inspector even when there + // is no extension page currently open + // This strategy may need to change depending on the outcome of Bug 1597900 + const storageData = {}; + storageData[host] = this.getNamesForHost(host); + this.storageActor.update("added", this.typeName, storageData); + } + } + /** + * This fires when the extension changes storage data while the storage + * inspector is open. Ensures this.hostVsStores stays up-to-date and + * passes the changes on to update the client. + */ + onStorageChange(changes) { + const host = this.extensionHostURL; + const storeMap = this.hostVsStores.get(host); + + function isStructuredCloneHolder(value) { + return ( + value && + typeof value === "object" && + Cu.getClassName(value, true) === "StructuredCloneHolder" + ); + } + + for (const key in changes) { + const storageChange = changes[key]; + let { newValue, oldValue } = storageChange; + if (isStructuredCloneHolder(newValue)) { + newValue = newValue.deserialize(this); + } + if (isStructuredCloneHolder(oldValue)) { + oldValue = oldValue.deserialize(this); + } + + let action; + if (typeof newValue === "undefined") { + action = "deleted"; + storeMap.delete(key); + } else if (typeof oldValue === "undefined") { + action = "added"; + storeMap.set(key, newValue); + } else { + action = "changed"; + storeMap.set(key, newValue); + } + + this.storageActor.update(action, this.typeName, { [host]: [key] }); + } + } + + async getStoragePrincipal() { + const { extension } = this.getExtensionPolicy(); + const { backendEnabled, storagePrincipal } = + await ExtensionStorageIDB.selectBackend({ extension }); + + if (!backendEnabled) { + // IDB backend disabled; give up. + return null; + } + + // Received as a StructuredCloneHolder, so we need to deserialize + return storagePrincipal.deserialize(this, true); + } + + getValuesForHost(host, name) { + const result = []; + + if (!this.hostVsStores.has(host)) { + return result; + } + + if (name) { + return [{ name, value: this.hostVsStores.get(host).get(name) }]; + } + + for (const [key, value] of Array.from( + this.hostVsStores.get(host).entries() + )) { + result.push({ name: key, value }); + } + return result; + } + + /** + * Converts a storage item to an "extensionobject" as defined in + * devtools/shared/specs/storage.js. Behavior largely mirrors the "indexedDB" storage actor, + * except where it would throw an unhandled error (i.e. for a `BigInt` or `undefined` + * `item.value`). + * @param {Object} item - The storage item to convert + * @param {String} item.name - The storage item key + * @param {*} item.value - The storage item value + * @return {extensionobject} + */ + toStoreObject(item) { + if (!item) { + return null; + } + + let { name, value } = item; + const isValueEditable = extensionStorageHelpers.isEditable(value); + + // `JSON.stringify()` throws for `BigInt`, adds extra quotes to strings and `Date` strings, + // and doesn't modify `undefined`. + switch (typeof value) { + case "bigint": + value = `${value.toString()}n`; + break; + case "string": + break; + case "undefined": + value = "undefined"; + break; + default: + value = JSON.stringify(value); + if ( + // can't use `instanceof` across frame boundaries + Object.prototype.toString.call(item.value) === "[object Date]" + ) { + value = JSON.parse(value); + } + } + + return { + name, + value: new LongStringActor(this.conn, value), + area: "local", // Bug 1542038, 1542039: set the correct storage area + isValueEditable, + }; + } + + getFields() { + return [ + { name: "name", editable: false }, + { name: "value", editable: true }, + { name: "area", editable: false }, + { name: "isValueEditable", editable: false, private: true }, + ]; + } + + onItemUpdated(action, host, names) { + this.storageActor.update(action, this.typeName, { + [host]: names, + }); + } + + async editItem({ host, field, items, oldValue }) { + const db = this.dbConnectionForHost.get(host); + if (!db) { + return; + } + + const { name, value } = items; + + let parsedValue = parseItemValue(value); + if (parsedValue === value) { + const { typesFromString } = extensionStorageHelpers; + for (const { test, parse } of Object.values(typesFromString)) { + if (test(value)) { + parsedValue = parse(value); + break; + } + } + } + const changes = await db.set({ [name]: parsedValue }); + this.fireOnChangedExtensionEvent(host, changes); + + this.onItemUpdated("changed", host, [name]); + } + + async removeItem(host, name) { + const db = this.dbConnectionForHost.get(host); + if (!db) { + return; + } + + const changes = await db.remove(name); + this.fireOnChangedExtensionEvent(host, changes); + + this.onItemUpdated("deleted", host, [name]); + } + + async removeAll(host) { + const db = this.dbConnectionForHost.get(host); + if (!db) { + return; + } + + const changes = await db.clear(); + this.fireOnChangedExtensionEvent(host, changes); + + this.onItemUpdated("cleared", host, []); + } + + /** + * Let the extension know that storage data has been changed by the user from + * the storage inspector. + */ + fireOnChangedExtensionEvent(host, changes) { + // Bug 1542038, 1542039: Which message to send depends on the storage area + const uuid = new URL(host).host; + Services.cpmm.sendAsyncMessage( + `Extension:StorageLocalOnChanged:${uuid}`, + changes + ); + } +} +exports.ExtensionStorageActor = ExtensionStorageActor; + +const extensionStorageHelpers = { + /** + * Editing is supported only for serializable types. Examples of unserializable + * types include Map, Set and ArrayBuffer. + */ + isEditable(value) { + // Bug 1542038: the managed storage area is never editable + for (const { test } of Object.values(this.supportedTypes)) { + if (test(value)) { + return true; + } + } + return false; + }, + isPrimitive(value) { + const primitiveValueTypes = ["string", "number", "boolean"]; + return primitiveValueTypes.includes(typeof value) || value === null; + }, + isObjectLiteral(value) { + return ( + value && + typeof value === "object" && + Cu.getClassName(value, true) === "Object" + ); + }, + // Nested arrays or object literals are only editable 2 levels deep + isArrayOrObjectLiteralEditable(obj) { + const topLevelValuesArr = Array.isArray(obj) ? obj : Object.values(obj); + if ( + topLevelValuesArr.some( + value => + !this.isPrimitive(value) && + !Array.isArray(value) && + !this.isObjectLiteral(value) + ) + ) { + // At least one value is too complex to parse + return false; + } + const arrayOrObjects = topLevelValuesArr.filter( + value => Array.isArray(value) || this.isObjectLiteral(value) + ); + if (arrayOrObjects.length === 0) { + // All top level values are primitives + return true; + } + + // One or more top level values was an array or object literal. + // All of these top level values must themselves have only primitive values + // for the object to be editable + for (const nestedObj of arrayOrObjects) { + const secondLevelValuesArr = Array.isArray(nestedObj) + ? nestedObj + : Object.values(nestedObj); + if (secondLevelValuesArr.some(value => !this.isPrimitive(value))) { + return false; + } + } + return true; + }, + typesFromString: { + // Helper methods to parse string values in editItem + jsonifiable: { + test(str) { + try { + JSON.parse(str); + } catch (e) { + return false; + } + return true; + }, + parse(str) { + return JSON.parse(str); + }, + }, + }, + supportedTypes: { + // Helper methods to determine the value type of an item in isEditable + array: { + test(value) { + if (Array.isArray(value)) { + return extensionStorageHelpers.isArrayOrObjectLiteralEditable(value); + } + return false; + }, + }, + boolean: { + test(value) { + return typeof value === "boolean"; + }, + }, + null: { + test(value) { + return value === null; + }, + }, + number: { + test(value) { + return typeof value === "number"; + }, + }, + object: { + test(value) { + if (extensionStorageHelpers.isObjectLiteral(value)) { + return extensionStorageHelpers.isArrayOrObjectLiteralEditable(value); + } + return false; + }, + }, + string: { + test(value) { + return typeof value === "string"; + }, + }, + }, +}; diff --git a/devtools/server/actors/resources/storage/index.js b/devtools/server/actors/resources/storage/index.js new file mode 100644 index 0000000000..147f9056ea --- /dev/null +++ b/devtools/server/actors/resources/storage/index.js @@ -0,0 +1,404 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const { Actor } = require("resource://devtools/shared/protocol.js"); +const specs = require("resource://devtools/shared/specs/storage.js"); + +loader.lazyRequireGetter( + this, + "naturalSortCaseInsensitive", + "resource://devtools/shared/natural-sort.js", + true +); + +// Maximum number of cookies/local storage key-value-pairs that can be sent +// over the wire to the client in one request. +const MAX_STORE_OBJECT_COUNT = 50; +exports.MAX_STORE_OBJECT_COUNT = MAX_STORE_OBJECT_COUNT; + +const DEFAULT_VALUE = "value"; +exports.DEFAULT_VALUE = DEFAULT_VALUE; + +// GUID to be used as a separator in compound keys. This must match the same +// constant in devtools/client/storage/ui.js, +// devtools/client/storage/test/head.js and +// devtools/server/tests/browser/head.js +const SEPARATOR_GUID = "{9d414cc5-8319-0a04-0586-c0a6ae01670a}"; +exports.SEPARATOR_GUID = SEPARATOR_GUID; + +class BaseStorageActor extends Actor { + /** + * Base class with the common methods required by all storage actors. + * + * This base class is missing a couple of required methods that should be + * implemented seperately for each actor. They are namely: + * - observe : Method which gets triggered on the notification of the watched + * topic. + * - getNamesForHost : Given a host, get list of all known store names. + * - getValuesForHost : Given a host (and optionally a name) get all known + * store objects. + * - toStoreObject : Given a store object, convert it to the required format + * so that it can be transferred over wire. + * - populateStoresForHost : Given a host, populate the map of all store + * objects for it + * - getFields: Given a subType(optional), get an array of objects containing + * column field info. The info includes, + * "name" is name of colume key. + * "editable" is 1 means editable field; 0 means uneditable. + * + * @param {string} typeName + * The typeName of the actor. + */ + constructor(storageActor, typeName) { + super(storageActor.conn, specs.childSpecs[typeName]); + + this.storageActor = storageActor; + + // Map keyed by host name whose values are nested Maps. + // Nested maps are keyed by store names and values are store values. + // Store values are specific to each sub class. + // Map(host name => stores <Map(name => values )>) + // Map(string => stores <Map(string => any )>) + this.hostVsStores = new Map(); + + this.onWindowReady = this.onWindowReady.bind(this); + this.onWindowDestroyed = this.onWindowDestroyed.bind(this); + this.storageActor.on("window-ready", this.onWindowReady); + this.storageActor.on("window-destroyed", this.onWindowDestroyed); + } + + destroy() { + if (!this.storageActor) { + return; + } + + this.storageActor.off("window-ready", this.onWindowReady); + this.storageActor.off("window-destroyed", this.onWindowDestroyed); + + this.hostVsStores.clear(); + + super.destroy(); + + this.storageActor = null; + } + + /** + * Returns a list of currently known hosts for the target window. This list + * contains unique hosts from the window + all inner windows. If + * this._internalHosts is defined then these will also be added to the list. + */ + get hosts() { + const hosts = new Set(); + for (const { location } of this.storageActor.windows) { + const host = this.getHostName(location); + + if (host) { + hosts.add(host); + } + } + if (this._internalHosts) { + for (const host of this._internalHosts) { + hosts.add(host); + } + } + return hosts; + } + + /** + * Returns all the windows present on the page. Includes main window + inner + * iframe windows. + */ + get windows() { + return this.storageActor.windows; + } + + /** + * Converts the window.location object into a URL (e.g. http://domain.com). + */ + getHostName(location) { + if (!location) { + // Debugging a legacy Firefox extension... no hostname available and no + // storage possible. + return null; + } + + if (this.storageActor.getHostName) { + return this.storageActor.getHostName(location); + } + + switch (location.protocol) { + case "about:": + return `${location.protocol}${location.pathname}`; + case "chrome:": + // chrome: URLs do not support storage of any type. + return null; + case "data:": + // data: URLs do not support storage of any type. + return null; + case "file:": + return `${location.protocol}//${location.pathname}`; + case "javascript:": + return location.href; + case "moz-extension:": + return location.origin; + case "resource:": + return `${location.origin}${location.pathname}`; + default: + // http: or unknown protocol. + return `${location.protocol}//${location.host}`; + } + } + + /** + * Populates a map of known hosts vs a map of stores vs value. + */ + async populateStoresForHosts() { + for (const host of this.hosts) { + await this.populateStoresForHost(host); + } + } + + getNamesForHost(host) { + return [...this.hostVsStores.get(host).keys()]; + } + + getValuesForHost(host, name) { + if (name) { + return [this.hostVsStores.get(host).get(name)]; + } + return [...this.hostVsStores.get(host).values()]; + } + + getObjectsSize(host, names) { + return names.length; + } + + /** + * When a new window is added to the page. This generally means that a new + * iframe is created, or the current window is completely reloaded. + * + * @param {window} window + * The window which was added. + */ + async onWindowReady(window) { + if (!this.hostVsStores) { + return; + } + const host = this.getHostName(window.location); + if (host && !this.hostVsStores.has(host)) { + await this.populateStoresForHost(host, window); + if (!this.storageActor) { + // The actor might be destroyed during populateStoresForHost. + return; + } + + const data = {}; + data[host] = this.getNamesForHost(host); + this.storageActor.update("added", this.typeName, data); + } + } + + /** + * When a window is removed from the page. This generally means that an + * iframe was removed, or the current window reload is triggered. + * + * @param {window} window + * The window which was removed. + * @param {Object} options + * @param {Boolean} options.dontCheckHost + * If set to true, the function won't check if the host still is in this.hosts. + * This is helpful in the case of the StorageActorMock, as the `hosts` getter + * uses its `windows` getter, and at this point in time the window which is + * going to be destroyed still exists. + */ + onWindowDestroyed(window, { dontCheckHost } = {}) { + if (!this.hostVsStores) { + return; + } + if (!window.location) { + // Nothing can be done if location object is null + return; + } + const host = this.getHostName(window.location); + if (host && (!this.hosts.has(host) || dontCheckHost)) { + this.hostVsStores.delete(host); + const data = {}; + data[host] = []; + this.storageActor.update("deleted", this.typeName, data); + } + } + + form() { + const hosts = {}; + for (const host of this.hosts) { + hosts[host] = []; + } + + return { + actor: this.actorID, + hosts, + traits: this._getTraits(), + }; + } + + // Share getTraits for child classes overriding form() + _getTraits() { + return { + // The supportsXXX traits are not related to backward compatibility + // Different storage actor types implement different APIs, the traits + // help the client to know what is supported or not. + supportsAddItem: typeof this.addItem === "function", + // Note: supportsRemoveItem and supportsRemoveAll are always defined + // for all actors. See Bug 1655001. + supportsRemoveItem: typeof this.removeItem === "function", + supportsRemoveAll: typeof this.removeAll === "function", + supportsRemoveAllSessionCookies: + typeof this.removeAllSessionCookies === "function", + }; + } + + /** + * Returns a list of requested store objects. Maximum values returned are + * MAX_STORE_OBJECT_COUNT. This method returns paginated values whose + * starting index and total size can be controlled via the options object + * + * @param {string} host + * The host name for which the store values are required. + * @param {array:string} names + * Array containing the names of required store objects. Empty if all + * items are required. + * @param {object} options + * Additional options for the request containing following + * properties: + * - offset {number} : The begin index of the returned array amongst + * the total values + * - size {number} : The number of values required. + * - sortOn {string} : The values should be sorted on this property. + * - index {string} : In case of indexed db, the IDBIndex to be used + * for fetching the values. + * - sessionString {string} : Client-side value of storage-expires-session + * l10n string. Since this function can be called from both + * the client and the server, and given that client and + * server might have different locales, we can't compute + * the localized string directly from here. + * @return {object} An object containing following properties: + * - offset - The actual offset of the returned array. This might + * be different from the requested offset if that was + * invalid + * - total - The total number of entries possible. + * - data - The requested values. + */ + async getStoreObjects(host, names, options = {}) { + const offset = options.offset || 0; + let size = options.size || MAX_STORE_OBJECT_COUNT; + if (size > MAX_STORE_OBJECT_COUNT) { + size = MAX_STORE_OBJECT_COUNT; + } + const sortOn = options.sortOn || "name"; + + const toReturn = { + offset, + total: 0, + data: [], + }; + + let principal = null; + if (this.typeName === "indexedDB") { + // We only acquire principal when the type of the storage is indexedDB + // because the principal only matters the indexedDB. + const win = this.storageActor.getWindowFromHost(host); + principal = this.getPrincipal(win); + } + + if (names) { + for (const name of names) { + const values = await this.getValuesForHost( + host, + name, + options, + this.hostVsStores, + principal + ); + + const { result, objectStores } = values; + + if (result && typeof result.objectsSize !== "undefined") { + for (const { key, count } of result.objectsSize) { + this.objectsSize[key] = count; + } + } + + if (result) { + toReturn.data.push(...result.data); + } else if (objectStores) { + toReturn.data.push(...objectStores); + } else { + toReturn.data.push(...values); + } + } + + if (this.typeName === "Cache") { + // Cache storage contains several items per name but misses a custom + // `getObjectsSize` implementation, as implemented for IndexedDB. + // See Bug 1745242. + toReturn.total = toReturn.data.length; + } else { + toReturn.total = this.getObjectsSize(host, names, options); + } + } else { + let obj = await this.getValuesForHost( + host, + undefined, + undefined, + this.hostVsStores, + principal + ); + if (obj.dbs) { + obj = obj.dbs; + } + + toReturn.total = obj.length; + toReturn.data = obj; + } + + if (offset > toReturn.total) { + // In this case, toReturn.data is an empty array. + toReturn.offset = toReturn.total; + toReturn.data = []; + } else { + // We need to use natural sort before slicing. + const sorted = toReturn.data.sort((a, b) => { + return naturalSortCaseInsensitive( + a[sortOn], + b[sortOn], + options.sessionString + ); + }); + let sliced; + if (this.typeName === "indexedDB") { + // indexedDB's getValuesForHost never returns *all* values available but only + // a slice, starting at the expected offset. Therefore the result is already + // sliced as expected. + sliced = sorted; + } else { + sliced = sorted.slice(offset, offset + size); + } + toReturn.data = sliced.map(a => this.toStoreObject(a)); + } + + return toReturn; + } + + getPrincipal(win) { + if (win) { + return win.document.effectiveStoragePrincipal; + } + // We are running in the browser toolbox and viewing system DBs so we + // need to use system principal. + return Cc["@mozilla.org/systemprincipal;1"].createInstance(Ci.nsIPrincipal); + } +} +exports.BaseStorageActor = BaseStorageActor; diff --git a/devtools/server/actors/resources/storage/indexed-db.js b/devtools/server/actors/resources/storage/indexed-db.js new file mode 100644 index 0000000000..8ded705c4f --- /dev/null +++ b/devtools/server/actors/resources/storage/indexed-db.js @@ -0,0 +1,984 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const { + BaseStorageActor, + MAX_STORE_OBJECT_COUNT, + SEPARATOR_GUID, +} = require("resource://devtools/server/actors/resources/storage/index.js"); +const { + LongStringActor, +} = require("resource://devtools/server/actors/string.js"); +// We give this a funny name to avoid confusion with the global +// indexedDB. +loader.lazyGetter(this, "indexedDBForStorage", () => { + // On xpcshell, we can't instantiate indexedDB without crashing + try { + const sandbox = Cu.Sandbox( + Components.Constructor( + "@mozilla.org/systemprincipal;1", + "nsIPrincipal" + )(), + { wantGlobalProperties: ["indexedDB"] } + ); + return sandbox.indexedDB; + } catch (e) { + return {}; + } +}); +const lazy = {}; +ChromeUtils.defineESModuleGetters(lazy, { + Sqlite: "resource://gre/modules/Sqlite.sys.mjs", +}); + +/** + * An async method equivalent to setTimeout but using Promises + * + * @param {number} time + * The wait time in milliseconds. + */ +function sleep(time) { + return new Promise(resolve => { + setTimeout(() => { + resolve(null); + }, time); + }); +} + +const SAFE_HOSTS_PREFIXES_REGEX = /^(about\+|https?\+|file\+|moz-extension\+)/; + +// A RegExp for characters that cannot appear in a file/directory name. This is +// used to sanitize the host name for indexed db to lookup whether the file is +// present in <profileDir>/storage/default/ location +const illegalFileNameCharacters = [ + "[", + // Control characters \001 to \036 + "\\x00-\\x24", + // Special characters + '/:*?\\"<>|\\\\', + "]", +].join(""); +const ILLEGAL_CHAR_REGEX = new RegExp(illegalFileNameCharacters, "g"); + +/** + * Code related to the Indexed DB actor and front + */ + +// Metadata holder objects for various components of Indexed DB + +/** + * Meta data object for a particular index in an object store + * + * @param {IDBIndex} index + * The particular index from the object store. + */ +function IndexMetadata(index) { + this._name = index.name; + this._keyPath = index.keyPath; + this._unique = index.unique; + this._multiEntry = index.multiEntry; +} +IndexMetadata.prototype = { + toObject() { + return { + name: this._name, + keyPath: this._keyPath, + unique: this._unique, + multiEntry: this._multiEntry, + }; + }, +}; + +/** + * Meta data object for a particular object store in a db + * + * @param {IDBObjectStore} objectStore + * The particular object store from the db. + */ +function ObjectStoreMetadata(objectStore) { + this._name = objectStore.name; + this._keyPath = objectStore.keyPath; + this._autoIncrement = objectStore.autoIncrement; + this._indexes = []; + + for (let i = 0; i < objectStore.indexNames.length; i++) { + const index = objectStore.index(objectStore.indexNames[i]); + + const newIndex = { + keypath: index.keyPath, + multiEntry: index.multiEntry, + name: index.name, + objectStore: { + autoIncrement: index.objectStore.autoIncrement, + indexNames: [...index.objectStore.indexNames], + keyPath: index.objectStore.keyPath, + name: index.objectStore.name, + }, + }; + + this._indexes.push([newIndex, new IndexMetadata(index)]); + } +} +ObjectStoreMetadata.prototype = { + toObject() { + return { + name: this._name, + keyPath: this._keyPath, + autoIncrement: this._autoIncrement, + indexes: JSON.stringify( + [...this._indexes.values()].map(index => index.toObject()) + ), + }; + }, +}; + +/** + * Meta data object for a particular indexed db in a host. + * + * @param {string} origin + * The host associated with this indexed db. + * @param {IDBDatabase} db + * The particular indexed db. + * @param {String} storage + * Storage type, either "temporary", "default" or "persistent". + */ +function DatabaseMetadata(origin, db, storage) { + this._origin = origin; + this._name = db.name; + this._version = db.version; + this._objectStores = []; + this.storage = storage; + + if (db.objectStoreNames.length) { + const transaction = db.transaction(db.objectStoreNames, "readonly"); + + for (let i = 0; i < transaction.objectStoreNames.length; i++) { + const objectStore = transaction.objectStore( + transaction.objectStoreNames[i] + ); + this._objectStores.push([ + transaction.objectStoreNames[i], + new ObjectStoreMetadata(objectStore), + ]); + } + } +} +DatabaseMetadata.prototype = { + get objectStores() { + return this._objectStores; + }, + + toObject() { + return { + uniqueKey: `${this._name}${SEPARATOR_GUID}${this.storage}`, + name: this._name, + storage: this.storage, + origin: this._origin, + version: this._version, + objectStores: this._objectStores.size, + }; + }, +}; + +class IndexedDBStorageActor extends BaseStorageActor { + constructor(storageActor) { + super(storageActor, "indexedDB"); + + this.objectsSize = {}; + this.storageActor = storageActor; + } + + destroy() { + this.objectsSize = null; + + super.destroy(); + } + + // We need to override this method because of custom, async getHosts method + async populateStoresForHosts() { + for (const host of await this.getHosts()) { + await this.populateStoresForHost(host); + } + } + + async populateStoresForHost(host) { + const storeMap = new Map(); + + const win = this.storageActor.getWindowFromHost(host); + const principal = this.getPrincipal(win); + + const { names } = await this.getDBNamesForHost(host, principal); + + for (const { name, storage } of names) { + let metadata = await this.getDBMetaData(host, principal, name, storage); + + metadata = this.patchMetadataMapsAndProtos(metadata); + + storeMap.set(`${name} (${storage})`, metadata); + } + + this.hostVsStores.set(host, storeMap); + } + + /** + * Returns a list of currently known hosts for the target window. This list + * contains unique hosts from the window, all inner windows and all permanent + * indexedDB hosts defined inside the browser. + */ + async getHosts() { + // Add internal hosts to this._internalHosts, which will be picked up by + // the this.hosts getter. Because this.hosts is a property on the default + // storage actor and inherited by all storage actors we have to do it this + // way. + // Only look up internal hosts if we are in the browser toolbox + const isBrowserToolbox = this.storageActor.parentActor.isRootActor; + + this._internalHosts = isBrowserToolbox ? await this.getInternalHosts() : []; + + return this.hosts; + } + + /** + * Remove an indexedDB database from given host with a given name. + */ + async removeDatabase(host, name) { + const win = this.storageActor.getWindowFromHost(host); + if (!win) { + return { error: `Window for host ${host} not found` }; + } + + const principal = win.document.effectiveStoragePrincipal; + return this.removeDB(host, principal, name); + } + + async removeAll(host, name) { + const [db, store] = JSON.parse(name); + + const win = this.storageActor.getWindowFromHost(host); + if (!win) { + return; + } + + const principal = win.document.effectiveStoragePrincipal; + this.clearDBStore(host, principal, db, store); + } + + async removeItem(host, name) { + const [db, store, id] = JSON.parse(name); + + const win = this.storageActor.getWindowFromHost(host); + if (!win) { + return; + } + + const principal = win.document.effectiveStoragePrincipal; + this.removeDBRecord(host, principal, db, store, id); + } + + getNamesForHost(host) { + const storesForHost = this.hostVsStores.get(host); + if (!storesForHost) { + return []; + } + + const names = []; + + for (const [dbName, { objectStores }] of storesForHost) { + if (objectStores.size) { + for (const objectStore of objectStores.keys()) { + names.push(JSON.stringify([dbName, objectStore])); + } + } else { + names.push(JSON.stringify([dbName])); + } + } + + return names; + } + + /** + * Returns the total number of entries for various types of requests to + * getStoreObjects for Indexed DB actor. + * + * @param {string} host + * The host for the request. + * @param {array:string} names + * Array of stringified name objects for indexed db actor. + * The request type depends on the length of any parsed entry from this + * array. 0 length refers to request for the whole host. 1 length + * refers to request for a particular db in the host. 2 length refers + * to a particular object store in a db in a host. 3 length refers to + * particular items of an object store in a db in a host. + * @param {object} options + * An options object containing following properties: + * - index {string} The IDBIndex for the object store in the db. + */ + getObjectsSize(host, names, options) { + // In Indexed DB, we are interested in only the first name, as the pattern + // should follow in all entries. + const name = names[0]; + const parsedName = JSON.parse(name); + + if (parsedName.length == 3) { + // This is the case where specific entries from an object store were + // requested + return names.length; + } else if (parsedName.length == 2) { + // This is the case where all entries from an object store are requested. + const index = options.index; + const [db, objectStore] = parsedName; + if (this.objectsSize[host + db + objectStore + index]) { + return this.objectsSize[host + db + objectStore + index]; + } + } else if (parsedName.length == 1) { + // This is the case where details of all object stores in a db are + // requested. + if ( + this.hostVsStores.has(host) && + this.hostVsStores.get(host).has(parsedName[0]) + ) { + return this.hostVsStores.get(host).get(parsedName[0]).objectStores.size; + } + } else if (!parsedName || !parsedName.length) { + // This is the case were details of all dbs in a host are requested. + if (this.hostVsStores.has(host)) { + return this.hostVsStores.get(host).size; + } + } + return 0; + } + + /** + * Returns the over-the-wire implementation of the indexed db entity. + */ + toStoreObject(item) { + if (!item) { + return null; + } + + if ("indexes" in item) { + // Object store meta data + return { + objectStore: item.name, + keyPath: item.keyPath, + autoIncrement: item.autoIncrement, + indexes: item.indexes, + }; + } + if ("objectStores" in item) { + // DB meta data + return { + uniqueKey: `${item.name} (${item.storage})`, + db: item.name, + storage: item.storage, + origin: item.origin, + version: item.version, + objectStores: item.objectStores, + }; + } + + const value = JSON.stringify(item.value); + + // Indexed db entry + return { + name: item.name, + value: new LongStringActor(this.conn, value), + }; + } + + form() { + const hosts = {}; + for (const host of this.hosts) { + hosts[host] = this.getNamesForHost(host); + } + + return { + actor: this.actorID, + hosts, + traits: this._getTraits(), + }; + } + + onItemUpdated(action, host, path) { + dump(" IDX.onItemUpdated(" + action + " - " + host + " - " + path + "\n"); + // Database was removed, remove it from stores map + if (action === "deleted" && path.length === 1) { + if (this.hostVsStores.has(host)) { + this.hostVsStores.get(host).delete(path[0]); + } + } + + this.storageActor.update(action, "indexedDB", { + [host]: [JSON.stringify(path)], + }); + } + + async getFields(subType) { + switch (subType) { + // Detail of database + case "database": + return [ + { name: "objectStore", editable: false }, + { name: "keyPath", editable: false }, + { name: "autoIncrement", editable: false }, + { name: "indexes", editable: false }, + ]; + + // Detail of object store + case "object store": + return [ + { name: "name", editable: false }, + { name: "value", editable: false }, + ]; + + // Detail of indexedDB for one origin + default: + return [ + { name: "uniqueKey", editable: false, private: true }, + { name: "db", editable: false }, + { name: "storage", editable: false }, + { name: "origin", editable: false }, + { name: "version", editable: false }, + { name: "objectStores", editable: false }, + ]; + } + } + + /** + * Fetches and stores all the metadata information for the given database + * `name` for the given `host` with its `principal`. The stored metadata + * information is of `DatabaseMetadata` type. + */ + async getDBMetaData(host, principal, name, storage) { + const request = this.openWithPrincipal(principal, name, storage); + return new Promise(resolve => { + request.onsuccess = event => { + const db = event.target.result; + const dbData = new DatabaseMetadata(host, db, storage); + db.close(); + + resolve(dbData); + }; + request.onerror = ({ target }) => { + console.error( + `Error opening indexeddb database ${name} for host ${host}`, + target.error + ); + resolve(null); + }; + }); + } + + splitNameAndStorage(name) { + const lastOpenBracketIndex = name.lastIndexOf("("); + const lastCloseBracketIndex = name.lastIndexOf(")"); + const delta = lastCloseBracketIndex - lastOpenBracketIndex - 1; + + const storage = name.substr(lastOpenBracketIndex + 1, delta); + + name = name.substr(0, lastOpenBracketIndex - 1); + + return { storage, name }; + } + + /** + * Get all "internal" hosts. Internal hosts are database namespaces used by + * the browser. + */ + async getInternalHosts() { + const profileDir = PathUtils.profileDir; + const storagePath = PathUtils.join(profileDir, "storage", "permanent"); + const children = await IOUtils.getChildren(storagePath); + const hosts = []; + + for (const path of children) { + const exists = await IOUtils.exists(path); + if (!exists) { + continue; + } + + const stats = await IOUtils.stat(path); + if ( + stats.type === "directory" && + !SAFE_HOSTS_PREFIXES_REGEX.test(stats.path) + ) { + const basename = PathUtils.filename(path); + hosts.push(basename); + } + } + + return hosts; + } + + /** + * Opens an indexed db connection for the given `principal` and + * database `name`. + */ + openWithPrincipal(principal, name, storage) { + return indexedDBForStorage.openForPrincipal(principal, name, { + storage, + }); + } + + async removeDB(host, principal, dbName) { + const result = new Promise(resolve => { + const { name, storage } = this.splitNameAndStorage(dbName); + const request = indexedDBForStorage.deleteForPrincipal(principal, name, { + storage, + }); + + request.onsuccess = () => { + resolve({}); + this.onItemUpdated("deleted", host, [dbName]); + }; + + request.onblocked = () => { + console.warn( + `Deleting indexedDB database ${name} for host ${host} is blocked` + ); + resolve({ blocked: true }); + }; + + request.onerror = () => { + const { error } = request; + console.warn( + `Error deleting indexedDB database ${name} for host ${host}: ${error}` + ); + resolve({ error: error.message }); + }; + + // If the database is blocked repeatedly, the onblocked event will not + // be fired again. To avoid waiting forever, report as blocked if nothing + // else happens after 3 seconds. + setTimeout(() => resolve({ blocked: true }), 3000); + }); + + return result; + } + + async removeDBRecord(host, principal, dbName, storeName, id) { + let db; + const { name, storage } = this.splitNameAndStorage(dbName); + + try { + db = await new Promise((resolve, reject) => { + const request = this.openWithPrincipal(principal, name, storage); + request.onsuccess = ev => resolve(ev.target.result); + request.onerror = ev => reject(ev.target.error); + }); + + const transaction = db.transaction(storeName, "readwrite"); + const store = transaction.objectStore(storeName); + + await new Promise((resolve, reject) => { + const request = store.delete(id); + request.onsuccess = () => resolve(); + request.onerror = ev => reject(ev.target.error); + }); + + this.onItemUpdated("deleted", host, [dbName, storeName, id]); + } catch (error) { + const recordPath = [dbName, storeName, id].join("/"); + console.error( + `Failed to delete indexedDB record: ${recordPath}: ${error}` + ); + } + + if (db) { + db.close(); + } + + return null; + } + + async clearDBStore(host, principal, dbName, storeName) { + let db; + const { name, storage } = this.splitNameAndStorage(dbName); + + try { + db = await new Promise((resolve, reject) => { + const request = this.openWithPrincipal(principal, name, storage); + request.onsuccess = ev => resolve(ev.target.result); + request.onerror = ev => reject(ev.target.error); + }); + + const transaction = db.transaction(storeName, "readwrite"); + const store = transaction.objectStore(storeName); + + await new Promise((resolve, reject) => { + const request = store.clear(); + request.onsuccess = () => resolve(); + request.onerror = ev => reject(ev.target.error); + }); + + this.onItemUpdated("cleared", host, [dbName, storeName]); + } catch (error) { + const storePath = [dbName, storeName].join("/"); + console.error(`Failed to clear indexedDB store: ${storePath}: ${error}`); + } + + if (db) { + db.close(); + } + + return null; + } + + /** + * Fetches all the databases and their metadata for the given `host`. + */ + async getDBNamesForHost(host, principal) { + const sanitizedHost = this.getSanitizedHost(host) + principal.originSuffix; + const profileDir = PathUtils.profileDir; + const storagePath = PathUtils.join(profileDir, "storage"); + const files = []; + const names = []; + + // We expect sqlite DB paths to look something like this: + // - PathToProfileDir/storage/default/http+++www.example.com/ + // idb/1556056096MeysDaabta.sqlite + // - PathToProfileDir/storage/permanent/http+++www.example.com/ + // idb/1556056096MeysDaabta.sqlite + // - PathToProfileDir/storage/temporary/http+++www.example.com/ + // idb/1556056096MeysDaabta.sqlite + // The subdirectory inside the storage folder is determined by the storage + // type: + // - default: { storage: "default" } or not specified. + // - permanent: { storage: "persistent" }. + // - temporary: { storage: "temporary" }. + const sqliteFiles = await this.findSqlitePathsForHost( + storagePath, + sanitizedHost + ); + + for (const file of sqliteFiles) { + const splitPath = PathUtils.split(file); + const idbIndex = splitPath.indexOf("idb"); + const storage = splitPath[idbIndex - 2]; + const relative = file.substr(profileDir.length + 1); + + files.push({ + file: relative, + storage: storage === "permanent" ? "persistent" : storage, + }); + } + + if (files.length) { + for (const { file, storage } of files) { + const name = await this.getNameFromDatabaseFile(file); + if (name) { + names.push({ + name, + storage, + }); + } + } + } + + return { names }; + } + + /** + * Find all SQLite files that hold IndexedDB data for a host, such as: + * storage/temporary/http+++www.example.com/idb/1556056096MeysDaabta.sqlite + */ + async findSqlitePathsForHost(storagePath, sanitizedHost) { + const sqlitePaths = []; + const idbPaths = await this.findIDBPathsForHost(storagePath, sanitizedHost); + for (const idbPath of idbPaths) { + const children = await IOUtils.getChildren(idbPath); + + for (const path of children) { + const exists = await IOUtils.exists(path); + if (!exists) { + continue; + } + + const stats = await IOUtils.stat(path); + if (stats.type !== "directory" && stats.path.endsWith(".sqlite")) { + sqlitePaths.push(path); + } + } + } + return sqlitePaths; + } + + /** + * Find all paths that hold IndexedDB data for a host, such as: + * storage/temporary/http+++www.example.com/idb + */ + async findIDBPathsForHost(storagePath, sanitizedHost) { + const idbPaths = []; + const typePaths = await this.findStorageTypePaths(storagePath); + for (const typePath of typePaths) { + const idbPath = PathUtils.join(typePath, sanitizedHost, "idb"); + if (await IOUtils.exists(idbPath)) { + idbPaths.push(idbPath); + } + } + return idbPaths; + } + + /** + * Find all the storage types, such as "default", "permanent", or "temporary". + * These names have changed over time, so it seems simpler to look through all + * types that currently exist in the profile. + */ + async findStorageTypePaths(storagePath) { + const children = await IOUtils.getChildren(storagePath); + const typePaths = []; + + for (const path of children) { + const exists = await IOUtils.exists(path); + if (!exists) { + continue; + } + + const stats = await IOUtils.stat(path); + if (stats.type === "directory") { + typePaths.push(path); + } + } + + return typePaths; + } + + /** + * Removes any illegal characters from the host name to make it a valid file + * name. + */ + getSanitizedHost(host) { + if (host.startsWith("about:")) { + host = "moz-safe-" + host; + } + return host.replace(ILLEGAL_CHAR_REGEX, "+"); + } + + /** + * Retrieves the proper indexed db database name from the provided .sqlite + * file location. + */ + async getNameFromDatabaseFile(path) { + let connection = null; + let retryCount = 0; + + // Content pages might be having an open transaction for the same indexed db + // which this sqlite file belongs to. In that case, sqlite.openConnection + // will throw. Thus we retry for some time to see if lock is removed. + while (!connection && retryCount++ < 25) { + try { + connection = await lazy.Sqlite.openConnection({ path }); + } catch (ex) { + // Continuously retrying is overkill. Waiting for 100ms before next try + await sleep(100); + } + } + + if (!connection) { + return null; + } + + const rows = await connection.execute("SELECT name FROM database"); + if (rows.length != 1) { + return null; + } + + const name = rows[0].getResultByName("name"); + + await connection.close(); + + return name; + } + + async getValuesForHost( + host, + name = "null", + options, + hostVsStores, + principal + ) { + name = JSON.parse(name); + if (!name || !name.length) { + // This means that details about the db in this particular host are + // requested. + const dbs = []; + if (hostVsStores.has(host)) { + for (let [, db] of hostVsStores.get(host)) { + db = this.patchMetadataMapsAndProtos(db); + dbs.push(db.toObject()); + } + } + return { dbs }; + } + + const [db2, objectStore, id] = name; + if (!objectStore) { + // This means that details about all the object stores in this db are + // requested. + const objectStores = []; + if (hostVsStores.has(host) && hostVsStores.get(host).has(db2)) { + let db = hostVsStores.get(host).get(db2); + + db = this.patchMetadataMapsAndProtos(db); + + const objectStores2 = db.objectStores; + + for (const objectStore2 of objectStores2) { + objectStores.push(objectStore2[1].toObject()); + } + } + return { + objectStores, + }; + } + // Get either all entries from the object store, or a particular id + const storage = hostVsStores.get(host).get(db2).storage; + const result = await this.getObjectStoreData( + host, + principal, + db2, + storage, + { + objectStore, + id, + index: options.index, + offset: options.offset, + size: options.size, + } + ); + return { result }; + } + + /** + * Returns requested entries (or at most MAX_STORE_OBJECT_COUNT) from a particular + * objectStore from the db in the given host. + * + * @param {string} host + * The given host. + * @param {nsIPrincipal} principal + * The principal of the given document. + * @param {string} dbName + * The name of the indexed db from the above host. + * @param {String} storage + * Storage type, either "temporary", "default" or "persistent". + * @param {Object} requestOptions + * An object in the following format: + * { + * objectStore: The name of the object store from the above db, + * id: Id of the requested entry from the above object + * store. null if all entries from the above object + * store are requested, + * index: Name of the IDBIndex to be iterated on while fetching + * entries. null or "name" if no index is to be + * iterated, + * offset: offset of the entries to be fetched, + * size: The intended size of the entries to be fetched + * } + */ + getObjectStoreData(host, principal, dbName, storage, requestOptions) { + const { name } = this.splitNameAndStorage(dbName); + const request = this.openWithPrincipal(principal, name, storage); + + return new Promise((resolve, reject) => { + let { objectStore, id, index, offset, size } = requestOptions; + const data = []; + let db; + + if (!size || size > MAX_STORE_OBJECT_COUNT) { + size = MAX_STORE_OBJECT_COUNT; + } + + request.onsuccess = event => { + db = event.target.result; + + const transaction = db.transaction(objectStore, "readonly"); + let source = transaction.objectStore(objectStore); + if (index && index != "name") { + source = source.index(index); + } + + source.count().onsuccess = event2 => { + const objectsSize = []; + const count = event2.target.result; + objectsSize.push({ + key: host + dbName + objectStore + index, + count, + }); + + if (!offset) { + offset = 0; + } else if (offset > count) { + db.close(); + resolve([]); + return; + } + + if (id) { + source.get(id).onsuccess = event3 => { + db.close(); + resolve([{ name: id, value: event3.target.result }]); + }; + } else { + source.openCursor().onsuccess = event4 => { + const cursor = event4.target.result; + + if (!cursor || data.length >= size) { + db.close(); + resolve({ + data, + objectsSize, + }); + return; + } + if (offset-- <= 0) { + data.push({ name: cursor.key, value: cursor.value }); + } + cursor.continue(); + }; + } + }; + }; + + request.onerror = () => { + db.close(); + resolve([]); + }; + }); + } + + /** + * When indexedDB metadata is parsed to and from JSON then the object's + * prototype is dropped and any Maps are changed to arrays of arrays. This + * method is used to repair the prototypes and fix any broken Maps. + */ + patchMetadataMapsAndProtos(metadata) { + const md = Object.create(DatabaseMetadata.prototype); + Object.assign(md, metadata); + + md._objectStores = new Map(metadata._objectStores); + + for (const [name, store] of md._objectStores) { + const obj = Object.create(ObjectStoreMetadata.prototype); + Object.assign(obj, store); + + md._objectStores.set(name, obj); + + if (typeof store._indexes.length !== "undefined") { + obj._indexes = new Map(store._indexes); + } + + for (const [name2, value] of obj._indexes) { + const obj2 = Object.create(IndexMetadata.prototype); + Object.assign(obj2, value); + + obj._indexes.set(name2, obj2); + } + } + + return md; + } +} +exports.IndexedDBStorageActor = IndexedDBStorageActor; diff --git a/devtools/server/actors/resources/storage/local-and-session-storage.js b/devtools/server/actors/resources/storage/local-and-session-storage.js new file mode 100644 index 0000000000..ba0f006d22 --- /dev/null +++ b/devtools/server/actors/resources/storage/local-and-session-storage.js @@ -0,0 +1,200 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const { + BaseStorageActor, + DEFAULT_VALUE, +} = require("resource://devtools/server/actors/resources/storage/index.js"); +const { + LongStringActor, +} = require("resource://devtools/server/actors/string.js"); + +class LocalOrSessionStorageActor extends BaseStorageActor { + constructor(storageActor, typeName) { + super(storageActor, typeName); + + Services.obs.addObserver(this, "dom-storage2-changed"); + Services.obs.addObserver(this, "dom-private-storage2-changed"); + } + + destroy() { + if (this.isDestroyed()) { + return; + } + Services.obs.removeObserver(this, "dom-storage2-changed"); + Services.obs.removeObserver(this, "dom-private-storage2-changed"); + + super.destroy(); + } + + getNamesForHost(host) { + const storage = this.hostVsStores.get(host); + return storage ? Object.keys(storage) : []; + } + + getValuesForHost(host, name) { + const storage = this.hostVsStores.get(host); + if (!storage) { + return []; + } + if (name) { + const value = storage ? storage.getItem(name) : null; + return [{ name, value }]; + } + if (!storage) { + return []; + } + + // local and session storage cannot be iterated over using Object.keys() + // because it skips keys that are duplicated on the prototype + // e.g. "key", "getKeys" so we need to gather the real keys using the + // storage.key() function. + const storageArray = []; + for (let i = 0; i < storage.length; i++) { + const key = storage.key(i); + storageArray.push({ + name: key, + value: storage.getItem(key), + }); + } + return storageArray; + } + + // We need to override this method as populateStoresForHost expect the window object + populateStoresForHosts() { + this.hostVsStores = new Map(); + for (const window of this.windows) { + const host = this.getHostName(window.location); + if (host) { + this.populateStoresForHost(host, window); + } + } + } + + populateStoresForHost(host, window) { + try { + this.hostVsStores.set(host, window[this.typeName]); + } catch (ex) { + console.warn( + `Failed to enumerate ${this.typeName} for host ${host}: ${ex}` + ); + } + } + + async getFields() { + return [ + { name: "name", editable: true }, + { name: "value", editable: true }, + ]; + } + + async addItem(guid, host) { + const storage = this.hostVsStores.get(host); + if (!storage) { + return; + } + storage.setItem(guid, DEFAULT_VALUE); + } + + /** + * Edit localStorage or sessionStorage fields. + * + * @param {Object} data + * See editCookie() for format details. + */ + async editItem({ host, field, oldValue, items }) { + const storage = this.hostVsStores.get(host); + if (!storage) { + return; + } + + if (field === "name") { + storage.removeItem(oldValue); + } + + storage.setItem(items.name, items.value); + } + + async removeItem(host, name) { + const storage = this.hostVsStores.get(host); + if (!storage) { + return; + } + storage.removeItem(name); + } + + async removeAll(host) { + const storage = this.hostVsStores.get(host); + if (!storage) { + return; + } + storage.clear(); + } + + observe(subject, topic, data) { + if ( + (topic != "dom-storage2-changed" && + topic != "dom-private-storage2-changed") || + data != this.typeName + ) { + return null; + } + + const host = this.getSchemaAndHost(subject.url); + + if (!this.hostVsStores.has(host)) { + return null; + } + + let action = "changed"; + if (subject.key == null) { + return this.storageActor.update("cleared", this.typeName, [host]); + } else if (subject.oldValue == null) { + action = "added"; + } else if (subject.newValue == null) { + action = "deleted"; + } + const updateData = {}; + updateData[host] = [subject.key]; + return this.storageActor.update(action, this.typeName, updateData); + } + + /** + * Given a url, correctly determine its protocol + hostname part. + */ + getSchemaAndHost(url) { + const uri = Services.io.newURI(url); + if (!uri.host) { + return uri.spec; + } + return uri.scheme + "://" + uri.hostPort; + } + + toStoreObject(item) { + if (!item) { + return null; + } + + return { + name: item.name, + value: new LongStringActor(this.conn, item.value || ""), + }; + } +} + +class LocalStorageActor extends LocalOrSessionStorageActor { + constructor(storageActor) { + super(storageActor, "localStorage"); + } +} +exports.LocalStorageActor = LocalStorageActor; + +class SessionStorageActor extends LocalOrSessionStorageActor { + constructor(storageActor) { + super(storageActor, "sessionStorage"); + } +} +exports.SessionStorageActor = SessionStorageActor; diff --git a/devtools/server/actors/resources/storage/moz.build b/devtools/server/actors/resources/storage/moz.build new file mode 100644 index 0000000000..1615254759 --- /dev/null +++ b/devtools/server/actors/resources/storage/moz.build @@ -0,0 +1,17 @@ +# -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*- +# vim: set filetype=python: +# 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/. + +DevToolsModules( + "cache.js", + "cookies.js", + "extension-storage.js", + "index.js", + "indexed-db.js", + "local-and-session-storage.js", +) + +with Files("**"): + BUG_COMPONENT = ("DevTools", "Storage Inspector") diff --git a/devtools/server/actors/resources/stylesheets.js b/devtools/server/actors/resources/stylesheets.js new file mode 100644 index 0000000000..9e107e305b --- /dev/null +++ b/devtools/server/actors/resources/stylesheets.js @@ -0,0 +1,145 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const { + TYPES: { STYLESHEET }, +} = require("resource://devtools/server/actors/resources/index.js"); + +loader.lazyRequireGetter( + this, + "CssLogic", + "resource://devtools/shared/inspector/css-logic.js" +); + +class StyleSheetWatcher { + constructor() { + this._onApplicableStylesheetAdded = + this._onApplicableStylesheetAdded.bind(this); + this._onStylesheetUpdated = this._onStylesheetUpdated.bind(this); + this._onStylesheetRemoved = this._onStylesheetRemoved.bind(this); + } + + /** + * Start watching for all stylesheets related to a given Target Actor. + * + * @param TargetActor targetActor + * The target actor from which we should observe css changes. + * @param Object options + * Dictionary object with following attributes: + * - onAvailable: mandatory function + * This will be called for each resource. + */ + async watch(targetActor, { onAvailable, onUpdated, onDestroyed }) { + this._targetActor = targetActor; + this._onAvailable = onAvailable; + this._onUpdated = onUpdated; + this._onDestroyed = onDestroyed; + + this._styleSheetsManager = targetActor.getStyleSheetsManager(); + + // watch will call onAvailable for already existing stylesheets + await this._styleSheetsManager.watch({ + onAvailable: this._onApplicableStylesheetAdded, + onUpdated: this._onStylesheetUpdated, + onDestroyed: this._onStylesheetRemoved, + }); + } + + _onApplicableStylesheetAdded(styleSheetData) { + return this._notifyResourcesAvailable([styleSheetData]); + } + + _onStylesheetUpdated({ resourceId, updateKind, updates = {} }) { + this._notifyResourceUpdated(resourceId, updateKind, updates); + } + + _onStylesheetRemoved({ resourceId }) { + return this._notifyResourcesDestroyed(resourceId); + } + + async _toResource( + styleSheet, + { isCreatedByDevTools = false, fileName = null, resourceId } = {} + ) { + const { atRules, ruleCount } = + this._styleSheetsManager.getStyleSheetRuleCountAndAtRules(styleSheet); + + const resource = { + resourceId, + resourceType: STYLESHEET, + disabled: styleSheet.disabled, + constructed: styleSheet.constructed, + fileName, + href: styleSheet.href, + isNew: isCreatedByDevTools, + atRules, + nodeHref: this._styleSheetsManager.getNodeHref(styleSheet), + ruleCount, + sourceMapBaseURL: + this._styleSheetsManager.getSourcemapBaseURL(styleSheet), + sourceMapURL: styleSheet.sourceMapURL, + styleSheetIndex: this._styleSheetsManager.getStyleSheetIndex(resourceId), + system: CssLogic.isAgentStylesheet(styleSheet), + title: styleSheet.title, + }; + + return resource; + } + + async _notifyResourcesAvailable(styleSheets) { + const resources = await Promise.all( + styleSheets.map(async ({ resourceId, styleSheet, creationData }) => { + const resource = await this._toResource(styleSheet, { + resourceId, + isCreatedByDevTools: creationData?.isCreatedByDevTools, + fileName: creationData?.fileName, + }); + + return resource; + }) + ); + + await this._onAvailable(resources); + } + + _notifyResourceUpdated( + resourceId, + updateType, + { resourceUpdates, nestedResourceUpdates, event } + ) { + this._onUpdated([ + { + browsingContextID: this._targetActor.browsingContextID, + innerWindowId: this._targetActor.innerWindowId, + resourceType: STYLESHEET, + resourceId, + updateType, + resourceUpdates, + nestedResourceUpdates, + event, + }, + ]); + } + + _notifyResourcesDestroyed(resourceId) { + this._onDestroyed([ + { + resourceType: STYLESHEET, + resourceId, + }, + ]); + } + + destroy() { + this._styleSheetsManager.unwatch({ + onAvailable: this._onApplicableStylesheetAdded, + onUpdated: this._onStylesheetUpdated, + onDestroyed: this._onStylesheetRemoved, + }); + } +} + +module.exports = StyleSheetWatcher; diff --git a/devtools/server/actors/resources/thread-states.js b/devtools/server/actors/resources/thread-states.js new file mode 100644 index 0000000000..9ac79088d2 --- /dev/null +++ b/devtools/server/actors/resources/thread-states.js @@ -0,0 +1,136 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const { + TYPES: { THREAD_STATE }, +} = require("resource://devtools/server/actors/resources/index.js"); + +const { + PAUSE_REASONS, + STATES: THREAD_STATES, +} = require("resource://devtools/server/actors/thread.js"); + +// Possible values of breakpoint's resource's `state` attribute +const STATES = { + PAUSED: "paused", + RESUMED: "resumed", +}; + +/** + * Emit THREAD_STATE resources, which is emitted each time the target's thread pauses or resumes. + * So that there is two distinct values for this resource: pauses and resumes. + * These values are distinguished by `state` attribute which can be either "paused" or "resumed". + * + * Resume events, won't expose any other attribute other than `resourceType` and `state`. + * + * Pause events will expose the following attributes: + * - why {Object}: Description of why the thread pauses. See ThreadActor's PAUSE_REASONS definition for more information. + * - frame {Object}: Description of the frame where we just paused. This is a FrameActor's form. + */ +class BreakpointWatcher { + constructor() { + this.onPaused = this.onPaused.bind(this); + this.onResumed = this.onResumed.bind(this); + } + + /** + * Start watching for state changes of the thread actor. + * This will notify whenever the thread actor pause and resume. + * + * @param TargetActor targetActor + * The target actor from which we should observe breakpoints + * @param Object options + * Dictionary object with following attributes: + * - onAvailable: mandatory function + * This will be called for each resource. + */ + async watch(targetActor, { onAvailable }) { + const { threadActor } = targetActor; + this.threadActor = threadActor; + this.onAvailable = onAvailable; + + // If this watcher is created during target creation, attach the thread actor automatically. + // Otherwise it would not pause on anything (especially debugger statements). + // However, do not attach the thread actor for Workers. They use a codepath + // which releases the worker on `attach`. For them, the client will call `attach`. (bug 1691986) + const isTargetCreation = this.threadActor.state == THREAD_STATES.DETACHED; + if (isTargetCreation && !targetActor.targetType.endsWith("worker")) { + await this.threadActor.attach({}); + } + + this.isInterrupted = false; + + threadActor.on("paused", this.onPaused); + threadActor.on("resumed", this.onResumed); + + // For top-level targets, the thread actor may have been attached by the frontend + // on toolbox opening, and we start observing for thread state updates much later. + // In which case, the thread actor may already be paused and we handle this here. + // It will also occurs for all other targets once bug 1681698 lands, + // as the thread actor will be initialized before the target starts loading. + // And it will occur for all targets once bug 1686748 lands. + // + // Note that we have to check if we have a "lastPausedPacket", + // because the thread Actor is immediately set as being paused, + // but the pause packet is built asynchronously and available slightly later. + // If the "lastPausedPacket" is null, while the thread actor is paused, + // it is fine to ignore as the "paused" event will be fire later. + if (threadActor.isPaused() && threadActor.lastPausedPacket()) { + this.onPaused(threadActor.lastPausedPacket()); + } + } + + /** + * Stop watching for breakpoints + */ + destroy() { + this.threadActor.off("paused", this.onPaused); + this.threadActor.off("resumed", this.onResumed); + } + + onPaused(packet) { + // If paused by an explicit interrupt, which are generated by the + // slow script dialog and internal events such as setting + // breakpoints, ignore the event. + const { why } = packet; + if (why.type === PAUSE_REASONS.INTERRUPTED && !why.onNext) { + this.isInterrupted = true; + return; + } + + // Ignore attached events because they are not useful to the user. + if (why.type == PAUSE_REASONS.ALREADY_PAUSED) { + return; + } + + this.onAvailable([ + { + resourceType: THREAD_STATE, + state: STATES.PAUSED, + why, + frame: packet.frame.form(), + }, + ]); + } + + onResumed(packet) { + // NOTE: resumed events are suppressed while interrupted + // to prevent unintentional behavior. + if (this.isInterrupted) { + this.isInterrupted = false; + return; + } + + this.onAvailable([ + { + resourceType: THREAD_STATE, + state: STATES.RESUMED, + }, + ]); + } +} + +module.exports = BreakpointWatcher; diff --git a/devtools/server/actors/resources/utils/content-process-storage.js b/devtools/server/actors/resources/utils/content-process-storage.js new file mode 100644 index 0000000000..7e126ce3f7 --- /dev/null +++ b/devtools/server/actors/resources/utils/content-process-storage.js @@ -0,0 +1,453 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const EventEmitter = require("resource://devtools/shared/event-emitter.js"); + +const lazy = {}; +ChromeUtils.defineESModuleGetters(lazy, { + getAddonIdForWindowGlobal: + "resource://devtools/server/actors/watcher/browsing-context-helpers.sys.mjs", +}); + +// ms of delay to throttle updates +const BATCH_DELAY = 200; + +// Filters "stores-update" response to only include events for +// the storage type we desire +function getFilteredStorageEvents(updates, storageType) { + const filteredUpdate = Object.create(null); + + // updateType will be "added", "changed", or "deleted" + for (const updateType in updates) { + if (updates[updateType][storageType]) { + if (!filteredUpdate[updateType]) { + filteredUpdate[updateType] = {}; + } + filteredUpdate[updateType][storageType] = + updates[updateType][storageType]; + } + } + + return Object.keys(filteredUpdate).length ? filteredUpdate : null; +} + +class ContentProcessStorage { + constructor(ActorConstructor, storageKey, storageType) { + this.ActorConstructor = ActorConstructor; + this.storageKey = storageKey; + this.storageType = storageType; + + this.onStoresUpdate = this.onStoresUpdate.bind(this); + this.onStoresCleared = this.onStoresCleared.bind(this); + } + + async watch(targetActor, { onAvailable }) { + const storageActor = new StorageActorMock(targetActor); + this.storageActor = storageActor; + this.actor = new this.ActorConstructor(storageActor); + + // Some storage types require to prelist their stores + await this.actor.populateStoresForHosts(); + + // We have to manage the actor manually, because ResourceCommand doesn't + // use the protocol.js specification. + // resource-available-form is typed as "json" + // So that we have to manually handle stuff that would normally be + // automagically done by procotol.js + // 1) Manage the actor in order to have an actorID on it + targetActor.manage(this.actor); + // 2) Convert to JSON "form" + const form = this.actor.form(); + + // NOTE: this is hoisted, so the `update` method above may use it. + const storage = form; + + // All resources should have a resourceType, resourceId and resourceKey + // attributes, so available/updated/destroyed callbacks work properly. + storage.resourceType = this.storageType; + storage.resourceId = this.storageType; + storage.resourceKey = this.storageKey; + + onAvailable([storage]); + + // Maps global events from `storageActor` shared for all storage-types, + // down to storage-type's specific actor `storage`. + storageActor.on("stores-update", this.onStoresUpdate); + + // When a store gets cleared + storageActor.on("stores-cleared", this.onStoresCleared); + } + + onStoresUpdate(response) { + response = getFilteredStorageEvents(response, this.storageKey); + if (!response) { + return; + } + this.actor.emit("single-store-update", { + changed: response.changed, + added: response.added, + deleted: response.deleted, + }); + } + + onStoresCleared(response) { + const cleared = response[this.storageKey]; + + if (!cleared) { + return; + } + + this.actor.emit("single-store-cleared", { + clearedHostsOrPaths: cleared, + }); + } + + destroy() { + this.actor?.destroy(); + this.actor = null; + if (this.storageActor) { + this.storageActor.on("stores-update", this.onStoresUpdate); + this.storageActor.on("stores-cleared", this.onStoresCleared); + this.storageActor.destroy(); + this.storageActor = null; + } + } +} + +module.exports = ContentProcessStorage; + +// This class mocks what used to be implement in devtools/server/actors/storage.js: StorageActor +// But without being a protocol.js actor, nor implement any RDP method/event. +// An instance of this class is passed to each storage type actor and named `storageActor`. +// Once we implement all storage type in watcher classes, we can get rid of the original +// StorageActor in devtools/server/actors/storage.js +class StorageActorMock extends EventEmitter { + constructor(targetActor) { + super(); + // Storage classes fetch conn from storageActor + this.conn = targetActor.conn; + this.targetActor = targetActor; + + this.childWindowPool = new Set(); + + // Fetch all the inner iframe windows in this tab. + this.fetchChildWindows(this.targetActor.docShell); + + // Notifications that help us keep track of newly added windows and windows + // that got removed + Services.obs.addObserver(this, "content-document-global-created"); + Services.obs.addObserver(this, "inner-window-destroyed"); + this.onPageChange = this.onPageChange.bind(this); + + const handler = targetActor.chromeEventHandler; + handler.addEventListener("pageshow", this.onPageChange, true); + handler.addEventListener("pagehide", this.onPageChange, true); + + this.destroyed = false; + this.boundUpdate = {}; + } + + destroy() { + clearTimeout(this.batchTimer); + this.batchTimer = null; + // Remove observers + Services.obs.removeObserver(this, "content-document-global-created"); + Services.obs.removeObserver(this, "inner-window-destroyed"); + this.destroyed = true; + if (this.targetActor.browser) { + this.targetActor.browser.removeEventListener( + "pageshow", + this.onPageChange, + true + ); + this.targetActor.browser.removeEventListener( + "pagehide", + this.onPageChange, + true + ); + } + this.childWindowPool.clear(); + + this.childWindowPool = null; + this.targetActor = null; + this.boundUpdate = null; + } + + get window() { + return this.targetActor.window; + } + + get document() { + return this.targetActor.window.document; + } + + get windows() { + return this.childWindowPool; + } + + /** + * Given a docshell, recursively find out all the child windows from it. + * + * @param {nsIDocShell} item + * The docshell from which all inner windows need to be extracted. + */ + fetchChildWindows(item) { + const docShell = item + .QueryInterface(Ci.nsIDocShell) + .QueryInterface(Ci.nsIDocShellTreeItem); + if (!docShell.docViewer) { + return null; + } + const window = docShell.docViewer.DOMDocument.defaultView; + if (window.location.href == "about:blank") { + // Skip out about:blank windows as Gecko creates them multiple times while + // creating any global. + return null; + } + if (!this.isIncludedInTopLevelWindow(window)) { + return null; + } + this.childWindowPool.add(window); + for (let i = 0; i < docShell.childCount; i++) { + const child = docShell.getChildAt(i); + this.fetchChildWindows(child); + } + return null; + } + + isIncludedInTargetExtension(subject) { + const addonId = lazy.getAddonIdForWindowGlobal(subject.windowGlobalChild); + return addonId && addonId === this.targetActor.addonId; + } + + isIncludedInTopLevelWindow(window) { + return this.targetActor.windows.includes(window); + } + + getWindowFromInnerWindowID(innerID) { + innerID = innerID.QueryInterface(Ci.nsISupportsPRUint64).data; + for (const win of this.childWindowPool.values()) { + const id = win.windowGlobalChild.innerWindowId; + if (id == innerID) { + return win; + } + } + return null; + } + + getWindowFromHost(host) { + for (const win of this.childWindowPool.values()) { + const origin = win.document.nodePrincipal.originNoSuffix; + const url = win.document.URL; + if (origin === host || url === host) { + return win; + } + } + return null; + } + + /** + * Event handler for any docshell update. This lets us figure out whenever + * any new window is added, or an existing window is removed. + */ + observe(subject, topic) { + if ( + subject.location && + (!subject.location.href || subject.location.href == "about:blank") + ) { + return null; + } + + // We don't want to try to find a top level window for an extension page, as + // in many cases (e.g. background page), it is not loaded in a tab, and + // 'isIncludedInTopLevelWindow' throws an error + if ( + topic == "content-document-global-created" && + (this.isIncludedInTargetExtension(subject) || + this.isIncludedInTopLevelWindow(subject)) + ) { + this.childWindowPool.add(subject); + this.emit("window-ready", subject); + } else if (topic == "inner-window-destroyed") { + const window = this.getWindowFromInnerWindowID(subject); + if (window) { + this.childWindowPool.delete(window); + this.emit("window-destroyed", window); + } + } + return null; + } + + /** + * Called on "pageshow" or "pagehide" event on the chromeEventHandler of + * current tab. + * + * @param {event} The event object passed to the handler. We are using these + * three properties from the event: + * - target {document} The document corresponding to the event. + * - type {string} Name of the event - "pageshow" or "pagehide". + * - persisted {boolean} true if there was no + * "content-document-global-created" notification along + * this event. + */ + onPageChange({ target, type, persisted }) { + if (this.destroyed) { + return; + } + + const window = target.defaultView; + + if (type == "pagehide" && this.childWindowPool.delete(window)) { + this.emit("window-destroyed", window); + } else if ( + type == "pageshow" && + persisted && + window.location.href && + window.location.href != "about:blank" && + this.isIncludedInTopLevelWindow(window) + ) { + this.childWindowPool.add(window); + this.emit("window-ready", window); + } + } + + /** + * This method is called by the registered storage types so as to tell the + * Storage Actor that there are some changes in the stores. Storage Actor then + * notifies the client front about these changes at regular (BATCH_DELAY) + * interval. + * + * @param {string} action + * The type of change. One of "added", "changed" or "deleted" + * @param {string} storeType + * The storage actor in which this change has occurred. + * @param {object} data + * The update object. This object is of the following format: + * - { + * <host1>: [<store_names1>, <store_name2>...], + * <host2>: [<store_names34>...], + * } + * Where host1, host2 are the host in which this change happened and + * [<store_namesX] is an array of the names of the changed store objects. + * Pass an empty array if the host itself was affected: either completely + * removed or cleared. + */ + // eslint-disable-next-line complexity + update(action, storeType, data) { + if (action == "cleared") { + this.emit("stores-cleared", { [storeType]: data }); + return null; + } + + if (this.batchTimer) { + clearTimeout(this.batchTimer); + } + if (!this.boundUpdate[action]) { + this.boundUpdate[action] = {}; + } + if (!this.boundUpdate[action][storeType]) { + this.boundUpdate[action][storeType] = {}; + } + for (const host in data) { + if (!this.boundUpdate[action][storeType][host]) { + this.boundUpdate[action][storeType][host] = []; + } + for (const name of data[host]) { + if (!this.boundUpdate[action][storeType][host].includes(name)) { + this.boundUpdate[action][storeType][host].push(name); + } + } + } + if (action == "added") { + // If the same store name was previously deleted or changed, but now is + // added somehow, dont send the deleted or changed update. + this.removeNamesFromUpdateList("deleted", storeType, data); + this.removeNamesFromUpdateList("changed", storeType, data); + } else if ( + action == "changed" && + this.boundUpdate.added && + this.boundUpdate.added[storeType] + ) { + // If something got added and changed at the same time, then remove those + // items from changed instead. + this.removeNamesFromUpdateList( + "changed", + storeType, + this.boundUpdate.added[storeType] + ); + } else if (action == "deleted") { + // If any item got delete, or a host got delete, no point in sending + // added or changed update + this.removeNamesFromUpdateList("added", storeType, data); + this.removeNamesFromUpdateList("changed", storeType, data); + + for (const host in data) { + if ( + !data[host].length && + this.boundUpdate.added && + this.boundUpdate.added[storeType] && + this.boundUpdate.added[storeType][host] + ) { + delete this.boundUpdate.added[storeType][host]; + } + if ( + !data[host].length && + this.boundUpdate.changed && + this.boundUpdate.changed[storeType] && + this.boundUpdate.changed[storeType][host] + ) { + delete this.boundUpdate.changed[storeType][host]; + } + } + } + + this.batchTimer = setTimeout(() => { + clearTimeout(this.batchTimer); + this.emit("stores-update", this.boundUpdate); + this.boundUpdate = {}; + }, BATCH_DELAY); + + return null; + } + + /** + * This method removes data from the this.boundUpdate object in the same + * manner like this.update() adds data to it. + * + * @param {string} action + * The type of change. One of "added", "changed" or "deleted" + * @param {string} storeType + * The storage actor for which you want to remove the updates data. + * @param {object} data + * The update object. This object is of the following format: + * - { + * <host1>: [<store_names1>, <store_name2>...], + * <host2>: [<store_names34>...], + * } + * Where host1, host2 are the hosts which you want to remove and + * [<store_namesX] is an array of the names of the store objects. + */ + removeNamesFromUpdateList(action, storeType, data) { + for (const host in data) { + if ( + this.boundUpdate[action] && + this.boundUpdate[action][storeType] && + this.boundUpdate[action][storeType][host] + ) { + for (const name in data[host]) { + const index = this.boundUpdate[action][storeType][host].indexOf(name); + if (index > -1) { + this.boundUpdate[action][storeType][host].splice(index, 1); + } + } + if (!this.boundUpdate[action][storeType][host].length) { + delete this.boundUpdate[action][storeType][host]; + } + } + } + return null; + } +} diff --git a/devtools/server/actors/resources/utils/moz.build b/devtools/server/actors/resources/utils/moz.build new file mode 100644 index 0000000000..0e6f9d1baa --- /dev/null +++ b/devtools/server/actors/resources/utils/moz.build @@ -0,0 +1,14 @@ +# -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*- +# vim: set filetype=python: +# 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/. + +DevToolsModules( + "content-process-storage.js", + "nsi-console-listener-watcher.js", + "parent-process-storage.js", +) + +with Files("nsi-console-listener-watcher.js"): + BUG_COMPONENT = ("DevTools", "Console") diff --git a/devtools/server/actors/resources/utils/nsi-console-listener-watcher.js b/devtools/server/actors/resources/utils/nsi-console-listener-watcher.js new file mode 100644 index 0000000000..8d1ed43612 --- /dev/null +++ b/devtools/server/actors/resources/utils/nsi-console-listener-watcher.js @@ -0,0 +1,192 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const { + createStringGrip, +} = require("resource://devtools/server/actors/object/utils.js"); + +const { + getActorIdForInternalSourceId, +} = require("resource://devtools/server/actors/utils/dbg-source.js"); + +class nsIConsoleListenerWatcher { + /** + * Start watching for all messages related to a given Target Actor. + * This will notify about existing messages, as well as those created in the future. + * + * @param TargetActor targetActor + * The target actor from which we should observe messages + * @param Object options + * Dictionary object with following attributes: + * - onAvailable: mandatory function + * This will be called for each resource. + */ + async watch(targetActor, { onAvailable }) { + if (!this.shouldHandleTarget(targetActor)) { + return; + } + + let latestRetrievedCachedMessageTimestamp = -1; + + // Create the consoleListener. + const listener = { + QueryInterface: ChromeUtils.generateQI(["nsIConsoleListener"]), + observe: message => { + if ( + message.microSecondTimeStamp <= latestRetrievedCachedMessageTimestamp + ) { + return; + } + + if (!this.shouldHandleMessage(targetActor, message)) { + return; + } + + onAvailable([this.buildResource(targetActor, message)]); + }, + }; + + // Retrieve the cached messages and get the last cached message timestamp before + // registering the listener, so we can ignore messages we'd be notified about but that + // were already retrieved in the cache. + const cachedMessages = Services.console.getMessageArray() || []; + if (cachedMessages.length) { + latestRetrievedCachedMessageTimestamp = + cachedMessages.at(-1).microSecondTimeStamp; + } + + Services.console.registerListener(listener); + this.listener = listener; + + // Remove unwanted cache messages and send an array of resources. + const messages = []; + for (const message of cachedMessages) { + if (!this.shouldHandleMessage(targetActor, message, true)) { + continue; + } + + messages.push(this.buildResource(targetActor, message)); + } + onAvailable(messages); + } + + /** + * Return false if the watcher shouldn't be created. + * + * @param {TargetActor} targetActor + * @return {Boolean} + */ + shouldHandleTarget(targetActor) { + return true; + } + + /** + * Return true if you want the passed message to be handled by the watcher. This should + * be implemented on the child class. + * + * @param {TargetActor} targetActor + * @param {nsIScriptError|nsIConsoleMessage} message + * @return {Boolean} + */ + shouldHandleMessage(targetActor, message) { + throw new Error( + "'shouldHandleMessage' should be implemented in the class that extends nsIConsoleListenerWatcher" + ); + } + + /** + * Prepare the resource to be sent to the client. This should be implemented on the + * child class. + * + * @param targetActor + * @param nsIScriptError|nsIConsoleMessage message + * @return object + * The object you can send to the remote client. + */ + buildResource(targetActor, message) { + throw new Error( + "'buildResource' should be implemented in the class that extends nsIConsoleListenerWatcher" + ); + } + + /** + * Prepare a SavedFrame stack to be sent to the client. + * + * @param {TargetActor} targetActor + * @param {SavedFrame} errorStack + * Stack for an error we need to send to the client. + * @return object + * The object you can send to the remote client. + */ + prepareStackForRemote(targetActor, errorStack) { + // Convert stack objects to the JSON attributes expected by client code + // Bug 1348885: If the global from which this error came from has been + // nuked, stack is going to be a dead wrapper. + if (!errorStack || (Cu && Cu.isDeadWrapper(errorStack))) { + return null; + } + const stack = []; + let s = errorStack; + while (s) { + stack.push({ + filename: s.source, + sourceId: getActorIdForInternalSourceId(targetActor, s.sourceId), + lineNumber: s.line, + columnNumber: s.column, + functionName: s.functionDisplayName, + asyncCause: s.asyncCause ? s.asyncCause : undefined, + }); + s = s.parent || s.asyncParent; + } + return stack; + } + + /** + * Prepare error notes to be sent to the client. + * + * @param {TargetActor} targetActor + * @param {nsIArray<nsIScriptErrorNote>} errorNotes + * @return object + * The object you can send to the remote client. + */ + prepareNotesForRemote(targetActor, errorNotes) { + if (!errorNotes?.length) { + return null; + } + + const notes = []; + for (let i = 0, len = errorNotes.length; i < len; i++) { + const note = errorNotes.queryElementAt(i, Ci.nsIScriptErrorNote); + notes.push({ + messageBody: createStringGrip(targetActor, note.errorMessage), + frame: { + source: note.sourceName, + sourceId: getActorIdForInternalSourceId(targetActor, note.sourceId), + line: note.lineNumber, + column: note.columnNumber, + }, + }); + } + return notes; + } + + isProcessTarget(targetActor) { + const { typeName } = targetActor; + return ( + typeName === "parentProcessTarget" || typeName === "contentProcessTarget" + ); + } + + /** + * Stop watching for messages. + */ + destroy() { + if (this.listener) { + Services.console.unregisterListener(this.listener); + } + } +} +module.exports = nsIConsoleListenerWatcher; diff --git a/devtools/server/actors/resources/utils/parent-process-storage.js b/devtools/server/actors/resources/utils/parent-process-storage.js new file mode 100644 index 0000000000..423d13b6b5 --- /dev/null +++ b/devtools/server/actors/resources/utils/parent-process-storage.js @@ -0,0 +1,580 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const EventEmitter = require("resource://devtools/shared/event-emitter.js"); +const { isWindowGlobalPartOfContext } = ChromeUtils.importESModule( + "resource://devtools/server/actors/watcher/browsing-context-helpers.sys.mjs" +); + +// ms of delay to throttle updates +const BATCH_DELAY = 200; + +// Filters "stores-update" response to only include events for +// the storage type we desire +function getFilteredStorageEvents(updates, storageType) { + const filteredUpdate = Object.create(null); + + // updateType will be "added", "changed", or "deleted" + for (const updateType in updates) { + if (updates[updateType][storageType]) { + if (!filteredUpdate[updateType]) { + filteredUpdate[updateType] = {}; + } + filteredUpdate[updateType][storageType] = + updates[updateType][storageType]; + } + } + + return Object.keys(filteredUpdate).length ? filteredUpdate : null; +} + +class ParentProcessStorage { + constructor(ActorConstructor, storageKey, storageType) { + this.ActorConstructor = ActorConstructor; + this.storageKey = storageKey; + this.storageType = storageType; + + this.onStoresUpdate = this.onStoresUpdate.bind(this); + this.onStoresCleared = this.onStoresCleared.bind(this); + + this.observe = this.observe.bind(this); + // Notifications that help us keep track of newly added windows and windows + // that got removed + Services.obs.addObserver(this, "window-global-created"); + Services.obs.addObserver(this, "window-global-destroyed"); + + // bfcacheInParent is only enabled when fission is enabled + // and when Session History In Parent is enabled. (all three modes should now enabled all together) + loader.lazyGetter( + this, + "isBfcacheInParentEnabled", + () => + Services.appinfo.sessionHistoryInParent && + Services.prefs.getBoolPref("fission.bfcacheInParent", false) + ); + } + + async watch(watcherActor, { onAvailable }) { + this.watcherActor = watcherActor; + this.onAvailable = onAvailable; + + // When doing a bfcache navigation with Fission disabled or with Fission + bfCacheInParent enabled, + // we're not getting a the window-global-created events. + // In such case, the watcher emits specific events that we can use instead. + this._offPageShow = watcherActor.on( + "bf-cache-navigation-pageshow", + ({ windowGlobal }) => this._onNewWindowGlobal(windowGlobal, true) + ); + + if (watcherActor.sessionContext.type == "browser-element") { + const { browsingContext, innerWindowID: innerWindowId } = + watcherActor.browserElement; + await this._spawnActor(browsingContext.id, innerWindowId); + } else if (watcherActor.sessionContext.type == "webextension") { + const { addonBrowsingContextID, addonInnerWindowId } = + watcherActor.sessionContext; + await this._spawnActor(addonBrowsingContextID, addonInnerWindowId); + } else if (watcherActor.sessionContext.type == "all") { + const parentProcessTargetActor = + this.watcherActor.getTargetActorInParentProcess(); + const { browsingContextID, innerWindowId } = + parentProcessTargetActor.form(); + await this._spawnActor(browsingContextID, innerWindowId); + } else { + throw new Error( + "Unsupported session context type=" + watcherActor.sessionContext.type + ); + } + } + + onStoresUpdate(response) { + response = getFilteredStorageEvents(response, this.storageKey); + if (!response) { + return; + } + this.actor.emit("single-store-update", { + changed: response.changed, + added: response.added, + deleted: response.deleted, + }); + } + + onStoresCleared(response) { + const cleared = response[this.storageKey]; + + if (!cleared) { + return; + } + + this.actor.emit("single-store-cleared", { + clearedHostsOrPaths: cleared, + }); + } + + destroy() { + // Remove observers + Services.obs.removeObserver(this, "window-global-created"); + Services.obs.removeObserver(this, "window-global-destroyed"); + this._offPageShow(); + this._cleanActor(); + } + + async _spawnActor(browsingContextID, innerWindowId) { + const storageActor = new StorageActorMock(this.watcherActor); + this.storageActor = storageActor; + this.actor = new this.ActorConstructor(storageActor); + + // Some storage types require to prelist their stores + try { + await this.actor.populateStoresForHosts(); + } catch (e) { + // It can happen that the actor gets destroyed while populateStoresForHosts is being + // executed. + if (this.actor) { + throw e; + } + } + + // If the actor was destroyed, we don't need to go further. + if (!this.actor) { + return; + } + + // We have to manage the actor manually, because ResourceCommand doesn't + // use the protocol.js specification. + // resource-available-form is typed as "json" + // So that we have to manually handle stuff that would normally be + // automagically done by procotol.js + // 1) Manage the actor in order to have an actorID on it + this.watcherActor.manage(this.actor); + // 2) Convert to JSON "form" + const storage = this.actor.form(); + + // All resources should have a resourceType, resourceId and resourceKey + // attributes, so available/updated/destroyed callbacks work properly. + storage.resourceType = this.storageType; + storage.resourceId = `${this.storageType}-${innerWindowId}`; + storage.resourceKey = this.storageKey; + // NOTE: the resource command needs this attribute + storage.browsingContextID = browsingContextID; + + this.onAvailable([storage]); + + // Maps global events from `storageActor` shared for all storage-types, + // down to storage-type's specific actor `storage`. + storageActor.on("stores-update", this.onStoresUpdate); + + // When a store gets cleared + storageActor.on("stores-cleared", this.onStoresCleared); + } + + _cleanActor() { + this.actor?.destroy(); + this.actor = null; + if (this.storageActor) { + this.storageActor.off("stores-update", this.onStoresUpdate); + this.storageActor.off("stores-cleared", this.onStoresCleared); + this.storageActor.destroy(); + this.storageActor = null; + } + } + + /** + * Event handler for any docshell update. This lets us figure out whenever + * any new window is added, or an existing window is removed. + */ + observe(subject, topic) { + if (topic === "window-global-created") { + this._onNewWindowGlobal(subject); + } + } + + /** + * Handle WindowGlobal received via: + * - <window-global-created> (to cover regular navigations, with brand new documents) + * - <bf-cache-navigation-pageshow> (to cover history navications) + * + * @param {WindowGlobal} windowGlobal + * @param {Boolean} isBfCacheNavigation + */ + async _onNewWindowGlobal(windowGlobal, isBfCacheNavigation) { + // Only process WindowGlobals which are related to the debugged scope. + if ( + !isWindowGlobalPartOfContext( + windowGlobal, + this.watcherActor.sessionContext, + { acceptNoWindowGlobal: true, acceptSameProcessIframes: true } + ) + ) { + return; + } + + // Ignore about:blank + if (windowGlobal.documentURI.displaySpec === "about:blank") { + return; + } + + // Only process top BrowsingContext (ignore same-process iframe ones) + const isTopContext = + windowGlobal.browsingContext.top == windowGlobal.browsingContext; + if (!isTopContext) { + return; + } + + // We only want to spawn a new StorageActor if a new target is being created, i.e. + // - target switching is enabled and we're notified about a new top-level window global, + // via window-global-created + // - target switching is enabled OR bfCacheInParent is enabled, and a bfcache navigation + // is performed (See handling of "pageshow" event in DevToolsFrameChild) + const isNewTargetBeingCreated = + this.watcherActor.sessionContext.isServerTargetSwitchingEnabled || + (isBfCacheNavigation && this.isBfcacheInParentEnabled); + + if (!isNewTargetBeingCreated) { + return; + } + + // When server side target switching is enabled, we replace the StorageActor + // with a new one. + // On the frontend, the navigation will destroy the previous target, which + // will destroy the previous storage front, so we must notify about a new one. + + // When we are target switching we keep the storage watcher, so we need + // to send a new resource to the client. + // However, we must ensure that we do this when the new target is + // already available, so we check innerWindowId to do it. + await new Promise(resolve => { + const listener = targetActorForm => { + if (targetActorForm.innerWindowId != windowGlobal.innerWindowId) { + return; + } + this.watcherActor.off("target-available-form", listener); + resolve(); + }; + this.watcherActor.on("target-available-form", listener); + }); + + this._cleanActor(); + this._spawnActor( + windowGlobal.browsingContext.id, + windowGlobal.innerWindowId + ); + } +} + +module.exports = ParentProcessStorage; + +class StorageActorMock extends EventEmitter { + constructor(watcherActor) { + super(); + + this.conn = watcherActor.conn; + this.watcherActor = watcherActor; + + this.boundUpdate = {}; + + // Notifications that help us keep track of newly added windows and windows + // that got removed + this.observe = this.observe.bind(this); + Services.obs.addObserver(this, "window-global-created"); + Services.obs.addObserver(this, "window-global-destroyed"); + + // When doing a bfcache navigation with Fission disabled or with Fission + bfCacheInParent enabled, + // we're not getting a the window-global-created/window-global-destroyed events. + // In such case, the watcher emits specific events that we can use as equivalent to + // window-global-created/window-global-destroyed. + // We only need to react to those events here if target switching is not enabled; when + // it is enabled, ParentProcessStorage will spawn a whole new actor which will allow + // the client to get the information it needs. + if (!this.watcherActor.sessionContext.isServerTargetSwitchingEnabled) { + this._offPageShow = watcherActor.on( + "bf-cache-navigation-pageshow", + ({ windowGlobal }) => { + // if a new target is created in the content process as a result of the bfcache + // navigation, we don't need to emit window-ready as a new StorageActorMock will + // be created by ParentProcessStorage. + // When server targets are disabled, this only happens when bfcache in parent is enabled. + if (this.isBfcacheInParentEnabled) { + return; + } + const windowMock = { location: windowGlobal.documentURI }; + this.emit("window-ready", windowMock); + } + ); + + this._offPageHide = watcherActor.on( + "bf-cache-navigation-pagehide", + ({ windowGlobal }) => { + const windowMock = { location: windowGlobal.documentURI }; + // The listener of this events usually check that there are no other windows + // with the same host before notifying the client that it can remove it from + // the UI. The windows are retrieved from the `windows` getter, and in this case + // we still have a reference to the window we're navigating away from. + // We pass a `dontCheckHost` parameter alongside the window-destroyed event to + // always notify the client. + this.emit("window-destroyed", windowMock, { dontCheckHost: true }); + } + ); + } + } + + destroy() { + // clear update throttle timeout + clearTimeout(this.batchTimer); + this.batchTimer = null; + // Remove observers + Services.obs.removeObserver(this, "window-global-created"); + Services.obs.removeObserver(this, "window-global-destroyed"); + if (this._offPageShow) { + this._offPageShow(); + } + if (this._offPageHide) { + this._offPageHide(); + } + } + + get windows() { + return ( + this.watcherActor + .getAllBrowsingContexts({ + acceptSameProcessIframes: true, + }) + .map(x => { + const uri = x.currentWindowGlobal.documentURI; + return { location: uri }; + }) + // NOTE: we are removing about:blank because we might get them for iframes + // whose src attribute has not been set yet. + .filter(x => x.location.displaySpec !== "about:blank") + ); + } + + // NOTE: this uri argument is not a real window.Location, but the + // `currentWindowGlobal.documentURI` object passed from `windows` getter. + getHostName(uri) { + switch (uri.scheme) { + case "about": + case "file": + case "javascript": + case "resource": + return uri.displaySpec; + case "moz-extension": + case "http": + case "https": + return uri.prePath; + default: + // chrome: and data: do not support storage + return null; + } + } + + getWindowFromHost(host) { + const hostBrowsingContext = this.watcherActor + .getAllBrowsingContexts({ acceptSameProcessIframes: true }) + .find(x => { + const hostName = this.getHostName(x.currentWindowGlobal.documentURI); + return hostName === host; + }); + // In case of WebExtension or BrowserToolbox, we may pass privileged hosts + // which don't relate to any particular window. + // Like "indexeddb+++fx-devtools" or "chrome". + // (callsites of this method are used to handle null returned values) + if (!hostBrowsingContext) { + return null; + } + + const principal = + hostBrowsingContext.currentWindowGlobal.documentStoragePrincipal; + + return { document: { effectiveStoragePrincipal: principal } }; + } + + get parentActor() { + return { + isRootActor: this.watcherActor.sessionContext.type == "all", + addonId: this.watcherActor.sessionContext.addonId, + }; + } + + /** + * Event handler for any docshell update. This lets us figure out whenever + * any new window is added, or an existing window is removed. + */ + async observe(windowGlobal, topic) { + // Only process WindowGlobals which are related to the debugged scope. + if ( + !isWindowGlobalPartOfContext( + windowGlobal, + this.watcherActor.sessionContext, + { acceptNoWindowGlobal: true, acceptSameProcessIframes: true } + ) + ) { + return; + } + + // Ignore about:blank + if (windowGlobal.documentURI.displaySpec === "about:blank") { + return; + } + + // Only notify about remote iframe windows when JSWindowActor based targets are enabled + // We will create a new StorageActor for the top level tab documents when server side target + // switching is enabled + const isTopContext = + windowGlobal.browsingContext.top == windowGlobal.browsingContext; + if ( + isTopContext && + this.watcherActor.sessionContext.isServerTargetSwitchingEnabled + ) { + return; + } + + // emit window-wready and window-destroyed events when needed + const windowMock = { location: windowGlobal.documentURI }; + if (topic === "window-global-created") { + this.emit("window-ready", windowMock); + } else if (topic === "window-global-destroyed") { + this.emit("window-destroyed", windowMock); + } + } + + /** + * This method is called by the registered storage types so as to tell the + * Storage Actor that there are some changes in the stores. Storage Actor then + * notifies the client front about these changes at regular (BATCH_DELAY) + * interval. + * + * @param {string} action + * The type of change. One of "added", "changed" or "deleted" + * @param {string} storeType + * The storage actor in which this change has occurred. + * @param {object} data + * The update object. This object is of the following format: + * - { + * <host1>: [<store_names1>, <store_name2>...], + * <host2>: [<store_names34>...], + * } + * Where host1, host2 are the host in which this change happened and + * [<store_namesX] is an array of the names of the changed store objects. + * Pass an empty array if the host itself was affected: either completely + * removed or cleared. + */ + // eslint-disable-next-line complexity + update(action, storeType, data) { + if (action == "cleared") { + this.emit("stores-cleared", { [storeType]: data }); + return null; + } + + if (this.batchTimer) { + clearTimeout(this.batchTimer); + } + if (!this.boundUpdate[action]) { + this.boundUpdate[action] = {}; + } + if (!this.boundUpdate[action][storeType]) { + this.boundUpdate[action][storeType] = {}; + } + for (const host in data) { + if (!this.boundUpdate[action][storeType][host]) { + this.boundUpdate[action][storeType][host] = []; + } + for (const name of data[host]) { + if (!this.boundUpdate[action][storeType][host].includes(name)) { + this.boundUpdate[action][storeType][host].push(name); + } + } + } + if (action == "added") { + // If the same store name was previously deleted or changed, but now is + // added somehow, dont send the deleted or changed update. + this.removeNamesFromUpdateList("deleted", storeType, data); + this.removeNamesFromUpdateList("changed", storeType, data); + } else if ( + action == "changed" && + this.boundUpdate.added && + this.boundUpdate.added[storeType] + ) { + // If something got added and changed at the same time, then remove those + // items from changed instead. + this.removeNamesFromUpdateList( + "changed", + storeType, + this.boundUpdate.added[storeType] + ); + } else if (action == "deleted") { + // If any item got delete, or a host got delete, no point in sending + // added or changed update + this.removeNamesFromUpdateList("added", storeType, data); + this.removeNamesFromUpdateList("changed", storeType, data); + + for (const host in data) { + if ( + !data[host].length && + this.boundUpdate.added && + this.boundUpdate.added[storeType] && + this.boundUpdate.added[storeType][host] + ) { + delete this.boundUpdate.added[storeType][host]; + } + if ( + !data[host].length && + this.boundUpdate.changed && + this.boundUpdate.changed[storeType] && + this.boundUpdate.changed[storeType][host] + ) { + delete this.boundUpdate.changed[storeType][host]; + } + } + } + + this.batchTimer = setTimeout(() => { + clearTimeout(this.batchTimer); + this.emit("stores-update", this.boundUpdate); + this.boundUpdate = {}; + }, BATCH_DELAY); + + return null; + } + + /** + * This method removes data from the this.boundUpdate object in the same + * manner like this.update() adds data to it. + * + * @param {string} action + * The type of change. One of "added", "changed" or "deleted" + * @param {string} storeType + * The storage actor for which you want to remove the updates data. + * @param {object} data + * The update object. This object is of the following format: + * - { + * <host1>: [<store_names1>, <store_name2>...], + * <host2>: [<store_names34>...], + * } + * Where host1, host2 are the hosts which you want to remove and + * [<store_namesX] is an array of the names of the store objects. + */ + removeNamesFromUpdateList(action, storeType, data) { + for (const host in data) { + if ( + this.boundUpdate[action] && + this.boundUpdate[action][storeType] && + this.boundUpdate[action][storeType][host] + ) { + for (const name of data[host]) { + const index = this.boundUpdate[action][storeType][host].indexOf(name); + if (index > -1) { + this.boundUpdate[action][storeType][host].splice(index, 1); + } + } + if (!this.boundUpdate[action][storeType][host].length) { + delete this.boundUpdate[action][storeType][host]; + } + } + } + return null; + } +} diff --git a/devtools/server/actors/resources/websockets.js b/devtools/server/actors/resources/websockets.js new file mode 100644 index 0000000000..5845357a9c --- /dev/null +++ b/devtools/server/actors/resources/websockets.js @@ -0,0 +1,196 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const { + LongStringActor, +} = require("resource://devtools/server/actors/string.js"); + +const { + TYPES: { WEBSOCKET }, +} = require("resource://devtools/server/actors/resources/index.js"); + +const webSocketEventService = Cc[ + "@mozilla.org/websocketevent/service;1" +].getService(Ci.nsIWebSocketEventService); + +class WebSocketWatcher { + constructor() { + this.windowIds = new Set(); + // Maintains a map of all the connection channels per websocket + // The map item is keyed on the `webSocketSerialID` and stores + // the `httpChannelId` as value. + this.connections = new Map(); + this.onWindowReady = this.onWindowReady.bind(this); + this.onWindowDestroy = this.onWindowDestroy.bind(this); + } + + static createResource(wsMessageType, eventParams) { + return { + resourceType: WEBSOCKET, + wsMessageType, + ...eventParams, + }; + } + + static prepareFramePayload(targetActor, frame) { + const payload = new LongStringActor(targetActor.conn, frame.payload); + targetActor.manage(payload); + return payload.form(); + } + + watch(targetActor, { onAvailable }) { + this.targetActor = targetActor; + this.onAvailable = onAvailable; + + for (const window of this.targetActor.windows) { + const { innerWindowId } = window.windowGlobalChild; + this.startListening(innerWindowId); + } + + // On navigate/reload we should re-start listening with the + // new `innerWindowID` + this.targetActor.on("window-ready", this.onWindowReady); + this.targetActor.on("window-destroyed", this.onWindowDestroy); + } + + onWindowReady({ window }) { + if (!this.targetActor.followWindowGlobalLifeCycle) { + const { innerWindowId } = window.windowGlobalChild; + this.startListening(innerWindowId); + } + } + + onWindowDestroy({ id }) { + this.stopListening(id); + } + + startListening(innerWindowId) { + if (!this.windowIds.has(innerWindowId)) { + this.windowIds.add(innerWindowId); + webSocketEventService.addListener(innerWindowId, this); + } + } + + stopListening(innerWindowId) { + if (this.windowIds.has(innerWindowId)) { + this.windowIds.delete(innerWindowId); + if (!webSocketEventService.hasListenerFor(innerWindowId)) { + // The listener might have already been cleaned up on `window-destroy`. + console.warn( + "Already stopped listening to websocket events for this window." + ); + return; + } + webSocketEventService.removeListener(innerWindowId, this); + } + } + + destroy() { + for (const id of this.windowIds) { + this.stopListening(id); + } + this.targetActor.off("window-ready", this.onWindowReady); + this.targetActor.off("window-destroyed", this.onWindowDestroy); + } + + // methods for the nsIWebSocketEventService + webSocketCreated(webSocketSerialID, uri, protocols) {} + + webSocketOpened( + webSocketSerialID, + effectiveURI, + protocols, + extensions, + httpChannelId + ) { + this.connections.set(webSocketSerialID, httpChannelId); + const resource = WebSocketWatcher.createResource("webSocketOpened", { + httpChannelId, + effectiveURI, + protocols, + extensions, + }); + + this.onAvailable([resource]); + } + + webSocketMessageAvailable(webSocketSerialID, data, messageType) {} + + webSocketClosed(webSocketSerialID, wasClean, code, reason) { + const httpChannelId = this.connections.get(webSocketSerialID); + this.connections.delete(webSocketSerialID); + + const resource = WebSocketWatcher.createResource("webSocketClosed", { + httpChannelId, + wasClean, + code, + reason, + }); + + this.onAvailable([resource]); + } + + frameReceived(webSocketSerialID, frame) { + const httpChannelId = this.connections.get(webSocketSerialID); + if (!httpChannelId) { + return; + } + + const payload = WebSocketWatcher.prepareFramePayload( + this.targetActor, + frame + ); + const resource = WebSocketWatcher.createResource("frameReceived", { + httpChannelId, + data: { + type: "received", + payload, + timeStamp: frame.timeStamp, + finBit: frame.finBit, + rsvBit1: frame.rsvBit1, + rsvBit2: frame.rsvBit2, + rsvBit3: frame.rsvBit3, + opCode: frame.opCode, + mask: frame.mask, + maskBit: frame.maskBit, + }, + }); + + this.onAvailable([resource]); + } + + frameSent(webSocketSerialID, frame) { + const httpChannelId = this.connections.get(webSocketSerialID); + + if (!httpChannelId) { + return; + } + + const payload = WebSocketWatcher.prepareFramePayload( + this.targetActor, + frame + ); + const resource = WebSocketWatcher.createResource("frameSent", { + httpChannelId, + data: { + type: "sent", + payload, + timeStamp: frame.timeStamp, + finBit: frame.finBit, + rsvBit1: frame.rsvBit1, + rsvBit2: frame.rsvBit2, + rsvBit3: frame.rsvBit3, + opCode: frame.opCode, + mask: frame.mask, + maskBit: frame.maskBit, + }, + }); + + this.onAvailable([resource]); + } +} + +module.exports = WebSocketWatcher; diff --git a/devtools/server/actors/root.js b/devtools/server/actors/root.js new file mode 100644 index 0000000000..df16c70b2f --- /dev/null +++ b/devtools/server/actors/root.js @@ -0,0 +1,606 @@ +/* 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"; + +// protocol.js uses objects as exceptions in order to define +// error packets. +/* eslint-disable no-throw-literal */ + +const { Actor, Pool } = require("resource://devtools/shared/protocol.js"); +const { rootSpec } = require("resource://devtools/shared/specs/root.js"); + +const { + LazyPool, + createExtraActors, +} = require("resource://devtools/shared/protocol/lazy-pool.js"); +const { + DevToolsServer, +} = require("resource://devtools/server/devtools-server.js"); +const Resources = require("resource://devtools/server/actors/resources/index.js"); + +loader.lazyRequireGetter( + this, + "ProcessDescriptorActor", + "resource://devtools/server/actors/descriptors/process.js", + true +); + +/* Root actor for the remote debugging protocol. */ + +/** + * Create a remote debugging protocol root actor. + * + * @param conn + * The DevToolsServerConnection whose root actor we are constructing. + * + * @param parameters + * The properties of |parameters| provide backing objects for the root + * actor's requests; if a given property is omitted from |parameters|, the + * root actor won't implement the corresponding requests or notifications. + * Supported properties: + * + * - tabList: a live list (see below) of target actors for tabs. If present, + * the new root actor supports the 'listTabs' request, providing the live + * list's elements as its target actors, and sending 'tabListChanged' + * notifications when the live list's contents change. One actor in + * this list must have a true '.selected' property. + * + * - addonList: a live list (see below) of addon actors. If present, the + * new root actor supports the 'listAddons' request, providing the live + * list's elements as its addon actors, and sending 'addonListchanged' + * notifications when the live list's contents change. + * + * - globalActorFactories: an object |A| describing further actors to + * attach to the 'listTabs' reply. This is the type accumulated by + * ActorRegistry.addGlobalActor. For each own property |P| of |A|, + * the root actor adds a property named |P| to the 'listTabs' + * reply whose value is the name of an actor constructed by + * |A[P]|. + * + * - onShutdown: a function to call when the root actor is destroyed. + * + * Instance properties: + * + * - applicationType: the string the root actor will include as the + * "applicationType" property in the greeting packet. By default, this + * is "browser". + * + * Live lists: + * + * A "live list", as used for the |tabList|, is an object that presents a + * list of actors, and also notifies its clients of changes to the list. A + * live list's interface is two properties: + * + * - getList: a method that returns a promise to the contents of the list. + * + * - onListChanged: a handler called, with no arguments, when the set of + * values the iterator would produce has changed since the last + * time 'iterator' was called. This may only be set to null or a + * callable value (one for which the typeof operator returns + * 'function'). (Note that the live list will not call the + * onListChanged handler until the list has been iterated over + * once; if nobody's seen the list in the first place, nobody + * should care if its contents have changed!) + * + * When the list changes, the list implementation should ensure that any + * actors yielded in previous iterations whose referents (tabs) still exist + * get yielded again in subsequent iterations. If the underlying referent + * is the same, the same actor should be presented for it. + * + * The root actor registers an 'onListChanged' handler on the appropriate + * list when it may need to send the client 'tabListChanged' notifications, + * and is careful to remove the handler whenever it does not need to send + * such notifications (including when it is destroyed). This means that + * live list implementations can use the state of the handler property (set + * or null) to install and remove observers and event listeners. + * + * Note that, as the only way for the root actor to see the members of the + * live list is to begin an iteration over the list, the live list need not + * actually produce any actors until they are reached in the course of + * iteration: alliterative lazy live lists. + */ +class RootActor extends Actor { + constructor(conn, parameters) { + super(conn, rootSpec); + + this._parameters = parameters; + this._onTabListChanged = this.onTabListChanged.bind(this); + this._onAddonListChanged = this.onAddonListChanged.bind(this); + this._onWorkerListChanged = this.onWorkerListChanged.bind(this); + this._onServiceWorkerRegistrationListChanged = + this.onServiceWorkerRegistrationListChanged.bind(this); + this._onProcessListChanged = this.onProcessListChanged.bind(this); + + this._extraActors = {}; + + this._globalActorPool = new LazyPool(this.conn); + + this.applicationType = "browser"; + + // Compute the list of all supported Root Resources + const supportedResources = {}; + for (const resourceType in Resources.RootResources) { + supportedResources[resourceType] = true; + } + + this.traits = { + networkMonitor: true, + resources: supportedResources, + // @backward-compat { version 84 } Expose the pref value to the client. + // Services.prefs is undefined in xpcshell tests. + workerConsoleApiMessagesDispatchedToMainThread: Services.prefs + ? Services.prefs.getBoolPref( + "dom.worker.console.dispatch_events_to_main_thread" + ) + : true, + // @backward-compat { version 123 } A new Objects Manager front has a new "releaseActors" method. + supportsReleaseActors: true, + }; + } + + /** + * Return a 'hello' packet as specified by the Remote Debugging Protocol. + */ + sayHello() { + return { + from: this.actorID, + applicationType: this.applicationType, + /* This is not in the spec, but it's used by tests. */ + testConnectionPrefix: this.conn.prefix, + traits: this.traits, + }; + } + + forwardingCancelled(prefix) { + return { + from: this.actorID, + type: "forwardingCancelled", + prefix, + }; + } + + /** + * Destroys the actor from the browser window. + */ + destroy() { + Resources.unwatchAllResources(this); + + super.destroy(); + + /* Tell the live lists we aren't watching any more. */ + if (this._parameters.tabList) { + this._parameters.tabList.destroy(); + } + if (this._parameters.addonList) { + this._parameters.addonList.onListChanged = null; + } + if (this._parameters.workerList) { + this._parameters.workerList.destroy(); + } + if (this._parameters.serviceWorkerRegistrationList) { + this._parameters.serviceWorkerRegistrationList.onListChanged = null; + } + if (this._parameters.processList) { + this._parameters.processList.onListChanged = null; + } + if (typeof this._parameters.onShutdown === "function") { + this._parameters.onShutdown(); + } + // Cleanup Actors on destroy + if (this._tabDescriptorActorPool) { + this._tabDescriptorActorPool.destroy(); + } + if (this._processDescriptorActorPool) { + this._processDescriptorActorPool.destroy(); + } + if (this._globalActorPool) { + this._globalActorPool.destroy(); + } + if (this._addonTargetActorPool) { + this._addonTargetActorPool.destroy(); + } + if (this._workerDescriptorActorPool) { + this._workerDescriptorActorPool.destroy(); + } + if (this._frameDescriptorActorPool) { + this._frameDescriptorActorPool.destroy(); + } + + if (this._serviceWorkerRegistrationActorPool) { + this._serviceWorkerRegistrationActorPool.destroy(); + } + this._extraActors = null; + this._tabDescriptorActorPool = null; + this._globalActorPool = null; + this._parameters = null; + } + + /** + * Gets the "root" form, which lists all the global actors that affect the entire + * browser. + */ + getRoot() { + // Create global actors + if (!this._globalActorPool) { + this._globalActorPool = new LazyPool(this.conn); + } + const actors = createExtraActors( + this._parameters.globalActorFactories, + this._globalActorPool, + this + ); + + return actors; + } + + /* The 'listTabs' request and the 'tabListChanged' notification. */ + + /** + * Handles the listTabs request. The actors will survive until at least + * the next listTabs request. + */ + async listTabs() { + const tabList = this._parameters.tabList; + if (!tabList) { + throw { + error: "noTabs", + message: "This root actor has no browser tabs.", + }; + } + + // Now that a client has requested the list of tabs, we reattach the onListChanged + // listener in order to be notified if the list of tabs changes again in the future. + tabList.onListChanged = this._onTabListChanged; + + // Walk the tab list, accumulating the array of target actors for the reply, and + // moving all the actors to a new Pool. We'll replace the old tab target actor + // pool with the one we build here, thus retiring any actors that didn't get listed + // again, and preparing any new actors to receive packets. + const newActorPool = new Pool(this.conn, "listTabs-tab-descriptors"); + + const tabDescriptorActors = await tabList.getList(); + for (const tabDescriptorActor of tabDescriptorActors) { + newActorPool.manage(tabDescriptorActor); + } + + // Drop the old actorID -> actor map. Actors that still mattered were added to the + // new map; others will go away. + if (this._tabDescriptorActorPool) { + this._tabDescriptorActorPool.destroy(); + } + this._tabDescriptorActorPool = newActorPool; + + return tabDescriptorActors; + } + + /** + * Return the tab descriptor actor for the tab identified by one of the IDs + * passed as argument. + * + * See BrowserTabList.prototype.getTab for the definition of these IDs. + */ + async getTab({ browserId }) { + const tabList = this._parameters.tabList; + if (!tabList) { + throw { + error: "noTabs", + message: "This root actor has no browser tabs.", + }; + } + if (!this._tabDescriptorActorPool) { + this._tabDescriptorActorPool = new Pool( + this.conn, + "getTab-tab-descriptors" + ); + } + + let descriptorActor; + try { + descriptorActor = await tabList.getTab({ + browserId, + }); + } catch (error) { + if (error.error) { + // Pipe expected errors as-is to the client + throw error; + } + throw { + error: "noTab", + message: "Unexpected error while calling getTab(): " + error, + }; + } + + descriptorActor.parentID = this.actorID; + this._tabDescriptorActorPool.manage(descriptorActor); + + return descriptorActor; + } + + onTabListChanged() { + this.conn.send({ from: this.actorID, type: "tabListChanged" }); + /* It's a one-shot notification; no need to watch any more. */ + this._parameters.tabList.onListChanged = null; + } + + /** + * This function can receive the following option from devtools client. + * + * @param {Object} option + * - iconDataURL: {boolean} + * When true, make data url from the icon of addon, then make possible to + * access by iconDataURL in the actor. The iconDataURL is useful when + * retrieving addons from a remote device, because the raw iconURL might not + * be accessible on the client. + */ + async listAddons(option) { + const addonList = this._parameters.addonList; + if (!addonList) { + throw { + error: "noAddons", + message: "This root actor has no browser addons.", + }; + } + + // Reattach the onListChanged listener now that a client requested the list. + addonList.onListChanged = this._onAddonListChanged; + + const addonTargetActors = await addonList.getList(); + const addonTargetActorPool = new Pool(this.conn, "addon-descriptors"); + for (const addonTargetActor of addonTargetActors) { + if (option.iconDataURL) { + await addonTargetActor.loadIconDataURL(); + } + + addonTargetActorPool.manage(addonTargetActor); + } + + if (this._addonTargetActorPool) { + this._addonTargetActorPool.destroy(); + } + this._addonTargetActorPool = addonTargetActorPool; + + return addonTargetActors; + } + + onAddonListChanged() { + this.conn.send({ from: this.actorID, type: "addonListChanged" }); + this._parameters.addonList.onListChanged = null; + } + + listWorkers() { + const workerList = this._parameters.workerList; + if (!workerList) { + throw { + error: "noWorkers", + message: "This root actor has no workers.", + }; + } + + // Reattach the onListChanged listener now that a client requested the list. + workerList.onListChanged = this._onWorkerListChanged; + + return workerList.getList().then(actors => { + const pool = new Pool(this.conn, "worker-targets"); + for (const actor of actors) { + pool.manage(actor); + } + + // Do not destroy the pool before transfering ownership to the newly created + // pool, so that we do not accidently destroy actors that are still in use. + if (this._workerDescriptorActorPool) { + this._workerDescriptorActorPool.destroy(); + } + + this._workerDescriptorActorPool = pool; + + return { + workers: actors, + }; + }); + } + + onWorkerListChanged() { + this.conn.send({ from: this.actorID, type: "workerListChanged" }); + this._parameters.workerList.onListChanged = null; + } + + listServiceWorkerRegistrations() { + const registrationList = this._parameters.serviceWorkerRegistrationList; + if (!registrationList) { + throw { + error: "noServiceWorkerRegistrations", + message: "This root actor has no service worker registrations.", + }; + } + + // Reattach the onListChanged listener now that a client requested the list. + registrationList.onListChanged = + this._onServiceWorkerRegistrationListChanged; + + return registrationList.getList().then(actors => { + const pool = new Pool(this.conn, "service-workers-registrations"); + for (const actor of actors) { + pool.manage(actor); + } + + if (this._serviceWorkerRegistrationActorPool) { + this._serviceWorkerRegistrationActorPool.destroy(); + } + this._serviceWorkerRegistrationActorPool = pool; + + return { + registrations: actors, + }; + }); + } + + onServiceWorkerRegistrationListChanged() { + this.conn.send({ + from: this.actorID, + type: "serviceWorkerRegistrationListChanged", + }); + this._parameters.serviceWorkerRegistrationList.onListChanged = null; + } + + listProcesses() { + const { processList } = this._parameters; + if (!processList) { + throw { + error: "noProcesses", + message: "This root actor has no processes.", + }; + } + processList.onListChanged = this._onProcessListChanged; + const processes = processList.getList(); + const pool = new Pool(this.conn, "process-descriptors"); + for (const metadata of processes) { + let processDescriptor = this._getKnownDescriptor( + metadata.id, + this._processDescriptorActorPool + ); + if (!processDescriptor) { + processDescriptor = new ProcessDescriptorActor(this.conn, metadata); + } + pool.manage(processDescriptor); + } + // Do not destroy the pool before transfering ownership to the newly created + // pool, so that we do not accidently destroy actors that are still in use. + if (this._processDescriptorActorPool) { + this._processDescriptorActorPool.destroy(); + } + this._processDescriptorActorPool = pool; + return [...this._processDescriptorActorPool.poolChildren()]; + } + + onProcessListChanged() { + this.conn.send({ from: this.actorID, type: "processListChanged" }); + this._parameters.processList.onListChanged = null; + } + + async getProcess(id) { + if (!DevToolsServer.allowChromeProcess) { + throw { + error: "forbidden", + message: "You are not allowed to debug chrome.", + }; + } + if (typeof id != "number") { + throw { + error: "wrongParameter", + message: "getProcess requires a valid `id` attribute.", + }; + } + this._processDescriptorActorPool = + this._processDescriptorActorPool || + new Pool(this.conn, "process-descriptors"); + + let processDescriptor = this._getKnownDescriptor( + id, + this._processDescriptorActorPool + ); + if (!processDescriptor) { + // The parent process has id == 0, based on ProcessActorList::getList implementation + const options = { id, parent: id === 0 }; + processDescriptor = new ProcessDescriptorActor(this.conn, options); + this._processDescriptorActorPool.manage(processDescriptor); + } + return processDescriptor; + } + + _getKnownDescriptor(id, pool) { + // if there is no pool, then we do not have any descriptors + if (!pool) { + return null; + } + for (const descriptor of pool.poolChildren()) { + if (descriptor.id === id) { + return descriptor; + } + } + return null; + } + + /** + * Remove the extra actor (added by ActorRegistry.addGlobalActor or + * ActorRegistry.addTargetScopedActor) name |name|. + */ + removeActorByName(name) { + if (name in this._extraActors) { + const actor = this._extraActors[name]; + if (this._globalActorPool.has(actor.actorID)) { + actor.destroy(); + } + if (this._tabDescriptorActorPool) { + // Iterate over WindowGlobalTargetActor instances to also remove target-scoped + // actors created during listTabs for each document. + for (const tab in this._tabDescriptorActorPool.poolChildren()) { + tab.removeActorByName(name); + } + } + delete this._extraActors[name]; + } + } + + /** + * Start watching for a list of resource types. + * + * See WatcherActor.watchResources. + */ + async watchResources(resourceTypes) { + await Resources.watchResources(this, resourceTypes); + } + + /** + * Stop watching for a list of resource types. + * + * See WatcherActor.unwatchResources. + */ + unwatchResources(resourceTypes) { + Resources.unwatchResources(this, resourceTypes); + } + + /** + * Clear resources of a list of resource types. + * + * See WatcherActor.clearResources. + */ + clearResources(resourceTypes) { + Resources.clearResources(this, resourceTypes); + } + + /** + * Called by Resource Watchers, when new resources are available, updated or destroyed. + * + * @param String updateType + * Can be "available", "updated" or "destroyed" + * @param Array<json> resources + * List of all resources. A resource is a JSON object piped over to the client. + * It can contain actor IDs. + * It can also be or contain an actor form, to be manually marshalled by the client. + * (i.e. the frontend would have to manually instantiate a Front for the given actor form) + */ + notifyResources(updateType, resources) { + if (resources.length === 0) { + // Don't try to emit if the resources array is empty. + return; + } + + switch (updateType) { + case "available": + this.emit(`resource-available-form`, resources); + break; + case "updated": + this.emit(`resource-updated-form`, resources); + break; + case "destroyed": + this.emit(`resource-destroyed-form`, resources); + break; + default: + throw new Error("Unsupported update type: " + updateType); + } + } +} + +exports.RootActor = RootActor; diff --git a/devtools/server/actors/screenshot-content.js b/devtools/server/actors/screenshot-content.js new file mode 100644 index 0000000000..0e47ae1157 --- /dev/null +++ b/devtools/server/actors/screenshot-content.js @@ -0,0 +1,144 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ +"use strict"; + +const { Actor } = require("resource://devtools/shared/protocol.js"); +const { + screenshotContentSpec, +} = require("resource://devtools/shared/specs/screenshot-content.js"); + +const { LocalizationHelper } = require("resource://devtools/shared/l10n.js"); +const STRINGS_URI = "devtools/shared/locales/screenshot.properties"; +const L10N = new LocalizationHelper(STRINGS_URI); +loader.lazyRequireGetter( + this, + ["getCurrentZoom", "getRect"], + "resource://devtools/shared/layout/utils.js", + true +); + +exports.ScreenshotContentActor = class ScreenshotContentActor extends Actor { + constructor(conn, targetActor) { + super(conn, screenshotContentSpec); + this.targetActor = targetActor; + } + + _getRectForNode(node) { + const originWindow = this.targetActor.ignoreSubFrames + ? node.ownerGlobal + : node.ownerGlobal.top; + return getRect(originWindow, node, node.ownerGlobal); + } + + /** + * Retrieve some window-related information that will be passed to the parent process + * to actually generate the screenshot. + * + * @param {Object} args + * @param {Boolean} args.fullpage: Should the screenshot be the height of the whole page + * @param {String} args.selector: A CSS selector for the element we should take the + * screenshot of. The function will return true for the `error` property + * if the screenshot does not match any element. + * @param {String} args.nodeActorID: The actorID of the node actor matching the element + * we should take the screenshot of. + * @returns {Object} An object with the following properties: + * - error {Boolean}: Set to true if an issue was encountered that prevents + * taking the screenshot + * - messages {Array<Object{text, level}>}: An array of objects representing + * the messages emitted throught the process and their level. + * - windowDpr {Number}: Value of window.devicePixelRatio + * - windowZoom {Number}: The page current zoom level + * - rect {Object}: Object with left, top, width and height properties + * representing the rect **inside the browser element** that should be rendered. + * For screenshot of the current viewport, we return null, as expected by the + * `drawSnapshot` API. + */ + prepareCapture({ fullpage, selector, nodeActorID }) { + const { window } = this.targetActor; + // Use the override if set, note that the override is not returned by + // devicePixelRatio on privileged code, see bug 1759962. + // + // FIXME(bug 1760711): Whether zoom is included in devicePixelRatio depends + // on whether there's an override, this is a bit suspect. + const windowDpr = + window.browsingContext.top.overrideDPPX || window.devicePixelRatio; + const windowZoom = getCurrentZoom(window); + const messages = []; + + // If we're going to take the current view of the page, we don't need to compute a rect, + // since it's the default behaviour of drawSnapshot. + if (!fullpage && !selector && !nodeActorID) { + return { + rect: null, + messages, + windowDpr, + windowZoom, + }; + } + + let left; + let top; + let width; + let height; + + if (fullpage) { + // We don't want to render the scrollbars + const winUtils = window.windowUtils; + const scrollbarHeight = {}; + const scrollbarWidth = {}; + winUtils.getScrollbarSize(false, scrollbarWidth, scrollbarHeight); + + left = 0; + top = 0; + width = + window.innerWidth + + window.scrollMaxX - + window.scrollMinX - + scrollbarWidth.value; + height = + window.innerHeight + + window.scrollMaxY - + window.scrollMinY - + scrollbarHeight.value; + } else if (selector) { + const node = window.document.querySelector(selector); + + if (!node) { + messages.push({ + level: "warn", + text: L10N.getFormatStr("screenshotNoSelectorMatchWarning", selector), + }); + + return { + error: true, + messages, + }; + } + + ({ left, top, width, height } = this._getRectForNode(node)); + } else if (nodeActorID) { + const nodeActor = this.conn.getActor(nodeActorID); + if (!nodeActor) { + messages.push({ + level: "error", + text: `Screenshot actor failed to find Node actor for '${nodeActorID}'`, + }); + + return { + error: true, + messages, + }; + } + + ({ left, top, width, height } = this._getRectForNode(nodeActor.rawNode)); + } + + return { + windowDpr, + windowZoom, + rect: { left, top, width, height }, + messages, + }; + } +}; diff --git a/devtools/server/actors/screenshot.js b/devtools/server/actors/screenshot.js new file mode 100644 index 0000000000..d1c5cd5b17 --- /dev/null +++ b/devtools/server/actors/screenshot.js @@ -0,0 +1,25 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const { Actor } = require("resource://devtools/shared/protocol.js"); +const { + screenshotSpec, +} = require("resource://devtools/shared/specs/screenshot.js"); + +const { + captureScreenshot, +} = require("resource://devtools/server/actors/utils/capture-screenshot.js"); + +exports.ScreenshotActor = class ScreenshotActor extends Actor { + constructor(conn) { + super(conn, screenshotSpec); + } + + async capture(args) { + const browsingContext = BrowsingContext.get(args.browsingContextID); + return captureScreenshot(args, browsingContext); + } +}; diff --git a/devtools/server/actors/source.js b/devtools/server/actors/source.js new file mode 100644 index 0000000000..ff08bcb4c2 --- /dev/null +++ b/devtools/server/actors/source.js @@ -0,0 +1,694 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const { Actor } = require("resource://devtools/shared/protocol.js"); +const { sourceSpec } = require("resource://devtools/shared/specs/source.js"); + +const { + setBreakpointAtEntryPoints, +} = require("resource://devtools/server/actors/breakpoint.js"); +const { + getSourcemapBaseURL, +} = require("resource://devtools/server/actors/utils/source-map-utils.js"); +const { + getDebuggerSourceURL, +} = require("resource://devtools/server/actors/utils/source-url.js"); + +loader.lazyRequireGetter( + this, + "ArrayBufferActor", + "resource://devtools/server/actors/array-buffer.js", + true +); +loader.lazyRequireGetter( + this, + "LongStringActor", + "resource://devtools/server/actors/string.js", + true +); + +loader.lazyRequireGetter( + this, + "DevToolsUtils", + "resource://devtools/shared/DevToolsUtils.js" +); + +const windowsDrive = /^([a-zA-Z]:)/; + +function resolveSourceURL(sourceURL, targetActor) { + if (sourceURL) { + try { + let baseURL; + if (targetActor.window) { + baseURL = targetActor.window.location?.href; + } + // For worker, we don't have easy access to location, + // so pull extra information directly from the target actor. + if (targetActor.workerUrl) { + baseURL = targetActor.workerUrl; + } + return new URL(sourceURL, baseURL || undefined).href; + } catch (err) {} + } + + return null; +} +function getSourceURL(source, targetActor) { + // Some eval sources have URLs, but we want to explicitly ignore those because + // they are generally useless strings like "eval" or "debugger eval code". + let resourceURL = getDebuggerSourceURL(source) || ""; + + // Strip out eventual stack trace stored in Source's url. + // (not clear if that still happens) + resourceURL = resourceURL.split(" -> ").pop(); + + // Debugger.Source.url attribute may be of the form: + // "http://example.com/foo line 10 > inlineScript" + // because of the following function `js::FormatIntroducedFilename`: + // https://searchfox.org/mozilla-central/rev/253ae246f642fe9619597f44de3b087f94e45a2d/js/src/vm/JSScript.cpp#1816-1846 + // This isn't so easy to reproduce, but browser_dbg-breakpoints-popup.js's testPausedInTwoPopups covers this + resourceURL = resourceURL.replace(/ line \d+ > .*$/, ""); + + // A "//# sourceURL=" pragma should basically be treated as a source file's + // full URL, so that is what we want to use as the base if it is present. + // If this is not an absolute URL, this will mean the maps in the file + // will not have a valid base URL, but that is up to tooling that + let result = resolveSourceURL(source.displayURL, targetActor); + if (!result) { + result = resolveSourceURL(resourceURL, targetActor) || resourceURL; + + // In XPCShell tests, the source URL isn't actually a URL, it's a file path. + // That causes issues because "C:/folder/file.js" is parsed as a URL with + // "c:" as the URL scheme, which causes the drive letter to be unexpectedly + // lower-cased when the parsed URL is re-serialized. To avoid that, we + // detect that case and re-uppercase it again. This is a bit gross and + // ideally it seems like XPCShell tests should use file:// URLs for files, + // but alas they do not. + if ( + resourceURL && + resourceURL.match(windowsDrive) && + result.slice(0, 2) == resourceURL.slice(0, 2).toLowerCase() + ) { + result = resourceURL.slice(0, 2) + result.slice(2); + } + } + + // Avoid returning empty string and return null if no URL is found + return result || null; +} + +/** + * A SourceActor provides information about the source of a script. Source + * actors are 1:1 with Debugger.Source objects. + * + * @param Debugger.Source source + * The source object we are representing. + * @param ThreadActor thread + * The current thread actor. + */ +class SourceActor extends Actor { + constructor({ source, thread }) { + super(thread.conn, sourceSpec); + + this._threadActor = thread; + this._url = undefined; + this._source = source; + this.__isInlineSource = undefined; + } + + get _isInlineSource() { + const source = this._source; + if (this.__isInlineSource === undefined) { + // If the source has a usable displayURL, the source is treated as not + // inlined because it has its own URL. + // Also consider sources loaded from <iframe srcdoc> as independant sources, + // because we can't easily fetch the full html content of the srcdoc attribute. + this.__isInlineSource = + source.introductionType === "inlineScript" && + !resolveSourceURL(source.displayURL, this.threadActor._parent) && + !this.url.startsWith("about:srcdoc"); + } + return this.__isInlineSource; + } + + get threadActor() { + return this._threadActor; + } + get sourcesManager() { + return this._threadActor.sourcesManager; + } + get dbg() { + return this.threadActor.dbg; + } + get breakpointActorMap() { + return this.threadActor.breakpointActorMap; + } + get url() { + if (this._url === undefined) { + this._url = getSourceURL(this._source, this.threadActor._parent); + } + return this._url; + } + + get extensionName() { + if (this._extensionName === undefined) { + this._extensionName = null; + + // Cu is not available for workers and so we are not able to get a + // WebExtensionPolicy object + if (!isWorker && this.url?.startsWith("moz-extension:")) { + try { + const extURI = Services.io.newURI(this.url); + const policy = WebExtensionPolicy.getByURI(extURI); + if (policy) { + this._extensionName = policy.name; + } + } catch (e) { + console.warn(`Failed to find extension name for ${this.url} : ${e}`); + } + } + } + + return this._extensionName; + } + + get internalSourceId() { + return this._source.id; + } + + form() { + const source = this._source; + + let introductionType = source.introductionType; + if ( + introductionType === "srcScript" || + introductionType === "inlineScript" || + introductionType === "injectedScript" + ) { + // These three used to be one single type, so here we combine them all + // so that clients don't see any change in behavior. + introductionType = "scriptElement"; + } + + // NOTE: Debugger.Source.prototype.startColumn is 1-based. + // Convert to 0-based, while keeping the wasm's column (1) as is. + // (bug 1863878) + const columnBase = source.introductionType === "wasm" ? 0 : 1; + + return { + actor: this.actorID, + extensionName: this.extensionName, + url: this.url, + isBlackBoxed: this.sourcesManager.isBlackBoxed(this.url), + sourceMapBaseURL: getSourcemapBaseURL( + this.url, + this.threadActor._parent.window + ), + sourceMapURL: source.sourceMapURL, + introductionType, + isInlineSource: this._isInlineSource, + sourceStartLine: source.startLine, + sourceStartColumn: source.startColumn - columnBase, + sourceLength: source.text?.length, + }; + } + + destroy() { + const parent = this.getParent(); + if (parent && parent.sourceActors) { + delete parent.sourceActors[this.actorID]; + } + super.destroy(); + } + + get _isWasm() { + return this._source.introductionType === "wasm"; + } + + async _getSourceText() { + if (this._isWasm) { + const wasm = this._source.binary; + const buffer = wasm.buffer; + DevToolsUtils.assert( + wasm.byteOffset === 0 && wasm.byteLength === buffer.byteLength, + "Typed array from wasm source binary must cover entire buffer" + ); + return { + content: buffer, + contentType: "text/wasm", + }; + } + + // Use `source.text` if it exists, is not the "no source" string, and + // the source isn't one that is inlined into some larger file. + // It will be "no source" if the Debugger API wasn't able to load + // the source because sources were discarded + // (javascript.options.discardSystemSource == true). + // + // For inline source, we do something special and ignore individual source content. + // Instead, each inline source will return the full HTML page content where + // the inline source is (i.e. `<script> js source </script>`). + // + // When using srcdoc attribute on iframes: + // <iframe srcdoc="<script> js source </script>"></iframe> + // The whole iframe source is going to be considered as an inline source because displayURL is null + // and introductionType is inlineScript. But Debugger.Source.text is the only way + // to retrieve the source content. + if (this._source.text !== "[no source]" && !this._isInlineSource) { + return { + content: this.actualText(), + contentType: "text/javascript", + }; + } + + return this.sourcesManager.urlContents( + this.url, + /* partial */ false, + /* canUseCache */ this._isInlineSource + ); + } + + // Get the actual text of this source, padded so that line numbers will match + // up with the source itself. + actualText() { + // If the source doesn't start at line 1, line numbers in the client will + // not match up with those in the source. Pad the text with blank lines to + // fix this. This can show up for sources associated with inline scripts + // in HTML created via document.write() calls: the script's source line + // number is relative to the start of the written HTML, but we show the + // source's content by itself. + const padding = this._source.startLine + ? "\n".repeat(this._source.startLine - 1) + : ""; + return padding + this._source.text; + } + + // Return whether the specified fetched contents includes the actual text of + // this source in the expected position. + contentMatches(fileContents) { + const lineBreak = /\r\n?|\n|\u2028|\u2029/; + const contentLines = fileContents.content.split(lineBreak); + const sourceLines = this._source.text.split(lineBreak); + let line = this._source.startLine - 1; + for (const sourceLine of sourceLines) { + const contentLine = contentLines[line++] || ""; + if (!contentLine.includes(sourceLine)) { + return false; + } + } + return true; + } + + getBreakableLines() { + const positions = this._getBreakpointPositions(); + const lines = new Set(); + for (const position of positions) { + if (!lines.has(position.line)) { + lines.add(position.line); + } + } + + return Array.from(lines); + } + + // Get all toplevel scripts in the source. Transitive child scripts must be + // found by traversing the child script tree. + _getTopLevelDebuggeeScripts() { + if (this._scripts) { + return this._scripts; + } + + let scripts = this.dbg.findScripts({ source: this._source }); + + if (!this._isWasm) { + // There is no easier way to get the top-level scripts right now, so + // we have to build that up the list manually. + // Note: It is not valid to simply look for scripts where + // `.isFunction == false` because a source may have executed multiple + // where some have been GCed and some have not (bug 1627712). + const allScripts = new Set(scripts); + for (const script of allScripts) { + for (const child of script.getChildScripts()) { + allScripts.delete(child); + } + } + scripts = [...allScripts]; + } + + this._scripts = scripts; + return scripts; + } + + resetDebuggeeScripts() { + this._scripts = null; + } + + // Get toplevel scripts which contain all breakpoint positions for the source. + // This is different from _scripts if we detected that some scripts have been + // GC'ed and reparsed the source contents. + _getTopLevelBreakpointPositionScripts() { + if (this._breakpointPositionScripts) { + return this._breakpointPositionScripts; + } + + let scripts = this._getTopLevelDebuggeeScripts(); + + // We need to find all breakpoint positions, even if scripts associated with + // this source have been GC'ed. We detect this by looking for a script which + // does not have a function: a source will typically have a top level + // non-function script. If this top level script still exists, then it keeps + // all its child scripts alive and we will find all breakpoint positions by + // scanning the existing scripts. If the top level script has been GC'ed + // then we won't find its breakpoint positions, and inner functions may have + // been GC'ed as well. In this case we reparse the source and generate a new + // and complete set of scripts to look for the breakpoint positions. + // Note that in some cases like "new Function(stuff)" there might not be a + // top level non-function script, but if there is a non-function script then + // it must be at the top level and will keep all other scripts in the source + // alive. + if (!this._isWasm && !scripts.some(script => !script.isFunction)) { + let newScript; + try { + newScript = this._source.reparse(); + } catch (e) { + // reparse() will throw if the source is not valid JS. This can happen + // if this source is the resurrection of a GC'ed source and there are + // parse errors in the refetched contents. + } + if (newScript) { + scripts = [newScript]; + } + } + + this._breakpointPositionScripts = scripts; + return scripts; + } + + // Get all scripts in this source that might include content in the range + // specified by the given query. + _findDebuggeeScripts(query, forBreakpointPositions) { + const scripts = forBreakpointPositions + ? this._getTopLevelBreakpointPositionScripts() + : this._getTopLevelDebuggeeScripts(); + + const { + start: { line: startLine = 0, column: startColumn = 0 } = {}, + end: { line: endLine = Infinity, column: endColumn = Infinity } = {}, + } = query || {}; + + const rv = []; + addMatchingScripts(scripts); + return rv; + + function scriptMatches(script) { + // These tests are approximate, as we can't easily get the script's end + // column. + let lineCount; + try { + lineCount = script.lineCount; + } catch (err) { + // Accessing scripts which were optimized out during parsing can throw + // an exception. Tolerate these so that we can still get positions for + // other scripts in the source. + return false; + } + + // NOTE: Debugger.Script.prototype.startColumn is 1-based. + // Convert to 0-based, while keeping the wasm's column (1) as is. + // (bug 1863878) + const columnBase = script.format === "wasm" ? 0 : 1; + if ( + script.startLine > endLine || + script.startLine + lineCount <= startLine || + (script.startLine == endLine && + script.startColumn - columnBase > endColumn) + ) { + return false; + } + + if ( + lineCount == 1 && + script.startLine == startLine && + script.startColumn - columnBase + script.sourceLength <= startColumn + ) { + return false; + } + + return true; + } + + function addMatchingScripts(childScripts) { + for (const script of childScripts) { + if (scriptMatches(script)) { + rv.push(script); + if (script.format === "js") { + addMatchingScripts(script.getChildScripts()); + } + } + } + } + } + + _getBreakpointPositions(query) { + const scripts = this._findDebuggeeScripts( + query, + /* forBreakpointPositions */ true + ); + + const positions = []; + for (const script of scripts) { + this._addScriptBreakpointPositions(query, script, positions); + } + + return ( + positions + // Sort the items by location. + .sort((a, b) => { + const lineDiff = a.line - b.line; + return lineDiff === 0 ? a.column - b.column : lineDiff; + }) + ); + } + + _addScriptBreakpointPositions(query, script, positions) { + const { + start: { line: startLine = 0, column: startColumn = 0 } = {}, + end: { line: endLine = Infinity, column: endColumn = Infinity } = {}, + } = query || {}; + + // NOTE: Debugger.Script.prototype.startColumn is 1-based. + // Convert to 0-based, while keeping the wasm's column (1) as is. + // (bug 1863878) + const columnBase = script.format === "wasm" ? 0 : 1; + + const offsets = script.getPossibleBreakpoints(); + for (const { lineNumber, columnNumber } of offsets) { + if ( + lineNumber < startLine || + (lineNumber === startLine && columnNumber - columnBase < startColumn) || + lineNumber > endLine || + (lineNumber === endLine && columnNumber - columnBase >= endColumn) + ) { + continue; + } + + positions.push({ + line: lineNumber, + column: columnNumber - columnBase, + }); + } + } + + getBreakpointPositionsCompressed(query) { + const items = this._getBreakpointPositions(query); + const compressed = {}; + for (const { line, column } of items) { + if (!compressed[line]) { + compressed[line] = []; + } + compressed[line].push(column); + } + return compressed; + } + + /** + * Handler for the "onSource" packet. + * @return Object + * The return of this function contains a field `contentType`, and + * a field `source`. `source` can either be an ArrayBuffer or + * a LongString. + */ + async source() { + try { + const { content, contentType } = await this._getSourceText(); + if ( + typeof content === "object" && + content && + content.constructor && + content.constructor.name === "ArrayBuffer" + ) { + return { + source: new ArrayBufferActor(this.threadActor.conn, content), + contentType, + }; + } + + return { + source: new LongStringActor(this.threadActor.conn, content), + contentType, + }; + } catch (error) { + throw new Error( + "Could not load the source for " + + this.url + + ".\n" + + DevToolsUtils.safeErrorString(error) + ); + } + } + + /** + * Handler for the "blackbox" packet. + */ + blackbox(range) { + this.sourcesManager.blackBox(this.url, range); + if ( + this.threadActor.state == "paused" && + this.threadActor.youngestFrame && + this.threadActor.youngestFrame.script.url == this.url + ) { + return true; + } + return false; + } + + /** + * Handler for the "unblackbox" packet. + */ + unblackbox(range) { + this.sourcesManager.unblackBox(this.url, range); + } + + /** + * Handler for the "setPausePoints" packet. + * + * @param Array pausePoints + * A dictionary of pausePoint objects + * + * type PausePoints = { + * line: { + * column: { break?: boolean, step?: boolean } + * } + * } + */ + setPausePoints(pausePoints) { + const uncompressed = {}; + const points = { + 0: {}, + 1: { break: true }, + 2: { step: true }, + 3: { break: true, step: true }, + }; + + for (const line in pausePoints) { + uncompressed[line] = {}; + for (const col in pausePoints[line]) { + uncompressed[line][col] = points[pausePoints[line][col]]; + } + } + + this.pausePoints = uncompressed; + } + + /* + * Ensure the given BreakpointActor is set as a breakpoint handler on all + * scripts that match its location in the generated source. + * + * @param BreakpointActor actor + * The BreakpointActor to be set as a breakpoint handler. + * + * @returns A Promise that resolves to the given BreakpointActor. + */ + async applyBreakpoint(actor) { + const { line, column } = actor.location; + + // Find all entry points that correspond to the given location. + const entryPoints = []; + if (column === undefined) { + // Find all scripts that match the given source actor and line + // number. + const query = { start: { line }, end: { line } }; + const scripts = this._findDebuggeeScripts(query).filter( + script => !actor.hasScript(script) + ); + + // NOTE: Debugger.Script.prototype.getPossibleBreakpoints returns + // columnNumber in 1-based. + // The following code uses columnNumber only for comparing against + // other columnNumber, and we don't need to convert to 0-based. + + // This is a line breakpoint, so we add a breakpoint on the first + // breakpoint on the line. + const lineMatches = []; + for (const script of scripts) { + const possibleBreakpoints = script.getPossibleBreakpoints({ line }); + for (const possibleBreakpoint of possibleBreakpoints) { + lineMatches.push({ ...possibleBreakpoint, script }); + } + } + lineMatches.sort((a, b) => a.columnNumber - b.columnNumber); + + if (lineMatches.length) { + // A single Debugger.Source may have _multiple_ Debugger.Scripts + // at the same position from multiple evaluations of the source, + // so we explicitly want to take all of the matches for the matched + // column number. + const firstColumn = lineMatches[0].columnNumber; + const firstColumnMatches = lineMatches.filter( + m => m.columnNumber === firstColumn + ); + + for (const { script, offset } of firstColumnMatches) { + entryPoints.push({ script, offsets: [offset] }); + } + } + } else { + // Find all scripts that match the given source actor, line, + // and column number. + const query = { start: { line, column }, end: { line, column } }; + const scripts = this._findDebuggeeScripts(query).filter( + script => !actor.hasScript(script) + ); + + for (const script of scripts) { + // NOTE: getPossibleBreakpoints's minColumn/maxColumn parameters are + // 1-based. + // Convert to 1-based, while keeping the wasm's column (1) as is. + // (bug 1863878) + const columnBase = script.format === "wasm" ? 0 : 1; + + // Check to see if the script contains a breakpoint position at + // this line and column. + const possibleBreakpoint = script + .getPossibleBreakpoints({ + line, + minColumn: column + columnBase, + maxColumn: column + columnBase + 1, + }) + .pop(); + + if (possibleBreakpoint) { + const { offset } = possibleBreakpoint; + entryPoints.push({ script, offsets: [offset] }); + } + } + } + + setBreakpointAtEntryPoints(actor, entryPoints); + } +} + +exports.SourceActor = SourceActor; diff --git a/devtools/server/actors/string.js b/devtools/server/actors/string.js new file mode 100644 index 0000000000..01c9353ecf --- /dev/null +++ b/devtools/server/actors/string.js @@ -0,0 +1,45 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const { Actor } = require("resource://devtools/shared/protocol.js"); +const { + longStringSpec, +} = require("resource://devtools/shared/specs/string.js"); + +const { + DevToolsServer, +} = require("resource://devtools/server/devtools-server.js"); + +exports.LongStringActor = class LongStringActor extends Actor { + constructor(conn, str) { + super(conn, longStringSpec); + this.str = str; + this.short = this.str.length < DevToolsServer.LONG_STRING_LENGTH; + } + + destroy() { + this.str = null; + super.destroy(); + } + + form() { + if (this.short) { + return this.str; + } + return { + type: "longString", + actor: this.actorID, + length: this.str.length, + initial: this.str.substring(0, DevToolsServer.LONG_STRING_INITIAL_LENGTH), + }; + } + + substring(start, end) { + return this.str.substring(start, end); + } + + release() {} +}; diff --git a/devtools/server/actors/style-rule.js b/devtools/server/actors/style-rule.js new file mode 100644 index 0000000000..e9f39fa3d0 --- /dev/null +++ b/devtools/server/actors/style-rule.js @@ -0,0 +1,1328 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const { Actor } = require("resource://devtools/shared/protocol.js"); +const { + styleRuleSpec, +} = require("resource://devtools/shared/specs/style-rule.js"); + +const { getCSSLexer } = require("resource://devtools/shared/css/lexer.js"); +const TrackChangeEmitter = require("resource://devtools/server/actors/utils/track-change-emitter.js"); +const { + getRuleText, + getTextAtLineColumn, +} = require("resource://devtools/server/actors/utils/style-utils.js"); + +const { + style: { ELEMENT_STYLE }, +} = require("resource://devtools/shared/constants.js"); + +loader.lazyRequireGetter( + this, + "CssLogic", + "resource://devtools/server/actors/inspector/css-logic.js", + true +); +loader.lazyRequireGetter( + this, + "SharedCssLogic", + "resource://devtools/shared/inspector/css-logic.js" +); +loader.lazyRequireGetter( + this, + "isCssPropertyKnown", + "resource://devtools/server/actors/css-properties.js", + true +); +loader.lazyRequireGetter( + this, + "isPropertyUsed", + "resource://devtools/server/actors/utils/inactive-property-helper.js", + true +); +loader.lazyRequireGetter( + this, + "parseNamedDeclarations", + "resource://devtools/shared/css/parsing-utils.js", + true +); +loader.lazyRequireGetter( + this, + ["UPDATE_PRESERVING_RULES", "UPDATE_GENERAL"], + "resource://devtools/server/actors/utils/stylesheets-manager.js", + true +); + +const XHTML_NS = "http://www.w3.org/1999/xhtml"; + +/** + * An actor that represents a CSS style object on the protocol. + * + * We slightly flatten the CSSOM for this actor, it represents + * both the CSSRule and CSSStyle objects in one actor. For nodes + * (which have a CSSStyle but no CSSRule) we create a StyleRuleActor + * with a special rule type (100). + */ +class StyleRuleActor extends Actor { + constructor(pageStyle, item, userAdded = false) { + super(pageStyle.conn, styleRuleSpec); + this.pageStyle = pageStyle; + this.rawStyle = item.style; + this._userAdded = userAdded; + this._parentSheet = null; + // Parsed CSS declarations from this.form().declarations used to check CSS property + // names and values before tracking changes. Using cached values instead of accessing + // this.form().declarations on demand because that would cause needless re-parsing. + this._declarations = []; + + this._pendingDeclarationChanges = []; + this._failedToGetRuleText = false; + + if (CSSRule.isInstance(item)) { + this.type = item.type; + this.ruleClassName = ChromeUtils.getClassName(item); + + this.rawRule = item; + this._computeRuleIndex(); + if (this.#isRuleSupported() && this.rawRule.parentStyleSheet) { + this.line = InspectorUtils.getRelativeRuleLine(this.rawRule); + this.column = InspectorUtils.getRuleColumn(this.rawRule); + this._parentSheet = this.rawRule.parentStyleSheet; + } + } else { + // Fake a rule + this.type = ELEMENT_STYLE; + this.ruleClassName = ELEMENT_STYLE; + this.rawNode = item; + this.rawRule = { + style: item.style, + toString() { + return "[element rule " + this.style + "]"; + }, + }; + } + } + + destroy() { + if (!this.rawStyle) { + return; + } + super.destroy(); + this.rawStyle = null; + this.pageStyle = null; + this.rawNode = null; + this.rawRule = null; + this._declarations = null; + } + + // Objects returned by this actor are owned by the PageStyleActor + // to which this rule belongs. + get marshallPool() { + return this.pageStyle; + } + + // True if this rule supports as-authored styles, meaning that the + // rule text can be rewritten using setRuleText. + get canSetRuleText() { + if (this.type === ELEMENT_STYLE) { + // Element styles are always editable. + return true; + } + if (!this._parentSheet) { + return false; + } + if (InspectorUtils.hasRulesModifiedByCSSOM(this._parentSheet)) { + // If a rule has been modified via CSSOM, then we should fall back to + // non-authored editing. + // https://bugzilla.mozilla.org/show_bug.cgi?id=1224121 + return false; + } + return true; + } + + /** + * Return an array with StyleRuleActor instances for each of this rule's ancestor rules + * (@media, @supports, @keyframes, etc) obtained by recursively reading rule.parentRule. + * If the rule has no ancestors, return an empty array. + * + * @return {Array} + */ + get ancestorRules() { + const ancestors = []; + let rule = this.rawRule; + + while (rule.parentRule) { + ancestors.unshift(this.pageStyle._styleRef(rule.parentRule)); + rule = rule.parentRule; + } + + return ancestors; + } + + /** + * Return an object with information about this rule used for tracking changes. + * It will be decorated with information about a CSS change before being tracked. + * + * It contains: + * - the rule selector (or generated selectror for inline styles) + * - the rule's host stylesheet (or element for inline styles) + * - the rule's ancestor rules (@media, @supports, @keyframes), if any + * - the rule's position within its ancestor tree, if any + * + * @return {Object} + */ + get metadata() { + const data = {}; + data.id = this.actorID; + // Collect information about the rule's ancestors (@media, @supports, @keyframes, parent rules). + // Used to show context for this change in the UI and to match the rule for undo/redo. + data.ancestors = this.ancestorRules.map(rule => { + const ancestorData = { + id: rule.actorID, + // Array with the indexes of this rule and its ancestors within the CSS rule tree. + ruleIndex: rule._ruleIndex, + }; + + // Rule type as human-readable string (ex: "@media", "@supports", "@keyframes") + const typeName = SharedCssLogic.getCSSAtRuleTypeName(rule.rawRule); + if (typeName) { + ancestorData.typeName = typeName; + } + + // Conditions of @container, @media and @supports rules (ex: "min-width: 1em") + if (rule.rawRule.conditionText !== undefined) { + ancestorData.conditionText = rule.rawRule.conditionText; + } + + // Name of @keyframes rule; referenced by the animation-name CSS property. + if (rule.rawRule.name !== undefined) { + ancestorData.name = rule.rawRule.name; + } + + // Selector of individual @keyframe rule within a @keyframes rule (ex: 0%, 100%). + if (rule.rawRule.keyText !== undefined) { + ancestorData.keyText = rule.rawRule.keyText; + } + + // Selector of the rule; might be useful in case for nested rules + if (rule.rawRule.selectorText !== undefined) { + ancestorData.selectorText = rule.rawRule.selectorText; + } + + return ancestorData; + }); + + // For changes in element style attributes, generate a unique selector. + if (this.type === ELEMENT_STYLE && this.rawNode) { + // findCssSelector() fails on XUL documents. Catch and silently ignore that error. + try { + data.selector = SharedCssLogic.findCssSelector(this.rawNode); + } catch (err) {} + + data.source = { + type: "element", + // Used to differentiate between elements which match the same generated selector + // but live in different documents (ex: host document and iframe). + href: this.rawNode.baseURI, + // Element style attributes don't have a rule index; use the generated selector. + index: data.selector, + // Whether the element lives in a different frame than the host document. + isFramed: this.rawNode.ownerGlobal !== this.pageStyle.ownerWindow, + }; + + const nodeActor = this.pageStyle.walker.getNode(this.rawNode); + if (nodeActor) { + data.source.id = nodeActor.actorID; + } + + data.ruleIndex = 0; + } else { + data.selector = + this.ruleClassName === "CSSKeyframeRule" + ? this.rawRule.keyText + : this.rawRule.selectorText; + // Used to differentiate between changes to rules with identical selectors. + data.ruleIndex = this._ruleIndex; + + const sheet = this._parentSheet; + const inspectorActor = this.pageStyle.inspector; + const resourceId = + this.pageStyle.styleSheetsManager.getStyleSheetResourceId(sheet); + const styleSheetIndex = + this.pageStyle.styleSheetsManager.getStyleSheetIndex(resourceId); + data.source = { + // Inline stylesheets have a null href; Use window URL instead. + type: sheet.href ? "stylesheet" : "inline", + href: sheet.href || inspectorActor.window.location.toString(), + id: resourceId, + index: styleSheetIndex, + // Whether the stylesheet lives in a different frame than the host document. + isFramed: inspectorActor.window !== inspectorActor.window.top, + }; + } + + return data; + } + + getDocument(sheet) { + if (!sheet.associatedDocument) { + throw new Error( + "Failed trying to get the document of an invalid stylesheet" + ); + } + return sheet.associatedDocument; + } + + /** + * When a rule is nested in another non-at-rule (aka CSS Nesting), the client + * will need its desugared selector, i.e. the full selector, which includes ancestor + * selectors, that is computed by the platform when applying the rule. + * To compute it, the parent selector (&) is recursively replaced by the parent + * rule selector wrapped in `:is()`. + * For example, with the following nested rule: `body { & > main {} }`, + * the desugared selector will be `:is(body) > main`. + * See https://www.w3.org/TR/css-nesting-1/#nest-selector for more information. + * + * Returns an array of the desugared selectors. For example, if rule is: + * + * body { + * & > main, & section { + * } + * } + * + * this will return: + * + * [ + * `:is(body) > main`, + * `:is(body) section`, + * ] + * + * @returns Array<String> + */ + getDesugaredSelectors() { + // Cache the desugared selectors as it can be expensive to compute + if (!this._desugaredSelectors) { + this._desugaredSelectors = CssLogic.getSelectors(this.rawRule, true); + } + + return this._desugaredSelectors; + } + + toString() { + return "[StyleRuleActor for " + this.rawRule + "]"; + } + + // eslint-disable-next-line complexity + form() { + const form = { + actor: this.actorID, + type: this.type, + line: this.line || undefined, + column: this.column, + traits: { + // Indicates whether StyleRuleActor implements and can use the setRuleText method. + // It cannot use it if the stylesheet was programmatically mutated via the CSSOM. + canSetRuleText: this.canSetRuleText, + }, + }; + + // This rule was manually added by the user and may be automatically focused by the frontend. + if (this._userAdded) { + form.userAdded = true; + } + + const { computeDesugaredSelector, ancestorData } = + this._getAncestorDataForForm(); + form.ancestorData = ancestorData; + + if (this._parentSheet) { + form.parentStyleSheet = + this.pageStyle.styleSheetsManager.getStyleSheetResourceId( + this._parentSheet + ); + } + + // One tricky thing here is that other methods in this actor must + // ensure that authoredText has been set before |form| is called. + // This has to be treated specially, for now, because we cannot + // synchronously compute the authored text, but |form| also cannot + // return a promise. See bug 1205868. + form.authoredText = this.authoredText; + + switch (this.ruleClassName) { + case "CSSStyleRule": + form.selectors = CssLogic.getSelectors(this.rawRule); + + // Only add the property when there are elements in the array to save up on serialization. + const selectorWarnings = this.rawRule.getSelectorWarnings(); + if (selectorWarnings.length) { + form.selectorWarnings = selectorWarnings; + } + if (computeDesugaredSelector) { + form.desugaredSelectors = this.getDesugaredSelectors(); + } + form.cssText = this.rawStyle.cssText || ""; + break; + case ELEMENT_STYLE: + // Elements don't have a parent stylesheet, and therefore + // don't have an associated URI. Provide a URI for + // those. + const doc = this.rawNode.ownerDocument; + form.href = doc.location ? doc.location.href : ""; + form.cssText = this.rawStyle.cssText || ""; + form.authoredText = this.rawNode.getAttribute("style"); + break; + case "CSSCharsetRule": + form.encoding = this.rawRule.encoding; + break; + case "CSSImportRule": + form.href = this.rawRule.href; + break; + case "CSSKeyframesRule": + form.cssText = this.rawRule.cssText; + form.name = this.rawRule.name; + break; + case "CSSKeyframeRule": + form.cssText = this.rawStyle.cssText || ""; + form.keyText = this.rawRule.keyText || ""; + break; + } + + // Parse the text into a list of declarations so the client doesn't have to + // and so that we can safely determine if a declaration is valid rather than + // have the client guess it. + if (form.authoredText || form.cssText) { + // authoredText may be an empty string when deleting all properties; it's ok to use. + const cssText = + typeof form.authoredText === "string" + ? form.authoredText + : form.cssText; + const declarations = parseNamedDeclarations( + isCssPropertyKnown, + cssText, + true + ); + const el = this.pageStyle.selectedElement; + const style = this.pageStyle.cssLogic.computedStyle; + + // Whether the stylesheet is a user-agent stylesheet. This affects the + // validity of some properties and property values. + const userAgent = + this._parentSheet && + SharedCssLogic.isAgentStylesheet(this._parentSheet); + // Whether the stylesheet is a chrome stylesheet. Ditto. + // + // Note that chrome rules are also enabled in user sheets, see + // ParserContext::chrome_rules_enabled(). + // + // https://searchfox.org/mozilla-central/rev/919607a3610222099fbfb0113c98b77888ebcbfb/servo/components/style/parser.rs#164 + const chrome = (() => { + if (!this._parentSheet) { + return false; + } + if (SharedCssLogic.isUserStylesheet(this._parentSheet)) { + return true; + } + if (this._parentSheet.href) { + return this._parentSheet.href.startsWith("chrome:"); + } + return el && el.ownerDocument.documentURI.startsWith("chrome:"); + })(); + // Whether the document is in quirks mode. This affects whether stuff + // like `width: 10` is valid. + const quirks = + !userAgent && el && el.ownerDocument.compatMode == "BackCompat"; + const supportsOptions = { userAgent, chrome, quirks }; + form.declarations = declarations.map(decl => { + // InspectorUtils.supports only supports the 1-arg version, but that's + // what we want to do anyways so that we also accept !important in the + // value. + decl.isValid = InspectorUtils.supports( + `${decl.name}:${decl.value}`, + supportsOptions + ); + // TODO: convert from Object to Boolean. See Bug 1574471 + decl.isUsed = isPropertyUsed(el, style, this.rawRule, decl.name); + // Check property name. All valid CSS properties support "initial" as a value. + decl.isNameValid = InspectorUtils.supports( + `${decl.name}:initial`, + supportsOptions + ); + + if (SharedCssLogic.isCssVariable(decl.name)) { + decl.isCustomProperty = true; + // We only compute `inherits` for css variable declarations. + // For "regular" declaration, we use `CssPropertiesFront.isInherited`, + // which doesn't depend on the state of the document (a given property will + // always have the same isInherited value). + // CSS variables on the other hand can be registered custom properties (e.g., + // `@property`/`CSS.registerProperty`), with a `inherits` definition that can + // be true or false. + // As such custom properties can be registered at any time during the page + // lifecycle, we always recompute the `inherits` information for CSS variables. + decl.inherits = InspectorUtils.isInheritedProperty( + this.pageStyle.inspector.window.document, + decl.name + ); + } + + return decl; + }); + + // We have computed the new `declarations` array, before forgetting about + // the old declarations compute the CSS changes for pending modifications + // applied by the user. Comparing the old and new declarations arrays + // ensures we only rely on values understood by the engine and not authored + // values. See Bug 1590031. + this._pendingDeclarationChanges.forEach(change => + this.logDeclarationChange(change, declarations, this._declarations) + ); + this._pendingDeclarationChanges = []; + + // Cache parsed declarations so we don't needlessly re-parse authoredText every time + // we need to check previous property names and values when tracking changes. + this._declarations = declarations; + } + + return form; + } + + /** + * + * @returns {Object} Object with the following properties: + * - {Array<Object>} ancestorData: An array of ancestor item data + * - {Boolean} computeDesugaredSelector: true if the rule has a non-at-rule + * parent rule (i.e. rule is likely to be a nested rule) + */ + _getAncestorDataForForm() { + const ancestorData = []; + // Flag that will be set to true if the rule has a non-at-rule parent rule + let computeDesugaredSelector = false; + + // Go through all ancestor so we can build an array of all the media queries and + // layers this rule is in. + for (const ancestorRule of this.ancestorRules) { + const rawRule = ancestorRule.rawRule; + const ruleClassName = ChromeUtils.getClassName(rawRule); + const type = SharedCssLogic.CSSAtRuleClassNameType[ruleClassName]; + + if (ruleClassName === "CSSMediaRule" && rawRule.media?.length) { + ancestorData.push({ + type, + value: Array.from(rawRule.media).join(", "), + }); + } else if (ruleClassName === "CSSLayerBlockRule") { + ancestorData.push({ + // we need the actorID so we can uniquely identify nameless layers on the client + actorID: ancestorRule.actorID, + type, + value: rawRule.name, + }); + } else if (ruleClassName === "CSSContainerRule") { + ancestorData.push({ + type, + // Send containerName and containerQuery separately (instead of conditionText) + // so the client has more flexibility to display the information. + containerName: rawRule.containerName, + containerQuery: rawRule.containerQuery, + }); + } else if (ruleClassName === "CSSSupportsRule") { + ancestorData.push({ + type, + conditionText: rawRule.conditionText, + }); + } else if (rawRule.selectorText) { + // All the previous cases where about at-rules; this one is for regular rule + // that are ancestors because CSS nesting was used. + // In such case, we want to return the selectorText so it can be displayed in the UI. + const ancestor = { + type, + selectors: CssLogic.getSelectors(rawRule), + }; + + // Only add the property when there are elements in the array to save up on serialization. + const selectorWarnings = rawRule.getSelectorWarnings(); + if (selectorWarnings.length) { + ancestor.selectorWarnings = selectorWarnings; + } + + ancestorData.push(ancestor); + computeDesugaredSelector = true; + } + } + + if (this._parentSheet) { + // Loop through all parent stylesheets to get the whole list of @import rules. + let rule = this.rawRule; + while ((rule = rule.parentStyleSheet?.ownerRule)) { + // If the rule is in a imported stylesheet with a specified layer + if (rule.layerName !== null) { + // Put the item at the top of the ancestor data array, as we're going up + // in the stylesheet hierarchy, and we want to display ancestor rules in the + // orders they're applied. + ancestorData.unshift({ + type: "layer", + value: rule.layerName, + }); + } + + // If the rule is in a imported stylesheet with specified media/supports conditions + if (rule.media?.mediaText || rule.supportsText) { + const parts = []; + if (rule.supportsText) { + parts.push(`supports(${rule.supportsText})`); + } + + if (rule.media?.mediaText) { + parts.push(rule.media.mediaText); + } + + // Put the item at the top of the ancestor data array, as we're going up + // in the stylesheet hierarchy, and we want to display ancestor rules in the + // orders they're applied. + ancestorData.unshift({ + type: "import", + value: parts.join(" "), + }); + } + } + } + return { ancestorData, computeDesugaredSelector }; + } + + /** + * Send an event notifying that the location of the rule has + * changed. + * + * @param {Number} line the new line number + * @param {Number} column the new column number + */ + _notifyLocationChanged(line, column) { + this.emit("location-changed", line, column); + } + + /** + * Compute the index of this actor's raw rule in its parent style + * sheet. The index is a vector where each element is the index of + * a given CSS rule in its parent. A vector is used to support + * nested rules. + */ + _computeRuleIndex() { + const index = InspectorUtils.getRuleIndex(this.rawRule); + this._ruleIndex = index.length ? index : null; + } + + /** + * Get the rule corresponding to |this._ruleIndex| from the given + * style sheet. + * + * @param {DOMStyleSheet} sheet + * The style sheet. + * @return {CSSStyleRule} the rule corresponding to + * |this._ruleIndex| + */ + _getRuleFromIndex(parentSheet) { + let currentRule = null; + for (const i of this._ruleIndex) { + if (currentRule === null) { + currentRule = parentSheet.cssRules[i]; + } else { + currentRule = currentRule.cssRules.item(i); + } + } + return currentRule; + } + + /** + * Called from PageStyle actor _onStylesheetUpdated. + */ + onStyleApplied(kind) { + if (kind === UPDATE_GENERAL) { + // A general change means that the rule actors are invalidated, nothing + // to do here. + return; + } + + if (this._ruleIndex) { + // The sheet was updated by this actor, in a way that preserves + // the rules. Now, recompute our new rule from the style sheet, + // so that we aren't left with a reference to a dangling rule. + const oldRule = this.rawRule; + const oldActor = this.pageStyle.refMap.get(oldRule); + this.rawRule = this._getRuleFromIndex(this._parentSheet); + if (oldActor) { + // Also tell the page style so that future calls to _styleRef + // return the same StyleRuleActor. + this.pageStyle.updateStyleRef(oldRule, this.rawRule, this); + } + const line = InspectorUtils.getRelativeRuleLine(this.rawRule); + const column = InspectorUtils.getRuleColumn(this.rawRule); + if (line !== this.line || column !== this.column) { + this._notifyLocationChanged(line, column); + } + this.line = line; + this.column = column; + } + } + + #SUPPORTED_RULES_CLASSNAMES = new Set([ + "CSSContainerRule", + "CSSKeyframeRule", + "CSSKeyframesRule", + "CSSLayerBlockRule", + "CSSMediaRule", + "CSSStyleRule", + "CSSSupportsRule", + ]); + + #isRuleSupported() { + // this.rawRule might not be an actual CSSRule (e.g. when this represent an element style), + // and in such case, ChromeUtils.getClassName will throw + try { + const ruleClassName = ChromeUtils.getClassName(this.rawRule); + return this.#SUPPORTED_RULES_CLASSNAMES.has(ruleClassName); + } catch (e) {} + + return false; + } + + /** + * Return a promise that resolves to the authored form of a rule's + * text, if available. If the authored form is not available, the + * returned promise simply resolves to the empty string. If the + * authored form is available, this also sets |this.authoredText|. + * The authored text will include invalid and otherwise ignored + * properties. + * + * @param {Boolean} skipCache + * If a value for authoredText was previously found and cached, + * ignore it and parse the stylehseet again. The authoredText + * may be outdated if a descendant of this rule has changed. + */ + async getAuthoredCssText(skipCache = false) { + if (!this.canSetRuleText || !this.#isRuleSupported()) { + return ""; + } + + if (!skipCache) { + if (this._failedToGetRuleText) { + return ""; + } + if (typeof this.authoredText === "string") { + return this.authoredText; + } + } + + try { + const resourceId = + this.pageStyle.styleSheetsManager.getStyleSheetResourceId( + this._parentSheet + ); + const cssText = await this.pageStyle.styleSheetsManager.getText( + resourceId + ); + const { text } = getRuleText(cssText, this.line, this.column); + // Cache the result on the rule actor to avoid parsing again next time + this._failedToGetRuleText = false; + this.authoredText = text; + } catch (e) { + this._failedToGetRuleText = true; + this.authoredText = undefined; + return ""; + } + return this.authoredText; + } + + /** + * Return a promise that resolves to the complete cssText of the rule as authored. + * + * Unlike |getAuthoredCssText()|, which only returns the contents of the rule, this + * method includes the CSS selectors and at-rules (@media, @supports, @keyframes, etc.) + * + * If the rule type is unrecongized, the promise resolves to an empty string. + * If the rule is an element inline style, the promise resolves with the generated + * selector that uniquely identifies the element and with the rule body consisting of + * the element's style attribute. + * + * @return {String} + */ + async getRuleText() { + // Bail out if the rule is not supported or not an element inline style. + if (!this.#isRuleSupported(true) && this.type !== ELEMENT_STYLE) { + return ""; + } + + let ruleBodyText; + let selectorText; + + // For element inline styles, use the style attribute and generated unique selector. + if (this.type === ELEMENT_STYLE) { + ruleBodyText = this.rawNode.getAttribute("style"); + selectorText = this.metadata.selector; + } else { + // Get the rule's authored text and skip any cached value. + ruleBodyText = await this.getAuthoredCssText(true); + + const resourceId = + this.pageStyle.styleSheetsManager.getStyleSheetResourceId( + this._parentSheet + ); + const stylesheetText = await this.pageStyle.styleSheetsManager.getText( + resourceId + ); + + const [start, end] = getSelectorOffsets( + stylesheetText, + this.line, + this.column + ); + selectorText = stylesheetText.substring(start, end); + } + + const text = `${selectorText} {${ruleBodyText}}`; + const { result } = SharedCssLogic.prettifyCSS(text); + return result; + } + + /** + * Set the contents of the rule. This rewrites the rule in the + * stylesheet and causes it to be re-evaluated. + * + * @param {String} newText + * The new text of the rule + * @param {Array} modifications + * Array with modifications applied to the rule. Contains objects like: + * { + * type: "set", + * index: <number>, + * name: <string>, + * value: <string>, + * priority: <optional string> + * } + * or + * { + * type: "remove", + * index: <number>, + * name: <string>, + * } + * @returns the rule with updated properties + */ + async setRuleText(newText, modifications = []) { + if (!this.canSetRuleText) { + throw new Error("invalid call to setRuleText"); + } + + if (this.type === ELEMENT_STYLE) { + // For element style rules, set the node's style attribute. + this.rawNode.setAttributeDevtools("style", newText); + } else { + const resourceId = + this.pageStyle.styleSheetsManager.getStyleSheetResourceId( + this._parentSheet + ); + let cssText = await this.pageStyle.styleSheetsManager.getText(resourceId); + + const { offset, text } = getRuleText(cssText, this.line, this.column); + cssText = + cssText.substring(0, offset) + + newText + + cssText.substring(offset + text.length); + + await this.pageStyle.styleSheetsManager.setStyleSheetText( + resourceId, + cssText, + { kind: UPDATE_PRESERVING_RULES } + ); + } + + this.authoredText = newText; + await this.updateAncestorRulesAuthoredText(); + this.pageStyle.refreshObservedRules(this.ancestorRules); + + // Add processed modifications to the _pendingDeclarationChanges array, + // they will be emitted as CSS_CHANGE resources once `declarations` have + // been re-computed in `form`. + this._pendingDeclarationChanges.push(...modifications); + + // Returning this updated actor over the protocol will update its corresponding front + // and any references to it. + return this; + } + + /** + * Update the authored text of the ancestor rules. This should be called when setting + * the authored text of a (nested) rule, so all the references are properly updated. + */ + async updateAncestorRulesAuthoredText() { + return Promise.all( + this.ancestorRules.map(rule => rule.getAuthoredCssText(true)) + ); + } + + /** + * Modify a rule's properties. Passed an array of modifications: + * { + * type: "set", + * index: <number>, + * name: <string>, + * value: <string>, + * priority: <optional string> + * } + * or + * { + * type: "remove", + * index: <number>, + * name: <string>, + * } + * + * @returns the rule with updated properties + */ + modifyProperties(modifications) { + // Use a fresh element for each call to this function to prevent side + // effects that pop up based on property values that were already set on the + // element. + let document; + if (this.rawNode) { + document = this.rawNode.ownerDocument; + } else { + let parentStyleSheet = this._parentSheet; + while (parentStyleSheet.ownerRule) { + parentStyleSheet = parentStyleSheet.ownerRule.parentStyleSheet; + } + + document = this.getDocument(parentStyleSheet); + } + + const tempElement = document.createElementNS(XHTML_NS, "div"); + + for (const mod of modifications) { + if (mod.type === "set") { + tempElement.style.setProperty(mod.name, mod.value, mod.priority || ""); + this.rawStyle.setProperty( + mod.name, + tempElement.style.getPropertyValue(mod.name), + mod.priority || "" + ); + } else if (mod.type === "remove" || mod.type === "disable") { + this.rawStyle.removeProperty(mod.name); + } + } + + this.pageStyle.refreshObservedRules(this.ancestorRules); + + // Add processed modifications to the _pendingDeclarationChanges array, + // they will be emitted as CSS_CHANGE resources once `declarations` have + // been re-computed in `form`. + this._pendingDeclarationChanges.push(...modifications); + + return this; + } + + /** + * Helper function for modifySelector, inserts the new + * rule with the new selector into the parent style sheet and removes the + * current rule. Returns the newly inserted css rule or null if the rule is + * unsuccessfully inserted to the parent style sheet. + * + * @param {String} value + * The new selector value + * @param {Boolean} editAuthored + * True if the selector should be updated by editing the + * authored text; false if the selector should be updated via + * CSSOM. + * + * @returns {CSSRule} + * The new CSS rule added + */ + async _addNewSelector(value, editAuthored) { + const rule = this.rawRule; + const parentStyleSheet = this._parentSheet; + + // We know the selector modification is ok, so if the client asked + // for the authored text to be edited, do it now. + if (editAuthored) { + const document = this.getDocument(this._parentSheet); + try { + document.querySelector(value); + } catch (e) { + return null; + } + + const resourceId = + this.pageStyle.styleSheetsManager.getStyleSheetResourceId( + this._parentSheet + ); + let authoredText = await this.pageStyle.styleSheetsManager.getText( + resourceId + ); + + const [startOffset, endOffset] = getSelectorOffsets( + authoredText, + this.line, + this.column + ); + authoredText = + authoredText.substring(0, startOffset) + + value + + authoredText.substring(endOffset); + + await this.pageStyle.styleSheetsManager.setStyleSheetText( + resourceId, + authoredText, + { kind: UPDATE_PRESERVING_RULES } + ); + } else { + // We retrieve the parent of the rule, which can be a regular stylesheet, but also + // another rule, in case the underlying rule is nested. + // If the rule is nested in another rule, we need to use its parent rule to "edit" it. + // If the rule has no parent rules, we can simply use the stylesheet. + const parent = this.rawRule.parentRule || parentStyleSheet; + const cssRules = parent.cssRules; + const cssText = rule.cssText; + const selectorText = rule.selectorText; + + for (let i = 0; i < cssRules.length; i++) { + if (rule === cssRules.item(i)) { + try { + // Inserts the new style rule into the current style sheet and + // delete the current rule + const ruleText = cssText.slice(selectorText.length).trim(); + parent.insertRule(value + " " + ruleText, i); + parent.deleteRule(i + 1); + break; + } catch (e) { + // The selector could be invalid, or the rule could fail to insert. + return null; + } + } + } + } + + await this.updateAncestorRulesAuthoredText(); + + return this._getRuleFromIndex(parentStyleSheet); + } + + /** + * Take an object with instructions to modify a CSS declaration and log an object with + * normalized metadata which describes the change in the context of this rule. + * + * @param {Object} change + * Data about a modification to a declaration. @see |modifyProperties()| + * @param {Object} newDeclarations + * The current declarations array to get the latest values, names... + * @param {Object} oldDeclarations + * The previous declarations array to use to fetch old values, names... + */ + logDeclarationChange(change, newDeclarations, oldDeclarations) { + // Position of the declaration within its rule. + const index = change.index; + // Destructure properties from the previous CSS declaration at this index, if any, + // to new variable names to indicate the previous state. + let { + value: prevValue, + name: prevName, + priority: prevPriority, + commentOffsets, + } = oldDeclarations[index] || {}; + + const { value: currentValue, name: currentName } = + newDeclarations[index] || {}; + // A declaration is disabled if it has a `commentOffsets` array. + // Here we type coerce the value to a boolean with double-bang (!!) + const prevDisabled = !!commentOffsets; + // Append the "!important" string if defined in the previous priority flag. + prevValue = + prevValue && prevPriority ? `${prevValue} !important` : prevValue; + + const data = this.metadata; + + switch (change.type) { + case "set": + data.type = prevValue ? "declaration-add" : "declaration-update"; + // If `change.newName` is defined, use it because the property is being renamed. + // Otherwise, a new declaration is being created or the value of an existing + // declaration is being updated. In that case, use the currentName computed + // by the engine. + const changeName = currentName || change.name; + const name = change.newName ? change.newName : changeName; + // Append the "!important" string if defined in the incoming priority flag. + + const changeValue = currentValue || change.value; + const newValue = change.priority + ? `${changeValue} !important` + : changeValue; + + // Reuse the previous value string, when the property is renamed. + // Otherwise, use the incoming value string. + const value = change.newName ? prevValue : newValue; + + data.add = [{ property: name, value, index }]; + // If there is a previous value, log its removal together with the previous + // property name. Using the previous name handles the case for renaming a property + // and is harmless when updating an existing value (the name stays the same). + if (prevValue) { + data.remove = [{ property: prevName, value: prevValue, index }]; + } else { + data.remove = null; + } + + // When toggling a declaration from OFF to ON, if not renaming the property, + // do not mark the previous declaration for removal, otherwise the add and + // remove operations will cancel each other out when tracked. Tracked changes + // have no context of "disabled", only "add" or remove, like diffs. + if (prevDisabled && !change.newName && prevValue === newValue) { + data.remove = null; + } + + break; + + case "remove": + data.type = "declaration-remove"; + data.add = null; + data.remove = [{ property: change.name, value: prevValue, index }]; + break; + + case "disable": + data.type = "declaration-disable"; + data.add = null; + data.remove = [{ property: change.name, value: prevValue, index }]; + break; + } + + TrackChangeEmitter.trackChange(data); + } + + /** + * Helper method for tracking CSS changes. Logs the change of this rule's selector as + * two operations: a removal using the old selector and an addition using the new one. + * + * @param {String} oldSelector + * This rule's previous selector. + * @param {String} newSelector + * This rule's new selector. + */ + logSelectorChange(oldSelector, newSelector) { + TrackChangeEmitter.trackChange({ + ...this.metadata, + type: "selector-remove", + add: null, + remove: null, + selector: oldSelector, + }); + + TrackChangeEmitter.trackChange({ + ...this.metadata, + type: "selector-add", + add: null, + remove: null, + selector: newSelector, + }); + } + + /** + * Modify the current rule's selector by inserting a new rule with the new + * selector value and removing the current rule. + * + * Returns information about the new rule and applied style + * so that consumers can immediately display the new rule, whether or not the + * selector matches the current element without having to refresh the whole + * list. + * + * @param {DOMNode} node + * The current selected element + * @param {String} value + * The new selector value + * @param {Boolean} editAuthored + * True if the selector should be updated by editing the + * authored text; false if the selector should be updated via + * CSSOM. + * @returns {Object} + * Returns an object that contains the applied style properties of the + * new rule and a boolean indicating whether or not the new selector + * matches the current selected element + */ + modifySelector(node, value, editAuthored = false) { + if (this.type === ELEMENT_STYLE || this.rawRule.selectorText === value) { + return { ruleProps: null, isMatching: true }; + } + + // Nullify cached desugared selectors as it might be outdated + this._desugaredSelectors = null; + + // The rule's previous selector is lost after calling _addNewSelector(). Save it now. + const oldValue = this.rawRule.selectorText; + let selectorPromise = this._addNewSelector(value, editAuthored); + + if (editAuthored) { + selectorPromise = selectorPromise.then(newCssRule => { + if (newCssRule) { + this.logSelectorChange(oldValue, value); + const style = this.pageStyle._styleRef(newCssRule); + // See the comment in |form| to understand this. + return style.getAuthoredCssText().then(() => newCssRule); + } + return newCssRule; + }); + } + + return selectorPromise.then(newCssRule => { + let entries = null; + let isMatching = false; + + if (newCssRule) { + const ruleEntry = this.pageStyle.findEntryMatchingRule( + node, + newCssRule + ); + if (ruleEntry.length === 1) { + entries = this.pageStyle.getAppliedProps(node, ruleEntry, { + matchedSelectors: true, + }); + } else { + entries = this.pageStyle.getNewAppliedProps(node, newCssRule); + } + + isMatching = entries.some( + ruleProp => !!ruleProp.matchedDesugaredSelectors.length + ); + } + + const result = { isMatching }; + if (entries) { + result.ruleProps = { entries }; + } + + return result; + }); + } + + /** + * Get the eligible query container for a given @container rule and a given node + * + * @param {Number} ancestorRuleIndex: The index of the @container rule in this.ancestorRules + * @param {NodeActor} nodeActor: The nodeActor for which we want to retrieve the query container + * @returns {Object} An object with the following properties: + * - node: {NodeActor|null} The nodeActor representing the query container, + * null if none were found + * - containerType: {string} The computed `containerType` value of the query container + * - inlineSize: {string} The computed `inlineSize` value of the query container (e.g. `120px`) + * - blockSize: {string} The computed `blockSize` value of the query container (e.g. `812px`) + */ + getQueryContainerForNode(ancestorRuleIndex, nodeActor) { + const ancestorRule = this.ancestorRules[ancestorRuleIndex]; + if (!ancestorRule) { + console.error( + `Couldn't not find an ancestor rule at index ${ancestorRuleIndex}` + ); + return { node: null }; + } + + const containerEl = ancestorRule.rawRule.queryContainerFor( + nodeActor.rawNode + ); + + // queryContainerFor returns null when the container name wasn't find in any ancestor. + // In practice this shouldn't happen, as if the rule is applied, it means that an + // elligible container was found. + if (!containerEl) { + return { node: null }; + } + + const computedStyle = CssLogic.getComputedStyle(containerEl); + return { + node: this.pageStyle.walker.getNode(containerEl), + containerType: computedStyle.containerType, + inlineSize: computedStyle.inlineSize, + blockSize: computedStyle.blockSize, + }; + } + + /** + * Using the latest computed style applicable to the selected element, + * check the states of declarations in this CSS rule. + * + * If any have changed their used/unused state, potentially as a result of changes in + * another rule, fire a "rule-updated" event with this rule actor in its latest state. + * + * @param {Boolean} forceRefresh: Set to true to emit "rule-updated", even if the state + * of the declarations didn't change. + */ + maybeRefresh(forceRefresh) { + let hasChanged = false; + + const el = this.pageStyle.selectedElement; + const style = CssLogic.getComputedStyle(el); + + for (const decl of this._declarations) { + // TODO: convert from Object to Boolean. See Bug 1574471 + const isUsed = isPropertyUsed(el, style, this.rawRule, decl.name); + + if (decl.isUsed.used !== isUsed.used) { + decl.isUsed = isUsed; + hasChanged = true; + } + } + + if (hasChanged || forceRefresh) { + // ⚠️ IMPORTANT ⚠️ + // When an event is emitted via the protocol with the StyleRuleActor as payload, the + // corresponding StyleRuleFront will be automatically updated under the hood. + // Therefore, when the client looks up properties on the front reference it already + // has, it will get the latest values set on the actor, not the ones it originally + // had when the front was created. The client is not required to explicitly replace + // its previous front reference to the one it receives as this event's payload. + // The client doesn't even need to explicitly listen for this event. + // The update of the front happens automatically. + this.emit("rule-updated", this); + } + } +} +exports.StyleRuleActor = StyleRuleActor; + +/** + * Compute the start and end offsets of a rule's selector text, given + * the CSS text and the line and column at which the rule begins. + * @param {String} initialText + * @param {Number} line (1-indexed) + * @param {Number} column (1-indexed) + * @return {array} An array with two elements: [startOffset, endOffset]. + * The elements mark the bounds in |initialText| of + * the CSS rule's selector. + */ +function getSelectorOffsets(initialText, line, column) { + if (typeof line === "undefined" || typeof column === "undefined") { + throw new Error("Location information is missing"); + } + + const { offset: textOffset, text } = getTextAtLineColumn( + initialText, + line, + column + ); + const lexer = getCSSLexer(text); + + // Search forward for the opening brace. + let endOffset; + while (true) { + const token = lexer.nextToken(); + if (!token) { + break; + } + if (token.tokenType === "symbol" && token.text === "{") { + if (endOffset === undefined) { + break; + } + return [textOffset, textOffset + endOffset]; + } + // Preserve comments and whitespace just before the "{". + if (token.tokenType !== "comment" && token.tokenType !== "whitespace") { + endOffset = token.endOffset; + } + } + + throw new Error("could not find bounds of rule"); +} diff --git a/devtools/server/actors/style-sheets.js b/devtools/server/actors/style-sheets.js new file mode 100644 index 0000000000..64f16badc0 --- /dev/null +++ b/devtools/server/actors/style-sheets.js @@ -0,0 +1,105 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const { Actor } = require("resource://devtools/shared/protocol.js"); +const { + styleSheetsSpec, +} = require("resource://devtools/shared/specs/style-sheets.js"); + +const { + LongStringActor, +} = require("resource://devtools/server/actors/string.js"); + +loader.lazyRequireGetter( + this, + "UPDATE_GENERAL", + "resource://devtools/server/actors/utils/stylesheets-manager.js", + true +); + +/** + * Creates a StyleSheetsActor. StyleSheetsActor provides remote access to the + * stylesheets of a document. + */ +class StyleSheetsActor extends Actor { + constructor(conn, targetActor) { + super(conn, styleSheetsSpec); + + this.parentActor = targetActor; + } + + /** + * The window we work with, taken from the parent actor. + */ + get window() { + return this.parentActor.window; + } + + /** + * The current content document of the window we work with. + */ + get document() { + return this.window.document; + } + + getTraits() { + return { + traits: {}, + }; + } + + destroy() { + for (const win of this.parentActor.windows) { + // This flag only exists for devtools, so we are free to clear + // it when we're done. + win.document.styleSheetChangeEventsEnabled = false; + } + + super.destroy(); + } + + /** + * Create a new style sheet in the document with the given text. + * Return an actor for it. + * + * @param {object} request + * Debugging protocol request object, with 'text property' + * @param {string} fileName + * If the stylesheet adding is from file, `fileName` indicates the path. + * @return {object} + * Object with 'styelSheet' property for form on new actor. + */ + async addStyleSheet(text, fileName = null) { + const styleSheetsManager = this._getStyleSheetsManager(); + await styleSheetsManager.addStyleSheet(this.document, text, fileName); + } + + _getStyleSheetsManager() { + return this.parentActor.getStyleSheetsManager(); + } + + toggleDisabled(resourceId) { + const styleSheetsManager = this._getStyleSheetsManager(); + return styleSheetsManager.toggleDisabled(resourceId); + } + + async getText(resourceId) { + const styleSheetsManager = this._getStyleSheetsManager(); + const text = await styleSheetsManager.getText(resourceId); + return new LongStringActor(this.conn, text || ""); + } + + update(resourceId, text, transition, cause = "") { + const styleSheetsManager = this._getStyleSheetsManager(); + return styleSheetsManager.setStyleSheetText(resourceId, text, { + transition, + kind: UPDATE_GENERAL, + cause, + }); + } +} + +exports.StyleSheetsActor = StyleSheetsActor; diff --git a/devtools/server/actors/target-configuration.js b/devtools/server/actors/target-configuration.js new file mode 100644 index 0000000000..35340ee668 --- /dev/null +++ b/devtools/server/actors/target-configuration.js @@ -0,0 +1,493 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const { Actor } = require("resource://devtools/shared/protocol.js"); +const { + targetConfigurationSpec, +} = require("resource://devtools/shared/specs/target-configuration.js"); + +const { + SessionDataHelpers, +} = require("resource://devtools/server/actors/watcher/SessionDataHelpers.jsm"); +const { isBrowsingContextPartOfContext } = ChromeUtils.importESModule( + "resource://devtools/server/actors/watcher/browsing-context-helpers.sys.mjs" +); +const { SUPPORTED_DATA } = SessionDataHelpers; +const { TARGET_CONFIGURATION } = SUPPORTED_DATA; + +// List of options supported by this target configuration actor. +/* eslint sort-keys: "error" */ +const SUPPORTED_OPTIONS = { + // Disable network request caching. + cacheDisabled: true, + // Enable color scheme simulation. + colorSchemeSimulation: true, + // Enable custom formatters + customFormatters: true, + // Set a custom user agent + customUserAgent: true, + // Enable JavaScript + javascriptEnabled: true, + // Force a custom device pixel ratio (used in RDM). Set to null to restore origin ratio. + overrideDPPX: true, + // Enable print simulation mode. + printSimulationEnabled: true, + // Override navigator.maxTouchPoints (used in RDM and doesn't apply if RDM isn't enabled) + rdmPaneMaxTouchPoints: true, + // Page orientation (used in RDM and doesn't apply if RDM isn't enabled) + rdmPaneOrientation: true, + // Enable allocation tracking, if set, contains an object defining the tracking configurations + recordAllocations: true, + // Reload the page when the touch simulation state changes (only works alongside touchEventsOverride) + reloadOnTouchSimulationToggle: true, + // Restore focus in the page after closing DevTools. + restoreFocus: true, + // Enable service worker testing over HTTP (instead of HTTPS only). + serviceWorkersTestingEnabled: true, + // Set the current tab offline + setTabOffline: true, + // Enable touch events simulation + touchEventsOverride: true, + // Used to configure and start/stop the JavaScript tracer + tracerOptions: true, + // Use simplified highlighters when prefers-reduced-motion is enabled. + useSimpleHighlightersForReducedMotion: true, +}; +/* eslint-disable sort-keys */ + +/** + * This actor manages the configuration flags which apply to DevTools targets. + * + * Configuration flags should be applied to all concerned targets when the + * configuration is updated, and new targets should also be able to read the + * flags when they are created. The flags will be forwarded to the WatcherActor + * and stored as TARGET_CONFIGURATION data entries. + * Some flags will be set directly set from this actor, in the parent process + * (see _updateParentProcessConfiguration), and others will be set from the target actor, + * in the content process. + * + * @constructor + * + */ +class TargetConfigurationActor extends Actor { + constructor(watcherActor) { + super(watcherActor.conn, targetConfigurationSpec); + this.watcherActor = watcherActor; + + this._onBrowsingContextAttached = + this._onBrowsingContextAttached.bind(this); + // We need to be notified of new browsing context being created so we can re-set flags + // we already set on the "previous" browsing context. We're using this event as it's + // emitted very early in the document lifecycle (i.e. before any script on the page is + // executed), which is not the case for "window-global-created" for example. + Services.obs.addObserver( + this._onBrowsingContextAttached, + "browsing-context-attached" + ); + + // When we perform a bfcache navigation, the current browsing context gets + // replaced with a browsing which was previously stored in bfcache and we + // should update our reference accordingly. + this._onBfCacheNavigation = this._onBfCacheNavigation.bind(this); + this.watcherActor.on( + "bf-cache-navigation-pageshow", + this._onBfCacheNavigation + ); + + this._browsingContext = this.watcherActor.browserElement?.browsingContext; + } + + form() { + return { + actor: this.actorID, + configuration: this._getConfiguration(), + traits: { supportedOptions: SUPPORTED_OPTIONS }, + }; + } + + /** + * Returns whether or not this actor should handle the flag that should be set on the + * BrowsingContext in the parent process. + * + * @returns {Boolean} + */ + _shouldHandleConfigurationInParentProcess() { + // Only handle parent process configuration if the watcherActor is tied to a + // browser element. + // For now, the Browser Toolbox and Web Extension are having a unique target + // which applies the configuration by itself on new documents. + return this.watcherActor.sessionContext.type == "browser-element"; + } + + /** + * Event handler for attached browsing context. This will be called when + * a new browsing context is created that we might want to handle + * (e.g. when navigating to a page with Cross-Origin-Opener-Policy header) + */ + _onBrowsingContextAttached(browsingContext) { + if (!this._shouldHandleConfigurationInParentProcess()) { + return; + } + + // We only want to set flags on top-level browsing context. The platform + // will take care of propagating it to the entire browsing contexts tree. + if (browsingContext.parent) { + return; + } + + // Only process BrowsingContexts which are related to the debugged scope. + // As this callback fires very early, the BrowsingContext may not have + // any WindowGlobal yet and so we ignore all checks dones against the WindowGlobal + // if there is none. Meaning we might accept more BrowsingContext than expected. + if ( + !isBrowsingContextPartOfContext( + browsingContext, + this.watcherActor.sessionContext, + { acceptNoWindowGlobal: true, forceAcceptTopLevelTarget: true } + ) + ) { + return; + } + + const rdmEnabledInPreviousBrowsingContext = this._browsingContext.inRDMPane; + + // Before replacing the target browsing context, restore the configuration + // on the previous one if they share the same browser. + if ( + this._browsingContext && + this._browsingContext.browserId === browsingContext.browserId && + !this._browsingContext.isDiscarded + ) { + // For now this should always be true as long as we already had a browsing + // context set, but the same logic should be used when supporting EFT on + // toolboxes with several top level browsing contexts: when a new browsing + // context attaches, only reset the browsing context with the same browserId + this._restoreParentProcessConfiguration(); + } + + // We need to store the browsing context as this.watcherActor.browserElement.browsingContext + // can still refer to the previous browsing context at this point. + this._browsingContext = browsingContext; + + // If `inRDMPane` was set in the previous browsing context, set it again on the new one, + // otherwise some RDM-related configuration won't be applied (e.g. orientation). + if (rdmEnabledInPreviousBrowsingContext) { + this._browsingContext.inRDMPane = true; + } + this._updateParentProcessConfiguration(this._getConfiguration()); + } + + _onBfCacheNavigation({ windowGlobal } = {}) { + if (windowGlobal) { + this._onBrowsingContextAttached(windowGlobal.browsingContext); + } + } + + _getConfiguration() { + const targetConfigurationData = + this.watcherActor.getSessionDataForType(TARGET_CONFIGURATION); + if (!targetConfigurationData) { + return {}; + } + + const cfgMap = {}; + for (const { key, value } of targetConfigurationData) { + cfgMap[key] = value; + } + return cfgMap; + } + + /** + * + * @param {Object} configuration + * @returns Promise<Object> Applied configuration object + */ + async updateConfiguration(configuration) { + const cfgArray = Object.keys(configuration) + .filter(key => { + if (!SUPPORTED_OPTIONS[key]) { + console.warn(`Unsupported option for TargetConfiguration: ${key}`); + return false; + } + return true; + }) + .map(key => ({ key, value: configuration[key] })); + + this._updateParentProcessConfiguration(configuration); + await this.watcherActor.addOrSetDataEntry( + TARGET_CONFIGURATION, + cfgArray, + "add" + ); + return this._getConfiguration(); + } + + /** + * + * @param {Object} configuration: See `updateConfiguration` + */ + _updateParentProcessConfiguration(configuration) { + if (!this._shouldHandleConfigurationInParentProcess()) { + return; + } + + let shouldReload = false; + for (const [key, value] of Object.entries(configuration)) { + switch (key) { + case "colorSchemeSimulation": + this._setColorSchemeSimulation(value); + break; + case "customUserAgent": + this._setCustomUserAgent(value); + break; + case "javascriptEnabled": + if (value !== undefined) { + // This flag requires a reload in order to take full effect, + // so reload if it has changed. + if (value != this.isJavascriptEnabled()) { + shouldReload = true; + } + this._setJavascriptEnabled(value); + } + break; + case "overrideDPPX": + this._setDPPXOverride(value); + break; + case "printSimulationEnabled": + this._setPrintSimulationEnabled(value); + break; + case "rdmPaneMaxTouchPoints": + this._setRDMPaneMaxTouchPoints(value); + break; + case "rdmPaneOrientation": + this._setRDMPaneOrientation(value); + break; + case "serviceWorkersTestingEnabled": + this._setServiceWorkersTestingEnabled(value); + break; + case "touchEventsOverride": + this._setTouchEventsOverride(value); + break; + case "cacheDisabled": + this._setCacheDisabled(value); + break; + case "setTabOffline": + this._setTabOffline(value); + break; + } + } + + if (shouldReload) { + this._browsingContext.reload(Ci.nsIWebNavigation.LOAD_FLAGS_NONE); + } + } + + _restoreParentProcessConfiguration() { + if (!this._shouldHandleConfigurationInParentProcess()) { + return; + } + + this._setServiceWorkersTestingEnabled(false); + this._setPrintSimulationEnabled(false); + this._setCacheDisabled(false); + this._setTabOffline(false); + + // Restore the color scheme simulation only if it was explicitly updated + // by this actor. This will avoid side effects caused when destroying additional + // targets (e.g. RDM target, WebExtension target, …). + // TODO: We may want to review other configuration values to see if we should use + // the same pattern (Bug 1701553). + if (this._resetColorSchemeSimulationOnDestroy) { + this._setColorSchemeSimulation(null); + } + + // Restore the user agent only if it was explicitly updated by this specific actor. + if (this._initialUserAgent !== undefined) { + this._setCustomUserAgent(this._initialUserAgent); + } + + // Restore the origin device pixel ratio only if it was explicitly updated by this + // specific actor. + if (this._initialDPPXOverride !== undefined) { + this._setDPPXOverride(this._initialDPPXOverride); + } + + if (this._initialJavascriptEnabled !== undefined) { + this._setJavascriptEnabled(this._initialJavascriptEnabled); + } + + if (this._initialTouchEventsOverride !== undefined) { + this._setTouchEventsOverride(this._initialTouchEventsOverride); + } + } + + /** + * Disable or enable the service workers testing features. + */ + _setServiceWorkersTestingEnabled(enabled) { + if (this._browsingContext.serviceWorkersTestingEnabled != enabled) { + this._browsingContext.serviceWorkersTestingEnabled = enabled; + } + } + + /** + * Disable or enable the print simulation. + */ + _setPrintSimulationEnabled(enabled) { + const value = enabled ? "print" : ""; + if (this._browsingContext.mediumOverride != value) { + this._browsingContext.mediumOverride = value; + } + } + + /** + * Disable or enable the color-scheme simulation. + */ + _setColorSchemeSimulation(override) { + const value = override || "none"; + if (this._browsingContext.prefersColorSchemeOverride != value) { + this._browsingContext.prefersColorSchemeOverride = value; + this._resetColorSchemeSimulationOnDestroy = true; + } + } + + /** + * Set a custom user agent on the page + * + * @param {String} userAgent: The user agent to set on the page. If null, will reset the + * user agent to its original value. + * @returns {Boolean} Whether the user agent was changed or not. + */ + _setCustomUserAgent(userAgent = "") { + if (this._browsingContext.customUserAgent === userAgent) { + return; + } + + if (this._initialUserAgent === undefined) { + this._initialUserAgent = this._browsingContext.customUserAgent; + } + + this._browsingContext.customUserAgent = userAgent; + } + + isJavascriptEnabled() { + return this._browsingContext.allowJavascript; + } + + _setJavascriptEnabled(allow) { + if (this._initialJavascriptEnabled === undefined) { + this._initialJavascriptEnabled = this._browsingContext.allowJavascript; + } + if (allow !== undefined) { + this._browsingContext.allowJavascript = allow; + } + } + + /* DPPX override */ + _setDPPXOverride(dppx) { + if (this._browsingContext.overrideDPPX === dppx) { + return; + } + + if (!dppx && this._initialDPPXOverride) { + dppx = this._initialDPPXOverride; + } else if (dppx !== undefined && this._initialDPPXOverride === undefined) { + this._initialDPPXOverride = this._browsingContext.overrideDPPX; + } + + if (dppx !== undefined) { + this._browsingContext.overrideDPPX = dppx; + } + } + + /** + * Set the touchEventsOverride on the browsing context. + * + * @param {String} flag: See BrowsingContext.webidl `TouchEventsOverride` enum for values. + */ + _setTouchEventsOverride(flag) { + if (this._browsingContext.touchEventsOverride === flag) { + return; + } + + if (!flag && this._initialTouchEventsOverride) { + flag = this._initialTouchEventsOverride; + } else if ( + flag !== undefined && + this._initialTouchEventsOverride === undefined + ) { + this._initialTouchEventsOverride = + this._browsingContext.touchEventsOverride; + } + + if (flag !== undefined) { + this._browsingContext.touchEventsOverride = flag; + } + } + + /** + * Overrides navigator.maxTouchPoints. + * Note that we don't need to reset the original value when the actor is destroyed, + * as it's directly handled by the platform when RDM is closed. + * + * @param {Integer} maxTouchPoints + */ + _setRDMPaneMaxTouchPoints(maxTouchPoints) { + this._browsingContext.setRDMPaneMaxTouchPoints(maxTouchPoints); + } + + /** + * Set an orientation and an angle on the browsing context. This will be applied only + * if Responsive Design Mode is enabled. + * + * @param {Object} options + * @param {String} options.type: The orientation type of the rotated device. + * @param {Number} options.angle: The rotated angle of the device. + */ + _setRDMPaneOrientation({ type, angle }) { + this._browsingContext.setRDMPaneOrientation(type, angle); + } + + /** + * Disable or enable the cache via the browsing context. + * + * @param {Boolean} disabled: The state the cache should be changed to + */ + _setCacheDisabled(disabled) { + const value = disabled + ? Ci.nsIRequest.LOAD_BYPASS_CACHE + : Ci.nsIRequest.LOAD_NORMAL; + if (this._browsingContext.defaultLoadFlags != value) { + this._browsingContext.defaultLoadFlags = value; + } + } + + /** + * Set the browsing context to offline. + * + * @param {Boolean} offline: Whether the network throttling is set to offline + */ + _setTabOffline(offline) { + if (!this._browsingContext.isDiscarded) { + this._browsingContext.forceOffline = offline; + } + } + + destroy() { + Services.obs.removeObserver( + this._onBrowsingContextAttached, + "browsing-context-attached" + ); + this.watcherActor.off( + "bf-cache-navigation-pageshow", + this._onBfCacheNavigation + ); + this._restoreParentProcessConfiguration(); + super.destroy(); + } +} + +exports.TargetConfigurationActor = TargetConfigurationActor; diff --git a/devtools/server/actors/targets/base-target-actor.js b/devtools/server/actors/targets/base-target-actor.js new file mode 100644 index 0000000000..f3fc2a89e7 --- /dev/null +++ b/devtools/server/actors/targets/base-target-actor.js @@ -0,0 +1,214 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const { Actor } = require("resource://devtools/shared/protocol.js"); +const { + TYPES, + getResourceWatcher, +} = require("resource://devtools/server/actors/resources/index.js"); +const Targets = require("devtools/server/actors/targets/index"); + +loader.lazyRequireGetter( + this, + "SessionDataProcessors", + "resource://devtools/server/actors/targets/session-data-processors/index.js", + true +); + +class BaseTargetActor extends Actor { + constructor(conn, targetType, spec) { + super(conn, spec); + + /** + * Type of target, a string of Targets.TYPES. + * @return {string} + */ + this.targetType = targetType; + } + + /** + * Process a new data entry, which can be watched resources, breakpoints, ... + * + * @param string type + * The type of data to be added + * @param Array<Object> entries + * The values to be added to this type of data + * @param Boolean isDocumentCreation + * Set to true if this function is called just after a new document (and its + * associated target) is created. + * @param String updateType + * "add" will only add the new entries in the existing data set. + * "set" will update the data set with the new entries. + */ + async addOrSetSessionDataEntry( + type, + entries, + isDocumentCreation = false, + updateType + ) { + const processor = SessionDataProcessors[type]; + if (processor) { + await processor.addOrSetSessionDataEntry( + this, + entries, + isDocumentCreation, + updateType + ); + } + } + + /** + * Remove data entries that have been previously added via addOrSetSessionDataEntry + * + * See addOrSetSessionDataEntry for argument description. + */ + removeSessionDataEntry(type, entries) { + const processor = SessionDataProcessors[type]; + if (processor) { + processor.removeSessionDataEntry(this, entries); + } + } + + /** + * Called by Resource Watchers, when new resources are available, updated or destroyed. + * + * @param String updateType + * Can be "available", "updated" or "destroyed" + * @param Array<json> resources + * List of all resource's form. A resource is a JSON object piped over to the client. + * It can contain actor IDs, actor forms, to be manually marshalled by the client. + */ + notifyResources(updateType, resources) { + if (resources.length === 0 || this.isDestroyed()) { + // Don't try to emit if the resources array is empty or the actor was + // destroyed. + return; + } + + if (this.devtoolsSpawnedBrowsingContextForWebExtension) { + this.overrideResourceBrowsingContextForWebExtension(resources); + } + + this.emit(`resource-${updateType}-form`, resources); + } + + /** + * For WebExtension, we have to hack all resource's browsingContextID + * in order to ensure emitting them with the fixed, original browsingContextID + * related to the fallback document created by devtools which always exists. + * The target's form will always be relating to that BrowsingContext IDs (browsing context ID and inner window id). + * Even if the target switches internally to another document via WindowGlobalTargetActor._setWindow. + * + * @param {Array<Objects>} List of resources + */ + overrideResourceBrowsingContextForWebExtension(resources) { + const browsingContextID = + this.devtoolsSpawnedBrowsingContextForWebExtension.id; + resources.forEach( + resource => (resource.browsingContextID = browsingContextID) + ); + } + + // List of actor prefixes (string) which have already been instantiated via getTargetScopedActor method. + #instantiatedTargetScopedActors = new Set(); + + /** + * Try to return any target scoped actor instance, if it exists. + * They are lazily instantiated and so will only be available + * if the client called at least one of their method. + * + * @param {String} prefix + * Prefix for the actor we would like to retrieve. + * Defined in devtools/server/actors/utils/actor-registry.js + */ + getTargetScopedActor(prefix) { + if (this.isDestroyed()) { + return null; + } + const form = this.form(); + this.#instantiatedTargetScopedActors.add(prefix); + return this.conn._getOrCreateActor(form[prefix + "Actor"]); + } + + /** + * Returns true, if the related target scoped actor has already been queried + * and instantiated via `getTargetScopedActor` method. + * + * @param {String} prefix + * See getTargetScopedActor definition + * @return Boolean + * True, if the actor has already been instantiated. + */ + hasTargetScopedActor(prefix) { + return this.#instantiatedTargetScopedActors.has(prefix); + } + + /** + * Apply target-specific options. + * + * This will be called by the watcher when the DevTools target-configuration + * is updated, or when a target is created via JSWindowActors. + * + * @param {JSON} options + * Configuration object provided by the client. + * See target-configuration actor. + * @param {Boolean} calledFromDocumentCreate + * True, when this is called with initial configuration when the related target + * actor is instantiated. + */ + updateTargetConfiguration(options = {}, calledFromDocumentCreation = false) { + // If there is some tracer options, we should start tracing, otherwise we should stop (if we were) + if (options.tracerOptions) { + // Ignore the SessionData update if the user requested to start the tracer on next page load and: + // - we apply it to an already loaded WindowGlobal, + // - the target isn't the top level one. + if ( + options.tracerOptions.traceOnNextLoad && + (!calledFromDocumentCreation || !this.isTopLevelTarget) + ) { + if (this.isTopLevelTarget) { + const consoleMessageWatcher = getResourceWatcher( + this, + TYPES.CONSOLE_MESSAGE + ); + if (consoleMessageWatcher) { + consoleMessageWatcher.emitMessages([ + { + arguments: [ + "Waiting for next navigation or page reload before starting tracing", + ], + styles: [], + level: "jstracer", + chromeContext: false, + timeStamp: ChromeUtils.dateNow(), + }, + ]); + } + } + return; + } + // Bug 1874204: For now, in the browser toolbox, only frame and workers are traced. + // Content process targets are ignored as they would also include each document/frame target. + // This would require some work to ignore FRAME targets from here, only in case of browser toolbox, + // and also handle all content process documents for DOM Event logging. + // + // Bug 1874219: Also ignore extensions for now as they are all running in the same process, + // whereas we can only spawn one tracer per thread. + if ( + this.targetType == Targets.TYPES.PROCESS || + this.url?.startsWith("moz-extension://") + ) { + return; + } + const tracerActor = this.getTargetScopedActor("tracer"); + tracerActor.startTracing(options.tracerOptions); + } else if (this.hasTargetScopedActor("tracer")) { + const tracerActor = this.getTargetScopedActor("tracer"); + tracerActor.stopTracing(); + } + } +} +exports.BaseTargetActor = BaseTargetActor; diff --git a/devtools/server/actors/targets/content-process.js b/devtools/server/actors/targets/content-process.js new file mode 100644 index 0000000000..56b1934ef1 --- /dev/null +++ b/devtools/server/actors/targets/content-process.js @@ -0,0 +1,265 @@ +/* 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"; + +/* + * Target actor for all resources in a content process of Firefox (chrome sandboxes, frame + * scripts, documents, etc.) + * + * See devtools/docs/backend/actor-hierarchy.md for more details. + */ + +const { ThreadActor } = require("resource://devtools/server/actors/thread.js"); +const { + WebConsoleActor, +} = require("resource://devtools/server/actors/webconsole.js"); +const makeDebugger = require("resource://devtools/server/actors/utils/make-debugger.js"); +const { Pool } = require("resource://devtools/shared/protocol.js"); +const { assert } = require("resource://devtools/shared/DevToolsUtils.js"); +const { + SourcesManager, +} = require("resource://devtools/server/actors/utils/sources-manager.js"); +const { + contentProcessTargetSpec, +} = require("resource://devtools/shared/specs/targets/content-process.js"); +const Targets = require("resource://devtools/server/actors/targets/index.js"); +const Resources = require("resource://devtools/server/actors/resources/index.js"); +const { + BaseTargetActor, +} = require("resource://devtools/server/actors/targets/base-target-actor.js"); +const { TargetActorRegistry } = ChromeUtils.importESModule( + "resource://devtools/server/actors/targets/target-actor-registry.sys.mjs", + { + loadInDevToolsLoader: false, + } +); + +loader.lazyRequireGetter( + this, + "WorkerDescriptorActorList", + "resource://devtools/server/actors/worker/worker-descriptor-actor-list.js", + true +); +loader.lazyRequireGetter( + this, + "MemoryActor", + "resource://devtools/server/actors/memory.js", + true +); +loader.lazyRequireGetter( + this, + "TracerActor", + "resource://devtools/server/actors/tracer.js", + true +); + +class ContentProcessTargetActor extends BaseTargetActor { + constructor(conn, { isXpcShellTarget = false, sessionContext } = {}) { + super(conn, Targets.TYPES.PROCESS, contentProcessTargetSpec); + + this.threadActor = null; + this.isXpcShellTarget = isXpcShellTarget; + this.sessionContext = sessionContext; + + // Use a see-everything debugger + this.makeDebugger = makeDebugger.bind(null, { + findDebuggees: dbg => + dbg.findAllGlobals().map(g => g.unsafeDereference()), + shouldAddNewGlobalAsDebuggee: global => true, + }); + + const sandboxPrototype = { + get tabs() { + return Array.from( + Services.ww.getWindowEnumerator(), + win => win.docShell.messageManager + ); + }, + }; + + // Scope into which the webconsole executes: + // A sandbox with chrome privileges with a `tabs` getter. + const systemPrincipal = Cc["@mozilla.org/systemprincipal;1"].createInstance( + Ci.nsIPrincipal + ); + const sandbox = Cu.Sandbox(systemPrincipal, { + sandboxPrototype, + wantGlobalProperties: ["ChromeUtils"], + }); + this._consoleScope = sandbox; + + this._workerList = null; + this._workerDescriptorActorPool = null; + this._onWorkerListChanged = this._onWorkerListChanged.bind(this); + + // Try to destroy the Content Process Target when the content process shuts down. + // The parent process can't communicate during shutdown as the communication channel + // is already down (message manager or JS Window Actor API). + // So that we have to observe to some event fired from this process. + // While such cleanup doesn't sound ultimately necessary (the process will be completely destroyed) + // mochitests are asserting that there is no leaks during process shutdown. + // Do not override destroy as Protocol.js may override it when calling destroy, + // and we won't be able to call removeObserver correctly. + this.destroyObserver = this.destroy.bind(this); + Services.obs.addObserver(this.destroyObserver, "xpcom-shutdown"); + if (this.isXpcShellTarget) { + TargetActorRegistry.registerXpcShellTargetActor(this); + } + } + + get isRootActor() { + return true; + } + + get url() { + return undefined; + } + + get window() { + return this._consoleScope; + } + + get sourcesManager() { + if (!this._sourcesManager) { + assert( + this.threadActor, + "threadActor should exist when creating SourcesManager." + ); + this._sourcesManager = new SourcesManager(this.threadActor); + } + return this._sourcesManager; + } + + /* + * Return a Debugger instance or create one if there is none yet + */ + get dbg() { + if (!this._dbg) { + this._dbg = this.makeDebugger(); + } + return this._dbg; + } + + form() { + if (!this._consoleActor) { + this._consoleActor = new WebConsoleActor(this.conn, this); + this.manage(this._consoleActor); + } + + if (!this.threadActor) { + this.threadActor = new ThreadActor(this, null); + this.manage(this.threadActor); + } + if (!this.memoryActor) { + this.memoryActor = new MemoryActor(this.conn, this); + this.manage(this.memoryActor); + } + if (!this.tracerActor) { + this.tracerActor = new TracerActor(this.conn, this); + this.manage(this.tracerActor); + } + + return { + actor: this.actorID, + isXpcShellTarget: this.isXpcShellTarget, + processID: Services.appinfo.processID, + remoteType: Services.appinfo.remoteType, + + consoleActor: this._consoleActor.actorID, + memoryActor: this.memoryActor.actorID, + threadActor: this.threadActor.actorID, + tracerActor: this.tracerActor.actorID, + + traits: { + networkMonitor: false, + // See trait description in browsing-context.js + supportsTopLevelTargetFlag: false, + }, + }; + } + + ensureWorkerList() { + if (!this._workerList) { + this._workerList = new WorkerDescriptorActorList(this.conn, {}); + } + return this._workerList; + } + + listWorkers() { + return this.ensureWorkerList() + .getList() + .then(actors => { + const pool = new Pool(this.conn, "workers"); + for (const actor of actors) { + pool.manage(actor); + } + + // Do not destroy the pool before transfering ownership to the newly created + // pool, so that we do not accidentally destroy actors that are still in use. + if (this._workerDescriptorActorPool) { + this._workerDescriptorActorPool.destroy(); + } + + this._workerDescriptorActorPool = pool; + this._workerList.onListChanged = this._onWorkerListChanged; + + return { workers: actors }; + }); + } + + _onWorkerListChanged() { + this.conn.send({ from: this.actorID, type: "workerListChanged" }); + this._workerList.onListChanged = null; + } + + pauseMatchingServiceWorkers(request) { + this.ensureWorkerList().workerPauser.setPauseServiceWorkers(request.origin); + } + + destroy() { + // Avoid reentrancy. We will destroy the Transport when emitting "destroyed", + // which will force destroying all actors. + if (this.destroying) { + return; + } + this.destroying = true; + + // Unregistering watchers first is important + // otherwise you might have leaks reported when running browser_browser_toolbox_netmonitor.js in debug builds + Resources.unwatchAllResources(this); + + this.emit("destroyed"); + + super.destroy(); + + if (this.threadActor) { + this.threadActor = null; + } + + // Tell the live lists we aren't watching any more. + if (this._workerList) { + this._workerList.destroy(); + this._workerList = null; + } + + if (this._sourcesManager) { + this._sourcesManager.destroy(); + this._sourcesManager = null; + } + + if (this._dbg) { + this._dbg.disable(); + this._dbg = null; + } + + Services.obs.removeObserver(this.destroyObserver, "xpcom-shutdown"); + + if (this.isXpcShellTarget) { + TargetActorRegistry.unregisterXpcShellTargetActor(this); + } + } +} + +exports.ContentProcessTargetActor = ContentProcessTargetActor; diff --git a/devtools/server/actors/targets/index.js b/devtools/server/actors/targets/index.js new file mode 100644 index 0000000000..61501d37e8 --- /dev/null +++ b/devtools/server/actors/targets/index.js @@ -0,0 +1,14 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const TYPES = { + FRAME: "frame", + PROCESS: "process", + WORKER: "worker", + SERVICE_WORKER: "service_worker", + SHARED_WORKER: "shared_worker", +}; +exports.TYPES = TYPES; diff --git a/devtools/server/actors/targets/moz.build b/devtools/server/actors/targets/moz.build new file mode 100644 index 0000000000..f4d44ae669 --- /dev/null +++ b/devtools/server/actors/targets/moz.build @@ -0,0 +1,20 @@ +# -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*- +# vim: set filetype=python: +# 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/. + +DIRS += [ + "session-data-processors", +] + +DevToolsModules( + "base-target-actor.js", + "content-process.js", + "index.js", + "parent-process.js", + "target-actor-registry.sys.mjs", + "webextension.js", + "window-global.js", + "worker.js", +) diff --git a/devtools/server/actors/targets/parent-process.js b/devtools/server/actors/targets/parent-process.js new file mode 100644 index 0000000000..4b7da5e9a4 --- /dev/null +++ b/devtools/server/actors/targets/parent-process.js @@ -0,0 +1,167 @@ +/* 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"; + +/* + * Target actor for the entire parent process. + * + * This actor extends WindowGlobalTargetActor. + * This actor is extended by WebExtensionTargetActor. + * + * See devtools/docs/backend/actor-hierarchy.md for more details. + */ + +const { + DevToolsServer, +} = require("resource://devtools/server/devtools-server.js"); +const { + getChildDocShells, + WindowGlobalTargetActor, +} = require("resource://devtools/server/actors/targets/window-global.js"); +const makeDebugger = require("resource://devtools/server/actors/utils/make-debugger.js"); + +const { + parentProcessTargetSpec, +} = require("resource://devtools/shared/specs/targets/parent-process.js"); + +class ParentProcessTargetActor extends WindowGlobalTargetActor { + /** + * Creates a target actor for debugging all the chrome content in the parent process. + * Most of the implementation is inherited from WindowGlobalTargetActor. + * ParentProcessTargetActor is a child of RootActor, it can be instantiated via + * RootActor.getProcess request. ParentProcessTargetActor exposes all target-scoped actors + * via its form() request, like WindowGlobalTargetActor. + * + * @param conn DevToolsServerConnection + * The connection to the client. + * @param {Object} options + * - isTopLevelTarget: {Boolean} flag to indicate if this is the top + * level target of the DevTools session + * - sessionContext Object + * The Session Context to help know what is debugged. + * See devtools/server/actors/watcher/session-context.js + * - customSpec Object + * WebExtensionTargetActor inherits from ParentProcessTargetActor + * and has to use its own protocol.js specification object. + */ + constructor( + conn, + { isTopLevelTarget, sessionContext, customSpec = parentProcessTargetSpec } + ) { + super(conn, { + isTopLevelTarget, + sessionContext, + customSpec, + }); + + // This creates a Debugger instance for chrome debugging all globals. + this.makeDebugger = makeDebugger.bind(null, { + findDebuggees: dbg => + dbg.findAllGlobals().map(g => g.unsafeDereference()), + shouldAddNewGlobalAsDebuggee: () => true, + }); + + // Ensure catching the creation of any new content docshell + this.watchNewDocShells = true; + + this.isRootActor = true; + + // Listen for any new/destroyed chrome docshell + Services.obs.addObserver(this, "chrome-webnavigation-create"); + Services.obs.addObserver(this, "chrome-webnavigation-destroy"); + + // If we are the parent process target actor and not a subclass + // (i.e. if we aren't the webext target actor) + // set the parent process docshell: + if (customSpec == parentProcessTargetSpec) { + this.setDocShell(this._getInitialDocShell()); + } + } + + // Overload setDocShell in order to observe all the docshells. + // WindowGlobalTargetActor only observes the top level one, + // but we also need to observe all of them for WebExtensionTargetActor subclass. + setDocShell(initialDocShell) { + super.setDocShell(initialDocShell); + + // Iterate over all top-level windows. + for (const { docShell } of Services.ww.getWindowEnumerator()) { + if (docShell == this.docShell) { + continue; + } + this._progressListener.watch(docShell); + } + } + + _getInitialDocShell() { + // Defines the default docshell selected for the target actor + let window = Services.wm.getMostRecentWindow( + DevToolsServer.chromeWindowType + ); + + // Default to any available top level window if there is no expected window + // eg when running ./mach run --chrome chrome://browser/content/aboutTabCrashed.xhtml --jsdebugger + if (!window) { + window = Services.wm.getMostRecentWindow(null); + } + + // We really want _some_ window at least, so fallback to the hidden window if + // there's nothing else (such as during early startup). + if (!window) { + window = Services.appShell.hiddenDOMWindow; + } + return window.docShell; + } + + /** + * Getter for the list of all docshells in this targetActor + * @return {Array} + */ + get docShells() { + // Iterate over all top-level windows and all their docshells. + let docShells = []; + for (const { docShell } of Services.ww.getWindowEnumerator()) { + docShells = docShells.concat(getChildDocShells(docShell)); + } + + return docShells; + } + + observe(subject, topic, data) { + super.observe(subject, topic, data); + if (this.isDestroyed()) { + return; + } + + subject.QueryInterface(Ci.nsIDocShell); + + if (topic == "chrome-webnavigation-create") { + this._onDocShellCreated(subject); + } else if (topic == "chrome-webnavigation-destroy") { + this._onDocShellDestroy(subject); + } + } + + _detach() { + if (this.isDestroyed()) { + return false; + } + + Services.obs.removeObserver(this, "chrome-webnavigation-create"); + Services.obs.removeObserver(this, "chrome-webnavigation-destroy"); + + // Iterate over all top-level windows. + for (const { docShell } of Services.ww.getWindowEnumerator()) { + if (docShell == this.docShell) { + continue; + } + this._progressListener.unwatch(docShell); + } + + return super._detach(); + } +} + +exports.ParentProcessTargetActor = ParentProcessTargetActor; diff --git a/devtools/server/actors/targets/session-data-processors/blackboxing.js b/devtools/server/actors/targets/session-data-processors/blackboxing.js new file mode 100644 index 0000000000..70f4397a72 --- /dev/null +++ b/devtools/server/actors/targets/session-data-processors/blackboxing.js @@ -0,0 +1,28 @@ +/* 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"; + +module.exports = { + async addOrSetSessionDataEntry( + targetActor, + entries, + isDocumentCreation, + updateType + ) { + const { sourcesManager } = targetActor; + if (updateType == "set") { + sourcesManager.clearAllBlackBoxing(); + } + for (const { url, range } of entries) { + sourcesManager.blackBox(url, range); + } + }, + + removeSessionDataEntry(targetActor, entries, isDocumentCreation) { + for (const { url, range } of entries) { + targetActor.sourcesManager.unblackBox(url, range); + } + }, +}; diff --git a/devtools/server/actors/targets/session-data-processors/breakpoints.js b/devtools/server/actors/targets/session-data-processors/breakpoints.js new file mode 100644 index 0000000000..ff7cb7ec0a --- /dev/null +++ b/devtools/server/actors/targets/session-data-processors/breakpoints.js @@ -0,0 +1,45 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const { + STATES: THREAD_STATES, +} = require("resource://devtools/server/actors/thread.js"); + +module.exports = { + async addOrSetSessionDataEntry( + targetActor, + entries, + isDocumentCreation, + updateType + ) { + const { threadActor } = targetActor; + if (updateType == "set") { + threadActor.removeAllBreakpoints(); + } + const isTargetCreation = threadActor.state == THREAD_STATES.DETACHED; + if (isTargetCreation && !targetActor.targetType.endsWith("worker")) { + // If addOrSetSessionDataEntry is called during target creation, attach the + // thread actor automatically and pass the initial breakpoints. + // However, do not attach the thread actor for Workers. They use a codepath + // which releases the worker on `attach`. For them, the client will call `attach`. (bug 1691986) + await threadActor.attach({ breakpoints: entries }); + } else { + // If addOrSetSessionDataEntry is called for an existing target, set the new + // breakpoints on the already running thread actor. + await Promise.all( + entries.map(({ location, options }) => + threadActor.setBreakpoint(location, options) + ) + ); + } + }, + + removeSessionDataEntry(targetActor, entries, isDocumentCreation) { + for (const { location } of entries) { + targetActor.threadActor.removeBreakpoint(location); + } + }, +}; diff --git a/devtools/server/actors/targets/session-data-processors/event-breakpoints.js b/devtools/server/actors/targets/session-data-processors/event-breakpoints.js new file mode 100644 index 0000000000..c0a2fb7ffe --- /dev/null +++ b/devtools/server/actors/targets/session-data-processors/event-breakpoints.js @@ -0,0 +1,36 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const { + STATES: THREAD_STATES, +} = require("resource://devtools/server/actors/thread.js"); + +module.exports = { + async addOrSetSessionDataEntry( + targetActor, + entries, + isDocumentCreation, + updateType + ) { + const { threadActor } = targetActor; + // Same as comments for XHR breakpoints. See lines 117-118 + if ( + threadActor.state == THREAD_STATES.DETACHED && + !targetActor.targetType.endsWith("worker") + ) { + threadActor.attach(); + } + if (updateType == "set") { + threadActor.setActiveEventBreakpoints(entries); + } else { + threadActor.addEventBreakpoints(entries); + } + }, + + removeSessionDataEntry(targetActor, entries, isDocumentCreation) { + targetActor.threadActor.removeEventBreakpoints(entries); + }, +}; diff --git a/devtools/server/actors/targets/session-data-processors/index.js b/devtools/server/actors/targets/session-data-processors/index.js new file mode 100644 index 0000000000..19b7d69302 --- /dev/null +++ b/devtools/server/actors/targets/session-data-processors/index.js @@ -0,0 +1,50 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const { + SessionDataHelpers, +} = require("resource://devtools/server/actors/watcher/SessionDataHelpers.jsm"); +const { SUPPORTED_DATA } = SessionDataHelpers; + +const SessionDataProcessors = {}; + +loader.lazyRequireGetter( + SessionDataProcessors, + SUPPORTED_DATA.BLACKBOXING, + "resource://devtools/server/actors/targets/session-data-processors/blackboxing.js" +); +loader.lazyRequireGetter( + SessionDataProcessors, + SUPPORTED_DATA.BREAKPOINTS, + "resource://devtools/server/actors/targets/session-data-processors/breakpoints.js" +); +loader.lazyRequireGetter( + SessionDataProcessors, + SUPPORTED_DATA.EVENT_BREAKPOINTS, + "resource://devtools/server/actors/targets/session-data-processors/event-breakpoints.js" +); +loader.lazyRequireGetter( + SessionDataProcessors, + SUPPORTED_DATA.RESOURCES, + "resource://devtools/server/actors/targets/session-data-processors/resources.js" +); +loader.lazyRequireGetter( + SessionDataProcessors, + SUPPORTED_DATA.TARGET_CONFIGURATION, + "resource://devtools/server/actors/targets/session-data-processors/target-configuration.js" +); +loader.lazyRequireGetter( + SessionDataProcessors, + SUPPORTED_DATA.THREAD_CONFIGURATION, + "resource://devtools/server/actors/targets/session-data-processors/thread-configuration.js" +); +loader.lazyRequireGetter( + SessionDataProcessors, + SUPPORTED_DATA.XHR_BREAKPOINTS, + "resource://devtools/server/actors/targets/session-data-processors/xhr-breakpoints.js" +); + +exports.SessionDataProcessors = SessionDataProcessors; diff --git a/devtools/server/actors/targets/session-data-processors/moz.build b/devtools/server/actors/targets/session-data-processors/moz.build new file mode 100644 index 0000000000..ea924d7d79 --- /dev/null +++ b/devtools/server/actors/targets/session-data-processors/moz.build @@ -0,0 +1,16 @@ +# -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*- +# vim: set filetype=python: +# 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/. + +DevToolsModules( + "blackboxing.js", + "breakpoints.js", + "event-breakpoints.js", + "index.js", + "resources.js", + "target-configuration.js", + "thread-configuration.js", + "xhr-breakpoints.js", +) diff --git a/devtools/server/actors/targets/session-data-processors/resources.js b/devtools/server/actors/targets/session-data-processors/resources.js new file mode 100644 index 0000000000..8f33ba8e0f --- /dev/null +++ b/devtools/server/actors/targets/session-data-processors/resources.js @@ -0,0 +1,25 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const Resources = require("resource://devtools/server/actors/resources/index.js"); + +module.exports = { + async addOrSetSessionDataEntry( + targetActor, + entries, + isDocumentCreation, + updateType + ) { + if (updateType == "set") { + Resources.unwatchAllResources(targetActor); + } + await Resources.watchResources(targetActor, entries); + }, + + removeSessionDataEntry(targetActor, entries, isDocumentCreation) { + Resources.unwatchResources(targetActor, entries); + }, +}; diff --git a/devtools/server/actors/targets/session-data-processors/target-configuration.js b/devtools/server/actors/targets/session-data-processors/target-configuration.js new file mode 100644 index 0000000000..f68e82d69f --- /dev/null +++ b/devtools/server/actors/targets/session-data-processors/target-configuration.js @@ -0,0 +1,32 @@ +/* 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"; + +module.exports = { + async addOrSetSessionDataEntry( + targetActor, + entries, + isDocumentCreation, + updateType + ) { + // Only WindowGlobalTargetActor implements updateTargetConfiguration, + // skip targetActor data entry update for other targets. + if (typeof targetActor.updateTargetConfiguration == "function") { + const options = {}; + for (const { key, value } of entries) { + options[key] = value; + } + // Regarding `updateType`, `entries` is always a partial set of configurations. + // We will acknowledge the passed attribute, but if we had set some other attributes + // before this call, they will stay as-is. + // So it is as if this session data was also using "add" updateType. + targetActor.updateTargetConfiguration(options, isDocumentCreation); + } + }, + + removeSessionDataEntry(targetActor, entries, isDocumentCreation) { + // configuration data entries are always added/updated, never removed. + }, +}; diff --git a/devtools/server/actors/targets/session-data-processors/thread-configuration.js b/devtools/server/actors/targets/session-data-processors/thread-configuration.js new file mode 100644 index 0000000000..716d2a9b21 --- /dev/null +++ b/devtools/server/actors/targets/session-data-processors/thread-configuration.js @@ -0,0 +1,41 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const { + STATES: THREAD_STATES, +} = require("resource://devtools/server/actors/thread.js"); + +module.exports = { + async addOrSetSessionDataEntry( + targetActor, + entries, + isDocumentCreation, + updateType + ) { + const threadOptions = {}; + + for (const { key, value } of entries) { + threadOptions[key] = value; + } + + if ( + !targetActor.targetType.endsWith("worker") && + targetActor.threadActor.state == THREAD_STATES.DETACHED + ) { + await targetActor.threadActor.attach(threadOptions); + } else { + // Regarding `updateType`, `entries` is always a partial set of configurations. + // We will acknowledge the passed attribute, but if we had set some other attributes + // before this call, they will stay as-is. + // So it is as if this session data was also using "add" updateType. + await targetActor.threadActor.reconfigure(threadOptions); + } + }, + + removeSessionDataEntry(targetActor, entries, isDocumentCreation) { + // configuration data entries are always added/updated, never removed. + }, +}; diff --git a/devtools/server/actors/targets/session-data-processors/xhr-breakpoints.js b/devtools/server/actors/targets/session-data-processors/xhr-breakpoints.js new file mode 100644 index 0000000000..7a0fd815aa --- /dev/null +++ b/devtools/server/actors/targets/session-data-processors/xhr-breakpoints.js @@ -0,0 +1,44 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const { + STATES: THREAD_STATES, +} = require("resource://devtools/server/actors/thread.js"); + +module.exports = { + async addOrSetSessionDataEntry( + targetActor, + entries, + isDocumentCreation, + updateType + ) { + const { threadActor } = targetActor; + if (updateType == "set") { + threadActor.removeAllXHRBreakpoints(); + } + + // The thread actor has to be initialized in order to correctly + // retrieve the stack trace when hitting an XHR + if ( + threadActor.state == THREAD_STATES.DETACHED && + !targetActor.targetType.endsWith("worker") + ) { + await threadActor.attach(); + } + + await Promise.all( + entries.map(({ path, method }) => + threadActor.setXHRBreakpoint(path, method) + ) + ); + }, + + removeSessionDataEntry(targetActor, entries, isDocumentCreation) { + for (const { path, method } of entries) { + targetActor.threadActor.removeXHRBreakpoint(path, method); + } + }, +}; diff --git a/devtools/server/actors/targets/target-actor-registry.sys.mjs b/devtools/server/actors/targets/target-actor-registry.sys.mjs new file mode 100644 index 0000000000..4cb6d13868 --- /dev/null +++ b/devtools/server/actors/targets/target-actor-registry.sys.mjs @@ -0,0 +1,82 @@ +/* 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/. */ + +// Keep track of all WindowGlobal target actors. +// This is especially used to track the actors using Message manager connector, +// or the ones running in the parent process. +// Top level actors, like tab's top level target or parent process target +// are still using message manager in order to avoid being destroyed on navigation. +// And because of this, these actors aren't using JS Window Actor. +const windowGlobalTargetActors = new Set(); +let xpcShellTargetActor = null; + +export var TargetActorRegistry = { + registerTargetActor(targetActor) { + windowGlobalTargetActors.add(targetActor); + }, + + unregisterTargetActor(targetActor) { + windowGlobalTargetActors.delete(targetActor); + }, + + registerXpcShellTargetActor(targetActor) { + xpcShellTargetActor = targetActor; + }, + + unregisterXpcShellTargetActor(targetActor) { + xpcShellTargetActor = null; + }, + + get xpcShellTargetActor() { + return xpcShellTargetActor; + }, + + /** + * Return the target actors matching the passed browser element id. + * In some scenarios, the registry can have multiple target actors for a given + * browserId (e.g. the regular DevTools content toolbox + DevTools WebExtensions targets). + * + * @param {Object} sessionContext: The Session Context to help know what is debugged. + * See devtools/server/actors/watcher/session-context.js + * @param {String} connectionPrefix: DevToolsServerConnection's prefix, in order to select only actor + * related to the same connection. i.e. the same client. + * @returns {Array<TargetActor>} + */ + getTargetActors(sessionContext, connectionPrefix) { + const actors = []; + for (const actor of windowGlobalTargetActors) { + const isMatchingPrefix = actor.actorID.startsWith(connectionPrefix); + const isMatchingContext = + sessionContext.type == "all" || + (sessionContext.type == "browser-element" && + (actor.browserId == sessionContext.browserId || + actor.openerBrowserId == sessionContext.browserId)) || + (sessionContext.type == "webextension" && + actor.addonId == sessionContext.addonId); + if (isMatchingPrefix && isMatchingContext) { + actors.push(actor); + } + } + return actors; + }, + + /** + * Helper for tests to help track the number of targets created for a given tab. + * (Used by browser_ext_devtools_inspectedWindow.js) + * + * @param {Number} browserId: ID for the tab + * + * @returns {Number} Number of targets for this tab. + */ + + getTargetActorsCountForBrowserElement(browserId) { + let count = 0; + for (const actor of windowGlobalTargetActors) { + if (actor.browserId == browserId) { + count++; + } + } + return count; + }, +}; diff --git a/devtools/server/actors/targets/webextension.js b/devtools/server/actors/targets/webextension.js new file mode 100644 index 0000000000..c717b53011 --- /dev/null +++ b/devtools/server/actors/targets/webextension.js @@ -0,0 +1,374 @@ +/* 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"; + +/* + * Target actor for a WebExtension add-on. + * + * This actor extends ParentProcessTargetActor. + * + * See devtools/docs/backend/actor-hierarchy.md for more details. + */ + +const { + ParentProcessTargetActor, +} = require("resource://devtools/server/actors/targets/parent-process.js"); +const makeDebugger = require("resource://devtools/server/actors/utils/make-debugger.js"); +const { + webExtensionTargetSpec, +} = require("resource://devtools/shared/specs/targets/webextension.js"); + +const { + getChildDocShells, +} = require("resource://devtools/server/actors/targets/window-global.js"); + +loader.lazyRequireGetter( + this, + "unwrapDebuggerObjectGlobal", + "resource://devtools/server/actors/thread.js", + true +); + +const lazy = {}; +ChromeUtils.defineESModuleGetters(lazy, { + getAddonIdForWindowGlobal: + "resource://devtools/server/actors/watcher/browsing-context-helpers.sys.mjs", +}); + +const FALLBACK_DOC_URL = + "chrome://devtools/content/shared/webextension-fallback.html"; + +class WebExtensionTargetActor extends ParentProcessTargetActor { + /** + * Creates a target actor for debugging all the contexts associated to a target + * WebExtensions add-on running in a child extension process. Most of the implementation + * is inherited from ParentProcessTargetActor (which inherits most of its implementation + * from WindowGlobalTargetActor). + * + * WebExtensionTargetActor is created by a WebExtensionActor counterpart, when its + * parent actor's `connect` method has been called (on the listAddons RDP package), + * it runs in the same process that the extension is running into (which can be the main + * process if the extension is running in non-oop mode, or the child extension process + * if the extension is running in oop-mode). + * + * A WebExtensionTargetActor contains all target-scoped actors, like a regular + * ParentProcessTargetActor or WindowGlobalTargetActor. + * + * History lecture: + * - The add-on actors used to not inherit WindowGlobalTargetActor because of the + * different way the add-on APIs where exposed to the add-on itself, and for this reason + * the Addon Debugger has only a sub-set of the feature available in the Tab or in the + * Browser Toolbox. + * - In a WebExtensions add-on all the provided contexts (background, popups etc.), + * besides the Content Scripts which run in the content process, hooked to an existent + * tab, by creating a new WebExtensionActor which inherits from + * ParentProcessTargetActor, we can provide a full features Addon Toolbox (which is + * basically like a BrowserToolbox which filters the visible sources and frames to the + * one that are related to the target add-on). + * - When the WebExtensions OOP mode has been introduced, this actor has been refactored + * and moved from the main process to the new child extension process. + * + * @param {DevToolsServerConnection} conn + * The connection to the client. + * @param {nsIMessageSender} chromeGlobal. + * The chromeGlobal where this actor has been injected by the + * frame-connector.js connectToFrame method. + * @param {Object} options + * - addonId: {String} the addonId of the target WebExtension. + * - addonBrowsingContextGroupId: {String} the BrowsingContextGroupId used by this addon. + * - chromeGlobal: {nsIMessageSender} The chromeGlobal where this actor + * has been injected by the frame-connector.js connectToFrame method. + * - isTopLevelTarget: {Boolean} flag to indicate if this is the top + * level target of the DevTools session + * - prefix: {String} the custom RDP prefix to use. + * - sessionContext Object + * The Session Context to help know what is debugged. + * See devtools/server/actors/watcher/session-context.js + */ + constructor( + conn, + { + addonId, + addonBrowsingContextGroupId, + chromeGlobal, + isTopLevelTarget, + prefix, + sessionContext, + } + ) { + super(conn, { + isTopLevelTarget, + sessionContext, + customSpec: webExtensionTargetSpec, + }); + + this.addonId = addonId; + this.addonBrowsingContextGroupId = addonBrowsingContextGroupId; + this._chromeGlobal = chromeGlobal; + this._prefix = prefix; + + // Expose the BrowsingContext of the fallback document, + // which is the one this target actor will always refer to via its form() + // and all resources should be related to this one as we currently spawn + // only just this one target actor to debug all webextension documents. + this.devtoolsSpawnedBrowsingContextForWebExtension = + chromeGlobal.browsingContext; + + // Redefine the messageManager getter to return the chromeGlobal + // as the messageManager for this actor (which is the browser XUL + // element used by the parent actor running in the main process to + // connect to the extension process). + Object.defineProperty(this, "messageManager", { + enumerable: true, + configurable: true, + get: () => { + return this._chromeGlobal; + }, + }); + + this._onParentExit = this._onParentExit.bind(this); + + this._chromeGlobal.addMessageListener( + "debug:webext_parent_exit", + this._onParentExit + ); + + // Set the consoleAPIListener filtering options + // (retrieved and used in the related webconsole child actor). + this.consoleAPIListenerOptions = { + addonId: this.addonId, + }; + + // This creates a Debugger instance for debugging all the add-on globals. + this.makeDebugger = makeDebugger.bind(null, { + findDebuggees: dbg => { + return dbg + .findAllGlobals() + .filter(this._shouldAddNewGlobalAsDebuggee) + .map(g => g.unsafeDereference()); + }, + shouldAddNewGlobalAsDebuggee: + this._shouldAddNewGlobalAsDebuggee.bind(this), + }); + + // NOTE: This is needed to catch in the webextension webconsole all the + // errors raised by the WebExtension internals that are not currently + // associated with any window. + this.isRootActor = true; + + // Try to discovery an existent extension page to attach (which will provide the initial + // URL shown in the window tittle when the addon debugger is opened). + const extensionWindow = this._searchForExtensionWindow(); + this.setDocShell(extensionWindow.docShell); + } + + // Override the ParentProcessTargetActor's override in order to only iterate + // over the docshells specific to this add-on + get docShells() { + // Iterate over all top-level windows and all their docshells. + let docShells = []; + for (const window of Services.ww.getWindowEnumerator(null)) { + docShells = docShells.concat(getChildDocShells(window.docShell)); + } + // Then filter out the ones specific to the add-on + return docShells.filter(docShell => { + return this.isExtensionWindowDescendent(docShell.domWindow); + }); + } + + /** + * Called when the actor is removed from the connection. + */ + destroy() { + if (this._chromeGlobal) { + const chromeGlobal = this._chromeGlobal; + this._chromeGlobal = null; + + chromeGlobal.removeMessageListener( + "debug:webext_parent_exit", + this._onParentExit + ); + + chromeGlobal.sendAsyncMessage("debug:webext_child_exit", { + actor: this.actorID, + }); + } + + if (this.fallbackWindow) { + this.fallbackWindow = null; + } + + this.addon = null; + this.addonId = null; + + return super.destroy(); + } + + // Private helpers. + + _searchFallbackWindow() { + if (this.fallbackWindow) { + // Skip if there is already an existent fallback window. + return this.fallbackWindow; + } + + // Set and initialize the fallbackWindow (which initially is a empty + // about:blank browser), this window is related to a XUL browser element + // specifically created for the devtools server and it is never used + // or navigated anywhere else. + this.fallbackWindow = this._chromeGlobal.content; + + // Add the addonId in the URL to retrieve this information in other devtools + // helpers. The addonId is usually populated in the principal, but this will + // not be the case for the fallback window because it is loaded from chrome:// + // instead of moz-extension://${addonId} + this.fallbackWindow.document.location.href = `${FALLBACK_DOC_URL}#${this.addonId}`; + + return this.fallbackWindow; + } + + // Discovery an extension page to use as a default target window. + // NOTE: This currently fail to discovery an extension page running in a + // windowless browser when running in non-oop mode, and the background page + // is set later using _onNewExtensionWindow. + _searchForExtensionWindow() { + // Looks if there is any top level add-on document: + // (we do not want to pass any nested add-on iframe) + const docShell = this.docShells.find(d => + this.isTopLevelExtensionWindow(d.domWindow) + ); + if (docShell) { + return docShell.domWindow; + } + + return this._searchFallbackWindow(); + } + + // Customized ParentProcessTargetActor/WindowGlobalTargetActor hooks. + + _onDocShellCreated(docShell) { + // Compare against the BrowsingContext's group ID as the document's principal addonId + // won't be set yet for freshly created docshells. It will be later set, when loading the addon URL. + // But right now, it is still on the initial about:blank document and the principal isn't related to the add-on. + if (docShell.browsingContext.group.id != this.addonBrowsingContextGroupId) { + return; + } + super._onDocShellCreated(docShell); + } + + _onDocShellDestroy(docShell) { + if (docShell.browsingContext.group.id != this.addonBrowsingContextGroupId) { + return; + } + // Stop watching this docshell (the unwatch() method will check if we + // started watching it before). + this._unwatchDocShell(docShell); + + // Let the _onDocShellDestroy notify that the docShell has been destroyed. + const webProgress = docShell + .QueryInterface(Ci.nsIInterfaceRequestor) + .getInterface(Ci.nsIWebProgress); + this._notifyDocShellDestroy(webProgress); + + // If the destroyed docShell: + // * was the current docShell, + // * the actor is not destroyed, + // * isn't the background page, as it means the addon is being shutdown or reloaded + // and the target would be replaced by a new one to come, or everything is closing. + // => switch to the fallback window + if ( + !this.isDestroyed() && + docShell == this.docShell && + !docShell.domWindow.location.href.includes( + "_generated_background_page.html" + ) + ) { + this._changeTopLevelDocument(this._searchForExtensionWindow()); + } + } + + _onNewExtensionWindow(window) { + if (!this.window || this.window === this.fallbackWindow) { + this._changeTopLevelDocument(window); + // For new extension windows, the BrowsingContext group id might have + // changed, for instance when reloading the addon. + this.addonBrowsingContextGroupId = + window.docShell.browsingContext.group.id; + } + } + + isTopLevelExtensionWindow(window) { + const { docShell } = window; + const isTopLevel = docShell.sameTypeRootTreeItem == docShell; + // Note: We are not using getAddonIdForWindowGlobal here because the + // fallback window should not be considered as a top level extension window. + return isTopLevel && window.document.nodePrincipal.addonId == this.addonId; + } + + isExtensionWindowDescendent(window) { + // Check if the source is coming from a descendant docShell of an extension window. + // We may have an iframe that loads http content which won't use the add-on principal. + const rootWin = window.docShell.sameTypeRootTreeItem.domWindow; + const addonId = lazy.getAddonIdForWindowGlobal(rootWin.windowGlobalChild); + return addonId == this.addonId; + } + + /** + * Return true if the given global is associated with this addon and should be + * added as a debuggee, false otherwise. + */ + _shouldAddNewGlobalAsDebuggee(newGlobal) { + const global = unwrapDebuggerObjectGlobal(newGlobal); + + if (global instanceof Ci.nsIDOMWindow) { + try { + global.document; + } catch (e) { + // The global might be a sandbox with a window object in its proto chain. If the + // window navigated away since the sandbox was created, it can throw a security + // exception during this property check as the sandbox no longer has access to + // its own proto. + return false; + } + // When `global` is a sandbox it may be a nsIDOMWindow object, + // but won't be the real Window object. Retrieve it via document's ownerGlobal. + const window = global.document.ownerGlobal; + if (!window) { + return false; + } + + // Change top level document as a simulated frame switching. + if (this.isTopLevelExtensionWindow(window)) { + this._onNewExtensionWindow(window); + } + + return this.isExtensionWindowDescendent(window); + } + + try { + // This will fail for non-Sandbox objects, hence the try-catch block. + const metadata = Cu.getSandboxMetadata(global); + if (metadata) { + return metadata.addonID === this.addonId; + } + } catch (e) { + // Unable to retrieve the sandbox metadata. + } + + return false; + } + + // Handlers for the messages received from the parent actor. + + _onParentExit(msg) { + if (msg.json.actor !== this.actorID) { + return; + } + + this.destroy(); + } +} + +exports.WebExtensionTargetActor = WebExtensionTargetActor; diff --git a/devtools/server/actors/targets/window-global.js b/devtools/server/actors/targets/window-global.js new file mode 100644 index 0000000000..5d2bb10164 --- /dev/null +++ b/devtools/server/actors/targets/window-global.js @@ -0,0 +1,1935 @@ +/* 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"; + +// protocol.js uses objects as exceptions in order to define +// error packets. +/* eslint-disable no-throw-literal */ + +/* + * WindowGlobalTargetActor is an abstract class used by target actors that hold + * documents, such as frames, chrome windows, etc. + * + * This class is extended by ParentProcessTargetActor, itself being extented by WebExtensionTargetActor. + * + * See devtools/docs/backend/actor-hierarchy.md for more details. + * + * For performance matters, this file should only be loaded in the targeted context's + * process. For example, it shouldn't be evaluated in the parent process until we try to + * debug a document living in the parent process. + */ + +var { + ActorRegistry, +} = require("resource://devtools/server/actors/utils/actor-registry.js"); +var DevToolsUtils = require("resource://devtools/shared/DevToolsUtils.js"); +var { assert } = DevToolsUtils; +var { + SourcesManager, +} = require("resource://devtools/server/actors/utils/sources-manager.js"); +var makeDebugger = require("resource://devtools/server/actors/utils/make-debugger.js"); +const Targets = require("resource://devtools/server/actors/targets/index.js"); +const { TargetActorRegistry } = ChromeUtils.importESModule( + "resource://devtools/server/actors/targets/target-actor-registry.sys.mjs", + { + loadInDevToolsLoader: false, + } +); +const { PrivateBrowsingUtils } = ChromeUtils.importESModule( + "resource://gre/modules/PrivateBrowsingUtils.sys.mjs" +); + +const EXTENSION_CONTENT_SYS_MJS = + "resource://gre/modules/ExtensionContent.sys.mjs"; + +const { Pool } = require("resource://devtools/shared/protocol.js"); +const { + LazyPool, + createExtraActors, +} = require("resource://devtools/shared/protocol/lazy-pool.js"); +const { + windowGlobalTargetSpec, +} = require("resource://devtools/shared/specs/targets/window-global.js"); +const Resources = require("resource://devtools/server/actors/resources/index.js"); +const { + BaseTargetActor, +} = require("resource://devtools/server/actors/targets/base-target-actor.js"); + +loader.lazyRequireGetter( + this, + ["ThreadActor", "unwrapDebuggerObjectGlobal"], + "resource://devtools/server/actors/thread.js", + true +); +loader.lazyRequireGetter( + this, + "WorkerDescriptorActorList", + "resource://devtools/server/actors/worker/worker-descriptor-actor-list.js", + true +); +loader.lazyRequireGetter( + this, + "StyleSheetsManager", + "resource://devtools/server/actors/utils/stylesheets-manager.js", + true +); +const lazy = {}; +loader.lazyGetter(lazy, "ExtensionContent", () => { + return ChromeUtils.importESModule(EXTENSION_CONTENT_SYS_MJS, { + // ExtensionContent.sys.mjs is a singleton and must be loaded through the + // main loader. Note that the user of lazy.ExtensionContent elsewhere in + // this file (at webextensionsContentScriptGlobals) looks up the module + // via Cu.isESModuleLoaded, which also uses the main loader as desired. + loadInDevToolsLoader: false, + }).ExtensionContent; +}); + +loader.lazyRequireGetter( + this, + "TouchSimulator", + "resource://devtools/server/actors/emulation/touch-simulator.js", + true +); + +function getWindowID(window) { + return window.windowGlobalChild.innerWindowId; +} + +function getDocShellChromeEventHandler(docShell) { + let handler = docShell.chromeEventHandler; + if (!handler) { + try { + // Toplevel xul window's docshell doesn't have chromeEventHandler + // attribute. The chrome event handler is just the global window object. + handler = docShell.domWindow; + } catch (e) { + // ignore + } + } + return handler; +} + +/** + * Helper to retrieve all children docshells of a given docshell. + * + * Given that docshell interfaces can only be used within the same process, + * this only returns docshells for children documents that runs in the same process + * as the given docshell. + */ +function getChildDocShells(parentDocShell) { + return parentDocShell.browsingContext + .getAllBrowsingContextsInSubtree() + .filter(browsingContext => { + // Filter out browsingContext which don't expose any docshell (e.g. remote frame) + return browsingContext.docShell; + }) + .map(browsingContext => { + // Map BrowsingContext to DocShell + return browsingContext.docShell; + }); +} + +exports.getChildDocShells = getChildDocShells; + +/** + * Browser-specific actors. + */ + +function getInnerId(window) { + return window.windowGlobalChild.innerWindowId; +} + +class WindowGlobalTargetActor extends BaseTargetActor { + /** + * WindowGlobalTargetActor is the target actor to debug (HTML) documents. + * + * WindowGlobal's are the Gecko representation for a given document's window object. + * It relates to a given nsGlobalWindowInner instance. + * + * The main goal of this class is to expose the target-scoped actors being registered + * via `ActorRegistry.registerModule` and manage their lifetimes. In addition, this + * class also tracks the lifetime of the targeted window global. + * + * ### Main requests: + * + * `detach`: + * Stop document watching and cleanup everything that the target and its children actors created. + * It ultimately lead to destroy the target actor. + * `switchToFrame`: + * Change the targeted document of the whole actor, and its child target-scoped actors + * to an iframe or back to its original document. + * + * Most properties (like `chromeEventHandler` or `docShells`) are meant to be + * used by the various child target actors. + * + * ### RDP events: + * + * - `tabNavigated`: + * Sent when the window global is about to navigate or has just navigated + * to a different document. + * This event contains the following attributes: + * * url (string) + * The new URI being loaded. + * * state (string) + * `start` if we just start requesting the new URL + * `stop` if the new URL is done loading + * * isFrameSwitching (boolean) + * Indicates the event is dispatched when switching the actor context to a + * different frame. When we switch to an iframe, there is no document + * load. The targeted document is most likely going to be already done + * loading. + * * title (string) + * The document title being loaded. (sent only on state=stop) + * + * - `frameUpdate`: + * Sent when there was a change in the child frames contained in the document + * or when the actor's context was switched to another frame. + * This event can have four different forms depending on the type of change: + * * One or many frames are updated: + * { frames: [{ id, url, title, parentID }, ...] } + * * One frame got destroyed: + * { frames: [{ id, destroy: true }]} + * * All frames got destroyed: + * { destroyAll: true } + * * We switched the context of the actor to a specific frame: + * { selected: #id } + * + * ### Internal, non-rdp events: + * + * Various events are also dispatched on the actor itself without being sent to + * the client. They all relate to the documents tracked by this target actor + * (its main targeted document, but also any of its iframes): + * - will-navigate + * This event fires once navigation starts. All pending user prompts are + * dealt with, but it is fired before the first request starts. + * - navigate + * This event is fired once the document's readyState is "complete". + * - window-ready + * This event is fired in various distinct scenarios: + * * When a new Window object is crafted, equivalent of `DOMWindowCreated`. + * It is dispatched before any page script is executed. + * * We will have already received a window-ready event for this window + * when it was created, but we received a window-destroyed event when + * it was frozen into the bfcache, and now the user navigated back to + * this page, so it's now live again and we should resume handling it. + * * For each existing document, when an `attach` request is received. + * At this point scripts in the page will be already loaded. + * * When `swapFrameLoaders` is used, such as with moving window globals + * between windows or toggling Responsive Design Mode. + * - window-destroyed + * This event is fired in two cases: + * * When the window object is destroyed, i.e. when the related document + * is garbage collected. This can happen when the window global is + * closed or the iframe is removed from the DOM. + * It is equivalent of `inner-window-destroyed` event. + * * When the page goes into the bfcache and gets frozen. + * The equivalent of `pagehide`. + * - changed-toplevel-document + * This event fires when we switch the actor's targeted document + * to one of its iframes, or back to its original top document. + * It is dispatched between window-destroyed and window-ready. + * + * Note that *all* these events are dispatched in the following order + * when we switch the context of the actor to a given iframe: + * - will-navigate + * - window-destroyed + * - changed-toplevel-document + * - window-ready + * - navigate + * + * This class is subclassed by ParentProcessTargetActor and others. + * Subclasses are expected to implement a getter for the docShell property. + * + * @param conn DevToolsServerConnection + * The conection to the client. + * @param options Object + * Object with following attributes: + * - docShell nsIDocShell + * The |docShell| for the debugged frame. + * - followWindowGlobalLifeCycle Boolean + * If true, the target actor will only inspect the current WindowGlobal (and its children windows). + * But won't inspect next document loaded in the same BrowsingContext. + * The actor will behave more like a WindowGlobalTarget rather than a BrowsingContextTarget. + * This is always true for Tab debugging, but not yet for parent process/web extension. + * - isTopLevelTarget Boolean + * Should be set to true for all top-level targets. A top level target + * is the topmost target of a DevTools "session". For instance for a local + * tab toolbox, the WindowGlobalTargetActor for the content page is the top level target. + * For the Multiprocess Browser Toolbox, the parent process target is the top level + * target. + * At the moment this only impacts the WindowGlobalTarget `reconfigure` + * implementation. But for server-side target switching this flag will be exposed + * to the client and should be available for all target actor classes. It will be + * used to detect target switching. (Bug 1644397) + * - ignoreSubFrames Boolean + * If true, the actor will only focus on the passed docShell and not on the whole + * docShell tree. This should be enabled when we have targets for all documents. + * - sessionContext Object + * The Session Context to help know what is debugged. + * See devtools/server/actors/watcher/session-context.js + */ + constructor( + conn, + { + docShell, + followWindowGlobalLifeCycle, + isTopLevelTarget, + ignoreSubFrames, + sessionContext, + customSpec = windowGlobalTargetSpec, + } + ) { + super(conn, Targets.TYPES.FRAME, customSpec); + + this.followWindowGlobalLifeCycle = followWindowGlobalLifeCycle; + this.isTopLevelTarget = !!isTopLevelTarget; + this.ignoreSubFrames = ignoreSubFrames; + this.sessionContext = sessionContext; + + // A map of actor names to actor instances provided by extensions. + this._extraActors = {}; + this._sourcesManager = null; + + this._shouldAddNewGlobalAsDebuggee = + this._shouldAddNewGlobalAsDebuggee.bind(this); + + this.makeDebugger = makeDebugger.bind(null, { + findDebuggees: () => { + const result = []; + const inspectUAWidgets = Services.prefs.getBoolPref( + "devtools.inspector.showAllAnonymousContent", + false + ); + for (const win of this.windows) { + result.push(win); + // Only expose User Agent internal (like <video controls>) when the + // related pref is set. + if (inspectUAWidgets) { + const principal = win.document.nodePrincipal; + // We don't use UA widgets for the system principal. + if (!principal.isSystemPrincipal) { + result.push(Cu.getUAWidgetScope(principal)); + } + } + } + return result.concat(this.webextensionsContentScriptGlobals); + }, + shouldAddNewGlobalAsDebuggee: this._shouldAddNewGlobalAsDebuggee, + }); + + // Flag eventually overloaded by sub classes in order to watch new docshells + // Used by the ParentProcessTargetActor to list all frames in the Browser Toolbox + this.watchNewDocShells = false; + + this._workerDescriptorActorList = null; + this._workerDescriptorActorPool = null; + this._onWorkerDescriptorActorListChanged = + this._onWorkerDescriptorActorListChanged.bind(this); + + this._onConsoleApiProfilerEvent = + this._onConsoleApiProfilerEvent.bind(this); + Services.obs.addObserver( + this._onConsoleApiProfilerEvent, + "console-api-profiler" + ); + + // Start observing navigations as well as sub documents. + // (This is probably meant to disappear once EFT is the only supported codepath) + this._progressListener = new DebuggerProgressListener(this); + + TargetActorRegistry.registerTargetActor(this); + + if (docShell) { + this.setDocShell(docShell); + } + } + + /** + * Define the initial docshell. + * + * This is called from the constructor for WindowGlobalTargetActor, + * or from sub class constructors: WebExtensionTargetActor and ParentProcessTargetActor. + * + * This is to circumvent the fact that sub classes need to call inner method + * to compute the initial docshell and we can't call inner methods before calling + * the base class constructor... + */ + setDocShell(docShell) { + Object.defineProperty(this, "docShell", { + value: docShell, + configurable: true, + writable: true, + }); + + // Save references to the original document we attached to + this._originalWindow = this.window; + + // Update isPrivate as window is based on docShell + this.isPrivate = PrivateBrowsingUtils.isContentWindowPrivate(this.window); + + // Instantiate the Thread Actor immediately. + // This is the only one actor instantiated right away by the target actor. + // All the others are instantiated lazily on first request made the client, + // via LazyPool API. + this._createThreadActor(); + + // Ensure notifying about the target actor first + // before notifying about new docshells. + // Otherwise we would miss these RDP event as the client hasn't + // yet received the target actor's form. + // (This is also probably meant to disappear once EFT is the only supported codepath) + this._docShellsObserved = false; + DevToolsUtils.executeSoon(() => this._watchDocshells()); + } + + get docShell() { + throw new Error( + "A docShell should be provided as constructor argument of WindowGlobalTargetActor, or redefined by the subclass" + ); + } + + // Optional console API listener options (e.g. used by the WebExtensionActor to + // filter console messages by addonID), set to an empty (no options) object by default. + consoleAPIListenerOptions = {}; + + /* + * Return a Debugger instance or create one if there is none yet + */ + get dbg() { + if (!this._dbg) { + this._dbg = this.makeDebugger(); + } + return this._dbg; + } + + /** + * Try to locate the console actor if it exists. + */ + get _consoleActor() { + if (this.isDestroyed()) { + return null; + } + const form = this.form(); + return this.conn._getOrCreateActor(form.consoleActor); + } + + get _memoryActor() { + if (this.isDestroyed()) { + return null; + } + const form = this.form(); + return this.conn._getOrCreateActor(form.memoryActor); + } + + _targetScopedActorPool = null; + + /** + * An object on which listen for DOMWindowCreated and pageshow events. + */ + get chromeEventHandler() { + return getDocShellChromeEventHandler(this.docShell); + } + + /** + * Getter for the nsIMessageManager associated to the window global. + */ + get messageManager() { + try { + return this.docShell.messageManager; + } catch (e) { + // In some cases we can't get a docshell. We just have no message manager + // then, + return null; + } + } + + /** + * Getter for the list of all `docShell`s in the window global. + * @return {Array} + */ + get docShells() { + if (this.ignoreSubFrames) { + return [this.docShell]; + } + + return getChildDocShells(this.docShell); + } + + /** + * Getter for the window global's current DOM window. + */ + get window() { + return this.docShell && !this.docShell.isBeingDestroyed() + ? this.docShell.domWindow + : null; + } + + get outerWindowID() { + if (this.docShell) { + return this.docShell.outerWindowID; + } + return null; + } + + get browsingContext() { + return this.docShell?.browsingContext; + } + + get browsingContextID() { + return this.browsingContext?.id; + } + + get browserId() { + return this.browsingContext?.browserId; + } + + get openerBrowserId() { + return this.browsingContext?.opener?.browserId; + } + + /** + * Getter for the WebExtensions ContentScript globals related to the + * window global's current DOM window. + */ + get webextensionsContentScriptGlobals() { + // Only retrieve the content scripts globals if the ExtensionContent JSM module + // has been already loaded (which is true if the WebExtensions internals have already + // been loaded in the same content process). + if (Cu.isESModuleLoaded(EXTENSION_CONTENT_SYS_MJS)) { + return lazy.ExtensionContent.getContentScriptGlobals(this.window); + } + + return []; + } + + /** + * Getter for the list of all content DOM windows in the window global. + * @return {Array} + */ + get windows() { + return this.docShells.map(docShell => { + return docShell.domWindow; + }); + } + + /** + * Getter for the original docShell this actor got attached to in the first + * place. + * Note that your actor should normally *not* rely on this top level docShell + * if you want it to show information relative to the iframe that's currently + * being inspected in the toolbox. + */ + get originalDocShell() { + if (!this._originalWindow) { + return this.docShell; + } + + return this._originalWindow.docShell; + } + + /** + * Getter for the original window this actor got attached to in the first + * place. + * Note that your actor should normally *not* rely on this top level window if + * you want it to show information relative to the iframe that's currently + * being inspected in the toolbox. + */ + get originalWindow() { + return this._originalWindow || this.window; + } + + /** + * Getter for the nsIWebProgress for watching this window. + */ + get webProgress() { + return this.docShell + .QueryInterface(Ci.nsIInterfaceRequestor) + .getInterface(Ci.nsIWebProgress); + } + + /** + * Getter for the nsIWebNavigation for the target. + */ + get webNavigation() { + return this.docShell.QueryInterface(Ci.nsIWebNavigation); + } + + /** + * Getter for the window global's document. + */ + get contentDocument() { + return this.webNavigation.document; + } + + /** + * Getter for the window global's title. + */ + get title() { + return this.contentDocument.title; + } + + /** + * Getter for the window global's URL. + */ + get url() { + if (this.webNavigation.currentURI) { + return this.webNavigation.currentURI.spec; + } + // Abrupt closing of the browser window may leave callbacks without a + // currentURI. + return null; + } + + get sourcesManager() { + if (!this._sourcesManager) { + this._sourcesManager = new SourcesManager(this.threadActor); + } + return this._sourcesManager; + } + + getStyleSheetsManager() { + if (!this._styleSheetsManager) { + this._styleSheetsManager = new StyleSheetsManager(this); + } + return this._styleSheetsManager; + } + + _createExtraActors() { + // Always use the same Pool, so existing actor instances + // (created in createExtraActors) are not lost. + if (!this._targetScopedActorPool) { + this._targetScopedActorPool = new LazyPool(this.conn); + } + + // Walk over target-scoped actor factories and make sure they are all + // instantiated and added into the Pool. + return createExtraActors( + ActorRegistry.targetScopedActorFactories, + this._targetScopedActorPool, + this + ); + } + + form() { + assert( + !this.isDestroyed(), + "form() shouldn't be called on destroyed browser actor." + ); + assert(this.actorID, "Actor should have an actorID."); + + // Note that we don't want the iframe dropdown to change our BrowsingContext.id/innerWindowId + // We only want to refer to the topmost original window we attached to + // as that's the one top document this target actor really represent. + // The iframe dropdown is just a hack that temporarily focus the scope + // of the target actor to a children iframe document. + // + // Also, for WebExtension, we want the target to represent the <browser> element + // created by DevTools, which always exists and help better connect resources to the target + // in the frontend. Otherwise all other <browser> element of webext may be reloaded or go away + // and then we would have troubles matching targets for resources. + const originalBrowsingContext = this + .devtoolsSpawnedBrowsingContextForWebExtension + ? this.devtoolsSpawnedBrowsingContextForWebExtension + : this.originalDocShell.browsingContext; + const browsingContextID = originalBrowsingContext.id; + const innerWindowId = + originalBrowsingContext.currentWindowContext.innerWindowId; + const parentInnerWindowId = + originalBrowsingContext.parent?.currentWindowContext.innerWindowId; + // Doesn't only check `!!opener` as some iframe might have an opener + // if their location was loaded via `window.open(url, "iframe-name")`. + // So also ensure that the document is opened in a distinct tab. + const isPopup = + !!originalBrowsingContext.opener && + originalBrowsingContext.browserId != + originalBrowsingContext.opener.browserId; + + const response = { + actor: this.actorID, + browsingContextID, + processID: Services.appinfo.processID, + // True for targets created by JSWindowActors, see constructor JSDoc. + followWindowGlobalLifeCycle: this.followWindowGlobalLifeCycle, + innerWindowId, + parentInnerWindowId, + topInnerWindowId: this.browsingContext.topWindowContext.innerWindowId, + isTopLevelTarget: this.isTopLevelTarget, + ignoreSubFrames: this.ignoreSubFrames, + isPopup, + isPrivate: this.isPrivate, + traits: { + // @backward-compat { version 64 } Exposes a new trait to help identify + // BrowsingContextActor's inherited actors from the client side. + isBrowsingContext: true, + // Browsing context targets can compute the isTopLevelTarget flag on the + // server. But other target actors don't support this yet. See Bug 1709314. + supportsTopLevelTargetFlag: true, + // Supports frame listing via `listFrames` request and `frameUpdate` events + // as well as frame switching via `switchToFrame` request + frames: true, + // Supports the logInPage request. + logInPage: true, + // Supports watchpoints in the server. We need to keep this trait because target + // actors that don't extend WindowGlobalTargetActor (Worker, ContentProcess, …) + // might not support watchpoints. + watchpoints: true, + // Supports back and forward navigation + navigation: true, + }, + }; + + // We may try to access window while the document is closing, then accessing window + // throws. + if (!this.docShell.isBeingDestroyed()) { + response.title = this.title; + response.url = this.url; + response.outerWindowID = this.outerWindowID; + } + + const actors = this._createExtraActors(); + Object.assign(response, actors); + + // The thread actor is the only actor manually created by the target actor. + // It is not registered in targetScopedActorFactories and therefore needs + // to be added here manually. + if (this.threadActor) { + Object.assign(response, { + threadActor: this.threadActor.actorID, + }); + } + + return response; + } + + /** + * Called when the actor is removed from the connection. + * + * @params {Object} options + * @params {Boolean} options.isTargetSwitching: Set to true when this is called during + * a target switch. + * @params {Boolean} options.isModeSwitching: Set to true true when this is called as the + * result of a change to the devtools.browsertoolbox.scope pref. + */ + destroy({ isTargetSwitching = false, isModeSwitching = false } = {}) { + // Avoid reentrancy. We will destroy the Transport when emitting "destroyed", + // which will force destroying all actors. + if (this.destroying) { + return; + } + this.destroying = true; + + // Tell the thread actor that the window global is closed, so that it may terminate + // instead of resuming the debuggee script. + // TODO: Bug 997119: Remove this coupling with thread actor + if (this.threadActor) { + this.threadActor._parentClosed = true; + } + + if (this._touchSimulator) { + this._touchSimulator.stop(); + this._touchSimulator = null; + } + + // Check for `docShell` availability, as it can be already gone during + // Firefox shutdown. + if (this.docShell) { + this._unwatchDocShell(this.docShell); + + // If this target is being destroyed as part of a target switch or a mode switch, + // we don't need to restore the configuration (this might cause the content page to + // be focused again, causing issues in tests and disturbing the user when switching modes). + if (!isTargetSwitching && !isModeSwitching) { + this._restoreTargetConfiguration(); + } + } + this._unwatchDocshells(); + + this._destroyThreadActor(); + + if (this._styleSheetsManager) { + this._styleSheetsManager.destroy(); + this._styleSheetsManager = null; + } + + // Shut down actors that belong to this target's pool. + if (this._targetScopedActorPool) { + this._targetScopedActorPool.destroy(); + this._targetScopedActorPool = null; + } + + // Make sure that no more workerListChanged notifications are sent. + if (this._workerDescriptorActorList !== null) { + this._workerDescriptorActorList.destroy(); + this._workerDescriptorActorList = null; + } + + if (this._workerDescriptorActorPool !== null) { + this._workerDescriptorActorPool.destroy(); + this._workerDescriptorActorPool = null; + } + + if (this._dbg) { + this._dbg.disable(); + this._dbg = null; + } + + // Emit a last event before calling Actor.destroy + // which will destroy the EventEmitter API + this.emit("destroyed", { isTargetSwitching, isModeSwitching }); + + // Destroy BaseTargetActor before nullifying docShell in case any child actor queries the window/docShell. + super.destroy(); + + this.docShell = null; + this._extraActors = null; + + Services.obs.removeObserver( + this._onConsoleApiProfilerEvent, + "console-api-profiler" + ); + + TargetActorRegistry.unregisterTargetActor(this); + Resources.unwatchAllResources(this); + } + + /** + * Return true if the given global is associated with this window global and should + * be added as a debuggee, false otherwise. + */ + _shouldAddNewGlobalAsDebuggee(wrappedGlobal) { + // Otherwise, check if it is a WebExtension content script sandbox + const global = unwrapDebuggerObjectGlobal(wrappedGlobal); + if (!global) { + return false; + } + + // Check if the global is a sdk page-mod sandbox. + let metadata = {}; + let id = ""; + try { + id = getInnerId(this.window); + metadata = Cu.getSandboxMetadata(global); + } catch (e) { + // ignore + } + if (metadata?.["inner-window-id"] && metadata["inner-window-id"] == id) { + return true; + } + + return false; + } + + _watchDocshells() { + // If for some unexpected reason, the actor is immediately destroyed, + // avoid registering leaking observer listener. + if (this.isDestroyed()) { + return; + } + + // In child processes, we watch all docshells living in the process. + Services.obs.addObserver(this, "webnavigation-create"); + Services.obs.addObserver(this, "webnavigation-destroy"); + this._docShellsObserved = true; + + // We watch for all child docshells under the current document, + this._progressListener.watch(this.docShell); + + // And list all already existing ones. + this._updateChildDocShells(); + } + + _unwatchDocshells() { + if (this._progressListener) { + this._progressListener.destroy(); + this._progressListener = null; + this._originalWindow = null; + } + + // Removes the observers being set in _watchDocshells, but only + // if _watchDocshells has been called. The target actor may be immediately destroyed + // and doesn't have time to register them. + // (Calling removeObserver without having called addObserver throws) + if (this._docShellsObserved) { + Services.obs.removeObserver(this, "webnavigation-create"); + Services.obs.removeObserver(this, "webnavigation-destroy"); + this._docShellsObserved = false; + } + } + + _unwatchDocShell(docShell) { + if (this._progressListener) { + this._progressListener.unwatch(docShell); + } + } + + switchToFrame(request) { + const windowId = request.windowId; + let win; + + try { + win = Services.wm.getOuterWindowWithId(windowId); + } catch (e) { + // ignore + } + if (!win) { + throw { + error: "noWindow", + message: "The related docshell is destroyed or not found", + }; + } else if (win == this.window) { + return {}; + } + + // Reply first before changing the document + DevToolsUtils.executeSoon(() => this._changeTopLevelDocument(win)); + + return {}; + } + + listFrames(request) { + const windows = this._docShellsToWindows(this.docShells); + return { frames: windows }; + } + + ensureWorkerDescriptorActorList() { + if (this._workerDescriptorActorList === null) { + this._workerDescriptorActorList = new WorkerDescriptorActorList( + this.conn, + { + type: Ci.nsIWorkerDebugger.TYPE_DEDICATED, + window: this.window, + } + ); + } + return this._workerDescriptorActorList; + } + + pauseWorkersUntilAttach(shouldPause) { + this.ensureWorkerDescriptorActorList().workerPauser.setPauseMatching( + shouldPause + ); + } + + listWorkers(request) { + return this.ensureWorkerDescriptorActorList() + .getList() + .then(actors => { + const pool = new Pool(this.conn, "worker-targets"); + for (const actor of actors) { + pool.manage(actor); + } + + // Do not destroy the pool before transfering ownership to the newly created + // pool, so that we do not accidently destroy actors that are still in use. + if (this._workerDescriptorActorPool) { + this._workerDescriptorActorPool.destroy(); + } + + this._workerDescriptorActorPool = pool; + this._workerDescriptorActorList.onListChanged = + this._onWorkerDescriptorActorListChanged; + + return { + workers: actors, + }; + }); + } + + logInPage(request) { + const { text, category, flags } = request; + const scriptErrorClass = Cc["@mozilla.org/scripterror;1"]; + const scriptError = scriptErrorClass.createInstance(Ci.nsIScriptError); + scriptError.initWithWindowID( + text, + null, + null, + 0, + 0, + flags, + category, + getInnerId(this.window) + ); + Services.console.logMessage(scriptError); + return {}; + } + + _onWorkerDescriptorActorListChanged() { + this._workerDescriptorActorList.onListChanged = null; + this.emit("workerListChanged"); + } + + _onConsoleApiProfilerEvent(subject, topic, data) { + // TODO: We will receive console-api-profiler events for any browser running + // in the same process as this target. We should filter irrelevant events, + // but console-api-profiler currently doesn't emit any information to identify + // the origin of the event. See Bug 1731033. + + // The new performance panel is not compatible with console.profile(). + const warningFlag = 1; + this.logInPage({ + text: + "console.profile is not compatible with the new Performance recorder. " + + "See https://bugzilla.mozilla.org/show_bug.cgi?id=1730896", + category: "console.profile unavailable", + flags: warningFlag, + }); + } + + observe(subject, topic, data) { + // Ignore any event that comes before/after the actor is attached. + // That typically happens during Firefox shutdown. + if (this.isDestroyed()) { + return; + } + + subject.QueryInterface(Ci.nsIDocShell); + + if (topic == "webnavigation-create") { + this._onDocShellCreated(subject); + } else if (topic == "webnavigation-destroy") { + this._onDocShellDestroy(subject); + } + } + + _onDocShellCreated(docShell) { + // (chrome-)webnavigation-create is fired very early during docshell + // construction. In new root docshells within child processes, involving + // BrowserChild, this event is from within this call: + // https://hg.mozilla.org/mozilla-central/annotate/74d7fb43bb44/dom/ipc/TabChild.cpp#l912 + // whereas the chromeEventHandler (and most likely other stuff) is set + // later: + // https://hg.mozilla.org/mozilla-central/annotate/74d7fb43bb44/dom/ipc/TabChild.cpp#l944 + // So wait a tick before watching it: + DevToolsUtils.executeSoon(() => { + // Bug 1142752: sometimes, the docshell appears to be immediately + // destroyed, bailout early to prevent random exceptions. + if (docShell.isBeingDestroyed()) { + return; + } + + // In child processes, we have new root docshells, + // let's watch them and all their child docshells. + if (this._isRootDocShell(docShell) && this.watchNewDocShells) { + this._progressListener.watch(docShell); + } + this._notifyDocShellsUpdate([docShell]); + }); + } + + _onDocShellDestroy(docShell) { + // Stop watching this docshell (the unwatch() method will check if we + // started watching it before). + this._unwatchDocShell(docShell); + + const webProgress = docShell + .QueryInterface(Ci.nsIInterfaceRequestor) + .getInterface(Ci.nsIWebProgress); + this._notifyDocShellDestroy(webProgress); + + if (webProgress.DOMWindow == this._originalWindow) { + // If the original top level document we connected to is removed, + // we try to switch to any other top level document + const rootDocShells = this.docShells.filter(d => { + // Ignore docshells without a working DOM Window. + // When we close firefox we have a chrome://extensions/content/dummy.xhtml + // which is in process of being destroyed and we might try to fallback to it. + // Unfortunately docshell.isBeingDestroyed() doesn't return true... + return d != this.docShell && this._isRootDocShell(d) && d.DOMWindow; + }); + if (rootDocShells.length) { + const newRoot = rootDocShells[0]; + this._originalWindow = newRoot.DOMWindow; + this._changeTopLevelDocument(this._originalWindow); + } else { + // If for some reason (typically during Firefox shutdown), the original + // document is destroyed, and there is no other top level docshell, + // we detach the actor to unregister all listeners and prevent any + // exception. + this.destroy(); + } + return; + } + + // If the currently targeted window global is destroyed, and we aren't on + // the top-level document, we have to switch to the top-level one. + if ( + webProgress.DOMWindow == this.window && + this.window != this._originalWindow + ) { + this._changeTopLevelDocument(this._originalWindow); + } + } + + _isRootDocShell(docShell) { + // Should report as root docshell: + // - New top level window's docshells, when using ParentProcessTargetActor against a + // process. It allows tracking iframes of the newly opened windows + // like Browser console or new browser windows. + // - MozActivities or window.open frames on B2G, where a new root docshell + // is spawn in the child process of the app. + return !docShell.parent; + } + + _docShellToWindow(docShell) { + const webProgress = docShell + .QueryInterface(Ci.nsIInterfaceRequestor) + .getInterface(Ci.nsIWebProgress); + const window = webProgress.DOMWindow; + const id = docShell.outerWindowID; + let parentID = undefined; + // Ignore the parent of the original document on non-e10s firefox, + // as we get the xul window as parent and don't care about it. + // Furthermore, ignore setting parentID when parent window is same as + // current window in order to deal with front end. e.g. toolbox will be fall + // into infinite loop due to recursive search with by using parent id. + if ( + window.parent && + window.parent != window && + window != this._originalWindow + ) { + parentID = window.parent.docShell.outerWindowID; + } + + return { + id, + parentID, + isTopLevel: window == this.originalWindow && this.isTopLevelTarget, + url: window.location.href, + title: window.document.title, + }; + } + + // Convert docShell list to windows objects list being sent to the client + _docShellsToWindows(docshells) { + return docshells + .filter(docShell => { + // Ensure docShell.document is available. + docShell.QueryInterface(Ci.nsIWebNavigation); + + // don't include transient about:blank documents + if (docShell.document.isInitialDocument) { + return false; + } + + return true; + }) + .map(docShell => this._docShellToWindow(docShell)); + } + + _notifyDocShellsUpdate(docshells) { + // Only top level target uses frameUpdate in order to update the iframe dropdown. + // This may eventually be replaced by Target listening and target switching. + if (!this.isTopLevelTarget) { + return; + } + + const windows = this._docShellsToWindows(docshells); + + // Do not send the `frameUpdate` event if the windows array is empty. + if (!windows.length) { + return; + } + + this.emit("frameUpdate", { + frames: windows, + }); + } + + _updateChildDocShells() { + this._notifyDocShellsUpdate(this.docShells); + } + + _notifyDocShellDestroy(webProgress) { + // Only top level target uses frameUpdate in order to update the iframe dropdown. + // This may eventually be replaced by Target listening and target switching. + if (!this.isTopLevelTarget) { + return; + } + + webProgress = webProgress.QueryInterface(Ci.nsIWebProgress); + const id = webProgress.DOMWindow.docShell.outerWindowID; + this.emit("frameUpdate", { + frames: [ + { + id, + destroy: true, + }, + ], + }); + } + + /** + * Creates and manages the thread actor as part of the Browsing Context Target pool. + * This sets up the content window for being debugged + */ + _createThreadActor() { + this.threadActor = new ThreadActor(this, this.window); + this.manage(this.threadActor); + } + + /** + * Exits the current thread actor and removes it from the Browsing Context Target pool. + * The content window is no longer being debugged after this call. + */ + _destroyThreadActor() { + if (this.threadActor) { + this.threadActor.destroy(); + this.threadActor = null; + } + + if (this._sourcesManager) { + this._sourcesManager.destroy(); + this._sourcesManager = null; + } + } + + // Protocol Request Handlers + + detach(request) { + // Destroy the actor in the next event loop in order + // to ensure responding to the `detach` request. + DevToolsUtils.executeSoon(() => { + this.destroy(); + }); + + return {}; + } + + /** + * Bring the window global's window to front. + */ + focus() { + if (this.window) { + this.window.focus(); + } + return {}; + } + + goForward() { + // Wait a tick so that the response packet can be dispatched before the + // subsequent navigation event packet. + Services.tm.dispatchToMainThread( + DevToolsUtils.makeInfallible(() => { + // This won't work while the browser is shutting down and we don't really + // care. + if (Services.startup.shuttingDown) { + return; + } + + this.webNavigation.goForward(); + }, "WindowGlobalTargetActor.prototype.goForward's delayed body") + ); + + return {}; + } + + goBack() { + // Wait a tick so that the response packet can be dispatched before the + // subsequent navigation event packet. + Services.tm.dispatchToMainThread( + DevToolsUtils.makeInfallible(() => { + // This won't work while the browser is shutting down and we don't really + // care. + if (Services.startup.shuttingDown) { + return; + } + + this.webNavigation.goBack(); + }, "WindowGlobalTargetActor.prototype.goBack's delayed body") + ); + + return {}; + } + + /** + * Reload the page in this window global. + * + * @backward-compat { legacy } + * reload is preserved for third party tools. See Bug 1717837. + * DevTools should use Descriptor::reloadDescriptor instead. + */ + reload(request) { + const force = request?.options?.force; + // Wait a tick so that the response packet can be dispatched before the + // subsequent navigation event packet. + Services.tm.dispatchToMainThread( + DevToolsUtils.makeInfallible(() => { + // This won't work while the browser is shutting down and we don't really + // care. + if (Services.startup.shuttingDown) { + return; + } + + this.webNavigation.reload( + force + ? Ci.nsIWebNavigation.LOAD_FLAGS_BYPASS_CACHE + : Ci.nsIWebNavigation.LOAD_FLAGS_NONE + ); + }, "WindowGlobalTargetActor.prototype.reload's delayed body") + ); + return {}; + } + + /** + * Navigate this window global to a new location + */ + navigateTo(request) { + // Wait a tick so that the response packet can be dispatched before the + // subsequent navigation event packet. + Services.tm.dispatchToMainThread( + DevToolsUtils.makeInfallible(() => { + this.window.location = request.url; + }, "WindowGlobalTargetActor.prototype.navigateTo's delayed body:" + request.url) + ); + return {}; + } + + /** + * For browsing-context targets which can't use the watcher configuration + * actor (eg webextension targets), the client directly calls `reconfigure`. + * Once all targets support the watcher, this method can be removed. + */ + reconfigure(request) { + const options = request.options || {}; + return this.updateTargetConfiguration(options); + } + + /** + * Apply target-specific options. + * + * This will be called by the watcher when the DevTools target-configuration + * is updated, or when a target is created via JSWindowActors. + */ + updateTargetConfiguration(options = {}, calledFromDocumentCreation = false) { + if (!this.docShell) { + // The window global is already closed. + return; + } + + // Also update configurations which applies to all target types + super.updateTargetConfiguration(options, calledFromDocumentCreation); + + let reload = false; + if (typeof options.touchEventsOverride !== "undefined") { + const enableTouchSimulator = options.touchEventsOverride === "enabled"; + + this.docShell.metaViewportOverride = enableTouchSimulator + ? Ci.nsIDocShell.META_VIEWPORT_OVERRIDE_ENABLED + : Ci.nsIDocShell.META_VIEWPORT_OVERRIDE_NONE; + + // We want to reload the document if it's an "existing" top level target on which + // the touch simulator will be toggled and the user has turned the + // "reload on touch simulation" setting on. + if ( + enableTouchSimulator !== this.touchSimulator.enabled && + options.reloadOnTouchSimulationToggle === true && + this.isTopLevelTarget && + !calledFromDocumentCreation + ) { + reload = true; + } + + if (enableTouchSimulator) { + this.touchSimulator.start(); + } else { + this.touchSimulator.stop(); + } + } + + if (typeof options.customFormatters !== "undefined") { + this.customFormatters = options.customFormatters; + } + + if (typeof options.useSimpleHighlightersForReducedMotion == "boolean") { + this._useSimpleHighlightersForReducedMotion = + options.useSimpleHighlightersForReducedMotion; + this.emit("use-simple-highlighters-updated"); + } + + if (!this.isTopLevelTarget) { + // Following DevTools target options should only apply to the top target and be + // propagated through the window global tree via the platform. + return; + } + if (typeof options.restoreFocus == "boolean") { + this._restoreFocus = options.restoreFocus; + } + if (typeof options.recordAllocations == "object") { + const actor = this._memoryActor; + if (options.recordAllocations == null) { + actor.stopRecordingAllocations(); + } else { + actor.attach(); + actor.startRecordingAllocations(options.recordAllocations); + } + } + + if (reload) { + this.webNavigation.reload(Ci.nsIWebNavigation.LOAD_FLAGS_NONE); + } + } + + get touchSimulator() { + if (!this._touchSimulator) { + this._touchSimulator = new TouchSimulator(this.chromeEventHandler); + } + + return this._touchSimulator; + } + + /** + * Opposite of the updateTargetConfiguration method, that resets document + * state when closing the toolbox. + */ + _restoreTargetConfiguration() { + if (this._restoreFocus && this.browsingContext?.isActive) { + this.window.focus(); + } + } + + _changeTopLevelDocument(window) { + // In case of WebExtension, still using one WindowGlobalTarget instance for many document, + // when reloading the add-on we might not destroy the previous target and wait for the next + // one to come and destroy it. + if (this.window) { + // Fake a will-navigate on the previous document + // to let a chance to unregister it + this._willNavigate({ + window: this.window, + newURI: window.location.href, + request: null, + isFrameSwitching: true, + navigationStart: Date.now(), + }); + + this._windowDestroyed(this.window, { + isFrozen: true, + isFrameSwitching: true, + }); + } + + // Immediately change the window as this window, if in process of unload + // may already be non working on the next cycle and start throwing + this._setWindow(window); + + DevToolsUtils.executeSoon(() => { + // No need to do anything more if the actor is destroyed. + // e.g. the client has been closed and the actors destroyed in the meantime. + if (this.isDestroyed()) { + return; + } + + // Then fake window-ready and navigate on the given document + this._windowReady(window, { isFrameSwitching: true }); + DevToolsUtils.executeSoon(() => { + this._navigate(window, true); + }); + }); + } + + _setWindow(window) { + // Here is the very important call where we switch the currently targeted + // window global (it will indirectly update this.window and many other + // attributes defined from docShell). + this.docShell = window.docShell; + this.emit("changed-toplevel-document"); + this.emit("frameUpdate", { + selected: this.outerWindowID, + }); + } + + /** + * Handle location changes, by clearing the previous debuggees and enabling + * debugging, which may have been disabled temporarily by the + * DebuggerProgressListener. + */ + _windowReady(window, { isFrameSwitching, isBFCache } = {}) { + if (this.ignoreSubFrames) { + return; + } + const isTopLevel = window == this.window; + + // We just reset iframe list on WillNavigate, so we now list all existing + // frames when we load a new document in the original window + if (window == this._originalWindow && !isFrameSwitching) { + this._updateChildDocShells(); + } + + // If this follows WindowGlobal lifecycle, a new Target actor will be spawn for the top level + // target document. Only notify about in-process iframes. + // Note that OOP iframes won't emit window-ready and will also have their dedicated target. + // Also, we allow window-ready to be fired for iframe switching of top level documents, + // otherwise the iframe dropdown no longer works with server side targets. + if (this.followWindowGlobalLifeCycle && isTopLevel && !isFrameSwitching) { + return; + } + + this.emit("window-ready", { + window, + isTopLevel, + isBFCache, + id: getWindowID(window), + isFrameSwitching, + }); + } + + _windowDestroyed( + window, + { id = null, isFrozen = false, isFrameSwitching = false } + ) { + if (this.ignoreSubFrames) { + return; + } + const isTopLevel = window == this.window; + + // If this follows WindowGlobal lifecycle, this target will be destroyed, alongside its top level document. + // Only notify about in-process iframes. + // Note that OOP iframes won't emit window-ready and will also have their dedicated target. + // Also, we allow window-destroyed to be fired for iframe switching of top level documents, + // otherwise the iframe dropdown no longer works with server side targets. + if (this.followWindowGlobalLifeCycle && isTopLevel && !isFrameSwitching) { + return; + } + + this.emit("window-destroyed", { + window, + isTopLevel, + id: id || getWindowID(window), + isFrozen, + }); + } + + /** + * Start notifying server and client about a new document being loaded in the + * currently targeted window global. + */ + _willNavigate({ + window, + newURI, + request, + isFrameSwitching = false, + navigationStart, + }) { + if (this.ignoreSubFrames) { + return; + } + let isTopLevel = window == this.window; + + let reset = false; + if (window == this._originalWindow && !isFrameSwitching) { + // If the top level document changes and we are targeting an iframe, we + // need to reset to the upcoming new top level document. But for this + // will-navigate event, we will dispatch on the old window. (The inspector + // codebase expect to receive will-navigate for the currently displayed + // document in order to cleanup the markup view) + if (this.window != this._originalWindow) { + reset = true; + window = this.window; + isTopLevel = true; + } + } + + // will-navigate event needs to be dispatched synchronously, by calling the + // listeners in the order or registration. This event fires once navigation + // starts, (all pending user prompts are dealt with), but before the first + // request starts. + this.emit("will-navigate", { + window, + isTopLevel, + newURI, + request, + navigationStart, + isFrameSwitching, + }); + + // We don't do anything for inner frames here. + // (we will only update thread actor on window-ready) + if (!isTopLevel) { + return; + } + + // When the actor acts as a WindowGlobalTarget, will-navigate won't fired. + // Instead we will receive a new top level target with isTargetSwitching=true. + if (!this.followWindowGlobalLifeCycle) { + this.emit("tabNavigated", { + url: newURI, + state: "start", + isFrameSwitching, + }); + } + + if (reset) { + this._setWindow(this._originalWindow); + } + } + + /** + * Notify server and client about a new document done loading in the current + * targeted window global. + */ + _navigate(window, isFrameSwitching = false) { + if (this.ignoreSubFrames) { + return; + } + const isTopLevel = window == this.window; + + // navigate event needs to be dispatched synchronously, + // by calling the listeners in the order or registration. + // This event is fired once the document is loaded, + // after the load event, it's document ready-state is 'complete'. + this.emit("navigate", { + window, + isTopLevel, + }); + + // We don't do anything for inner frames here. + // (we will only update thread actor on window-ready) + if (!isTopLevel) { + return; + } + + // We may still significate when the document is done loading, via navigate. + // But as we no longer fire the "will-navigate", may be it is better to find + // other ways to get to our means. + // Listening to "navigate" is misleading as the document may already be loaded + // if we just opened the DevTools. So it is better to use "watch" pattern + // and instead have the actor either emit immediately resources as they are + // already available, or later on as the load progresses. + if (this.followWindowGlobalLifeCycle) { + return; + } + + this.emit("tabNavigated", { + url: this.url, + title: this.title, + state: "stop", + isFrameSwitching, + }); + } + + removeActorByName(name) { + if (name in this._extraActors) { + const actor = this._extraActors[name]; + if (this._targetScopedActorPool.has(actor)) { + this._targetScopedActorPool.removeActor(actor); + } + delete this._extraActors[name]; + } + } +} + +exports.WindowGlobalTargetActor = WindowGlobalTargetActor; + +class DebuggerProgressListener { + /** + * The DebuggerProgressListener class is an nsIWebProgressListener which + * handles onStateChange events for the targeted window global. If the user + * tries to navigate away from a paused page, the listener makes sure that the + * debuggee is resumed before the navigation begins. + * + * @param WindowGlobalTargetActor targetActor + * The window global target actor associated with this listener. + */ + constructor(targetActor) { + this._targetActor = targetActor; + this._onWindowCreated = this.onWindowCreated.bind(this); + this._onWindowHidden = this.onWindowHidden.bind(this); + + // Watch for windows destroyed (global observer that will need filtering) + Services.obs.addObserver(this, "inner-window-destroyed"); + + // XXX: for now we maintain the list of windows we know about in this instance + // so that we can discriminate windows we care about when observing + // inner-window-destroyed events. Bug 1016952 would remove the need for this. + this._knownWindowIDs = new Map(); + + this._watchedDocShells = new WeakSet(); + } + + QueryInterface = ChromeUtils.generateQI([ + "nsIWebProgressListener", + "nsISupportsWeakReference", + ]); + + destroy() { + Services.obs.removeObserver(this, "inner-window-destroyed"); + this._knownWindowIDs.clear(); + this._knownWindowIDs = null; + } + + watch(docShell) { + // Add the docshell to the watched set. We're actually adding the window, + // because docShell objects are not wrappercached and would be rejected + // by the WeakSet. + const docShellWindow = docShell.domWindow; + this._watchedDocShells.add(docShellWindow); + + const webProgress = docShell + .QueryInterface(Ci.nsIInterfaceRequestor) + .getInterface(Ci.nsIWebProgress); + webProgress.addProgressListener( + this, + Ci.nsIWebProgress.NOTIFY_STATE_WINDOW | + Ci.nsIWebProgress.NOTIFY_STATE_DOCUMENT + ); + + const handler = getDocShellChromeEventHandler(docShell); + handler.addEventListener("DOMWindowCreated", this._onWindowCreated, true); + handler.addEventListener("pageshow", this._onWindowCreated, true); + handler.addEventListener("pagehide", this._onWindowHidden, true); + + // Dispatch the _windowReady event on the targetActor for pre-existing windows + const windows = this._targetActor.ignoreSubFrames + ? [docShellWindow] + : this._getWindowsInDocShell(docShell); + for (const win of windows) { + this._targetActor._windowReady(win); + this._knownWindowIDs.set(getWindowID(win), win); + } + + // The `watchedByDevTools` enables gecko behavior tied to this flag, such as: + // - reporting the contents of HTML loaded in the docshells, + // - or capturing stacks for the network monitor. + // + // This flag is also set in frame-helper but in the case of the browser toolbox, we + // don't have the watcher enabled by default yet, and as a result we need to set it + // here for the parent process window global. + // This should be removed as part of Bug 1709529. + if (this._targetActor.typeName === "parentProcessTarget") { + docShell.browsingContext.watchedByDevTools = true; + } + // Immediately enable CSS error reports on new top level docshells, if this was already enabled. + // This is specific to MBT and WebExtension targets (so the isRootActor check). + if ( + this._targetActor.isRootActor && + this._targetActor.docShell.cssErrorReportingEnabled + ) { + docShell.cssErrorReportingEnabled = true; + } + } + + unwatch(docShell) { + const docShellWindow = docShell.domWindow; + if (!this._watchedDocShells.has(docShellWindow)) { + return; + } + this._watchedDocShells.delete(docShellWindow); + + const webProgress = docShell + .QueryInterface(Ci.nsIInterfaceRequestor) + .getInterface(Ci.nsIWebProgress); + // During process shutdown, the docshell may already be cleaned up and throw + try { + webProgress.removeProgressListener(this); + } catch (e) { + // ignore + } + + const handler = getDocShellChromeEventHandler(docShell); + handler.removeEventListener( + "DOMWindowCreated", + this._onWindowCreated, + true + ); + handler.removeEventListener("pageshow", this._onWindowCreated, true); + handler.removeEventListener("pagehide", this._onWindowHidden, true); + + const windows = this._targetActor.ignoreSubFrames + ? [docShellWindow] + : this._getWindowsInDocShell(docShell); + for (const win of windows) { + this._knownWindowIDs.delete(getWindowID(win)); + } + + // We only reset it for parent process target actor as the flag should be set in parent + // process, and thus is set elsewhere for other type of BrowsingContextActor. + if (this._targetActor.typeName === "parentProcessTarget") { + docShell.browsingContext.watchedByDevTools = false; + } + } + + _getWindowsInDocShell(docShell) { + return getChildDocShells(docShell).map(d => { + return d.domWindow; + }); + } + + onWindowCreated = DevToolsUtils.makeInfallible(function (evt) { + if (this._targetActor.isDestroyed()) { + return; + } + + // If we're in a frame swap (which occurs when toggling RDM, for example), then we can + // ignore this event, as the window never really went anywhere for our purposes. + if (evt.inFrameSwap) { + return; + } + + const window = evt.target.defaultView; + if (!window) { + // Some old UIs might emit unrelated events called pageshow/pagehide on + // elements which are not documents. Bail in this case. See Bug 1669666. + return; + } + + const innerID = getWindowID(window); + + // This handler is called for two events: "DOMWindowCreated" and "pageshow". + // Bail out if we already processed this window. + if (this._knownWindowIDs.has(innerID)) { + return; + } + this._knownWindowIDs.set(innerID, window); + + // For a regular page navigation, "DOMWindowCreated" is fired before + // "pageshow". If the current event is "pageshow" but we have not processed + // the window yet, it means this is a BF cache navigation. In theory, + // `event.persisted` should be set for BF cache navigation events, but it is + // not always available, so we fallback on checking if "pageshow" is the + // first event received for a given window (see Bug 1378133). + const isBFCache = evt.type == "pageshow"; + + this._targetActor._windowReady(window, { isBFCache }); + }, "DebuggerProgressListener.prototype.onWindowCreated"); + + onWindowHidden = DevToolsUtils.makeInfallible(function (evt) { + if (this._targetActor.isDestroyed()) { + return; + } + + // If we're in a frame swap (which occurs when toggling RDM, for example), then we can + // ignore this event, as the window isn't really going anywhere for our purposes. + if (evt.inFrameSwap) { + return; + } + + // Only act as if the window has been destroyed if the 'pagehide' event + // was sent for a persisted window (persisted is set when the page is put + // and frozen in the bfcache). If the page isn't persisted, the observer's + // inner-window-destroyed event will handle it. + if (!evt.persisted) { + return; + } + + const window = evt.target.defaultView; + if (!window) { + // Some old UIs might emit unrelated events called pageshow/pagehide on + // elements which are not documents. Bail in this case. See Bug 1669666. + return; + } + + this._targetActor._windowDestroyed(window, { isFrozen: true }); + this._knownWindowIDs.delete(getWindowID(window)); + }, "DebuggerProgressListener.prototype.onWindowHidden"); + + observe = DevToolsUtils.makeInfallible(function (subject, topic) { + if (this._targetActor.isDestroyed()) { + return; + } + + // Because this observer will be called for all inner-window-destroyed in + // the application, we need to filter out events for windows we are not + // watching + const innerID = subject.QueryInterface(Ci.nsISupportsPRUint64).data; + const window = this._knownWindowIDs.get(innerID); + if (window) { + this._knownWindowIDs.delete(innerID); + this._targetActor._windowDestroyed(window, { id: innerID }); + } + + // Bug 1598364: when debugging browser.xhtml from the Browser Toolbox + // the DOMWindowCreated/pageshow/pagehide event listeners have to be + // re-registered against the next document when we reload browser.html + // (or navigate to another doc). + // That's because we registered the listener on docShell.domWindow as + // top level windows don't have a chromeEventHandler. + if ( + this._watchedDocShells.has(window) && + !window.docShell.chromeEventHandler + ) { + // First cleanup all the existing listeners + this.unwatch(window.docShell); + // Re-register new ones. The docShell is already referencing the new document. + this.watch(window.docShell); + } + }, "DebuggerProgressListener.prototype.observe"); + + onStateChange = DevToolsUtils.makeInfallible(function ( + progress, + request, + flag, + status + ) { + if (this._targetActor.isDestroyed()) { + return; + } + progress.QueryInterface(Ci.nsIDocShell); + if (progress.isBeingDestroyed()) { + return; + } + + const isStart = flag & Ci.nsIWebProgressListener.STATE_START; + const isStop = flag & Ci.nsIWebProgressListener.STATE_STOP; + const isDocument = flag & Ci.nsIWebProgressListener.STATE_IS_DOCUMENT; + const isWindow = flag & Ci.nsIWebProgressListener.STATE_IS_WINDOW; + + // Ideally, we would fetch navigationStart from window.performance.timing.navigationStart + // but as WindowGlobal isn't instantiated yet we don't have access to it. + // This is ultimately handed over to DocumentEventListener, which uses this. + // See its comment about WILL_NAVIGATE_TIME_SHIFT for more details about the related workaround. + const navigationStart = Date.now(); + + // Catch any iframe location change + if (isDocument && isStop) { + // Watch document stop to ensure having the new iframe url. + this._targetActor._notifyDocShellsUpdate([progress]); + } + + const window = progress.DOMWindow; + if (isDocument && isStart) { + // One of the earliest events that tells us a new URI + // is being loaded in this window. + const newURI = request instanceof Ci.nsIChannel ? request.URI.spec : null; + this._targetActor._willNavigate({ + window, + newURI, + request, + isFrameSwitching: false, + navigationStart, + }); + } + if (isWindow && isStop) { + // Don't dispatch "navigate" event just yet when there is a redirect to + // about:neterror page. + // Navigating to about:neterror will make `status` be something else than NS_OK. + // But for some error like NS_BINDING_ABORTED we don't want to emit any `navigate` + // event as the page load has been cancelled and the related page document is going + // to be a dead wrapper. + if ( + request.status != Cr.NS_OK && + request.status != Cr.NS_BINDING_ABORTED + ) { + // Instead, listen for DOMContentLoaded as about:neterror is loaded + // with LOAD_BACKGROUND flags and never dispatches load event. + // That may be the same reason why there is no onStateChange event + // for about:neterror loads. + const handler = getDocShellChromeEventHandler(progress); + const onLoad = evt => { + // Ignore events from iframes + if (evt.target === window.document) { + handler.removeEventListener("DOMContentLoaded", onLoad, true); + this._targetActor._navigate(window); + } + }; + handler.addEventListener("DOMContentLoaded", onLoad, true); + } else { + // Somewhat equivalent of load event. + // (window.document.readyState == complete) + this._targetActor._navigate(window); + } + } + }, + "DebuggerProgressListener.prototype.onStateChange"); +} diff --git a/devtools/server/actors/targets/worker.js b/devtools/server/actors/targets/worker.js new file mode 100644 index 0000000000..cf5f7b83c9 --- /dev/null +++ b/devtools/server/actors/targets/worker.js @@ -0,0 +1,149 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const { + workerTargetSpec, +} = require("resource://devtools/shared/specs/targets/worker.js"); + +const { + WebConsoleActor, +} = require("resource://devtools/server/actors/webconsole.js"); +const { ThreadActor } = require("resource://devtools/server/actors/thread.js"); +const { TracerActor } = require("resource://devtools/server/actors/tracer.js"); +const { + ObjectsManagerActor, +} = require("resource://devtools/server/actors/objects-manager.js"); + +const Targets = require("resource://devtools/server/actors/targets/index.js"); + +const makeDebuggerUtil = require("resource://devtools/server/actors/utils/make-debugger.js"); +const { + SourcesManager, +} = require("resource://devtools/server/actors/utils/sources-manager.js"); + +const { + BaseTargetActor, +} = require("resource://devtools/server/actors/targets/base-target-actor.js"); + +class WorkerTargetActor extends BaseTargetActor { + /** + * Target actor for a worker in the content process. + * + * @param {DevToolsServerConnection} conn: The connection to the client. + * @param {WorkerGlobalScope} workerGlobal: The worker global. + * @param {Object} workerDebuggerData: The worker debugger information + * @param {String} workerDebuggerData.id: The worker debugger id + * @param {String} workerDebuggerData.url: The worker debugger url + * @param {String} workerDebuggerData.type: The worker debugger type + * @param {Boolean} workerDebuggerData.workerConsoleApiMessagesDispatchedToMainThread: + * Value of the dom.worker.console.dispatch_events_to_main_thread pref + * @param {Object} sessionContext: The Session Context to help know what is debugged. + * See devtools/server/actors/watcher/session-context.js + */ + constructor(conn, workerGlobal, workerDebuggerData, sessionContext) { + super(conn, Targets.TYPES.WORKER, workerTargetSpec); + + // workerGlobal is needed by the console actor for evaluations. + this.workerGlobal = workerGlobal; + this.sessionContext = sessionContext; + + // We don't have access to Ci from worker thread + // 2 == nsIWorkerDebugger.TYPE_SERVICE + // 1 == nsIWorkerDebugger.TYPE_SHARED + if (workerDebuggerData.type == 2) { + this.targetType = Targets.TYPES.SERVICE_WORKER; + } else if (workerDebuggerData.type == 1) { + this.targetType = Targets.TYPES.SHARED_WORKER; + } + + this._workerDebuggerData = workerDebuggerData; + this._sourcesManager = null; + this.workerConsoleApiMessagesDispatchedToMainThread = + workerDebuggerData.workerConsoleApiMessagesDispatchedToMainThread; + + this.makeDebugger = makeDebuggerUtil.bind(null, { + findDebuggees: () => { + return [workerGlobal]; + }, + shouldAddNewGlobalAsDebuggee: () => true, + }); + + // needed by the console actor + this.threadActor = new ThreadActor(this, this.workerGlobal); + + // needed by the thread actor to communicate with the console when evaluating logpoints. + this._consoleActor = new WebConsoleActor(this.conn, this); + + this.tracerActor = new TracerActor(this.conn, this); + this.objectsManagerActor = new ObjectsManagerActor(this.conn, this); + + this.manage(this.threadActor); + this.manage(this._consoleActor); + this.manage(this.tracerActor); + this.manage(this.objectsManagerActor); + } + + // Expose the worker URL to the thread actor. + // so that it can easily know what is the base URL of all worker scripts. + get workerUrl() { + return this._workerDebuggerData.url; + } + + form() { + return { + actor: this.actorID, + + consoleActor: this._consoleActor?.actorID, + threadActor: this.threadActor?.actorID, + tracerActor: this.tracerActor?.actorID, + objectsManagerActor: this.objectsManagerActor?.actorID, + + id: this._workerDebuggerData.id, + type: this._workerDebuggerData.type, + url: this._workerDebuggerData.url, + traits: { + // See trait description in browsing-context.js + supportsTopLevelTargetFlag: false, + }, + }; + } + + get dbg() { + if (!this._dbg) { + this._dbg = this.makeDebugger(); + } + return this._dbg; + } + + get sourcesManager() { + if (this._sourcesManager === null) { + this._sourcesManager = new SourcesManager(this.threadActor); + } + + return this._sourcesManager; + } + + // This is called from the ThreadActor#onAttach method + onThreadAttached() { + // This isn't an RDP event and is only listened to from startup/worker.js. + this.emit("worker-thread-attached"); + } + + destroy() { + super.destroy(); + + if (this._sourcesManager) { + this._sourcesManager.destroy(); + this._sourcesManager = null; + } + + this.workerGlobal = null; + this._dbg = null; + this._consoleActor = null; + this.threadActor = null; + } +} +exports.WorkerTargetActor = WorkerTargetActor; diff --git a/devtools/server/actors/thread-configuration.js b/devtools/server/actors/thread-configuration.js new file mode 100644 index 0000000000..8cd28f5887 --- /dev/null +++ b/devtools/server/actors/thread-configuration.js @@ -0,0 +1,80 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const { Actor } = require("resource://devtools/shared/protocol.js"); +const { + threadConfigurationSpec, +} = require("resource://devtools/shared/specs/thread-configuration.js"); + +const { + SessionDataHelpers, +} = require("resource://devtools/server/actors/watcher/SessionDataHelpers.jsm"); +const { + SUPPORTED_DATA: { THREAD_CONFIGURATION }, +} = SessionDataHelpers; + +// List of options supported by this thread configuration actor. +const SUPPORTED_OPTIONS = { + // Controls pausing on debugger statement. + // (This is enabled by default if omitted) + shouldPauseOnDebuggerStatement: true, + // Enable pausing on exceptions. + pauseOnExceptions: true, + // Disable pausing on caught exceptions. + ignoreCaughtExceptions: true, + // Include previously saved stack frames when paused. + shouldIncludeSavedFrames: true, + // Include async stack frames when paused. + shouldIncludeAsyncLiveFrames: true, + // Stop pausing on breakpoints. + skipBreakpoints: true, + // Log the event break points. + logEventBreakpoints: true, + // Enable debugging asm & wasm. + // See https://searchfox.org/mozilla-central/source/js/src/doc/Debugger/Debugger.md#16-26 + observeAsmJS: true, + observeWasm: true, + // Should pause all the workers untill thread has attached. + pauseWorkersUntilAttach: true, +}; + +/** + * This actor manages the configuration options which apply to thread actor for all the targets. + * + * Configuration options should be applied to all concerned targets when the + * configuration is updated, and new targets should also be able to read the + * flags when they are created. The flags will be forwarded to the WatcherActor + * and stored as THREAD_CONFIGURATION data entries. + * + * @constructor + * + */ +class ThreadConfigurationActor extends Actor { + constructor(watcherActor) { + super(watcherActor.conn, threadConfigurationSpec); + this.watcherActor = watcherActor; + } + + async updateConfiguration(configuration) { + const configArray = Object.keys(configuration) + .filter(key => { + if (!SUPPORTED_OPTIONS[key]) { + console.warn(`Unsupported option for ThreadConfiguration: ${key}`); + return false; + } + return true; + }) + .map(key => ({ key, value: configuration[key] })); + + await this.watcherActor.addOrSetDataEntry( + THREAD_CONFIGURATION, + configArray, + "add" + ); + } +} + +exports.ThreadConfigurationActor = ThreadConfigurationActor; diff --git a/devtools/server/actors/thread.js b/devtools/server/actors/thread.js new file mode 100644 index 0000000000..d33b3e5eb2 --- /dev/null +++ b/devtools/server/actors/thread.js @@ -0,0 +1,2385 @@ +/* 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"; + +// protocol.js uses objects as exceptions in order to define +// error packets. +/* eslint-disable no-throw-literal */ + +const { Actor } = require("resource://devtools/shared/protocol/Actor.js"); +const { Pool } = require("resource://devtools/shared/protocol/Pool.js"); +const { threadSpec } = require("resource://devtools/shared/specs/thread.js"); + +const { + createValueGrip, +} = require("resource://devtools/server/actors/object/utils.js"); +const DevToolsUtils = require("resource://devtools/shared/DevToolsUtils.js"); +const Debugger = require("Debugger"); +const { assert, dumpn, reportException } = DevToolsUtils; +const { + getAvailableEventBreakpoints, + eventBreakpointForNotification, + eventsRequireNotifications, + firstStatementBreakpointId, + makeEventBreakpointMessage, +} = require("resource://devtools/server/actors/utils/event-breakpoints.js"); +const { + WatchpointMap, +} = require("resource://devtools/server/actors/utils/watchpoint-map.js"); + +const { + logEvent, +} = require("resource://devtools/server/actors/utils/logEvent.js"); + +loader.lazyRequireGetter( + this, + "EnvironmentActor", + "resource://devtools/server/actors/environment.js", + true +); +loader.lazyRequireGetter( + this, + "BreakpointActorMap", + "resource://devtools/server/actors/utils/breakpoint-actor-map.js", + true +); +loader.lazyRequireGetter( + this, + "PauseScopedObjectActor", + "resource://devtools/server/actors/pause-scoped.js", + true +); +loader.lazyRequireGetter( + this, + "EventLoop", + "resource://devtools/server/actors/utils/event-loop.js", + true +); +loader.lazyRequireGetter( + this, + ["FrameActor", "getSavedFrameParent", "isValidSavedFrame"], + "resource://devtools/server/actors/frame.js", + true +); +loader.lazyRequireGetter( + this, + "HighlighterEnvironment", + "resource://devtools/server/actors/highlighters.js", + true +); +loader.lazyRequireGetter( + this, + "PausedDebuggerOverlay", + "resource://devtools/server/actors/highlighters/paused-debugger.js", + true +); + +const PROMISE_REACTIONS = new WeakMap(); +function cacheReactionsForFrame(frame) { + if (frame.asyncPromise) { + const reactions = frame.asyncPromise.getPromiseReactions(); + const existingReactions = PROMISE_REACTIONS.get(frame.asyncPromise); + if ( + reactions.length && + (!existingReactions || reactions.length > existingReactions.length) + ) { + PROMISE_REACTIONS.set(frame.asyncPromise, reactions); + } + } +} + +function createStepForReactionTracking(onStep) { + return function () { + cacheReactionsForFrame(this); + return onStep ? onStep.apply(this, arguments) : undefined; + }; +} + +const getAsyncParentFrame = frame => { + if (!frame.asyncPromise) { + return null; + } + + // We support returning Frame actors for frames that are suspended + // at an 'await', and here we want to walk upward to look for the first + // frame that will be resumed when the current frame's promise resolves. + let reactions = + PROMISE_REACTIONS.get(frame.asyncPromise) || + frame.asyncPromise.getPromiseReactions(); + + while (true) { + // We loop here because we may have code like: + // + // async function inner(){ debugger; } + // + // async function outer() { + // await Promise.resolve().then(() => inner()); + // } + // + // where we can see that when `inner` resolves, we will resume from + // `outer`, even though there is a layer of promises between, and + // that layer could be any number of promises deep. + if (!(reactions[0] instanceof Debugger.Object)) { + break; + } + + reactions = reactions[0].getPromiseReactions(); + } + + if (reactions[0] instanceof Debugger.Frame) { + return reactions[0]; + } + return null; +}; +const RESTARTED_FRAMES = new WeakSet(); + +// Thread actor possible states: +const STATES = { + // Before ThreadActor.attach is called: + DETACHED: "detached", + // After the actor is destroyed: + EXITED: "exited", + + // States possible in between DETACHED AND EXITED: + // Default state, when the thread isn't paused, + RUNNING: "running", + // When paused on any type of breakpoint, or, when the client requested an interrupt. + PAUSED: "paused", +}; +exports.STATES = STATES; + +// Possible values for the `why.type` attribute in "paused" event +const PAUSE_REASONS = { + ALREADY_PAUSED: "alreadyPaused", + INTERRUPTED: "interrupted", // Associated with why.onNext attribute + MUTATION_BREAKPOINT: "mutationBreakpoint", // Associated with why.mutationType and why.message attributes + DEBUGGER_STATEMENT: "debuggerStatement", + EXCEPTION: "exception", + XHR: "XHR", + EVENT_BREAKPOINT: "eventBreakpoint", + RESUME_LIMIT: "resumeLimit", +}; +exports.PAUSE_REASONS = PAUSE_REASONS; + +class ThreadActor extends Actor { + /** + * Creates a ThreadActor. + * + * ThreadActors manage execution/inspection of debuggees. + * + * @param parent TargetActor + * This |ThreadActor|'s parent actor. i.e. one of the many Target actors. + * @param aGlobal object [optional] + * An optional (for content debugging only) reference to the content + * window. + */ + constructor(parent, global) { + super(parent.conn, threadSpec); + + this._state = STATES.DETACHED; + this._parent = parent; + this.global = global; + this._options = { + skipBreakpoints: false, + }; + this._gripDepth = 0; + this._parentClosed = false; + this._observingNetwork = false; + this._frameActors = []; + this._xhrBreakpoints = []; + + this._dbg = null; + this._threadLifetimePool = null; + this._activeEventPause = null; + this._pauseOverlay = null; + this._priorPause = null; + + this._activeEventBreakpoints = new Set(); + this._frameActorMap = new WeakMap(); + this._debuggerSourcesSeen = new WeakSet(); + + // A Set of URLs string to watch for when new sources are found by + // the debugger instance. + this._onLoadBreakpointURLs = new Set(); + + // A WeakMap from Debugger.Frame to an exception value which will be ignored + // when deciding to pause if the value is thrown by the frame. When we are + // pausing on exceptions then we only want to pause when the youngest frame + // throws a particular exception, instead of for all older frames as well. + this._handledFrameExceptions = new WeakMap(); + + this._watchpointsMap = new WatchpointMap(this); + + this.breakpointActorMap = new BreakpointActorMap(this); + + this._nestedEventLoop = new EventLoop({ + thread: this, + }); + + this.onNewSourceEvent = this.onNewSourceEvent.bind(this); + + this.createCompletionGrip = this.createCompletionGrip.bind(this); + this.onDebuggerStatement = this.onDebuggerStatement.bind(this); + this.onNewScript = this.onNewScript.bind(this); + this.objectGrip = this.objectGrip.bind(this); + this.pauseObjectGrip = this.pauseObjectGrip.bind(this); + this._onOpeningRequest = this._onOpeningRequest.bind(this); + this._onNewDebuggee = this._onNewDebuggee.bind(this); + this._onExceptionUnwind = this._onExceptionUnwind.bind(this); + this._eventBreakpointListener = this._eventBreakpointListener.bind(this); + this._onWindowReady = this._onWindowReady.bind(this); + this._onWillNavigate = this._onWillNavigate.bind(this); + this._onNavigate = this._onNavigate.bind(this); + + this._parent.on("window-ready", this._onWindowReady); + this._parent.on("will-navigate", this._onWillNavigate); + this._parent.on("navigate", this._onNavigate); + + this._firstStatementBreakpoint = null; + this._debuggerNotificationObserver = new DebuggerNotificationObserver(); + } + + // Used by the ObjectActor to keep track of the depth of grip() calls. + _gripDepth = null; + + get dbg() { + if (!this._dbg) { + this._dbg = this._parent.dbg; + // Keep the debugger disabled until a client attaches. + if (this._state === STATES.DETACHED) { + this._dbg.disable(); + } else { + this._dbg.enable(); + } + } + return this._dbg; + } + + // Current state of the thread actor: + // - detached: state, before ThreadActor.attach is called, + // - exited: state, after the actor is destroyed, + // States possible in between these two states: + // - running: default state, when the thread isn't paused, + // - paused: state, when paused on any type of breakpoint, or, when the client requested an interrupt. + get state() { + return this._state; + } + + // XXX: soon to be equivalent to !isDestroyed once the thread actor is initialized on target creation. + get attached() { + return this.state == STATES.RUNNING || this.state == STATES.PAUSED; + } + + get threadLifetimePool() { + if (!this._threadLifetimePool) { + this._threadLifetimePool = new Pool(this.conn, "thread"); + this._threadLifetimePool.objectActors = new WeakMap(); + } + return this._threadLifetimePool; + } + + getThreadLifetimeObject(raw) { + return this.threadLifetimePool.objectActors.get(raw); + } + + createValueGrip(value) { + return createValueGrip(value, this.threadLifetimePool, this.objectGrip); + } + + get sourcesManager() { + return this._parent.sourcesManager; + } + + get breakpoints() { + return this._parent.breakpoints; + } + + get youngestFrame() { + if (this.state != STATES.PAUSED) { + return null; + } + return this.dbg.getNewestFrame(); + } + + get shouldSkipAnyBreakpoint() { + return ( + // Disable all types of breakpoints if: + // - the user explicitly requested it via the option + this._options.skipBreakpoints || + // - or when we are evaluating some javascript via the console actor and disableBreaks + // has been set to true (which happens for most evaluating except the console input) + this.insideClientEvaluation?.disableBreaks + ); + } + + isPaused() { + return this._state === STATES.PAUSED; + } + + lastPausedPacket() { + return this._priorPause; + } + + /** + * Remove all debuggees and clear out the thread's sources. + */ + clearDebuggees() { + if (this._dbg) { + this.dbg.removeAllDebuggees(); + } + } + + /** + * Destroy the debugger and put the actor in the exited state. + * + * As part of destroy, we: clean up listeners, debuggees and + * clear actor pools associated with the lifetime of this actor. + */ + destroy() { + dumpn("in ThreadActor.prototype.destroy"); + if (this._state == STATES.PAUSED) { + this.doResume(); + } + + this.removeAllWatchpoints(); + this._xhrBreakpoints = []; + this._updateNetworkObserver(); + + this._activeEventBreakpoints = new Set(); + this._debuggerNotificationObserver.removeListener( + this._eventBreakpointListener + ); + + for (const global of this.dbg.getDebuggees()) { + try { + this._debuggerNotificationObserver.disconnect( + global.unsafeDereference() + ); + } catch (e) {} + } + + this._parent.off("window-ready", this._onWindowReady); + this._parent.off("will-navigate", this._onWillNavigate); + this._parent.off("navigate", this._onNavigate); + + this.sourcesManager.off("newSource", this.onNewSourceEvent); + this.clearDebuggees(); + this._threadLifetimePool.destroy(); + this._threadLifetimePool = null; + this._dbg = null; + this._state = STATES.EXITED; + + super.destroy(); + } + + /** + * Tells if the thread actor has been initialized/attached on target creation + * by the server codebase. (And not late, from the frontend, by the TargetMixinFront class) + */ + isAttached() { + return !!this.alreadyAttached; + } + + // Request handlers + attach(options) { + // Note that the client avoids trying to call attach if already attached. + // But just in case, avoid any possible duplicate call to attach. + if (this.alreadyAttached) { + return; + } + + if (this.state === STATES.EXITED) { + throw { + error: "exited", + message: "threadActor has exited", + }; + } + + if (this.state !== STATES.DETACHED) { + throw { + error: "wrongState", + message: "Current state is " + this.state, + }; + } + + this.dbg.onDebuggerStatement = this.onDebuggerStatement; + this.dbg.onNewScript = this.onNewScript; + this.dbg.onNewDebuggee = this._onNewDebuggee; + + this.sourcesManager.on("newSource", this.onNewSourceEvent); + + this.reconfigure(options); + + // Switch state from DETACHED to RUNNING + this._state = STATES.RUNNING; + + this.alreadyAttached = true; + this.dbg.enable(); + + // Notify the parent that we've finished attaching. If this is a worker + // thread which was paused until attaching, this will allow content to + // begin executing. + if (this._parent.onThreadAttached) { + this._parent.onThreadAttached(); + } + if (Services.obs) { + // Set a wrappedJSObject property so |this| can be sent via the observer service + // for the xpcshell harness. + this.wrappedJSObject = this; + Services.obs.notifyObservers(this, "devtools-thread-ready"); + } + } + + toggleEventLogging(logEventBreakpoints) { + this._options.logEventBreakpoints = logEventBreakpoints; + return this._options.logEventBreakpoints; + } + + get pauseOverlay() { + if (this._pauseOverlay) { + return this._pauseOverlay; + } + + const env = new HighlighterEnvironment(); + env.initFromTargetActor(this._parent); + const highlighter = new PausedDebuggerOverlay(env, { + resume: () => this.resume(null), + stepOver: () => this.resume({ type: "next" }), + }); + this._pauseOverlay = highlighter; + return highlighter; + } + + _canShowOverlay() { + const { window } = this._parent; + + // The CanvasFrameAnonymousContentHelper class we're using to create the paused overlay + // need to have access to a documentElement. + // We might have access to a non-chrome window getter that is a Sandox (e.g. in the + // case of ContentProcessTargetActor). + if (!window?.document?.documentElement) { + return false; + } + + // Ignore privileged document (top level window, special about:* pages, …). + if (window.isChromeWindow) { + return false; + } + + return true; + } + + async showOverlay() { + if ( + this.isPaused() && + this._canShowOverlay() && + this._parent.on && + this.pauseOverlay + ) { + const reason = this._priorPause.why.type; + await this.pauseOverlay.isReady; + + // we might not be paused anymore. + if (!this.isPaused()) { + return; + } + + this.pauseOverlay.show(reason); + } + } + + hideOverlay() { + if (this._canShowOverlay() && this._pauseOverlay) { + this.pauseOverlay.hide(); + } + } + + /** + * Tell the thread to automatically add a breakpoint on the first line of + * a given file, when it is first loaded. + * + * This is currently only used by the xpcshell test harness, and unless + * we decide to expand the scope of this feature, we should keep it that way. + */ + setBreakpointOnLoad(urls) { + this._onLoadBreakpointURLs = new Set(urls); + } + + _findXHRBreakpointIndex(p, m) { + return this._xhrBreakpoints.findIndex( + ({ path, method }) => path === p && method === m + ); + } + + // We clear the priorPause field when a breakpoint is added or removed + // at the same location because we are no longer worried about pausing twice + // at that location (e.g. debugger statement, stepping). + _maybeClearPriorPause(location) { + if (!this._priorPause) { + return; + } + + const { where } = this._priorPause.frame; + if (where.line === location.line && where.column === location.column) { + this._priorPause = null; + } + } + + async setBreakpoint(location, options) { + let actor = this.breakpointActorMap.get(location); + // Avoid resetting the exact same breakpoint twice + if (actor && JSON.stringify(actor.options) == JSON.stringify(options)) { + return; + } + if (!actor) { + actor = this.breakpointActorMap.getOrCreateBreakpointActor(location); + } + actor.setOptions(options); + this._maybeClearPriorPause(location); + + if (location.sourceUrl) { + // There can be multiple source actors for a URL if there are multiple + // inline sources on an HTML page. + const sourceActors = this.sourcesManager.getSourceActorsByURL( + location.sourceUrl + ); + for (const sourceActor of sourceActors) { + await sourceActor.applyBreakpoint(actor); + } + } else { + const sourceActor = this.sourcesManager.getSourceActorById( + location.sourceId + ); + if (sourceActor) { + await sourceActor.applyBreakpoint(actor); + } + } + } + + removeBreakpoint(location) { + const actor = this.breakpointActorMap.getOrCreateBreakpointActor(location); + this._maybeClearPriorPause(location); + actor.delete(); + } + + removeAllXHRBreakpoints() { + this._xhrBreakpoints = []; + return this._updateNetworkObserver(); + } + + removeXHRBreakpoint(path, method) { + const index = this._findXHRBreakpointIndex(path, method); + + if (index >= 0) { + this._xhrBreakpoints.splice(index, 1); + } + return this._updateNetworkObserver(); + } + + setXHRBreakpoint(path, method) { + // request.path is a string, + // If requested url contains the path, then we pause. + const index = this._findXHRBreakpointIndex(path, method); + + if (index === -1) { + this._xhrBreakpoints.push({ path, method }); + } + return this._updateNetworkObserver(); + } + + getAvailableEventBreakpoints() { + return getAvailableEventBreakpoints(this._parent.window); + } + getActiveEventBreakpoints() { + return Array.from(this._activeEventBreakpoints); + } + + /** + * Add event breakpoints to the list of active event breakpoints + * + * @param {Array<String>} ids: events to add (e.g. ["event.mouse.click","event.mouse.mousedown"]) + */ + addEventBreakpoints(ids) { + this.setActiveEventBreakpoints( + this.getActiveEventBreakpoints().concat(ids) + ); + } + + /** + * Remove event breakpoints from the list of active event breakpoints + * + * @param {Array<String>} ids: events to remove (e.g. ["event.mouse.click","event.mouse.mousedown"]) + */ + removeEventBreakpoints(ids) { + this.setActiveEventBreakpoints( + this.getActiveEventBreakpoints().filter(eventBp => !ids.includes(eventBp)) + ); + } + + /** + * Set the the list of active event breakpoints + * + * @param {Array<String>} ids: events to add breakpoint for (e.g. ["event.mouse.click","event.mouse.mousedown"]) + */ + setActiveEventBreakpoints(ids) { + this._activeEventBreakpoints = new Set(ids); + + if (eventsRequireNotifications(ids)) { + this._debuggerNotificationObserver.addListener( + this._eventBreakpointListener + ); + } else { + this._debuggerNotificationObserver.removeListener( + this._eventBreakpointListener + ); + } + + if (this._activeEventBreakpoints.has(firstStatementBreakpointId())) { + this._ensureFirstStatementBreakpointInitialized(); + + this._firstStatementBreakpoint.hit = frame => + this._pauseAndRespondEventBreakpoint( + frame, + firstStatementBreakpointId() + ); + } else if (this._firstStatementBreakpoint) { + // Disabling the breakpoint disables the feature as much as we need it + // to. We do not bother removing breakpoints from the scripts themselves + // here because the breakpoints will be a no-op if `hit` is `null`, and + // if we wanted to remove them, we'd need a way to iterate through them + // all, which would require us to hold strong references to them, which + // just isn't needed. Plus, if the user disables and then re-enables the + // feature again later, the breakpoints will still be there to work. + this._firstStatementBreakpoint.hit = null; + } + } + + _ensureFirstStatementBreakpointInitialized() { + if (this._firstStatementBreakpoint) { + return; + } + + this._firstStatementBreakpoint = { hit: null }; + for (const script of this.dbg.findScripts()) { + this._maybeTrackFirstStatementBreakpoint(script); + } + } + + _maybeTrackFirstStatementBreakpointForNewGlobal(global) { + if (this._firstStatementBreakpoint) { + for (const script of this.dbg.findScripts({ global })) { + this._maybeTrackFirstStatementBreakpoint(script); + } + } + } + + _maybeTrackFirstStatementBreakpoint(script) { + if ( + // If the feature is not enabled yet, there is nothing to do. + !this._firstStatementBreakpoint || + // WASM files don't have a first statement. + script.format !== "js" || + // All "top-level" scripts are non-functions, whether that's because + // the script is a module, a global script, or an eval or what. + script.isFunction + ) { + return; + } + + const bps = script.getPossibleBreakpoints(); + + // Scripts aren't guaranteed to have a step start if for instance the + // file contains only function declarations, so in that case we try to + // fall back to whatever we can find. + let meta = bps.find(bp => bp.isStepStart) || bps[0]; + if (!meta) { + // We've tried to avoid using `getAllColumnOffsets()` because the set of + // locations included in this list is very under-defined, but for this + // usecase it's not the end of the world. Maybe one day we could have an + // "onEnterFrame" that was scoped to a specific script to avoid this. + meta = script.getAllColumnOffsets()[0]; + } + + if (!meta) { + // Not certain that this is actually possible, but including for sanity + // so that we don't throw unexpectedly. + return; + } + script.setBreakpoint(meta.offset, this._firstStatementBreakpoint); + } + + _onNewDebuggee(global) { + this._maybeTrackFirstStatementBreakpointForNewGlobal(global); + try { + this._debuggerNotificationObserver.connect(global.unsafeDereference()); + } catch (e) {} + } + + _updateNetworkObserver() { + // Workers don't have access to `Services` and even if they did, network + // requests are all dispatched to the main thread, so there would be + // nothing here to listen for. We'll need to revisit implementing + // XHR breakpoints for workers. + if (isWorker) { + return false; + } + + if (this._xhrBreakpoints.length && !this._observingNetwork) { + this._observingNetwork = true; + Services.obs.addObserver( + this._onOpeningRequest, + "http-on-opening-request" + ); + } else if (this._xhrBreakpoints.length === 0 && this._observingNetwork) { + this._observingNetwork = false; + Services.obs.removeObserver( + this._onOpeningRequest, + "http-on-opening-request" + ); + } + + return true; + } + + _onOpeningRequest(subject) { + if (this.shouldSkipAnyBreakpoint) { + return; + } + + const channel = subject.QueryInterface(Ci.nsIHttpChannel); + const url = channel.URI.asciiSpec; + const requestMethod = channel.requestMethod; + + let causeType = Ci.nsIContentPolicy.TYPE_OTHER; + if (channel.loadInfo) { + causeType = channel.loadInfo.externalContentPolicyType; + } + + const isXHR = + causeType === Ci.nsIContentPolicy.TYPE_XMLHTTPREQUEST || + causeType === Ci.nsIContentPolicy.TYPE_FETCH; + + if (!isXHR) { + // We currently break only if the request is either fetch or xhr + return; + } + + let shouldPause = false; + for (const { path, method } of this._xhrBreakpoints) { + if (method !== "ANY" && method !== requestMethod) { + continue; + } + if (url.includes(path)) { + shouldPause = true; + break; + } + } + + if (shouldPause) { + const frame = this.dbg.getNewestFrame(); + + // If there is no frame, this request was dispatched by logic that isn't + // primarily JS, so pausing the event loop wouldn't make sense. + // This covers background requests like loading the initial page document, + // or loading favicons. This also includes requests dispatched indirectly + // from workers. We'll need to handle them separately in the future. + if (frame) { + this._pauseAndRespond(frame, { type: PAUSE_REASONS.XHR }); + } + } + } + + reconfigure(options = {}) { + if (this.state == STATES.EXITED) { + throw { + error: "wrongState", + }; + } + this._options = { ...this._options, ...options }; + + if ("observeAsmJS" in options) { + this.dbg.allowUnobservedAsmJS = !options.observeAsmJS; + } + if ("observeWasm" in options) { + this.dbg.allowUnobservedWasm = !options.observeWasm; + } + + if ( + "pauseWorkersUntilAttach" in options && + this._parent.pauseWorkersUntilAttach + ) { + this._parent.pauseWorkersUntilAttach(options.pauseWorkersUntilAttach); + } + + if (options.breakpoints) { + for (const breakpoint of Object.values(options.breakpoints)) { + this.setBreakpoint(breakpoint.location, breakpoint.options); + } + } + + if (options.eventBreakpoints) { + this.setActiveEventBreakpoints(options.eventBreakpoints); + } + + // Only consider this options if an explicit boolean value is passed. + if (typeof this._options.shouldPauseOnDebuggerStatement == "boolean") { + this.setPauseOnDebuggerStatement( + this._options.shouldPauseOnDebuggerStatement + ); + } + this.setPauseOnExceptions(this._options.pauseOnExceptions); + } + + _eventBreakpointListener(notification) { + if (this._state === STATES.PAUSED || this._state === STATES.DETACHED) { + return; + } + + const eventBreakpoint = eventBreakpointForNotification( + this.dbg, + notification + ); + + if (!this._activeEventBreakpoints.has(eventBreakpoint)) { + return; + } + + if (notification.phase === "pre" && !this._activeEventPause) { + this._activeEventPause = this._captureDebuggerHooks(); + + this.dbg.onEnterFrame = + this._makeEventBreakpointEnterFrame(eventBreakpoint); + } else if (notification.phase === "post" && this._activeEventPause) { + this._restoreDebuggerHooks(this._activeEventPause); + this._activeEventPause = null; + } else if (!notification.phase && !this._activeEventPause) { + const frame = this.dbg.getNewestFrame(); + if (frame) { + if (this.sourcesManager.isFrameBlackBoxed(frame)) { + return; + } + + this._pauseAndRespondEventBreakpoint(frame, eventBreakpoint); + } + } + } + + _makeEventBreakpointEnterFrame(eventBreakpoint) { + return frame => { + if (this.sourcesManager.isFrameBlackBoxed(frame)) { + return undefined; + } + + this._restoreDebuggerHooks(this._activeEventPause); + this._activeEventPause = null; + + return this._pauseAndRespondEventBreakpoint(frame, eventBreakpoint); + }; + } + + _pauseAndRespondEventBreakpoint(frame, eventBreakpoint) { + if (this.shouldSkipAnyBreakpoint) { + return undefined; + } + + if (this._options.logEventBreakpoints) { + return logEvent({ + threadActor: this, + frame, + level: "logPoint", + expression: `[_event]`, + bindings: { _event: frame.arguments[0] }, + }); + } + + return this._pauseAndRespond(frame, { + type: PAUSE_REASONS.EVENT_BREAKPOINT, + breakpoint: eventBreakpoint, + message: makeEventBreakpointMessage(eventBreakpoint), + }); + } + + _captureDebuggerHooks() { + return { + onEnterFrame: this.dbg.onEnterFrame, + onStep: this.dbg.onStep, + onPop: this.dbg.onPop, + }; + } + + _restoreDebuggerHooks(hooks) { + this.dbg.onEnterFrame = hooks.onEnterFrame; + this.dbg.onStep = hooks.onStep; + this.dbg.onPop = hooks.onPop; + } + + /** + * Pause the debuggee, by entering a nested event loop, and return a 'paused' + * packet to the client. + * + * @param Debugger.Frame frame + * The newest debuggee frame in the stack. + * @param object reason + * An object with a 'type' property containing the reason for the pause. + * @param function onPacket + * Hook to modify the packet before it is sent. Feel free to return a + * promise. + */ + _pauseAndRespond(frame, reason, onPacket = k => k) { + try { + const packet = this._paused(frame); + if (!packet) { + return undefined; + } + + const { sourceActor, line, column } = + this.sourcesManager.getFrameLocation(frame); + + packet.why = reason; + + if (!sourceActor) { + // If the frame location is in a source that not pass the 'isHiddenSource' + // check and thus has no actor, we do not bother pausing. + return undefined; + } + + packet.frame.where = { + actor: sourceActor.actorID, + line, + column, + }; + const pkt = onPacket(packet); + + this._priorPause = pkt; + this.emit("paused", pkt); + this.showOverlay(); + } catch (error) { + reportException("DBG-SERVER", error); + this.conn.send({ + error: "unknownError", + message: error.message + "\n" + error.stack, + }); + return undefined; + } + + try { + this._nestedEventLoop.enter(); + } catch (e) { + reportException("TA__pauseAndRespond", e); + } + + if (this._requestedFrameRestart) { + return null; + } + + // If the parent actor has been closed, terminate the debuggee script + // instead of continuing. Executing JS after the content window is gone is + // a bad idea. + return this._parentClosed ? null : undefined; + } + + _makeOnEnterFrame({ pauseAndRespond }) { + return frame => { + if (this._requestedFrameRestart) { + return null; + } + + // Continue forward until we get to a valid step target. + const { onStep, onPop } = this._makeSteppingHooks({ + steppingType: "next", + }); + + if (this.sourcesManager.isFrameBlackBoxed(frame)) { + return undefined; + } + + frame.onStep = onStep; + frame.onPop = onPop; + return undefined; + }; + } + + _makeOnPop({ pauseAndRespond, steppingType }) { + const thread = this; + return function (completion) { + if (thread._requestedFrameRestart === this) { + return thread.restartFrame(this); + } + + // onPop is called when we temporarily leave an async/generator + if (steppingType != "finish" && (completion.await || completion.yield)) { + thread.suspendedFrame = this; + thread.dbg.onEnterFrame = undefined; + return undefined; + } + + // Note that we're popping this frame; we need to watch for + // subsequent step events on its caller. + this.reportedPop = true; + + // Cache the frame so that the onPop and onStep hooks are cleared + // on the next pause. + thread.suspendedFrame = this; + + if ( + steppingType != "finish" && + !thread.sourcesManager.isFrameBlackBoxed(this) + ) { + const pauseAndRespValue = pauseAndRespond(this, packet => + thread.createCompletionGrip(packet, completion) + ); + + // If the requested frame to restart differs from this frame, we don't + // need to restart it at this point. + if (thread._requestedFrameRestart === this) { + return thread.restartFrame(this); + } + + return pauseAndRespValue; + } + + thread._attachSteppingHooks(this, "next", completion); + return undefined; + }; + } + + restartFrame(frame) { + this._requestedFrameRestart = null; + this._priorPause = null; + + if ( + frame.type !== "call" || + frame.script.isGeneratorFunction || + frame.script.isAsyncFunction + ) { + return undefined; + } + RESTARTED_FRAMES.add(frame); + + const completion = frame.callee.apply(frame.this, frame.arguments); + + return completion; + } + + hasMoved(frame, newType) { + const newLocation = this.sourcesManager.getFrameLocation(frame); + + if (!this._priorPause) { + return true; + } + + // Recursion/Loops makes it okay to resume and land at + // the same breakpoint or debugger statement. + // It is not okay to transition from a breakpoint to debugger statement + // or a step to a debugger statement. + const { type } = this._priorPause.why; + + // Conditional breakpoint are doing something weird as they are using "breakpoint" type + // unless they throw in which case they will be "breakpointConditionThrown". + if ( + type == newType || + (type == "breakpointConditionThrown" && newType == "breakpoint") + ) { + return true; + } + + const { line, column } = this._priorPause.frame.where; + return line !== newLocation.line || column !== newLocation.column; + } + + _makeOnStep({ pauseAndRespond, startFrame, steppingType, completion }) { + const thread = this; + return function () { + if (thread._validFrameStepOffset(this, startFrame, this.offset)) { + return pauseAndRespond(this, packet => + thread.createCompletionGrip(packet, completion) + ); + } + + return undefined; + }; + } + + _validFrameStepOffset(frame, startFrame, offset) { + const meta = frame.script.getOffsetMetadata(offset); + + // Continue if: + // 1. the location is not a valid breakpoint position + // 2. the source is blackboxed + // 3. we have not moved since the last pause + if ( + !meta.isBreakpoint || + this.sourcesManager.isFrameBlackBoxed(frame) || + !this.hasMoved(frame) + ) { + return false; + } + + // Pause if: + // 1. the frame has changed + // 2. the location is a step position. + return frame !== startFrame || meta.isStepStart; + } + + atBreakpointLocation(frame) { + const location = this.sourcesManager.getFrameLocation(frame); + return !!this.breakpointActorMap.get(location); + } + + createCompletionGrip(packet, completion) { + if (!completion) { + return packet; + } + + const createGrip = value => + createValueGrip(value, this._pausePool, this.objectGrip); + packet.why.frameFinished = {}; + + if (completion.hasOwnProperty("return")) { + packet.why.frameFinished.return = createGrip(completion.return); + } else if (completion.hasOwnProperty("yield")) { + packet.why.frameFinished.return = createGrip(completion.yield); + } else if (completion.hasOwnProperty("throw")) { + packet.why.frameFinished.throw = createGrip(completion.throw); + } + + return packet; + } + + /** + * Define the JS hook functions for stepping. + */ + _makeSteppingHooks({ steppingType, startFrame, completion }) { + // Bind these methods and state because some of the hooks are called + // with 'this' set to the current frame. Rather than repeating the + // binding in each _makeOnX method, just do it once here and pass it + // in to each function. + const steppingHookState = { + pauseAndRespond: (frame, onPacket = k => k) => + this._pauseAndRespond( + frame, + { type: PAUSE_REASONS.RESUME_LIMIT }, + onPacket + ), + startFrame: startFrame || this.youngestFrame, + steppingType, + completion, + }; + + return { + onEnterFrame: this._makeOnEnterFrame(steppingHookState), + onPop: this._makeOnPop(steppingHookState), + onStep: this._makeOnStep(steppingHookState), + }; + } + + /** + * Handle attaching the various stepping hooks we need to attach when we + * receive a resume request with a resumeLimit property. + * + * @param Object { resumeLimit } + * The values received over the RDP. + * @returns A promise that resolves to true once the hooks are attached, or is + * rejected with an error packet. + */ + async _handleResumeLimit({ resumeLimit, frameActorID }) { + const steppingType = resumeLimit.type; + if ( + !["break", "step", "next", "finish", "restart"].includes(steppingType) + ) { + return Promise.reject({ + error: "badParameterType", + message: "Unknown resumeLimit type", + }); + } + + let frame = this.youngestFrame; + + if (frameActorID) { + frame = this._framesPool.getActorByID(frameActorID).frame; + if (!frame) { + throw new Error("Frame should exist in the frames pool."); + } + } + + if (steppingType === "restart") { + if ( + frame.type !== "call" || + frame.script.isGeneratorFunction || + frame.script.isAsyncFunction + ) { + return undefined; + } + this._requestedFrameRestart = frame; + } + + return this._attachSteppingHooks(frame, steppingType, undefined); + } + + _attachSteppingHooks(frame, steppingType, completion) { + // If we are stepping out of the onPop handler, we want to use "next" mode + // so that the parent frame's handlers behave consistently. + if (steppingType === "finish" && frame.reportedPop) { + steppingType = "next"; + } + + // If there are no more frames on the stack, use "step" mode so that we will + // pause on the next script to execute. + const stepFrame = this._getNextStepFrame(frame); + if (!stepFrame) { + steppingType = "step"; + } + + const { onEnterFrame, onPop, onStep } = this._makeSteppingHooks({ + steppingType, + completion, + startFrame: frame, + }); + + if (steppingType === "step" || steppingType === "restart") { + this.dbg.onEnterFrame = onEnterFrame; + } + + if (stepFrame) { + switch (steppingType) { + case "step": + case "break": + case "next": + if (stepFrame.script) { + if (!this.sourcesManager.isFrameBlackBoxed(stepFrame)) { + stepFrame.onStep = onStep; + } + } + // eslint-disable-next-line no-fallthrough + case "finish": + stepFrame.onStep = createStepForReactionTracking(stepFrame.onStep); + // eslint-disable-next-line no-fallthrough + case "restart": + stepFrame.onPop = onPop; + break; + } + } + + return true; + } + + /** + * Clear the onStep and onPop hooks for all frames on the stack. + */ + _clearSteppingHooks() { + if (this.suspendedFrame) { + this.suspendedFrame.onStep = undefined; + this.suspendedFrame.onPop = undefined; + this.suspendedFrame = undefined; + } + + let frame = this.youngestFrame; + if (frame?.onStack) { + while (frame) { + frame.onStep = undefined; + frame.onPop = undefined; + frame = frame.older; + } + } + } + + /** + * Handle a protocol request to resume execution of the debuggee. + */ + async resume(resumeLimit, frameActorID) { + if (this._state !== STATES.PAUSED) { + return { + error: "wrongState", + message: + "Can't resume when debuggee isn't paused. Current state is '" + + this._state + + "'", + state: this._state, + }; + } + + // In case of multiple nested event loops (due to multiple debuggers open in + // different tabs or multiple devtools clients connected to the same tab) + // only allow resumption in a LIFO order. + if (!this._nestedEventLoop.isTheLastPausedThreadActor()) { + return { + error: "wrongOrder", + message: "trying to resume in the wrong order.", + }; + } + + try { + if (resumeLimit) { + await this._handleResumeLimit({ resumeLimit, frameActorID }); + } else { + this._clearSteppingHooks(); + } + + this.doResume({ resumeLimit }); + return {}; + } catch (error) { + return error instanceof Error + ? { + error: "unknownError", + message: DevToolsUtils.safeErrorString(error), + } + : // It is a known error, and the promise was rejected with an error + // packet. + error; + } + } + + /** + * Only resume and notify necessary observers. This should be used in cases + * when we do not want to notify the front end of a resume, for example when + * we are shutting down. + */ + doResume({ resumeLimit } = {}) { + this._state = STATES.RUNNING; + + // Drop the actors in the pause actor pool. + this._pausePool.destroy(); + this._pausePool = null; + + this._pauseActor = null; + this._nestedEventLoop.exit(); + + // Tell anyone who cares of the resume (as of now, that's the xpcshell harness and + // devtools-startup.js when handling the --wait-for-jsdebugger flag) + this.emit("resumed"); + this.hideOverlay(); + } + + /** + * Set the debugging hook to pause on exceptions if configured to do so. + * + * Note that this is also called when evaluating conditional breakpoints. + * + * @param {Boolean} doPause + * Should watch for pause or not. `_onExceptionUnwind` function will + * then be notified about new caught or uncaught exception being fired. + */ + setPauseOnExceptions(doPause) { + if (doPause) { + this.dbg.onExceptionUnwind = this._onExceptionUnwind; + } else { + this.dbg.onExceptionUnwind = undefined; + } + } + + /** + * Set the debugging hook to pause on debugger statement if configured to do so. + * + * Note that the thread actor will pause on exception by default. + * This method has to be called with a falsy value to disable it. + * + * @param {Boolean} doPause + * Controls whether we should or should not pause on debugger statement. + */ + setPauseOnDebuggerStatement(doPause) { + this.dbg.onDebuggerStatement = doPause + ? this.onDebuggerStatement + : undefined; + } + + isPauseOnExceptionsEnabled() { + return this.dbg.onExceptionUnwind == this._onExceptionUnwind; + } + + /** + * Helper method that returns the next frame when stepping. + */ + _getNextStepFrame(frame) { + const endOfFrame = frame.reportedPop; + const stepFrame = endOfFrame + ? frame.older || getAsyncParentFrame(frame) + : frame; + if (!stepFrame || !stepFrame.script) { + return null; + } + + // Skips a frame that has been restarted. + if (RESTARTED_FRAMES.has(stepFrame)) { + return this._getNextStepFrame(stepFrame.older); + } + + return stepFrame; + } + + frames(start, count) { + if (this.state !== STATES.PAUSED) { + return { + error: "wrongState", + message: + "Stack frames are only available while the debuggee is paused.", + }; + } + + // Find the starting frame... + let frame = this.youngestFrame; + + const walkToParentFrame = () => { + if (!frame) { + return; + } + + const currentFrame = frame; + frame = null; + + if (!(currentFrame instanceof Debugger.Frame)) { + frame = getSavedFrameParent(this, currentFrame); + } else if (currentFrame.older) { + frame = currentFrame.older; + } else if ( + this._options.shouldIncludeSavedFrames && + currentFrame.olderSavedFrame + ) { + frame = currentFrame.olderSavedFrame; + if (frame && !isValidSavedFrame(this, frame)) { + frame = null; + } + } else if ( + this._options.shouldIncludeAsyncLiveFrames && + currentFrame.asyncPromise + ) { + const asyncFrame = getAsyncParentFrame(currentFrame); + if (asyncFrame) { + frame = asyncFrame; + } + } + }; + + let i = 0; + while (frame && i < start) { + walkToParentFrame(); + i++; + } + + // Return count frames, or all remaining frames if count is not defined. + const frames = []; + for (; frame && (!count || i < start + count); i++, walkToParentFrame()) { + // SavedFrame instances don't have direct Debugger.Source object. If + // there is an active Debugger.Source that represents the SaveFrame's + // source, it will have already been created in the server. + if (frame instanceof Debugger.Frame) { + this.sourcesManager.createSourceActor(frame.script.source); + } + + if (RESTARTED_FRAMES.has(frame)) { + continue; + } + + const frameActor = this._createFrameActor(frame, i); + frames.push(frameActor); + } + + return { frames }; + } + + addAllSources() { + // Compare the sources we find with the source URLs which have been loaded + // in debuggee realms. Count the number of sources associated with each + // URL so that we can detect if an HTML file has had some inline sources + // collected but not all. + const urlMap = {}; + for (const url of this.dbg.findSourceURLs()) { + if (url !== "self-hosted") { + if (!urlMap[url]) { + urlMap[url] = { count: 0, sources: [] }; + } + urlMap[url].count++; + } + } + + const sources = this.dbg.findSources(); + + for (const source of sources) { + this._addSource(source); + + // The following check should match the filtering done by `findSourceURLs`: + // https://searchfox.org/mozilla-central/rev/ac7a567f036e1954542763f4722fbfce041fb752/js/src/debugger/Debugger.cpp#2406-2409 + // Otherwise we may populate `urlMap` incorrectly and resurrect sources that weren't GCed, + // and spawn duplicated SourceActors/Debugger.Source for the same actual source. + // `findSourceURLs` uses !introductionScript check as that allows to identify <script>'s + // loaded from the HTML page. This boolean will be defined only when the <script> tag + // is added by Javascript code at runtime. + // https://searchfox.org/mozilla-central/rev/3d03a3ca09f03f06ef46a511446537563f62a0c6/devtools/docs/user/debugger-api/debugger.source/index.rst#113 + if (!source.introductionScript && urlMap[source.url]) { + urlMap[source.url].count--; + urlMap[source.url].sources.push(source); + } + } + + // Resurrect any URLs for which not all sources are accounted for. + for (const [url, data] of Object.entries(urlMap)) { + if (data.count > 0) { + this._resurrectSource(url, data.sources); + } + } + } + + sources(request) { + this.addAllSources(); + + // No need to flush the new source packets here, as we are sending the + // list of sources out immediately and we don't need to invoke the + // overhead of an RDP packet for every source right now. Let the default + // timeout flush the buffered packets. + + return this.sourcesManager.iter().map(s => s.form()); + } + + /** + * Disassociate all breakpoint actors from their scripts and clear the + * breakpoint handlers. This method can be used when the thread actor intends + * to keep the breakpoint store, but needs to clear any actual breakpoints, + * e.g. due to a page navigation. This way the breakpoint actors' script + * caches won't hold on to the Debugger.Script objects leaking memory. + */ + disableAllBreakpoints() { + for (const bpActor of this.breakpointActorMap.findActors()) { + bpActor.removeScripts(); + } + } + + removeAllBreakpoints() { + this.breakpointActorMap.removeAllBreakpoints(); + } + + removeAllWatchpoints() { + for (const actor of this.threadLifetimePool.poolChildren()) { + if (actor.typeName == "obj") { + actor.removeWatchpoints(); + } + } + } + + addWatchpoint(objActor, data) { + this._watchpointsMap.add(objActor, data); + } + + removeWatchpoint(objActor, property) { + this._watchpointsMap.remove(objActor, property); + } + + getWatchpoint(obj, property) { + return this._watchpointsMap.get(obj, property); + } + + /** + * Handle a protocol request to pause the debuggee. + */ + interrupt(when) { + if (this.state == STATES.EXITED) { + return { type: "exited" }; + } else if (this.state == STATES.PAUSED) { + // TODO: return the actual reason for the existing pause. + this.emit("paused", { + why: { type: PAUSE_REASONS.ALREADY_PAUSED }, + }); + return {}; + } else if (this.state != STATES.RUNNING) { + return { + error: "wrongState", + message: "Received interrupt request in " + this.state + " state.", + }; + } + try { + // If execution should pause just before the next JavaScript bytecode is + // executed, just set an onEnterFrame handler. + if (when == "onNext") { + const onEnterFrame = frame => { + this._pauseAndRespond(frame, { + type: PAUSE_REASONS.INTERRUPTED, + onNext: true, + }); + }; + this.dbg.onEnterFrame = onEnterFrame; + return {}; + } + + // If execution should pause immediately, just put ourselves in the paused + // state. + const packet = this._paused(); + if (!packet) { + return { error: "notInterrupted" }; + } + packet.why = { type: PAUSE_REASONS.INTERRUPTED, onNext: false }; + + // Send the response to the interrupt request now (rather than + // returning it), because we're going to start a nested event loop + // here. + this.conn.send({ from: this.actorID, type: "interrupt" }); + this.emit("paused", packet); + + // Start a nested event loop. + this._nestedEventLoop.enter(); + + // We already sent a response to this request, don't send one + // now. + return null; + } catch (e) { + reportException("DBG-SERVER", e); + return { error: "notInterrupted", message: e.toString() }; + } + } + + _paused(frame) { + // We don't handle nested pauses correctly. Don't try - if we're + // paused, just continue running whatever code triggered the pause. + // We don't want to actually have nested pauses (although we + // have nested event loops). If code runs in the debuggee during + // a pause, it should cause the actor to resume (dropping + // pause-lifetime actors etc) and then repause when complete. + + if (this.state === STATES.PAUSED) { + return undefined; + } + + this._state = STATES.PAUSED; + + // Clear stepping hooks. + this.dbg.onEnterFrame = undefined; + this._requestedFrameRestart = null; + this._clearSteppingHooks(); + + // Create the actor pool that will hold the pause actor and its + // children. + assert(!this._pausePool, "No pause pool should exist yet"); + this._pausePool = new Pool(this.conn, "pause"); + + // Give children of the pause pool a quick link back to the + // thread... + this._pausePool.threadActor = this; + + // Create the pause actor itself... + assert(!this._pauseActor, "No pause actor should exist yet"); + this._pauseActor = new PauseActor(this._pausePool); + this._pausePool.manage(this._pauseActor); + + // Update the list of frames. + this._updateFrames(); + + // Send off the paused packet and spin an event loop. + const packet = { + actor: this._pauseActor.actorID, + }; + + if (frame) { + packet.frame = this._createFrameActor(frame); + } + + return packet; + } + + /** + * Expire frame actors for frames that are no longer on the current stack. + */ + _updateFrames() { + // Create the actor pool that will hold the still-living frames. + const framesPool = new Pool(this.conn, "frames"); + const frameList = []; + + for (const frameActor of this._frameActors) { + if (frameActor.frame.onStack) { + framesPool.manage(frameActor); + frameList.push(frameActor); + } + } + + // Remove the old frame actor pool, this will expire + // any actors that weren't added to the new pool. + if (this._framesPool) { + this._framesPool.destroy(); + } + + this._frameActors = frameList; + this._framesPool = framesPool; + } + + _createFrameActor(frame, depth) { + let actor = this._frameActorMap.get(frame); + if (!actor || actor.isDestroyed()) { + actor = new FrameActor(frame, this, depth); + this._frameActors.push(actor); + this._framesPool.manage(actor); + + this._frameActorMap.set(frame, actor); + } + return actor; + } + + /** + * Create and return an environment actor that corresponds to the provided + * Debugger.Environment. + * @param Debugger.Environment environment + * The lexical environment we want to extract. + * @param object pool + * The pool where the newly-created actor will be placed. + * @return The EnvironmentActor for environment or undefined for host + * functions or functions scoped to a non-debuggee global. + */ + createEnvironmentActor(environment, pool) { + if (!environment) { + return undefined; + } + + if (environment.actor) { + return environment.actor; + } + + const actor = new EnvironmentActor(environment, this); + pool.manage(actor); + environment.actor = actor; + + return actor; + } + + /** + * Create a grip for the given debuggee object. + * + * @param value Debugger.Object + * The debuggee object value. + * @param pool Pool + * The actor pool where the new object actor will be added. + */ + objectGrip(value, pool) { + if (!pool.objectActors) { + pool.objectActors = new WeakMap(); + } + + if (pool.objectActors.has(value)) { + return pool.objectActors.get(value).form(); + } + + if (this.threadLifetimePool.objectActors.has(value)) { + return this.threadLifetimePool.objectActors.get(value).form(); + } + + const actor = new PauseScopedObjectActor( + value, + { + thread: this, + getGripDepth: () => this._gripDepth, + incrementGripDepth: () => this._gripDepth++, + decrementGripDepth: () => this._gripDepth--, + createValueGrip: v => { + if (this._pausePool) { + return createValueGrip(v, this._pausePool, this.pauseObjectGrip); + } + + return createValueGrip(v, this.threadLifetimePool, this.objectGrip); + }, + createEnvironmentActor: (e, p) => this.createEnvironmentActor(e, p), + promote: () => this.threadObjectGrip(actor), + isThreadLifetimePool: () => + actor.getParent() !== this.threadLifetimePool, + }, + this.conn + ); + pool.manage(actor); + pool.objectActors.set(value, actor); + return actor.form(); + } + + /** + * Create a grip for the given debuggee object with a pause lifetime. + * + * @param value Debugger.Object + * The debuggee object value. + */ + pauseObjectGrip(value) { + if (!this._pausePool) { + throw new Error("Object grip requested while not paused."); + } + + return this.objectGrip(value, this._pausePool); + } + + /** + * Extend the lifetime of the provided object actor to thread lifetime. + * + * @param actor object + * The object actor. + */ + threadObjectGrip(actor) { + this.threadLifetimePool.manage(actor); + this.threadLifetimePool.objectActors.set(actor.obj, actor); + } + + _onWindowReady({ isTopLevel, isBFCache, window }) { + // Note that this code relates to the disabling of Debugger API from will-navigate listener. + // And should only be triggered when the target actor doesn't follow WindowGlobal lifecycle. + // i.e. when the Thread Actor manages more than one top level WindowGlobal. + if (isTopLevel && this.state != STATES.DETACHED) { + this.sourcesManager.reset(); + this.clearDebuggees(); + this.dbg.enable(); + // Update the global no matter if the debugger is on or off, + // otherwise the global will be wrong when enabled later. + this.global = window; + } + + // Refresh the debuggee list when a new window object appears (top window or + // iframe). + if (this.attached) { + this.dbg.addDebuggees(); + } + + // BFCache navigations reuse old sources, so send existing sources to the + // client instead of waiting for onNewScript debugger notifications. + if (isBFCache) { + this.addAllSources(); + } + } + + _onWillNavigate({ isTopLevel }) { + if (!isTopLevel) { + return; + } + + // Proceed normally only if the debuggee is not paused. + if (this.state == STATES.PAUSED) { + // If we were paused while navigating to a new page, + // we resume previous page execution, so that the document can be sucessfully unloaded. + // And we disable the Debugger API, so that we do not hit any breakpoint or trigger any + // thread actor feature. We will re-enable it just before the next page starts loading, + // from window-ready listener. That's for when the target doesn't follow WindowGlobal + // lifecycle. + // When the target follows the WindowGlobal lifecycle, we will stiff resume and disable + // this thread actor. It will soon be destroyed. And a new target will pick up + // the next WindowGlobal and spawn a new Debugger API, via ThreadActor.attach(). + this.doResume(); + this.dbg.disable(); + } + + this.removeAllWatchpoints(); + this.disableAllBreakpoints(); + this.dbg.onEnterFrame = undefined; + } + + _onNavigate() { + if (this.state == STATES.RUNNING) { + this.dbg.enable(); + } + } + + // JS Debugger API hooks. + pauseForMutationBreakpoint( + mutationType, + targetNode, + ancestorNode, + action = "" // "add" or "remove" + ) { + if ( + !["subtreeModified", "nodeRemoved", "attributeModified"].includes( + mutationType + ) + ) { + throw new Error("Unexpected mutation breakpoint type"); + } + + if (this.shouldSkipAnyBreakpoint) { + return undefined; + } + + const frame = this.dbg.getNewestFrame(); + if (!frame) { + return undefined; + } + + if (this.sourcesManager.isFrameBlackBoxed(frame)) { + return undefined; + } + + const global = (targetNode.ownerDocument || targetNode).defaultView; + assert(global && this.dbg.hasDebuggee(global)); + + const targetObj = this.dbg + .makeGlobalObjectReference(global) + .makeDebuggeeValue(targetNode); + + let ancestorObj = null; + if (ancestorNode) { + ancestorObj = this.dbg + .makeGlobalObjectReference(global) + .makeDebuggeeValue(ancestorNode); + } + + return this._pauseAndRespond( + frame, + { + type: PAUSE_REASONS.MUTATION_BREAKPOINT, + mutationType, + message: `DOM Mutation: '${mutationType}'`, + }, + pkt => { + // We have to add this here because `_pausePool` is `null` beforehand. + pkt.why.nodeGrip = this.objectGrip(targetObj, this._pausePool); + pkt.why.ancestorGrip = ancestorObj + ? this.objectGrip(ancestorObj, this._pausePool) + : null; + pkt.why.action = action; + return pkt; + } + ); + } + + /** + * A function that the engine calls when a debugger statement has been + * executed in the specified frame. + * + * @param frame Debugger.Frame + * The stack frame that contained the debugger statement. + */ + onDebuggerStatement(frame) { + // Don't pause if: + // 1. breakpoints are disabled + // 2. we have not moved since the last pause + // 3. the source is blackboxed + // 4. there is a breakpoint at the same location + if ( + this.shouldSkipAnyBreakpoint || + !this.hasMoved(frame, "debuggerStatement") || + this.sourcesManager.isFrameBlackBoxed(frame) || + this.atBreakpointLocation(frame) + ) { + return undefined; + } + + return this._pauseAndRespond(frame, { + type: PAUSE_REASONS.DEBUGGER_STATEMENT, + }); + } + + skipBreakpoints(skip) { + this._options.skipBreakpoints = skip; + return { skip }; + } + + // Bug 1686485 is meant to remove usages of this request + // in favor direct call to `reconfigure` + pauseOnExceptions(pauseOnExceptions, ignoreCaughtExceptions) { + this.reconfigure({ + pauseOnExceptions, + ignoreCaughtExceptions, + }); + return {}; + } + + /** + * A function that the engine calls when an exception has been thrown and has + * propagated to the specified frame. + * + * @param youngestFrame Debugger.Frame + * The youngest remaining stack frame. + * @param value object + * The exception that was thrown. + */ + _onExceptionUnwind(youngestFrame, value) { + // Ignore any reported exception if we are already paused + if (this.isPaused()) { + return undefined; + } + + // Ignore shouldSkipAnyBreakpoint if we are explicitly requested to do so. + // Typically, when we are evaluating conditional breakpoints, we want to report any exception. + if ( + this.shouldSkipAnyBreakpoint && + !this.insideClientEvaluation?.reportExceptionsWhenBreaksAreDisabled + ) { + return undefined; + } + + let willBeCaught = false; + for (let frame = youngestFrame; frame != null; frame = frame.older) { + if (frame.script.isInCatchScope(frame.offset)) { + willBeCaught = true; + break; + } + } + + if (willBeCaught && this._options.ignoreCaughtExceptions) { + return undefined; + } + + if ( + this._handledFrameExceptions.has(youngestFrame) && + this._handledFrameExceptions.get(youngestFrame) === value + ) { + return undefined; + } + + // NS_ERROR_NO_INTERFACE exceptions are a special case in browser code, + // since they're almost always thrown by QueryInterface functions, and + // handled cleanly by native code. + if (!isWorker && value == Cr.NS_ERROR_NO_INTERFACE) { + return undefined; + } + + // Don't pause on exceptions thrown while inside an evaluation being done on + // behalf of the client. + if (this.insideClientEvaluation) { + return undefined; + } + + if (this.sourcesManager.isFrameBlackBoxed(youngestFrame)) { + return undefined; + } + + // Now that we've decided to pause, ignore this exception if it's thrown by + // any older frames. + for (let frame = youngestFrame.older; frame != null; frame = frame.older) { + this._handledFrameExceptions.set(frame, value); + } + + try { + const packet = this._paused(youngestFrame); + if (!packet) { + return undefined; + } + + packet.why = { + type: PAUSE_REASONS.EXCEPTION, + exception: createValueGrip(value, this._pausePool, this.objectGrip), + }; + this.emit("paused", packet); + + this._nestedEventLoop.enter(); + } catch (e) { + reportException("TA_onExceptionUnwind", e); + } + + return undefined; + } + + /** + * A function that the engine calls when a new script has been loaded. + * + * @param script Debugger.Script + * The source script that has been loaded into a debuggee compartment. + */ + onNewScript(script) { + this._addSource(script.source); + + this._maybeTrackFirstStatementBreakpoint(script); + } + + /** + * A function called when there's a new source from a thread actor's sources. + * Emits `newSource` on the thread actor. + * + * @param {SourceActor} source + */ + onNewSourceEvent(source) { + // When this target is supported by the Watcher Actor, + // and we listen to SOURCE, we avoid emitting the newSource RDP event + // as it would be duplicated with the Resource/watchResources API. + // Could probably be removed once bug 1680280 is fixed. + if (!this._shouldEmitNewSource) { + return; + } + + // Bug 1516197: New sources are likely detected due to either user + // interaction on the page, or devtools requests sent to the server. + // We use executeSoon because we don't want to block those operations + // by sending packets in the middle of them. + DevToolsUtils.executeSoon(() => { + if (this.isDestroyed()) { + return; + } + this.emit("newSource", { + source: source.form(), + }); + }); + } + + // API used by the Watcher Actor to disable the newSource events + // Could probably be removed once bug 1680280 is fixed. + _shouldEmitNewSource = true; + disableNewSourceEvents() { + this._shouldEmitNewSource = false; + } + + /** + * Filtering function to filter out sources for which we don't want to notify/create + * source actors + * + * @param {Debugger.Source} source + * The source to accept or ignore + * @param Boolean + * True, if we want to create a source actor. + */ + _acceptSource(source) { + // We have some spurious source created by ExtensionContent.sys.mjs when debugging tabs. + // These sources are internal stuff injected by WebExt codebase to implement content + // scripts. We can't easily ignore them from Debugger API, so ignore them + // when debugging a tab (i.e. browser-element). As we still want to debug them + // from the browser toolbox. + if ( + this._parent.sessionContext.type == "browser-element" && + source.url.endsWith("ExtensionContent.sys.mjs") + ) { + return false; + } + + return true; + } + + /** + * Add the provided source to the server cache. + * + * @param aSource Debugger.Source + * The source that will be stored. + */ + _addSource(source) { + if (!this._acceptSource(source)) { + return; + } + + // Preloaded WebExtension content scripts may be cached internally by + // ExtensionContent.jsm and ThreadActor would ignore them on a page reload + // because it finds them in the _debuggerSourcesSeen WeakSet, + // and so we also need to be sure that there is still a source actor for the source. + let sourceActor; + if ( + this._debuggerSourcesSeen.has(source) && + this.sourcesManager.hasSourceActor(source) + ) { + sourceActor = this.sourcesManager.getSourceActor(source); + sourceActor.resetDebuggeeScripts(); + } else { + sourceActor = this.sourcesManager.createSourceActor(source); + } + + const sourceUrl = sourceActor.url; + if (this._onLoadBreakpointURLs.has(sourceUrl)) { + // Immediately set a breakpoint on first line + // (note that this is only used by `./mach xpcshell-test --jsdebugger`) + this.setBreakpoint({ sourceUrl, line: 1 }, {}); + // But also query asynchronously the first really breakable line + // as the first may not be valid and won't break. + (async () => { + const [firstLine] = await sourceActor.getBreakableLines(); + if (firstLine != 1) { + this.setBreakpoint({ sourceUrl, line: firstLine }, {}); + } + })(); + } + + const bpActors = this.breakpointActorMap + .findActors() + .filter( + actor => + actor.location.sourceUrl && actor.location.sourceUrl == sourceUrl + ); + + for (const actor of bpActors) { + sourceActor.applyBreakpoint(actor); + } + + this._debuggerSourcesSeen.add(source); + } + + /** + * Create a new source by refetching the specified URL and instantiating all + * sources that were found in the result. + * + * @param url The URL string to fetch. + * @param existingInlineSources The inline sources for the URL the debugger knows about + * already, and that we shouldn't re-create (only used when + * url content type is text/html). + */ + async _resurrectSource(url, existingInlineSources) { + let { content, contentType, sourceMapURL } = + await this.sourcesManager.urlContents( + url, + /* partial */ false, + /* canUseCache */ true + ); + + // Newlines in all sources should be normalized. Do this with HTML content + // to simplify the comparisons below. + content = content.replace(/\r\n?|\u2028|\u2029/g, "\n"); + + if (contentType == "text/html") { + // HTML files can contain any number of inline sources. We have to find + // all the inline sources and their start line without running any of the + // scripts on the page. The approach used here is approximate. + if (!this._parent.window) { + return; + } + + // Find the offsets in the HTML at which inline scripts might start. + const scriptTagMatches = content.matchAll(/<script[^>]*>/gi); + const scriptStartOffsets = [...scriptTagMatches].map( + rv => rv.index + rv[0].length + ); + + // Find the script tags in this HTML page by parsing a new document from + // the contentand looking for its script elements. + const document = new DOMParser().parseFromString(content, "text/html"); + + // For each inline source found, see if there is a start offset for what + // appears to be a script tag, whose contents match the inline source. + [...document.scripts].forEach(script => { + const text = script.innerText; + + // We only want to handle inline scripts + if (script.src) { + return; + } + + // Don't create source for empty script tag + if (!text.trim()) { + return; + } + + const scriptStartOffsetIndex = scriptStartOffsets.findIndex( + offset => content.substring(offset, offset + text.length) == text + ); + // Bail if we couldn't find the start offset for the script + if (scriptStartOffsetIndex == -1) { + return; + } + + const scriptStartOffset = scriptStartOffsets[scriptStartOffsetIndex]; + // Remove the offset from the array to mitigate any issue we might with scripts + // sharing the same text content. + scriptStartOffsets.splice(scriptStartOffsetIndex, 1); + + const allLineBreaks = [ + ...content.substring(0, scriptStartOffset).matchAll("\n"), + ]; + const startLine = 1 + allLineBreaks.length; + // NOTE: Debugger.Source.prototype.startColumn is 1-based. + // Create 1-based column here for the following comparison, + // and also the createSource call below. + const startColumn = + 1 + + scriptStartOffset - + (allLineBreaks.length ? allLineBreaks.at(-1).index - 1 : 0); + + // Don't create a source if we already found one for this script + if ( + existingInlineSources.find( + source => + source.startLine == startLine && source.startColumn == startColumn + ) + ) { + return; + } + + try { + const global = this.dbg.getDebuggees()[0]; + // NOTE: Debugger.Object.prototype.createSource takes 1-based column. + this._addSource( + global.createSource({ + text, + url, + startLine, + startColumn, + isScriptElement: true, + }) + ); + } catch (e) { + // Ignore parse errors. + } + }); + + // If no scripts were found, we might have an inaccurate content type and + // the file is actually JavaScript. Fall through and add the entire file + // as the source. + if (document.scripts.length) { + return; + } + } + + // Other files should only contain javascript, so add the file contents as + // the source itself. + try { + const global = this.dbg.getDebuggees()[0]; + this._addSource( + global.createSource({ + text: content, + url, + startLine: 1, + sourceMapURL, + }) + ); + } catch (e) { + // Ignore parse errors. + } + } + + dumpThread() { + return { + pauseOnExceptions: this._options.pauseOnExceptions, + ignoreCaughtExceptions: this._options.ignoreCaughtExceptions, + logEventBreakpoints: this._options.logEventBreakpoints, + skipBreakpoints: this.shouldSkipAnyBreakpoint, + breakpoints: this.breakpointActorMap.listKeys(), + }; + } + + // NOTE: dumpPools is defined in the Thread actor to avoid + // adding it to multiple target specs and actors. + dumpPools() { + return this.conn.dumpPools(); + } + + logLocation(prefix, frame) { + const loc = this.sourcesManager.getFrameLocation(frame); + dump(`${prefix} (${loc.line}, ${loc.column})\n`); + } +} + +exports.ThreadActor = ThreadActor; + +/** + * Creates a PauseActor. + * + * PauseActors exist for the lifetime of a given debuggee pause. Used to + * scope pause-lifetime grips. + * + * @param {Pool} pool: The actor pool created for this pause. + */ +function PauseActor(pool) { + this.pool = pool; +} + +PauseActor.prototype = { + typeName: "pause", +}; + +// Utility functions. + +/** + * Unwrap a global that is wrapped in a |Debugger.Object|, or if the global has + * become a dead object, return |undefined|. + * + * @param Debugger.Object wrappedGlobal + * The |Debugger.Object| which wraps a global. + * + * @returns {Object|undefined} + * Returns the unwrapped global object or |undefined| if unwrapping + * failed. + */ +exports.unwrapDebuggerObjectGlobal = wrappedGlobal => { + try { + // Because of bug 991399 we sometimes get nuked window references here. We + // just bail out in that case. + // + // Note that addon sandboxes have a DOMWindow as their prototype. So make + // sure that we can touch the prototype too (whatever it is), in case _it_ + // is it a nuked window reference. We force stringification to make sure + // that any dead object proxies make themselves known. + const global = wrappedGlobal.unsafeDereference(); + Object.getPrototypeOf(global) + ""; + return global; + } catch (e) { + return undefined; + } +}; diff --git a/devtools/server/actors/tracer.js b/devtools/server/actors/tracer.js new file mode 100644 index 0000000000..028d084584 --- /dev/null +++ b/devtools/server/actors/tracer.js @@ -0,0 +1,502 @@ +/* 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"; + +// Bug 1827382, as this module can be used from the worker thread, +// the following JSM may be loaded by the worker loader until +// we have proper support for ESM from workers. +const { + startTracing, + stopTracing, + addTracingListener, + removeTracingListener, + NEXT_INTERACTION_MESSAGE, +} = require("resource://devtools/server/tracer/tracer.jsm"); + +const { Actor } = require("resource://devtools/shared/protocol.js"); +const { tracerSpec } = require("resource://devtools/shared/specs/tracer.js"); + +const { throttle } = require("resource://devtools/shared/throttle.js"); + +const { + makeDebuggeeValue, + createValueGripForTarget, +} = require("devtools/server/actors/object/utils"); + +const { + TYPES, + getResourceWatcher, +} = require("resource://devtools/server/actors/resources/index.js"); +const { JSTRACER_TRACE } = TYPES; + +loader.lazyRequireGetter( + this, + "GeckoProfileCollector", + "resource://devtools/server/actors/utils/gecko-profile-collector.js", + true +); + +const LOG_METHODS = { + STDOUT: "stdout", + CONSOLE: "console", + PROFILER: "profiler", +}; +exports.LOG_METHODS = LOG_METHODS; +const VALID_LOG_METHODS = Object.values(LOG_METHODS); + +const CONSOLE_THROTTLING_DELAY = 250; + +class TracerActor extends Actor { + constructor(conn, targetActor) { + super(conn, tracerSpec); + this.targetActor = targetActor; + this.sourcesManager = this.targetActor.sourcesManager; + + this.throttledTraces = []; + // On workers, we don't have access to setTimeout and can't have throttling + this.throttleEmitTraces = isWorker + ? this.flushTraces.bind(this) + : throttle(this.flushTraces.bind(this), CONSOLE_THROTTLING_DELAY); + + this.geckoProfileCollector = new GeckoProfileCollector(); + } + + destroy() { + this.stopTracing(); + } + + getLogMethod() { + return this.logMethod; + } + + /** + * Toggle tracing JavaScript. + * Meant for the WebConsole command in order to pass advanced + * configuration directly to JavaScriptTracer class. + * + * @param {Object} options + * Options used to configure JavaScriptTracer. + * See `JavaScriptTracer.startTracing`. + * @return {Boolean} + * True if the tracer starts, or false if it was stopped. + */ + toggleTracing(options) { + if (!this.tracingListener) { + this.startTracing(options); + return true; + } + this.stopTracing(); + return false; + } + + /** + * Start tracing. + * + * @param {Object} options + * Options used to configure JavaScriptTracer. + * See `JavaScriptTracer.startTracing`. + */ + startTracing(options = {}) { + if (options.logMethod && !VALID_LOG_METHODS.includes(options.logMethod)) { + throw new Error( + `Invalid log method '${options.logMethod}'. Only supports: ${VALID_LOG_METHODS}` + ); + } + if (options.prefix && typeof options.prefix != "string") { + throw new Error("Invalid prefix, only support string type"); + } + if (options.maxDepth && typeof options.maxDepth != "number") { + throw new Error("Invalid max-depth, only support numbers"); + } + if (options.maxRecords && typeof options.maxRecords != "number") { + throw new Error("Invalid max-records, only support numbers"); + } + + // When tracing on next user interaction is enabled, + // disable logging from workers as this makes the tracer work + // against visible documents and is actived per document thread. + if (options.traceOnNextInteraction && isWorker) { + return; + } + + this.logMethod = options.logMethod || LOG_METHODS.STDOUT; + + if (this.logMethod == LOG_METHODS.PROFILER) { + this.geckoProfileCollector.start(); + } + + this.tracingListener = { + onTracingFrame: this.onTracingFrame.bind(this), + onTracingFrameExit: this.onTracingFrameExit.bind(this), + onTracingInfiniteLoop: this.onTracingInfiniteLoop.bind(this), + onTracingToggled: this.onTracingToggled.bind(this), + onTracingPending: this.onTracingPending.bind(this), + }; + addTracingListener(this.tracingListener); + this.traceValues = !!options.traceValues; + startTracing({ + global: this.targetActor.window || this.targetActor.workerGlobal, + prefix: options.prefix || "", + // Enable receiving the `currentDOMEvent` being passed to `onTracingFrame` + traceDOMEvents: true, + // Enable tracing function arguments as well as returned values + traceValues: !!options.traceValues, + // Enable tracing only on next user interaction + traceOnNextInteraction: !!options.traceOnNextInteraction, + // Notify about frame exit / function call returning + traceFunctionReturn: !!options.traceFunctionReturn, + // Ignore frames beyond the given depth + maxDepth: options.maxDepth, + // Stop the tracing after a number of top level frames + maxRecords: options.maxRecords, + }); + } + + stopTracing() { + if (!this.tracingListener) { + return; + } + // Remove before stopping to prevent receiving the stop notification + removeTracingListener(this.tracingListener); + this.tracingListener = null; + + stopTracing(); + this.logMethod = null; + } + + /** + * Queried by THREAD_STATE watcher to send the gecko profiler data + * as part of THREAD STATE "stop" resource. + * + * @return {Object} Gecko profiler profile object. + */ + getProfile() { + const profile = this.geckoProfileCollector.stop(); + // We only open the profile if it contains samples, otherwise it can crash the frontend. + if (profile.threads[0].samples.data.length) { + return profile; + } + return null; + } + + /** + * Be notified by the underlying JavaScriptTracer class + * in case it stops by itself, instead of being stopped when the Actor's stopTracing + * method is called by the user. + * + * @param {Boolean} enabled + * True if the tracer starts tracing, false it it stops. + * @param {String} reason + * Optional string to justify why the tracer stopped. + * @return {Boolean} + * Return true, if the JavaScriptTracer should log a message to stdout. + */ + onTracingToggled(enabled, reason) { + // stopTracing will clear `logMethod`, so compute this before calling it. + const shouldLogToStdout = this.logMethod == LOG_METHODS.STDOUT; + + if (!enabled) { + this.stopTracing(); + } + return shouldLogToStdout; + } + + /** + * Called when "trace on next user interaction" is enabled, to notify the user + * that the tracer is initialized but waiting for the user first input. + */ + onTracingPending() { + // Delegate to JavaScriptTracer to log to stdout + if (this.logMethod == LOG_METHODS.STDOUT) { + return true; + } + + if (this.logMethod == LOG_METHODS.CONSOLE) { + const consoleMessageWatcher = getResourceWatcher( + this.targetActor, + TYPES.CONSOLE_MESSAGE + ); + if (consoleMessageWatcher) { + consoleMessageWatcher.emitMessages([ + { + arguments: [NEXT_INTERACTION_MESSAGE], + styles: [], + level: "jstracer", + chromeContext: false, + timeStamp: ChromeUtils.dateNow(), + }, + ]); + } + return false; + } + return false; + } + + onTracingInfiniteLoop() { + if (this.logMethod == LOG_METHODS.STDOUT) { + return true; + } + if (this.logMethod == LOG_METHODS.PROFILER) { + this.geckoProfileCollector.stop(); + return true; + } + const consoleMessageWatcher = getResourceWatcher( + this.targetActor, + TYPES.CONSOLE_MESSAGE + ); + if (!consoleMessageWatcher) { + return true; + } + + const message = + "Looks like an infinite recursion? We stopped the JavaScript tracer, but code may still be running!"; + consoleMessageWatcher.emitMessages([ + { + arguments: [message], + styles: [], + level: "jstracer", + chromeContext: false, + timeStamp: ChromeUtils.dateNow(), + }, + ]); + + return false; + } + + /** + * Called by JavaScriptTracer class when a new JavaScript frame is executed. + * + * @param {Number} frameId + * Unique identifier for the current frame. + * This should match a frame notified via onTracingFrameExit. + * @param {Debugger.Frame} frame + * A descriptor object for the JavaScript frame. + * @param {Number} depth + * Represents the depth of the frame in the call stack. + * @param {String} formatedDisplayName + * A human readable name for the current frame. + * @param {String} prefix + * A string to be displayed as a prefix of any logged frame. + * @param {String} currentDOMEvent + * If this is a top level frame (depth==0), and we are currently processing + * a DOM Event, this will refer to the name of that DOM Event. + * Note that it may also refer to setTimeout and setTimeout callback calls. + * @return {Boolean} + * Return true, if the JavaScriptTracer should log the frame to stdout. + */ + onTracingFrame({ + frameId, + frame, + depth, + formatedDisplayName, + prefix, + currentDOMEvent, + }) { + const { script } = frame; + const { lineNumber, columnNumber } = script.getOffsetMetadata(frame.offset); + const url = script.source.url; + + // NOTE: Debugger.Script.prototype.getOffsetMetadata returns + // columnNumber in 1-based. + // Convert to 0-based, while keeping the wasm's column (1) as is. + // (bug 1863878) + const columnBase = script.format === "wasm" ? 0 : 1; + + // Ignore blackboxed sources + if ( + this.sourcesManager.isBlackBoxed( + url, + lineNumber, + columnNumber - columnBase + ) + ) { + return false; + } + + if (this.logMethod == LOG_METHODS.STDOUT) { + // By returning true, we let JavaScriptTracer class log the message to stdout. + return true; + } + + if (this.logMethod == LOG_METHODS.CONSOLE) { + // We may receive the currently processed DOM event (if this relates to one). + // In this case, log a preliminary message, which looks different to highlight it. + if (currentDOMEvent && depth == 0) { + // Create a JSTRACER_TRACE resource with a slightly different shape + this.throttledTraces.push({ + resourceType: JSTRACER_TRACE, + prefix, + timeStamp: ChromeUtils.dateNow(), + + eventName: currentDOMEvent, + }); + } + + let args = undefined; + // Log arguments, but only when this feature is enabled as it introduce + // some significant overhead in perf as well as memory as it may hold the objects in memory. + // Also prevent trying to log function call arguments if we aren't logging a frame + // with arguments (e.g. Debugger evaluation frames, when executing from the console) + if (this.traceValues && frame.arguments) { + args = []; + for (let arg of frame.arguments) { + // Debugger.Frame.arguments contains either a Debugger.Object or primitive object + if (arg?.unsafeDereference) { + arg = arg.unsafeDereference(); + } + // Instantiate a object actor so that the tools can easily inspect these objects + const dbgObj = makeDebuggeeValue(this.targetActor, arg); + args.push(createValueGripForTarget(this.targetActor, dbgObj)); + } + } + + // Create a message object that fits Console Message Watcher expectations + this.throttledTraces.push({ + resourceType: JSTRACER_TRACE, + prefix, + timeStamp: ChromeUtils.dateNow(), + + depth, + implementation: frame.implementation, + displayName: formatedDisplayName, + filename: url, + lineNumber, + columnNumber: columnNumber - columnBase, + sourceId: script.source.id, + args, + }); + this.throttleEmitTraces(); + } else if (this.logMethod == LOG_METHODS.PROFILER) { + this.geckoProfileCollector.addSample( + { + // formatedDisplayName has a lambda at the beginning, remove it. + name: formatedDisplayName.replace("λ ", ""), + url, + lineNumber, + columnNumber, + category: frame.implementation, + }, + depth + ); + } + + return false; + } + + /** + * Called by JavaScriptTracer class when a JavaScript frame exits (i.e. a function returns or throw). + * + * @param {Object} options + * @param {Number} options.frameId + * Unique identifier for the current frame. + * This should match a frame notified via onTracingFrame. + * @param {Debugger.Frame} options.frame + * A descriptor object for the JavaScript frame. + * @param {Number} options.depth + * Represents the depth of the frame in the call stack. + * @param {String} options.formatedDisplayName + * A human readable name for the current frame. + * @param {String} options.prefix + * A string to be displayed as a prefix of any logged frame. + * @param {String} options.why + * A string to explain why the function stopped. + * See tracer.jsm's FRAME_EXIT_REASONS. + * @param {Debugger.Object|primitive} options.rv + * The returned value. It can be the returned value, or the thrown exception. + * It is either a primitive object, otherwise it is a Debugger.Object for any other JS Object type. + * @return {Boolean} + * Return true, if the JavaScriptTracer should log the frame to stdout. + */ + onTracingFrameExit({ + frameId, + frame, + depth, + formatedDisplayName, + prefix, + why, + rv, + }) { + const { script } = frame; + const { lineNumber, columnNumber } = script.getOffsetMetadata(frame.offset); + const url = script.source.url; + + // NOTE: Debugger.Script.prototype.getOffsetMetadata returns + // columnNumber in 1-based. + // Convert to 0-based, while keeping the wasm's column (1) as is. + // (bug 1863878) + const columnBase = script.format === "wasm" ? 0 : 1; + + // Ignore blackboxed sources + if ( + this.sourcesManager.isBlackBoxed( + url, + lineNumber, + columnNumber - columnBase + ) + ) { + return false; + } + + if (this.logMethod == LOG_METHODS.STDOUT) { + // By returning true, we let JavaScriptTracer class log the message to stdout. + return true; + } + + if (this.logMethod == LOG_METHODS.CONSOLE) { + let returnedValue = undefined; + // Log arguments, but only when this feature is enabled as it introduce + // some significant overhead in perf as well as memory as it may hold the objects in memory. + if (this.traceValues) { + // Debugger.Frame.arguments contains either a Debugger.Object or primitive object + if (rv?.unsafeDereference) { + rv = rv.unsafeDereference(); + } + // Instantiate a object actor so that the tools can easily inspect these objects + const dbgObj = makeDebuggeeValue(this.targetActor, rv); + returnedValue = createValueGripForTarget(this.targetActor, dbgObj); + } + + // Create a message object that fits Console Message Watcher expectations + this.throttledTraces.push({ + resourceType: JSTRACER_TRACE, + prefix, + timeStamp: ChromeUtils.dateNow(), + + depth, + displayName: formatedDisplayName, + filename: url, + lineNumber, + columnNumber: columnNumber - columnBase, + sourceId: script.source.id, + + relatedTraceId: frameId, + returnedValue, + why, + }); + this.throttleEmitTraces(); + } else if (this.logMethod == LOG_METHODS.PROFILER) { + // For now, the profiler doesn't use this. + } + + return false; + } + + /** + * This method is throttled and will notify all pending traces to be logged in the console + * via the console message watcher. + */ + flushTraces() { + const traceWatcher = getResourceWatcher(this.targetActor, JSTRACER_TRACE); + // Ignore the request if the frontend isn't listening to traces for that target. + if (!traceWatcher) { + return; + } + const traces = this.throttledTraces; + this.throttledTraces = []; + + traceWatcher.emitTraces(traces); + } +} +exports.TracerActor = TracerActor; diff --git a/devtools/server/actors/utils/accessibility.js b/devtools/server/actors/utils/accessibility.js new file mode 100644 index 0000000000..ee8ee9ccd0 --- /dev/null +++ b/devtools/server/actors/utils/accessibility.js @@ -0,0 +1,103 @@ +/* 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"; + +loader.lazyRequireGetter( + this, + ["loadSheet", "removeSheet"], + "resource://devtools/shared/layout/utils.js", + true +); + +// Highlighter style used for preventing transitions and applying transparency +// when calculating colour contrast. +const HIGHLIGHTER_STYLES_SHEET = `data:text/css;charset=utf-8, +* { + transition: initial !important; +} + +:-moz-devtools-highlighted { + color: transparent !important; + text-shadow: none !important; +}`; + +/** + * Helper function that determines if nsIAccessible object is in defunct state. + * + * @param {nsIAccessible} accessible + * object to be tested. + * @return {Boolean} + * True if accessible object is defunct, false otherwise. + */ +function isDefunct(accessible) { + // If accessibility is disabled, safely assume that the accessible object is + // now dead. + if (!Services.appinfo.accessibilityEnabled) { + return true; + } + + let defunct = false; + + try { + const extraState = {}; + accessible.getState({}, extraState); + // extraState.value is a bitmask. We are applying bitwise AND to mask out + // irrelevant states. + defunct = !!(extraState.value & Ci.nsIAccessibleStates.EXT_STATE_DEFUNCT); + } catch (e) { + defunct = true; + } + + return defunct; +} + +/** + * Load highlighter style sheet used for preventing transitions and + * applying transparency when calculating colour contrast. + * + * @param {Window} win + * Window where highlighting happens. + */ +function loadSheetForBackgroundCalculation(win) { + loadSheet(win, HIGHLIGHTER_STYLES_SHEET); +} + +/** + * Unload highlighter style sheet used for preventing transitions + * and applying transparency when calculating colour contrast. + * + * @param {Window} win + * Window where highlighting was happenning. + */ +function removeSheetForBackgroundCalculation(win) { + removeSheet(win, HIGHLIGHTER_STYLES_SHEET); +} + +/** + * Get role attribute for an accessible object if specified for its + * corresponding DOMNode. + * + * @param {nsIAccessible} accessible + * Accessible for which to determine its role attribute value. + * + * @returns {null|String} + * Role attribute value if specified. + */ +function getAriaRoles(accessible) { + try { + return accessible.attributes.getStringProperty("xml-roles"); + } catch (e) { + // No xml-roles. nsPersistentProperties throws if the attribute for a key + // is not found. + } + + return null; +} + +exports.getAriaRoles = getAriaRoles; +exports.isDefunct = isDefunct; +exports.loadSheetForBackgroundCalculation = loadSheetForBackgroundCalculation; +exports.removeSheetForBackgroundCalculation = + removeSheetForBackgroundCalculation; diff --git a/devtools/server/actors/utils/actor-registry.js b/devtools/server/actors/utils/actor-registry.js new file mode 100644 index 0000000000..ae88c38c6b --- /dev/null +++ b/devtools/server/actors/utils/actor-registry.js @@ -0,0 +1,418 @@ +/* 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"; + +var gRegisteredModules = Object.create(null); + +const ActorRegistry = { + // Map of global actor names to actor constructors. + globalActorFactories: {}, + // Map of target-scoped actor names to actor constructors. + targetScopedActorFactories: {}, + init(connections) { + this._connections = connections; + }, + + /** + * Register a CommonJS module with the devtools server. + * @param id string + * The ID of a CommonJS module. + * The actor is going to be registered immediately, but loaded only + * when a client starts sending packets to an actor with the same id. + * + * @param options object + * An object with 3 mandatory attributes: + * - prefix (string): + * The prefix of an actor is used to compute: + * - the `actorID` of each new actor instance (ex: prefix1). (See Pool.manage) + * - the actor name in the listTabs request. Sending a listTabs + * request to the root actor returns actor IDs. IDs are in + * dictionaries, with actor names as keys and actor IDs as values. + * The actor name is the prefix to which the "Actor" string is + * appended. So for an actor with the `console` prefix, the actor + * name will be `consoleActor`. + * - constructor (string): + * the name of the exported symbol to be used as the actor + * constructor. + * - type (a dictionary of booleans with following attribute names): + * - "global" + * registers a global actor instance, if true. + * A global actor has the root actor as its parent. + * - "target" + * registers a target-scoped actor instance, if true. + * A new actor will be created for each target, such as a tab. + */ + registerModule(id, options) { + if (id in gRegisteredModules) { + return; + } + + if (!options) { + throw new Error( + "ActorRegistry.registerModule requires an options argument" + ); + } + const { prefix, constructor, type } = options; + if (typeof prefix !== "string") { + throw new Error( + `Lazy actor definition for '${id}' requires a string ` + + `'prefix' option.` + ); + } + if (typeof constructor !== "string") { + throw new Error( + `Lazy actor definition for '${id}' requires a string ` + + `'constructor' option.` + ); + } + if (!("global" in type) && !("target" in type)) { + throw new Error( + `Lazy actor definition for '${id}' requires a dictionary ` + + `'type' option whose attributes can be 'global' or 'target'.` + ); + } + const name = prefix + "Actor"; + const mod = { + id, + prefix, + constructorName: constructor, + type, + globalActor: type.global, + targetScopedActor: type.target, + }; + gRegisteredModules[id] = mod; + if (mod.targetScopedActor) { + this.addTargetScopedActor(mod, name); + } + if (mod.globalActor) { + this.addGlobalActor(mod, name); + } + }, + + /** + * Unregister a previously-loaded CommonJS module from the devtools server. + */ + unregisterModule(id) { + const mod = gRegisteredModules[id]; + if (!mod) { + throw new Error( + "Tried to unregister a module that was not previously registered." + ); + } + + // Lazy actors + if (mod.targetScopedActor) { + this.removeTargetScopedActor(mod); + } + if (mod.globalActor) { + this.removeGlobalActor(mod); + } + + delete gRegisteredModules[id]; + }, + + /** + * Install Firefox-specific actors. + * + * /!\ Be careful when adding a new actor, especially global actors. + * Any new global actor will be exposed and returned by the root actor. + */ + addBrowserActors() { + this.registerModule("devtools/server/actors/preference", { + prefix: "preference", + constructor: "PreferenceActor", + type: { global: true }, + }); + this.registerModule("devtools/server/actors/addon/addons", { + prefix: "addons", + constructor: "AddonsActor", + type: { global: true }, + }); + this.registerModule("devtools/server/actors/device", { + prefix: "device", + constructor: "DeviceActor", + type: { global: true }, + }); + this.registerModule("devtools/server/actors/heap-snapshot-file", { + prefix: "heapSnapshotFile", + constructor: "HeapSnapshotFileActor", + type: { global: true }, + }); + // Always register this as a global module, even while there is a pref turning + // on and off the other performance actor. This actor shouldn't conflict with + // the other one. These are also lazily loaded so there shouldn't be a performance + // impact. + this.registerModule("devtools/server/actors/perf", { + prefix: "perf", + constructor: "PerfActor", + type: { global: true }, + }); + /** + * Always register parent accessibility actor as a global module. This + * actor is responsible for all top level accessibility actor functionality + * that relies on the parent process. + */ + this.registerModule( + "devtools/server/actors/accessibility/parent-accessibility", + { + prefix: "parentAccessibility", + constructor: "ParentAccessibilityActor", + type: { global: true }, + } + ); + + this.registerModule("devtools/server/actors/screenshot", { + prefix: "screenshot", + constructor: "ScreenshotActor", + type: { global: true }, + }); + }, + + /** + * Install target-scoped actors. + */ + addTargetScopedActors() { + this.registerModule("devtools/server/actors/webconsole", { + prefix: "console", + constructor: "WebConsoleActor", + type: { target: true }, + }); + this.registerModule("devtools/server/actors/inspector/inspector", { + prefix: "inspector", + constructor: "InspectorActor", + type: { target: true }, + }); + this.registerModule("devtools/server/actors/style-sheets", { + prefix: "styleSheets", + constructor: "StyleSheetsActor", + type: { target: true }, + }); + this.registerModule("devtools/server/actors/memory", { + prefix: "memory", + constructor: "MemoryActor", + type: { target: true }, + }); + this.registerModule("devtools/server/actors/reflow", { + prefix: "reflow", + constructor: "ReflowActor", + type: { target: true }, + }); + this.registerModule("devtools/server/actors/css-properties", { + prefix: "cssProperties", + constructor: "CssPropertiesActor", + type: { target: true }, + }); + this.registerModule("devtools/server/actors/animation", { + prefix: "animations", + constructor: "AnimationsActor", + type: { target: true }, + }); + this.registerModule("devtools/server/actors/emulation/responsive", { + prefix: "responsive", + constructor: "ResponsiveActor", + type: { target: true }, + }); + this.registerModule( + "devtools/server/actors/addon/webextension-inspected-window", + { + prefix: "webExtensionInspectedWindow", + constructor: "WebExtensionInspectedWindowActor", + type: { target: true }, + } + ); + this.registerModule("devtools/server/actors/accessibility/accessibility", { + prefix: "accessibility", + constructor: "AccessibilityActor", + type: { target: true }, + }); + this.registerModule("devtools/server/actors/changes", { + prefix: "changes", + constructor: "ChangesActor", + type: { target: true }, + }); + this.registerModule("devtools/server/actors/manifest", { + prefix: "manifest", + constructor: "ManifestActor", + type: { target: true }, + }); + this.registerModule( + "devtools/server/actors/network-monitor/network-content", + { + prefix: "networkContent", + constructor: "NetworkContentActor", + type: { target: true }, + } + ); + this.registerModule("devtools/server/actors/screenshot-content", { + prefix: "screenshotContent", + constructor: "ScreenshotContentActor", + type: { target: true }, + }); + this.registerModule("devtools/server/actors/tracer", { + prefix: "tracer", + constructor: "TracerActor", + type: { target: true }, + }); + this.registerModule("devtools/server/actors/objects-manager", { + prefix: "objectsManager", + constructor: "ObjectsManagerActor", + type: { target: true }, + }); + }, + + /** + * Registers handlers for new target-scoped request types defined dynamically. + * + * Note that the name of the request type is not allowed to clash with existing protocol + * packet properties, like 'title', 'url' or 'actor', since that would break the protocol. + * + * @param options object + * - constructorName: (required) + * name of actor constructor, which is also used when removing the actor. + * One of the following: + * - id: + * module ID that contains the actor + * - constructorFun: + * a function to construct the actor + * @param name string + * The name of the new request type. + */ + addTargetScopedActor(options, name) { + if (!name) { + throw Error("addTargetScopedActor requires the `name` argument"); + } + if (["title", "url", "actor"].includes(name)) { + throw Error(name + " is not allowed"); + } + if (this.targetScopedActorFactories.hasOwnProperty(name)) { + throw Error(name + " already exists"); + } + this.targetScopedActorFactories[name] = { options, name }; + }, + + /** + * Unregisters the handler for the specified target-scoped request type. + * + * When unregistering an existing target-scoped actor, we remove the actor factory as + * well as all existing instances of the actor. + * + * @param actor object, string + * In case of object: + * The `actor` object being given to related addTargetScopedActor call. + * In case of string: + * The `name` string being given to related addTargetScopedActor call. + */ + removeTargetScopedActor(actorOrName) { + let name; + if (typeof actorOrName == "string") { + name = actorOrName; + } else { + const actor = actorOrName; + for (const factoryName in this.targetScopedActorFactories) { + const handler = this.targetScopedActorFactories[factoryName]; + if ( + handler.options.constructorName == actor.name || + handler.options.id == actor.id + ) { + name = factoryName; + break; + } + } + } + if (!name) { + return; + } + delete this.targetScopedActorFactories[name]; + for (const connID of Object.getOwnPropertyNames(this._connections)) { + // DevToolsServerConnection in child process don't have rootActor + if (this._connections[connID].rootActor) { + this._connections[connID].rootActor.removeActorByName(name); + } + } + }, + + /** + * Registers handlers for new browser-scoped request types defined dynamically. + * + * Note that the name of the request type is not allowed to clash with existing protocol + * packet properties, like 'from', 'tabs' or 'selected', since that would break the protocol. + * + * @param options object + * - constructorName: (required) + * name of actor constructor, which is also used when removing the actor. + * One of the following: + * - id: + * module ID that contains the actor + * - constructorFun: + * a function to construct the actor + * @param name string + * The name of the new request type. + */ + addGlobalActor(options, name) { + if (!name) { + throw Error("addGlobalActor requires the `name` argument"); + } + if (["from", "tabs", "selected"].includes(name)) { + throw Error(name + " is not allowed"); + } + if (this.globalActorFactories.hasOwnProperty(name)) { + throw Error(name + " already exists"); + } + this.globalActorFactories[name] = { options, name }; + }, + + /** + * Unregisters the handler for the specified browser-scoped request type. + * + * When unregistering an existing global actor, we remove the actor factory as well as + * all existing instances of the actor. + * + * @param actor object, string + * In case of object: + * The `actor` object being given to related addGlobalActor call. + * In case of string: + * The `name` string being given to related addGlobalActor call. + */ + removeGlobalActor(actorOrName) { + let name; + if (typeof actorOrName == "string") { + name = actorOrName; + } else { + const actor = actorOrName; + for (const factoryName in this.globalActorFactories) { + const handler = this.globalActorFactories[factoryName]; + if ( + handler.options.constructorName == actor.name || + handler.options.id == actor.id + ) { + name = factoryName; + break; + } + } + } + if (!name) { + return; + } + delete this.globalActorFactories[name]; + for (const connID of Object.getOwnPropertyNames(this._connections)) { + // DevToolsServerConnection in child process don't have rootActor + if (this._connections[connID].rootActor) { + this._connections[connID].rootActor.removeActorByName(name); + } + } + }, + + destroy() { + for (const id of Object.getOwnPropertyNames(gRegisteredModules)) { + this.unregisterModule(id); + } + gRegisteredModules = Object.create(null); + + this.globalActorFactories = {}; + this.targetScopedActorFactories = {}; + }, +}; + +exports.ActorRegistry = ActorRegistry; diff --git a/devtools/server/actors/utils/breakpoint-actor-map.js b/devtools/server/actors/utils/breakpoint-actor-map.js new file mode 100644 index 0000000000..cce32b2833 --- /dev/null +++ b/devtools/server/actors/utils/breakpoint-actor-map.js @@ -0,0 +1,84 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const { + BreakpointActor, +} = require("resource://devtools/server/actors/breakpoint.js"); + +/** + * A BreakpointActorMap is a map from locations to instances of BreakpointActor. + */ +class BreakpointActorMap { + constructor(threadActor) { + this._threadActor = threadActor; + this._actors = {}; + } + + // Get the key in the _actors table for a given breakpoint location. + // See also duplicate code in commands.js :( + _locationKey(location) { + const { sourceUrl, sourceId, line, column } = location; + return `${sourceUrl}:${sourceId}:${line}:${column}`; + } + + /** + * Return all BreakpointActors in this BreakpointActorMap. + */ + findActors() { + return Object.values(this._actors); + } + + listKeys() { + return Object.keys(this._actors); + } + + /** + * Return the BreakpointActor at the given location in this + * BreakpointActorMap. + * + * @param BreakpointLocation location + * The location for which the BreakpointActor should be returned. + * + * @returns BreakpointActor actor + * The BreakpointActor at the given location. + */ + getOrCreateBreakpointActor(location) { + const key = this._locationKey(location); + if (!this._actors[key]) { + this._actors[key] = new BreakpointActor(this._threadActor, location); + } + return this._actors[key]; + } + + get(location) { + const key = this._locationKey(location); + return this._actors[key]; + } + + /** + * Delete the BreakpointActor from the given location in this + * BreakpointActorMap. + * + * @param BreakpointLocation location + * The location from which the BreakpointActor should be deleted. + */ + deleteActor(location) { + const key = this._locationKey(location); + delete this._actors[key]; + } + + /** + * Unregister all currently active breakpoints. + */ + removeAllBreakpoints() { + for (const bpActor of Object.values(this._actors)) { + bpActor.removeScripts(); + } + this._actors = {}; + } +} + +exports.BreakpointActorMap = BreakpointActorMap; diff --git a/devtools/server/actors/utils/capture-screenshot.js b/devtools/server/actors/utils/capture-screenshot.js new file mode 100644 index 0000000000..e7b46620b2 --- /dev/null +++ b/devtools/server/actors/utils/capture-screenshot.js @@ -0,0 +1,200 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const { LocalizationHelper } = require("resource://devtools/shared/l10n.js"); + +const CONTAINER_FLASHING_DURATION = 500; +const STRINGS_URI = "devtools/shared/locales/screenshot.properties"; +const L10N = new LocalizationHelper(STRINGS_URI); + +// These values are used to truncate the resulting image if the captured area is bigger. +// This is to avoid failing to produce a screenshot at all. +// It is recommended to keep these values in sync with the corresponding screenshots addon +// values in /browser/extensions/screenshots/selector/uicontrol.js +const MAX_IMAGE_WIDTH = 10000; +const MAX_IMAGE_HEIGHT = 10000; + +/** + * This function is called to simulate camera effects + * @param {BrowsingContext} browsingContext: The browsing context associated with the + * browser element we want to animate. + */ +function simulateCameraFlash(browsingContext) { + // If there's no topFrameElement (it can happen if the screenshot is taken from the + // browser toolbox), use the top chrome window document element. + const node = + browsingContext.topFrameElement || + browsingContext.topChromeWindow.document.documentElement; + + if (!node) { + console.error( + "Can't find an element to play the camera flash animation on for the following browsing context:", + browsingContext + ); + return; + } + + // Don't take a screenshot if the user prefers reduced motion. + if (node.ownerGlobal.matchMedia("(prefers-reduced-motion)").matches) { + return; + } + + node.animate([{ opacity: 0 }, { opacity: 1 }], { + duration: CONTAINER_FLASHING_DURATION, + }); +} + +/** + * Take a screenshot of a browser element given its browsingContext. + * + * @param {Object} args + * @param {Number} args.delay: Number of seconds to wait before taking the screenshot + * @param {Object|null} args.rect: Object with left, top, width and height properties + * representing the rect **inside the browser element** that should + * be rendered. If null, the current viewport of the element will be rendered. + * @param {Boolean} args.fullpage: Should the screenshot be the height of the whole page + * @param {String} args.filename: Expected filename for the screenshot + * @param {Number} args.snapshotScale: Scale that will be used by `drawSnapshot` to take the screenshot. + * ⚠️ Note that the scale might be decreased if the resulting image would + * be too big to draw safely. A warning message will be returned if that's + * the case. + * @param {Number} args.fileScale: Scale of the exported file. Defaults to args.snapshotScale. + * @param {Boolean} args.disableFlash: Set to true to disable the flash animation when the + * screenshot is taken. + * @param {BrowsingContext} browsingContext + * @returns {Object} object with the following properties: + * - data {String}: The dataURL representing the screenshot + * - height {Number}: Height of the resulting screenshot + * - width {Number}: Width of the resulting screenshot + * - filename {String}: Filename of the resulting screenshot + * - messages {Array<Object{text, level}>}: An array of object representing the + * different messages and their level that should be displayed to the user. + */ +async function captureScreenshot(args, browsingContext) { + const messages = []; + + let filename = getFilename(args.filename); + + if (args.fullpage) { + filename = filename.replace(".png", "-fullpage.png"); + } + + let { left, top, width, height } = args.rect || {}; + + // Truncate the width and height if necessary. + if (width && (width > MAX_IMAGE_WIDTH || height > MAX_IMAGE_HEIGHT)) { + width = Math.min(width, MAX_IMAGE_WIDTH); + height = Math.min(height, MAX_IMAGE_HEIGHT); + messages.push({ + level: "warn", + text: L10N.getFormatStr("screenshotTruncationWarning", width, height), + }); + } + + let rect = null; + if (args.rect) { + rect = new globalThis.DOMRect( + Math.round(left), + Math.round(top), + Math.round(width), + Math.round(height) + ); + } + + const document = browsingContext.topChromeWindow.document; + const canvas = document.createElementNS( + "http://www.w3.org/1999/xhtml", + "canvas" + ); + + const drawToCanvas = async actualRatio => { + // Even after decreasing width, height and ratio, there may still be cases where the + // hardware fails at creating the image. Let's catch this so we can at least show an + // error message to the user. + try { + const snapshot = await browsingContext.currentWindowGlobal.drawSnapshot( + rect, + actualRatio, + "rgb(255,255,255)", + args.fullpage + ); + + const fileScale = args.fileScale || actualRatio; + const renderingWidth = (snapshot.width / actualRatio) * fileScale; + const renderingHeight = (snapshot.height / actualRatio) * fileScale; + canvas.width = renderingWidth; + canvas.height = renderingHeight; + width = renderingWidth; + height = renderingHeight; + const ctx = canvas.getContext("2d"); + ctx.drawImage(snapshot, 0, 0, renderingWidth, renderingHeight); + + // Bug 1574935 - Huge dimensions can trigger an OOM because multiple copies + // of the bitmap will exist in memory. Force the removal of the snapshot + // because it is no longer needed. + snapshot.close(); + + return canvas.toDataURL("image/png", ""); + } catch (e) { + return null; + } + }; + + const ratio = args.snapshotScale; + let data = await drawToCanvas(ratio); + if (!data && ratio > 1.0) { + // If the user provided DPR or the window.devicePixelRatio was higher than 1, + // try again with a reduced ratio. + messages.push({ + level: "warn", + text: L10N.getStr("screenshotDPRDecreasedWarning"), + }); + data = await drawToCanvas(1.0); + } + if (!data) { + messages.push({ + level: "error", + text: L10N.getStr("screenshotRenderingError"), + }); + } + + if (data && args.disableFlash !== true) { + simulateCameraFlash(browsingContext); + } + + return { + data, + height, + width, + filename, + messages, + }; +} + +exports.captureScreenshot = captureScreenshot; + +/** + * We may have a filename specified in args, or we might have to generate + * one. + */ +function getFilename(defaultName) { + // Create a name for the file if not present + if (defaultName) { + return defaultName; + } + + const date = new Date(); + const monthString = (date.getMonth() + 1).toString().padStart(2, "0"); + const dayString = date.getDate().toString().padStart(2, "0"); + const dateString = `${date.getFullYear()}-${monthString}-${dayString}`; + + const timeString = date.toTimeString().replace(/:/g, ".").split(" ")[0]; + + return ( + L10N.getFormatStr("screenshotGeneratedFilename", dateString, timeString) + + ".png" + ); +} diff --git a/devtools/server/actors/utils/css-grid-utils.js b/devtools/server/actors/utils/css-grid-utils.js new file mode 100644 index 0000000000..9631dcd800 --- /dev/null +++ b/devtools/server/actors/utils/css-grid-utils.js @@ -0,0 +1,60 @@ +/* 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"; + +/** + * Returns the grid fragment array with all the grid fragment data stringifiable. + * + * @param {Object} fragments + * Grid fragment object. + * @return {Array} representation with the grid fragment data stringifiable. + */ +function getStringifiableFragments(fragments = []) { + if (fragments[0] && Cu.isDeadWrapper(fragments[0])) { + return {}; + } + + return fragments.map(getStringifiableFragment); +} + +function getStringifiableFragment(fragment) { + return { + areas: getStringifiableAreas(fragment.areas), + cols: getStringifiableDimension(fragment.cols), + rows: getStringifiableDimension(fragment.rows), + }; +} + +function getStringifiableAreas(areas) { + return [...areas].map(getStringifiableArea); +} + +function getStringifiableDimension(dimension) { + return { + lines: [...dimension.lines].map(getStringifiableLine), + tracks: [...dimension.tracks].map(getStringifiableTrack), + }; +} + +function getStringifiableArea({ + columnEnd, + columnStart, + name, + rowEnd, + rowStart, + type, +}) { + return { columnEnd, columnStart, name, rowEnd, rowStart, type }; +} + +function getStringifiableLine({ breadth, names, number, start, type }) { + return { breadth, names, number, start, type }; +} + +function getStringifiableTrack({ breadth, start, state, type }) { + return { breadth, start, state, type }; +} + +exports.getStringifiableFragments = getStringifiableFragments; diff --git a/devtools/server/actors/utils/custom-formatters.js b/devtools/server/actors/utils/custom-formatters.js new file mode 100644 index 0000000000..e4ae20dad7 --- /dev/null +++ b/devtools/server/actors/utils/custom-formatters.js @@ -0,0 +1,499 @@ +/* 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"; + +loader.lazyRequireGetter( + this, + "createValueGripForTarget", + "resource://devtools/server/actors/object/utils.js", + true +); + +loader.lazyRequireGetter( + this, + "ObjectUtils", + "resource://devtools/server/actors/object/utils.js" +); + +const _invalidCustomFormatterHooks = new WeakSet(); +function addInvalidCustomFormatterHooks(hook) { + if (!hook) { + return; + } + + try { + _invalidCustomFormatterHooks.add(hook); + } catch (e) { + console.error("Couldn't add hook to the WeakSet", hook); + } +} + +// Custom exception used between customFormatterHeader and processFormatterForHeader +class FormatterError extends Error { + constructor(message, script) { + super(message); + this.script = script; + } +} + +/** + * Handle a protocol request to get the custom formatter header for an object. + * This is typically returned into ObjectActor's form if custom formatters are enabled. + * + * @param {ObjectActor} objectActor + * + * @returns {Object} Data related to the custom formatter header: + * - {boolean} useCustomFormatter, indicating if a custom formatter is used. + * - {Array} header JsonML of the output header. + * - {boolean} hasBody True in case the custom formatter has a body. + * - {Object} formatter The devtoolsFormatters item that was being used to format + * the object. + */ +function customFormatterHeader(objectActor) { + const rawValue = objectActor.rawValue(); + const globalWrapper = Cu.getGlobalForObject(rawValue); + const global = globalWrapper?.wrappedJSObject; + + // We expect a `devtoolsFormatters` global attribute and it to be an array + if (!global || !Array.isArray(global.devtoolsFormatters)) { + return null; + } + + const customFormatterTooDeep = + (objectActor.hooks.customFormatterObjectTagDepth || 0) > 20; + if (customFormatterTooDeep) { + logCustomFormatterError( + globalWrapper, + `Too deep hierarchy of inlined custom previews` + ); + return null; + } + + const targetActor = objectActor.thread._parent; + + const { + customFormatterConfigDbgObj: configDbgObj, + customFormatterObjectTagDepth, + } = objectActor.hooks; + + const valueDbgObj = objectActor.obj; + + for (const [ + customFormatterIndex, + formatter, + ] of global.devtoolsFormatters.entries()) { + // If the message for the erroneous formatter already got logged, + // skip logging it again. + if (_invalidCustomFormatterHooks.has(formatter)) { + continue; + } + + // TODO: Any issues regarding the implementation will be covered in https://bugzil.la/1776611. + try { + const rv = processFormatterForHeader({ + configDbgObj, + customFormatterObjectTagDepth, + formatter, + targetActor, + valueDbgObj, + }); + // Return the first valid formatter value + if (rv) { + return rv; + } + } catch (e) { + logCustomFormatterError( + globalWrapper, + e instanceof FormatterError + ? `devtoolsFormatters[${customFormatterIndex}].${e.message}` + : `devtoolsFormatters[${customFormatterIndex}] couldn't be run: ${e.message}`, + // If the exception is FormatterError, this comes with a script attribute + e.script + ); + addInvalidCustomFormatterHooks(formatter); + } + } + + return null; +} +exports.customFormatterHeader = customFormatterHeader; + +/** + * Handle one precise custom formatter. + * i.e. one element of the window.customFormatters Array. + * + * @param {Object} options + * @param {Debugger.Object} options.configDbgObj + * The Debugger.Object of the config object. + * @param {Number} options.customFormatterObjectTagDepth + * See buildJsonMlFromCustomFormatterHookResult JSDoc. + * @param {Object} options.formatter + * The raw formatter object (coming from "customFormatter" array). + * @param {BrowsingContextTargetActor} options.targetActor + * See buildJsonMlFromCustomFormatterHookResult JSDoc. + * @param {Debugger.Object} options.valueDbgObj + * The Debugger.Object of rawValue. + * + * @returns {Object} See customFormatterHeader jsdoc, it returns the same object. + */ +function processFormatterForHeader({ + configDbgObj, + customFormatterObjectTagDepth, + formatter, + targetActor, + valueDbgObj, +}) { + const headerType = typeof formatter?.header; + if (headerType !== "function") { + throw new FormatterError(`header should be a function, got ${headerType}`); + } + + // Call the formatter's header attribute, which should be a function. + const formatterHeaderDbgValue = ObjectUtils.makeDebuggeeValueIfNeeded( + valueDbgObj, + formatter.header + ); + const header = formatterHeaderDbgValue.call( + formatterHeaderDbgValue.boundThis, + valueDbgObj, + configDbgObj + ); + + // If the header returns null, the custom formatter isn't used for that object + if (header?.return === null) { + return null; + } + + // The header has to be an Array, all other cases are errors + if (header?.return?.class !== "Array") { + let errorMsg = ""; + if (header == null) { + errorMsg = `header was not run because it has side effects`; + } else if ("return" in header) { + let type = typeof header.return; + if (type === "object") { + type = header.return?.class; + } + errorMsg = `header should return an array, got ${type}`; + } else if ("throw" in header) { + errorMsg = `header threw: ${header.throw.getProperty("message")?.return}`; + } + + throw new FormatterError(errorMsg, formatterHeaderDbgValue?.script); + } + + const rawHeader = header.return.unsafeDereference(); + if (rawHeader.length === 0) { + throw new FormatterError( + `header returned an empty array`, + formatterHeaderDbgValue?.script + ); + } + + const sanitizedHeader = buildJsonMlFromCustomFormatterHookResult( + header.return, + customFormatterObjectTagDepth, + targetActor + ); + + let hasBody = false; + const hasBodyType = typeof formatter?.hasBody; + if (hasBodyType === "function") { + const formatterHasBodyDbgValue = ObjectUtils.makeDebuggeeValueIfNeeded( + valueDbgObj, + formatter.hasBody + ); + hasBody = formatterHasBodyDbgValue.call( + formatterHasBodyDbgValue.boundThis, + valueDbgObj, + configDbgObj + ); + + if (hasBody == null) { + throw new FormatterError( + `hasBody was not run because it has side effects`, + formatterHasBodyDbgValue?.script + ); + } else if ("throw" in hasBody) { + throw new FormatterError( + `hasBody threw: ${hasBody.throw.getProperty("message")?.return}`, + formatterHasBodyDbgValue?.script + ); + } + } else if (hasBodyType !== "undefined") { + throw new FormatterError( + `hasBody should be a function, got ${hasBodyType}` + ); + } + + return { + useCustomFormatter: true, + header: sanitizedHeader, + hasBody: !!hasBody?.return, + formatter, + }; +} + +/** + * Handle a protocol request to get the custom formatter body for an object + * + * @param {ObjectActor} objectActor + * @param {Object} formatter: The global.devtoolsFormatters entry that was used in customFormatterHeader + * for this object. + * + * @returns {Object} Data related to the custom formatter body: + * - {*} customFormatterBody Data of the custom formatter body. + */ +async function customFormatterBody(objectActor, formatter) { + const rawValue = objectActor.rawValue(); + const globalWrapper = Cu.getGlobalForObject(rawValue); + const global = globalWrapper?.wrappedJSObject; + + const customFormatterIndex = global.devtoolsFormatters.indexOf(formatter); + + const targetActor = objectActor.thread._parent; + try { + const { customFormatterConfigDbgObj, customFormatterObjectTagDepth } = + objectActor.hooks; + + if (_invalidCustomFormatterHooks.has(formatter)) { + return { + customFormatterBody: null, + }; + } + + const bodyType = typeof formatter.body; + if (bodyType !== "function") { + logCustomFormatterError( + globalWrapper, + `devtoolsFormatters[${customFormatterIndex}].body should be a function, got ${bodyType}` + ); + addInvalidCustomFormatterHooks(formatter); + return { + customFormatterBody: null, + }; + } + + const formatterBodyDbgValue = ObjectUtils.makeDebuggeeValueIfNeeded( + objectActor.obj, + formatter.body + ); + const body = formatterBodyDbgValue.call( + formatterBodyDbgValue.boundThis, + objectActor.obj, + customFormatterConfigDbgObj + ); + if (body?.return?.class === "Array") { + const rawBody = body.return.unsafeDereference(); + if (rawBody.length === 0) { + logCustomFormatterError( + globalWrapper, + `devtoolsFormatters[${customFormatterIndex}].body returned an empty array`, + formatterBodyDbgValue?.script + ); + addInvalidCustomFormatterHooks(formatter); + return { + customFormatterBody: null, + }; + } + + const customFormatterBodyJsonMl = + buildJsonMlFromCustomFormatterHookResult( + body.return, + customFormatterObjectTagDepth, + targetActor + ); + + return { + customFormatterBody: customFormatterBodyJsonMl, + }; + } + + let errorMsg = ""; + if (body == null) { + errorMsg = `devtoolsFormatters[${customFormatterIndex}].body was not run because it has side effects`; + } else if ("return" in body) { + let type = body.return === null ? "null" : typeof body.return; + if (type === "object") { + type = body.return?.class; + } + errorMsg = `devtoolsFormatters[${customFormatterIndex}].body should return an array, got ${type}`; + } else if ("throw" in body) { + errorMsg = `devtoolsFormatters[${customFormatterIndex}].body threw: ${ + body.throw.getProperty("message")?.return + }`; + } + + logCustomFormatterError( + globalWrapper, + errorMsg, + formatterBodyDbgValue?.script + ); + addInvalidCustomFormatterHooks(formatter); + } catch (e) { + logCustomFormatterError( + globalWrapper, + `Custom formatter with index ${customFormatterIndex} couldn't be run: ${e.message}` + ); + } + + return {}; +} +exports.customFormatterBody = customFormatterBody; + +/** + * Log an error caused by a fault in a custom formatter to the web console. + * + * @param {Window} window The related global where we should log this message. + * This should be the xray wrapper in order to expose windowGlobalChild. + * The unwrapped, unpriviledged won't expose this attribute. + * @param {string} errorMsg Message to log to the console. + * @param {DebuggerObject} [script] The script causing the error. + */ +function logCustomFormatterError(window, errorMsg, script) { + const scriptErrorClass = Cc["@mozilla.org/scripterror;1"]; + const scriptError = scriptErrorClass.createInstance(Ci.nsIScriptError); + const { url, source, startLine, startColumn } = script ?? {}; + + scriptError.initWithWindowID( + `Custom formatter failed: ${errorMsg}`, + url, + source, + startLine, + startColumn, + Ci.nsIScriptError.errorFlag, + "devtoolsFormatter", + window.windowGlobalChild.innerWindowId + ); + Services.console.logMessage(scriptError); +} + +/** + * Return a ready to use JsonMl object, safe to be sent to the client. + * This will replace JsonMl items with object reference, e.g `[ "object", { config: ..., object: ... } ]` + * with objectActor grip or "regular" JsonMl items (e.g. `["span", {style: "color: red"}, "this is", "an object"]`) + * if the referenced object gets custom formatted as well. + * + * @param {DebuggerObject} jsonMlDbgObj: The debugger object representing a jsonMl object returned + * by a custom formatter hook. + * @param {Number} customFormatterObjectTagDepth: See `processObjectTag`. + * @param {BrowsingContextTargetActor} targetActor: The actor that will be managing any + * created ObjectActor. + * @returns {Array|null} Returns null if the passed object is a not DebuggerObject representing an Array + */ +function buildJsonMlFromCustomFormatterHookResult( + jsonMlDbgObj, + customFormatterObjectTagDepth, + targetActor +) { + const tagName = jsonMlDbgObj.getProperty(0)?.return; + if (typeof tagName !== "string") { + const tagNameType = + tagName?.class || (tagName === null ? "null" : typeof tagName); + throw new Error(`tagName should be a string, got ${tagNameType}`); + } + + // Fetch the other items of the jsonMl + const rest = []; + const dbgObjLength = jsonMlDbgObj.getProperty("length")?.return || 0; + for (let i = 1; i < dbgObjLength; i++) { + rest.push(jsonMlDbgObj.getProperty(i)?.return); + } + + // The second item of the array can either be an object holding the attributes + // for the element or the first child element. + const attributesDbgObj = + rest[0] && rest[0].class === "Object" ? rest[0] : null; + const childrenDbgObj = attributesDbgObj ? rest.slice(1) : rest; + + // If the tagName is "object", we need to replace the entry with the grip representing + // this object (that may or may not be custom formatted). + if (tagName == "object") { + if (!attributesDbgObj) { + throw new Error(`"object" tag should have attributes`); + } + + // TODO: We could emit a warning if `childrenDbgObj` isn't empty as we're going to + // ignore them here. + return processObjectTag( + attributesDbgObj, + customFormatterObjectTagDepth, + targetActor + ); + } + + const jsonMl = [tagName, {}]; + if (attributesDbgObj) { + // For non "object" tags, we only care about the style property + jsonMl[1].style = attributesDbgObj.getProperty("style")?.return; + } + + // Handle children, which could be simple primitives or JsonML objects + for (const childDbgObj of childrenDbgObj) { + const childDbgObjType = typeof childDbgObj; + if (childDbgObj?.class === "Array") { + // `childDbgObj` probably holds a JsonMl item, sanitize it. + jsonMl.push( + buildJsonMlFromCustomFormatterHookResult( + childDbgObj, + customFormatterObjectTagDepth, + targetActor + ) + ); + } else if (childDbgObjType == "object" && childDbgObj !== null) { + // If we don't have an array, match Chrome implementation. + jsonMl.push("[object Object]"); + } else { + // Here `childDbgObj` is a primitive. Create a grip so we can handle all the types + // we can stringify easily (e.g. `undefined`, `bigint`, …). + const grip = createValueGripForTarget(targetActor, childDbgObj); + if (grip !== null) { + jsonMl.push(grip); + } + } + } + return jsonMl; +} + +/** + * Return a ready to use JsonMl object, safe to be sent to the client. + * This will replace JsonMl items with object reference, e.g `[ "object", { config: ..., object: ... } ]` + * with objectActor grip or "regular" JsonMl items (e.g. `["span", {style: "color: red"}, "this is", "an object"]`) + * if the referenced object gets custom formatted as well. + * + * @param {DebuggerObject} attributesDbgObj: The debugger object representing the "attributes" + * of a jsonMl item (e.g. the second item in the array). + * @param {Number} customFormatterObjectTagDepth: As "object" tag can reference custom + * formatted data, we track the number of time we go through this function + * from the "root" object so we don't have an infinite loop. + * @param {BrowsingContextTargetActor} targetActor: The actor that will be managin any + * created ObjectActor. + * @returns {Object} Returns a grip representing the underlying object + */ +function processObjectTag( + attributesDbgObj, + customFormatterObjectTagDepth, + targetActor +) { + const objectDbgObj = attributesDbgObj.getProperty("object")?.return; + if (typeof objectDbgObj == "undefined") { + throw new Error( + `attribute of "object" tag should have an "object" property` + ); + } + + // We need to replace the "object" tag with the actual `attribute.object` object, + // which might be also custom formatted. + // We create the grip so the custom formatter hooks can be called on this object, or + // we'd get an object grip that we can consume to display an ObjectInspector on the client. + const configRv = attributesDbgObj.getProperty("config"); + const grip = createValueGripForTarget(targetActor, objectDbgObj, 0, { + // Store the config so we can pass it when calling custom formatter hooks for this object. + customFormatterConfigDbgObj: configRv?.return, + customFormatterObjectTagDepth: (customFormatterObjectTagDepth || 0) + 1, + }); + + return grip; +} diff --git a/devtools/server/actors/utils/dbg-source.js b/devtools/server/actors/utils/dbg-source.js new file mode 100644 index 0000000000..9c4111dfaa --- /dev/null +++ b/devtools/server/actors/utils/dbg-source.js @@ -0,0 +1,97 @@ +/* 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"; + +/** + * Get the source text offset equivalent to a given line/column pair. + * + * @param {Debugger.Source} source + * @param {number} line The 1-based line number. + * @param {number} column The 0-based column number. + * @returns {number} The codepoint offset into the source's text. + */ +function findSourceOffset(source, line, column) { + const offsets = getSourceLineOffsets(source); + const offset = offsets[line - 1]; + + if (offset) { + // Make sure that columns that technically don't exist in the line text + // don't cause the offset to wrap to the next line. + return Math.min(offset.start + column, offset.textEnd); + } + + return line < 0 ? 0 : offsets[offsets.length - 1].end; +} +exports.findSourceOffset = findSourceOffset; + +const NEWLINE = /(\r?\n|\r|\u2028|\u2029)/g; +const SOURCE_OFFSETS = new WeakMap(); +/** + * Generate and cache line information for a given source to track what + * text offsets mark the start and end of lines. Each entry in the array + * represents a line in the source text. + * + * @param {Debugger.Source} source + * @returns {Array<{ start, textEnd, end }>} + * - start - The codepoint offset of the start of the line. + * - textEnd - The codepoint offset just after the last non-newline character. + * - end - The codepoint offset of the end of the line. This will be + * be the same as the 'start' value of the next offset object, + * and this includes the newlines for the line itself, where + * 'textEnd' excludes newline characters. + */ +function getSourceLineOffsets(source) { + const cached = SOURCE_OFFSETS.get(source); + if (cached) { + return cached; + } + + const { text } = source; + + const lines = text.split(NEWLINE); + + const offsets = []; + let offset = 0; + for (let i = 0; i < lines.length; i += 2) { + const line = lines[i]; + const start = offset; + + // Calculate the end codepoint offset. + let end = offset; + // eslint-disable-next-line no-unused-vars + for (const c of line) { + end++; + } + const textEnd = end; + + if (i + 1 < lines.length) { + end += lines[i + 1].length; + } + + offsets.push(Object.freeze({ start, textEnd, end })); + offset = end; + } + Object.freeze(offsets); + + SOURCE_OFFSETS.set(source, offsets); + return offsets; +} + +/** + * Given a target actor and a source platform internal ID, + * return the related SourceActor ID. + + * @param TargetActor targetActor + * The Target Actor from which this source originates. + * @param String id + * Platform Source ID + * @return String + * The SourceActor ID + */ +function getActorIdForInternalSourceId(targetActor, id) { + const actor = targetActor.sourcesManager.getSourceActorByInternalSourceId(id); + return actor ? actor.actorID : null; +} +exports.getActorIdForInternalSourceId = getActorIdForInternalSourceId; diff --git a/devtools/server/actors/utils/event-breakpoints.js b/devtools/server/actors/utils/event-breakpoints.js new file mode 100644 index 0000000000..a7752b8201 --- /dev/null +++ b/devtools/server/actors/utils/event-breakpoints.js @@ -0,0 +1,508 @@ +/* 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"; + +/** + * + * @param {String} groupID + * @param {String} eventType + * @param {Function} condition: Optional function that takes a Window as parameter. When + * passed, the event will only be included if the result of the function + * call is `true` (See `getAvailableEventBreakpoints`). + * @returns {Object} + */ +function generalEvent(groupID, eventType, condition) { + return { + id: `event.${groupID}.${eventType}`, + type: "event", + name: eventType, + message: `DOM '${eventType}' event`, + eventType, + filter: "general", + condition, + }; +} +function nodeEvent(groupID, eventType) { + return { + ...generalEvent(groupID, eventType), + filter: "node", + }; +} +function mediaNodeEvent(groupID, eventType) { + return { + ...generalEvent(groupID, eventType), + filter: "media", + }; +} +function globalEvent(groupID, eventType) { + return { + ...generalEvent(groupID, eventType), + message: `Global '${eventType}' event`, + filter: "global", + }; +} +function xhrEvent(groupID, eventType) { + return { + ...generalEvent(groupID, eventType), + message: `XHR '${eventType}' event`, + filter: "xhr", + }; +} + +function webSocketEvent(groupID, eventType) { + return { + ...generalEvent(groupID, eventType), + message: `WebSocket '${eventType}' event`, + filter: "websocket", + }; +} + +function workerEvent(eventType) { + return { + ...generalEvent("worker", eventType), + message: `Worker '${eventType}' event`, + filter: "worker", + }; +} + +function timerEvent(type, operation, name, notificationType) { + return { + id: `timer.${type}.${operation}`, + type: "simple", + name, + message: name, + notificationType, + }; +} + +function animationEvent(operation, name, notificationType) { + return { + id: `animationframe.${operation}`, + type: "simple", + name, + message: name, + notificationType, + }; +} + +const SCRIPT_FIRST_STATEMENT_BREAKPOINT = { + id: "script.source.firstStatement", + type: "script", + name: "Script First Statement", + message: "Script First Statement", +}; + +const AVAILABLE_BREAKPOINTS = [ + { + name: "Animation", + items: [ + animationEvent( + "request", + "Request Animation Frame", + "requestAnimationFrame" + ), + animationEvent( + "cancel", + "Cancel Animation Frame", + "cancelAnimationFrame" + ), + animationEvent( + "fire", + "Animation Frame fired", + "requestAnimationFrameCallback" + ), + ], + }, + { + name: "Clipboard", + items: [ + generalEvent("clipboard", "copy"), + generalEvent("clipboard", "cut"), + generalEvent("clipboard", "paste"), + generalEvent("clipboard", "beforecopy"), + generalEvent("clipboard", "beforecut"), + generalEvent("clipboard", "beforepaste"), + ], + }, + { + name: "Control", + items: [ + // The condition should be removed when "dom.element.popover.enabled" is removed + generalEvent("control", "beforetoggle", () => + Services.prefs.getBoolPref("dom.element.popover.enabled") + ), + generalEvent("control", "blur"), + generalEvent("control", "change"), + generalEvent("control", "focus"), + generalEvent("control", "focusin"), + generalEvent("control", "focusout"), + // The condition should be removed when "dom.element.invokers.enabled" is removed + generalEvent("control", "invoke", win => "InvokeEvent" in win), + generalEvent("control", "reset"), + generalEvent("control", "resize"), + generalEvent("control", "scroll"), + generalEvent("control", "scrollend"), + generalEvent("control", "select"), + generalEvent("control", "toggle"), + generalEvent("control", "submit"), + generalEvent("control", "zoom"), + ], + }, + { + name: "DOM Mutation", + items: [ + // Deprecated DOM events. + nodeEvent("dom-mutation", "DOMActivate"), + nodeEvent("dom-mutation", "DOMFocusIn"), + nodeEvent("dom-mutation", "DOMFocusOut"), + + // Standard DOM mutation events. + nodeEvent("dom-mutation", "DOMAttrModified"), + nodeEvent("dom-mutation", "DOMCharacterDataModified"), + nodeEvent("dom-mutation", "DOMNodeInserted"), + nodeEvent("dom-mutation", "DOMNodeInsertedIntoDocument"), + nodeEvent("dom-mutation", "DOMNodeRemoved"), + nodeEvent("dom-mutation", "DOMNodeRemovedIntoDocument"), + nodeEvent("dom-mutation", "DOMSubtreeModified"), + + // DOM load events. + nodeEvent("dom-mutation", "DOMContentLoaded"), + ], + }, + { + name: "Device", + items: [ + globalEvent("device", "deviceorientation"), + globalEvent("device", "devicemotion"), + ], + }, + { + name: "Drag and Drop", + items: [ + generalEvent("drag-and-drop", "drag"), + generalEvent("drag-and-drop", "dragstart"), + generalEvent("drag-and-drop", "dragend"), + generalEvent("drag-and-drop", "dragenter"), + generalEvent("drag-and-drop", "dragover"), + generalEvent("drag-and-drop", "dragleave"), + generalEvent("drag-and-drop", "drop"), + ], + }, + { + name: "Keyboard", + items: [ + generalEvent("keyboard", "beforeinput"), + generalEvent("keyboard", "input"), + generalEvent("keyboard", "keydown"), + generalEvent("keyboard", "keyup"), + generalEvent("keyboard", "keypress"), + generalEvent("keyboard", "compositionstart"), + generalEvent("keyboard", "compositionupdate"), + generalEvent("keyboard", "compositionend"), + ].filter(Boolean), + }, + { + name: "Load", + items: [ + globalEvent("load", "load"), + globalEvent("load", "beforeunload"), + globalEvent("load", "unload"), + globalEvent("load", "abort"), + globalEvent("load", "error"), + globalEvent("load", "hashchange"), + globalEvent("load", "popstate"), + ], + }, + { + name: "Media", + items: [ + mediaNodeEvent("media", "play"), + mediaNodeEvent("media", "pause"), + mediaNodeEvent("media", "playing"), + mediaNodeEvent("media", "canplay"), + mediaNodeEvent("media", "canplaythrough"), + mediaNodeEvent("media", "seeking"), + mediaNodeEvent("media", "seeked"), + mediaNodeEvent("media", "timeupdate"), + mediaNodeEvent("media", "ended"), + mediaNodeEvent("media", "ratechange"), + mediaNodeEvent("media", "durationchange"), + mediaNodeEvent("media", "volumechange"), + mediaNodeEvent("media", "loadstart"), + mediaNodeEvent("media", "progress"), + mediaNodeEvent("media", "suspend"), + mediaNodeEvent("media", "abort"), + mediaNodeEvent("media", "error"), + mediaNodeEvent("media", "emptied"), + mediaNodeEvent("media", "stalled"), + mediaNodeEvent("media", "loadedmetadata"), + mediaNodeEvent("media", "loadeddata"), + mediaNodeEvent("media", "waiting"), + ], + }, + { + name: "Mouse", + items: [ + generalEvent("mouse", "auxclick"), + generalEvent("mouse", "click"), + generalEvent("mouse", "dblclick"), + generalEvent("mouse", "mousedown"), + generalEvent("mouse", "mouseup"), + generalEvent("mouse", "mouseover"), + generalEvent("mouse", "mousemove"), + generalEvent("mouse", "mouseout"), + generalEvent("mouse", "mouseenter"), + generalEvent("mouse", "mouseleave"), + generalEvent("mouse", "mousewheel"), + generalEvent("mouse", "wheel"), + generalEvent("mouse", "contextmenu"), + ], + }, + { + name: "Pointer", + items: [ + generalEvent("pointer", "pointerover"), + generalEvent("pointer", "pointerout"), + generalEvent("pointer", "pointerenter"), + generalEvent("pointer", "pointerleave"), + generalEvent("pointer", "pointerdown"), + generalEvent("pointer", "pointerup"), + generalEvent("pointer", "pointermove"), + generalEvent("pointer", "pointercancel"), + generalEvent("pointer", "gotpointercapture"), + generalEvent("pointer", "lostpointercapture"), + ], + }, + { + name: "Script", + items: [SCRIPT_FIRST_STATEMENT_BREAKPOINT], + }, + { + name: "Timer", + items: [ + timerEvent("timeout", "set", "setTimeout", "setTimeout"), + timerEvent("timeout", "clear", "clearTimeout", "clearTimeout"), + timerEvent("timeout", "fire", "setTimeout fired", "setTimeoutCallback"), + timerEvent("interval", "set", "setInterval", "setInterval"), + timerEvent("interval", "clear", "clearInterval", "clearInterval"), + timerEvent( + "interval", + "fire", + "setInterval fired", + "setIntervalCallback" + ), + ], + }, + { + name: "Touch", + items: [ + generalEvent("touch", "touchstart"), + generalEvent("touch", "touchmove"), + generalEvent("touch", "touchend"), + generalEvent("touch", "touchcancel"), + ], + }, + { + name: "WebSocket", + items: [ + webSocketEvent("websocket", "open"), + webSocketEvent("websocket", "message"), + webSocketEvent("websocket", "error"), + webSocketEvent("websocket", "close"), + ], + }, + { + name: "Worker", + items: [ + workerEvent("message"), + workerEvent("messageerror"), + + // Service Worker events. + globalEvent("serviceworker", "fetch"), + ], + }, + { + name: "XHR", + items: [ + xhrEvent("xhr", "readystatechange"), + xhrEvent("xhr", "load"), + xhrEvent("xhr", "loadstart"), + xhrEvent("xhr", "loadend"), + xhrEvent("xhr", "abort"), + xhrEvent("xhr", "error"), + xhrEvent("xhr", "progress"), + xhrEvent("xhr", "timeout"), + ], + }, +]; + +const FLAT_EVENTS = []; +for (const category of AVAILABLE_BREAKPOINTS) { + for (const event of category.items) { + FLAT_EVENTS.push(event); + } +} +const EVENTS_BY_ID = {}; +for (const event of FLAT_EVENTS) { + if (EVENTS_BY_ID[event.id]) { + throw new Error("Duplicate event ID detected: " + event.id); + } + EVENTS_BY_ID[event.id] = event; +} + +const SIMPLE_EVENTS = {}; +const DOM_EVENTS = {}; +for (const eventBP of FLAT_EVENTS) { + if (eventBP.type === "simple") { + const { notificationType } = eventBP; + if (SIMPLE_EVENTS[notificationType]) { + throw new Error("Duplicate simple event"); + } + SIMPLE_EVENTS[notificationType] = eventBP.id; + } else if (eventBP.type === "event") { + const { eventType, filter } = eventBP; + + let targetTypes; + if (filter === "global") { + targetTypes = ["global"]; + } else if (filter === "xhr") { + targetTypes = ["xhr"]; + } else if (filter === "websocket") { + targetTypes = ["websocket"]; + } else if (filter === "worker") { + targetTypes = ["worker"]; + } else if (filter === "general") { + targetTypes = ["global", "node"]; + } else if (filter === "node" || filter === "media") { + targetTypes = ["node"]; + } else { + throw new Error("Unexpected filter type"); + } + + for (const targetType of targetTypes) { + let byEventType = DOM_EVENTS[targetType]; + if (!byEventType) { + byEventType = {}; + DOM_EVENTS[targetType] = byEventType; + } + + if (byEventType[eventType]) { + throw new Error("Duplicate dom event: " + eventType); + } + byEventType[eventType] = eventBP.id; + } + } else if (eventBP.type === "script") { + // Nothing to do. + } else { + throw new Error("Unknown type: " + eventBP.type); + } +} + +exports.eventBreakpointForNotification = eventBreakpointForNotification; +function eventBreakpointForNotification(dbg, notification) { + const notificationType = notification.type; + + if (notification.type === "domEvent") { + const domEventNotification = DOM_EVENTS[notification.targetType]; + if (!domEventNotification) { + return null; + } + + // The 'event' value is a cross-compartment wrapper for the DOM Event object. + // While we could use that directly in the main thread as an Xray wrapper, + // when debugging workers we can't, because it is an opaque wrapper. + // To make things work, we have to always interact with the Event object via + // the Debugger.Object interface. + const evt = dbg + .makeGlobalObjectReference(notification.global) + .makeDebuggeeValue(notification.event); + + const eventType = evt.getProperty("type").return; + const id = domEventNotification[eventType]; + if (!id) { + return null; + } + const eventBreakpoint = EVENTS_BY_ID[id]; + + if (eventBreakpoint.filter === "media") { + const currentTarget = evt.getProperty("currentTarget").return; + if (!currentTarget) { + return null; + } + + const nodeType = currentTarget.getProperty("nodeType").return; + const namespaceURI = currentTarget.getProperty("namespaceURI").return; + if ( + nodeType !== 1 /* ELEMENT_NODE */ || + namespaceURI !== "http://www.w3.org/1999/xhtml" + ) { + return null; + } + + const nodeName = currentTarget + .getProperty("nodeName") + .return.toLowerCase(); + if (nodeName !== "audio" && nodeName !== "video") { + return null; + } + } + + return id; + } + + return SIMPLE_EVENTS[notificationType] || null; +} + +exports.makeEventBreakpointMessage = makeEventBreakpointMessage; +function makeEventBreakpointMessage(id) { + return EVENTS_BY_ID[id].message; +} + +exports.firstStatementBreakpointId = firstStatementBreakpointId; +function firstStatementBreakpointId() { + return SCRIPT_FIRST_STATEMENT_BREAKPOINT.id; +} + +exports.eventsRequireNotifications = eventsRequireNotifications; +function eventsRequireNotifications(ids) { + for (const id of ids) { + const eventBreakpoint = EVENTS_BY_ID[id]; + + // Script events are implemented directly in the server and do not require + // notifications from Gecko, so there is no need to watch for them. + if (eventBreakpoint && eventBreakpoint.type !== "script") { + return true; + } + } + return false; +} + +exports.getAvailableEventBreakpoints = getAvailableEventBreakpoints; +/** + * Get all available event breakpoints + * + * @param {Window} window + * @returns {Array<Object>} An array containing object with 2 properties, an id and a name, + * representing the event. + */ +function getAvailableEventBreakpoints(window) { + const available = []; + for (const { name, items } of AVAILABLE_BREAKPOINTS) { + available.push({ + name, + events: items + .filter(item => !item.condition || item.condition(window)) + .map(item => ({ + id: item.id, + name: item.name, + })), + }); + } + return available; +} +exports.validateEventBreakpoint = validateEventBreakpoint; +function validateEventBreakpoint(id) { + return !!EVENTS_BY_ID[id]; +} diff --git a/devtools/server/actors/utils/event-loop.js b/devtools/server/actors/utils/event-loop.js new file mode 100644 index 0000000000..519d97ba7e --- /dev/null +++ b/devtools/server/actors/utils/event-loop.js @@ -0,0 +1,221 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const xpcInspector = require("xpcInspector"); + +/** + * An object that represents a nested event loop. It is used as the nest + * requestor with nsIJSInspector instances. + * + * @param ThreadActor thread + * The thread actor that is creating this nested event loop. + */ +class EventLoop { + constructor({ thread }) { + this._thread = thread; + + // A flag which is true in between the two calls to enter() and exit(). + this._entered = false; + // Another flag which is true only after having called exit(). + // Note that this EventLoop may still be paused and its enter() method + // still be on hold, if another EventLoop paused about this one. + this._resolved = false; + } + + /** + * This is meant for other thread actors, and is used by other thread actor's + * EventLoop's isTheLastPausedThreadActor() + */ + get thread() { + return this._thread; + } + /** + * Similarly, it will be used by another thread actor's EventLoop's enter() method + */ + get resolved() { + return this._resolved; + } + + /** + * Tells if the last thread actor to have paused (i.e. last EventLoop on the stack) + * is the current one. + * + * We avoid trying to exit this event loop, + * if another thread actor pile up a more recent one. + * All the event loops will be effectively exited when + * the thread actor which piled up the most recent nested event loop resumes. + * + * For convenience for the callsite, this will return true if nothing paused. + */ + isTheLastPausedThreadActor() { + if (xpcInspector.eventLoopNestLevel > 0) { + return xpcInspector.lastNestRequestor.thread === this._thread; + } + return true; + } + + /** + * Enter a new nested event loop. + */ + enter() { + if (this._entered) { + throw new Error( + "Can't enter an event loop that has already been entered!" + ); + } + + const preEnterData = this.preEnter(); + + this._entered = true; + // Note: next line will synchronously block the execution until exit() is being called. + // + // This enterNestedEventLoop is a bit magical and will break run-to-completion rule of JS. + // JS will become multi-threaded. Some other task may start running on change state + // while we are blocked on this enterNestedEventLoop function call. + // You may find valuable information about Tasks and Event Loops on: + // https://docs.google.com/document/d/1jTMd-H_BwH9_QNUDxPse80vq884_hMvd234lvE5gqY8/edit?usp=sharing + // + // Note #2: this will update xpcInspector.lastNestRequestor to this + xpcInspector.enterNestedEventLoop(this); + + // If this code runs, it means that we just exited this event loop and lastNestRequestor is no longer equal to this. + // + // We will now "recursively" exit all the resolved EventLoops which are blocked on `enterNestedEventLoop`: + // - if the new lastNestRequestor is resolved, request to exit it as well + // - this lastNestRequestor is another EventLoop instance + // - exiting this EventLoop unblocks its "enter" method and moves lastNestRequestor to the next requestor (if any) + // - we go back to the first step, and attempt to exit the new lastNestRequestor if it is resolved, etc... + if (xpcInspector.eventLoopNestLevel > 0) { + const { resolved } = xpcInspector.lastNestRequestor; + if (resolved) { + xpcInspector.exitNestedEventLoop(); + } + } + + this.postExit(preEnterData); + } + + /** + * Exit this nested event loop. + * + * @returns boolean + * True if we exited this nested event loop because it was on top of + * the stack, false if there is another nested event loop above this + * one that hasn't exited yet. + */ + exit() { + if (!this._entered) { + throw new Error("Can't exit an event loop before it has been entered!"); + } + this._entered = false; + this._resolved = true; + + // If another ThreadActor paused and spawn a new nested event loop after this one, + // let it resume the thread and ignore this call. + // The code calling exitNestedEventLoop from EventLoop.enter will resume execution, + // by seeing that resolved attribute that we just toggled is true. + // + // Note that ThreadActor.resume method avoids calling exit thanks to `isTheLastPausedThreadActor` + // So for all use requests to resume, the ThreadActor won't call exit until it is the last + // thread actor to have entered a nested EventLoop. + if (this === xpcInspector.lastNestRequestor) { + xpcInspector.exitNestedEventLoop(); + return true; + } + return false; + } + + /** + * Retrieve the list of all DOM Windows debugged by the current thread actor. + */ + getAllWindowDebuggees() { + return this._thread.dbg + .getDebuggees() + .filter(debuggee => { + // Select only debuggee that relates to windows + // e.g. ignore sandboxes, jsm and such + return debuggee.class == "Window"; + }) + .map(debuggee => { + // Retrieve the JS reference for these windows + return debuggee.unsafeDereference(); + }) + + .filter(window => { + // Ignore document which have already been nuked, + // so navigated to another location and removed from memory completely. + if (Cu.isDeadWrapper(window)) { + return false; + } + // Also ignore document which are closed, as trying to access window.parent or top would throw NS_ERROR_NOT_INITIALIZED + if (window.closed) { + return false; + } + // Ignore remote iframes, which will be debugged by another thread actor, + // running in the remote process + if (Cu.isRemoteProxy(window)) { + return false; + } + // Accept "top remote iframe document": + // document of iframe whose immediate parent is in another process. + if (Cu.isRemoteProxy(window.parent) && !Cu.isRemoteProxy(window)) { + return true; + } + + // If EFT is enabled, accept any same process document (top-level or iframe). + if (this.thread.getParent().ignoreSubFrames) { + return true; + } + + try { + // Ignore iframes running in the same process as their parent document, + // as they will be paused automatically when pausing their owner top level document + return window.top === window; + } catch (e) { + // Warn if this is throwing for an unknown reason, but suppress the + // exception regardless so that we can enter the nested event loop. + if (!/not initialized/.test(e)) { + console.warn(`Exception in getAllWindowDebuggees: ${e}`); + } + return false; + } + }); + } + + /** + * Prepare to enter a nested event loop by disabling debuggee events. + */ + preEnter() { + const docShells = []; + // Disable events in all open windows. + for (const window of this.getAllWindowDebuggees()) { + const { windowUtils } = window; + windowUtils.suppressEventHandling(true); + windowUtils.suspendTimeouts(); + docShells.push(window.docShell); + } + return docShells; + } + + /** + * Prepare to exit a nested event loop by enabling debuggee events. + */ + postExit(pausedDocShells) { + // Enable events in all window paused in preEnter + for (const docShell of pausedDocShells) { + // Do not try to resume documents which are in destruction + // as resume methods would throw + if (docShell.isBeingDestroyed()) { + continue; + } + const { windowUtils } = docShell.domWindow; + windowUtils.resumeTimeouts(); + windowUtils.suppressEventHandling(false); + } + } +} + +exports.EventLoop = EventLoop; diff --git a/devtools/server/actors/utils/gecko-profile-collector.js b/devtools/server/actors/utils/gecko-profile-collector.js new file mode 100644 index 0000000000..1cdb6d7e56 --- /dev/null +++ b/devtools/server/actors/utils/gecko-profile-collector.js @@ -0,0 +1,285 @@ +/* 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"; + +// The fallback color for unexpected cases +const DEFAULT_COLOR = "grey"; + +// The default category for unexpected cases +const DEFAULT_CATEGORIES = [ + { + name: "Mixed", + color: DEFAULT_COLOR, + subcategories: ["Other"], + }, +]; + +// Color for each type of category/frame's implementation +const PREDEFINED_COLORS = { + interpreter: "yellow", + baseline: "orange", + ion: "blue", + wasm: "purple", +}; + +/** + * Utility class that collects the JS tracer data and converts it to a Gecko + * profile object. + */ +class GeckoProfileCollector { + #thread = null; + #stackMap = new Map(); + #frameMap = new Map(); + #categories = DEFAULT_CATEGORIES; + #currentStack = []; + #time = 0; + + /** + * Initialize the profiler and be ready to receive samples. + */ + start() { + this.#reset(); + this.#thread = this.#getEmptyThread(); + } + + /** + * Stop the record and return the gecko profiler data. + * + * @return {Object} + * The Gecko profile object. + */ + stop() { + // Create the profile to return. + const profile = this.#getEmptyProfile(); + profile.meta.categories = this.#categories; + profile.threads.push(this.#thread); + + // Cleanup. + this.#reset(); + + return profile; + } + + /** + * Clear all the internal state of this class. + */ + #reset() { + this.#thread = null; + this.#stackMap = new Map(); + this.#frameMap = new Map(); + this.#categories = DEFAULT_CATEGORIES; + this.#currentStack = []; + this.#time = 0; + } + + /** + * Initialize an empty Gecko profile object. + * + * @return {Object} + * Gecko profile object. + */ + #getEmptyProfile() { + const httpHandler = Cc[ + "@mozilla.org/network/protocol;1?name=http" + ].getService(Ci.nsIHttpProtocolHandler); + return { + meta: { + // Currently interval is 1, but we could change it to a lower number + // when we have durations coming from js tracer. + interval: 1, + startTime: 0, + product: Services.appinfo.name, + importedFrom: "JS Tracer", + version: 28, + presymbolicated: true, + abi: Services.appinfo.XPCOMABI, + misc: httpHandler.misc, + oscpu: httpHandler.oscpu, + platform: httpHandler.platform, + processType: Services.appinfo.processType, + categories: [], + stackwalk: 0, + toolkit: Services.appinfo.widgetToolkit, + appBuildID: Services.appinfo.appBuildID, + sourceURL: Services.appinfo.sourceURL, + physicalCPUs: 0, + logicalCPUs: 0, + CPUName: "", + markerSchema: [], + }, + libs: [], + pages: [], + threads: [], + processes: [], + }; + } + + /** + * Generate a thread object to be stored in the Gecko profile object. + */ + #getEmptyThread() { + return { + processType: "default", + processStartupTime: 0, + processShutdownTime: null, + registerTime: 0, + unregisterTime: null, + pausedRanges: [], + name: "GeckoMain", + "eTLD+1": "JS Tracer", + isMainThread: true, + pid: Services.appinfo.processID, + tid: 0, + samples: { + schema: { + stack: 0, + time: 1, + eventDelay: 2, + }, + data: [], + }, + markers: { + schema: { + name: 0, + startTime: 1, + endTime: 2, + phase: 3, + category: 4, + data: 5, + }, + data: [], + }, + stackTable: { + schema: { + prefix: 0, + frame: 1, + }, + data: [], + }, + frameTable: { + schema: { + location: 0, + relevantForJS: 1, + innerWindowID: 2, + implementation: 3, + line: 4, + column: 5, + category: 6, + subcategory: 7, + }, + data: [], + }, + stringTable: [], + }; + } + + /** + * Record a new sample to be stored in the Gecko profile object. + * + * @param {Object} frame + * Object describing a frame with following attributes: + * - {String} name + * Human readable name for this frame. + * - {String} url + * URL of the running script. + * - {Number} lineNumber + * Line currently executing for this script. + * - {Number} columnNumber + * Column currently executing for this script. + * - {String} category + * Which JS implementation is being used for this frame: interpreter, baseline, ion or wasm. + * See Debugger.frame.implementation. + */ + addSample(frame, depth) { + const currentDepth = this.#currentStack.length; + if (currentDepth == depth) { + // We are in the same depth and executing another frame. Replace the + // current frame with the new one. + this.#currentStack[currentDepth] = frame; + } else if (currentDepth < depth) { + // We are going deeper in the stack. Push the new frame. + this.#currentStack.push(frame); + } else { + // We are going back in the stack. Pop frames until we reach the right depth. + this.#currentStack.length = depth; + this.#currentStack[depth] = frame; + } + + const stack = this.#currentStack.reduce((prefix, stackFrame) => { + const frameIndex = this.#getOrCreateFrame(stackFrame); + return this.#getOrCreateStack(frameIndex, prefix); + }, null); + this.#thread.samples.data.push([ + stack, + // We put simply 1 sample (1ms) for each frame. We can change it in the + // future if we can get the duration of the frame. + this.#time++, + 0, // eventDelay + ]); + } + + #getOrCreateFrame(frame) { + const { frameTable, stringTable } = this.#thread; + const frameString = `${frame.name}:${frame.url}:${frame.lineNumber}:${frame.columnNumber}:${frame.category}`; + let frameIndex = this.#frameMap.get(frameString); + + if (frameIndex === undefined) { + frameIndex = frameTable.data.length; + const location = stringTable.length; + // Profiler frontend except a particular string to match the source URL: + // `functionName (http://script.url/:1234:1234)` + // https://github.com/firefox-devtools/profiler/blob/dab645b2db7e1b21185b286f96dd03b77f68f5c3/src/profile-logic/process-profile.js#L518 + stringTable.push( + `${frame.name} (${frame.url}:${frame.lineNumber}:${frame.columnNumber})` + ); + + const category = this.#getOrCreateCategory(frame.category); + + frameTable.data.push([ + location, + true, // relevantForJS + 0, // innerWindowID + null, // implementation + frame.lineNumber, // line + frame.columnNumber, // column + category, + 0, // subcategory + ]); + this.#frameMap.set(frameString, frameIndex); + } + + return frameIndex; + } + + #getOrCreateStack(frameIndex, prefix) { + const { stackTable } = this.#thread; + const key = prefix === null ? `${frameIndex}` : `${frameIndex},${prefix}`; + let stack = this.#stackMap.get(key); + + if (stack === undefined) { + stack = stackTable.data.length; + stackTable.data.push([prefix, frameIndex]); + this.#stackMap.set(key, stack); + } + return stack; + } + + #getOrCreateCategory(category) { + const categories = this.#categories; + let categoryIndex = categories.findIndex(c => c.name === category); + + if (categoryIndex === -1) { + categoryIndex = categories.length; + categories.push({ + name: category, + color: PREDEFINED_COLORS[category] ?? DEFAULT_COLOR, + subcategories: ["Other"], + }); + } + return categoryIndex; + } +} + +exports.GeckoProfileCollector = GeckoProfileCollector; diff --git a/devtools/server/actors/utils/inactive-property-helper.js b/devtools/server/actors/utils/inactive-property-helper.js new file mode 100644 index 0000000000..759c2e6215 --- /dev/null +++ b/devtools/server/actors/utils/inactive-property-helper.js @@ -0,0 +1,1443 @@ +/* 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"; + +loader.lazyRequireGetter( + this, + "CssLogic", + "resource://devtools/server/actors/inspector/css-logic.js", + true +); + +const INACTIVE_CSS_ENABLED = Services.prefs.getBoolPref( + "devtools.inspector.inactive.css.enabled", + false +); + +const TEXT_WRAP_BALANCE_LIMIT = Services.prefs.getIntPref( + "layout.css.text-wrap-balance.limit", + 10 +); + +const VISITED_MDN_LINK = "https://developer.mozilla.org/docs/Web/CSS/:visited"; +const VISITED_INVALID_PROPERTIES = allCssPropertiesExcept([ + "all", + "color", + "background", + "background-color", + "border", + "border-color", + "border-bottom-color", + "border-left-color", + "border-right-color", + "border-top-color", + "border-block", + "border-block-color", + "border-block-start-color", + "border-block-end-color", + "border-inline", + "border-inline-color", + "border-inline-start-color", + "border-inline-end-color", + "column-rule", + "column-rule-color", + "outline", + "outline-color", + "text-decoration-color", + "text-emphasis-color", +]); + +// Set of node names which are always treated as replaced elements: +const REPLACED_ELEMENTS_NAMES = new Set([ + "audio", + "br", + "button", + "canvas", + "embed", + "hr", + "iframe", + // Inputs are generally replaced elements. E.g. checkboxes and radios are replaced + // unless they have `appearance: none`. However unconditionally treating them + // as replaced is enough for our purpose here, and avoids extra complexity that + // will likely not be necessary in most cases. + "input", + "math", + "object", + "picture", + // Select is a replaced element if it has `size<=1` or no size specified, but + // unconditionally treating it as replaced is enough for our purpose here, and + // avoids extra complexity that will likely not be necessary in most cases. + "select", + "svg", + "textarea", + "video", +]); + +const CUE_PSEUDO_ELEMENT_STYLING_SPEC_URL = + "https://developer.mozilla.org/docs/Web/CSS/::cue"; + +const HIGHLIGHT_PSEUDO_ELEMENTS_STYLING_SPEC_URL = + "https://www.w3.org/TR/css-pseudo-4/#highlight-styling"; +const HIGHLIGHT_PSEUDO_ELEMENTS = [ + "::highlight", + "::selection", + // Below are properties not yet implemented in Firefox (Bug 1694053) + "::grammar-error", + "::spelling-error", + "::target-text", +]; +const REGEXP_HIGHLIGHT_PSEUDO_ELEMENTS = new RegExp( + `${HIGHLIGHT_PSEUDO_ELEMENTS.join("|")}` +); + +const FIRST_LINE_PSEUDO_ELEMENT_STYLING_SPEC_URL = + "https://www.w3.org/TR/css-pseudo-4/#first-line-styling"; + +const FIRST_LETTER_PSEUDO_ELEMENT_STYLING_SPEC_URL = + "https://www.w3.org/TR/css-pseudo-4/#first-letter-styling"; + +const PLACEHOLDER_PSEUDO_ELEMENT_STYLING_SPEC_URL = + "https://www.w3.org/TR/css-pseudo-4/#placeholder-pseudo"; + +class InactivePropertyHelper { + /** + * A list of rules for when CSS properties have no effect. + * + * In certain situations, CSS properties do not have any effect. A common + * example is trying to set a width on an inline element like a <span>. + * + * There are so many properties in CSS that it's difficult to remember which + * ones do and don't apply in certain situations. Some are straight-forward + * like `flex-wrap` only applying to an element that has `display:flex`. + * Others are less trivial like setting something other than a color on a + * `:visited` pseudo-class. + * + * This file contains "rules" in the form of objects with the following + * properties: + * { + * invalidProperties: + * Set of CSS property names that are inactive if the rule matches. + * when: + * The rule itself, a JS function used to identify the conditions + * indicating whether a property is valid or not. + * fixId: + * A Fluent id containing a suggested solution to the problem that is + * causing a property to be inactive. + * msgId: + * A Fluent id containing an error message explaining why a property is + * inactive in this situation. + * } + * + * If you add a new rule, also add a test for it in: + * server/tests/chrome/test_inspector-inactive-property-helper.html + * + * The main export is `isPropertyUsed()`, which can be used to check if a + * property is used or not, and why. + * + * NOTE: We should generally *not* add rules here for any CSS properties that + * inherit by default, because it's hard for us to know whether such + * properties are truly "inactive". Web developers might legitimately set + * such a property on any arbitrary element, in order to concisely establish + * the default property-value throughout that element's subtree. For example, + * consider the "list-style-*" properties, which inherit by default and which + * only have a rendering effect on elements with "display:list-item" + * (e.g. <li>). It might superficially seem like we could add a rule here to + * warn about usages of these properties on non-"list-item" elements, but we + * shouldn't actually warn about that. A web developer may legitimately + * prefer to set these properties on an arbitrary container element (e.g. an + * <ol> element, or even the <html> element) in order to concisely adjust the + * rendering of a whole list (or all the lists in a document). + */ + get INVALID_PROPERTIES_VALIDATORS() { + return [ + // Flex container property used on non-flex container. + { + invalidProperties: ["flex-direction", "flex-flow", "flex-wrap"], + when: () => !this.flexContainer, + fixId: "inactive-css-not-flex-container-fix", + msgId: "inactive-css-not-flex-container", + }, + // Flex item property used on non-flex item. + { + invalidProperties: ["flex", "flex-basis", "flex-grow", "flex-shrink"], + when: () => !this.flexItem, + fixId: "inactive-css-not-flex-item-fix-2", + msgId: "inactive-css-not-flex-item", + }, + // Grid container property used on non-grid container. + { + invalidProperties: [ + "grid-auto-columns", + "grid-auto-flow", + "grid-auto-rows", + "grid-template", + "grid-template-areas", + "grid-template-columns", + "grid-template-rows", + "justify-items", + ], + when: () => !this.gridContainer, + fixId: "inactive-css-not-grid-container-fix", + msgId: "inactive-css-not-grid-container", + }, + // Grid item property used on non-grid item. + { + invalidProperties: [ + "grid-area", + "grid-column", + "grid-column-end", + "grid-column-start", + "grid-row", + "grid-row-end", + "grid-row-start", + "justify-self", + ], + when: () => !this.gridItem && !this.isAbsPosGridElement(), + fixId: "inactive-css-not-grid-item-fix-2", + msgId: "inactive-css-not-grid-item", + }, + // Grid and flex item properties used on non-grid or non-flex item. + { + invalidProperties: ["align-self", "place-self", "order"], + when: () => + !this.gridItem && !this.flexItem && !this.isAbsPosGridElement(), + fixId: "inactive-css-not-grid-or-flex-item-fix-3", + msgId: "inactive-css-not-grid-or-flex-item", + }, + // Grid and flex container properties used on non-grid or non-flex container. + { + invalidProperties: [ + "align-items", + "justify-content", + "place-content", + "place-items", + "row-gap", + // grid-*-gap are supported legacy shorthands for the corresponding *-gap properties. + // See https://drafts.csswg.org/css-align-3/#gap-legacy for more information. + "grid-row-gap", + ], + when: () => !this.gridContainer && !this.flexContainer, + fixId: "inactive-css-not-grid-or-flex-container-fix", + msgId: "inactive-css-not-grid-or-flex-container", + }, + // align-content is special as align-content:baseline does have an effect on all + // grid items, flex items and table cells, regardless of what type of box they are. + // See https://bugzilla.mozilla.org/show_bug.cgi?id=1598730 + { + invalidProperties: ["align-content"], + when: () => + !this.style["align-content"].includes("baseline") && + !this.gridContainer && + !this.flexContainer, + fixId: "inactive-css-not-grid-or-flex-container-fix", + msgId: "inactive-css-not-grid-or-flex-container", + }, + // column-gap and shorthands used on non-grid or non-flex or non-multi-col container. + { + invalidProperties: [ + "column-gap", + "gap", + "grid-gap", + // grid-*-gap are supported legacy shorthands for the corresponding *-gap properties. + // See https://drafts.csswg.org/css-align-3/#gap-legacy for more information. + "grid-column-gap", + ], + when: () => + !this.gridContainer && !this.flexContainer && !this.multiColContainer, + fixId: + "inactive-css-not-grid-or-flex-container-or-multicol-container-fix", + msgId: "inactive-css-not-grid-or-flex-container-or-multicol-container", + }, + // Multi-column related properties used on non-multi-column container. + { + invalidProperties: [ + "column-fill", + "column-rule", + "column-rule-color", + "column-rule-style", + "column-rule-width", + ], + when: () => !this.multiColContainer, + fixId: "inactive-css-not-multicol-container-fix", + msgId: "inactive-css-not-multicol-container", + }, + // Inline properties used on non-inline-level elements. + { + invalidProperties: ["vertical-align"], + when: () => + !this.isInlineLevel() && !this.isFirstLetter && !this.isFirstLine, + fixId: "inactive-css-not-inline-or-tablecell-fix", + msgId: "inactive-css-not-inline-or-tablecell", + }, + // Writing mode properties used on ::first-line pseudo-element. + { + invalidProperties: ["direction", "text-orientation", "writing-mode"], + when: () => this.isFirstLine, + fixId: "learn-more", + msgId: "inactive-css-first-line-pseudo-element-not-supported", + learnMoreURL: FIRST_LINE_PSEUDO_ELEMENT_STYLING_SPEC_URL, + }, + // Content modifying properties used on ::first-letter pseudo-element. + { + invalidProperties: ["content"], + when: () => this.isFirstLetter, + fixId: "learn-more", + msgId: "inactive-css-first-letter-pseudo-element-not-supported", + learnMoreURL: FIRST_LETTER_PSEUDO_ELEMENT_STYLING_SPEC_URL, + }, + // Writing mode or inline properties used on ::placeholder pseudo-element. + { + invalidProperties: [ + "baseline-source", + "direction", + "dominant-baseline", + "line-height", + "text-orientation", + "vertical-align", + "writing-mode", + // Below are properties not yet implemented in Firefox (Bug 1312611) + "alignment-baseline", + "baseline-shift", + "initial-letter", + "text-box-trim", + ], + when: () => { + const { selectorText } = this.cssRule; + return selectorText && selectorText.includes("::placeholder"); + }, + fixId: "learn-more", + msgId: "inactive-css-placeholder-pseudo-element-not-supported", + learnMoreURL: PLACEHOLDER_PSEUDO_ELEMENT_STYLING_SPEC_URL, + }, + // (max-|min-)width used on inline elements, table rows, or row groups. + { + invalidProperties: ["max-width", "min-width", "width"], + when: () => + this.nonReplacedInlineBox || + this.horizontalTableTrack || + this.horizontalTableTrackGroup, + fixId: "inactive-css-non-replaced-inline-or-table-row-or-row-group-fix", + msgId: "inactive-css-property-because-of-display", + }, + // (max-|min-)height used on inline elements, table columns, or column groups. + { + invalidProperties: ["max-height", "min-height", "height"], + when: () => + this.nonReplacedInlineBox || + this.verticalTableTrack || + this.verticalTableTrackGroup, + fixId: + "inactive-css-non-replaced-inline-or-table-column-or-column-group-fix", + msgId: "inactive-css-property-because-of-display", + }, + { + invalidProperties: ["display"], + when: () => + this.isFloated && + this.checkResolvedStyle("display", [ + "inline", + "inline-block", + "inline-table", + "inline-flex", + "inline-grid", + "table-cell", + "table-row", + "table-row-group", + "table-header-group", + "table-footer-group", + "table-column", + "table-column-group", + "table-caption", + ]), + fixId: "inactive-css-not-display-block-on-floated-fix", + msgId: "inactive-css-not-display-block-on-floated", + }, + // The property is impossible to override due to :visited restriction. + { + invalidProperties: VISITED_INVALID_PROPERTIES, + when: () => this.isVisitedRule(), + fixId: "learn-more", + msgId: "inactive-css-property-is-impossible-to-override-in-visited", + learnMoreURL: VISITED_MDN_LINK, + }, + // top, right, bottom, left properties used on non positioned boxes. + { + invalidProperties: ["top", "right", "bottom", "left"], + when: () => !this.isPositioned, + fixId: "inactive-css-position-property-on-unpositioned-box-fix", + msgId: "inactive-css-position-property-on-unpositioned-box", + }, + // z-index property used on non positioned boxes that are not grid/flex items. + { + invalidProperties: ["z-index"], + when: () => !this.isPositioned && !this.gridItem && !this.flexItem, + fixId: "inactive-css-position-property-on-unpositioned-box-fix", + msgId: "inactive-css-position-property-on-unpositioned-box", + }, + // text-overflow property used on elements for which 'overflow' is set to 'visible' + // (the initial value) in the inline axis. Note that this validator only checks if + // 'overflow-inline' computes to 'visible' on the element. + // In theory, we should also be checking if the element is a block as this doesn't + // normally work on inline element. However there are many edge cases that made it + // impossible for the JS code to determine whether the type of box would support + // text-overflow. So, rather than risking to show invalid warnings, we decided to + // only warn when 'overflow-inline: visible' was set. There is more information + // about this in this discussion https://phabricator.services.mozilla.com/D62407 and + // on the bug https://bugzilla.mozilla.org/show_bug.cgi?id=1551578 + { + invalidProperties: ["text-overflow"], + when: () => this.checkComputedStyle("overflow-inline", ["visible"]), + fixId: "inactive-text-overflow-when-no-overflow-fix", + msgId: "inactive-text-overflow-when-no-overflow", + }, + // margin properties used on table internal elements. + { + invalidProperties: [ + "margin", + "margin-block", + "margin-block-end", + "margin-block-start", + "margin-bottom", + "margin-inline", + "margin-inline-end", + "margin-inline-start", + "margin-left", + "margin-right", + "margin-top", + ], + when: () => this.internalTableElement, + fixId: "inactive-css-not-for-internal-table-elements-fix", + msgId: "inactive-css-not-for-internal-table-elements", + }, + // padding properties used on table internal elements except table cells. + { + invalidProperties: [ + "padding", + "padding-block", + "padding-block-end", + "padding-block-start", + "padding-bottom", + "padding-inline", + "padding-inline-end", + "padding-inline-start", + "padding-left", + "padding-right", + "padding-top", + ], + when: () => + this.internalTableElement && + !this.checkComputedStyle("display", ["table-cell"]), + fixId: + "inactive-css-not-for-internal-table-elements-except-table-cells-fix", + msgId: + "inactive-css-not-for-internal-table-elements-except-table-cells", + }, + // table-layout used on non-table elements. + { + invalidProperties: ["table-layout"], + when: () => + !this.checkComputedStyle("display", ["table", "inline-table"]), + fixId: "inactive-css-not-table-fix", + msgId: "inactive-css-not-table", + }, + // empty-cells property used on non-table-cell elements. + { + invalidProperties: ["empty-cells"], + when: () => !this.checkComputedStyle("display", ["table-cell"]), + fixId: "inactive-css-not-table-cell-fix", + msgId: "inactive-css-not-table-cell", + }, + // scroll-padding-* properties used on non-scrollable elements. + { + invalidProperties: [ + "scroll-padding", + "scroll-padding-top", + "scroll-padding-right", + "scroll-padding-bottom", + "scroll-padding-left", + "scroll-padding-block", + "scroll-padding-block-end", + "scroll-padding-block-start", + "scroll-padding-inline", + "scroll-padding-inline-end", + "scroll-padding-inline-start", + ], + when: () => !this.isScrollContainer, + fixId: "inactive-scroll-padding-when-not-scroll-container-fix", + msgId: "inactive-scroll-padding-when-not-scroll-container", + }, + // border-image properties used on internal table with border collapse. + { + invalidProperties: [ + "border-image", + "border-image-outset", + "border-image-repeat", + "border-image-slice", + "border-image-source", + "border-image-width", + ], + when: () => + this.internalTableElement && + this.checkTableParentHasBorderCollapsed(), + fixId: "inactive-css-border-image-fix", + msgId: "inactive-css-border-image", + }, + // width & height properties used on ruby elements. + { + invalidProperties: [ + "height", + "min-height", + "max-height", + "width", + "min-width", + "max-width", + ], + when: () => this.checkComputedStyle("display", ["ruby", "ruby-text"]), + fixId: "inactive-css-ruby-element-fix", + msgId: "inactive-css-ruby-element", + }, + // text-wrap: balance; used on elements exceeding the threshold line number + { + invalidProperties: ["text-wrap"], + when: () => { + if (!this.checkComputedStyle("text-wrap", ["balance"])) { + return false; + } + const blockLineCounts = InspectorUtils.getBlockLineCounts(this.node); + // We only check the number of lines within the first block + // because the text-wrap: balance; property only applies to + // the first block. And fragmented elements (with multiple + // blocks) are excluded from line balancing for the time being. + return ( + blockLineCounts && blockLineCounts[0] > TEXT_WRAP_BALANCE_LIMIT + ); + }, + fixId: "inactive-css-text-wrap-balance-lines-exceeded-fix", + msgId: "inactive-css-text-wrap-balance-lines-exceeded", + lineCount: TEXT_WRAP_BALANCE_LIMIT, + }, + // text-wrap: balance; used on fragmented elements + { + invalidProperties: ["text-wrap"], + when: () => { + if (!this.checkComputedStyle("text-wrap", ["balance"])) { + return false; + } + const blockLineCounts = InspectorUtils.getBlockLineCounts(this.node); + const isFragmented = blockLineCounts && blockLineCounts.length > 1; + return isFragmented; + }, + fixId: "inactive-css-text-wrap-balance-fragmented-fix", + msgId: "inactive-css-text-wrap-balance-fragmented", + }, + ]; + } + + /** + * A list of rules for when CSS properties have no effect, + * based on an allow list of properties. + * We're setting this as a different array than INVALID_PROPERTIES_VALIDATORS as we + * need to check every properties, which we don't do for invalid properties ( see check + * on this.invalidProperties). + * + * This file contains "rules" in the form of objects with the following + * properties: + * { + * acceptedProperties: + * Array of CSS property names that are the only one accepted if the rule matches. + * when: + * The rule itself, a JS function used to identify the conditions + * indicating whether a property is valid or not. + * fixId: + * A Fluent id containing a suggested solution to the problem that is + * causing a property to be inactive. + * msgId: + * A Fluent id containing an error message explaining why a property is + * inactive in this situation. + * } + * + * If you add a new rule, also add a test for it in: + * server/tests/chrome/test_inspector-inactive-property-helper.html + * + * The main export is `isPropertyUsed()`, which can be used to check if a + * property is used or not, and why. + */ + ACCEPTED_PROPERTIES_VALIDATORS = [ + // Constrained set of properties on highlight pseudo-elements + { + acceptedProperties: new Set([ + // At the moment, for shorthand we don't look into each properties it covers, + // and so, although `background` might hold inactive values (e.g. background-image) + // we don't want to mark it as inactive if it sets a background-color (e.g. background: red). + "background", + "background-color", + "color", + "text-decoration", + "text-decoration-color", + "text-decoration-line", + "text-decoration-style", + "text-decoration-thickness", + "text-shadow", + "text-underline-offset", + "text-underline-position", + "-webkit-text-fill-color", + "-webkit-text-stroke-color", + "-webkit-text-stroke-width", + "-webkit-text-stroke", + ]), + when: () => { + const { selectorText } = this.cssRule; + return ( + selectorText && REGEXP_HIGHLIGHT_PSEUDO_ELEMENTS.test(selectorText) + ); + }, + msgId: "inactive-css-highlight-pseudo-elements-not-supported", + fixId: "learn-more", + learnMoreURL: HIGHLIGHT_PSEUDO_ELEMENTS_STYLING_SPEC_URL, + }, + // Constrained set of properties on ::cue pseudo-element + // + // Note that Gecko doesn't yet support the ::cue() pseudo-element + // taking a selector as argument. The properties accecpted by that + // partly differ from the ones accepted by the ::cue pseudo-element. + // See https://w3c.github.io/webvtt/#ref-for-selectordef-cue-selector⑧. + // See https://bugzilla.mozilla.org/show_bug.cgi?id=865395 and its + // dependencies for the implementation status. + { + acceptedProperties: new Set([ + "background", + "background-attachment", + // The WebVTT spec. currently only allows all properties covered by + // the `background` shorthand and `background-blend-mode` is not + // part of that, though Gecko does support it, anyway. + // Therefore, there's also an issue pending to add it (and others) + // to the spec. See https://github.com/w3c/webvtt/issues/518. + "background-blend-mode", + "background-clip", + "background-color", + "background-image", + "background-origin", + "background-position", + "background-position-x", + "background-position-y", + "background-repeat", + "background-size", + "color", + "font", + "font-family", + "font-size", + "font-stretch", + "font-style", + "font-variant", + "font-variant-alternates", + "font-variant-caps", + "font-variant-east-asian", + "font-variant-ligatures", + "font-variant-numeric", + "font-variant-position", + "font-weight", + "line-height", + "opacity", + "outline", + "outline-color", + "outline-offset", + "outline-style", + "outline-width", + "ruby-position", + "text-combine-upright", + "text-decoration", + "text-decoration-color", + "text-decoration-line", + "text-decoration-style", + "text-decoration-thickness", + "text-shadow", + "visibility", + "white-space", + ]), + when: () => { + const { selectorText } = this.cssRule; + return selectorText && selectorText.includes("::cue"); + }, + msgId: "inactive-css-cue-pseudo-element-not-supported", + fixId: "learn-more", + learnMoreURL: CUE_PSEUDO_ELEMENT_STYLING_SPEC_URL, + }, + ]; + + /** + * Get a list of unique CSS property names for which there are checks + * for used/unused state. + * + * @return {Set} + * List of CSS properties + */ + get invalidProperties() { + if (!this._invalidProperties) { + const allProps = this.INVALID_PROPERTIES_VALIDATORS.map( + v => v.invalidProperties + ).flat(); + this._invalidProperties = new Set(allProps); + } + + return this._invalidProperties; + } + + /** + * Is this CSS property having any effect on this element? + * + * @param {DOMNode} el + * The DOM element. + * @param {Style} elStyle + * The computed style for this DOMNode. + * @param {DOMRule} cssRule + * The CSS rule the property is defined in. + * @param {String} property + * The CSS property name. + * + * @return {Object} object + * @return {String} object.display + * The element computed display value. + * @return {String} object.fixId + * A Fluent id containing a suggested solution to the problem that is + * causing a property to be inactive. + * @return {String} object.msgId + * A Fluent id containing an error message explaining why a property + * is inactive in this situation. + * @return {String} object.property + * The inactive property name. + * @return {String} object.learnMoreURL + * An optional link if we need to open an other link than + * the default MDN property one. + * @return {Boolean} object.used + * true if the property is used. + */ + isPropertyUsed(el, elStyle, cssRule, property) { + // Assume the property is used when the Inactive CSS pref is not enabled + if (!INACTIVE_CSS_ENABLED) { + return { used: true }; + } + + let fixId = ""; + let msgId = ""; + let learnMoreURL = null; + let lineCount = null; + let used = true; + + const someFn = validator => { + // First check if this rule cares about this property. + let isRuleConcerned = false; + + if (validator.invalidProperties) { + isRuleConcerned = validator.invalidProperties.includes(property); + } else if (validator.acceptedProperties) { + isRuleConcerned = !validator.acceptedProperties.has(property); + } + + if (!isRuleConcerned) { + return false; + } + + this.select(el, elStyle, cssRule, property); + + // And then run the validator, gathering the error message if the + // validator passes. + if (validator.when()) { + fixId = validator.fixId; + msgId = validator.msgId; + learnMoreURL = validator.learnMoreURL; + lineCount = validator.lineCount; + used = false; + + // We can bail out as soon as a validator reported an issue. + return true; + } + + return false; + }; + + // First run the accepted properties validators + const isNotAccepted = this.ACCEPTED_PROPERTIES_VALIDATORS.some(someFn); + + // If the property is not in the list of properties to check and there was no issues + // in the accepted properties validators, assume the property is used. + if (!isNotAccepted && !this.invalidProperties.has(property)) { + this.unselect(); + return { used: true }; + } + + // Otherwise, if there was no issue from the accepted properties validators, + // run the invalid properties validators. + if (!isNotAccepted) { + this.INVALID_PROPERTIES_VALIDATORS.some(someFn); + } + + this.unselect(); + + // Accessing elStyle might throws, we wrap it in a try/catch block to avoid test + // failures. + let display; + try { + display = elStyle ? elStyle.display : null; + } catch (e) {} + + return { + display, + fixId, + msgId, + property, + learnMoreURL, + lineCount, + used, + }; + } + + /** + * Focus on a node. + * + * @param {DOMNode} node + * Node to focus on. + */ + select(node, style, cssRule, property) { + this._node = node; + this._cssRule = cssRule; + this._property = property; + this._style = style; + } + + /** + * Clear references to avoid leaks. + */ + unselect() { + this._node = null; + this._cssRule = null; + this._property = null; + this._style = null; + } + + /** + * Provide a public reference to node. + */ + get node() { + return this._node; + } + + /** + * Cache and provide node's computed style. + */ + get style() { + return this._style; + } + + /** + * Provide a public reference to the css rule. + */ + get cssRule() { + return this._cssRule; + } + + /** + * Check if the current node's propName is set to one of the values passed in + * the values array. + * + * @param {String} propName + * Property name to check. + * @param {Array} values + * Values to compare against. + */ + checkComputedStyle(propName, values) { + if (!this.style) { + return false; + } + return values.some(value => this.style[propName] === value); + } + + /** + * Check if a rule's propName is set to one of the values passed in the values + * array. + * + * @param {String} propName + * Property name to check. + * @param {Array} values + * Values to compare against. + */ + checkResolvedStyle(propName, values) { + if (!(this.cssRule && this.cssRule.style)) { + return false; + } + const { style } = this.cssRule; + + return values.some(value => style[propName] === value); + } + + /** + * Check if the current node is an inline-level box. + */ + isInlineLevel() { + return this.checkComputedStyle("display", [ + "inline", + "inline-block", + "inline-table", + "inline-flex", + "inline-grid", + "table-cell", + "table-row", + "table-row-group", + "table-header-group", + "table-footer-group", + ]); + } + + /** + * Check if the current node is a flex container i.e. a node that has a style + * of `display:flex` or `display:inline-flex`. + */ + get flexContainer() { + return this.checkComputedStyle("display", ["flex", "inline-flex"]); + } + + /** + * Check if the current node is a flex item. + */ + get flexItem() { + return this.isFlexItem(this.node); + } + + /** + * Check if the current node is a grid container i.e. a node that has a style + * of `display:grid` or `display:inline-grid`. + */ + get gridContainer() { + return this.checkComputedStyle("display", ["grid", "inline-grid"]); + } + + /** + * Check if the current node is a grid item. + */ + get gridItem() { + return this.isGridItem(this.node); + } + + /** + * Check if the current node is a multi-column container, i.e. a node element whose + * `column-width` or `column-count` property is not `auto`. + */ + get multiColContainer() { + const autoColumnWidth = this.checkComputedStyle("column-width", ["auto"]); + const autoColumnCount = this.checkComputedStyle("column-count", ["auto"]); + + return !autoColumnWidth || !autoColumnCount; + } + + /** + * Check if the current node is a table row. + */ + get tableRow() { + return this.style && this.style.display === "table-row"; + } + + /** + * Check if the current node is a table column. + */ + get tableColumn() { + return this.style && this.style.display === "table-column"; + } + + /** + * Check if the current node is an internal table element. + */ + get internalTableElement() { + return this.checkComputedStyle("display", [ + "table-cell", + "table-row", + "table-row-group", + "table-header-group", + "table-footer-group", + "table-column", + "table-column-group", + ]); + } + + /** + * Check if the current node is a horizontal table track. That is: either a table row + * displayed in horizontal writing mode, or a table column displayed in vertical writing + * mode. + */ + get horizontalTableTrack() { + if (!this.tableRow && !this.tableColumn) { + return false; + } + + const tableTrackParent = this.getTableTrackParent(); + + return this.hasVerticalWritingMode(tableTrackParent) + ? this.tableColumn + : this.tableRow; + } + + /** + * Check if the current node is a vertical table track. That is: either a table row + * displayed in vertical writing mode, or a table column displayed in horizontal writing + * mode. + */ + get verticalTableTrack() { + if (!this.tableRow && !this.tableColumn) { + return false; + } + + const tableTrackParent = this.getTableTrackParent(); + + return this.hasVerticalWritingMode(tableTrackParent) + ? this.tableRow + : this.tableColumn; + } + + /** + * Check if the current node is a row group. + */ + get rowGroup() { + return this.isRowGroup(this.node); + } + + /** + * Check if the current node is a table column group. + */ + get columnGroup() { + return this.isColumnGroup(this.node); + } + + /** + * Check if the current node is a horizontal table track group. That is: either a table + * row group displayed in horizontal writing mode, or a table column group displayed in + * vertical writing mode. + */ + get horizontalTableTrackGroup() { + if (!this.rowGroup && !this.columnGroup) { + return false; + } + + const tableTrackParent = this.getTableTrackParent(true); + const isVertical = this.hasVerticalWritingMode(tableTrackParent); + + const isHorizontalRowGroup = this.rowGroup && !isVertical; + const isHorizontalColumnGroup = this.columnGroup && isVertical; + + return isHorizontalRowGroup || isHorizontalColumnGroup; + } + + /** + * Check if the current node is a vertical table track group. That is: either a table row + * group displayed in vertical writing mode, or a table column group displayed in + * horizontal writing mode. + */ + get verticalTableTrackGroup() { + if (!this.rowGroup && !this.columnGroup) { + return false; + } + + const tableTrackParent = this.getTableTrackParent(true); + const isVertical = this.hasVerticalWritingMode(tableTrackParent); + + const isVerticalRowGroup = this.rowGroup && isVertical; + const isVerticalColumnGroup = this.columnGroup && !isVertical; + + return isVerticalRowGroup || isVerticalColumnGroup; + } + + /** + * Returns whether this element uses CSS layout. + */ + get hasCssLayout() { + return !this.isSvg && !this.isMathMl; + } + + /** + * Check if the current node is a non-replaced CSS inline box. + */ + get nonReplacedInlineBox() { + return ( + this.hasCssLayout && + this.nonReplaced && + this.style && + this.style.display === "inline" + ); + } + + /** + * Check if the current selector refers to a ::first-letter pseudo-element + */ + get isFirstLetter() { + const { selectorText } = this.cssRule; + return selectorText && selectorText.includes("::first-letter"); + } + + /** + * Check if the current selector refers to a ::first-line pseudo-element + */ + get isFirstLine() { + const { selectorText } = this.cssRule; + return selectorText && selectorText.includes("::first-line"); + } + + /** + * Check if the current node is a non-replaced element. See `replaced()` for + * a description of what a replaced element is. + */ + get nonReplaced() { + return !this.replaced; + } + + /** + * Check if the current node is an absolutely-positioned element. + */ + get isAbsolutelyPositioned() { + return this.checkComputedStyle("position", ["absolute", "fixed"]); + } + + /** + * Check if the current node is positioned (i.e. its position property has a value other + * than static). + */ + get isPositioned() { + return this.checkComputedStyle("position", [ + "relative", + "absolute", + "fixed", + "sticky", + ]); + } + + /** + * Check if the current node is floated + */ + get isFloated() { + return this.style && this.style.cssFloat !== "none"; + } + + /** + * Check if the current node is scrollable + */ + get isScrollContainer() { + // If `overflow` doesn't contain the values `visible` or `clip`, it is a scroll container. + // While `hidden` doesn't allow scrolling via a user interaction, the element can + // still be scrolled programmatically. + // See https://www.w3.org/TR/css-overflow-3/#overflow-properties. + const overflow = computedStyle(this.node).overflow; + // `overflow` is a shorthand for `overflow-x` and `overflow-y` + // (and with that also for `overflow-inline` and `overflow-block`), + // so may hold two values. + const overflowValues = overflow.split(" "); + return !( + overflowValues.includes("visible") || overflowValues.includes("clip") + ); + } + + /** + * Check if the current node is a replaced element i.e. an element with + * content that will be replaced e.g. <img>, <audio>, <video> or <object> + * elements. + */ + get replaced() { + if (REPLACED_ELEMENTS_NAMES.has(this.localName)) { + return true; + } + + // img tags are replaced elements only when the image has finished loading. + if (this.localName === "img" && this.node.complete) { + return true; + } + + return false; + } + + /** + * Return the current node's localName. + * + * @returns {String} + */ + get localName() { + return this.node.localName; + } + + /** + * Return whether the node is a MathML element. + */ + get isMathMl() { + return this.node.namespaceURI === "http://www.w3.org/1998/Math/MathML"; + } + + /** + * Return whether the node is an SVG element. + */ + get isSvg() { + return this.node.namespaceURI === "http://www.w3.org/2000/svg"; + } + + /** + * Check if the current node is an absolutely-positioned grid element. + * See: https://drafts.csswg.org/css-grid/#abspos-items + * + * @return {Boolean} whether or not the current node is absolutely-positioned by a + * grid container. + */ + isAbsPosGridElement() { + if (!this.isAbsolutelyPositioned) { + return false; + } + + const containingBlock = this.getContainingBlock(); + + return containingBlock !== null && this.isGridContainer(containingBlock); + } + + /** + * Check if a node is a flex item. + * + * @param {DOMNode} node + * The node to check. + */ + isFlexItem(node) { + return !!node.parentFlexElement; + } + + /** + * Check if a node is a flex container. + * + * @param {DOMNode} node + * The node to check. + */ + isFlexContainer(node) { + return !!node.getAsFlexContainer(); + } + + /** + * Check if a node is a grid container. + * + * @param {DOMNode} node + * The node to check. + */ + isGridContainer(node) { + return node.hasGridFragments(); + } + + /** + * Check if a node is a grid item. + * + * @param {DOMNode} node + * The node to check. + */ + isGridItem(node) { + return !!this.getParentGridElement(this.node); + } + + isVisitedRule() { + if (!CssLogic.hasVisitedState(this.node)) { + return false; + } + + const selectors = CssLogic.getSelectors(this.cssRule); + if (!selectors.some(s => s.endsWith(":visited"))) { + return false; + } + + const { bindingElement, pseudo } = CssLogic.getBindingElementAndPseudo( + this.node + ); + + for (let i = 0; i < selectors.length; i++) { + if ( + !selectors[i].endsWith(":visited") && + this.cssRule.selectorMatchesElement(i, bindingElement, pseudo, true) + ) { + // Match non :visited selector. + return false; + } + } + + return true; + } + + /** + * Return the current node's ancestor that generates its containing block. + */ + getContainingBlock() { + return this.node ? InspectorUtils.containingBlockOf(this.node) : null; + } + + getParentGridElement(node) { + // The documentElement can't be a grid item, only a container, so bail out. + if (node.flattenedTreeParentNode === node.ownerDocument) { + return null; + } + + if (node.nodeType === node.ELEMENT_NODE) { + const display = this.style ? this.style.display : null; + + if (!display || display === "none" || display === "contents") { + // Doesn't generate a box, not a grid item. + return null; + } + if (this.isAbsolutelyPositioned) { + // Out of flow, not a grid item. + return null; + } + } else if (node.nodeType !== node.TEXT_NODE) { + return null; + } + + for ( + let p = node.flattenedTreeParentNode; + p; + p = p.flattenedTreeParentNode + ) { + if (this.isGridContainer(p)) { + // It's a grid item! + return p; + } + + const style = computedStyle(p, node.ownerGlobal); + const display = style.display; + + if (display !== "contents") { + return null; // Not a grid item, for sure. + } + // display: contents, walk to the parent + } + return null; + } + + isRowGroup(node) { + const style = node === this.node ? this.style : computedStyle(node); + + return ( + style && + (style.display === "table-row-group" || + style.display === "table-header-group" || + style.display === "table-footer-group") + ); + } + + isColumnGroup(node) { + const style = node === this.node ? this.style : computedStyle(node); + + return style && style.display === "table-column-group"; + } + + /** + * Check if the given node's writing mode is vertical + */ + hasVerticalWritingMode(node) { + // Only 'horizontal-tb' has a horizontal writing mode. + // See https://drafts.csswg.org/css-writing-modes-4/#propdef-writing-mode + return computedStyle(node).writingMode !== "horizontal-tb"; + } + + /** + * Assuming the current element is a table track (row or column) or table track group, + * get the parent table. + * This is either going to be the table element if there is one, or the parent element. + * If the current element is not a table track, this returns the current element. + * + * @param {Boolean} isGroup + * Whether the element is a table track group, instead of a table track. + * @return {DOMNode} + * The parent table, the parent element, or the element itself. + */ + getTableTrackParent(isGroup) { + let current = this.node.parentNode; + + // Skip over unrendered elements. + while (computedStyle(current).display === "contents") { + current = current.parentNode; + } + + // Skip over groups if the initial element wasn't already one. + if (!isGroup && (this.isRowGroup(current) || this.isColumnGroup(current))) { + current = current.parentNode; + } + + // Once more over unrendered elements above the group. + while (computedStyle(current).display === "contents") { + current = current.parentNode; + } + + return current; + } + + /** + * Get the parent table element of the current element. + * + * @return {DOMNode|null} + * The closest table element or null if there are none. + */ + getTableParent() { + let current = this.node.parentNode; + + // Find the table parent + while (current && computedStyle(current).display !== "table") { + current = current.parentNode; + + // If we reached the document element, stop. + if (current == this.node.ownerDocument.documentElement) { + return null; + } + } + + return current; + } + + /** + * Assuming the current element is an internal table element, + * check wether its parent table element has `border-collapse` set to `collapse`. + * + * @returns {Boolean} + */ + checkTableParentHasBorderCollapsed() { + const parent = this.getTableParent(); + if (!parent) { + return false; + } + return computedStyle(parent).borderCollapse === "collapse"; + } +} + +/** + * Returns all CSS property names except given properties. + * + * @param {Array} - propertiesToIgnore + * Array of property ignored. + * @return {Array} + * Array of all CSS property name except propertiesToIgnore. + */ +function allCssPropertiesExcept(propertiesToIgnore) { + const properties = new Set( + InspectorUtils.getCSSPropertyNames({ includeAliases: true }) + ); + + for (const name of propertiesToIgnore) { + properties.delete(name); + } + + return [...properties]; +} + +/** + * Helper for getting an element's computed styles. + * + * @param {DOMNode} node + * The node to get the styles for. + * @param {Window} window + * Optional window object. If omitted, will get the node's window. + * @return {Object} + */ +function computedStyle(node, window = node.ownerGlobal) { + return window.getComputedStyle(node); +} + +const inactivePropertyHelper = new InactivePropertyHelper(); + +// The only public method from this module is `isPropertyUsed`. +exports.isPropertyUsed = inactivePropertyHelper.isPropertyUsed.bind( + inactivePropertyHelper +); diff --git a/devtools/server/actors/utils/logEvent.js b/devtools/server/actors/utils/logEvent.js new file mode 100644 index 0000000000..88b166619e --- /dev/null +++ b/devtools/server/actors/utils/logEvent.js @@ -0,0 +1,112 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const { + formatDisplayName, +} = require("resource://devtools/server/actors/frame.js"); +const { + TYPES, + getResourceWatcher, +} = require("resource://devtools/server/actors/resources/index.js"); + +// Get a string message to display when a frame evaluation throws. +function getThrownMessage(completion) { + try { + if (completion.throw.getOwnPropertyDescriptor) { + return completion.throw.getOwnPropertyDescriptor("message").value; + } else if (completion.toString) { + return completion.toString(); + } + } catch (ex) { + // ignore + } + return "Unknown exception"; +} +module.exports.getThrownMessage = getThrownMessage; + +function logEvent({ threadActor, frame, level, expression, bindings }) { + const { sourceActor, line, column } = + threadActor.sourcesManager.getFrameLocation(frame); + const displayName = formatDisplayName(frame); + + // TODO remove this branch when (#1592584) lands (#1609540) + if (isWorker) { + threadActor._parent._consoleActor.evaluateJS({ + text: `console.log(...${expression})`, + bindings: { displayName, ...bindings }, + url: sourceActor.url, + lineNumber: line, + disableBreaks: true, + }); + + return undefined; + } + + let completion; + // Ensure disabling all types of breakpoints for all sources while evaluating the log points + threadActor.insideClientEvaluation = { disableBreaks: true }; + try { + completion = frame.evalWithBindings( + expression, + { + displayName, + ...bindings, + }, + { hideFromDebugger: true } + ); + } finally { + threadActor.insideClientEvaluation = null; + } + + let value; + if (!completion) { + // The evaluation was killed (possibly by the slow script dialog). + value = ["Evaluation failed"]; + } else if ("return" in completion) { + value = completion.return; + } else { + value = [getThrownMessage(completion)]; + level = `${level}Error`; + } + + if (value && typeof value.unsafeDereference === "function") { + value = value.unsafeDereference(); + } + + const targetActor = threadActor._parent; + const message = { + filename: sourceActor.url, + lineNumber: line, + columnNumber: column, + arguments: value, + level, + timeStamp: ChromeUtils.dateNow(), + chromeContext: + targetActor.actorID && + /conn\d+\.parentProcessTarget\d+/.test(targetActor.actorID), + // The 'prepareConsoleMessageForRemote' method in webconsoleActor expects internal source ID, + // thus we can't set sourceId directly to sourceActorID. + sourceId: sourceActor.internalSourceId, + }; + + // Note that only WindowGlobalTarget actor support resource watcher + // This is still missing for worker and content processes + const consoleMessageWatcher = getResourceWatcher( + targetActor, + TYPES.CONSOLE_MESSAGE + ); + if (consoleMessageWatcher) { + consoleMessageWatcher.emitMessages([message]); + } else { + // Bug 1642296: Once we enable ConsoleMessage resource on the server, we should remove onConsoleAPICall + // from the WebConsoleActor, and only support the ConsoleMessageWatcher codepath. + targetActor._consoleActor.onConsoleAPICall(message); + } + + return undefined; +} + +module.exports.logEvent = logEvent; diff --git a/devtools/server/actors/utils/make-debugger.js b/devtools/server/actors/utils/make-debugger.js new file mode 100644 index 0000000000..40c28f01b2 --- /dev/null +++ b/devtools/server/actors/utils/make-debugger.js @@ -0,0 +1,122 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const EventEmitter = require("resource://devtools/shared/event-emitter.js"); +const Debugger = require("Debugger"); + +const { + reportException, +} = require("resource://devtools/shared/DevToolsUtils.js"); + +/** + * Multiple actors that use a |Debugger| instance come in a few versions, each + * with a different set of debuggees. One version for content tabs (globals + * within a tab), one version for chrome debugging (all globals), and sometimes + * a third version for addon debugging (chrome globals the addon is loaded in + * and content globals the addon injects scripts into). The |makeDebugger| + * function helps us avoid repeating the logic for finding and maintaining the + * correct set of globals for a given |Debugger| instance across each version of + * all of our actors. + * + * The |makeDebugger| function expects a single object parameter with the + * following properties: + * + * @param Function findDebuggees + * Called with one argument: a |Debugger| instance. This function should + * return an iterable of globals to be added to the |Debugger| + * instance. The globals are the actual global objects and aren't wrapped + * in in a |Debugger.Object|. + * + * @param Function shouldAddNewGlobalAsDebuggee + * Called with one argument: a |Debugger.Object| wrapping a global + * object. This function must return |true| if the global object should + * be added as debuggee, and |false| otherwise. + * + * @returns Debugger + * Returns a |Debugger| instance that can manage its set of debuggee + * globals itself and is decorated with the |EventEmitter| class. + * + * Existing |Debugger| properties set on the returned |Debugger| + * instance: + * + * - onNewGlobalObject: The |Debugger| will automatically add new + * globals as debuggees if calling |shouldAddNewGlobalAsDebuggee| + * with the global returns true. + * + * - uncaughtExceptionHook: The |Debugger| already has an error + * reporter attached to |uncaughtExceptionHook|, so if any + * |Debugger| hooks fail, the error will be reported. + * + * New properties set on the returned |Debugger| instance: + * + * - addDebuggees: A function which takes no arguments. It adds all + * current globals that should be debuggees (as determined by + * |findDebuggees|) to the |Debugger| instance. + */ +module.exports = function makeDebugger({ + findDebuggees, + shouldAddNewGlobalAsDebuggee, +} = {}) { + const dbg = new Debugger(); + EventEmitter.decorate(dbg); + + // By default, we disable asm.js and WASM debugging because of performance reason. + // Enabling asm.js debugging (allowUnobservedAsmJS=false) will make asm.js fallback to JS compiler + // and be debugging as a regular JS script. + dbg.allowUnobservedAsmJS = true; + // Enabling WASM debugging (allowUnobservedWasm=false) will make the engine compile WASM scripts + // into different machine code with debugging instructions. This significantly increase the memory usage of it. + dbg.allowUnobservedWasm = true; + + dbg.uncaughtExceptionHook = reportDebuggerHookException; + + const onNewGlobalObject = function (global) { + if (shouldAddNewGlobalAsDebuggee(global)) { + safeAddDebuggee(this, global); + } + }; + + dbg.onNewGlobalObject = onNewGlobalObject; + dbg.addDebuggees = function () { + for (const global of findDebuggees(this)) { + safeAddDebuggee(this, global); + } + }; + + dbg.disable = function () { + dbg.removeAllDebuggees(); + dbg.onNewGlobalObject = undefined; + }; + + dbg.enable = function () { + dbg.addDebuggees(); + dbg.onNewGlobalObject = onNewGlobalObject; + }; + dbg.findDebuggees = function () { + return findDebuggees(dbg); + }; + + return dbg; +}; + +const reportDebuggerHookException = e => reportException("DBG-SERVER", e); + +/** + * Add |global| as a debuggee to |dbg|, handling error cases. + */ +function safeAddDebuggee(dbg, global) { + let globalDO; + try { + globalDO = dbg.addDebuggee(global); + } catch (e) { + // Ignoring attempt to add the debugger's compartment as a debuggee. + return; + } + + if (dbg.onNewDebuggee) { + dbg.onNewDebuggee(globalDO); + } +} diff --git a/devtools/server/actors/utils/moz.build b/devtools/server/actors/utils/moz.build new file mode 100644 index 0000000000..405b25cb4b --- /dev/null +++ b/devtools/server/actors/utils/moz.build @@ -0,0 +1,32 @@ +# -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*- +# vim: set filetype=python: +# 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/. + +DevToolsModules( + "accessibility.js", + "actor-registry.js", + "breakpoint-actor-map.js", + "capture-screenshot.js", + "css-grid-utils.js", + "custom-formatters.js", + "dbg-source.js", + "event-breakpoints.js", + "event-loop.js", + "gecko-profile-collector.js", + "inactive-property-helper.js", + "logEvent.js", + "make-debugger.js", + "shapes-utils.js", + "source-map-utils.js", + "source-url.js", + "sources-manager.js", + "stack.js", + "style-utils.js", + "stylesheet-utils.js", + "stylesheets-manager.js", + "track-change-emitter.js", + "walker-search.js", + "watchpoint-map.js", +) diff --git a/devtools/server/actors/utils/shapes-utils.js b/devtools/server/actors/utils/shapes-utils.js new file mode 100644 index 0000000000..aab50bf952 --- /dev/null +++ b/devtools/server/actors/utils/shapes-utils.js @@ -0,0 +1,149 @@ +/* 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"; + +/** + * Get the distance between two points on a plane. + * @param {Number} x1 the x coord of the first point + * @param {Number} y1 the y coord of the first point + * @param {Number} x2 the x coord of the second point + * @param {Number} y2 the y coord of the second point + * @returns {Number} the distance between the two points + */ +const getDistance = (x1, y1, x2, y2) => { + return Math.round(Math.hypot(x2 - x1, y2 - y1)); +}; + +/** + * Determine if the given x/y coords are along the edge of the given ellipse. + * We allow for a small area around the edge that still counts as being on the edge. + * @param {Number} x the x coordinate of the click + * @param {Number} y the y coordinate of the click + * @param {Number} cx the x coordinate of the center of the ellipse + * @param {Number} cy the y coordinate of the center of the ellipse + * @param {Number} rx the x radius of the ellipse + * @param {Number} ry the y radius of the ellipse + * @param {Number} clickWidthX the width of the area that counts as being on the edge + * along the x radius. + * @param {Number} clickWidthY the width of the area that counts as being on the edge + * along the y radius. + * @returns {Boolean} whether the click counts as being on the edge of the ellipse. + */ +const clickedOnEllipseEdge = ( + x, + y, + cx, + cy, + rx, + ry, + clickWidthX, + clickWidthY +) => { + // The formula to determine if something is inside or on the edge of an ellipse is: + // (x - cx)^2/rx^2 + (y - cy)^2/ry^2 <= 1. If > 1, it's outside. + // We make two ellipses, adjusting rx and ry with clickWidthX and clickWidthY + // to allow for an area around the edge of the ellipse that can be clicked on. + // If the click was outside the inner ellipse and inside the outer ellipse, return true. + const inner = + (x - cx) ** 2 / (rx - clickWidthX) ** 2 + + (y - cy) ** 2 / (ry - clickWidthY) ** 2; + const outer = + (x - cx) ** 2 / (rx + clickWidthX) ** 2 + + (y - cy) ** 2 / (ry + clickWidthY) ** 2; + return inner >= 1 && outer <= 1; +}; + +/** + * Get the distance between a point and a line defined by two other points. + * @param {Number} x1 the x coordinate of the first point in the line + * @param {Number} y1 the y coordinate of the first point in the line + * @param {Number} x2 the x coordinate of the second point in the line + * @param {Number} y2 the y coordinate of the second point in the line + * @param {Number} x3 the x coordinate of the point for which the distance is found + * @param {Number} y3 the y coordinate of the point for which the distance is found + * @returns {Number} the distance between (x3,y3) and the line defined by + * (x1,y1) and (y1,y2) + */ +const distanceToLine = (x1, y1, x2, y2, x3, y3) => { + // https://en.wikipedia.org/wiki/Distance_from_a_point_to_a_line#Line_defined_by_two_points + const num = Math.abs((y2 - y1) * x3 - (x2 - x1) * y3 + x2 * y1 - y2 * x1); + const denom = getDistance(x1, y1, x2, y2); + return num / denom; +}; + +/** + * Get the point on the line defined by points a,b that is closest to point c + * @param {Number} ax the x coordinate of point a + * @param {Number} ay the y coordinate of point a + * @param {Number} bx the x coordinate of point b + * @param {Number} by the y coordinate of point b + * @param {Number} cx the x coordinate of point c + * @param {Number} cy the y coordinate of point c + * @returns {Array} a 2 element array that contains the x/y coords of the projected point + */ +const projection = (ax, ay, bx, by, cx, cy) => { + // https://en.wikipedia.org/wiki/Vector_projection#Vector_projection_2 + const ab = [bx - ax, by - ay]; + const ac = [cx - ax, cy - ay]; + const scalar = dotProduct(ab, ac) / dotProduct(ab, ab); + return [ax + scalar * ab[0], ay + scalar * ab[1]]; +}; + +/** + * Get the dot product of two vectors, represented by arrays of numbers. + * @param {Array} a the first vector + * @param {Array} b the second vector + * @returns {Number} the dot product of a and b + */ +const dotProduct = (a, b) => { + return a.reduce((prev, curr, i) => { + return prev + curr * b[i]; + }, 0); +}; + +/** + * Determine if the given x/y coords are above the given point. + * @param {Number} x the x coordinate of the click + * @param {Number} y the y coordinate of the click + * @param {Number} pointX the x coordinate of the center of the point + * @param {Number} pointY the y coordinate of the center of the point + * @param {Number} radiusX the x radius of the point + * @param {Number} radiusY the y radius of the point + * @returns {Boolean} whether the click was on the point + */ +const clickedOnPoint = (x, y, pointX, pointY, radiusX, radiusY) => { + return ( + x >= pointX - radiusX && + x <= pointX + radiusX && + y >= pointY - radiusY && + y <= pointY + radiusY + ); +}; + +const roundTo = (value, exp) => { + // If the exp is undefined or zero... + if (typeof exp === "undefined" || +exp === 0) { + return Math.round(value); + } + value = +value; + exp = +exp; + // If the value is not a number or the exp is not an integer... + if (isNaN(value) || !(typeof exp === "number" && exp % 1 === 0)) { + return NaN; + } + // Shift + value = value.toString().split("e"); + value = Math.round(+(value[0] + "e" + (value[1] ? +value[1] - exp : -exp))); + // Shift back + value = value.toString().split("e"); + return +(value[0] + "e" + (value[1] ? +value[1] + exp : exp)); +}; + +exports.getDistance = getDistance; +exports.clickedOnEllipseEdge = clickedOnEllipseEdge; +exports.distanceToLine = distanceToLine; +exports.projection = projection; +exports.clickedOnPoint = clickedOnPoint; +exports.roundTo = roundTo; diff --git a/devtools/server/actors/utils/source-map-utils.js b/devtools/server/actors/utils/source-map-utils.js new file mode 100644 index 0000000000..fccd0d67bf --- /dev/null +++ b/devtools/server/actors/utils/source-map-utils.js @@ -0,0 +1,42 @@ +/* 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"; + +exports.getSourcemapBaseURL = getSourcemapBaseURL; +function getSourcemapBaseURL(url, global) { + let sourceMapBaseURL = null; + if (url) { + // Sources that have explicit URLs can be used directly as the base. + sourceMapBaseURL = url; + } else if (global?.location?.href) { + // If there is no URL for the source, the map comment is relative to the + // page being viewed, so we use the document href. + sourceMapBaseURL = global?.location?.href; + } else { + // If there is no valid base, the sourcemap URL will need to be an absolute + // URL of some kind. + return null; + } + + // A data URL is large and will never be a valid base, so we can just treat + // it as if there is no base at all to avoid a sending it to the client + // for no reason. + if (sourceMapBaseURL.startsWith("data:")) { + return null; + } + + // If the base URL is a blob, we want to resolve relative to the origin + // that created the blob URL, if there is one. + if (sourceMapBaseURL.startsWith("blob:")) { + try { + const parsedBaseURL = new URL(sourceMapBaseURL); + return parsedBaseURL.origin === "null" ? null : parsedBaseURL.origin; + } catch (err) { + return null; + } + } + + return sourceMapBaseURL; +} diff --git a/devtools/server/actors/utils/source-url.js b/devtools/server/actors/utils/source-url.js new file mode 100644 index 0000000000..be80025e46 --- /dev/null +++ b/devtools/server/actors/utils/source-url.js @@ -0,0 +1,44 @@ +/* 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"; + +/** + * Debugger.Source objects have a `url` property that exposes the value + * that was passed to SpiderMonkey, but unfortunately often SpiderMonkey + * sets a URL even in cases where it doesn't make sense, so we have to + * explicitly ignore the URL value in these contexts to keep things a bit + * more consistent. + * + * @param {Debugger.Source} source + * + * @return {string | null} + */ +function getDebuggerSourceURL(source) { + const introType = source.introductionType; + + // These are all the sources that are eval or eval-like, but may still have + // a URL set on the source, so we explicitly ignore the source URL for these. + if ( + introType === "injectedScript" || + introType === "eval" || + introType === "debugger eval" || + introType === "Function" || + introType === "javascriptURL" || + introType === "eventHandler" || + introType === "domTimer" + ) { + return null; + } + // When using <iframe srcdoc="<script> js source </script>"/>, we can't easily fetch the srcdoc + // full html text content. So, consider each inline script as independant source with + // their own URL. Thus the ID appended to each URL. + if (source.url == "about:srcdoc") { + return source.url + "#" + source.id; + } + + return source.url; +} + +exports.getDebuggerSourceURL = getDebuggerSourceURL; diff --git a/devtools/server/actors/utils/sources-manager.js b/devtools/server/actors/utils/sources-manager.js new file mode 100644 index 0000000000..b80da69bfa --- /dev/null +++ b/devtools/server/actors/utils/sources-manager.js @@ -0,0 +1,515 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const DevToolsUtils = require("resource://devtools/shared/DevToolsUtils.js"); +const { assert, fetch } = DevToolsUtils; +const EventEmitter = require("resource://devtools/shared/event-emitter.js"); +const { + SourceLocation, +} = require("resource://devtools/server/actors/common.js"); + +loader.lazyRequireGetter( + this, + "SourceActor", + "resource://devtools/server/actors/source.js", + true +); + +/** + * Matches strings of the form "foo.min.js" or "foo-min.js", etc. If the regular + * expression matches, we can be fairly sure that the source is minified, and + * treat it as such. + */ +const MINIFIED_SOURCE_REGEXP = /\bmin\.js$/; + +/** + * Manages the sources for a thread. Handles URL contents, locations in + * the sources, etc for ThreadActors. + */ +class SourcesManager extends EventEmitter { + constructor(threadActor) { + super(); + this._thread = threadActor; + + this.blackBoxedSources = new Map(); + + // Debugger.Source -> SourceActor + this._sourceActors = new Map(); + + // URL -> content + // + // Any possibly incomplete content that has been loaded for each URL. + this._urlContents = new Map(); + + // URL -> Promise[] + // + // Any promises waiting on a URL to be completely loaded. + this._urlWaiters = new Map(); + + // Debugger.Source.id -> Debugger.Source + // + // The IDs associated with ScriptSources and available via DebuggerSource.id + // are internal to this process and should not be exposed to the client. This + // map associates these IDs with the corresponding source, provided the source + // has not been GC'ed and the actor has been created. This is lazily populated + // the first time it is needed. + this._sourcesByInternalSourceId = null; + + if (!isWorker) { + Services.obs.addObserver(this, "devtools-html-content"); + } + } + + destroy() { + if (!isWorker) { + Services.obs.removeObserver(this, "devtools-html-content"); + } + } + + /** + * Clear existing sources so they are recreated on the next access. + */ + reset() { + this._sourceActors = new Map(); + this._urlContents = new Map(); + this._urlWaiters = new Map(); + this._sourcesByInternalSourceId = null; + } + + /** + * Create a source actor representing this source. + * + * @param Debugger.Source source + * The source to make an actor for. + * @returns a SourceActor representing the source. + */ + createSourceActor(source) { + assert(source, "SourcesManager.prototype.source needs a source"); + + if (this._sourceActors.has(source)) { + return this._sourceActors.get(source); + } + + const actor = new SourceActor({ + thread: this._thread, + source, + }); + + this._thread.threadLifetimePool.manage(actor); + + this._sourceActors.set(source, actor); + if (this._sourcesByInternalSourceId && source.id) { + this._sourcesByInternalSourceId.set(source.id, source); + } + + this.emit("newSource", actor); + return actor; + } + + _getSourceActor(source) { + if (this._sourceActors.has(source)) { + return this._sourceActors.get(source); + } + + return null; + } + + hasSourceActor(source) { + return !!this._getSourceActor(source); + } + + getSourceActor(source) { + const sourceActor = this._getSourceActor(source); + + if (!sourceActor) { + throw new Error( + "getSource: could not find source actor for " + (source.url || "source") + ); + } + + return sourceActor; + } + + getOrCreateSourceActor(source) { + // Tolerate the source coming from a different Debugger than the one + // associated with the thread. + try { + source = this._thread.dbg.adoptSource(source); + } catch (e) { + // We can't create actors for sources in the same compartment as the + // thread's Debugger. + if (/is in the same compartment as this debugger/.test(e)) { + return null; + } + throw e; + } + + if (this.hasSourceActor(source)) { + return this.getSourceActor(source); + } + return this.createSourceActor(source); + } + + getSourceActorByInternalSourceId(id) { + if (!this._sourcesByInternalSourceId) { + this._sourcesByInternalSourceId = new Map(); + for (const source of this._thread.dbg.findSources()) { + if (source.id) { + this._sourcesByInternalSourceId.set(source.id, source); + } + } + } + const source = this._sourcesByInternalSourceId.get(id); + if (source) { + return this.getOrCreateSourceActor(source); + } + return null; + } + + getSourceActorsByURL(url) { + const rv = []; + if (url) { + for (const [, actor] of this._sourceActors) { + if (actor.url === url) { + rv.push(actor); + } + } + } + return rv; + } + + getSourceActorById(actorId) { + for (const [, actor] of this._sourceActors) { + if (actor.actorID == actorId) { + return actor; + } + } + return null; + } + + /** + * Returns true if the URL likely points to a minified resource, false + * otherwise. + * + * @param String uri + * The url to test. + * @returns Boolean + */ + _isMinifiedURL(uri) { + if (!uri) { + return false; + } + + try { + const url = new URL(uri); + const pathname = url.pathname; + return MINIFIED_SOURCE_REGEXP.test( + pathname.slice(pathname.lastIndexOf("/") + 1) + ); + } catch (e) { + // Not a valid URL so don't try to parse out the filename, just test the + // whole thing with the minified source regexp. + return MINIFIED_SOURCE_REGEXP.test(uri); + } + } + + /** + * Return the non-source-mapped location of an offset in a script. + * + * @param Debugger.Script script + * The script associated with the offset. + * @param Number offset + * Offset within the script of the location. + * @returns Object + * Returns an object of the form { source, line, column } + */ + getScriptOffsetLocation(script, offset) { + const { lineNumber, columnNumber } = script.getOffsetMetadata(offset); + // NOTE: Debugger.Source.prototype.startColumn is 1-based. + // Convert to 0-based, while keeping the wasm's column (1) as is. + // (bug 1863878) + const columnBase = script.format === "wasm" ? 0 : 1; + return new SourceLocation( + this.createSourceActor(script.source), + lineNumber, + columnNumber - columnBase + ); + } + + /** + * Return the non-source-mapped location of the given Debugger.Frame. If the + * frame does not have a script, the location's properties are all null. + * + * @param Debugger.Frame frame + * The frame whose location we are getting. + * @returns Object + * Returns an object of the form { source, line, column } + */ + getFrameLocation(frame) { + if (!frame || !frame.script) { + return new SourceLocation(); + } + return this.getScriptOffsetLocation(frame.script, frame.offset); + } + + /** + * Returns true if URL for the given source is black boxed. + * + * * @param url String + * The URL of the source which we are checking whether it is black + * boxed or not. + */ + isBlackBoxed(url, line, column) { + if (!this.blackBoxedSources.has(url)) { + return false; + } + + const ranges = this.blackBoxedSources.get(url); + + // If we have an entry in the map, but it is falsy, the source is fully blackboxed. + if (!ranges) { + return true; + } + + const range = ranges.find(r => isLocationInRange({ line, column }, r)); + return !!range; + } + + isFrameBlackBoxed(frame) { + const { url, line, column } = this.getFrameLocation(frame); + return this.isBlackBoxed(url, line, column); + } + + clearAllBlackBoxing() { + this.blackBoxedSources.clear(); + } + + /** + * Add the given source URL to the set of sources that are black boxed. + * + * @param url String + * The URL of the source which we are black boxing. + */ + blackBox(url, range) { + if (!range) { + // blackbox the whole source + return this.blackBoxedSources.set(url, null); + } + + const ranges = this.blackBoxedSources.get(url) || []; + // ranges are sorted in ascening order + const index = ranges.findIndex( + r => r.end.line <= range.start.line && r.end.column <= range.start.column + ); + + ranges.splice(index + 1, 0, range); + this.blackBoxedSources.set(url, ranges); + return true; + } + + /** + * Remove the given source URL to the set of sources that are black boxed. + * + * @param url String + * The URL of the source which we are no longer black boxing. + */ + unblackBox(url, range) { + if (!range) { + return this.blackBoxedSources.delete(url); + } + + const ranges = this.blackBoxedSources.get(url); + const index = ranges.findIndex( + r => + r.start.line === range.start.line && + r.start.column === range.start.column && + r.end.line === range.end.line && + r.end.column === range.end.column + ); + + if (index !== -1) { + ranges.splice(index, 1); + } + + if (ranges.length === 0) { + return this.blackBoxedSources.delete(url); + } + + return this.blackBoxedSources.set(url, ranges); + } + + iter() { + return [...this._sourceActors.values()]; + } + + /** + * Listener for new HTML content. + */ + observe(subject, topic, data) { + if (topic == "devtools-html-content") { + const { parserID, uri, contents, complete } = JSON.parse(data); + if (this._urlContents.has(uri)) { + // We received many devtools-html-content events, if we already received one, + // aggregate the data with the one we already received. + const existing = this._urlContents.get(uri); + if (existing.parserID == parserID) { + assert(!existing.complete); + existing.content = existing.content + contents; + existing.complete = complete; + + // After the HTML has finished loading, resolve any promises + // waiting for the complete file contents. Waits will only + // occur when the URL was ever partially loaded. + if (complete) { + const waiters = this._urlWaiters.get(uri); + if (waiters) { + for (const waiter of waiters) { + waiter(); + } + this._urlWaiters.delete(uri); + } + } + } + } else if (contents) { + // Ensure that `contents` is non-empty. We may miss all the devtools-html-content events except the last + // one which has a empty `contents` and complete set to true. + // This reproduces when opening a same-process iframe. In this particular scenario, we instantiate the target and thread actor + // on `DOMDocElementInserted` and the HTML document is already parsed, but we still receive this one very last notification. + this._urlContents.set(uri, { + content: contents, + complete, + contentType: "text/html", + parserID, + }); + } + } + } + + /** + * Get the contents of a URL, fetching it if necessary. If partial is set and + * any content for the URL has been received, that partial content is returned + * synchronously. + */ + urlContents(url, partial, canUseCache) { + if (this._urlContents.has(url)) { + const data = this._urlContents.get(url); + if (!partial && !data.complete) { + return new Promise(resolve => { + if (!this._urlWaiters.has(url)) { + this._urlWaiters.set(url, []); + } + this._urlWaiters.get(url).push(resolve); + }).then(() => { + assert(data.complete); + return { + content: data.content, + contentType: data.contentType, + }; + }); + } + return { + content: data.content, + contentType: data.contentType, + }; + } + if (partial) { + return { + content: "", + contentType: "", + }; + } + return this._fetchURLContents(url, partial, canUseCache); + } + + async _fetchURLContents(url, partial, canUseCache) { + // Only try the cache if it is currently enabled for the document. + // Without this check, the cache may return stale data that doesn't match + // the document shown in the browser. + let loadFromCache = canUseCache; + if (canUseCache && this._thread._parent.browsingContext) { + loadFromCache = !( + this._thread._parent.browsingContext.defaultLoadFlags === + Ci.nsIRequest.LOAD_BYPASS_CACHE + ); + } + + // Fetch the sources with the same principal as the original document + const win = this._thread._parent.window; + let principal, cacheKey; + // On xpcshell, we don't have a window but a Sandbox + if (!isWorker && win instanceof Ci.nsIDOMWindow) { + const docShell = win.docShell; + const channel = docShell.currentDocumentChannel; + principal = channel.loadInfo.loadingPrincipal; + + // Retrieve the cacheKey in order to load POST requests from cache + // Note that chrome:// URLs don't support this interface. + if ( + loadFromCache && + docShell.currentDocumentChannel instanceof Ci.nsICacheInfoChannel + ) { + cacheKey = docShell.currentDocumentChannel.cacheKey; + } + } + + let result; + try { + result = await fetch(url, { + principal, + cacheKey, + loadFromCache, + }); + } catch (error) { + this._reportLoadSourceError(error); + throw error; + } + + // When we fetch the contents, there is a risk that the contents we get + // do not match up with the actual text of the sources these contents will + // be associated with. We want to always show contents that include that + // actual text (otherwise it will be very confusing or unusable for users), + // so replace the contents with the actual text if there is a mismatch. + const actors = [...this._sourceActors.values()].filter( + actor => actor.url == url + ); + if (!actors.every(actor => actor.contentMatches(result))) { + if (actors.length > 1) { + // When there are multiple actors we won't be able to show the source + // for all of them. Ask the user to reload so that we don't have to do + // any fetching. + result.content = "Error: Incorrect contents fetched, please reload."; + } else { + result.content = actors[0].actualText(); + } + } + + this._urlContents.set(url, { ...result, complete: true }); + + return result; + } + + _reportLoadSourceError(error) { + try { + DevToolsUtils.reportException("SourceActor", error); + + const lines = JSON.stringify(this.form(), null, 4).split(/\n/g); + lines.forEach(line => console.error("\t", line)); + } catch (e) { + // ignore + } + } +} + +function isLocationInRange({ line, column }, range) { + return ( + (range.start.line <= line || + (range.start.line == line && range.start.column <= column)) && + (range.end.line >= line || + (range.end.line == line && range.end.column >= column)) + ); +} + +exports.SourcesManager = SourcesManager; diff --git a/devtools/server/actors/utils/stack.js b/devtools/server/actors/utils/stack.js new file mode 100644 index 0000000000..6a216b252c --- /dev/null +++ b/devtools/server/actors/utils/stack.js @@ -0,0 +1,183 @@ +/* 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"; + +/** + * A helper class that stores stack frame objects. Each frame is + * assigned an index, and if a frame is added more than once, the same + * index is used. Users of the class can get an array of all frames + * that have been added. + */ +class StackFrameCache { + /** + * Initialize this object. + */ + constructor() { + this._framesToIndices = null; + this._framesToForms = null; + this._lastEventSize = 0; + } + + /** + * Prepare to accept frames. + */ + initFrames() { + if (this._framesToIndices) { + // The maps are already initialized. + return; + } + + this._framesToIndices = new Map(); + this._framesToForms = new Map(); + this._lastEventSize = 0; + } + + /** + * Forget all stored frames and reset to the initialized state. + */ + clearFrames() { + this._framesToIndices.clear(); + this._framesToIndices = null; + this._framesToForms.clear(); + this._framesToForms = null; + this._lastEventSize = 0; + } + + /** + * Add a frame to this stack frame cache, and return the index of + * the frame. + */ + addFrame(frame) { + this._assignFrameIndices(frame); + this._createFrameForms(frame); + return this._framesToIndices.get(frame); + } + + /** + * A helper method for the memory actor. This populates the packet + * object with "frames" property. Each of these + * properties will be an array indexed by frame ID. "frames" will + * contain frame objects (see makeEvent). + * + * @param packet + * The packet to update. + * + * @returns packet + */ + updateFramePacket(packet) { + // Now that we are guaranteed to have a form for every frame, we know the + // size the "frames" property's array must be. We use that information to + // create dense arrays even though we populate them out of order. + const size = this._framesToForms.size; + packet.frames = Array(size).fill(null); + + // Populate the "frames" properties. + for (const [stack, index] of this._framesToIndices) { + packet.frames[index] = this._framesToForms.get(stack); + } + + return packet; + } + + /** + * If any new stack frames have been added to this cache since the + * last call to makeEvent (clearing the cache also resets the "last + * call"), then return a new array describing the new frames. If no + * new frames are available, return null. + * + * The frame cache assumes that the user of the cache keeps track of + * all previously-returned arrays and, in theory, concatenates them + * all to form a single array holding all frames added to the cache + * since the last reset. This concatenated array can be indexed by + * the frame ID. The array returned by this function, though, is + * dense and starts at 0. + * + * Each element in the array is an object of the form: + * { + * line: <line number for this frame>, + * column: <column number for this frame>, + * source: <filename string for this frame>, + * functionDisplayName: <this frame's inferred function name function or null>, + * parent: <frame ID -- an index into the concatenated array mentioned above> + * asyncCause: the async cause, or null + * asyncParent: <frame ID -- an index into the concatenated array mentioned above> + * } + * + * The intent of this approach is to make it simpler to efficiently + * send frame information over the debugging protocol, by only + * sending new frames. + * + * @returns array or null + */ + makeEvent() { + const size = this._framesToForms.size; + if (!size || size <= this._lastEventSize) { + return null; + } + + const packet = Array(size - this._lastEventSize).fill(null); + for (const [stack, index] of this._framesToIndices) { + if (index >= this._lastEventSize) { + packet[index - this._lastEventSize] = this._framesToForms.get(stack); + } + } + + this._lastEventSize = size; + + return packet; + } + + /** + * Assigns an index to the given frame and its parents, if an index is not + * already assigned. + * + * @param SavedFrame frame + * A frame to assign an index to. + */ + _assignFrameIndices(frame) { + if (this._framesToIndices.has(frame)) { + return; + } + + if (frame) { + this._assignFrameIndices(frame.parent); + this._assignFrameIndices(frame.asyncParent); + } + + const index = this._framesToIndices.size; + this._framesToIndices.set(frame, index); + } + + /** + * Create the form for the given frame, if one doesn't already exist. + * + * @param SavedFrame frame + * A frame to create a form for. + */ + _createFrameForms(frame) { + if (this._framesToForms.has(frame)) { + return; + } + + let form = null; + if (frame) { + form = { + line: frame.line, + column: frame.column, + source: frame.source, + functionDisplayName: frame.functionDisplayName, + parent: this._framesToIndices.get(frame.parent), + asyncParent: this._framesToIndices.get(frame.asyncParent), + asyncCause: frame.asyncCause, + }; + this._createFrameForms(frame.parent); + this._createFrameForms(frame.asyncParent); + } + + this._framesToForms.set(frame, form); + } +} + +exports.StackFrameCache = StackFrameCache; diff --git a/devtools/server/actors/utils/style-utils.js b/devtools/server/actors/utils/style-utils.js new file mode 100644 index 0000000000..5f2e912002 --- /dev/null +++ b/devtools/server/actors/utils/style-utils.js @@ -0,0 +1,211 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const { getCSSLexer } = require("resource://devtools/shared/css/lexer.js"); + +const XHTML_NS = "http://www.w3.org/1999/xhtml"; +const FONT_PREVIEW_TEXT = "Abc"; +const FONT_PREVIEW_FONT_SIZE = 40; +const FONT_PREVIEW_FILLSTYLE = "black"; +// Offset (in px) to avoid cutting off text edges of italic fonts. +const FONT_PREVIEW_OFFSET = 4; +// Factor used to resize the canvas in order to get better text quality. +const FONT_PREVIEW_OVERSAMPLING_FACTOR = 2; + +/** + * Helper function for getting an image preview of the given font. + * + * @param font {string} + * Name of font to preview + * @param doc {Document} + * Document to use to render font + * @param options {object} + * Object with options 'previewText' and 'previewFontSize' + * + * @return dataUrl + * The data URI of the font preview image + */ +function getFontPreviewData(font, doc, options) { + options = options || {}; + const previewText = options.previewText || FONT_PREVIEW_TEXT; + const previewTextLines = previewText.split("\n"); + const previewFontSize = options.previewFontSize || FONT_PREVIEW_FONT_SIZE; + const fillStyle = options.fillStyle || FONT_PREVIEW_FILLSTYLE; + const fontStyle = options.fontStyle || ""; + + const canvas = doc.createElementNS(XHTML_NS, "canvas"); + const ctx = canvas.getContext("2d"); + const fontValue = + fontStyle + " " + previewFontSize + "px " + font + ", serif"; + + // Get the correct preview text measurements and set the canvas dimensions + ctx.font = fontValue; + ctx.fillStyle = fillStyle; + const previewTextLinesWidths = previewTextLines.map( + previewTextLine => ctx.measureText(previewTextLine).width + ); + const textWidth = Math.round(Math.max(...previewTextLinesWidths)); + + // The canvas width is calculated as the width of the longest line plus + // an offset at the left and right of it. + // The canvas height is calculated as the font size multiplied by the + // number of lines plus an offset at the top and bottom. + // + // In order to get better text quality, we oversample the canvas. + // That means, after the width and height are calculated, we increase + // both sizes by some factor. + const simpleCanvasWidth = textWidth + FONT_PREVIEW_OFFSET * 2; + canvas.width = simpleCanvasWidth * FONT_PREVIEW_OVERSAMPLING_FACTOR; + canvas.height = + (previewFontSize * previewTextLines.length + FONT_PREVIEW_OFFSET * 2) * + FONT_PREVIEW_OVERSAMPLING_FACTOR; + + // we have to reset these after changing the canvas size + ctx.font = fontValue; + ctx.fillStyle = fillStyle; + + // Oversample the canvas for better text quality + ctx.scale(FONT_PREVIEW_OVERSAMPLING_FACTOR, FONT_PREVIEW_OVERSAMPLING_FACTOR); + + ctx.textBaseline = "top"; + ctx.textAlign = "center"; + const horizontalTextPosition = simpleCanvasWidth / 2; + let verticalTextPosition = FONT_PREVIEW_OFFSET; + for (let i = 0; i < previewTextLines.length; i++) { + ctx.fillText( + previewTextLines[i], + horizontalTextPosition, + verticalTextPosition + ); + + // Move vertical text position one line down + verticalTextPosition += previewFontSize; + } + + const dataURL = canvas.toDataURL("image/png"); + + return { + dataURL, + size: textWidth + FONT_PREVIEW_OFFSET * 2, + }; +} + +exports.getFontPreviewData = getFontPreviewData; + +/** + * Get the text content of a rule given some CSS text, a line and a column + * Consider the following example: + * body { + * color: red; + * } + * p { + * line-height: 2em; + * color: blue; + * } + * Calling the function with the whole text above and line=4 and column=1 would + * return "line-height: 2em; color: blue;" + * @param {String} initialText + * @param {Number} line (1-indexed) + * @param {Number} column (1-indexed) + * @return {object} An object of the form {offset: number, text: string} + * The offset is the index into the input string where + * the rule text started. The text is the content of + * the rule. + */ +function getRuleText(initialText, line, column) { + if (typeof line === "undefined" || typeof column === "undefined") { + throw new Error("Location information is missing"); + } + + const { offset: textOffset, text } = getTextAtLineColumn( + initialText, + line, + column + ); + const lexer = getCSSLexer(text); + + // Search forward for the opening brace. + while (true) { + const token = lexer.nextToken(); + if (!token) { + throw new Error("couldn't find start of the rule"); + } + if (token.tokenType === "symbol" && token.text === "{") { + break; + } + } + + // Now collect text until we see the matching close brace. + let braceDepth = 1; + let startOffset, endOffset; + while (true) { + const token = lexer.nextToken(); + if (!token) { + break; + } + if (startOffset === undefined) { + startOffset = token.startOffset; + } + if (token.tokenType === "symbol") { + if (token.text === "{") { + ++braceDepth; + } else if (token.text === "}") { + --braceDepth; + if (braceDepth == 0) { + break; + } + } + } + endOffset = token.endOffset; + } + + // If the rule was of the form "selector {" with no closing brace + // and no properties, just return an empty string. + if (startOffset === undefined) { + return { offset: 0, text: "" }; + } + // If the input didn't have any tokens between the braces (e.g., + // "div {}"), then the endOffset won't have been set yet; so account + // for that here. + if (endOffset === undefined) { + endOffset = startOffset; + } + + // Note that this approach will preserve comments, despite the fact + // that cssTokenizer skips them. + return { + offset: textOffset + startOffset, + text: text.substring(startOffset, endOffset), + }; +} + +exports.getRuleText = getRuleText; + +/** + * Return the offset and substring of |text| that starts at the given + * line and column. + * @param {String} text + * @param {Number} line (1-indexed) + * @param {Number} column (1-indexed) + * @return {object} An object of the form {offset: number, text: string}, + * where the offset is the offset into the input string + * where the text starts, and where text is the text. + */ +function getTextAtLineColumn(text, line, column) { + let offset; + if (line > 1) { + const rx = new RegExp( + "(?:[^\\r\\n\\f]*(?:\\r\\n|\\n|\\r|\\f)){" + (line - 1) + "}" + ); + offset = rx.exec(text)[0].length; + } else { + offset = 0; + } + offset += column - 1; + return { offset, text: text.substr(offset) }; +} + +exports.getTextAtLineColumn = getTextAtLineColumn; diff --git a/devtools/server/actors/utils/stylesheet-utils.js b/devtools/server/actors/utils/stylesheet-utils.js new file mode 100644 index 0000000000..682a752c3d --- /dev/null +++ b/devtools/server/actors/utils/stylesheet-utils.js @@ -0,0 +1,155 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const { fetch } = require("resource://devtools/shared/DevToolsUtils.js"); + +/** + * For imported stylesheets, `ownerNode` is null. + * + * To resolve the ownerNode for an imported stylesheet, loop on `parentStylesheet` + * until we reach the topmost stylesheet, which should have a valid ownerNode. + * + * Constructable stylesheets do not have an owner node and this method will + * return null. + * + * @param {StyleSheet} + * The stylesheet for which we want to retrieve the ownerNode. + * @return {DOMNode|null} The ownerNode or null for constructable stylesheets. + */ +function getStyleSheetOwnerNode(sheet) { + // If this is not an imported stylesheet and we have an ownerNode available + // bail out immediately. + if (sheet.ownerNode) { + return sheet.ownerNode; + } + + let parentStyleSheet = sheet; + while ( + parentStyleSheet.parentStyleSheet && + parentStyleSheet !== parentStyleSheet.parentStyleSheet + ) { + parentStyleSheet = parentStyleSheet.parentStyleSheet; + } + + return parentStyleSheet.ownerNode; +} + +exports.getStyleSheetOwnerNode = getStyleSheetOwnerNode; + +/** + * Get the text of a stylesheet. + * + * TODO: A call site in window-global.js expects this method to return a promise + * so it is mandatory to keep it as an async function even if we are not using + * await explicitly. Bug 1810572. + * + * @param {StyleSheet} + * The stylesheet for which we want to retrieve the text. + * @returns {Promise} + */ +async function getStyleSheetText(styleSheet) { + if (!styleSheet.href) { + if (styleSheet.ownerNode) { + // this is an inline <style> sheet + return styleSheet.ownerNode.textContent; + } + // Constructed stylesheet. + // TODO(bug 1769933, bug 1809108): Maybe preserve authored text? + return ""; + } + + return fetchStyleSheetText(styleSheet); +} + +exports.getStyleSheetText = getStyleSheetText; + +/** + * Retrieve the content of a given stylesheet + * + * @param {StyleSheet} styleSheet + * @returns {String} + */ +async function fetchStyleSheetText(styleSheet) { + const href = styleSheet.href; + + const options = { + loadFromCache: true, + policy: Ci.nsIContentPolicy.TYPE_INTERNAL_STYLESHEET, + charset: getCSSCharset(styleSheet), + headers: { + // https://searchfox.org/mozilla-central/rev/68b1b0041a78abd06f19202558ccc4922e5ba759/netwerk/protocol/http/nsHttpHandler.cpp#124 + accept: "text/css,*/*;q=0.1", + }, + }; + + // Bug 1282660 - We use the system principal to load the default internal + // stylesheets instead of the content principal since such stylesheets + // require system principal to load. At meanwhile, we strip the loadGroup + // for preventing the assertion of the userContextId mismatching. + + // chrome|file|resource|moz-extension protocols rely on the system principal. + const excludedProtocolsRe = /^(chrome|file|resource|moz-extension):\/\//; + if (!excludedProtocolsRe.test(href)) { + // Stylesheets using other protocols should use the content principal. + const ownerNode = getStyleSheetOwnerNode(styleSheet); + if (ownerNode) { + // eslint-disable-next-line mozilla/use-ownerGlobal + options.window = ownerNode.ownerDocument.defaultView; + options.principal = ownerNode.ownerDocument.nodePrincipal; + } + } + + let result; + + try { + result = await fetch(href, options); + if (result.contentType !== "text/css") { + console.warn( + `stylesheets: fetch from cache returned non-css content-type ` + + `${result.contentType} for ${href}, trying without cache.` + ); + options.loadFromCache = false; + result = await fetch(href, options); + } + } catch (e) { + // The list of excluded protocols can be missing some protocols, try to use the + // system principal if the first fetch failed. + console.error( + `stylesheets: fetch failed for ${href},` + + ` using system principal instead.` + ); + options.window = undefined; + options.principal = undefined; + result = await fetch(href, options); + } + + return result.content; +} + +/** + * Get charset of a given stylesheet + * + * @param {StyleSheet} styleSheet + * @returns {String} + */ +function getCSSCharset(styleSheet) { + if (styleSheet) { + // charset attribute of <link> or <style> element, if it exists + if (styleSheet.ownerNode?.getAttribute) { + const linkCharset = styleSheet.ownerNode.getAttribute("charset"); + if (linkCharset != null) { + return linkCharset; + } + } + + // charset of referring document. + if (styleSheet.ownerNode?.ownerDocument.characterSet) { + return styleSheet.ownerNode.ownerDocument.characterSet; + } + } + + return "UTF-8"; +} diff --git a/devtools/server/actors/utils/stylesheets-manager.js b/devtools/server/actors/utils/stylesheets-manager.js new file mode 100644 index 0000000000..838e5be602 --- /dev/null +++ b/devtools/server/actors/utils/stylesheets-manager.js @@ -0,0 +1,1031 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const EventEmitter = require("resource://devtools/shared/event-emitter.js"); +const { + getSourcemapBaseURL, +} = require("resource://devtools/server/actors/utils/source-map-utils.js"); + +loader.lazyRequireGetter( + this, + ["addPseudoClassLock", "removePseudoClassLock"], + "resource://devtools/server/actors/highlighters/utils/markup.js", + true +); +loader.lazyRequireGetter( + this, + "loadSheet", + "resource://devtools/shared/layout/utils.js", + true +); +loader.lazyRequireGetter( + this, + ["getStyleSheetOwnerNode", "getStyleSheetText"], + "resource://devtools/server/actors/utils/stylesheet-utils.js", + true +); + +const TRANSITION_PSEUDO_CLASS = ":-moz-styleeditor-transitioning"; +const TRANSITION_DURATION_MS = 500; +const TRANSITION_BUFFER_MS = 1000; +const TRANSITION_RULE_SELECTOR = `:root${TRANSITION_PSEUDO_CLASS}, :root${TRANSITION_PSEUDO_CLASS} *:not(:-moz-native-anonymous)`; +const TRANSITION_SHEET = + "data:text/css;charset=utf-8," + + encodeURIComponent(` + ${TRANSITION_RULE_SELECTOR} { + transition-duration: ${TRANSITION_DURATION_MS}ms !important; + transition-delay: 0ms !important; + transition-timing-function: ease-out !important; + transition-property: all !important; + } +`); + +// The possible kinds of style-applied events. +// UPDATE_PRESERVING_RULES means that the update is guaranteed to +// preserve the number and order of rules on the style sheet. +// UPDATE_GENERAL covers any other kind of change to the style sheet. +const UPDATE_PRESERVING_RULES = 0; +const UPDATE_GENERAL = 1; + +// If the user edits a stylesheet, we stash a copy of the edited text +// here, keyed by the stylesheet. This way, if the tools are closed +// and then reopened, the edited text will be available. A weak map +// is used so that navigation by the user will eventually cause the +// edited text to be collected. +const modifiedStyleSheets = new WeakMap(); + +/** + * Manage stylesheets related to a given Target Actor. + * @emits stylesheet-updated: emitted when there was changes in a stylesheet + * First arg is an object with the following properties: + * - resourceId {String}: The id that was assigned to the stylesheet + * - updateKind {String}: Which kind of update it is ("style-applied", + * "at-rules-changed", "matches-change", "property-change") + * - updates {Object}: The update data + */ +class StyleSheetsManager extends EventEmitter { + #abortController; + // Map<resourceId, AbortController> + #mqlChangeAbortControllerMap = new Map(); + #styleSheetCount = 0; + #styleSheetMap = new Map(); + #styleSheetCreationData; + #targetActor; + #transitionSheetLoaded; + #transitionTimeout; + #watchListeners = { + onAvailable: [], + onUpdated: [], + onDestroyed: [], + }; + + /** + * @param TargetActor targetActor + * The target actor from which we should observe stylesheet changes. + */ + constructor(targetActor) { + super(); + + this.#targetActor = targetActor; + } + + #setEventListenersIfNeeded() { + if (this.#abortController) { + return; + } + + this.#abortController = new AbortController(); + const { signal } = this.#abortController; + + // Listen for new stylesheet being added via StyleSheetApplicableStateChanged + this.#targetActor.chromeEventHandler.addEventListener( + "StyleSheetApplicableStateChanged", + this.#onApplicableStateChanged, + { capture: true, signal } + ); + this.#targetActor.chromeEventHandler.addEventListener( + "StyleSheetRemoved", + this.#onStylesheetRemoved, + { capture: true, signal } + ); + + this.#watchStyleSheetChangeEvents(); + this.#targetActor.on("window-ready", this.#onTargetActorWindowReady, { + signal, + }); + } + + /** + * Calling this function will make the StyleSheetsManager start the event listeners needed + * to watch for stylesheet additions and modifications. + * This resolves once it notified about existing stylesheets. + * @param {Object} options + * @param {Function} onAvailable: Function that will be called when a stylesheet is + * registered, but also with already registered stylesheets + * if ignoreExisting is not set to true. + * This is called with a single object parameter with the following properties: + * - {String} resourceId: The id that was assigned to the stylesheet + * - {StyleSheet} styleSheet: The actual stylesheet object + * - {Object} creationData: An object with: + * - {Boolean} isCreatedByDevTools: Was the stylesheet created + * by DevTools (e.g. by the user clicking the new stylesheet + * button in the styleeditor) + * - {String} fileName + * @param {Function} onUpdated: Function that will be called when a stylesheet is updated + * This is called with a single object parameter with the following properties: + * - {String} resourceId: The id that was assigned to the stylesheet + * - {String} updateKind: Which kind of update it is ("style-applied", + * "at-rules-changed", "matches-change", "property-change") + * - {Object} updates : The update data + * @param {Function} onDestroyed: Function that will be called when a stylesheet is removed + * This is called with a single object parameter with the following properties: + * - {String} resourceId: The id that was assigned to the stylesheet + * @param {Boolean} ignoreExisting: Pass to true to avoid onAvailable to be called with + * already registered stylesheets. + */ + async watch({ onAvailable, onUpdated, onDestroyed, ignoreExisting = false }) { + if (!onAvailable && !onUpdated && !onDestroyed) { + throw new Error("Expect onAvailable, onUpdated or onDestroyed"); + } + + if (onAvailable) { + if (typeof onAvailable !== "function") { + throw new Error("onAvailable should be a function"); + } + + // Don't register the listener yet if we're ignoring existing stylesheets, we'll do + // that at the end of the function, after we processed existing stylesheets. + } + + if (onUpdated) { + if (typeof onUpdated !== "function") { + throw new Error("onUpdated should be a function"); + } + this.#watchListeners.onUpdated.push(onUpdated); + } + + if (onDestroyed) { + if (typeof onDestroyed !== "function") { + throw new Error("onDestroyed should be a function"); + } + this.#watchListeners.onDestroyed.push(onDestroyed); + } + + // Process existing stylesheets + const promises = []; + for (const window of this.#targetActor.windows) { + promises.push(this.#getStyleSheetsForWindow(window)); + } + + this.#setEventListenersIfNeeded(); + + // Finally, notify about existing stylesheets + const styleSheets = await Promise.all(promises); + const styleSheetsData = styleSheets.flat().map(styleSheet => ({ + styleSheet, + resourceId: this.#registerStyleSheet(styleSheet), + })); + + let registeredStyleSheetsPromises; + if (onAvailable && ignoreExisting !== true) { + registeredStyleSheetsPromises = styleSheetsData.map( + ({ resourceId, styleSheet }) => onAvailable({ resourceId, styleSheet }) + ); + } + + // Only register the listener after we went over the list of existing stylesheets + // so the listener is not triggered by possible calls to #registerStyleSheet earlier. + if (onAvailable) { + this.#watchListeners.onAvailable.push(onAvailable); + } + + if (registeredStyleSheetsPromises) { + await Promise.all(registeredStyleSheetsPromises); + } + } + + /** + * Remove the passed listeners + * + * @param {Object} options: See this.watch + */ + unwatch({ onAvailable, onUpdated, onDestroyed }) { + if (!this.#watchListeners) { + return; + } + + if (onAvailable) { + const index = this.#watchListeners.onAvailable.indexOf(onAvailable); + if (index !== -1) { + this.#watchListeners.onAvailable.splice(index, 1); + } + } + + if (onUpdated) { + const index = this.#watchListeners.onUpdated.indexOf(onUpdated); + if (index !== -1) { + this.#watchListeners.onUpdated.splice(index, 1); + } + } + + if (onDestroyed) { + const index = this.#watchListeners.onDestroyed.indexOf(onDestroyed); + if (index !== -1) { + this.#watchListeners.onDestroyed.splice(index, 1); + } + } + } + + #watchStyleSheetChangeEvents() { + for (const window of this.#targetActor.windows) { + this.#watchStyleSheetChangeEventsForWindow(window); + } + } + + #onTargetActorWindowReady = ({ window }) => { + this.#watchStyleSheetChangeEventsForWindow(window); + }; + + #watchStyleSheetChangeEventsForWindow(window) { + // We have to set this flag in order to get the + // StyleSheetApplicableStateChanged and StyleSheetRemoved events. See Document.webidl. + window.document.styleSheetChangeEventsEnabled = true; + } + + #unwatchStyleSheetChangeEvents() { + for (const window of this.#targetActor.windows) { + window.document.styleSheetChangeEventsEnabled = false; + } + } + + /** + * Create a new style sheet in the document with the given text. + * + * @param {Document} document + * Document that the new style sheet belong to. + * @param {string} text + * Content of style sheet. + * @param {string} fileName + * If the stylesheet adding is from file, `fileName` indicates the path. + */ + async addStyleSheet(document, text, fileName) { + const parent = document.documentElement; + const style = document.createElementNS( + "http://www.w3.org/1999/xhtml", + "style" + ); + style.setAttribute("type", "text/css"); + style.setDevtoolsAsTriggeringPrincipal(); + + if (text) { + style.appendChild(document.createTextNode(text)); + } + + // This triggers StyleSheetApplicableStateChanged event. + parent.appendChild(style); + + // This promise will be resolved when the resource for this stylesheet is available. + let resolve = null; + const promise = new Promise(r => { + resolve = r; + }); + + if (!this.#styleSheetCreationData) { + this.#styleSheetCreationData = new WeakMap(); + } + this.#styleSheetCreationData.set(style.sheet, { + isCreatedByDevTools: true, + fileName, + resolve, + }); + + await promise; + + return style.sheet; + } + + /** + * Return resourceId of the given style sheet or create one if the stylesheet wasn't + * registered yet. + * + * @params {StyleSheet} styleSheet + * @returns {String} resourceId + */ + getStyleSheetResourceId(styleSheet) { + const existingResourceId = this.#findStyleSheetResourceId(styleSheet); + if (existingResourceId) { + return existingResourceId; + } + + // If we couldn't find an associated resourceId, that means the stylesheet isn't + // registered yet. Calling #registerStyleSheet will register it and return the + // associated resourceId it computed for it. + return this.#registerStyleSheet(styleSheet); + } + + /** + * Return the associated resourceId of the given registered style sheet, or null if the + * stylesheet wasn't registered yet. + * + * @params {StyleSheet} styleSheet + * @returns {String} resourceId + */ + #findStyleSheetResourceId(styleSheet) { + for (const [ + resourceId, + existingStyleSheet, + ] of this.#styleSheetMap.entries()) { + if (styleSheet === existingStyleSheet) { + return resourceId; + } + } + + return null; + } + + /** + * Return owner node of the style sheet of the given resource id. + * + * @params {String} resourceId + * The id associated with the stylesheet + * @returns {Element|null} + */ + getOwnerNode(resourceId) { + const styleSheet = this.#styleSheetMap.get(resourceId); + return styleSheet.ownerNode; + } + + /** + * Return the index of given stylesheet of the given resource id. + * + * @params {String} resourceId + * The id associated with the stylesheet + * @returns {Number} + */ + getStyleSheetIndex(resourceId) { + const styleSheet = this.#styleSheetMap.get(resourceId); + + const styleSheets = InspectorUtils.getAllStyleSheets( + this.#targetActor.window.document, + true + ); + let i = 0; + for (const sheet of styleSheets) { + if (!this.#shouldListSheet(sheet)) { + continue; + } + if (sheet == styleSheet) { + return i; + } + i++; + } + return -1; + } + + /** + * Get the text of a stylesheet given its resourceId. + * + * @params {String} resourceId + * The id associated with the stylesheet + * @returns {String} + */ + async getText(resourceId) { + const styleSheet = this.#styleSheetMap.get(resourceId); + + const modifiedText = modifiedStyleSheets.get(styleSheet); + + // modifiedText is the content of the stylesheet updated by update function. + // In case not updating, this is undefined. + if (modifiedText !== undefined) { + return modifiedText; + } + + return getStyleSheetText(styleSheet); + } + + /** + * Toggle the disabled property of the stylesheet + * + * @params {String} resourceId + * The id associated with the stylesheet + * @return {Boolean} the disabled state after toggling. + */ + toggleDisabled(resourceId) { + const styleSheet = this.#styleSheetMap.get(resourceId); + styleSheet.disabled = !styleSheet.disabled; + + this.#notifyPropertyChanged(resourceId, "disabled", styleSheet.disabled); + + return styleSheet.disabled; + } + + /** + * Update the style sheet in place with new text. + * + * @param {String} resourceId + * @param {String} text + * New text. + * @param {Object} options + * @param {Boolean} options.transition + * Whether to do CSS transition for change. Defaults to false. + * @param {Number} options.kind + * Either UPDATE_PRESERVING_RULES or UPDATE_GENERAL. Defaults to UPDATE_GENERAL. + * @param {String} options.cause + * Indicates the cause of this update (e.g. "styleeditor") if this was called + * from the stylesheet to be edited by the user from the StyleEditor. + */ + async setStyleSheetText( + resourceId, + text, + { transition = false, kind = UPDATE_GENERAL, cause = "" } = {} + ) { + const styleSheet = this.#styleSheetMap.get(resourceId); + InspectorUtils.parseStyleSheet(styleSheet, text); + modifiedStyleSheets.set(styleSheet, text); + + const { atRules, ruleCount } = + this.getStyleSheetRuleCountAndAtRules(styleSheet); + + if (kind !== UPDATE_PRESERVING_RULES) { + this.#notifyPropertyChanged(resourceId, "ruleCount", ruleCount); + } + + if (transition) { + this.#startTransition(resourceId, kind, cause); + } else { + this.#onStyleSheetUpdated({ + resourceId, + updateKind: "style-applied", + updates: { + event: { kind, cause }, + }, + }); + } + + this.#onStyleSheetUpdated({ + resourceId, + updateKind: "at-rules-changed", + updates: { + resourceUpdates: { atRules }, + }, + }); + } + + /** + * Applies a transition to the stylesheet document so any change made by the user in the + * client will be animated so it's more visible. + * + * @param {String} resourceId + * The id associated with the stylesheet + * @param {Number} kind + * Either UPDATE_PRESERVING_RULES or UPDATE_GENERAL + * @param {String} cause + * Indicates the cause of this update (e.g. "styleeditor") if this was called + * from the stylesheet to be edited by the user from the StyleEditor. + */ + #startTransition(resourceId, kind, cause) { + const styleSheet = this.#styleSheetMap.get(resourceId); + const document = styleSheet.associatedDocument; + const window = document.ownerGlobal; + + if (!this.#transitionSheetLoaded) { + this.#transitionSheetLoaded = true; + // We don't remove this sheet. It uses an internal selector that + // we only apply via locks, so there's no need to load and unload + // it all the time. + loadSheet(window, TRANSITION_SHEET); + } + + addPseudoClassLock(document.documentElement, TRANSITION_PSEUDO_CLASS); + + // Set up clean up and commit after transition duration (+buffer) + // @see #onTransitionEnd + window.clearTimeout(this.#transitionTimeout); + this.#transitionTimeout = window.setTimeout( + this.#onTransitionEnd.bind(this, resourceId, kind, cause), + TRANSITION_DURATION_MS + TRANSITION_BUFFER_MS + ); + } + + /** + * @param {String} resourceId + * The id associated with the stylesheet + * @param {Number} kind + * Either UPDATE_PRESERVING_RULES or UPDATE_GENERAL + * @param {String} cause + * Indicates the cause of this update (e.g. "styleeditor") if this was called + * from the stylesheet to be edited by the user from the StyleEditor. + */ + #onTransitionEnd(resourceId, kind, cause) { + const styleSheet = this.#styleSheetMap.get(resourceId); + const document = styleSheet.associatedDocument; + + this.#transitionTimeout = null; + removePseudoClassLock(document.documentElement, TRANSITION_PSEUDO_CLASS); + + this.#onStyleSheetUpdated({ + resourceId, + updateKind: "style-applied", + updates: { + event: { kind, cause }, + }, + }); + } + + /** + * Retrieve the CSSRuleList of a given stylesheet + * + * @param {StyleSheet} styleSheet + * @returns {CSSRuleList} + */ + #getCSSRules(styleSheet) { + try { + return styleSheet.cssRules; + } catch (e) { + // sheet isn't loaded yet + } + + if (!styleSheet.ownerNode) { + return Promise.resolve([]); + } + + return new Promise(resolve => { + styleSheet.ownerNode.addEventListener( + "load", + () => resolve(styleSheet.cssRules), + { once: true } + ); + }); + } + + /** + * Get the stylesheets imported by a given stylesheet (via @import) + * + * @param {Document} document + * @param {StyleSheet} styleSheet + * @returns Array<StyleSheet> + */ + async #getImportedStyleSheets(document, styleSheet) { + const importedStyleSheets = []; + + for (const rule of await this.#getCSSRules(styleSheet)) { + const ruleClassName = ChromeUtils.getClassName(rule); + if (ruleClassName == "CSSImportRule") { + // With the Gecko style system, the associated styleSheet may be null + // if it has already been seen because an import cycle for the same + // URL. With Stylo, the styleSheet will exist (which is correct per + // the latest CSSOM spec), so we also need to check ancestors for the + // same URL to avoid cycles. + if ( + !rule.styleSheet || + this.#haveAncestorWithSameURL(rule.styleSheet) || + !this.#shouldListSheet(rule.styleSheet) + ) { + continue; + } + + importedStyleSheets.push(rule.styleSheet); + + // recurse imports in this stylesheet as well + const children = await this.#getImportedStyleSheets( + document, + rule.styleSheet + ); + importedStyleSheets.push(...children); + } else if (ruleClassName != "CSSCharsetRule") { + // @import rules must precede all others except @charset + break; + } + } + + return importedStyleSheets; + } + + /** + * Retrieve the total number of rules (including nested ones) and + * all the at-rules of a given stylesheet. + * + * @param {StyleSheet} styleSheet + * @returns {Object} An object of the following shape: + * - {Integer} ruleCount: The total number of rules in the stylesheet + * - {Array<Object>} atRules: An array of object of the following shape: + * - type {String} + * - conditionText {String} + * - matches {Boolean}: true if the media rule matches the current state of the document + * - layerName {String} + * - line {Number} + * - column {Number} + */ + getStyleSheetRuleCountAndAtRules(styleSheet) { + const resourceId = this.#findStyleSheetResourceId(styleSheet); + if (!resourceId) { + return []; + } + + if (this.#mqlChangeAbortControllerMap.has(resourceId)) { + this.#mqlChangeAbortControllerMap.get(resourceId).abort(); + this.#mqlChangeAbortControllerMap.delete(resourceId); + } + + // Accessing the stylesheet associated window might be slow due to cross compartment + // wrappers, so only retrieve it if it's needed. + let win; + const getStyleSheetAssociatedWindow = () => { + if (!win) { + win = styleSheet.associatedDocument?.ownerGlobal; + } + return win; + }; + + const styleSheetRules = + InspectorUtils.getAllStyleSheetCSSStyleRules(styleSheet); + const ruleCount = styleSheetRules.length; + // We need to go through nested rules to extract all the rules we're interested in + const atRules = []; + for (const rule of styleSheetRules) { + const className = ChromeUtils.getClassName(rule); + if (className === "CSSMediaRule") { + let matches = false; + + try { + const associatedWin = getStyleSheetAssociatedWindow(); + const mql = associatedWin.matchMedia(rule.media.mediaText); + matches = mql.matches; + + let ac = this.#mqlChangeAbortControllerMap.get(resourceId); + if (!ac) { + ac = new associatedWin.AbortController(); + this.#mqlChangeAbortControllerMap.set(resourceId, ac); + } + + const index = atRules.length; + mql.addEventListener( + "change", + () => this.#onMatchesChange(resourceId, index, mql), + { + signal: ac.signal, + } + ); + } catch (e) { + // Ignored + } + + atRules.push({ + type: "media", + conditionText: rule.conditionText, + matches, + line: InspectorUtils.getRelativeRuleLine(rule), + column: InspectorUtils.getRuleColumn(rule), + }); + } else if (className === "CSSContainerRule") { + atRules.push({ + type: "container", + conditionText: rule.conditionText, + line: InspectorUtils.getRelativeRuleLine(rule), + column: InspectorUtils.getRuleColumn(rule), + }); + } else if (className === "CSSSupportsRule") { + atRules.push({ + type: "support", + conditionText: rule.conditionText, + line: InspectorUtils.getRelativeRuleLine(rule), + column: InspectorUtils.getRuleColumn(rule), + }); + } else if (className === "CSSLayerBlockRule") { + atRules.push({ + type: "layer", + layerName: rule.name, + line: InspectorUtils.getRelativeRuleLine(rule), + column: InspectorUtils.getRuleColumn(rule), + }); + } + } + return { ruleCount, atRules }; + } + + /** + * Called when the status of a media query support changes (i.e. it now matches, or it + * was matching but isn't anymore) + * + * @param {String} resourceId + * The id associated with the stylesheet + * @param {Number} index + * The index of the media rule relatively to all the other at-rules of the stylesheet + * @param {MediaQueryList} mql + * The result of matchMedia for the given media rule + */ + #onMatchesChange(resourceId, index, mql) { + this.#onStyleSheetUpdated({ + resourceId, + updateKind: "matches-change", + updates: { + nestedResourceUpdates: [ + { + path: ["atRules", index, "matches"], + value: mql.matches, + }, + ], + }, + }); + } + + /** + * Get the node href of a given stylesheet + * + * @param {StyleSheet} styleSheet + * @returns {String} + */ + getNodeHref(styleSheet) { + const { ownerNode } = styleSheet; + if (!ownerNode) { + return null; + } + + if (ownerNode.nodeType == ownerNode.DOCUMENT_NODE) { + return ownerNode.location.href; + } + + if (ownerNode.ownerDocument?.location) { + return ownerNode.ownerDocument.location.href; + } + + return null; + } + + /** + * Get the sourcemap base url of a given stylesheet + * + * @param {StyleSheet} styleSheet + * @returns {String} + */ + getSourcemapBaseURL(styleSheet) { + // When the style is injected via nsIDOMWindowUtils.loadSheet, even + // the parent style sheet has no owner, so default back to target actor + // document + const ownerNode = getStyleSheetOwnerNode(styleSheet); + const ownerDocument = ownerNode + ? ownerNode.ownerDocument + : this.#targetActor.window; + + return getSourcemapBaseURL( + // Technically resolveSourceURL should be used here alongside + // "this.rawSheet.sourceURL", but the style inspector does not support + // /*# sourceURL=*/ in CSS, so we're omitting it here (bug 880831). + styleSheet.href || this.getNodeHref(styleSheet), + ownerDocument + ); + } + + /** + * Get all the stylesheets for a given window + * + * @param {Window} window + * @returns {Array<StyleSheet>} + */ + async #getStyleSheetsForWindow(window) { + const { document } = window; + const documentOnly = !document.nodePrincipal.isSystemPrincipal; + + const styleSheets = []; + + for (const styleSheet of InspectorUtils.getAllStyleSheets( + document, + documentOnly + )) { + if (!this.#shouldListSheet(styleSheet)) { + continue; + } + + styleSheets.push(styleSheet); + + // Get all sheets, including imported ones + const importedStyleSheets = await this.#getImportedStyleSheets( + document, + styleSheet + ); + styleSheets.push(...importedStyleSheets); + } + + return styleSheets; + } + + /** + * Returns true if a given stylesheet has an ancestor with the same url it has + * + * @param {StyleSheet} styleSheet + * @returns {Boolean} + */ + #haveAncestorWithSameURL(styleSheet) { + const href = styleSheet.href; + while (styleSheet.parentStyleSheet) { + if (styleSheet.parentStyleSheet.href == href) { + return true; + } + styleSheet = styleSheet.parentStyleSheet; + } + return false; + } + + /** + * Helper function called when a property changed in a given stylesheet + * + * @param {String} resourceId + * The id of the stylesheet the change occured in + * @param {String} property + * The property that was changed + * @param {String} value + * The value of the property + */ + #notifyPropertyChanged(resourceId, property, value) { + this.#onStyleSheetUpdated({ + resourceId, + updateKind: "property-change", + updates: { resourceUpdates: { [property]: value } }, + }); + } + + /** + * Event handler that is called when the state of applicable of style sheet is changed. + * + * For now, StyleSheetApplicableStateChanged event will be called at following timings. + * - Append <link> of stylesheet to document + * - Append <style> to document + * - Change disable attribute of stylesheet object + * - Change disable attribute of <link> to false + * - Stylesheet is constructed. + * When appending <link>, <style> or changing `disabled` attribute to false, + * `applicable` is passed as true. The other hand, when changing `disabled` + * to true, this will be false. + * + * NOTE: StyleSheetApplicableStateChanged is _not_ called when removing the <link>/<style>, + * but a StyleSheetRemovedEvent is emitted in such case (see #onStyleSheetRemoved) + * + * @param {StyleSheetApplicableStateChangedEvent} + * The triggering event. + */ + #onApplicableStateChanged = ({ applicable, stylesheet: styleSheet }) => { + if ( + // Have interest in applicable stylesheet only. + applicable && + styleSheet.associatedDocument && + (!this.#targetActor.ignoreSubFrames || + styleSheet.associatedDocument.ownerGlobal === + this.#targetActor.window) && + this.#shouldListSheet(styleSheet) && + !this.#haveAncestorWithSameURL(styleSheet) + ) { + this.#registerStyleSheet(styleSheet); + } + }; + + /** + * Event handler that is called when a style sheet is removed. + * + * @param {StyleSheetRemovedEvent} + * The triggering event. + */ + #onStylesheetRemoved = event => { + this.#unregisterStyleSheet(event.stylesheet); + }; + + /** + * If the stylesheet isn't registered yet, this function will generate an associated + * resourceId and call registered `onAvailable` listeners. + * + * @param {StyleSheet} styleSheet + * @returns {String} the associated resourceId + */ + #registerStyleSheet(styleSheet) { + const existingResourceId = this.#findStyleSheetResourceId(styleSheet); + // If the stylesheet is already registered, there's no need to notify about it again. + if (existingResourceId) { + return existingResourceId; + } + + // It's important to prefix the resourceId with the target actorID so we can't have + // duplicated resource ids when the client connects to multiple targets. + const resourceId = `${this.#targetActor.actorID}:stylesheet:${this + .#styleSheetCount++}`; + this.#styleSheetMap.set(resourceId, styleSheet); + + const creationData = this.#styleSheetCreationData?.get(styleSheet); + this.#styleSheetCreationData?.delete(styleSheet); + + const onAvailablePromises = []; + for (const onAvailable of this.#watchListeners.onAvailable) { + onAvailablePromises.push( + onAvailable({ + resourceId, + styleSheet, + creationData, + }) + ); + } + + // creationData exists if this stylesheet was created via `addStyleSheet`. + if (creationData) { + // We resolve the promise once the watcher sent the resources to the client, + // so `addStyleSheet` calls can be fullfilled. + Promise.all(onAvailablePromises).then(() => creationData?.resolve()); + } + return resourceId; + } + + /** + * If the stylesheet is registered, this function will call registered `onDestroyed` + * listeners with the stylesheet resourceId. + * + * @param {StyleSheet} styleSheet + */ + #unregisterStyleSheet(styleSheet) { + const existingResourceId = this.#findStyleSheetResourceId(styleSheet); + if (!existingResourceId) { + return; + } + + this.#styleSheetMap.delete(existingResourceId); + this.#styleSheetCreationData?.delete(styleSheet); + if (this.#mqlChangeAbortControllerMap.has(existingResourceId)) { + this.#mqlChangeAbortControllerMap.get(existingResourceId).abort(); + this.#mqlChangeAbortControllerMap.delete(existingResourceId); + } + + for (const onDestroyed of this.#watchListeners.onDestroyed) { + onDestroyed({ + resourceId: existingResourceId, + }); + } + } + + #onStyleSheetUpdated(data) { + this.emit("stylesheet-updated", data); + + for (const onUpdated of this.#watchListeners.onUpdated) { + onUpdated(data); + } + } + + /** + * Returns true if the passed styleSheet should be handled. + * + * @param {StyleSheet} styleSheet + * @returns {Boolean} + */ + #shouldListSheet(styleSheet) { + const href = styleSheet.href?.toLowerCase(); + // FIXME(bug 1826538): Make accessiblecaret.css and similar UA-widget + // sheets system sheets, then remove this special-case. + if ( + href === "resource://content-accessible/accessiblecaret.css" || + (href === "resource://devtools-highlighter-styles/highlighters.css" && + this.#targetActor.sessionContext.type !== "all") + ) { + return false; + } + return true; + } + + /** + * The StyleSheetsManager instance is managed by the target, so this will be called when + * the target gets destroyed. + */ + destroy() { + // Cleanup + if (this.#abortController) { + this.#abortController.abort(); + } + if (this.#mqlChangeAbortControllerMap) { + for (const ac of this.#mqlChangeAbortControllerMap.values()) { + ac.abort(); + } + } + + try { + this.#unwatchStyleSheetChangeEvents(); + } catch (e) { + console.error( + "Error when destroying StyleSheet manager for", + this.#targetActor, + ": ", + e + ); + } + + this.#styleSheetMap.clear(); + this.#abortController = null; + this.#mqlChangeAbortControllerMap = null; + this.#styleSheetCreationData = null; + this.#styleSheetMap = null; + this.#targetActor = null; + this.#watchListeners = null; + } +} + +module.exports = { + StyleSheetsManager, + UPDATE_GENERAL, + UPDATE_PRESERVING_RULES, +}; diff --git a/devtools/server/actors/utils/track-change-emitter.js b/devtools/server/actors/utils/track-change-emitter.js new file mode 100644 index 0000000000..19de2b92fb --- /dev/null +++ b/devtools/server/actors/utils/track-change-emitter.js @@ -0,0 +1,19 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const EventEmitter = require("resource://devtools/shared/event-emitter.js"); + +/** + * A helper class that is listened to by the ChangesActor, and can be + * used to send changes to the ChangesActor. + */ +class TrackChangeEmitter extends EventEmitter { + trackChange(change) { + this.emit("track-change", change); + } +} + +module.exports = new TrackChangeEmitter(); diff --git a/devtools/server/actors/utils/walker-search.js b/devtools/server/actors/utils/walker-search.js new file mode 100644 index 0000000000..a5ffb48fad --- /dev/null +++ b/devtools/server/actors/utils/walker-search.js @@ -0,0 +1,320 @@ +/* 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"; + +loader.lazyRequireGetter( + this, + "isWhitespaceTextNode", + "resource://devtools/server/actors/inspector/utils.js", + true +); + +/** + * The walker-search module provides a simple API to index and search strings + * and elements inside a given document. + * It indexes tag names, attribute names and values, and text contents. + * It provides a simple search function that returns a list of nodes that + * matched. + */ + +class WalkerIndex { + /** + * The WalkerIndex class indexes the document (and all subdocs) from + * a given walker. + * + * It is only indexed the first time the data is accessed and will be + * re-indexed if a mutation happens between requests. + * + * @param {Walker} walker The walker to be indexed + */ + constructor(walker) { + this.walker = walker; + this.clearIndex = this.clearIndex.bind(this); + + // Kill the index when mutations occur, the next data get will re-index. + this.walker.on("any-mutation", this.clearIndex); + } + + /** + * Destroy this instance, releasing all data and references + */ + destroy() { + this.walker.off("any-mutation", this.clearIndex); + } + + clearIndex() { + if (!this.currentlyIndexing) { + this._data = null; + } + } + + get doc() { + return this.walker.rootDoc; + } + + /** + * Get the indexed data + * This getter also indexes if it hasn't been done yet or if the state is + * dirty + * + * @returns Map<String, Array<{type:String, node:DOMNode}>> + * A Map keyed on the searchable value, containing an array with + * objects containing the 'type' (one of ALL_RESULTS_TYPES), and + * the DOM Node. + */ + get data() { + if (!this._data) { + this._data = new Map(); + this.index(); + } + + return this._data; + } + + _addToIndex(type, node, value) { + // Add an entry for this value if there isn't one + const entry = this._data.get(value); + if (!entry) { + this._data.set(value, []); + } + + // Add the type/node to the list + this._data.get(value).push({ + type, + node, + }); + } + + index() { + // Handle case where iterating nextNode() with the deepTreeWalker triggers + // a mutation (Bug 1222558) + this.currentlyIndexing = true; + + const documentWalker = this.walker.getDocumentWalker(this.doc); + while (documentWalker.nextNode()) { + const node = documentWalker.currentNode; + + if ( + this.walker.targetActor.ignoreSubFrames && + node.ownerDocument !== this.doc + ) { + continue; + } + + if (node.nodeType === 1) { + // For each element node, we get the tagname and all attributes names + // and values + const localName = node.localName; + if (localName === "_moz_generated_content_marker") { + this._addToIndex("tag", node, "::marker"); + this._addToIndex("text", node, node.textContent.trim()); + } else if (localName === "_moz_generated_content_before") { + this._addToIndex("tag", node, "::before"); + this._addToIndex("text", node, node.textContent.trim()); + } else if (localName === "_moz_generated_content_after") { + this._addToIndex("tag", node, "::after"); + this._addToIndex("text", node, node.textContent.trim()); + } else { + this._addToIndex("tag", node, node.localName); + } + + for (const { name, value } of node.attributes) { + this._addToIndex("attributeName", node, name); + this._addToIndex("attributeValue", node, value); + } + } else if (node.textContent && node.textContent.trim().length) { + // For comments and text nodes, we get the text + this._addToIndex("text", node, node.textContent.trim()); + } + } + + this.currentlyIndexing = false; + } +} + +exports.WalkerIndex = WalkerIndex; + +class WalkerSearch { + /** + * The WalkerSearch class provides a way to search an indexed document as well + * as find elements that match a given css selector. + * + * Usage example: + * let s = new WalkerSearch(doc); + * let res = s.search("lang", index); + * for (let {matched, results} of res) { + * for (let {node, type} of results) { + * console.log("The query matched a node's " + type); + * console.log("Node that matched", node); + * } + * } + * s.destroy(); + * + * @param {Walker} the walker to be searched + */ + constructor(walker) { + this.walker = walker; + this.index = new WalkerIndex(this.walker); + } + + destroy() { + this.index.destroy(); + this.walker = null; + } + + _addResult(node, type, results) { + if (!results.has(node)) { + results.set(node, []); + } + + const matches = results.get(node); + + // Do not add if the exact same result is already in the list + let isKnown = false; + for (const match of matches) { + if (match.type === type) { + isKnown = true; + break; + } + } + + if (!isKnown) { + matches.push({ type }); + } + } + + _searchIndex(query, options, results) { + for (const [matched, res] of this.index.data) { + if (!options.searchMethod(query, matched)) { + continue; + } + + // Add any relevant results (skipping non-requested options). + res + .filter(entry => { + return options.types.includes(entry.type); + }) + .forEach(({ node, type }) => { + this._addResult(node, type, results); + }); + } + } + + _searchSelectors(query, options, results) { + // If the query is just one "word", no need to search because _searchIndex + // will lead the same results since it has access to tagnames anyway + const isSelector = query && query.match(/[ >~.#\[\]]/); + if (!options.types.includes("selector") || !isSelector) { + return; + } + + const nodes = this.walker._multiFrameQuerySelectorAll(query); + for (const node of nodes) { + this._addResult(node, "selector", results); + } + } + + _searchXPath(query, options, results) { + if (!options.types.includes("xpath")) { + return; + } + + const nodes = this.walker._multiFrameXPath(query); + for (const node of nodes) { + // Exclude text nodes that only contain whitespace + // because they are not displayed in the Inspector. + if (!isWhitespaceTextNode(node)) { + this._addResult(node, "xpath", results); + } + } + } + + /** + * Search the document + * @param {String} query What to search for + * @param {Object} options The following options are accepted: + * - searchMethod {String} one of WalkerSearch.SEARCH_METHOD_* + * defaults to WalkerSearch.SEARCH_METHOD_CONTAINS (does not apply to + * selector and XPath search types) + * - types {Array} a list of things to search for (tag, text, attributes, etc) + * defaults to WalkerSearch.ALL_RESULTS_TYPES + * @return {Array} An array is returned with each item being an object like: + * { + * node: <the dom node that matched>, + * type: <the type of match: one of WalkerSearch.ALL_RESULTS_TYPES> + * } + */ + search(query, options = {}) { + options.searchMethod = + options.searchMethod || WalkerSearch.SEARCH_METHOD_CONTAINS; + options.types = options.types || WalkerSearch.ALL_RESULTS_TYPES; + + // Empty strings will return no results, as will non-string input + if (typeof query !== "string") { + query = ""; + } + + // Store results in a map indexed by nodes to avoid duplicate results + const results = new Map(); + + // Search through the indexed data + this._searchIndex(query, options, results); + + // Search with querySelectorAll + this._searchSelectors(query, options, results); + + // Search with XPath + this._searchXPath(query, options, results); + + // Concatenate all results into an Array to return + const resultList = []; + for (const [node, matches] of results) { + for (const { type } of matches) { + resultList.push({ + node, + type, + }); + + // For now, just do one result per node since the frontend + // doesn't have a way to highlight each result individually + // yet. + break; + } + } + + const documents = this.walker.targetActor.windows.map(win => win.document); + + // Sort the resulting nodes by order of appearance in the DOM + resultList.sort((a, b) => { + // Disconnected nodes won't get good results from compareDocumentPosition + // so check the order of their document instead. + if (a.node.ownerDocument != b.node.ownerDocument) { + const indA = documents.indexOf(a.node.ownerDocument); + const indB = documents.indexOf(b.node.ownerDocument); + return indA - indB; + } + // If the same document, then sort on DOCUMENT_POSITION_FOLLOWING (4) + // which means B is after A. + return a.node.compareDocumentPosition(b.node) & 4 ? -1 : 1; + }); + + return resultList; + } +} + +WalkerSearch.SEARCH_METHOD_CONTAINS = (query, candidate) => { + return query && candidate.toLowerCase().includes(query.toLowerCase()); +}; + +WalkerSearch.ALL_RESULTS_TYPES = [ + "tag", + "text", + "attributeName", + "attributeValue", + "selector", + "xpath", +]; + +exports.WalkerSearch = WalkerSearch; diff --git a/devtools/server/actors/utils/watchpoint-map.js b/devtools/server/actors/utils/watchpoint-map.js new file mode 100644 index 0000000000..7e4e3ee54c --- /dev/null +++ b/devtools/server/actors/utils/watchpoint-map.js @@ -0,0 +1,163 @@ +/* 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"; + +class WatchpointMap { + constructor(threadActor) { + this.threadActor = threadActor; + this._watchpoints = new Map(); + } + + _setWatchpoint(objActor, data) { + const { property, label, watchpointType } = data; + const obj = objActor.rawValue(); + + const desc = objActor.obj.getOwnPropertyDescriptor(property); + + if (this.has(obj, property) || desc.set || desc.get || !desc.configurable) { + return null; + } + + function getValue() { + return typeof desc.value === "object" && desc.value + ? desc.value.unsafeDereference() + : desc.value; + } + + function setValue(v) { + desc.value = objActor.obj.makeDebuggeeValue(v); + } + + const maybeHandlePause = type => { + const frame = this.threadActor.dbg.getNewestFrame(); + + if ( + this.threadActor.shouldSkipAnyBreakpoint || + !this.threadActor.hasMoved(frame, type) || + this.threadActor.sourcesManager.isFrameBlackBoxed(frame) + ) { + return; + } + + this.threadActor._pauseAndRespond(frame, { + type, + message: label, + }); + }; + + if (watchpointType === "get") { + objActor.obj.defineProperty(property, { + configurable: desc.configurable, + enumerable: desc.enumerable, + set: objActor.obj.makeDebuggeeValue(v => { + setValue(v); + }), + get: objActor.obj.makeDebuggeeValue(() => { + maybeHandlePause("getWatchpoint"); + return getValue(); + }), + }); + } + + if (watchpointType === "set") { + objActor.obj.defineProperty(property, { + configurable: desc.configurable, + enumerable: desc.enumerable, + set: objActor.obj.makeDebuggeeValue(v => { + maybeHandlePause("setWatchpoint"); + setValue(v); + }), + get: objActor.obj.makeDebuggeeValue(() => { + return getValue(); + }), + }); + } + + if (watchpointType === "getorset") { + objActor.obj.defineProperty(property, { + configurable: desc.configurable, + enumerable: desc.enumerable, + set: objActor.obj.makeDebuggeeValue(v => { + maybeHandlePause("setWatchpoint"); + setValue(v); + }), + get: objActor.obj.makeDebuggeeValue(() => { + maybeHandlePause("getWatchpoint"); + return getValue(); + }), + }); + } + + return desc; + } + + add(objActor, data) { + // Get the object's description before calling setWatchpoint, + // otherwise we'll get the modified property descriptor instead + const desc = this._setWatchpoint(objActor, data); + if (!desc) { + return; + } + + const objWatchpoints = + this._watchpoints.get(objActor.rawValue()) || new Map(); + + objWatchpoints.set(data.property, { ...data, desc }); + this._watchpoints.set(objActor.rawValue(), objWatchpoints); + } + + has(obj, property) { + const objWatchpoints = this._watchpoints.get(obj); + return objWatchpoints && objWatchpoints.has(property); + } + + get(obj, property) { + const objWatchpoints = this._watchpoints.get(obj); + return objWatchpoints && objWatchpoints.get(property); + } + + remove(objActor, property) { + const obj = objActor.rawValue(); + + // This should remove watchpoints on all of the object's properties if + // a property isn't passed in as an argument + if (!property) { + for (const objProperty in obj) { + this.remove(objActor, objProperty); + } + } + + if (!this.has(obj, property)) { + return; + } + + const objWatchpoints = this._watchpoints.get(obj); + const { desc } = objWatchpoints.get(property); + + objWatchpoints.delete(property); + this._watchpoints.set(obj, objWatchpoints); + + // We should stop keeping track of an object if it no longer + // has a watchpoint + if (objWatchpoints.size == 0) { + this._watchpoints.delete(obj); + } + + objActor.obj.defineProperty(property, desc); + } + + removeAll(objActor) { + const objWatchpoints = this._watchpoints.get(objActor.rawValue()); + if (!objWatchpoints) { + return; + } + + for (const objProperty in objWatchpoints) { + this.remove(objActor, objProperty); + } + } +} + +exports.WatchpointMap = WatchpointMap; diff --git a/devtools/server/actors/watcher.js b/devtools/server/actors/watcher.js new file mode 100644 index 0000000000..97d2be01e4 --- /dev/null +++ b/devtools/server/actors/watcher.js @@ -0,0 +1,864 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; +const { Actor } = require("resource://devtools/shared/protocol.js"); +const { watcherSpec } = require("resource://devtools/shared/specs/watcher.js"); + +const Resources = require("resource://devtools/server/actors/resources/index.js"); +const { TargetActorRegistry } = ChromeUtils.importESModule( + "resource://devtools/server/actors/targets/target-actor-registry.sys.mjs", + { + loadInDevToolsLoader: false, + } +); +const { WatcherRegistry } = ChromeUtils.importESModule( + "resource://devtools/server/actors/watcher/WatcherRegistry.sys.mjs", + { + // WatcherRegistry needs to be a true singleton and loads ActorManagerParent + // which also has to be a true singleton. + loadInDevToolsLoader: false, + } +); +const Targets = require("resource://devtools/server/actors/targets/index.js"); +const { getAllBrowsingContextsForContext } = ChromeUtils.importESModule( + "resource://devtools/server/actors/watcher/browsing-context-helpers.sys.mjs" +); +const { + SESSION_TYPES, +} = require("resource://devtools/server/actors/watcher/session-context.js"); + +const TARGET_HELPERS = {}; +loader.lazyRequireGetter( + TARGET_HELPERS, + Targets.TYPES.FRAME, + "resource://devtools/server/actors/watcher/target-helpers/frame-helper.js" +); +loader.lazyRequireGetter( + TARGET_HELPERS, + Targets.TYPES.PROCESS, + "resource://devtools/server/actors/watcher/target-helpers/process-helper.js" +); +loader.lazyRequireGetter( + TARGET_HELPERS, + Targets.TYPES.SERVICE_WORKER, + "devtools/server/actors/watcher/target-helpers/service-worker-helper" +); +loader.lazyRequireGetter( + TARGET_HELPERS, + Targets.TYPES.WORKER, + "resource://devtools/server/actors/watcher/target-helpers/worker-helper.js" +); + +loader.lazyRequireGetter( + this, + "NetworkParentActor", + "resource://devtools/server/actors/network-monitor/network-parent.js", + true +); +loader.lazyRequireGetter( + this, + "BlackboxingActor", + "resource://devtools/server/actors/blackboxing.js", + true +); +loader.lazyRequireGetter( + this, + "BreakpointListActor", + "resource://devtools/server/actors/breakpoint-list.js", + true +); +loader.lazyRequireGetter( + this, + "TargetConfigurationActor", + "resource://devtools/server/actors/target-configuration.js", + true +); +loader.lazyRequireGetter( + this, + "ThreadConfigurationActor", + "resource://devtools/server/actors/thread-configuration.js", + true +); + +exports.WatcherActor = class WatcherActor extends Actor { + /** + * Initialize a new WatcherActor which is the main entry point to debug + * something. The main features of this actor are to: + * - observe targets related to the context we are debugging. + * This is done via watchTargets/unwatchTargets methods, and + * target-available-form/target-destroyed-form events. + * - observe resources related to the observed targets. + * This is done via watchResources/unwatchResources methods, and + * resource-available-form/resource-updated-form/resource-destroyed-form events. + * Note that these events are also emited on both the watcher actor, + * for resources observed from the parent process, as well as on the + * target actors, when the resources are observed from the target's process or thread. + * + * @param {DevToolsServerConnection} conn + * The connection to use in order to communicate back to the client. + * @param {object} sessionContext + * The Session Context to help know what is debugged. + * See devtools/server/actors/watcher/session-context.js + * @param {Number} sessionContext.browserId: If this is a "browser-element" context type, + * the "browserId" of the <browser> element we would like to debug. + * @param {Boolean} sessionContext.isServerTargetSwitchingEnabled: Flag to to know if we should + * spawn new top level targets for the debugged context. + */ + constructor(conn, sessionContext) { + super(conn, watcherSpec); + this._sessionContext = sessionContext; + if (sessionContext.type == SESSION_TYPES.BROWSER_ELEMENT) { + // Retrieve the <browser> element for the given browser ID + const browsingContext = BrowsingContext.getCurrentTopByBrowserId( + sessionContext.browserId + ); + if (!browsingContext) { + throw new Error( + "Unable to retrieve the <browser> element for browserId=" + + sessionContext.browserId + ); + } + this._browserElement = browsingContext.embedderElement; + } + + // Sometimes we get iframe targets before the top-level targets + // mostly when doing bfcache navigations, lets cache the early iframes targets and + // flush them after the top-level target is available. See Bug 1726568 for details. + this._earlyIframeTargets = {}; + + // All currently available WindowGlobal target's form, keyed by `innerWindowId`. + // + // This helps to: + // - determine if the iframe targets are early or not. + // i.e. if it is notified before its parent target is available. + // - notify the destruction of all children targets when a parent is destroyed. + // i.e. have a reliable order of destruction between parent and children. + // + // Note that there should be just one top-level window target at a time, + // but there are certain cases when a new target is available before the + // old target is destroyed. + this._currentWindowGlobalTargets = new Map(); + } + + get sessionContext() { + return this._sessionContext; + } + + /** + * If we are debugging only one Tab or Document, returns its BrowserElement. + * For Tabs, it will be the <browser> element used to load the web page. + * + * This is typicaly used to fetch: + * - its `browserId` attribute, which uniquely defines it, + * - its `browsingContextID` or `browsingContext`, which helps inspecting its content. + */ + get browserElement() { + return this._browserElement; + } + + getAllBrowsingContexts(options) { + return getAllBrowsingContextsForContext(this.sessionContext, options); + } + + /** + * Helper to know if the context we are debugging has been already destroyed + */ + isContextDestroyed() { + if (this.sessionContext.type == "browser-element") { + return !this.browserElement.browsingContext; + } else if (this.sessionContext.type == "webextension") { + return !BrowsingContext.get(this.sessionContext.addonBrowsingContextID); + } else if (this.sessionContext.type == "all") { + return false; + } + throw new Error( + "Unsupported session context type: " + this.sessionContext.type + ); + } + + destroy() { + // Force unwatching for all types, even if we weren't watching. + // This is fine as unwatchTarget is NOOP if we weren't already watching for this target type. + for (const targetType of Object.values(Targets.TYPES)) { + this.unwatchTargets(targetType); + } + this.unwatchResources(Object.values(Resources.TYPES)); + + WatcherRegistry.unregisterWatcher(this); + + // Destroy the actor at the end so that its actorID keeps being defined. + super.destroy(); + } + + /* + * Get the list of the currently watched resources for this watcher. + * + * @return Array<String> + * Returns the list of currently watched resource types. + */ + get sessionData() { + return WatcherRegistry.getSessionData(this); + } + + form() { + return { + actor: this.actorID, + // The resources and target traits should be removed all at the same time since the + // client has generic ways to deal with all of them (See Bug 1680280). + traits: { + ...this.sessionContext.supportedTargets, + resources: this.sessionContext.supportedResources, + }, + }; + } + + /** + * Start watching for a new target type. + * + * This will instantiate Target Actors for existing debugging context of this type, + * but will also create actors as context of this type get created. + * The actors are notified to the client via "target-available-form" RDP events. + * We also notify about target actors destruction via "target-destroyed-form". + * Note that we are guaranteed to receive all existing target actor by the time this method + * resolves. + * + * @param {string} targetType + * Type of context to observe. See Targets.TYPES object. + */ + async watchTargets(targetType) { + WatcherRegistry.watchTargets(this, targetType); + + const targetHelperModule = TARGET_HELPERS[targetType]; + // Await the registration in order to ensure receiving the already existing targets + await targetHelperModule.createTargets(this); + } + + /** + * Stop watching for a given target type. + * + * @param {string} targetType + * Type of context to observe. See Targets.TYPES object. + * @param {object} options + * @param {boolean} options.isModeSwitching + * true when this is called as the result of a change to the devtools.browsertoolbox.scope pref + */ + unwatchTargets(targetType, options = {}) { + const isWatchingTargets = WatcherRegistry.unwatchTargets( + this, + targetType, + options + ); + if (!isWatchingTargets) { + return; + } + + const targetHelperModule = TARGET_HELPERS[targetType]; + targetHelperModule.destroyTargets(this, options); + + // Unregister the JS Window Actor if there is no more DevTools code observing any target/resource, + // unless we're switching mode (having both condition at the same time should only + // happen in tests). + if (!options.isModeSwitching) { + WatcherRegistry.maybeUnregisteringJSWindowActor(); + } + } + + /** + * Flush any early iframe targets relating to this top level + * window target. + * @param {number} topInnerWindowID + */ + _flushIframeTargets(topInnerWindowID) { + while (this._earlyIframeTargets[topInnerWindowID]?.length > 0) { + const actor = this._earlyIframeTargets[topInnerWindowID].shift(); + this.emit("target-available-form", actor); + } + } + + /** + * Called by a Watcher module, whenever a new target is available + */ + notifyTargetAvailable(actor) { + // Emit immediately for worker, process & extension targets + // as they don't have a parent browsing context. + if (!actor.traits?.isBrowsingContext) { + this.emit("target-available-form", actor); + return; + } + + // If isBrowsingContext trait is true, we are processing a WindowGlobalTarget. + // (this trait should be renamed) + this._currentWindowGlobalTargets.set(actor.innerWindowId, actor); + + // The top-level is always the same for the browser-toolbox + if (this.sessionContext.type == "all") { + this.emit("target-available-form", actor); + return; + } + + if (actor.isTopLevelTarget) { + this.emit("target-available-form", actor); + // Flush any existing early iframe targets + this._flushIframeTargets(actor.innerWindowId); + + if (this.sessionContext.type == SESSION_TYPES.BROWSER_ELEMENT) { + this.updateDomainSessionDataForServiceWorkers(actor.url); + } + } else if (this._currentWindowGlobalTargets.has(actor.topInnerWindowId)) { + // Emit the event immediately if the top-level target is already available + this.emit("target-available-form", actor); + } else if (this._earlyIframeTargets[actor.topInnerWindowId]) { + // Add the early iframe target to the list of other early targets. + this._earlyIframeTargets[actor.topInnerWindowId].push(actor); + } else { + // Set the first early iframe target + this._earlyIframeTargets[actor.topInnerWindowId] = [actor]; + } + } + + /** + * Called by a Watcher module, whenever a target has been destroyed + * + * @param {object} actor + * the actor form of the target being destroyed + * @param {object} options + * @param {boolean} options.isModeSwitching + * true when this is called as the result of a change to the devtools.browsertoolbox.scope pref + */ + async notifyTargetDestroyed(actor, options = {}) { + // Emit immediately for worker, process & extension targets + // as they don't have a parent browsing context. + if (!actor.innerWindowId) { + this.emit("target-destroyed-form", actor, options); + return; + } + // Flush all iframe targets if we are destroying a top level target. + if (actor.isTopLevelTarget) { + // First compute the list of children actors, as notifyTargetDestroy will mutate _currentWindowGlobalTargets + const childrenActors = [ + ...this._currentWindowGlobalTargets.values(), + ].filter( + form => + form.topInnerWindowId == actor.innerWindowId && + // Ignore the top level target itself, because its topInnerWindowId will be its innerWindowId + form.innerWindowId != actor.innerWindowId + ); + childrenActors.map(form => this.notifyTargetDestroyed(form, options)); + } + if (this._earlyIframeTargets[actor.innerWindowId]) { + delete this._earlyIframeTargets[actor.innerWindowId]; + } + this._currentWindowGlobalTargets.delete(actor.innerWindowId); + const documentEventWatcher = Resources.getResourceWatcher( + this, + Resources.TYPES.DOCUMENT_EVENT + ); + // If we have a Watcher class instantiated, ensure that target-destroyed is sent + // *after* DOCUMENT_EVENT's will-navigate. Otherwise this resource will have an undefined + // `targetFront` attribute, as it is associated with the target from which we navigate + // and not the one we navigate to. + // + // About documentEventWatcher check: We won't have any watcher class if we aren't + // using server side Watcher classes. + // i.e. when we are using the legacy listener for DOCUMENT_EVENT. + // This is still the case for all toolboxes but the one for local and remote tabs. + // + // About isServerTargetSwitchingEnabled check: if we are using the watcher class + // we may still use client side target, which will still use legacy listeners for + // will-navigate and so will-navigate will be emitted by the target actor itself. + // + // About isTopLevelTarget check: only top level targets emit will-navigate, + // so there is no reason to delay target-destroy for remote iframes. + if ( + documentEventWatcher && + this.sessionContext.isServerTargetSwitchingEnabled && + actor.isTopLevelTarget + ) { + await documentEventWatcher.onceWillNavigateIsEmitted(actor.innerWindowId); + } + this.emit("target-destroyed-form", actor, options); + } + + /** + * Given a browsingContextID, returns its parent browsingContextID. Returns null if a + * parent browsing context couldn't be found. Throws if the browsing context + * corresponding to the passed browsingContextID couldn't be found. + * + * @param {Integer} browsingContextID + * @returns {Integer|null} + */ + getParentBrowsingContextID(browsingContextID) { + const browsingContext = BrowsingContext.get(browsingContextID); + if (!browsingContext) { + throw new Error( + `BrowsingContext with ID=${browsingContextID} doesn't exist.` + ); + } + // Top-level documents of tabs, loaded in a <browser> element expose a null `parent`. + // i.e. Their BrowsingContext has no parent and is considered top level. + // But... in the context of the Browser Toolbox, we still consider them as child of the browser window. + // So, for them, fallback on `embedderWindowGlobal`, which will typically be the WindowGlobal for browser.xhtml. + if (browsingContext.parent) { + return browsingContext.parent.id; + } + if (browsingContext.embedderWindowGlobal) { + return browsingContext.embedderWindowGlobal.browsingContext.id; + } + return null; + } + + /** + * Called by Resource Watchers, when new resources are available, updated or destroyed. + * + * @param String updateType + * Can be "available", "updated" or "destroyed" + * @param Array<json> resources + * List of all resource's form. A resource is a JSON object piped over to the client. + * It can contain actor IDs, actor forms, to be manually marshalled by the client. + */ + notifyResources(updateType, resources) { + if (resources.length === 0) { + // Don't try to emit if the resources array is empty. + return; + } + + if (this.sessionContext.type == "webextension") { + this._overrideResourceBrowsingContextForWebExtension(resources); + } + + this.emit(`resource-${updateType}-form`, resources); + } + + /** + * For WebExtension, we have to hack all resource's browsingContextID + * in order to ensure emitting them with the fixed, original browsingContextID + * related to the fallback document created by devtools which always exists. + * The target's form will always be relating to that BrowsingContext IDs (browsing context ID and inner window id). + * Even if the target switches internally to another document via WindowGlobalTargetActor._setWindow. + * + * @param {Array<Objects>} List of resources + */ + _overrideResourceBrowsingContextForWebExtension(resources) { + resources.forEach(resource => { + resource.browsingContextID = this.sessionContext.addonBrowsingContextID; + }); + } + + /** + * Try to retrieve a parent process TargetActor which is ignored by the + * TARGET_HELPERS. Examples: + * - top level target for the browser toolbox + * - xpcshell target for xpcshell debugging + * + * See comment in `watchResources`. + * + * @return {TargetActor|null} Matching target actor if any, null otherwise. + */ + getTargetActorInParentProcess() { + if (TargetActorRegistry.xpcShellTargetActor) { + return TargetActorRegistry.xpcShellTargetActor; + } + + // Note: For browser-element debugging, the WindowGlobalTargetActor returned here is created + // for a parent process page and lives in the parent process. + const actors = TargetActorRegistry.getTargetActors( + this.sessionContext, + this.conn.prefix + ); + + switch (this.sessionContext.type) { + case "all": + return actors.find(actor => actor.typeName === "parentProcessTarget"); + case "browser-element": + case "webextension": + // All target actors for browser-element and webextension sessions + // should be created using the JS Window actors. + return null; + default: + throw new Error( + "Unsupported session context type: " + this.sessionContext.type + ); + } + } + + /** + * Start watching for a list of resource types. + * This should only resolve once all "already existing" resources of these types + * are notified to the client via resource-available-form event on related target actors. + * + * @param {Array<string>} resourceTypes + * List of all types to listen to. + */ + async watchResources(resourceTypes) { + // First process resources which have to be listened from the parent process + // (the watcher actor always runs in the parent process) + await Resources.watchResources( + this, + Resources.getParentProcessResourceTypes(resourceTypes) + ); + + // Bail out early if all resources were watched from parent process. + // In this scenario, we do not need to update these resource types in the WatcherRegistry + // as targets do not care about them. + if (!Resources.hasResourceTypesForTargets(resourceTypes)) { + return; + } + + WatcherRegistry.watchResources(this, resourceTypes); + + // Fetch resources from all existing targets + for (const targetType in TARGET_HELPERS) { + // We process frame targets even if we aren't watching them, + // because frame target helper codepath handles the top level target, if it runs in the *content* process. + // It will do another check to `isWatchingTargets(FRAME)` internally. + // Note that the workaround at the end of this method, using TargetActorRegistry + // is specific to top level target running in the *parent* process. + if ( + !WatcherRegistry.isWatchingTargets(this, targetType) && + targetType != Targets.TYPES.FRAME + ) { + continue; + } + const targetResourceTypes = Resources.getResourceTypesForTargetType( + resourceTypes, + targetType + ); + if (!targetResourceTypes.length) { + continue; + } + const targetHelperModule = TARGET_HELPERS[targetType]; + await targetHelperModule.addOrSetSessionDataEntry({ + watcher: this, + type: "resources", + entries: targetResourceTypes, + updateType: "add", + }); + } + + /* + * The Watcher actor doesn't support watching the top level target + * (bug 1644397 and possibly some other followup). + * + * Because of that, we miss reaching these targets in the previous lines of this function. + * Since all BrowsingContext target actors register themselves to the TargetActorRegistry, + * we use it here in order to reach those missing targets, which are running in the + * parent process (where this WatcherActor lives as well): + * - the parent process target (which inherits from WindowGlobalTargetActor) + * - top level tab target for documents loaded in the parent process (e.g. about:robots). + * When the tab loads document in the content process, the FrameTargetHelper will + * reach it via the JSWindowActor API. Even if it uses MessageManager for anything + * else (RDP packet forwarding, creation and destruction). + * + * We will eventually get rid of this code once all targets are properly supported by + * the Watcher Actor and we have target helpers for all of them. + */ + const targetActor = this.getTargetActorInParentProcess(); + if (targetActor) { + const targetActorResourceTypes = Resources.getResourceTypesForTargetType( + resourceTypes, + targetActor.targetType + ); + await targetActor.addOrSetSessionDataEntry( + "resources", + targetActorResourceTypes, + false, + "add" + ); + } + } + + /** + * Stop watching for a list of resource types. + * + * @param {Array<string>} resourceTypes + * List of all types to listen to. + */ + unwatchResources(resourceTypes) { + // First process resources which are listened from the parent process + // (the watcher actor always runs in the parent process) + Resources.unwatchResources( + this, + Resources.getParentProcessResourceTypes(resourceTypes) + ); + + // Bail out early if all resources were all watched from parent process. + // In this scenario, we do not need to update these resource types in the WatcherRegistry + // as targets do not care about them. + if (!Resources.hasResourceTypesForTargets(resourceTypes)) { + return; + } + + const isWatchingResources = WatcherRegistry.unwatchResources( + this, + resourceTypes + ); + if (!isWatchingResources) { + return; + } + + // Prevent trying to unwatch when the related BrowsingContext has already + // been destroyed + if (!this.isContextDestroyed()) { + for (const targetType in TARGET_HELPERS) { + // Frame target helper handles the top level target, if it runs in the content process + // so we should always process it. It does a second check to isWatchingTargets. + if ( + !WatcherRegistry.isWatchingTargets(this, targetType) && + targetType != Targets.TYPES.FRAME + ) { + continue; + } + const targetResourceTypes = Resources.getResourceTypesForTargetType( + resourceTypes, + targetType + ); + if (!targetResourceTypes.length) { + continue; + } + const targetHelperModule = TARGET_HELPERS[targetType]; + targetHelperModule.removeSessionDataEntry({ + watcher: this, + type: "resources", + entries: targetResourceTypes, + }); + } + } + + // See comment in watchResources. + const targetActor = this.getTargetActorInParentProcess(); + if (targetActor) { + const targetActorResourceTypes = Resources.getResourceTypesForTargetType( + resourceTypes, + targetActor.targetType + ); + targetActor.removeSessionDataEntry("resources", targetActorResourceTypes); + } + + // Unregister the JS Window Actor if there is no more DevTools code observing any target/resource + WatcherRegistry.maybeUnregisteringJSWindowActor(); + } + + clearResources(resourceTypes) { + // First process resources which have to be listened from the parent process + // (the watcher actor always runs in the parent process) + // TODO: content process / worker thread resources are not cleared. See Bug 1774573 + Resources.clearResources( + this, + Resources.getParentProcessResourceTypes(resourceTypes) + ); + } + + /** + * Returns the network actor. + * + * @return {Object} actor + * The network actor. + */ + getNetworkParentActor() { + if (!this._networkParentActor) { + this._networkParentActor = new NetworkParentActor(this); + } + + return this._networkParentActor; + } + + /** + * Returns the blackboxing actor. + * + * @return {Object} actor + * The blackboxing actor. + */ + getBlackboxingActor() { + if (!this._blackboxingActor) { + this._blackboxingActor = new BlackboxingActor(this); + } + + return this._blackboxingActor; + } + + /** + * Returns the breakpoint list actor. + * + * @return {Object} actor + * The breakpoint list actor. + */ + getBreakpointListActor() { + if (!this._breakpointListActor) { + this._breakpointListActor = new BreakpointListActor(this); + } + + return this._breakpointListActor; + } + + /** + * Returns the target configuration actor. + * + * @return {Object} actor + * The configuration actor. + */ + getTargetConfigurationActor() { + if (!this._targetConfigurationListActor) { + this._targetConfigurationListActor = new TargetConfigurationActor(this); + } + return this._targetConfigurationListActor; + } + + /** + * Returns the thread configuration actor. + * + * @return {Object} actor + * The configuration actor. + */ + getThreadConfigurationActor() { + if (!this._threadConfigurationListActor) { + this._threadConfigurationListActor = new ThreadConfigurationActor(this); + } + return this._threadConfigurationListActor; + } + + /** + * Server internal API, called by other actors, but not by the client. + * Used to agrement some new entries for a given data type (watchers target, resources, + * breakpoints,...) + * + * @param {String} type + * Data type to contribute to. + * @param {Array<*>} entries + * List of values to add or set for this data type. + * @param {String} updateType + * "add" will only add the new entries in the existing data set. + * "set" will update the data set with the new entries. + */ + async addOrSetDataEntry(type, entries, updateType) { + WatcherRegistry.addOrSetSessionDataEntry(this, type, entries, updateType); + + await Promise.all( + Object.values(Targets.TYPES) + .filter( + targetType => + // We process frame targets even if we aren't watching them, + // because frame target helper codepath handles the top level target, if it runs in the *content* process. + // It will do another check to `isWatchingTargets(FRAME)` internally. + // Note that the workaround at the end of this method, using TargetActorRegistry + // is specific to top level target running in the *parent* process. + WatcherRegistry.isWatchingTargets(this, targetType) || + targetType === Targets.TYPES.FRAME + ) + .map(async targetType => { + const targetHelperModule = TARGET_HELPERS[targetType]; + await targetHelperModule.addOrSetSessionDataEntry({ + watcher: this, + type, + entries, + updateType, + }); + }) + ); + + // See comment in watchResources + const targetActor = this.getTargetActorInParentProcess(); + if (targetActor) { + await targetActor.addOrSetSessionDataEntry( + type, + entries, + false, + updateType + ); + } + } + + /** + * Server internal API, called by other actors, but not by the client. + * Used to remve some existing entries for a given data type (watchers target, resources, + * breakpoints,...) + * + * @param {String} type + * Data type to modify. + * @param {Array<*>} entries + * List of values to remove from this data type. + */ + removeDataEntry(type, entries) { + WatcherRegistry.removeSessionDataEntry(this, type, entries); + + Object.values(Targets.TYPES) + .filter( + targetType => + // See comment in addOrSetDataEntry + WatcherRegistry.isWatchingTargets(this, targetType) || + targetType === Targets.TYPES.FRAME + ) + .forEach(targetType => { + const targetHelperModule = TARGET_HELPERS[targetType]; + targetHelperModule.removeSessionDataEntry({ + watcher: this, + type, + entries, + }); + }); + + // See comment in addOrSetDataEntry + const targetActor = this.getTargetActorInParentProcess(); + if (targetActor) { + targetActor.removeSessionDataEntry(type, entries); + } + } + + /** + * Retrieve the current watched data for the provided type. + * + * @param {String} type + * Data type to retrieve. + */ + getSessionDataForType(type) { + return this.sessionData?.[type]; + } + + /** + * Special code dedicated to Service Worker debugging. + * This will notify the Service Worker JS Process Actors about the new top level page domain. + * So that we start tracking that domain's workers. + * + * @param {String} newTargetUrl + */ + async updateDomainSessionDataForServiceWorkers(newTargetUrl) { + let host = ""; + // Accessing `host` can throw on some URLs with no valid host like about:home. + // In such scenario, reset the host to an empty string. + try { + host = new URL(newTargetUrl).host; + } catch (e) {} + + WatcherRegistry.addOrSetSessionDataEntry( + this, + "browser-element-host", + [host], + "set" + ); + + // This SessionData attribute is only used when debugging service workers. + // Avoid instantiating the JS Process Actors if we aren't watching for SW, + // or if we aren't watching for them just yet. + // But still update the WatcherRegistry, so that when we start watching + // and instantiate the target, the host will be set to the right value. + // + // Note that it is very important to avoid calling Service worker target helper's + // addOrSetSessionDataEntry. Otherwise, when we aren't watching for SW at all, + // we won't call destroyTargets on watcher actor destruction, + // and as a consequence never unregister the js process actor. + if ( + !WatcherRegistry.isWatchingTargets(this, Targets.TYPES.SERVICE_WORKER) + ) { + return; + } + + const targetHelperModule = TARGET_HELPERS[Targets.TYPES.SERVICE_WORKER]; + await targetHelperModule.addOrSetSessionDataEntry({ + watcher: this, + type: "browser-element-host", + entries: [host], + updateType: "set", + }); + } +}; diff --git a/devtools/server/actors/watcher/SessionDataHelpers.jsm b/devtools/server/actors/watcher/SessionDataHelpers.jsm new file mode 100644 index 0000000000..c70df1744f --- /dev/null +++ b/devtools/server/actors/watcher/SessionDataHelpers.jsm @@ -0,0 +1,244 @@ +/* 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"; + +/** + * Helper module alongside WatcherRegistry, which focus on updating the "sessionData" object. + * This object is shared across processes and threads and have to be maintained in all these runtimes. + */ + +var EXPORTED_SYMBOLS = ["SessionDataHelpers"]; + +const lazy = {}; + +if (typeof module == "object") { + // Allow this JSM to also be loaded as a CommonJS module + // Because this module is used from the worker thread, + // (via target-actor-mixin), and workers can't load JSMs via ChromeUtils.import. + loader.lazyRequireGetter( + lazy, + "validateBreakpointLocation", + "resource://devtools/shared/validate-breakpoint.jsm", + true + ); + + loader.lazyRequireGetter( + lazy, + "validateEventBreakpoint", + "resource://devtools/server/actors/utils/event-breakpoints.js", + true + ); +} else { + ChromeUtils.defineLazyGetter(lazy, "validateBreakpointLocation", () => { + return ChromeUtils.import( + "resource://devtools/shared/validate-breakpoint.jsm" + ).validateBreakpointLocation; + }); + ChromeUtils.defineLazyGetter(lazy, "validateEventBreakpoint", () => { + const { loader } = ChromeUtils.importESModule( + "resource://devtools/shared/loader/Loader.sys.mjs" + ); + return loader.require( + "resource://devtools/server/actors/utils/event-breakpoints.js" + ).validateEventBreakpoint; + }); +} + +// List of all arrays stored in `sessionData`, which are replicated across processes and threads +const SUPPORTED_DATA = { + BLACKBOXING: "blackboxing", + BREAKPOINTS: "breakpoints", + BROWSER_ELEMENT_HOST: "browser-element-host", + XHR_BREAKPOINTS: "xhr-breakpoints", + EVENT_BREAKPOINTS: "event-breakpoints", + RESOURCES: "resources", + TARGET_CONFIGURATION: "target-configuration", + THREAD_CONFIGURATION: "thread-configuration", + TARGETS: "targets", +}; + +// Optional function, if data isn't a primitive data type in order to produce a key +// for the given data entry +const DATA_KEY_FUNCTION = { + [SUPPORTED_DATA.BLACKBOXING]({ url, range }) { + return ( + url + + (range + ? `:${range.start.line}:${range.start.column}-${range.end.line}:${range.end.column}` + : "") + ); + }, + [SUPPORTED_DATA.BREAKPOINTS]({ location }) { + lazy.validateBreakpointLocation(location); + const { sourceUrl, sourceId, line, column } = location; + return `${sourceUrl}:${sourceId}:${line}:${column}`; + }, + [SUPPORTED_DATA.TARGET_CONFIGURATION]({ key }) { + // Configuration data entries are { key, value } objects, `key` can be used + // as the unique identifier for the entry. + return key; + }, + [SUPPORTED_DATA.THREAD_CONFIGURATION]({ key }) { + // See target configuration comment + return key; + }, + [SUPPORTED_DATA.XHR_BREAKPOINTS]({ path, method }) { + if (typeof path != "string") { + throw new Error( + `XHR Breakpoints expect to have path string, got ${typeof path} instead.` + ); + } + if (typeof method != "string") { + throw new Error( + `XHR Breakpoints expect to have method string, got ${typeof method} instead.` + ); + } + return `${path}:${method}`; + }, + [SUPPORTED_DATA.EVENT_BREAKPOINTS](id) { + if (typeof id != "string") { + throw new Error( + `Event Breakpoints expect the id to be a string , got ${typeof id} instead.` + ); + } + if (!lazy.validateEventBreakpoint(id)) { + throw new Error( + `The id string should be a valid event breakpoint id, ${id} is not.` + ); + } + return id; + }, +}; +// Optional validation method to assert the shape of each session data entry +const DATA_VALIDATION_FUNCTION = { + [SUPPORTED_DATA.BREAKPOINTS]({ location }) { + lazy.validateBreakpointLocation(location); + }, + [SUPPORTED_DATA.XHR_BREAKPOINTS]({ path, method }) { + if (typeof path != "string") { + throw new Error( + `XHR Breakpoints expect to have path string, got ${typeof path} instead.` + ); + } + if (typeof method != "string") { + throw new Error( + `XHR Breakpoints expect to have method string, got ${typeof method} instead.` + ); + } + }, + [SUPPORTED_DATA.EVENT_BREAKPOINTS](id) { + if (typeof id != "string") { + throw new Error( + `Event Breakpoints expect the id to be a string , got ${typeof id} instead.` + ); + } + if (!lazy.validateEventBreakpoint(id)) { + throw new Error( + `The id string should be a valid event breakpoint id, ${id} is not.` + ); + } + }, +}; + +function idFunction(v) { + if (typeof v != "string") { + throw new Error( + `Expect data entry values to be string, or be using custom data key functions. Got ${typeof v} type instead.` + ); + } + return v; +} + +const SessionDataHelpers = { + SUPPORTED_DATA, + + /** + * Add new values to the shared "sessionData" object. + * + * @param Object sessionData + * The data object to update. + * @param string type + * The type of data to be added + * @param Array<Object> entries + * The values to be added to this type of data + * @param String updateType + * "add" will only add the new entries in the existing data set. + * "set" will update the data set with the new entries. + */ + addOrSetSessionDataEntry(sessionData, type, entries, updateType) { + const validationFunction = DATA_VALIDATION_FUNCTION[type]; + if (validationFunction) { + entries.forEach(validationFunction); + } + + // When we are replacing the whole entries, things are significantly simplier + if (updateType == "set") { + sessionData[type] = entries; + return; + } + + if (!sessionData[type]) { + sessionData[type] = []; + } + const toBeAdded = []; + const keyFunction = DATA_KEY_FUNCTION[type] || idFunction; + for (const entry of entries) { + const existingIndex = sessionData[type].findIndex(existingEntry => { + return keyFunction(existingEntry) === keyFunction(entry); + }); + if (existingIndex === -1) { + // New entry. + toBeAdded.push(entry); + } else { + // Existing entry, update the value. This is relevant if the data-entry + // is not a primitive data-type, and the value can change for the same + // key. + sessionData[type][existingIndex] = entry; + } + } + sessionData[type].push(...toBeAdded); + }, + + /** + * Remove values from the shared "sessionData" object. + * + * @param Object sessionData + * The data object to update. + * @param string type + * The type of data to be remove + * @param Array<Object> entries + * The values to be removed from this type of data + * @return Boolean + * True, if at least one entries existed and has been removed. + * False, if none of the entries existed and none has been removed. + */ + removeSessionDataEntry(sessionData, type, entries) { + let includesAtLeastOne = false; + const keyFunction = DATA_KEY_FUNCTION[type] || idFunction; + for (const entry of entries) { + const idx = sessionData[type] + ? sessionData[type].findIndex(existingEntry => { + return keyFunction(existingEntry) === keyFunction(entry); + }) + : -1; + if (idx !== -1) { + sessionData[type].splice(idx, 1); + includesAtLeastOne = true; + } + } + if (!includesAtLeastOne) { + return false; + } + + return true; + }, +}; + +// Allow this JSM to also be loaded as a CommonJS module +// Because this module is used from the worker thread, +// (via target-actor-mixin), and workers can't load JSMs. +if (typeof module == "object") { + module.exports.SessionDataHelpers = SessionDataHelpers; +} diff --git a/devtools/server/actors/watcher/WatcherRegistry.sys.mjs b/devtools/server/actors/watcher/WatcherRegistry.sys.mjs new file mode 100644 index 0000000000..1068a253c9 --- /dev/null +++ b/devtools/server/actors/watcher/WatcherRegistry.sys.mjs @@ -0,0 +1,397 @@ +/* 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/. */ + +/** + * Helper module around `sharedData` object that helps storing the state + * of all observed Targets and Resources, that, for all DevTools connections. + * Here is a few words about the C++ implementation of sharedData: + * https://searchfox.org/mozilla-central/rev/bc3600def806859c31b2c7ac06e3d69271052a89/dom/ipc/SharedMap.h#30-55 + * + * We may have more than one DevToolsServer and one server may have more than one + * client. This module will be the single source of truth in the parent process, + * in order to know which targets/resources are currently observed. It will also + * be used to declare when something starts/stops being observed. + * + * `sharedData` is a platform API that helps sharing JS Objects across processes. + * We use it in order to communicate to the content process which targets and resources + * should be observed. Content processes read this data only once, as soon as they are created. + * It isn't used beyond this point. Content processes are not going to update it. + * We will notify about changes in observed targets and resources for already running + * processes by some other means. (Via JS Window Actor queries "DevTools:(un)watch(Resources|Target)") + * This means that only this module will update the "DevTools:watchedPerWatcher" value. + * From the parent process, we should be going through this module to fetch the data, + * while from the content process, we will read `sharedData` directly. + */ + +import { ActorManagerParent } from "resource://gre/modules/ActorManagerParent.sys.mjs"; + +const { SessionDataHelpers } = ChromeUtils.import( + "resource://devtools/server/actors/watcher/SessionDataHelpers.jsm" +); + +const { SUPPORTED_DATA } = SessionDataHelpers; +const SUPPORTED_DATA_TYPES = Object.values(SUPPORTED_DATA); + +// Define the Map that will be saved in `sharedData`. +// It is keyed by WatcherActor ID and values contains following attributes: +// - targets: Set of strings, refering to target types to be listened to +// - resources: Set of strings, refering to resource types to be observed +// - sessionContext Object, The Session Context to help know what is debugged. +// See devtools/server/actors/watcher/session-context.js +// - connectionPrefix: The DevToolsConnection prefix of the watcher actor. Used to compute new actor ID in the content processes. +// +// Unfortunately, `sharedData` is subject to race condition and may have side effect +// when read/written from multiple places in the same process, +// which is why this map should be considered as the single source of truth. +const sessionDataByWatcherActor = new Map(); + +// In parallel to the previous map, keep all the WatcherActor keyed by the same WatcherActor ID, +// the WatcherActor ID. We don't (and can't) propagate the WatcherActor instances to the content +// processes, but still would like to match them by their ID. +const watcherActors = new Map(); + +// Name of the attribute into which we save this Map in `sharedData` object. +const SHARED_DATA_KEY_NAME = "DevTools:watchedPerWatcher"; + +/** + * Use `sharedData` to allow processes, early during their creation, + * to know which resources should be listened to. This will be read + * from the Target actor, when it gets created early during process start, + * in order to start listening to the expected resource types. + */ +function persistMapToSharedData() { + Services.ppmm.sharedData.set(SHARED_DATA_KEY_NAME, sessionDataByWatcherActor); + // Request to immediately flush the data to the content processes in order to prevent + // races (bug 1644649). Otherwise content process may have outdated sharedData + // and try to create targets for Watcher actor that already stopped watching for targets. + Services.ppmm.sharedData.flush(); +} + +export const WatcherRegistry = { + /** + * Tells if a given watcher currently watches for a given target type. + * + * @param WatcherActor watcher + * The WatcherActor which should be listening. + * @param string targetType + * The new target type to query. + * @return boolean + * Returns true if already watching. + */ + isWatchingTargets(watcher, targetType) { + const sessionData = this.getSessionData(watcher); + return !!sessionData?.targets?.includes(targetType); + }, + + /** + * Retrieve the data saved into `sharedData` that is used to know + * about which type of targets and resources we care listening about. + * `sessionDataByWatcherActor` is saved into `sharedData` after each mutation, + * but `sessionDataByWatcherActor` is the source of truth. + * + * @param WatcherActor watcher + * The related WatcherActor which starts/stops observing. + * @param object options (optional) + * A dictionary object with `createData` boolean attribute. + * If this attribute is set to true, we create the data structure in the Map + * if none exists for this prefix. + */ + getSessionData(watcher, { createData = false } = {}) { + // Use WatcherActor ID as a key as we may have multiple clients willing to watch for targets. + // For example, a Browser Toolbox debugging everything and a Content Toolbox debugging + // just one tab. We might also have multiple watchers, on the same connection when using about:debugging. + const watcherActorID = watcher.actorID; + let sessionData = sessionDataByWatcherActor.get(watcherActorID); + if (!sessionData && createData) { + sessionData = { + // The "session context" object help understand what should be debugged and which target should be created. + // See WatcherActor constructor for more info. + sessionContext: watcher.sessionContext, + // The DevToolsServerConnection prefix will be used to compute actor IDs created in the content process + connectionPrefix: watcher.conn.prefix, + }; + sessionDataByWatcherActor.set(watcherActorID, sessionData); + watcherActors.set(watcherActorID, watcher); + } + return sessionData; + }, + + /** + * Given a Watcher Actor ID, return the related Watcher Actor instance. + * + * @param String actorID + * The Watcher Actor ID to search for. + * @return WatcherActor + * The Watcher Actor instance. + */ + getWatcher(actorID) { + return watcherActors.get(actorID); + }, + + /** + * Return an array of the watcher actors that match the passed browserId + * + * @param {Number} browserId + * @returns {Array<WatcherActor>} An array of the matching watcher actors + */ + getWatchersForBrowserId(browserId) { + const watchers = []; + for (const watcherActor of watcherActors.values()) { + if ( + watcherActor.sessionContext.type == "browser-element" && + watcherActor.sessionContext.browserId === browserId + ) { + watchers.push(watcherActor); + } + } + + return watchers; + }, + + /** + * Notify that a given watcher added or set some entries for given data type. + * + * @param WatcherActor watcher + * The WatcherActor which starts observing. + * @param string type + * The type of data to be added + * @param Array<Object> entries + * The values to be added to this type of data + * @param String updateType + * "add" will only add the new entries in the existing data set. + * "set" will update the data set with the new entries. + */ + addOrSetSessionDataEntry(watcher, type, entries, updateType) { + const sessionData = this.getSessionData(watcher, { + createData: true, + }); + + if (!SUPPORTED_DATA_TYPES.includes(type)) { + throw new Error(`Unsupported session data type: ${type}`); + } + + SessionDataHelpers.addOrSetSessionDataEntry( + sessionData, + type, + entries, + updateType + ); + + // Register the JS Window Actor the first time we start watching for something (e.g. resource, target, …). + registerJSWindowActor(); + + persistMapToSharedData(); + }, + + /** + * Notify that a given watcher removed an entry in a given data type. + * + * @param WatcherActor watcher + * The WatcherActor which stops observing. + * @param string type + * The type of data to be removed + * @param Array<Object> entries + * The values to be removed to this type of data + * @params {Object} options + * @params {Boolean} options.isModeSwitching: Set to true true when this is called as the + * result of a change to the devtools.browsertoolbox.scope pref. + * + * @return boolean + * True if we such entry was already registered, for this watcher actor. + */ + removeSessionDataEntry(watcher, type, entries, options) { + const sessionData = this.getSessionData(watcher); + if (!sessionData) { + return false; + } + + if (!SUPPORTED_DATA_TYPES.includes(type)) { + throw new Error(`Unsupported session data type: ${type}`); + } + + if ( + !SessionDataHelpers.removeSessionDataEntry(sessionData, type, entries) + ) { + return false; + } + + const isWatchingSomething = SUPPORTED_DATA_TYPES.some( + dataType => sessionData[dataType] && !!sessionData[dataType].length + ); + + // Remove the watcher reference if it's not watching for anything anymore, unless we're + // doing a mode switch; in such case we don't mean to end the DevTools session, so we + // still want to have access to the underlying data (furthermore, such case should only + // happen in tests, in a regular workflow we'd still be watching for resources). + if (!isWatchingSomething && !options?.isModeSwitching) { + sessionDataByWatcherActor.delete(watcher.actorID); + watcherActors.delete(watcher.actorID); + } + + persistMapToSharedData(); + + return true; + }, + + /** + * Cleanup everything about a given watcher actor. + * Remove it from any registry so that we stop interacting with it. + * + * The watcher would be automatically unregistered from removeWatcherEntry, + * if we remove all entries. But we aren't removing all breakpoints. + * So here, we force clearing any reference to the watcher actor when it destroys. + */ + unregisterWatcher(watcher) { + sessionDataByWatcherActor.delete(watcher.actorID); + watcherActors.delete(watcher.actorID); + this.maybeUnregisteringJSWindowActor(); + }, + + /** + * Notify that a given watcher starts observing a new target type. + * + * @param WatcherActor watcher + * The WatcherActor which starts observing. + * @param string targetType + * The new target type to start listening to. + */ + watchTargets(watcher, targetType) { + this.addOrSetSessionDataEntry( + watcher, + SUPPORTED_DATA.TARGETS, + [targetType], + "add" + ); + }, + + /** + * Notify that a given watcher stops observing a given target type. + * + * @param WatcherActor watcher + * The WatcherActor which stops observing. + * @param string targetType + * The new target type to stop listening to. + * @params {Object} options + * @params {Boolean} options.isModeSwitching: Set to true true when this is called as the + * result of a change to the devtools.browsertoolbox.scope pref. + * @return boolean + * True if we were watching for this target type, for this watcher actor. + */ + unwatchTargets(watcher, targetType, options) { + return this.removeSessionDataEntry( + watcher, + SUPPORTED_DATA.TARGETS, + [targetType], + options + ); + }, + + /** + * Notify that a given watcher starts observing new resource types. + * + * @param WatcherActor watcher + * The WatcherActor which starts observing. + * @param Array<string> resourceTypes + * The new resource types to start listening to. + */ + watchResources(watcher, resourceTypes) { + this.addOrSetSessionDataEntry( + watcher, + SUPPORTED_DATA.RESOURCES, + resourceTypes, + "add" + ); + }, + + /** + * Notify that a given watcher stops observing given resource types. + * + * See `watchResources` for argument definition. + * + * @return boolean + * True if we were watching for this resource type, for this watcher actor. + */ + unwatchResources(watcher, resourceTypes) { + return this.removeSessionDataEntry( + watcher, + SUPPORTED_DATA.RESOURCES, + resourceTypes + ); + }, + + /** + * Unregister the JS Window Actor if there is no more DevTools code observing any target/resource. + */ + maybeUnregisteringJSWindowActor() { + if (sessionDataByWatcherActor.size == 0) { + unregisterJSWindowActor(); + } + }, +}; + +// Boolean flag to know if the DevToolsFrame JS Window Actor is currently registered +let isJSWindowActorRegistered = false; + +/** + * Register the JSWindowActor pair "DevToolsFrame". + * + * We should call this method before we try to use this JS Window Actor from the parent process + * (via `WindowGlobal.getActor("DevToolsFrame")` or `WindowGlobal.getActor("DevToolsWorker")`). + * Also, registering it will automatically force spawing the content process JSWindow Actor + * anytime a new document is opened (via DOMWindowCreated event). + */ + +const JSWindowActorsConfig = { + DevToolsFrame: { + parent: { + esModuleURI: + "resource://devtools/server/connectors/js-window-actor/DevToolsFrameParent.sys.mjs", + }, + child: { + esModuleURI: + "resource://devtools/server/connectors/js-window-actor/DevToolsFrameChild.sys.mjs", + events: { + DOMWindowCreated: {}, + DOMDocElementInserted: {}, + pageshow: {}, + pagehide: {}, + }, + }, + allFrames: true, + }, + DevToolsWorker: { + parent: { + esModuleURI: + "resource://devtools/server/connectors/js-window-actor/DevToolsWorkerParent.sys.mjs", + }, + child: { + esModuleURI: + "resource://devtools/server/connectors/js-window-actor/DevToolsWorkerChild.sys.mjs", + events: { + DOMWindowCreated: {}, + }, + }, + allFrames: true, + }, +}; + +function registerJSWindowActor() { + if (isJSWindowActorRegistered) { + return; + } + isJSWindowActorRegistered = true; + ActorManagerParent.addJSWindowActors(JSWindowActorsConfig); +} + +function unregisterJSWindowActor() { + if (!isJSWindowActorRegistered) { + return; + } + isJSWindowActorRegistered = false; + + for (const JSWindowActorName of Object.keys(JSWindowActorsConfig)) { + // ActorManagerParent doesn't expose a "removeActors" method, but it would be equivalent to that: + ChromeUtils.unregisterWindowActor(JSWindowActorName); + } +} diff --git a/devtools/server/actors/watcher/browsing-context-helpers.sys.mjs b/devtools/server/actors/watcher/browsing-context-helpers.sys.mjs new file mode 100644 index 0000000000..d52cbc5708 --- /dev/null +++ b/devtools/server/actors/watcher/browsing-context-helpers.sys.mjs @@ -0,0 +1,428 @@ +/* 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/. */ + +const isEveryFrameTargetEnabled = Services.prefs.getBoolPref( + "devtools.every-frame-target.enabled", + false +); + +const WEBEXTENSION_FALLBACK_DOC_URL = + "chrome://devtools/content/shared/webextension-fallback.html"; + +/** + * Retrieve the addon id corresponding to a given window global. + * This is usually extracted from the principal, but in case we are dealing + * with a DevTools webextension fallback window, the addon id will be available + * in the URL. + * + * @param {WindowGlobalChild|WindowGlobalParent} windowGlobal + * The WindowGlobal from which we want to extract the addonId. Either a + * WindowGlobalParent or a WindowGlobalChild depending on where this + * helper is used from. + * @return {String} Returns the addon id if any could found, null otherwise. + */ +export function getAddonIdForWindowGlobal(windowGlobal) { + const browsingContext = windowGlobal.browsingContext; + const isParent = CanonicalBrowsingContext.isInstance(browsingContext); + // documentPrincipal is only exposed on WindowGlobalParent, + // use a fallback for WindowGlobalChild. + const principal = isParent + ? windowGlobal.documentPrincipal + : browsingContext.window.document.nodePrincipal; + + // On Android we can get parent process windows where `documentPrincipal` and + // `documentURI` are both unavailable. Bail out early. + if (!principal) { + return null; + } + + // Most webextension documents are loaded from moz-extension://{addonId} and + // the principal provides the addon id. + if (principal.addonId) { + return principal.addonId; + } + + // If no addon id was available on the principal, check if the window is the + // DevTools fallback window and extract the addon id from the URL. + const href = isParent + ? windowGlobal.documentURI?.displaySpec + : browsingContext.window.document.location.href; + + if (href && href.startsWith(WEBEXTENSION_FALLBACK_DOC_URL)) { + const [, addonId] = href.split("#"); + return addonId; + } + + return null; +} + +/** + * Helper function to know if a given BrowsingContext should be debugged by scope + * described by the given session context. + * + * @param {BrowsingContext} browsingContext + * The browsing context we want to check if it is part of debugged context + * @param {Object} sessionContext + * The Session Context to help know what is debugged. + * See devtools/server/actors/watcher/session-context.js + * @param {Object} options + * Optional arguments passed via a dictionary. + * @param {Boolean} options.forceAcceptTopLevelTarget + * If true, we will accept top level browsing context even when server target switching + * is disabled. In case of client side target switching, the top browsing context + * is debugged via a target actor that is being instantiated manually by the frontend. + * And this target actor isn't created, nor managed by the watcher actor. + * @param {Boolean} options.acceptInitialDocument + * By default, we ignore initial about:blank documents/WindowGlobals. + * But some code cares about all the WindowGlobals, this flag allows to also accept them. + * (Used by _validateWindowGlobal) + * @param {Boolean} options.acceptSameProcessIframes + * If true, we will accept WindowGlobal that runs in the same process as their parent document. + * That, even when EFT is disabled. + * (Used by _validateWindowGlobal) + * @param {Boolean} options.acceptNoWindowGlobal + * By default, we will reject BrowsingContext that don't have any WindowGlobal, + * either retrieved via BrowsingContext.currentWindowGlobal in the parent process, + * or via the options.windowGlobal argument. + * But in some case, we are processing BrowsingContext very early, before any + * WindowGlobal has been created for it. But they are still relevant BrowsingContexts + * to debug. + * @param {WindowGlobal} options.windowGlobal + * When we are in the content process, we can't easily retrieve the WindowGlobal + * for a given BrowsingContext. So allow to pass it via this argument. + * Also, there is some race conditions where browsingContext.currentWindowGlobal + * is null, while the callsite may have a reference to the WindowGlobal. + */ +// The goal of this method is to gather all checks done against BrowsingContext and WindowGlobal interfaces +// which leads it to be a lengthy method. So disable the complexity rule which is counter productive here. +// eslint-disable-next-line complexity +export function isBrowsingContextPartOfContext( + browsingContext, + sessionContext, + options = {} +) { + let { + forceAcceptTopLevelTarget = false, + acceptNoWindowGlobal = false, + windowGlobal, + } = options; + + // For now, reject debugging chrome BrowsingContext. + // This is for example top level chrome windows like browser.xhtml or webconsole/index.html (only the browser console) + // + // Tab and WebExtension debugging shouldn't target any such privileged document. + // All their document should be of type "content". + // + // This may only be an issue for the Browser Toolbox. + // For now, we expect the ParentProcessTargetActor to debug these. + // Note that we should probably revisit that, and have each WindowGlobal be debugged + // by one dedicated WindowGlobalTargetActor (bug 1685500). This requires some tweaks, at least in console-message + // resource watcher, which makes the ParentProcessTarget's console message resource watcher watch + // for all documents messages. It should probably only care about window-less messages and have one target per window global, + // each target fetching one window global messages. + // + // Such project would be about applying "EFT" to the browser toolbox and non-content documents + if ( + CanonicalBrowsingContext.isInstance(browsingContext) && + !browsingContext.isContent + ) { + return false; + } + + if (!windowGlobal) { + // When we are in the parent process, WindowGlobal can be retrieved from the BrowsingContext, + // while in the content process, the callsites have to pass it manually as an argument + if (CanonicalBrowsingContext.isInstance(browsingContext)) { + windowGlobal = browsingContext.currentWindowGlobal; + } else if (!windowGlobal && !acceptNoWindowGlobal) { + throw new Error( + "isBrowsingContextPartOfContext expect a windowGlobal argument when called from the content process" + ); + } + } + // If we have a WindowGlobal, there is some additional checks we can do + if ( + windowGlobal && + !_validateWindowGlobal(windowGlobal, sessionContext, options) + ) { + return false; + } + // Loading or destroying BrowsingContext won't have any associated WindowGlobal. + // Ignore them by default. They should be either handled via DOMWindowCreated event or JSWindowActor destroy + if (!windowGlobal && !acceptNoWindowGlobal) { + return false; + } + + // Now do the checks specific to each session context type + if (sessionContext.type == "all") { + return true; + } + if (sessionContext.type == "browser-element") { + // Check if the document is: + // - part of the Browser element, or, + // - a popup originating from the browser element (the popup being loaded in a distinct browser element) + const isMatchingTheBrowserElement = + browsingContext.browserId == sessionContext.browserId; + if ( + !isMatchingTheBrowserElement && + !isPopupToDebug(browsingContext, sessionContext) + ) { + return false; + } + + // For client-side target switching, only mention the "remote frames". + // i.e. the frames which are in a distinct process compared to their parent document + // If there is no parent, this is most likely the top level document which we want to ignore. + // + // `forceAcceptTopLevelTarget` is set: + // * when navigating to and from pages in the bfcache, we ignore client side target + // and start emitting top level target from the server. + // * when the callsite care about all the debugged browsing contexts, + // no matter if their related targets are created by client or server. + const isClientSideTargetSwitching = + !sessionContext.isServerTargetSwitchingEnabled; + const isTopLevelBrowsingContext = !browsingContext.parent; + if ( + isClientSideTargetSwitching && + !forceAcceptTopLevelTarget && + isTopLevelBrowsingContext + ) { + return false; + } + return true; + } + + if (sessionContext.type == "webextension") { + // Next and last check expects a WindowGlobal. + // As we have no way to really know if this BrowsingContext is related to this add-on, + // ignore it. Even if callsite accepts browsing context without a window global. + if (!windowGlobal) { + return false; + } + + return getAddonIdForWindowGlobal(windowGlobal) == sessionContext.addonId; + } + throw new Error("Unsupported session context type: " + sessionContext.type); +} + +/** + * Return true for popups to debug when debugging a browser-element. + * + * @param {BrowsingContext} browsingContext + * The browsing context we want to check if it is part of debugged context + * @param {Object} sessionContext + * WatcherActor's session context. This helps know what is the overall debugged scope. + * See watcher actor constructor for more info. + */ +function isPopupToDebug(browsingContext, sessionContext) { + // If enabled, create targets for popups (i.e. window.open() calls). + // If the opener is the tab we are currently debugging, accept the WindowGlobal and create a target for it. + // + // Note that it is important to do this check *after* the isInitialDocument one. + // Popups end up involving three WindowGlobals: + // - a first WindowGlobal loading an initial about:blank document (so isInitialDocument is true) + // - a second WindowGlobal which looks exactly as the first one + // - a final WindowGlobal which loads the URL passed to window.open() (so isInitialDocument is false) + // + // For now, we only instantiate a target for the last WindowGlobal. + return ( + sessionContext.isPopupDebuggingEnabled && + browsingContext.opener && + browsingContext.opener.browserId == sessionContext.browserId + ); +} + +/** + * Helper function of isBrowsingContextPartOfContext to execute all checks + * against WindowGlobal interface which aren't specific to a given SessionContext type + * + * @param {WindowGlobalParent|WindowGlobalChild} windowGlobal + * The WindowGlobal we want to check if it is part of debugged context + * @param {Object} sessionContext + * The Session Context to help know what is debugged. + * See devtools/server/actors/watcher/session-context.js + * @param {Object} options + * Optional arguments passed via a dictionary. + * See `isBrowsingContextPartOfContext` jsdoc. + */ +function _validateWindowGlobal( + windowGlobal, + sessionContext, + { acceptInitialDocument, acceptSameProcessIframes } +) { + // By default, before loading the actual document (even an about:blank document), + // we do load immediately "the initial about:blank document". + // This is expected by the spec. Typically when creating a new BrowsingContext/DocShell/iframe, + // we would have such transient initial document. + // `Document.isInitialDocument` helps identify this transient document, which + // we want to ignore as it would instantiate a very short lived target which + // confuses many tests and triggers race conditions by spamming many targets. + // + // We also ignore some other transient empty documents created while using `window.open()` + // When using this API with cross process loads, we may create up to three documents/WindowGlobals. + // We get a first initial about:blank document, and a second document created + // for moving the document in the right principal. + // The third document will be the actual document we expect to debug. + // The second document is an implementation artifact which ideally wouldn't exist + // and isn't expected by the spec. + // Note that `window.print` and print preview are using `window.open` and are going through this. + // + // WindowGlobalParent will have `isInitialDocument` attribute, while we have to go through the Document for WindowGlobalChild. + const isInitialDocument = + windowGlobal.isInitialDocument || + windowGlobal.browsingContext.window?.document.isInitialDocument; + if (isInitialDocument && !acceptInitialDocument) { + return false; + } + + // We may process an iframe that runs in the same process as its parent and we don't want + // to create targets for them if same origin targets (=EFT) are not enabled. + // Instead the WindowGlobalTargetActor will inspect these children document via docShell tree + // (typically via `docShells` or `windows` getters). + // This is quite common when Fission is off as any iframe will run in same process + // as their parent document. But it can also happen with Fission enabled if iframes have + // children iframes using the same origin. + const isSameProcessIframe = !windowGlobal.isProcessRoot; + if ( + isSameProcessIframe && + !acceptSameProcessIframes && + !isEveryFrameTargetEnabled + ) { + return false; + } + + return true; +} + +/** + * Helper function to know if a given WindowGlobal should be debugged by scope + * described by the given session context. This method could be called from any process + * as so accept either WindowGlobalParent or WindowGlobalChild instances. + * + * @param {WindowGlobalParent|WindowGlobalChild} windowGlobal + * The WindowGlobal we want to check if it is part of debugged context + * @param {Object} sessionContext + * The Session Context to help know what is debugged. + * See devtools/server/actors/watcher/session-context.js + * @param {Object} options + * Optional arguments passed via a dictionary. + * See `isBrowsingContextPartOfContext` jsdoc. + */ +export function isWindowGlobalPartOfContext( + windowGlobal, + sessionContext, + options +) { + return isBrowsingContextPartOfContext( + windowGlobal.browsingContext, + sessionContext, + { + ...options, + windowGlobal, + } + ); +} + +/** + * Get all the BrowsingContexts that should be debugged by the given session context. + * Consider using WatcherActor.getAllBrowsingContexts(options) which will automatically pass the right sessionContext. + * + * Really all of them: + * - For all the privileged windows (browser.xhtml, browser console, ...) + * - For all chrome *and* content contexts (privileged windows, as well as <browser> elements and their inner content documents) + * - For all nested browsing context. We fetch the contexts recursively. + * + * @param {Object} sessionContext + * The Session Context to help know what is debugged. + * See devtools/server/actors/watcher/session-context.js + * @param {Object} options + * Optional arguments passed via a dictionary. + * @param {Boolean} options.acceptSameProcessIframes + * If true, we will accept WindowGlobal that runs in the same process as their parent document. + * That, even when EFT is disabled. + */ +export function getAllBrowsingContextsForContext( + sessionContext, + { acceptSameProcessIframes = false } = {} +) { + const browsingContexts = []; + + // For a given BrowsingContext, add the `browsingContext` + // all of its children, that, recursively. + function walk(browsingContext) { + if (browsingContexts.includes(browsingContext)) { + return; + } + browsingContexts.push(browsingContext); + + for (const child of browsingContext.children) { + walk(child); + } + + if ( + (sessionContext.type == "all" || sessionContext.type == "webextension") && + browsingContext.window + ) { + // If the document is in the parent process, also iterate over each <browser>'s browsing context. + // BrowsingContext.children doesn't cross chrome to content boundaries, + // so we have to cross these boundaries by ourself. + // (This is also the reason why we aren't using BrowsingContext.getAllBrowsingContextsInSubtree()) + for (const browser of browsingContext.window.document.querySelectorAll( + `browser[type="content"]` + )) { + walk(browser.browsingContext); + } + } + } + + // If target a single browser element, only walk through its BrowsingContext + if (sessionContext.type == "browser-element") { + const topBrowsingContext = BrowsingContext.getCurrentTopByBrowserId( + sessionContext.browserId + ); + // topBrowsingContext can be null if getCurrentTopByBrowserId is called for a tab that is unloaded. + if (topBrowsingContext) { + // Unfortunately, getCurrentTopByBrowserId is subject to race conditions and may refer to a BrowsingContext + // that already navigated away. + // Query the current "live" BrowsingContext by going through the embedder element (i.e. the <browser>/<iframe> element) + // devtools/client/responsive/test/browser/browser_navigation.js covers this with fission enabled. + const realTopBrowsingContext = + topBrowsingContext.embedderElement.browsingContext; + walk(realTopBrowsingContext); + } + } else if ( + sessionContext.type == "all" || + sessionContext.type == "webextension" + ) { + // For the browser toolbox and web extension, retrieve all possible BrowsingContext. + // For WebExtension, we will then filter out the BrowsingContexts via `isBrowsingContextPartOfContext`. + // + // Fetch all top level window's browsing contexts + for (const window of Services.ww.getWindowEnumerator()) { + if (window.docShell.browsingContext) { + walk(window.docShell.browsingContext); + } + } + } else { + throw new Error("Unsupported session context type: " + sessionContext.type); + } + + return browsingContexts.filter(bc => + // We force accepting the top level browsing context, otherwise + // it would only be returned if sessionContext.isServerSideTargetSwitching is enabled. + isBrowsingContextPartOfContext(bc, sessionContext, { + forceAcceptTopLevelTarget: true, + acceptSameProcessIframes, + }) + ); +} + +if (typeof module == "object") { + module.exports = { + isBrowsingContextPartOfContext, + isWindowGlobalPartOfContext, + getAddonIdForWindowGlobal, + getAllBrowsingContextsForContext, + }; +} diff --git a/devtools/server/actors/watcher/moz.build b/devtools/server/actors/watcher/moz.build new file mode 100644 index 0000000000..46a9d89718 --- /dev/null +++ b/devtools/server/actors/watcher/moz.build @@ -0,0 +1,16 @@ +# -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*- +# vim: set filetype=python: +# 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/. + +DIRS += [ + "target-helpers", +] + +DevToolsModules( + "browsing-context-helpers.sys.mjs", + "session-context.js", + "SessionDataHelpers.jsm", + "WatcherRegistry.sys.mjs", +) diff --git a/devtools/server/actors/watcher/session-context.js b/devtools/server/actors/watcher/session-context.js new file mode 100644 index 0000000000..6457399455 --- /dev/null +++ b/devtools/server/actors/watcher/session-context.js @@ -0,0 +1,219 @@ +/* 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"; + +// Module to create all the Session Context objects. +// +// These are static JSON serializable object that help describe +// the debugged context. It is passed around to most of the server codebase +// in order to know which object to consider inspecting and communicating back to the client. +// +// These objects are all instantiated by the Descriptor actors +// and passed as a constructor argument to the Watcher actor. +// +// These objects have attributes used by all the Session contexts: +// - type: String +// Describes which type of context we are debugging. +// See SESSION_TYPES for all possible values. +// See each create* method for more info about each type and their specific attributes. +// - isServerTargetSwitchingEnabled: Boolean +// If true, targets should all be spawned by the server codebase. +// Especially the first, top level target. +// - supportedTargets: Boolean +// An object keyed by target type, whose value indicates if we have watcher support +// for the target. +// - supportedResources: Boolean +// An object keyed by resource type, whose value indicates if we have watcher support +// for the resource. + +const Targets = require("resource://devtools/server/actors/targets/index.js"); +const Resources = require("resource://devtools/server/actors/resources/index.js"); + +const SESSION_TYPES = { + ALL: "all", + BROWSER_ELEMENT: "browser-element", + CONTENT_PROCESS: "content-process", + WEBEXTENSION: "webextension", + WORKER: "worker", +}; + +/** + * Create the SessionContext used by the Browser Toolbox and Browser Console. + * + * This context means debugging everything. + * The whole browser: + * - all processes: parent and content, + * - all privileges: privileged/chrome and content/web, + * - all components/targets: HTML documents, processes, workers, add-ons,... + */ +function createBrowserSessionContext() { + const type = SESSION_TYPES.ALL; + + return { + type, + // For now, the top level target (ParentProcessTargetActor) is created via ProcessDescriptor.getTarget + // and is never replaced by any other, nor is it created by the WatcherActor. + isServerTargetSwitchingEnabled: false, + supportedTargets: getWatcherSupportedTargets(type), + supportedResources: getWatcherSupportedResources(type), + }; +} + +/** + * Create the SessionContext used by the regular web page toolboxes as well as remote debugging android device tabs. + * + * @param {BrowserElement} browserElement + * The tab to debug. It should be a reference to a <browser> element. + * @param {Object} config + * An object with optional configuration. Only supports "isServerTargetSwitchingEnabled" attribute. + * See jsdoc in this file header for more info. + */ +function createBrowserElementSessionContext(browserElement, config) { + const type = SESSION_TYPES.BROWSER_ELEMENT; + return { + type, + browserId: browserElement.browserId, + // Nowaday, it should always be enabled except for WebExtension special + // codepath and some tests. + isServerTargetSwitchingEnabled: config.isServerTargetSwitchingEnabled, + // Should we instantiate targets for popups opened in distinct tabs/windows? + // Driven by devtools.popups.debug=true preference. + isPopupDebuggingEnabled: config.isPopupDebuggingEnabled, + supportedTargets: getWatcherSupportedTargets(type), + supportedResources: getWatcherSupportedResources(type), + }; +} + +/** + * Create the SessionContext used by the web extension toolboxes. + * + * @param {Object} addon + * First object argument to describe the add-on. + * @param {String} addon.addonId + * The web extension ID, to uniquely identify the debugged add-on. + * @param {String} addon.browsingContextID + * The ID of the BrowsingContext into which this add-on is loaded. + * For now the top level target is associated with this one precise BrowsingContext. + * Knowing about it later helps associate resources to the same BrowsingContext ID and so the same target. + * @param {String} addon.innerWindowId + * The ID of the WindowGlobal into which this add-on is loaded. + * This is used for the same reason as browsingContextID. It helps match the resource with the right target. + * We now also use the WindowGlobal ID/innerWindowId to identify the targets. + * @param {Object} config + * An object with optional configuration. Only supports "isServerTargetSwitchingEnabled" attribute. + * See jsdoc in this file header for more info. + */ +function createWebExtensionSessionContext( + { addonId, browsingContextID, innerWindowId }, + config +) { + const type = SESSION_TYPES.WEBEXTENSION; + return { + type, + addonId, + addonBrowsingContextID: browsingContextID, + addonInnerWindowId: innerWindowId, + // For now, there is only one target (WebExtensionTargetActor), it is never replaced, + // and is only created via WebExtensionDescriptor.getTarget (and never by the watcher actor). + isServerTargetSwitchingEnabled: config.isServerTargetSwitchingEnabled, + supportedTargets: getWatcherSupportedTargets(type), + supportedResources: getWatcherSupportedResources(type), + }; +} + +/** + * Create the SessionContext used by the Browser Content Toolbox, to debug only one content process. + * Or when debugging XpcShell via about:debugging, where we instantiate only one content process target. + */ +function createContentProcessSessionContext() { + const type = SESSION_TYPES.CONTENT_PROCESS; + return { + type, + supportedTargets: getWatcherSupportedTargets(type), + supportedResources: getWatcherSupportedResources(type), + }; +} + +/** + * Create the SessionContext used when debugging one specific Service Worker or special chrome worker. + * This is only used from about:debugging. + */ +function createWorkerSessionContext() { + const type = SESSION_TYPES.WORKER; + return { + type, + supportedTargets: getWatcherSupportedTargets(type), + supportedResources: getWatcherSupportedResources(type), + }; +} + +/** + * Get the supported targets by the watcher given a session context type. + * + * @param {String} type + * @returns {Object} + */ +function getWatcherSupportedTargets(type) { + return { + [Targets.TYPES.FRAME]: true, + [Targets.TYPES.PROCESS]: true, + [Targets.TYPES.WORKER]: + type == SESSION_TYPES.BROWSER_ELEMENT || + type == SESSION_TYPES.WEBEXTENSION, + [Targets.TYPES.SERVICE_WORKER]: type == SESSION_TYPES.BROWSER_ELEMENT, + }; +} + +/** + * Get the supported resources by the watcher given a session context type. + * + * @param {String} type + * @returns {Object} + */ +function getWatcherSupportedResources(type) { + // All resources types are supported for tab debugging and web extensions. + // Some watcher classes are still disabled for the Multiprocess Browser Toolbox (type=SESSION_TYPES.ALL). + // And they may also be disabled for workers once we start supporting them by the watcher. + // So set the traits to false for all the resources that we don't support yet + // and keep using the legacy listeners. + const isTabOrWebExtensionToolbox = + type == SESSION_TYPES.BROWSER_ELEMENT || type == SESSION_TYPES.WEBEXTENSION; + + return { + [Resources.TYPES.CONSOLE_MESSAGE]: true, + [Resources.TYPES.CSS_CHANGE]: isTabOrWebExtensionToolbox, + [Resources.TYPES.CSS_MESSAGE]: true, + [Resources.TYPES.CSS_REGISTERED_PROPERTIES]: true, + [Resources.TYPES.DOCUMENT_EVENT]: true, + [Resources.TYPES.CACHE_STORAGE]: true, + [Resources.TYPES.COOKIE]: true, + [Resources.TYPES.ERROR_MESSAGE]: true, + [Resources.TYPES.EXTENSION_STORAGE]: true, + [Resources.TYPES.INDEXED_DB]: true, + [Resources.TYPES.LOCAL_STORAGE]: true, + [Resources.TYPES.SESSION_STORAGE]: true, + [Resources.TYPES.PLATFORM_MESSAGE]: true, + [Resources.TYPES.NETWORK_EVENT]: true, + [Resources.TYPES.NETWORK_EVENT_STACKTRACE]: true, + [Resources.TYPES.REFLOW]: true, + [Resources.TYPES.STYLESHEET]: true, + [Resources.TYPES.SOURCE]: true, + [Resources.TYPES.THREAD_STATE]: true, + [Resources.TYPES.SERVER_SENT_EVENT]: true, + [Resources.TYPES.WEBSOCKET]: true, + [Resources.TYPES.JSTRACER_TRACE]: true, + [Resources.TYPES.JSTRACER_STATE]: true, + [Resources.TYPES.LAST_PRIVATE_CONTEXT_EXIT]: true, + }; +} + +module.exports = { + createBrowserSessionContext, + createBrowserElementSessionContext, + createWebExtensionSessionContext, + createContentProcessSessionContext, + createWorkerSessionContext, + SESSION_TYPES, +}; diff --git a/devtools/server/actors/watcher/target-helpers/frame-helper.js b/devtools/server/actors/watcher/target-helpers/frame-helper.js new file mode 100644 index 0000000000..0e6f4f80d3 --- /dev/null +++ b/devtools/server/actors/watcher/target-helpers/frame-helper.js @@ -0,0 +1,331 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const { WatcherRegistry } = ChromeUtils.importESModule( + "resource://devtools/server/actors/watcher/WatcherRegistry.sys.mjs", + { + // WatcherRegistry needs to be a true singleton and loads ActorManagerParent + // which also has to be a true singleton. + loadInDevToolsLoader: false, + } +); +const { WindowGlobalLogger } = ChromeUtils.importESModule( + "resource://devtools/server/connectors/js-window-actor/WindowGlobalLogger.sys.mjs" +); +const Targets = require("resource://devtools/server/actors/targets/index.js"); + +const browsingContextAttachedObserverByWatcher = new Map(); + +/** + * Force creating targets for all existing BrowsingContext, that, for a given Watcher Actor. + * + * @param WatcherActor watcher + * The Watcher Actor requesting to watch for new targets. + */ +async function createTargets(watcher) { + // Go over all existing BrowsingContext in order to: + // - Force the instantiation of a DevToolsFrameChild + // - Have the DevToolsFrameChild to spawn the WindowGlobalTargetActor + + // If we have a browserElement, set the watchedByDevTools flag on its related browsing context + // TODO: We should also set the flag for the "parent process" browsing context when we're + // in the browser toolbox. This is blocked by Bug 1675763, and should be handled as part + // of Bug 1709529. + if (watcher.sessionContext.type == "browser-element") { + // The `watchedByDevTools` enables gecko behavior tied to this flag, such as: + // - reporting the contents of HTML loaded in the docshells + // - capturing stacks for the network monitor. + watcher.browserElement.browsingContext.watchedByDevTools = true; + } + + if (!browsingContextAttachedObserverByWatcher.has(watcher)) { + // We store the browserId here as watcher.browserElement.browserId can momentary be + // set to 0 when there's a navigation to a new browsing context. + const browserId = watcher.sessionContext.browserId; + const onBrowsingContextAttached = browsingContext => { + // We want to set watchedByDevTools on new top-level browsing contexts: + // - in the case of the BrowserToolbox/BrowserConsole, that would be the browsing + // contexts of all the tabs we want to handle. + // - for the regular toolbox, browsing context that are being created when navigating + // to a page that forces a new browsing context. + // Then BrowsingContext will propagate to all the tree of children BrowsingContext's. + if ( + !browsingContext.parent && + (watcher.sessionContext.type != "browser-element" || + browserId === browsingContext.browserId) + ) { + browsingContext.watchedByDevTools = true; + } + }; + Services.obs.addObserver( + onBrowsingContextAttached, + "browsing-context-attached" + ); + // We store the observer so we can retrieve it elsewhere (e.g. for removal in destroyTargets). + browsingContextAttachedObserverByWatcher.set( + watcher, + onBrowsingContextAttached + ); + } + + if ( + watcher.sessionContext.isServerTargetSwitchingEnabled && + watcher.sessionContext.type == "browser-element" + ) { + // If server side target switching is enabled, process the top level browsing context first, + // so that we guarantee it is notified to the client first. + // If it is disabled, the top level target will be created from the client instead. + await createTargetForBrowsingContext({ + watcher, + browsingContext: watcher.browserElement.browsingContext, + retryOnAbortError: true, + }); + } + + const browsingContexts = watcher.getAllBrowsingContexts().filter( + // Filter out the top browsing context we just processed. + browsingContext => + browsingContext != watcher.browserElement?.browsingContext + ); + // Await for the all the queries in order to resolve only *after* we received all + // already available targets. + // i.e. each call to `createTargetForBrowsingContext` should end up emitting + // a target-available-form event via the WatcherActor. + await Promise.allSettled( + browsingContexts.map(browsingContext => + createTargetForBrowsingContext({ watcher, browsingContext }) + ) + ); +} + +/** + * (internal helper method) Force creating the target actor for a given BrowsingContext. + * + * @param WatcherActor watcher + * The Watcher Actor requesting to watch for new targets. + * @param BrowsingContext browsingContext + * The context for which a target should be created. + * @param Boolean retryOnAbortError + * Set to true to retry creating existing targets when receiving an AbortError. + * An AbortError is sent when the JSWindowActor pair was destroyed before the query + * was complete, which can happen if the document navigates while the query is pending. + */ +async function createTargetForBrowsingContext({ + watcher, + browsingContext, + retryOnAbortError = false, +}) { + logWindowGlobal(browsingContext.currentWindowGlobal, "Existing WindowGlobal"); + + // We need to set the watchedByDevTools flag on all top-level browsing context. In the + // case of a content toolbox, this is done in the tab descriptor, but when we're in the + // browser toolbox, such descriptor is not created. + // Then BrowsingContext will propagate to all the tree of children BbrowsingContext's. + if (!browsingContext.parent) { + browsingContext.watchedByDevTools = true; + } + + try { + await browsingContext.currentWindowGlobal + .getActor("DevToolsFrame") + .instantiateTarget({ + watcherActorID: watcher.actorID, + connectionPrefix: watcher.conn.prefix, + sessionContext: watcher.sessionContext, + sessionData: watcher.sessionData, + }); + } catch (e) { + console.warn( + "Failed to create DevTools Frame target for browsingContext", + browsingContext.id, + ": ", + e, + retryOnAbortError ? "retrying" : "" + ); + if (retryOnAbortError && e.name === "AbortError") { + await createTargetForBrowsingContext({ + watcher, + browsingContext, + retryOnAbortError, + }); + } else { + throw e; + } + } +} + +/** + * Force destroying all BrowsingContext targets which were related to a given watcher. + * + * @param WatcherActor watcher + * The Watcher Actor requesting to stop watching for new targets. + * @param {object} options + * @param {boolean} options.isModeSwitching + * true when this is called as the result of a change to the devtools.browsertoolbox.scope pref + */ +function destroyTargets(watcher, options) { + // Go over all existing BrowsingContext in order to destroy all targets + const browsingContexts = watcher.getAllBrowsingContexts(); + + for (const browsingContext of browsingContexts) { + logWindowGlobal( + browsingContext.currentWindowGlobal, + "Existing WindowGlobal" + ); + + if (!browsingContext.parent) { + browsingContext.watchedByDevTools = false; + } + + browsingContext.currentWindowGlobal + .getActor("DevToolsFrame") + .destroyTarget({ + watcherActorID: watcher.actorID, + sessionContext: watcher.sessionContext, + options, + }); + } + + if (watcher.sessionContext.type == "browser-element") { + watcher.browserElement.browsingContext.watchedByDevTools = false; + } + + if (browsingContextAttachedObserverByWatcher.has(watcher)) { + Services.obs.removeObserver( + browsingContextAttachedObserverByWatcher.get(watcher), + "browsing-context-attached" + ); + browsingContextAttachedObserverByWatcher.delete(watcher); + } +} + +/** + * Go over all existing BrowsingContext in order to communicate about new data entries + * + * @param WatcherActor watcher + * The Watcher Actor requesting to stop watching for new targets. + * @param string type + * The type of data to be added + * @param Array<Object> entries + * The values to be added to this type of data + * @param String updateType + * "add" will only add the new entries in the existing data set. + * "set" will update the data set with the new entries. + */ +async function addOrSetSessionDataEntry({ + watcher, + type, + entries, + updateType, +}) { + const browsingContexts = getWatchingBrowsingContexts(watcher); + const promises = []; + for (const browsingContext of browsingContexts) { + logWindowGlobal( + browsingContext.currentWindowGlobal, + "Existing WindowGlobal" + ); + + const promise = browsingContext.currentWindowGlobal + .getActor("DevToolsFrame") + .addOrSetSessionDataEntry({ + watcherActorID: watcher.actorID, + sessionContext: watcher.sessionContext, + type, + entries, + updateType, + }); + promises.push(promise); + } + // Await for the queries in order to try to resolve only *after* the remote code processed the new data + return Promise.all(promises); +} + +/** + * Notify all existing frame targets that some data entries have been removed + * + * See addOrSetSessionDataEntry for argument documentation. + */ +function removeSessionDataEntry({ watcher, type, entries }) { + const browsingContexts = getWatchingBrowsingContexts(watcher); + for (const browsingContext of browsingContexts) { + logWindowGlobal( + browsingContext.currentWindowGlobal, + "Existing WindowGlobal" + ); + + browsingContext.currentWindowGlobal + .getActor("DevToolsFrame") + .removeSessionDataEntry({ + watcherActorID: watcher.actorID, + sessionContext: watcher.sessionContext, + type, + entries, + }); + } +} + +module.exports = { + createTargets, + destroyTargets, + addOrSetSessionDataEntry, + removeSessionDataEntry, +}; + +/** + * Return the list of BrowsingContexts which should be targeted in order to communicate + * updated session data. + * + * @param WatcherActor watcher + * The watcher actor will be used to know which target we debug + * and what BrowsingContext should be considered. + */ +function getWatchingBrowsingContexts(watcher) { + // If we are watching for additional frame targets, it means that the multiprocess or fission mode is enabled, + // either for a content toolbox or a BrowserToolbox via scope set to everything. + const watchingAdditionalTargets = WatcherRegistry.isWatchingTargets( + watcher, + Targets.TYPES.FRAME + ); + if (watchingAdditionalTargets) { + return watcher.getAllBrowsingContexts(); + } + // By default, when we are no longer watching for frame targets, we should no longer try to + // communicate with any browsing-context. But. + // + // For "browser-element" debugging, all targets are provided by watching by watching for frame targets. + // So, when we are no longer watching for frame, we don't expect to have any frame target to talk to. + // => we should no longer reach any browsing context. + // + // For "all" (=browser toolbox), there is only the special ParentProcessTargetActor we might want to return here. + // But this is actually handled by the WatcherActor which uses `WatcherActor.getTargetActorInParentProcess` to convey session data. + // => we should no longer reach any browsing context. + // + // For "webextension" debugging, there is the special WebExtensionTargetActor, which doesn't run in the parent process, + // so that we can't rely on the same code as the browser toolbox. + // => we should always reach out this particular browsing context. + if (watcher.sessionContext.type == "webextension") { + const browsingContext = BrowsingContext.get( + watcher.sessionContext.addonBrowsingContextID + ); + // The add-on browsing context may be destroying, in which case we shouldn't try to communicate with it + if (browsingContext.currentWindowGlobal) { + return [browsingContext]; + } + } + return []; +} + +// Set to true to log info about about WindowGlobal's being watched. +const DEBUG = false; + +function logWindowGlobal(windowGlobal, message) { + if (!DEBUG) { + return; + } + + WindowGlobalLogger.logWindowGlobal(windowGlobal, message); +} diff --git a/devtools/server/actors/watcher/target-helpers/moz.build b/devtools/server/actors/watcher/target-helpers/moz.build new file mode 100644 index 0000000000..b7c8983590 --- /dev/null +++ b/devtools/server/actors/watcher/target-helpers/moz.build @@ -0,0 +1,13 @@ +# -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*- +# vim: set filetype=python: +# 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/. + +DevToolsModules( + "frame-helper.js", + "process-helper.js", + "service-worker-helper.js", + "service-worker-jsprocessactor-startup.js", + "worker-helper.js", +) diff --git a/devtools/server/actors/watcher/target-helpers/process-helper.js b/devtools/server/actors/watcher/target-helpers/process-helper.js new file mode 100644 index 0000000000..8895d7ed66 --- /dev/null +++ b/devtools/server/actors/watcher/target-helpers/process-helper.js @@ -0,0 +1,389 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const { WatcherRegistry } = ChromeUtils.importESModule( + "resource://devtools/server/actors/watcher/WatcherRegistry.sys.mjs", + { + // WatcherRegistry needs to be a true singleton and loads ActorManagerParent + // which also has to be a true singleton. + loadInDevToolsLoader: false, + } +); + +loader.lazyRequireGetter( + this, + "ChildDebuggerTransport", + "resource://devtools/shared/transport/child-transport.js", + true +); + +const CONTENT_PROCESS_SCRIPT = + "resource://devtools/server/startup/content-process-script.js"; + +/** + * Map a MessageManager key to an Array of ContentProcessTargetActor "description" objects. + * A single MessageManager might be linked to several ContentProcessTargetActors if there are several + * Watcher actors instantiated on the DevToolsServer, via a single connection (in theory), but rather + * via distinct connections (ex: a content toolbox and the browser toolbox). + * Note that if we spawn two DevToolsServer, this module will be instantiated twice. + * + * Each ContentProcessTargetActor "description" object is structured as follows + * - {Object} actor: form of the content process target actor + * - {String} prefix: forwarding prefix used to redirect all packet to the right content process's transport + * - {ChildDebuggerTransport} childTransport: Transport forwarding all packets to the target's content process + * - {WatcherActor} watcher: The Watcher actor for which we instantiated this content process target actor + */ +const actors = new WeakMap(); + +// Save the list of all watcher actors that are watching for processes +const watchers = new Set(); + +function onContentProcessActorCreated(msg) { + const { watcherActorID, prefix, actor } = msg.data; + const watcher = WatcherRegistry.getWatcher(watcherActorID); + if (!watcher) { + throw new Error( + `Receiving a content process actor without a watcher actor ${watcherActorID}` + ); + } + // Ignore watchers of other connections. + // We may have two browser toolbox connected to the same process. + // This will spawn two distinct Watcher actor and two distinct process target helper module. + // Avoid processing the event many times, otherwise we will notify about the same target + // multiple times. + if (!watchers.has(watcher)) { + return; + } + const messageManager = msg.target; + const connection = watcher.conn; + + // Pipe Debugger message from/to parent/child via the message manager + const childTransport = new ChildDebuggerTransport(messageManager, prefix); + childTransport.hooks = { + onPacket: connection.send.bind(connection), + }; + childTransport.ready(); + + connection.setForwarding(prefix, childTransport); + + const list = actors.get(messageManager) || []; + list.push({ + prefix, + childTransport, + actor, + watcher, + }); + actors.set(messageManager, list); + + watcher.notifyTargetAvailable(actor); +} + +function onContentProcessActorDestroyed(msg) { + const { watcherActorID } = msg.data; + const watcher = WatcherRegistry.getWatcher(watcherActorID); + if (!watcher) { + throw new Error( + `Receiving a content process actor destruction without a watcher actor ${watcherActorID}` + ); + } + // Ignore watchers of other connections. + // We may have two browser toolbox connected to the same process. + // This will spawn two distinct Watcher actor and two distinct process target helper module. + // Avoid processing the event many times, otherwise we will notify about the same target + // multiple times. + if (!watchers.has(watcher)) { + return; + } + const messageManager = msg.target; + unregisterWatcherForMessageManager(watcher, messageManager); +} + +function onMessageManagerClose(messageManager, topic, data) { + const list = actors.get(messageManager); + if (!list || !list.length) { + return; + } + for (const { prefix, childTransport, actor, watcher } of list) { + watcher.notifyTargetDestroyed(actor); + + // If we have a child transport, the actor has already + // been created. We need to stop using this message manager. + childTransport.close(); + watcher.conn.cancelForwarding(prefix); + } + actors.delete(messageManager); +} + +/** + * Unregister everything created for a given watcher against a precise message manager: + * - clear up things from `actors` WeakMap, + * - notify all related target actors as being destroyed, + * - close all DevTools Transports being created for each Message Manager. + * + * @param {WatcherActor} watcher + * @param {MessageManager} + * @param {object} options + * @param {boolean} options.isModeSwitching + * true when this is called as the result of a change to the devtools.browsertoolbox.scope pref + */ +function unregisterWatcherForMessageManager(watcher, messageManager, options) { + const targetActorDescriptions = actors.get(messageManager); + if (!targetActorDescriptions || !targetActorDescriptions.length) { + return; + } + + // Destroy all transports related to this watcher and tells the client to purge all related actors + const matchingTargetActorDescriptions = targetActorDescriptions.filter( + item => item.watcher === watcher + ); + for (const { + prefix, + childTransport, + actor, + } of matchingTargetActorDescriptions) { + watcher.notifyTargetDestroyed(actor, options); + + childTransport.close(); + watcher.conn.cancelForwarding(prefix); + } + + // Then update global `actors` WeakMap by stripping all data about this watcher + const remainingTargetActorDescriptions = targetActorDescriptions.filter( + item => item.watcher !== watcher + ); + if (!remainingTargetActorDescriptions.length) { + actors.delete(messageManager); + } else { + actors.set(messageManager, remainingTargetActorDescriptions); + } +} + +/** + * Destroy everything related to a given watcher that has been created in this module: + * (See unregisterWatcherForMessageManager) + * + * @param {WatcherActor} watcher + * @param {object} options + * @param {boolean} options.isModeSwitching + * true when this is called as the result of a change to the devtools.browsertoolbox.scope pref + */ +function closeWatcherTransports(watcher, options) { + for (let i = 0; i < Services.ppmm.childCount; i++) { + const messageManager = Services.ppmm.getChildAt(i); + unregisterWatcherForMessageManager(watcher, messageManager, options); + } +} + +function maybeRegisterMessageListeners(watcher) { + const sizeBefore = watchers.size; + watchers.add(watcher); + if (sizeBefore == 0 && watchers.size == 1) { + Services.ppmm.addMessageListener( + "debug:content-process-actor", + onContentProcessActorCreated + ); + Services.ppmm.addMessageListener( + "debug:content-process-actor-destroyed", + onContentProcessActorDestroyed + ); + Services.obs.addObserver(onMessageManagerClose, "message-manager-close"); + + // Load the content process server startup script only once, + // otherwise it will be evaluated twice, listen to events twice and create + // target actors twice. + // We may try to load it twice when opening one Browser Toolbox via about:debugging + // and another regular Browser Toolbox. Both will spawn a WatcherActor and watch for processes. + const isContentProcessScripLoaded = Services.ppmm + .getDelayedProcessScripts() + .some(([uri]) => uri === CONTENT_PROCESS_SCRIPT); + if (!isContentProcessScripLoaded) { + Services.ppmm.loadProcessScript(CONTENT_PROCESS_SCRIPT, true); + } + } +} + +/** + * @param {WatcherActor} watcher + * @param {object} options + * @param {boolean} options.isModeSwitching + * true when this is called as the result of a change to the devtools.browsertoolbox.scope pref + */ +function maybeUnregisterMessageListeners(watcher, options = {}) { + const sizeBefore = watchers.size; + watchers.delete(watcher); + closeWatcherTransports(watcher, options); + + if (sizeBefore == 1 && watchers.size == 0) { + Services.ppmm.removeMessageListener( + "debug:content-process-actor", + onContentProcessActorCreated + ); + Services.ppmm.removeMessageListener( + "debug:content-process-actor-destroyed", + onContentProcessActorDestroyed + ); + Services.obs.removeObserver(onMessageManagerClose, "message-manager-close"); + + // We inconditionally remove the process script, while we should only remove it + // once the last DevToolsServer stop watching for processes. + // We might have many server, using distinct loaders, so that this module + // will be spawn many times and we should remove the script only once the last + // module unregister the last watcher of all. + Services.ppmm.removeDelayedProcessScript(CONTENT_PROCESS_SCRIPT); + + Services.ppmm.broadcastAsyncMessage("debug:destroy-process-script", { + options, + }); + } +} + +async function createTargets(watcher) { + // XXX: Should this move to WatcherRegistry?? + maybeRegisterMessageListeners(watcher); + + // Bug 1648499: This could be simplified when migrating to JSProcessActor by using sendQuery. + // For now, hack into WatcherActor in order to know when we created one target + // actor for each existing content process. + // Also, we substract one as the parent process has a message manager and is counted + // in `childCount`, but we ignore it from the process script and it won't reply. + let contentProcessCount = Services.ppmm.childCount - 1; + if (contentProcessCount == 0) { + return; + } + const onTargetsCreated = new Promise(resolve => { + let receivedTargetCount = 0; + const listener = () => { + receivedTargetCount++; + mayBeResolve(); + }; + watcher.on("target-available-form", listener); + const onContentProcessClosed = () => { + // Update the content process count as one has been just destroyed + contentProcessCount--; + mayBeResolve(); + }; + Services.obs.addObserver(onContentProcessClosed, "message-manager-close"); + function mayBeResolve() { + if (receivedTargetCount >= contentProcessCount) { + watcher.off("target-available-form", listener); + Services.obs.removeObserver( + onContentProcessClosed, + "message-manager-close" + ); + resolve(); + } + } + }); + + Services.ppmm.broadcastAsyncMessage("debug:instantiate-already-available", { + watcherActorID: watcher.actorID, + connectionPrefix: watcher.conn.prefix, + sessionData: watcher.sessionData, + }); + + await onTargetsCreated; +} + +/** + * @param {WatcherActor} watcher + * @param {object} options + * @param {boolean} options.isModeSwitching + * true when this is called as the result of a change to the devtools.browsertoolbox.scope pref + */ +function destroyTargets(watcher, options) { + maybeUnregisterMessageListeners(watcher, options); + + Services.ppmm.broadcastAsyncMessage("debug:destroy-target", { + watcherActorID: watcher.actorID, + }); +} + +/** + * Go over all existing content processes in order to communicate about new data entries + * + * @param {Object} options + * @param {WatcherActor} options.watcher + * The Watcher Actor providing new data entries + * @param {string} options.type + * The type of data to be added + * @param {Array<Object>} options.entries + * The values to be added to this type of data + * @param String updateType + * "add" will only add the new entries in the existing data set. + * "set" will update the data set with the new entries. + */ +async function addOrSetSessionDataEntry({ + watcher, + type, + entries, + updateType, +}) { + let expectedCount = Services.ppmm.childCount - 1; + if (expectedCount == 0) { + return; + } + const onAllReplied = new Promise(resolve => { + let count = 0; + const listener = msg => { + if (msg.data.watcherActorID != watcher.actorID) { + return; + } + count++; + maybeResolve(); + }; + Services.ppmm.addMessageListener( + "debug:add-or-set-session-data-entry-done", + listener + ); + const onContentProcessClosed = (messageManager, topic, data) => { + expectedCount--; + maybeResolve(); + }; + const maybeResolve = () => { + if (count == expectedCount) { + Services.ppmm.removeMessageListener( + "debug:add-or-set-session-data-entry-done", + listener + ); + Services.obs.removeObserver( + onContentProcessClosed, + "message-manager-close" + ); + resolve(); + } + }; + Services.obs.addObserver(onContentProcessClosed, "message-manager-close"); + }); + + Services.ppmm.broadcastAsyncMessage("debug:add-or-set-session-data-entry", { + watcherActorID: watcher.actorID, + type, + entries, + updateType, + }); + + await onAllReplied; +} + +/** + * Notify all existing content processes that some data entries have been removed + * + * See addOrSetSessionDataEntry for argument documentation. + */ +function removeSessionDataEntry({ watcher, type, entries }) { + Services.ppmm.broadcastAsyncMessage("debug:remove-session-data-entry", { + watcherActorID: watcher.actorID, + type, + entries, + }); +} + +module.exports = { + createTargets, + destroyTargets, + addOrSetSessionDataEntry, + removeSessionDataEntry, +}; diff --git a/devtools/server/actors/watcher/target-helpers/service-worker-helper.js b/devtools/server/actors/watcher/target-helpers/service-worker-helper.js new file mode 100644 index 0000000000..53fceead17 --- /dev/null +++ b/devtools/server/actors/watcher/target-helpers/service-worker-helper.js @@ -0,0 +1,220 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const { waitForTick } = require("resource://devtools/shared/DevToolsUtils.js"); + +const PROCESS_SCRIPT_URL = + "resource://devtools/server/actors/watcher/target-helpers/service-worker-jsprocessactor-startup.js"; + +const PROCESS_ACTOR_NAME = "DevToolsServiceWorker"; +const PROCESS_ACTOR_OPTIONS = { + // Ignore the parent process. + includeParent: false, + + parent: { + esModuleURI: + "resource://devtools/server/connectors/process-actor/DevToolsServiceWorkerParent.sys.mjs", + }, + + child: { + esModuleURI: + "resource://devtools/server/connectors/process-actor/DevToolsServiceWorkerChild.sys.mjs", + + observers: [ + // Tried various notification to ensure starting the actor + // from webServiceWorker processes... but none of them worked. + /* + "chrome-event-target-created", + "webnavigation-create", + "chrome-webnavigation-create", + "webnavigation-destroy", + "chrome-webnavigation-destroy", + "browsing-context-did-set-embedder", + "browsing-context-discarded", + "ipc:content-initializing", + "ipc:content-created", + */ + + // Fallback on firing a very custom notification from a "process script" (loadProcessScript) + "init-devtools-service-worker-actor", + ], + }, +}; + +// List of all active watchers +const gWatchers = new Set(); + +/** + * Register the DevToolsServiceWorker JS Process Actor, + * if we are registering the first watcher actor. + * + * @param {Watcher Actor} watcher + */ +function maybeRegisterProcessActor(watcher) { + const sizeBefore = gWatchers.size; + gWatchers.add(watcher); + + if (sizeBefore == 0 && gWatchers.size == 1) { + ChromeUtils.registerProcessActor(PROCESS_ACTOR_NAME, PROCESS_ACTOR_OPTIONS); + + // For some reason JSProcessActor doesn't work out of the box for `webServiceWorker` content processes. + // So manually spawn our JSProcessActor from a process script emitting an observer service notification... + // The Process script are correctly executed on all process types during their early startup. + Services.ppmm.loadProcessScript(PROCESS_SCRIPT_URL, true); + } +} + +/** + * Unregister the DevToolsServiceWorker JS Process Actor, + * if we are unregistering the last watcher actor. + * + * @param {Watcher Actor} watcher + */ +function maybeUnregisterProcessActor(watcher) { + const sizeBefore = gWatchers.size; + gWatchers.delete(watcher); + + if (sizeBefore == 1 && gWatchers.size == 0) { + ChromeUtils.unregisterProcessActor( + PROCESS_ACTOR_NAME, + PROCESS_ACTOR_OPTIONS + ); + + Services.ppmm.removeDelayedProcessScript(PROCESS_SCRIPT_URL); + } +} + +/** + * Return the list of all DOM Processes except the one for the parent process + * + * @return Array<nsIDOMProcessParent> + */ +function getAllContentProcesses() { + return ChromeUtils.getAllDOMProcesses().filter( + process => process.childID !== 0 + ); +} + +/** + * Force creating targets for all existing service workers for a given Watcher Actor. + * + * @param WatcherActor watcher + * The Watcher Actor requesting to watch for new targets. + */ +async function createTargets(watcher) { + maybeRegisterProcessActor(watcher); + // Go over all existing content process in order to: + // - Force the instantiation of a DevToolsServiceWorkerChild + // - Have the DevToolsServiceWorkerChild to spawn the WorkerTargetActors + + const promises = []; + for (const process of getAllContentProcesses()) { + const promise = process + .getActor(PROCESS_ACTOR_NAME) + .instantiateServiceWorkerTargets({ + watcherActorID: watcher.actorID, + connectionPrefix: watcher.conn.prefix, + sessionContext: watcher.sessionContext, + sessionData: watcher.sessionData, + }); + promises.push(promise); + } + + // Await for the different queries in order to try to resolve only *after* we received + // the already available worker targets. + return Promise.all(promises); +} + +/** + * Force destroying all worker targets which were related to a given watcher. + * + * @param WatcherActor watcher + * The Watcher Actor requesting to stop watching for new targets. + */ +async function destroyTargets(watcher) { + // Go over all existing content processes in order to destroy all targets + for (const process of getAllContentProcesses()) { + let processActor; + try { + processActor = process.getActor(PROCESS_ACTOR_NAME); + } catch (e) { + // Ignore any exception during destroy as we may be closing firefox/devtools/tab + // and that can easily lead to many exceptions. + continue; + } + + processActor.destroyServiceWorkerTargets({ + watcherActorID: watcher.actorID, + sessionContext: watcher.sessionContext, + }); + } + + // browser_dbg-breakpoints-columns.js crashes if we unregister the Process Actor + // in the same event loop as we call destroyServiceWorkerTargets. + await waitForTick(); + + maybeUnregisterProcessActor(watcher); +} + +/** + * Go over all existing JSProcessActor in order to communicate about new data entries + * + * @param WatcherActor watcher + * The Watcher Actor requesting to update data entries. + * @param string type + * The type of data to be added + * @param Array<Object> entries + * The values to be added to this type of data + * @param String updateType + * "add" will only add the new entries in the existing data set. + * "set" will update the data set with the new entries. + */ +async function addOrSetSessionDataEntry({ + watcher, + type, + entries, + updateType, +}) { + maybeRegisterProcessActor(watcher); + const promises = []; + for (const process of getAllContentProcesses()) { + const promise = process + .getActor(PROCESS_ACTOR_NAME) + .addOrSetSessionDataEntry({ + watcherActorID: watcher.actorID, + sessionContext: watcher.sessionContext, + type, + entries, + updateType, + }); + promises.push(promise); + } + // Await for the queries in order to try to resolve only *after* the remote code processed the new data + return Promise.all(promises); +} + +/** + * Notify all existing frame targets that some data entries have been removed + * + * See addOrSetSessionDataEntry for argument documentation. + */ +function removeSessionDataEntry({ watcher, type, entries }) { + for (const process of getAllContentProcesses()) { + process.getActor(PROCESS_ACTOR_NAME).removeSessionDataEntry({ + watcherActorID: watcher.actorID, + sessionContext: watcher.sessionContext, + type, + entries, + }); + } +} + +module.exports = { + createTargets, + destroyTargets, + addOrSetSessionDataEntry, + removeSessionDataEntry, +}; diff --git a/devtools/server/actors/watcher/target-helpers/service-worker-jsprocessactor-startup.js b/devtools/server/actors/watcher/target-helpers/service-worker-jsprocessactor-startup.js new file mode 100644 index 0000000000..03f042ad68 --- /dev/null +++ b/devtools/server/actors/watcher/target-helpers/service-worker-jsprocessactor-startup.js @@ -0,0 +1,26 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const { setTimeout } = ChromeUtils.importESModule( + "resource://gre/modules/Timer.sys.mjs" +); + +/* + We can't spawn the JSProcessActor right away and have to spin the event loop. + Otherwise it isn't registered yet and isn't listening to observer service. + Could it be the reason why JSProcessActor aren't spawn via process actor option's child.observers notifications ?? +*/ +setTimeout(function () { + /* + This notification is registered in DevToolsServiceWorker JS process actor's options's `observers` attribute + and will force the JS Process actor to be instantiated in all processes. + */ + Services.obs.notifyObservers(null, "init-devtools-service-worker-actor"); + /* + Instead of using observer service, we could also manually call some method of the actor: + ChromeUtils.domProcessChild.getActor("DevToolsServiceWorker").observe(null, "foo"); + */ +}, 0); diff --git a/devtools/server/actors/watcher/target-helpers/worker-helper.js b/devtools/server/actors/watcher/target-helpers/worker-helper.js new file mode 100644 index 0000000000..671d1dc706 --- /dev/null +++ b/devtools/server/actors/watcher/target-helpers/worker-helper.js @@ -0,0 +1,137 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const DEVTOOLS_WORKER_JS_WINDOW_ACTOR_NAME = "DevToolsWorker"; + +/** + * Force creating targets for all existing workers for a given Watcher Actor. + * + * @param WatcherActor watcher + * The Watcher Actor requesting to watch for new targets. + */ +async function createTargets(watcher) { + // Go over all existing BrowsingContext in order to: + // - Force the instantiation of a DevToolsWorkerChild + // - Have the DevToolsWorkerChild to spawn the WorkerTargetActors + const browsingContexts = watcher.getAllBrowsingContexts({ + acceptSameProcessIframes: true, + forceAcceptTopLevelTarget: true, + }); + const promises = []; + for (const browsingContext of browsingContexts) { + const promise = browsingContext.currentWindowGlobal + .getActor(DEVTOOLS_WORKER_JS_WINDOW_ACTOR_NAME) + .instantiateWorkerTargets({ + watcherActorID: watcher.actorID, + connectionPrefix: watcher.conn.prefix, + sessionContext: watcher.sessionContext, + sessionData: watcher.sessionData, + }); + promises.push(promise); + } + + // Await for the different queries in order to try to resolve only *after* we received + // the already available worker targets. + return Promise.all(promises); +} + +/** + * Force destroying all worker targets which were related to a given watcher. + * + * @param WatcherActor watcher + * The Watcher Actor requesting to stop watching for new targets. + */ +async function destroyTargets(watcher) { + // Go over all existing BrowsingContext in order to destroy all targets + const browsingContexts = watcher.getAllBrowsingContexts({ + acceptSameProcessIframes: true, + forceAcceptTopLevelTarget: true, + }); + for (const browsingContext of browsingContexts) { + let windowActor; + try { + windowActor = browsingContext.currentWindowGlobal.getActor( + DEVTOOLS_WORKER_JS_WINDOW_ACTOR_NAME + ); + } catch (e) { + continue; + } + + windowActor.destroyWorkerTargets({ + watcherActorID: watcher.actorID, + sessionContext: watcher.sessionContext, + }); + } +} + +/** + * Go over all existing BrowsingContext in order to communicate about new data entries + * + * @param WatcherActor watcher + * The Watcher Actor requesting to stop watching for new targets. + * @param string type + * The type of data to be added + * @param Array<Object> entries + * The values to be added to this type of data + * @param String updateType + * "add" will only add the new entries in the existing data set. + * "set" will update the data set with the new entries. + */ +async function addOrSetSessionDataEntry({ + watcher, + type, + entries, + updateType, +}) { + const browsingContexts = watcher.getAllBrowsingContexts({ + acceptSameProcessIframes: true, + forceAcceptTopLevelTarget: true, + }); + const promises = []; + for (const browsingContext of browsingContexts) { + const promise = browsingContext.currentWindowGlobal + .getActor(DEVTOOLS_WORKER_JS_WINDOW_ACTOR_NAME) + .addOrSetSessionDataEntry({ + watcherActorID: watcher.actorID, + sessionContext: watcher.sessionContext, + type, + entries, + updateType, + }); + promises.push(promise); + } + // Await for the queries in order to try to resolve only *after* the remote code processed the new data + return Promise.all(promises); +} + +/** + * Notify all existing frame targets that some data entries have been removed + * + * See addOrSetSessionDataEntry for argument documentation. + */ +function removeSessionDataEntry({ watcher, type, entries }) { + const browsingContexts = watcher.getAllBrowsingContexts({ + acceptSameProcessIframes: true, + forceAcceptTopLevelTarget: true, + }); + for (const browsingContext of browsingContexts) { + browsingContext.currentWindowGlobal + .getActor(DEVTOOLS_WORKER_JS_WINDOW_ACTOR_NAME) + .removeSessionDataEntry({ + watcherActorID: watcher.actorID, + sessionContext: watcher.sessionContext, + type, + entries, + }); + } +} + +module.exports = { + createTargets, + destroyTargets, + addOrSetSessionDataEntry, + removeSessionDataEntry, +}; diff --git a/devtools/server/actors/webbrowser.js b/devtools/server/actors/webbrowser.js new file mode 100644 index 0000000000..c05a863839 --- /dev/null +++ b/devtools/server/actors/webbrowser.js @@ -0,0 +1,776 @@ +/* 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"; + +var { + DevToolsServer, +} = require("resource://devtools/server/devtools-server.js"); +var { + ActorRegistry, +} = require("resource://devtools/server/actors/utils/actor-registry.js"); +var DevToolsUtils = require("resource://devtools/shared/DevToolsUtils.js"); + +loader.lazyRequireGetter( + this, + "RootActor", + "resource://devtools/server/actors/root.js", + true +); +loader.lazyRequireGetter( + this, + "TabDescriptorActor", + "resource://devtools/server/actors/descriptors/tab.js", + true +); +loader.lazyRequireGetter( + this, + "WebExtensionDescriptorActor", + "resource://devtools/server/actors/descriptors/webextension.js", + true +); +loader.lazyRequireGetter( + this, + "WorkerDescriptorActorList", + "resource://devtools/server/actors/worker/worker-descriptor-actor-list.js", + true +); +loader.lazyRequireGetter( + this, + "ServiceWorkerRegistrationActorList", + "resource://devtools/server/actors/worker/service-worker-registration-list.js", + true +); +loader.lazyRequireGetter( + this, + "ProcessActorList", + "resource://devtools/server/actors/process.js", + true +); +const lazy = {}; +loader.lazyGetter(lazy, "AddonManager", () => { + return ChromeUtils.importESModule( + "resource://gre/modules/AddonManager.sys.mjs", + { loadInDevToolsLoader: false } + ).AddonManager; +}); + +/** + * Browser-specific actors. + */ + +/** + * Retrieve the window type of the top-level window |window|. + */ +function appShellDOMWindowType(window) { + /* This is what nsIWindowMediator's enumerator checks. */ + return window.document.documentElement.getAttribute("windowtype"); +} + +/** + * Send Debugger:Shutdown events to all "navigator:browser" windows. + */ +function sendShutdownEvent() { + for (const win of Services.wm.getEnumerator( + DevToolsServer.chromeWindowType + )) { + const evt = win.document.createEvent("Event"); + evt.initEvent("Debugger:Shutdown", true, false); + win.document.documentElement.dispatchEvent(evt); + } +} + +exports.sendShutdownEvent = sendShutdownEvent; + +/** + * Construct a root actor appropriate for use in a server running in a + * browser. The returned root actor: + * - respects the factories registered with ActorRegistry.addGlobalActor, + * - uses a BrowserTabList to supply target actors for tabs, + * - sends all navigator:browser window documents a Debugger:Shutdown event + * when it exits. + * + * * @param connection DevToolsServerConnection + * The conection to the client. + */ +exports.createRootActor = function createRootActor(connection) { + return new RootActor(connection, { + tabList: new BrowserTabList(connection), + addonList: new BrowserAddonList(connection), + workerList: new WorkerDescriptorActorList(connection, {}), + serviceWorkerRegistrationList: new ServiceWorkerRegistrationActorList( + connection + ), + processList: new ProcessActorList(), + globalActorFactories: ActorRegistry.globalActorFactories, + onShutdown: sendShutdownEvent, + }); +}; + +/** + * A live list of TabDescriptorActors representing the current browser tabs, + * to be provided to the root actor to answer 'listTabs' requests. + * + * This object also takes care of listening for TabClose events and + * onCloseWindow notifications, and exiting the target actors concerned. + * + * (See the documentation for RootActor for the definition of the "live + * list" interface.) + * + * @param connection DevToolsServerConnection + * The connection in which this list's target actors may participate. + * + * Some notes: + * + * This constructor is specific to the desktop browser environment; it + * maintains the tab list by tracking XUL windows and their XUL documents' + * "tabbrowser", "tab", and "browser" elements. What's entailed in maintaining + * an accurate list of open tabs in this context? + * + * - Opening and closing XUL windows: + * + * An nsIWindowMediatorListener is notified when new XUL windows (i.e., desktop + * windows) are opened and closed. It is not notified of individual content + * browser tabs coming and going within such a XUL window. That seems + * reasonable enough; it's concerned with XUL windows, not tab elements in the + * window's XUL document. + * + * However, even if we attach TabOpen and TabClose event listeners to each XUL + * window as soon as it is created: + * + * - we do not receive a TabOpen event for the initial empty tab of a new XUL + * window; and + * + * - we do not receive TabClose events for the tabs of a XUL window that has + * been closed. + * + * This means that TabOpen and TabClose events alone are not sufficient to + * maintain an accurate list of live tabs and mark target actors as closed + * promptly. Our nsIWindowMediatorListener onCloseWindow handler must find and + * exit all actors for tabs that were in the closing window. + * + * Since this is a bit hairy, we don't make each individual attached target + * actor responsible for noticing when it has been closed; we watch for that, + * and promise to call each actor's 'exit' method when it's closed, regardless + * of how we learn the news. + * + * - nsIWindowMediator locks + * + * nsIWindowMediator holds a lock protecting its list of top-level windows + * while it calls nsIWindowMediatorListener methods. nsIWindowMediator's + * GetEnumerator method also tries to acquire that lock. Thus, enumerating + * windows from within a listener method deadlocks (bug 873589). Rah. One + * can sometimes work around this by leaving the enumeration for a later + * tick. + * + * - Dragging tabs between windows: + * + * When a tab is dragged from one desktop window to another, we receive a + * TabOpen event for the new tab, and a TabClose event for the old tab; tab XUL + * elements do not really move from one document to the other (although their + * linked browser's content window objects do). + * + * However, while we could thus assume that each tab stays with the XUL window + * it belonged to when it was created, I'm not sure this is behavior one should + * rely upon. When a XUL window is closed, we take the less efficient, more + * conservative approach of simply searching the entire table for actors that + * belong to the closing XUL window, rather than trying to somehow track which + * XUL window each tab belongs to. + */ +function BrowserTabList(connection) { + this._connection = connection; + + /* + * The XUL document of a tabbed browser window has "tab" elements, whose + * 'linkedBrowser' JavaScript properties are "browser" elements; those + * browsers' 'contentWindow' properties are wrappers on the tabs' content + * window objects. + * + * This map's keys are "browser" XUL elements; it maps each browser element + * to the target actor we've created for its content window, if we've created + * one. This map serves several roles: + * + * - During iteration, we use it to find actors we've created previously. + * + * - On a TabClose event, we use it to find the tab's target actor and exit it. + * + * - When the onCloseWindow handler is called, we iterate over it to find all + * tabs belonging to the closing XUL window, and exit them. + * + * - When it's empty, and the onListChanged hook is null, we know we can + * stop listening for events and notifications. + * + * We listen for TabClose events and onCloseWindow notifications in order to + * send onListChanged notifications, but also to tell actors when their + * referent has gone away and remove entries for dead browsers from this map. + * If that code is working properly, neither this map nor the actors in it + * should ever hold dead tabs alive. + */ + this._actorByBrowser = new Map(); + + /* The current onListChanged handler, or null. */ + this._onListChanged = null; + + /* + * True if we've been iterated over since we last called our onListChanged + * hook. + */ + this._mustNotify = false; + + /* True if we're testing, and should throw if consistency checks fail. */ + this._testing = false; + + this._onPageTitleChangedEvent = this._onPageTitleChangedEvent.bind(this); +} + +BrowserTabList.prototype.constructor = BrowserTabList; + +BrowserTabList.prototype.destroy = function () { + this._actorByBrowser.clear(); + this.onListChanged = null; +}; + +/** + * Get the selected browser for the given navigator:browser window. + * @private + * @param window nsIChromeWindow + * The navigator:browser window for which you want the selected browser. + * @return Element|null + * The currently selected xul:browser element, if any. Note that the + * browser window might not be loaded yet - the function will return + * |null| in such cases. + */ +BrowserTabList.prototype._getSelectedBrowser = function (window) { + return window.gBrowser ? window.gBrowser.selectedBrowser : null; +}; + +/** + * Produces an iterable (in this case a generator) to enumerate all available + * browser tabs. + */ +BrowserTabList.prototype._getBrowsers = function* () { + // Iterate over all navigator:browser XUL windows. + for (const win of Services.wm.getEnumerator( + DevToolsServer.chromeWindowType + )) { + // For each tab in this XUL window, ensure that we have an actor for + // it, reusing existing actors where possible. + for (const browser of this._getChildren(win)) { + yield browser; + } + } +}; + +BrowserTabList.prototype._getChildren = function (window) { + if (!window.gBrowser) { + return []; + } + const { gBrowser } = window; + if (!gBrowser.browsers) { + return []; + } + return gBrowser.browsers.filter(browser => { + // Filter tabs that are closing. listTabs calls made right after TabClose + // events still list tabs in process of being closed. + const tab = gBrowser.getTabForBrowser(browser); + return !tab.closing; + }); +}; + +BrowserTabList.prototype.getList = async function () { + // As a sanity check, make sure all the actors presently in our map get + // picked up when we iterate over all windows' tabs. + const initialMapSize = this._actorByBrowser.size; + this._foundCount = 0; + + const actors = []; + + for (const browser of this._getBrowsers()) { + try { + const actor = await this._getActorForBrowser(browser); + actors.push(actor); + } catch (e) { + if (e.error === "tabDestroyed") { + // Ignore the error if a tab was destroyed while retrieving the tab list. + continue; + } + + // Forward unexpected errors. + throw e; + } + } + + if (this._testing && initialMapSize !== this._foundCount) { + throw new Error("_actorByBrowser map contained actors for dead tabs"); + } + + this._mustNotify = true; + this._checkListening(); + + return actors; +}; + +BrowserTabList.prototype._getActorForBrowser = async function (browser) { + // Do we have an existing actor for this browser? If not, create one. + let actor = this._actorByBrowser.get(browser); + if (actor) { + this._foundCount++; + return actor; + } + + actor = new TabDescriptorActor(this._connection, browser); + this._actorByBrowser.set(browser, actor); + this._checkListening(); + return actor; +}; + +/** + * Return the tab descriptor : + * - for the tab matching a browserId if one is passed + * - OR the currently selected tab if no browserId is passed. + * + * @param {Number} browserId: use to match any tab + */ +BrowserTabList.prototype.getTab = function ({ browserId }) { + if (typeof browserId == "number") { + const browsingContext = BrowsingContext.getCurrentTopByBrowserId(browserId); + if (!browsingContext) { + return Promise.reject({ + error: "noTab", + message: `Unable to find tab with browserId '${browserId}' (no browsing-context)`, + }); + } + const browser = browsingContext.embedderElement; + if (!browser) { + return Promise.reject({ + error: "noTab", + message: `Unable to find tab with browserId '${browserId}' (no embedder element)`, + }); + } + return this._getActorForBrowser(browser); + } + + const topAppWindow = Services.wm.getMostRecentWindow( + DevToolsServer.chromeWindowType + ); + if (topAppWindow) { + const selectedBrowser = this._getSelectedBrowser(topAppWindow); + return this._getActorForBrowser(selectedBrowser); + } + return Promise.reject({ + error: "noTab", + message: "Unable to find any selected browser", + }); +}; + +Object.defineProperty(BrowserTabList.prototype, "onListChanged", { + enumerable: true, + configurable: true, + get() { + return this._onListChanged; + }, + set(v) { + if (v !== null && typeof v !== "function") { + throw new Error( + "onListChanged property may only be set to 'null' or a function" + ); + } + this._onListChanged = v; + this._checkListening(); + }, +}); + +/** + * The set of tabs has changed somehow. Call our onListChanged handler, if + * one is set, and if we haven't already called it since the last iteration. + */ +BrowserTabList.prototype._notifyListChanged = function () { + if (!this._onListChanged) { + return; + } + if (this._mustNotify) { + this._onListChanged(); + this._mustNotify = false; + } +}; + +/** + * Exit |actor|, belonging to |browser|, and notify the onListChanged + * handle if needed. + */ +BrowserTabList.prototype._handleActorClose = function (actor, browser) { + if (this._testing) { + if (this._actorByBrowser.get(browser) !== actor) { + throw new Error( + "TabDescriptorActor not stored in map under given browser" + ); + } + if (actor.browser !== browser) { + throw new Error("actor's browser and map key don't match"); + } + } + + this._actorByBrowser.delete(browser); + actor.destroy(); + + this._notifyListChanged(); + this._checkListening(); +}; + +/** + * Make sure we are listening or not listening for activity elsewhere in + * the browser, as appropriate. Other than setting up newly created XUL + * windows, all listener / observer management should happen here. + */ +BrowserTabList.prototype._checkListening = function () { + /* + * If we have an onListChanged handler that we haven't sent an announcement + * to since the last iteration, we need to watch for tab creation as well as + * change of the currently selected tab and tab title changes of tabs in + * parent process via TabAttrModified (tabs oop uses DOMTitleChanges). + * + * Oddly, we don't need to watch for 'close' events here. If our actor list + * is empty, then either it was empty the last time we iterated, and no + * close events are possible, or it was not empty the last time we + * iterated, but all the actors have since been closed, and we must have + * sent a notification already when they closed. + */ + this._listenForEventsIf( + this._onListChanged && this._mustNotify, + "_listeningForTabOpen", + ["TabOpen", "TabSelect", "TabAttrModified"] + ); + + /* If we have live actors, we need to be ready to mark them dead. */ + this._listenForEventsIf( + this._actorByBrowser.size > 0, + "_listeningForTabClose", + ["TabClose"] + ); + + /* + * We must listen to the window mediator in either case, since that's the + * only way to find out about tabs that come and go when top-level windows + * are opened and closed. + */ + this._listenToMediatorIf( + (this._onListChanged && this._mustNotify) || this._actorByBrowser.size > 0 + ); + + /* + * We also listen for title changed events on the browser. + */ + this._listenForEventsIf( + this._onListChanged && this._mustNotify, + "_listeningForTitleChange", + ["pagetitlechanged"], + this._onPageTitleChangedEvent + ); +}; + +/* + * Add or remove event listeners for all XUL windows. + * + * @param shouldListen boolean + * True if we should add event handlers; false if we should remove them. + * @param guard string + * The name of a guard property of 'this', indicating whether we're + * already listening for those events. + * @param eventNames array of strings + * An array of event names. + */ +BrowserTabList.prototype._listenForEventsIf = function ( + shouldListen, + guard, + eventNames, + listener = this +) { + if (!shouldListen !== !this[guard]) { + const op = shouldListen ? "addEventListener" : "removeEventListener"; + for (const win of Services.wm.getEnumerator( + DevToolsServer.chromeWindowType + )) { + for (const name of eventNames) { + win[op](name, listener, false); + } + } + this[guard] = shouldListen; + } +}; + +/* + * Event listener for pagetitlechanged event. + */ +BrowserTabList.prototype._onPageTitleChangedEvent = function (event) { + switch (event.type) { + case "pagetitlechanged": { + const browser = event.target; + this._onDOMTitleChanged(browser); + break; + } + } +}; + +/** + * Handle "DOMTitleChanged" event. + */ +BrowserTabList.prototype._onDOMTitleChanged = DevToolsUtils.makeInfallible( + function (browser) { + const actor = this._actorByBrowser.get(browser); + if (actor) { + this._notifyListChanged(); + this._checkListening(); + } + } +); + +/** + * Implement nsIDOMEventListener. + */ +BrowserTabList.prototype.handleEvent = DevToolsUtils.makeInfallible(function ( + event +) { + // If event target has `linkedBrowser`, the event target can be assumed <tab> element. + // Else, event target is assumed <browser> element, use the target as it is. + const browser = event.target.linkedBrowser || event.target; + switch (event.type) { + case "TabOpen": + case "TabSelect": { + /* Don't create a new actor; iterate will take care of that. Just notify. */ + this._notifyListChanged(); + this._checkListening(); + break; + } + case "TabClose": { + const actor = this._actorByBrowser.get(browser); + if (actor) { + this._handleActorClose(actor, browser); + } + break; + } + case "TabAttrModified": { + // Remote <browser> title changes are handled via DOMTitleChange message + // TabAttrModified is only here for browsers in parent process which + // don't send this message. + if (browser.isRemoteBrowser) { + break; + } + const actor = this._actorByBrowser.get(browser); + if (actor) { + // TabAttrModified is fired in various cases, here only care about title + // changes + if (event.detail.changed.includes("label")) { + this._notifyListChanged(); + this._checkListening(); + } + } + break; + } + } +}, +"BrowserTabList.prototype.handleEvent"); + +/* + * If |shouldListen| is true, ensure we've registered a listener with the + * window mediator. Otherwise, ensure we haven't registered a listener. + */ +BrowserTabList.prototype._listenToMediatorIf = function (shouldListen) { + if (!shouldListen !== !this._listeningToMediator) { + const op = shouldListen ? "addListener" : "removeListener"; + Services.wm[op](this); + this._listeningToMediator = shouldListen; + } +}; + +/** + * nsIWindowMediatorListener implementation. + * + * See _onTabClosed for explanation of why we needn't actually tweak any + * actors or tables here. + * + * An nsIWindowMediatorListener's methods get passed all sorts of windows; we + * only care about the tab containers. Those have 'gBrowser' members. + */ +BrowserTabList.prototype.onOpenWindow = DevToolsUtils.makeInfallible(function ( + window +) { + const handleLoad = DevToolsUtils.makeInfallible(() => { + /* We don't want any further load events from this window. */ + window.removeEventListener("load", handleLoad); + + if (appShellDOMWindowType(window) !== DevToolsServer.chromeWindowType) { + return; + } + + // Listen for future tab activity. + if (this._listeningForTabOpen) { + window.addEventListener("TabOpen", this); + window.addEventListener("TabSelect", this); + window.addEventListener("TabAttrModified", this); + } + if (this._listeningForTabClose) { + window.addEventListener("TabClose", this); + } + if (this._listeningForTitleChange) { + window.messageManager.addMessageListener("DOMTitleChanged", this); + } + + // As explained above, we will not receive a TabOpen event for this + // document's initial tab, so we must notify our client of the new tab + // this will have. + this._notifyListChanged(); + }); + + /* + * You can hardly do anything at all with a XUL window at this point; it + * doesn't even have its document yet. Wait until its document has + * loaded, and then see what we've got. This also avoids + * nsIWindowMediator enumeration from within listeners (bug 873589). + */ + window = window + .QueryInterface(Ci.nsIInterfaceRequestor) + .getInterface(Ci.nsIDOMWindow); + + window.addEventListener("load", handleLoad); +}, +"BrowserTabList.prototype.onOpenWindow"); + +BrowserTabList.prototype.onCloseWindow = DevToolsUtils.makeInfallible(function ( + window +) { + if (window instanceof Ci.nsIAppWindow) { + window = window.docShell.domWindow; + } + + if (appShellDOMWindowType(window) !== DevToolsServer.chromeWindowType) { + return; + } + + /* + * nsIWindowMediator deadlocks if you call its GetEnumerator method from + * a nsIWindowMediatorListener's onCloseWindow hook (bug 873589), so + * handle the close in a different tick. + */ + Services.tm.dispatchToMainThread( + DevToolsUtils.makeInfallible(() => { + /* + * Scan the entire map for actors representing tabs that were in this + * top-level window, and exit them. + */ + for (const [browser, actor] of this._actorByBrowser) { + /* The browser document of a closed window has no default view. */ + if (!browser.ownerGlobal) { + this._handleActorClose(actor, browser); + } + } + }, "BrowserTabList.prototype.onCloseWindow's delayed body") + ); +}, +"BrowserTabList.prototype.onCloseWindow"); + +exports.BrowserTabList = BrowserTabList; + +function BrowserAddonList(connection) { + this._connection = connection; + this._actorByAddonId = new Map(); + this._onListChanged = null; +} + +BrowserAddonList.prototype.getList = async function () { + const addons = await lazy.AddonManager.getAllAddons(); + for (const addon of addons) { + let actor = this._actorByAddonId.get(addon.id); + if (!actor) { + actor = new WebExtensionDescriptorActor(this._connection, addon); + this._actorByAddonId.set(addon.id, actor); + } + } + + return Array.from(this._actorByAddonId, ([_, actor]) => actor); +}; + +Object.defineProperty(BrowserAddonList.prototype, "onListChanged", { + enumerable: true, + configurable: true, + get() { + return this._onListChanged; + }, + set(v) { + if (v !== null && typeof v != "function") { + throw new Error( + "onListChanged property may only be set to 'null' or a function" + ); + } + this._onListChanged = v; + this._adjustListener(); + }, +}); + +/** + * AddonManager listener must implement onDisabled. + */ +BrowserAddonList.prototype.onDisabled = function (addon) { + this._onAddonManagerUpdated(); +}; + +/** + * AddonManager listener must implement onEnabled. + */ +BrowserAddonList.prototype.onEnabled = function (addon) { + this._onAddonManagerUpdated(); +}; + +/** + * AddonManager listener must implement onInstalled. + */ +BrowserAddonList.prototype.onInstalled = function (addon) { + this._onAddonManagerUpdated(); +}; + +/** + * AddonManager listener must implement onOperationCancelled. + */ +BrowserAddonList.prototype.onOperationCancelled = function (addon) { + this._onAddonManagerUpdated(); +}; + +/** + * AddonManager listener must implement onUninstalling. + */ +BrowserAddonList.prototype.onUninstalling = function (addon) { + this._onAddonManagerUpdated(); +}; + +/** + * AddonManager listener must implement onUninstalled. + */ +BrowserAddonList.prototype.onUninstalled = function (addon) { + this._actorByAddonId.delete(addon.id); + this._onAddonManagerUpdated(); +}; + +BrowserAddonList.prototype._onAddonManagerUpdated = function (addon) { + this._notifyListChanged(); + this._adjustListener(); +}; + +BrowserAddonList.prototype._notifyListChanged = function () { + if (this._onListChanged) { + this._onListChanged(); + } +}; + +BrowserAddonList.prototype._adjustListener = function () { + if (this._onListChanged) { + // As long as the callback exists, we need to listen for changes + // so we can notify about add-on changes. + lazy.AddonManager.addAddonListener(this); + } else if (this._actorByAddonId.size === 0) { + // When the callback does not exist, we only need to keep listening + // if the actor cache will need adjusting when add-ons change. + lazy.AddonManager.removeAddonListener(this); + } +}; + +exports.BrowserAddonList = BrowserAddonList; diff --git a/devtools/server/actors/webconsole.js b/devtools/server/actors/webconsole.js new file mode 100644 index 0000000000..14401b3fbe --- /dev/null +++ b/devtools/server/actors/webconsole.js @@ -0,0 +1,1736 @@ +/* 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/. */ + +/* global clearConsoleEvents */ + +"use strict"; + +const { Actor } = require("resource://devtools/shared/protocol.js"); +const { + webconsoleSpec, +} = require("resource://devtools/shared/specs/webconsole.js"); + +const { + DevToolsServer, +} = require("resource://devtools/server/devtools-server.js"); +const { ThreadActor } = require("resource://devtools/server/actors/thread.js"); +const { ObjectActor } = require("resource://devtools/server/actors/object.js"); +const { + LongStringActor, +} = require("resource://devtools/server/actors/string.js"); +const { + createValueGrip, + isArray, + stringIsLong, +} = require("resource://devtools/server/actors/object/utils.js"); +const DevToolsUtils = require("resource://devtools/shared/DevToolsUtils.js"); +const ErrorDocs = require("resource://devtools/server/actors/errordocs.js"); +const Targets = require("resource://devtools/server/actors/targets/index.js"); + +loader.lazyRequireGetter( + this, + "evalWithDebugger", + "resource://devtools/server/actors/webconsole/eval-with-debugger.js", + true +); +loader.lazyRequireGetter( + this, + "ConsoleFileActivityListener", + "resource://devtools/server/actors/webconsole/listeners/console-file-activity.js", + true +); +loader.lazyRequireGetter( + this, + "jsPropertyProvider", + "resource://devtools/shared/webconsole/js-property-provider.js", + true +); +loader.lazyRequireGetter( + this, + ["isCommand"], + "resource://devtools/server/actors/webconsole/commands/parser.js", + true +); +loader.lazyRequireGetter( + this, + ["CONSOLE_WORKER_IDS", "WebConsoleUtils"], + "resource://devtools/server/actors/webconsole/utils.js", + true +); +loader.lazyRequireGetter( + this, + ["WebConsoleCommandsManager"], + "resource://devtools/server/actors/webconsole/commands/manager.js", + true +); +loader.lazyRequireGetter( + this, + "EnvironmentActor", + "resource://devtools/server/actors/environment.js", + true +); +loader.lazyRequireGetter( + this, + "EventEmitter", + "resource://devtools/shared/event-emitter.js" +); +loader.lazyRequireGetter( + this, + "MESSAGE_CATEGORY", + "resource://devtools/shared/constants.js", + true +); + +// Generated by /devtools/shared/webconsole/GenerateReservedWordsJS.py +loader.lazyRequireGetter( + this, + "RESERVED_JS_KEYWORDS", + "resource://devtools/shared/webconsole/reserved-js-words.js" +); + +// Overwrite implemented listeners for workers so that we don't attempt +// to load an unsupported module. +if (isWorker) { + loader.lazyRequireGetter( + this, + ["ConsoleAPIListener", "ConsoleServiceListener"], + "resource://devtools/server/actors/webconsole/worker-listeners.js", + true + ); +} else { + loader.lazyRequireGetter( + this, + "ConsoleAPIListener", + "resource://devtools/server/actors/webconsole/listeners/console-api.js", + true + ); + loader.lazyRequireGetter( + this, + "ConsoleServiceListener", + "resource://devtools/server/actors/webconsole/listeners/console-service.js", + true + ); + loader.lazyRequireGetter( + this, + "ConsoleReflowListener", + "resource://devtools/server/actors/webconsole/listeners/console-reflow.js", + true + ); + loader.lazyRequireGetter( + this, + "DocumentEventsListener", + "resource://devtools/server/actors/webconsole/listeners/document-events.js", + true + ); +} +loader.lazyRequireGetter( + this, + "ObjectUtils", + "resource://devtools/server/actors/object/utils.js" +); + +function isObject(value) { + return Object(value) === value; +} + +/** + * The WebConsoleActor implements capabilities needed for the Web Console + * feature. + * + * @constructor + * @param object connection + * The connection to the client, DevToolsServerConnection. + * @param object [parentActor] + * Optional, the parent actor. + */ +class WebConsoleActor extends Actor { + constructor(connection, parentActor) { + super(connection, webconsoleSpec); + + this.parentActor = parentActor; + + this.dbg = this.parentActor.dbg; + + this._gripDepth = 0; + this._evalCounter = 0; + this._listeners = new Set(); + this._lastConsoleInputEvaluation = undefined; + + this.objectGrip = this.objectGrip.bind(this); + this._onWillNavigate = this._onWillNavigate.bind(this); + this._onChangedToplevelDocument = + this._onChangedToplevelDocument.bind(this); + this.onConsoleServiceMessage = this.onConsoleServiceMessage.bind(this); + this.onConsoleAPICall = this.onConsoleAPICall.bind(this); + this.onDocumentEvent = this.onDocumentEvent.bind(this); + + EventEmitter.on( + this.parentActor, + "changed-toplevel-document", + this._onChangedToplevelDocument + ); + } + + /** + * Debugger instance. + * + * @see jsdebugger.sys.mjs + */ + dbg = null; + + /** + * This is used by the ObjectActor to keep track of the depth of grip() calls. + * @private + * @type number + */ + _gripDepth = null; + + /** + * Holds a set of all currently registered listeners. + * + * @private + * @type Set + */ + _listeners = null; + + /** + * The global we work with (this can be a Window, a Worker global or even a Sandbox + * for processes and addons). + * + * @type nsIDOMWindow, WorkerGlobalScope or Sandbox + */ + get global() { + if (this.parentActor.isRootActor) { + return this._getWindowForBrowserConsole(); + } + return this.parentActor.window || this.parentActor.workerGlobal; + } + + /** + * Get a window to use for the browser console. + * + * (note that is is also used for browser toolbox and webextension + * i.e. all targets flagged with isRootActor=true) + * + * @private + * @return nsIDOMWindow + * The window to use, or null if no window could be found. + */ + _getWindowForBrowserConsole() { + // Check if our last used chrome window is still live. + let window = this._lastChromeWindow && this._lastChromeWindow.get(); + // If not, look for a new one. + // In case of WebExtension reload of the background page, the last + // chrome window might be a dead wrapper, from which we can't check for window.closed. + if (!window || Cu.isDeadWrapper(window) || window.closed) { + window = this.parentActor.window; + if (!window) { + // Try to find the Browser Console window to use instead. + window = Services.wm.getMostRecentWindow("devtools:webconsole"); + // We prefer the normal chrome window over the console window, + // so we'll look for those windows in order to replace our reference. + const onChromeWindowOpened = () => { + // We'll look for this window when someone next requests window() + Services.obs.removeObserver(onChromeWindowOpened, "domwindowopened"); + this._lastChromeWindow = null; + }; + Services.obs.addObserver(onChromeWindowOpened, "domwindowopened"); + } + + this._handleNewWindow(window); + } + + return window; + } + + /** + * Store a newly found window on the actor to be used in the future. + * + * @private + * @param nsIDOMWindow window + * The window to store on the actor (can be null). + */ + _handleNewWindow(window) { + if (window) { + if (this._hadChromeWindow) { + Services.console.logStringMessage("Webconsole context has changed"); + } + this._lastChromeWindow = Cu.getWeakReference(window); + this._hadChromeWindow = true; + } else { + this._lastChromeWindow = null; + } + } + + /** + * Whether we've been using a window before. + * + * @private + * @type boolean + */ + _hadChromeWindow = false; + + /** + * A weak reference to the last chrome window we used to work with. + * + * @private + * @type nsIWeakReference + */ + _lastChromeWindow = null; + + // The evalGlobal is used at the scope for JS evaluation. + _evalGlobal = null; + get evalGlobal() { + return this._evalGlobal || this.global; + } + + set evalGlobal(global) { + this._evalGlobal = global; + + if (!this._progressListenerActive) { + EventEmitter.on(this.parentActor, "will-navigate", this._onWillNavigate); + this._progressListenerActive = true; + } + } + + /** + * Flag used to track if we are listening for events from the progress + * listener of the target actor. We use the progress listener to clear + * this.evalGlobal on page navigation. + * + * @private + * @type boolean + */ + _progressListenerActive = false; + + /** + * The ConsoleServiceListener instance. + * @type object + */ + consoleServiceListener = null; + + /** + * The ConsoleAPIListener instance. + */ + consoleAPIListener = null; + + /** + * The ConsoleFileActivityListener instance. + */ + consoleFileActivityListener = null; + + /** + * The ConsoleReflowListener instance. + */ + consoleReflowListener = null; + + grip() { + return { actor: this.actorID }; + } + + _findProtoChain = ThreadActor.prototype._findProtoChain; + _removeFromProtoChain = ThreadActor.prototype._removeFromProtoChain; + + /** + * Destroy the current WebConsoleActor instance. + */ + destroy() { + this.stopListeners(); + super.destroy(); + + EventEmitter.off( + this.parentActor, + "changed-toplevel-document", + this._onChangedToplevelDocument + ); + + this._lastConsoleInputEvaluation = null; + this._evalGlobal = null; + this.dbg = null; + } + + /** + * Create and return an environment actor that corresponds to the provided + * Debugger.Environment. This is a straightforward clone of the ThreadActor's + * method except that it stores the environment actor in the web console + * actor's pool. + * + * @param Debugger.Environment environment + * The lexical environment we want to extract. + * @return The EnvironmentActor for |environment| or |undefined| for host + * functions or functions scoped to a non-debuggee global. + */ + createEnvironmentActor(environment) { + if (!environment) { + return undefined; + } + + if (environment.actor) { + return environment.actor; + } + + const actor = new EnvironmentActor(environment, this); + this.manage(actor); + environment.actor = actor; + + return actor; + } + + /** + * Create a grip for the given value. + * + * @param mixed value + * @return object + */ + createValueGrip(value) { + return createValueGrip(value, this, this.objectGrip); + } + + /** + * Make a debuggee value for the given value. + * + * @param mixed value + * The value you want to get a debuggee value for. + * @param boolean useObjectGlobal + * If |true| the object global is determined and added as a debuggee, + * otherwise |this.global| is used when makeDebuggeeValue() is invoked. + * @return object + * Debuggee value for |value|. + */ + makeDebuggeeValue(value, useObjectGlobal) { + if (useObjectGlobal && isObject(value)) { + try { + const global = Cu.getGlobalForObject(value); + const dbgGlobal = this.dbg.makeGlobalObjectReference(global); + return dbgGlobal.makeDebuggeeValue(value); + } catch (ex) { + // The above can throw an exception if value is not an actual object + // or 'Object in compartment marked as invisible to Debugger' + } + } + const dbgGlobal = this.dbg.makeGlobalObjectReference(this.global); + return dbgGlobal.makeDebuggeeValue(value); + } + + /** + * Create a grip for the given object. + * + * @param object object + * The object you want. + * @param object pool + * A Pool where the new actor instance is added. + * @param object + * The object grip. + */ + objectGrip(object, pool) { + const actor = new ObjectActor( + object, + { + thread: this.parentActor.threadActor, + getGripDepth: () => this._gripDepth, + incrementGripDepth: () => this._gripDepth++, + decrementGripDepth: () => this._gripDepth--, + createValueGrip: v => this.createValueGrip(v), + createEnvironmentActor: env => this.createEnvironmentActor(env), + }, + this.conn + ); + pool.manage(actor); + return actor.form(); + } + + /** + * Create a grip for the given string. + * + * @param string string + * The string you want to create the grip for. + * @param object pool + * A Pool where the new actor instance is added. + * @return object + * A LongStringActor object that wraps the given string. + */ + longStringGrip(string, pool) { + const actor = new LongStringActor(this.conn, string); + pool.manage(actor); + return actor.form(); + } + + /** + * Create a long string grip if needed for the given string. + * + * @private + * @param string string + * The string you want to create a long string grip for. + * @return string|object + * A string is returned if |string| is not a long string. + * A LongStringActor grip is returned if |string| is a long string. + */ + _createStringGrip(string) { + if (string && stringIsLong(string)) { + return this.longStringGrip(string, this); + } + return string; + } + + /** + * Returns the latest web console input evaluation. + * This is undefined if no evaluations have been completed. + * + * @return object + */ + getLastConsoleInputEvaluation() { + return this._lastConsoleInputEvaluation; + } + + /** + * Preprocess a debugger object (e.g. return the `boundTargetFunction` + * debugger object if the given debugger object is a bound function). + * + * This method is called by both the `inspect` binding implemented + * for the webconsole and the one implemented for the devtools API + * `browser.devtools.inspectedWindow.eval`. + */ + preprocessDebuggerObject(dbgObj) { + // Returns the bound target function on a bound function. + if (dbgObj?.isBoundFunction && dbgObj?.boundTargetFunction) { + return dbgObj.boundTargetFunction; + } + + return dbgObj; + } + + /** + * This helper is used by the WebExtensionInspectedWindowActor to + * inspect an object in the developer toolbox. + * + * NOTE: shared parts related to preprocess the debugger object (between + * this function and the `inspect` webconsole command defined in + * "devtools/server/actor/webconsole/utils.js") should be added to + * the webconsole actors' `preprocessDebuggerObject` method. + */ + inspectObject(dbgObj, inspectFromAnnotation) { + dbgObj = this.preprocessDebuggerObject(dbgObj); + this.emit("inspectObject", { + objectActor: this.createValueGrip(dbgObj), + inspectFromAnnotation, + }); + } + + // Request handlers for known packet types. + + /** + * Handler for the "startListeners" request. + * + * @param array listeners + * An array of events to start sent by the Web Console client. + * @return object + * The response object which holds the startedListeners array. + */ + // eslint-disable-next-line complexity + async startListeners(listeners) { + const startedListeners = []; + const global = !this.parentActor.isRootActor ? this.global : null; + const isTargetActorContentProcess = + this.parentActor.targetType === Targets.TYPES.PROCESS; + + for (const event of listeners) { + switch (event) { + case "PageError": + // Workers don't support this message type yet + if (isWorker) { + break; + } + if (!this.consoleServiceListener) { + this.consoleServiceListener = new ConsoleServiceListener( + global, + this.onConsoleServiceMessage, + { + matchExactWindow: this.parentActor.ignoreSubFrames, + } + ); + this.consoleServiceListener.init(); + } + startedListeners.push(event); + break; + case "ConsoleAPI": + if (!this.consoleAPIListener) { + // Create the consoleAPIListener + // (and apply the filtering options defined in the parent actor). + this.consoleAPIListener = new ConsoleAPIListener( + global, + this.onConsoleAPICall, + { + matchExactWindow: this.parentActor.ignoreSubFrames, + ...(this.parentActor.consoleAPIListenerOptions || {}), + } + ); + this.consoleAPIListener.init(); + } + startedListeners.push(event); + break; + case "NetworkActivity": + // Workers don't support this message type + if (isWorker) { + break; + } + // Bug 1807650 removed this in favor of the new Watcher/Resources APIs + const errorMessage = + "NetworkActivity is no longer supported. " + + "Instead use Watcher actor's watchResources and listen to NETWORK_EVENT resource"; + dump(errorMessage + "\n"); + throw new Error(errorMessage); + case "FileActivity": + // Workers don't support this message type + if (isWorker) { + break; + } + if (this.global instanceof Ci.nsIDOMWindow) { + if (!this.consoleFileActivityListener) { + this.consoleFileActivityListener = + new ConsoleFileActivityListener(this.global, this); + } + this.consoleFileActivityListener.startMonitor(); + startedListeners.push(event); + } + break; + case "ReflowActivity": + // Workers don't support this message type + if (isWorker) { + break; + } + if (!this.consoleReflowListener) { + this.consoleReflowListener = new ConsoleReflowListener( + this.global, + this + ); + } + startedListeners.push(event); + break; + case "DocumentEvents": + // Workers don't support this message type + if (isWorker || isTargetActorContentProcess) { + break; + } + if (!this.documentEventsListener) { + this.documentEventsListener = new DocumentEventsListener( + this.parentActor + ); + + this.documentEventsListener.on("dom-loading", data => + this.onDocumentEvent("dom-loading", data) + ); + this.documentEventsListener.on("dom-interactive", data => + this.onDocumentEvent("dom-interactive", data) + ); + this.documentEventsListener.on("dom-complete", data => + this.onDocumentEvent("dom-complete", data) + ); + + this.documentEventsListener.listen(); + } + startedListeners.push(event); + break; + } + } + + // Update the live list of running listeners + startedListeners.forEach(this._listeners.add, this._listeners); + + return { + startedListeners, + }; + } + + /** + * Handler for the "stopListeners" request. + * + * @param array listeners + * An array of events to stop sent by the Web Console client. + * @return object + * The response packet to send to the client: holds the + * stoppedListeners array. + */ + stopListeners(listeners) { + const stoppedListeners = []; + + // If no specific listeners are requested to be detached, we stop all + // listeners. + const eventsToDetach = listeners || [ + "PageError", + "ConsoleAPI", + "FileActivity", + "ReflowActivity", + "DocumentEvents", + ]; + + for (const event of eventsToDetach) { + switch (event) { + case "PageError": + if (this.consoleServiceListener) { + this.consoleServiceListener.destroy(); + this.consoleServiceListener = null; + } + stoppedListeners.push(event); + break; + case "ConsoleAPI": + if (this.consoleAPIListener) { + this.consoleAPIListener.destroy(); + this.consoleAPIListener = null; + } + stoppedListeners.push(event); + break; + case "FileActivity": + if (this.consoleFileActivityListener) { + this.consoleFileActivityListener.stopMonitor(); + this.consoleFileActivityListener = null; + } + stoppedListeners.push(event); + break; + case "ReflowActivity": + if (this.consoleReflowListener) { + this.consoleReflowListener.destroy(); + this.consoleReflowListener = null; + } + stoppedListeners.push(event); + break; + case "DocumentEvents": + if (this.documentEventsListener) { + this.documentEventsListener.destroy(); + this.documentEventsListener = null; + } + stoppedListeners.push(event); + break; + } + } + + // Update the live list of running listeners + stoppedListeners.forEach(this._listeners.delete, this._listeners); + + return { stoppedListeners }; + } + + /** + * Handler for the "getCachedMessages" request. This method sends the cached + * error messages and the window.console API calls to the client. + * + * @param array messageTypes + * An array of message types sent by the Web Console client. + * @return object + * The response packet to send to the client: it holds the cached + * messages array. + */ + getCachedMessages(messageTypes) { + if (!messageTypes) { + return { + error: "missingParameter", + message: "The messageTypes parameter is missing.", + }; + } + + const messages = []; + + const consoleServiceCachedMessages = + messageTypes.includes("PageError") || messageTypes.includes("LogMessage") + ? this.consoleServiceListener?.getCachedMessages( + !this.parentActor.isRootActor + ) + : null; + + for (const type of messageTypes) { + switch (type) { + case "ConsoleAPI": { + if (!this.consoleAPIListener) { + break; + } + + // this.global might not be a window (can be a worker global or a Sandbox), + // and in such case performance isn't defined + const winStartTime = + this.global?.performance?.timing?.navigationStart; + + const cache = this.consoleAPIListener.getCachedMessages( + !this.parentActor.isRootActor + ); + cache.forEach(cachedMessage => { + // Filter out messages that came from a ServiceWorker but happened + // before the page was requested. + if ( + cachedMessage.innerID === "ServiceWorker" && + winStartTime > cachedMessage.timeStamp + ) { + return; + } + + messages.push({ + message: this.prepareConsoleMessageForRemote(cachedMessage), + type: "consoleAPICall", + }); + }); + break; + } + + case "PageError": { + if (!consoleServiceCachedMessages) { + break; + } + + for (const cachedMessage of consoleServiceCachedMessages) { + if (!(cachedMessage instanceof Ci.nsIScriptError)) { + continue; + } + + messages.push({ + pageError: this.preparePageErrorForRemote(cachedMessage), + type: "pageError", + }); + } + break; + } + + case "LogMessage": { + if (!consoleServiceCachedMessages) { + break; + } + + for (const cachedMessage of consoleServiceCachedMessages) { + if (cachedMessage instanceof Ci.nsIScriptError) { + continue; + } + + messages.push({ + message: this._createStringGrip(cachedMessage.message), + timeStamp: cachedMessage.microSecondTimeStamp / 1000, + type: "logMessage", + }); + } + break; + } + } + } + + return { + messages, + }; + } + + /** + * Handler for the "evaluateJSAsync" request. This method evaluates a given + * JavaScript string with an associated `resultID`. + * + * The result will be returned later as an unsolicited `evaluationResult`, + * that can be associated back to this request via the `resultID` field. + * + * @param object request + * The JSON request object received from the Web Console client. + * @return object + * The response packet to send to with the unique id in the + * `resultID` field. + */ + async evaluateJSAsync(request) { + const startTime = ChromeUtils.dateNow(); + // Use a timestamp instead of a UUID as this code is used by workers, which + // don't have access to the UUID XPCOM component. + // Also use a counter in order to prevent mixing up response when calling + // at the exact same time. + const resultID = startTime + "-" + this._evalCounter++; + + // Execute the evaluation in the next event loop in order to immediately + // reply with the resultID. + // + // The console input should be evaluated with micro task level != 0, + // so that microtask checkpoint isn't performed while evaluating it. + DevToolsUtils.executeSoonWithMicroTask(async () => { + try { + // Execute the script that may pause. + let response = await this.evaluateJS(request); + // Wait for any potential returned Promise. + response = await this._maybeWaitForResponseResult(response); + + // Set the timestamp only now, so any messages logged in the expression (e.g. console.log) + // can be appended before the result message (unlike the evaluation result, other + // console resources are throttled before being handled by the webconsole client, + // which might cause some ordering issue). + // Use ChromeUtils.dateNow() as it gives us a higher precision than Date.now(). + response.timestamp = ChromeUtils.dateNow(); + // Finally, emit an unsolicited evaluationResult packet with the evaluation result. + this.emit("evaluationResult", { + type: "evaluationResult", + resultID, + startTime, + ...response, + }); + } catch (e) { + const message = `Encountered error while waiting for Helper Result: ${e}\n${e.stack}`; + DevToolsUtils.reportException("evaluateJSAsync", Error(message)); + } + }); + return { resultID }; + } + + /** + * In order to support async evaluations (e.g. top-level await, …), + * we have to be able to handle promises. This method handles waiting for the promise, + * and then returns the result. + * + * @private + * @param object response + * The response packet to send to with the unique id in the + * `resultID` field, and potentially a promise in the `helperResult` or in the + * `awaitResult` field. + * + * @return object + * The updated response object. + */ + async _maybeWaitForResponseResult(response) { + if (!response?.awaitResult) { + return response; + } + + let result; + try { + result = await response.awaitResult; + + // `createValueGrip` expect a debuggee value, while here we have the raw object. + // We need to call `makeDebuggeeValue` on it to make it work. + const dbgResult = this.makeDebuggeeValue(result); + response.result = this.createValueGrip(dbgResult); + } catch (e) { + // The promise was rejected. We let the engine handle this as it will report a + // `uncaught exception` error. + response.topLevelAwaitRejected = true; + } + + // Remove the promise from the response object. + delete response.awaitResult; + + return response; + } + + /** + * Handler for the "evaluateJS" request. This method evaluates the given + * JavaScript string and sends back the result. + * + * @param object request + * The JSON request object received from the Web Console client. + * @return object + * The evaluation response packet. + */ + evaluateJS(request) { + const input = request.text; + + const evalOptions = { + frameActor: request.frameActor, + url: request.url, + innerWindowID: request.innerWindowID, + selectedNodeActor: request.selectedNodeActor, + selectedObjectActor: request.selectedObjectActor, + eager: request.eager, + bindings: request.bindings, + lineNumber: request.lineNumber, + // This flag is set to true in most cases as we consider most evaluations as internal and: + // * prevent any breakpoint from being triggerred when evaluating the JS input + // * prevent spawning Debugger.Source for the evaluated JS and showing it in Debugger UI + // This is only set to false when evaluating the console input. + disableBreaks: !!request.disableBreaks, + // Optional flag, to be set to true when Console Commands should override local symbols with + // the same name. Like if the page defines `$`, the evaluated string will use the `$` implemented + // by the console command instead of the page's function. + preferConsoleCommandsOverLocalSymbols: + !!request.preferConsoleCommandsOverLocalSymbols, + }; + + const { mapped } = request; + + // Set a flag on the thread actor which indicates an evaluation is being + // done for the client. This is used to disable all types of breakpoints for all sources + // via `disabledBreaks`. When this flag is used, `reportExceptionsWhenBreaksAreDisabled` + // allows to still pause on exceptions. + this.parentActor.threadActor.insideClientEvaluation = evalOptions; + + let evalInfo; + try { + evalInfo = evalWithDebugger(input, evalOptions, this); + } finally { + this.parentActor.threadActor.insideClientEvaluation = null; + } + + return new Promise((resolve, reject) => { + // Queue up a task to run in the next tick so any microtask created by the evaluated + // expression has the time to be run. + // e.g. in : + // ``` + // const promiseThenCb = result => "result: " + result; + // new Promise(res => res("hello")).then(promiseThenCb) + // ``` + // we want`promiseThenCb` to have run before handling the result. + DevToolsUtils.executeSoon(() => { + try { + const result = this.prepareEvaluationResult( + evalInfo, + input, + request.eager, + mapped + ); + resolve(result); + } catch (err) { + reject(err); + } + }); + }); + } + + // eslint-disable-next-line complexity + prepareEvaluationResult(evalInfo, input, eager, mapped) { + const evalResult = evalInfo.result; + const helperResult = evalInfo.helperResult; + + let result, + errorDocURL, + errorMessage, + errorNotes = null, + errorGrip = null, + frame = null, + awaitResult, + errorMessageName, + exceptionStack; + if (evalResult) { + if ("return" in evalResult) { + result = evalResult.return; + if ( + mapped?.await && + result && + result.class === "Promise" && + typeof result.unsafeDereference === "function" + ) { + awaitResult = result.unsafeDereference(); + } + } else if ("yield" in evalResult) { + result = evalResult.yield; + } else if ("throw" in evalResult) { + const error = evalResult.throw; + errorGrip = this.createValueGrip(error); + + exceptionStack = this.prepareStackForRemote(evalResult.stack); + + if (exceptionStack) { + // Set the frame based on the topmost stack frame for the exception. + const { + filename: source, + sourceId, + lineNumber: line, + columnNumber: column, + } = exceptionStack[0]; + frame = { source, sourceId, line, column }; + + exceptionStack = + WebConsoleUtils.removeFramesAboveDebuggerEval(exceptionStack); + } + + errorMessage = String(error); + if (typeof error === "object" && error !== null) { + try { + errorMessage = DevToolsUtils.callPropertyOnObject( + error, + "toString" + ); + } catch (e) { + // If the debuggee is not allowed to access the "toString" property + // of the error object, calling this property from the debuggee's + // compartment will fail. The debugger should show the error object + // as it is seen by the debuggee, so this behavior is correct. + // + // Unfortunately, we have at least one test that assumes calling the + // "toString" property of an error object will succeed if the + // debugger is allowed to access it, regardless of whether the + // debuggee is allowed to access it or not. + // + // To accomodate these tests, if calling the "toString" property + // from the debuggee compartment fails, we rewrap the error object + // in the debugger's compartment, and then call the "toString" + // property from there. + if (typeof error.unsafeDereference === "function") { + const rawError = error.unsafeDereference(); + errorMessage = rawError ? rawError.toString() : ""; + } + } + } + + // It is possible that we won't have permission to unwrap an + // object and retrieve its errorMessageName. + try { + errorDocURL = ErrorDocs.GetURL(error); + errorMessageName = error.errorMessageName; + } catch (ex) { + // ignored + } + + try { + const line = error.errorLineNumber; + const column = error.errorColumnNumber; + + if (typeof line === "number" && typeof column === "number") { + // Set frame only if we have line/column numbers. + frame = { + source: "debugger eval code", + line, + column, + }; + } + } catch (ex) { + // ignored + } + + try { + const notes = error.errorNotes; + if (notes?.length) { + errorNotes = []; + for (const note of notes) { + errorNotes.push({ + messageBody: this._createStringGrip(note.message), + frame: { + source: note.fileName, + line: note.lineNumber, + column: note.columnNumber, + }, + }); + } + } + } catch (ex) { + // ignored + } + } + } + + // If a value is encountered that the devtools server doesn't support yet, + // the console should remain functional. + let resultGrip; + if (!awaitResult) { + try { + const objectActor = + this.parentActor.threadActor.getThreadLifetimeObject(result); + if (objectActor) { + resultGrip = this.parentActor.threadActor.createValueGrip(result); + } else { + resultGrip = this.createValueGrip(result); + } + } catch (e) { + errorMessage = e; + } + } + + // Don't update _lastConsoleInputEvaluation in eager evaluation, as it would interfere + // with the $_ command. + if (!eager) { + if (!awaitResult) { + this._lastConsoleInputEvaluation = result; + } else { + // If we evaluated a top-level await expression, we want to assign its result to the + // _lastConsoleInputEvaluation only when the promise resolves, and only if it + // resolves. If the promise rejects, we don't re-assign _lastConsoleInputEvaluation, + // it will keep its previous value. + + const p = awaitResult.then(res => { + this._lastConsoleInputEvaluation = this.makeDebuggeeValue(res); + }); + + // If the top level await was already rejected (e.g. `await Promise.reject("bleh")`), + // catch the resulting promise of awaitResult.then. + // If we don't do that, the new Promise will also be rejected, and since it's + // unhandled, it will generate an error. + // We don't want to do that for pending promise (e.g. `await new Promise((res, rej) => setTimeout(rej,250))`), + // as the the Promise rejection will be considered as handled, and the "Uncaught (in promise)" + // message wouldn't be emitted. + const { state } = ObjectUtils.getPromiseState(evalResult.return); + if (state === "rejected") { + p.catch(() => {}); + } + } + } + + return { + input, + result: resultGrip, + awaitResult, + exception: errorGrip, + exceptionMessage: this._createStringGrip(errorMessage), + exceptionDocURL: errorDocURL, + exceptionStack, + hasException: errorGrip !== null, + errorMessageName, + frame, + helperResult, + notes: errorNotes, + }; + } + + /** + * The Autocomplete request handler. + * + * @param string text + * The request message - what input to autocomplete. + * @param number cursor + * The cursor position at the moment of starting autocomplete. + * @param string frameActor + * The frameactor id of the current paused frame. + * @param string selectedNodeActor + * The actor id of the currently selected node. + * @param array authorizedEvaluations + * Array of the properties access which can be executed by the engine. + * @return object + * The response message - matched properties. + */ + autocomplete( + text, + cursor, + frameActorId, + selectedNodeActor, + authorizedEvaluations, + expressionVars = [] + ) { + let dbgObject = null; + let environment = null; + let matches = []; + let matchProp; + let isElementAccess; + + const reqText = text.substr(0, cursor); + + if (isCommand(reqText)) { + matchProp = reqText; + matches = WebConsoleCommandsManager.getAllColonCommandNames() + .filter(c => `:${c}`.startsWith(reqText)) + .map(c => `:${c}`); + } else { + // This is the case of the paused debugger + if (frameActorId) { + const frameActor = this.conn.getActor(frameActorId); + try { + // Need to try/catch since accessing frame.environment + // can throw "Debugger.Frame is not live" + const frame = frameActor.frame; + environment = frame.environment; + } catch (e) { + DevToolsUtils.reportException( + "autocomplete", + Error("The frame actor was not found: " + frameActorId) + ); + } + } else { + dbgObject = this.dbg.addDebuggee(this.evalGlobal); + } + + const result = jsPropertyProvider({ + dbgObject, + environment, + frameActorId, + inputValue: text, + cursor, + webconsoleActor: this, + selectedNodeActor, + authorizedEvaluations, + expressionVars, + }); + + if (result === null) { + return { + matches: null, + }; + } + + if (result && result.isUnsafeGetter === true) { + return { + isUnsafeGetter: true, + getterPath: result.getterPath, + }; + } + + matches = result.matches || new Set(); + matchProp = result.matchProp || ""; + isElementAccess = result.isElementAccess; + + // We consider '$' as alphanumeric because it is used in the names of some + // helper functions; we also consider whitespace as alphanum since it should not + // be seen as break in the evaled string. + const lastNonAlphaIsDot = /[.][a-zA-Z0-9$\s]*$/.test(reqText); + + // We only return commands and keywords when we are not dealing with a property or + // element access. + if (matchProp && !lastNonAlphaIsDot && !isElementAccess) { + const colonOnlyCommands = + WebConsoleCommandsManager.getColonOnlyCommandNames(); + for (const name of WebConsoleCommandsManager.getAllCommandNames()) { + // Filter out commands like `screenshot` as it is inaccessible without the `:` prefix + if ( + !colonOnlyCommands.includes(name) && + name.startsWith(result.matchProp) + ) { + matches.add(name); + } + } + + for (const keyword of RESERVED_JS_KEYWORDS) { + if (keyword.startsWith(result.matchProp)) { + matches.add(keyword); + } + } + } + + // Sort the results in order to display lowercased item first (e.g. we want to + // display `document` then `Document` as we loosely match the user input if the + // first letter was lowercase). + const firstMeaningfulCharIndex = isElementAccess ? 1 : 0; + matches = Array.from(matches).sort((a, b) => { + const aFirstMeaningfulChar = a[firstMeaningfulCharIndex]; + const bFirstMeaningfulChar = b[firstMeaningfulCharIndex]; + const lA = + aFirstMeaningfulChar.toLocaleLowerCase() === aFirstMeaningfulChar; + const lB = + bFirstMeaningfulChar.toLocaleLowerCase() === bFirstMeaningfulChar; + if (lA === lB) { + if (a === matchProp) { + return -1; + } + if (b === matchProp) { + return 1; + } + return a.localeCompare(b); + } + return lA ? -1 : 1; + }); + } + + return { + matches, + matchProp, + isElementAccess: isElementAccess === true, + }; + } + + /** + * The "clearMessagesCacheAsync" request handler. + */ + clearMessagesCacheAsync() { + if (isWorker) { + // Defined on WorkerScope + clearConsoleEvents(); + return; + } + + const windowId = !this.parentActor.isRootActor + ? WebConsoleUtils.getInnerWindowId(this.global) + : null; + + const ConsoleAPIStorage = Cc[ + "@mozilla.org/consoleAPI-storage;1" + ].getService(Ci.nsIConsoleAPIStorage); + ConsoleAPIStorage.clearEvents(windowId); + + CONSOLE_WORKER_IDS.forEach(id => { + ConsoleAPIStorage.clearEvents(id); + }); + + if (this.parentActor.isRootActor || !this.global) { + // If were dealing with the root actor (e.g. the browser console), we want + // to remove all cached messages, not only the ones specific to a window. + Services.console.reset(); + } else if (this.parentActor.ignoreSubFrames) { + Services.console.resetWindow(windowId); + } else { + WebConsoleUtils.getInnerWindowIDsForFrames(this.global).forEach(id => + Services.console.resetWindow(id) + ); + } + } + + // End of request handlers. + + // Event handlers for various listeners. + + /** + * Handler for messages received from the ConsoleServiceListener. This method + * sends the nsIConsoleMessage to the remote Web Console client. + * + * @param nsIConsoleMessage message + * The message we need to send to the client. + */ + onConsoleServiceMessage(message) { + if (message instanceof Ci.nsIScriptError) { + this.emit("pageError", { + pageError: this.preparePageErrorForRemote(message), + }); + } else { + this.emit("logMessage", { + message: this._createStringGrip(message.message), + timeStamp: message.microSecondTimeStamp / 1000, + }); + } + } + + getActorIdForInternalSourceId(id) { + const actor = + this.parentActor.sourcesManager.getSourceActorByInternalSourceId(id); + return actor ? actor.actorID : null; + } + + /** + * Prepare a SavedFrame stack to be sent to the client. + * + * @param SavedFrame errorStack + * Stack for an error we need to send to the client. + * @return object + * The object you can send to the remote client. + */ + prepareStackForRemote(errorStack) { + // Convert stack objects to the JSON attributes expected by client code + // Bug 1348885: If the global from which this error came from has been + // nuked, stack is going to be a dead wrapper. + if (!errorStack || (Cu && Cu.isDeadWrapper(errorStack))) { + return null; + } + const stack = []; + let s = errorStack; + while (s) { + stack.push({ + filename: s.source, + sourceId: this.getActorIdForInternalSourceId(s.sourceId), + lineNumber: s.line, + columnNumber: s.column, + functionName: s.functionDisplayName, + asyncCause: s.asyncCause ? s.asyncCause : undefined, + }); + s = s.parent || s.asyncParent; + } + return stack; + } + + /** + * Prepare an nsIScriptError to be sent to the client. + * + * @param nsIScriptError pageError + * The page error we need to send to the client. + * @return object + * The object you can send to the remote client. + */ + preparePageErrorForRemote(pageError) { + const stack = this.prepareStackForRemote(pageError.stack); + let lineText = pageError.sourceLine; + if ( + lineText && + lineText.length > DevToolsServer.LONG_STRING_INITIAL_LENGTH + ) { + lineText = lineText.substr(0, DevToolsServer.LONG_STRING_INITIAL_LENGTH); + } + + let notesArray = null; + const notes = pageError.notes; + if (notes?.length) { + notesArray = []; + for (let i = 0, len = notes.length; i < len; i++) { + const note = notes.queryElementAt(i, Ci.nsIScriptErrorNote); + notesArray.push({ + messageBody: this._createStringGrip(note.errorMessage), + frame: { + source: note.sourceName, + sourceId: this.getActorIdForInternalSourceId(note.sourceId), + line: note.lineNumber, + column: note.columnNumber, + }, + }); + } + } + + // If there is no location information in the error but we have a stack, + // fill in the location with the first frame on the stack. + let { sourceName, sourceId, lineNumber, columnNumber } = pageError; + if (!sourceName && !sourceId && !lineNumber && !columnNumber && stack) { + sourceName = stack[0].filename; + sourceId = stack[0].sourceId; + lineNumber = stack[0].lineNumber; + columnNumber = stack[0].columnNumber; + } + + const isCSSMessage = pageError.category === MESSAGE_CATEGORY.CSS_PARSER; + + const result = { + errorMessage: this._createStringGrip(pageError.errorMessage), + errorMessageName: isCSSMessage ? undefined : pageError.errorMessageName, + exceptionDocURL: ErrorDocs.GetURL(pageError), + sourceName, + sourceId: this.getActorIdForInternalSourceId(sourceId), + lineText, + lineNumber, + columnNumber, + category: pageError.category, + innerWindowID: pageError.innerWindowID, + timeStamp: pageError.microSecondTimeStamp / 1000, + warning: !!(pageError.flags & pageError.warningFlag), + error: !(pageError.flags & (pageError.warningFlag | pageError.infoFlag)), + info: !!(pageError.flags & pageError.infoFlag), + private: pageError.isFromPrivateWindow, + stacktrace: stack, + notes: notesArray, + chromeContext: pageError.isFromChromeContext, + isPromiseRejection: isCSSMessage + ? undefined + : pageError.isPromiseRejection, + isForwardedFromContentProcess: pageError.isForwardedFromContentProcess, + cssSelectors: isCSSMessage ? pageError.cssSelectors : undefined, + }; + + // If the pageError does have an exception object, we want to return the grip for it, + // but only if we do manage to get the grip, as we're checking the property on the + // client to render things differently. + if (pageError.hasException) { + try { + const obj = this.makeDebuggeeValue(pageError.exception, true); + if (obj?.class !== "DeadObject") { + result.exception = this.createValueGrip(obj); + result.hasException = true; + } + } catch (e) {} + } + + return result; + } + + /** + * Handler for window.console API calls received from the ConsoleAPIListener. + * This method sends the object to the remote Web Console client. + * + * @see ConsoleAPIListener + * @param object message + * The console API call we need to send to the remote client. + * @param object extraProperties + * an object whose properties will be folded in the packet that is emitted. + */ + onConsoleAPICall(message, extraProperties = {}) { + this.emit("consoleAPICall", { + message: this.prepareConsoleMessageForRemote(message), + ...extraProperties, + }); + } + + /** + * Handler for the DocumentEventsListener. + * + * @see DocumentEventsListener + * @param {String} name + * The document event name that either of followings. + * - dom-loading + * - dom-interactive + * - dom-complete + * @param {Number} time + * The time that the event is fired. + * @param {Boolean} hasNativeConsoleAPI + * Tells if the window.console object is native or overwritten by script in the page. + * Only passed when `name` is "dom-complete" (see devtools/server/actors/webconsole/listeners/document-events.js). + */ + onDocumentEvent(name, { time, hasNativeConsoleAPI }) { + this.emit("documentEvent", { + name, + time, + hasNativeConsoleAPI, + }); + } + + /** + * Handler for file activity. This method sends the file request information + * to the remote Web Console client. + * + * @see ConsoleFileActivityListener + * @param string fileURI + * The requested file URI. + */ + onFileActivity(fileURI) { + this.emit("fileActivity", { + uri: fileURI, + }); + } + + // End of event handlers for various listeners. + + /** + * Prepare a message from the console API to be sent to the remote Web Console + * instance. + * + * @param object message + * The original message received from the console storage listener. + * @param boolean aUseObjectGlobal + * If |true| the object global is determined and added as a debuggee, + * otherwise |this.global| is used when makeDebuggeeValue() is invoked. + * @return object + * The object that can be sent to the remote client. + */ + prepareConsoleMessageForRemote(message, useObjectGlobal = true) { + const result = { + arguments: message.arguments + ? message.arguments.map(obj => { + const dbgObj = this.makeDebuggeeValue(obj, useObjectGlobal); + return this.createValueGrip(dbgObj); + }) + : [], + chromeContext: message.chromeContext, + columnNumber: message.columnNumber, + filename: message.filename, + level: message.level, + lineNumber: message.lineNumber, + // messages emitted from Console.sys.mjs don't have a microSecondTimeStamp property + timeStamp: message.microSecondTimeStamp + ? message.microSecondTimeStamp / 1000 + : message.timeStamp, + sourceId: this.getActorIdForInternalSourceId(message.sourceId), + category: message.category || "webdev", + innerWindowID: message.innerID, + }; + + // It only make sense to include the following properties in the message when they have + // a meaningful value. Otherwise we simply don't include them so we save cycles in JSActor communication. + if (message.counter) { + result.counter = message.counter; + } + if (message.private) { + result.private = message.private; + } + if (message.prefix) { + result.prefix = message.prefix; + } + + if (message.stacktrace) { + result.stacktrace = message.stacktrace.map(frame => { + return { + ...frame, + sourceId: this.getActorIdForInternalSourceId(frame.sourceId), + }; + }); + } + + if (message.styles && message.styles.length) { + result.styles = message.styles.map(string => { + return this.createValueGrip(string); + }); + } + + if (message.timer) { + result.timer = message.timer; + } + + if (message.level === "table") { + const tableItems = this._getConsoleTableMessageItems(result); + if (tableItems) { + result.arguments[0].ownProperties = tableItems; + result.arguments[0].preview = null; + } + + // Only return the 2 first params. + result.arguments = result.arguments.slice(0, 2); + } + + return result; + } + + /** + * Return the properties needed to display the appropriate table for a given + * console.table call. + * This function does a little more than creating an ObjectActor for the first + * parameter of the message. When layout out the console table in the output, we want + * to be able to look into sub-properties so the table can have a different layout ( + * for arrays of arrays, objects with objects properties, arrays of objects, …). + * So here we need to retrieve the properties of the first parameter, and also all the + * sub-properties we might need. + * + * @param {Object} result: The console.table message. + * @returns {Object} An object containing the properties of the first argument of the + * console.table call. + */ + _getConsoleTableMessageItems(result) { + if ( + !result || + !Array.isArray(result.arguments) || + !result.arguments.length + ) { + return null; + } + + const [tableItemGrip] = result.arguments; + const dataType = tableItemGrip.class; + const needEntries = ["Map", "WeakMap", "Set", "WeakSet"].includes(dataType); + const ignoreNonIndexedProperties = isArray(tableItemGrip); + + const tableItemActor = this.getActorByID(tableItemGrip.actor); + if (!tableItemActor) { + return null; + } + + // Retrieve the properties (or entries for Set/Map) of the console table first arg. + const iterator = needEntries + ? tableItemActor.enumEntries() + : tableItemActor.enumProperties({ + ignoreNonIndexedProperties, + }); + const { ownProperties } = iterator.all(); + + // The iterator returns a descriptor for each property, wherein the value could be + // in one of those sub-property. + const descriptorKeys = ["safeGetterValues", "getterValue", "value"]; + + Object.values(ownProperties).forEach(desc => { + if (typeof desc !== "undefined") { + descriptorKeys.forEach(key => { + if (desc && desc.hasOwnProperty(key)) { + const grip = desc[key]; + + // We need to load sub-properties as well to render the table in a nice way. + const actor = grip && this.getActorByID(grip.actor); + if (actor) { + const res = actor + .enumProperties({ + ignoreNonIndexedProperties: isArray(grip), + }) + .all(); + if (res?.ownProperties) { + desc[key].ownProperties = res.ownProperties; + } + } + } + }); + } + }); + + return ownProperties; + } + + /** + * The "will-navigate" progress listener. This is used to clear the current + * eval scope. + */ + _onWillNavigate({ window, isTopLevel }) { + if (isTopLevel) { + this._evalGlobal = null; + EventEmitter.off(this.parentActor, "will-navigate", this._onWillNavigate); + this._progressListenerActive = false; + } + } + + /** + * This listener is called when we switch to another frame, + * mostly to unregister previous listeners and start listening on the new document. + */ + _onChangedToplevelDocument() { + // Convert the Set to an Array + const listeners = [...this._listeners]; + + // Unregister existing listener on the previous document + // (pass a copy of the array as it will shift from it) + this.stopListeners(listeners.slice()); + + // This method is called after this.global is changed, + // so we register new listener on this new global + this.startListeners(listeners); + + // Also reset the cached top level chrome window being targeted + this._lastChromeWindow = null; + } +} + +exports.WebConsoleActor = WebConsoleActor; diff --git a/devtools/server/actors/webconsole/commands/experimental-commands.ftl b/devtools/server/actors/webconsole/commands/experimental-commands.ftl new file mode 100644 index 0000000000..b11c29006b --- /dev/null +++ b/devtools/server/actors/webconsole/commands/experimental-commands.ftl @@ -0,0 +1,21 @@ +# 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/. + +# These strings aren't translated and are meant to be used for experimental commands +# which may frequently update their documentations + +# Usage string for :trace command +webconsole-commands-usage-trace3 = + :trace + + Toggles the JavaScript tracer + + It supports the following arguments: + --logMethod to be set to ‘console’ for logging to the web console (the default), or ‘stdout’ for logging to the standard output, + --values Optional flag to be passed to log function call arguments as well as returned values (when returned frames are enabled). + --on-next-interaction Optional flag, when set, the tracer will only start on next mousedown or keydown event. + --max-depth Optional flag, will restrict logging trace to a given depth passed as argument. + --max-records Optional flag, will automatically stop the tracer after having logged the passed amount of top level frames. + --prefix Optional string which will be logged in front of all the trace logs, + --help or --usage to show this message. diff --git a/devtools/server/actors/webconsole/commands/manager.js b/devtools/server/actors/webconsole/commands/manager.js new file mode 100644 index 0000000000..538ee7eac1 --- /dev/null +++ b/devtools/server/actors/webconsole/commands/manager.js @@ -0,0 +1,901 @@ +/* This Smurce 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"; + +loader.lazyRequireGetter( + this, + ["getCommandAndArgs"], + "resource://devtools/server/actors/webconsole/commands/parser.js", + true +); + +loader.lazyGetter(this, "l10n", () => { + return new Localization( + [ + "devtools/shared/webconsole-commands.ftl", + "devtools/server/actors/webconsole/commands/experimental-commands.ftl", + ], + true + ); +}); +const USAGE_STRING_MAPPING = { + block: "webconsole-commands-usage-block", + trace: "webconsole-commands-usage-trace3", + unblock: "webconsole-commands-usage-unblock", +}; + +/** + * WebConsole commands manager. + * + * Defines a set of functions / variables ("commands") that are available from + * the Web Console but not from the web page. + * + */ +const WebConsoleCommandsManager = { + // Flag used by eager evaluation in order to allow the execution of commands + // which are side effect free and disallow all the others. + SIDE_EFFECT_FREE: Symbol("SIDE_EFFECT_FREE"), + + // Map of command name to command function or property descriptor (see register method) + _registeredCommands: new Map(), + // Map of command name to optional array of accepted argument names + _validArguments: new Map(), + // Set of command names that are side effect free + _sideEffectFreeCommands: new Set(), + + /** + * Register a new command. + * + * @param {Object} options + * @param {string} options.name + * The command name (exemple: "$", "screenshot",...)) + * @param {Boolean} isSideEffectFree + * Tells if the command is free of any side effect to know + * if it can run in eager console evaluation. + * @param {function|object} options.command + * The command to register. + * It can be: + * - a function for the command like "$()" or ":screenshot" + * which triggers some code. + * - a property descriptor for getters like "$0", + * which only returns a value. + * @param {Array<string>} options.validArguments + * Optional list of valid arguments. + * If passed, we will assert that passed arguments are all valid on execution. + * + * The command function or the command getter are passed a: + * - "owner" object as their first parameter (see the example below). + * See _createOwnerObject for definition. + * - "args" object with all parameters when this is ran as a ":my-command" command. + * See getCommandAndArgs for definition. + * + * Note that if you want to support `--help` argument, you need to provide a usage string in: + * devtools/shared/locales/en-US/webconsole-commands.properties + * + * @example + * + * WebConsoleCommandsManager.register("$", function (owner, selector) + * { + * return owner.window.document.querySelector(selector); + * }, + * ["my-argument"]); + * + * WebConsoleCommandsManager.register("$0", { + * get: function(owner) { + * return owner.makeDebuggeeValue(owner.selectedNode); + * } + * }); + */ + register({ name, isSideEffectFree, command, validArguments, usage }) { + if ( + typeof command != "function" && + !(typeof command == "object" && typeof command.get == "function") + ) { + throw new Error( + "Invalid web console command. It can only be a function, or an object with a function as 'get' attribute" + ); + } + if (typeof isSideEffectFree !== "boolean") { + throw new Error( + "Invalid web console command. 'isSideEffectFree' attribute should be set and be a boolean" + ); + } + this._registeredCommands.set(name, command); + if (validArguments) { + this._validArguments.set(name, validArguments); + } + if (isSideEffectFree) { + this._sideEffectFreeCommands.add(name); + } + }, + + /** + * Return the name of all registered commands. + * + * @return {array} List of all command names. + */ + getAllCommandNames() { + return [...this._registeredCommands.keys()]; + }, + + /** + * There is two types of "commands" here. + * + * - Functions or variables exposed in the scope of the evaluated string from the WebConsole input. + * Example: $(), $0, copy(), clear(),... + * - "True commands", which can also be ran from the WebConsole input with ":" prefix. + * Example: this list of commands. + * Note that some "true commands" are not exposed as function (see getColonOnlyCommandNames). + * + * The following list distinguish these "true commands" from the first category. + * It especially avoid any JavaScript evaluation when the frontend tries to execute + * a string starting with ':' character. + */ + getAllColonCommandNames() { + return ["block", "help", "history", "screenshot", "unblock", "trace"]; + }, + + /** + * Some commands are not exposed in the scope of the evaluated string, + * and can only be used via `:command-name`. + */ + getColonOnlyCommandNames() { + return ["screenshot", "trace"]; + }, + + /** + * Map of all command objects keyed by command name. + * Commands object are the objects passed to register() method. + * + * @return {Map<string -> command>} + */ + getAllCommands() { + return this._registeredCommands; + }, + + /** + * Is the command name possibly overriding a symbol which + * already exists in the paused frame or the global into which + * we are about to execute into? + */ + _isCommandNameAlreadyInScope(name, frame, dbgGlobal) { + if (frame && frame.environment) { + return !!frame.environment.find(name); + } + + // Fallback on global scope when Debugger.Frame doesn't come along an + // Environment, or is not a frame. + + try { + // This can throw in Browser Toolbox tests + const globalEnv = dbgGlobal.asEnvironment(); + if (globalEnv) { + return !!dbgGlobal.asEnvironment().find(name); + } + } catch {} + + return !!dbgGlobal.getOwnPropertyDescriptor(name); + }, + + _createOwnerObject( + consoleActor, + debuggerGlobal, + evalInput, + selectedNodeActorID + ) { + const owner = { + window: consoleActor.evalGlobal, + makeDebuggeeValue: debuggerGlobal.makeDebuggeeValue.bind(debuggerGlobal), + createValueGrip: consoleActor.createValueGrip.bind(consoleActor), + preprocessDebuggerObject: + consoleActor.preprocessDebuggerObject.bind(consoleActor), + helperResult: null, + consoleActor, + evalInput, + }; + if (selectedNodeActorID) { + const actor = consoleActor.conn.getActor(selectedNodeActorID); + if (actor) { + owner.selectedNode = actor.rawNode; + } + } + return owner; + }, + + _getCommandsForCurrentEnvironment() { + // Not supporting extra commands in workers yet. This should be possible to + // add one by one as long as they don't require jsm/mjs, Cu, etc. + return isWorker ? new Map() : this.getAllCommands(); + }, + + /** + * Create an object with the API we expose to the Web Console during + * JavaScript evaluation. + * This object inherits properties and methods from the Web Console actor. + * + * @param object consoleActor + * The related web console actor evaluating some code. + * @param object debuggerGlobal + * A Debugger.Object that wraps a content global. This is used for the + * Web Console Commands. + * @param object frame (optional) + * The frame where the string was evaluated. + * @param string evalInput + * String to evaluate. + * @param string selectedNodeActorID + * The Node actor ID of the currently selected DOM Element, if any is selected. + * @param bool preferConsoleCommandsOverLocalSymbols + * If true, define all bindings even if there's conflicting existing + * symbols. This is for the case evaluating non-user code in frame + * environment. + * + * @return object + * Object with two properties: + * - 'bindings', the object with all commands set as attribute on this object. + * - 'getHelperResult', a live getter returning the additional data the last command + * which executed want to convey to the frontend. + * (The return value of commands isn't returned to the client but it only + * returned to the code ran from console evaluation) + */ + getWebConsoleCommands( + consoleActor, + debuggerGlobal, + frame, + evalInput, + selectedNodeActorID, + preferConsoleCommandsOverLocalSymbols + ) { + const bindings = Object.create(null); + + const owner = this._createOwnerObject( + consoleActor, + debuggerGlobal, + evalInput, + selectedNodeActorID + ); + + const evalGlobal = consoleActor.evalGlobal; + function maybeExport(obj, name) { + if (typeof obj[name] != "function") { + return; + } + + // By default, chrome-implemented functions that are exposed to content + // refuse to accept arguments that are cross-origin for the caller. This + // is generally the safe thing, but causes problems for certain console + // helpers like cd(), where we users sometimes want to pass a cross-origin + // window. To circumvent this restriction, we use exportFunction along + // with a special option designed for this purpose. See bug 1051224. + obj[name] = Cu.exportFunction(obj[name], evalGlobal, { + allowCrossOriginArguments: true, + }); + } + + const commands = this._getCommandsForCurrentEnvironment(); + + const colonOnlyCommandNames = this.getColonOnlyCommandNames(); + for (const [name, command] of commands) { + // When we run user code in frame, we want to avoid overriding existing + // symbols with commands. + // + // When we run user code in global scope, all bindings are automatically + // shadowed, except for "help" function which is checked by getEvalInput. + // + // When preferConsoleCommandsOverLocalSymbols is true, ignore symbols in + // the current scope and always use commands ones. + if ( + !preferConsoleCommandsOverLocalSymbols && + (frame || name === "help") && + this._isCommandNameAlreadyInScope(name, frame, debuggerGlobal) + ) { + continue; + } + // Also ignore commands which can only be run with the `:` prefix. + if (colonOnlyCommandNames.includes(name)) { + continue; + } + + const descriptor = { + // We force the enumerability and the configurability (so the + // WebConsoleActor can reconfigure the property). + enumerable: true, + configurable: true, + }; + + if (typeof command === "function") { + // Function commands + descriptor.value = command.bind(undefined, owner); + maybeExport(descriptor, "value"); + + // Unfortunately evalWithBindings will access all bindings values, + // which would trigger a debuggee native call because bindings's property + // is using Cu.exportFunction. + // Put a magic symbol attribute on them in order to carefully accept + // all bindings as being side effect safe by default. + if (this._sideEffectFreeCommands.has(name)) { + descriptor.value.isSideEffectFree = this.SIDE_EFFECT_FREE; + } + + // Make sure the helpers can be used during eval. + descriptor.value = debuggerGlobal.makeDebuggeeValue(descriptor.value); + } else if (typeof command?.get === "function") { + // Getter commands + descriptor.get = command.get.bind(undefined, owner); + maybeExport(descriptor, "get"); + + // See comment in previous block. + if (this._sideEffectFreeCommands.has(name)) { + descriptor.get.isSideEffectFree = this.SIDE_EFFECT_FREE; + } + } + Object.defineProperty(bindings, name, descriptor); + } + + return { + // Use a method as commands will update owner.helperResult later + getHelperResult() { + return owner.helperResult; + }, + bindings, + }; + }, + + /** + * Create a function for given ':command'-style command. + * + * @param object consoleActor + * The related web console actor evaluating some code. + * @param object debuggerGlobal + * A Debugger.Object that wraps a content global. This is used for the + * Web Console Commands. + * @param string selectedNodeActorID + * The Node actor ID of the currently selected DOM Element, if any is selected. + * @param string evalInput + * String to evaluate. + * + * @return object + * Object with two properties: + * - 'commandFunc', a function corresponds to the 'commandName' + * - 'getHelperResult', a live getter returning the data the command + * which executed want to convey to the frontend. + */ + executeCommand(consoleActor, debuggerGlobal, selectedNodeActorID, evalInput) { + const { command, args } = getCommandAndArgs(evalInput); + const commands = this._getCommandsForCurrentEnvironment(); + if (!commands.has(command)) { + throw new Error(`Unsupported command '${command}'`); + } + + if (args.help || args.usage) { + const l10nKey = USAGE_STRING_MAPPING[command]; + if (l10nKey) { + const message = l10n.formatValueSync(l10nKey); + if (message && message !== l10nKey) { + return { + result: null, + helperResult: { + type: "usage", + message, + }, + }; + } + } + } + + const validArguments = this._validArguments.get(command); + if (validArguments) { + for (const key of Object.keys(args)) { + if (!validArguments.includes(key)) { + throw new Error( + `:${command} command doesn't support '${key}' argument.` + ); + } + } + } + + const owner = this._createOwnerObject( + consoleActor, + debuggerGlobal, + evalInput, + selectedNodeActorID + ); + + const commandFunction = commands.get(command); + + // This is where we run the command passed to register method + const result = commandFunction(owner, args); + + return { + result, + + // commandFunction may mutate owner.helperResult which is used + // to convey additional data to the frontend. + helperResult: owner.helperResult, + }; + }, +}; + +exports.WebConsoleCommandsManager = WebConsoleCommandsManager; + +/* + * Built-in commands. + * + * A list of helper functions used by Firebug can be found here: + * http://getfirebug.com/wiki/index.php/Command_Line_API + */ + +/** + * Find the first node matching a CSS selector. + * + * @param string selector + * A string that is passed to window.document.querySelector + * @param [optional] Node element + * An optional Node to replace window.document + * @return Node or null + * The result of calling document.querySelector(selector). + */ +WebConsoleCommandsManager.register({ + name: "$", + isSideEffectFree: true, + command(owner, selector, element) { + try { + if ( + element && + element.querySelector && + (element.nodeType == Node.ELEMENT_NODE || + element.nodeType == Node.DOCUMENT_NODE || + element.nodeType == Node.DOCUMENT_FRAGMENT_NODE) + ) { + return element.querySelector(selector); + } + return owner.window.document.querySelector(selector); + } catch (err) { + // Throw an error like `err` but that belongs to `owner.window`. + throw new owner.window.DOMException(err.message, err.name); + } + }, +}); + +/** + * Find the nodes matching a CSS selector. + * + * @param string selector + * A string that is passed to window.document.querySelectorAll. + * @param [optional] Node element + * An optional Node to replace window.document + * @return array of Node + * The result of calling document.querySelector(selector) in an array. + */ +WebConsoleCommandsManager.register({ + name: "$$", + isSideEffectFree: true, + command(owner, selector, element) { + let scope = owner.window.document; + try { + if ( + element && + element.querySelectorAll && + (element.nodeType == Node.ELEMENT_NODE || + element.nodeType == Node.DOCUMENT_NODE || + element.nodeType == Node.DOCUMENT_FRAGMENT_NODE) + ) { + scope = element; + } + const nodes = scope.querySelectorAll(selector); + const result = new owner.window.Array(); + // Calling owner.window.Array.from() doesn't work without accessing the + // wrappedJSObject, so just loop through the results instead. + for (let i = 0; i < nodes.length; i++) { + result.push(nodes[i]); + } + return result; + } catch (err) { + // Throw an error like `err` but that belongs to `owner.window`. + throw new owner.window.DOMException(err.message, err.name); + } + }, +}); + +/** + * Returns the result of the last console input evaluation + * + * @return object|undefined + * Returns last console evaluation or undefined + */ +WebConsoleCommandsManager.register({ + name: "$_", + isSideEffectFree: true, + command: { + get(owner) { + return owner.consoleActor.getLastConsoleInputEvaluation(); + }, + }, +}); + +/** + * Runs an xPath query and returns all matched nodes. + * + * @param string xPath + * xPath search query to execute. + * @param [optional] Node context + * Context to run the xPath query on. Uses window.document if not set. + * @param [optional] string|number resultType + Specify the result type. Default value XPathResult.ANY_TYPE + * @return array of Node + */ +WebConsoleCommandsManager.register({ + name: "$x", + isSideEffectFree: true, + command( + owner, + xPath, + context, + resultType = owner.window.XPathResult.ANY_TYPE + ) { + const nodes = new owner.window.Array(); + // Not waiving Xrays, since we want the original Document.evaluate function, + // instead of anything that's been redefined. + const doc = owner.window.document; + context = context || doc; + switch (resultType) { + case "number": + resultType = owner.window.XPathResult.NUMBER_TYPE; + break; + + case "string": + resultType = owner.window.XPathResult.STRING_TYPE; + break; + + case "bool": + resultType = owner.window.XPathResult.BOOLEAN_TYPE; + break; + + case "node": + resultType = owner.window.XPathResult.FIRST_ORDERED_NODE_TYPE; + break; + + case "nodes": + resultType = owner.window.XPathResult.UNORDERED_NODE_ITERATOR_TYPE; + break; + } + const results = doc.evaluate(xPath, context, null, resultType, null); + if (results.resultType === owner.window.XPathResult.NUMBER_TYPE) { + return results.numberValue; + } + if (results.resultType === owner.window.XPathResult.STRING_TYPE) { + return results.stringValue; + } + if (results.resultType === owner.window.XPathResult.BOOLEAN_TYPE) { + return results.booleanValue; + } + if ( + results.resultType === owner.window.XPathResult.ANY_UNORDERED_NODE_TYPE || + results.resultType === owner.window.XPathResult.FIRST_ORDERED_NODE_TYPE + ) { + return results.singleNodeValue; + } + if ( + results.resultType === + owner.window.XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE || + results.resultType === owner.window.XPathResult.ORDERED_NODE_SNAPSHOT_TYPE + ) { + for (let i = 0; i < results.snapshotLength; i++) { + nodes.push(results.snapshotItem(i)); + } + return nodes; + } + + let node; + while ((node = results.iterateNext())) { + nodes.push(node); + } + + return nodes; + }, +}); + +/** + * Returns the currently selected object in the highlighter. + * + * @return Object representing the current selection in the + * Inspector, or null if no selection exists. + */ +WebConsoleCommandsManager.register({ + name: "$0", + isSideEffectFree: true, + command: { + get(owner) { + return owner.makeDebuggeeValue(owner.selectedNode); + }, + }, +}); + +/** + * Clears the output of the WebConsole. + */ +WebConsoleCommandsManager.register({ + name: "clear", + isSideEffectFree: false, + command(owner) { + owner.helperResult = { + type: "clearOutput", + }; + }, +}); + +/** + * Clears the input history of the WebConsole. + */ +WebConsoleCommandsManager.register({ + name: "clearHistory", + isSideEffectFree: false, + command(owner) { + owner.helperResult = { + type: "clearHistory", + }; + }, +}); + +/** + * Returns the result of Object.keys(object). + * + * @param object object + * Object to return the property names from. + * @return array of strings + */ +WebConsoleCommandsManager.register({ + name: "keys", + isSideEffectFree: true, + command(owner, object) { + // Need to waive Xrays so we can iterate functions and accessor properties + return Cu.cloneInto(Object.keys(Cu.waiveXrays(object)), owner.window); + }, +}); + +/** + * Returns the values of all properties on object. + * + * @param object object + * Object to display the values from. + * @return array of string + */ +WebConsoleCommandsManager.register({ + name: "values", + isSideEffectFree: true, + command(owner, object) { + const values = []; + // Need to waive Xrays so we can iterate functions and accessor properties + const waived = Cu.waiveXrays(object); + const names = Object.getOwnPropertyNames(waived); + + for (const name of names) { + values.push(waived[name]); + } + + return Cu.cloneInto(values, owner.window); + }, +}); + +/** + * Opens a help window in MDN. + */ +WebConsoleCommandsManager.register({ + name: "help", + isSideEffectFree: false, + command(owner, args) { + owner.helperResult = { type: "help" }; + }, +}); + +/** + * Inspects the passed object. This is done by opening the PropertyPanel. + * + * @param object object + * Object to inspect. + */ +WebConsoleCommandsManager.register({ + name: "inspect", + isSideEffectFree: false, + command(owner, object, forceExpandInConsole = false) { + const dbgObj = owner.preprocessDebuggerObject( + owner.makeDebuggeeValue(object) + ); + + const grip = owner.createValueGrip(dbgObj); + owner.helperResult = { + type: "inspectObject", + input: owner.evalInput, + object: grip, + forceExpandInConsole, + }; + }, +}); + +/** + * Copy the String representation of a value to the clipboard. + * + * @param any value + * A value you want to copy as a string. + * @return void + */ +WebConsoleCommandsManager.register({ + name: "copy", + isSideEffectFree: false, + command(owner, value) { + let payload; + try { + if (Element.isInstance(value)) { + payload = value.outerHTML; + } else if (typeof value == "string") { + payload = value; + } else { + payload = JSON.stringify(value, null, " "); + } + } catch (ex) { + owner.helperResult = { + type: "error", + message: "webconsole.error.commands.copyError", + messageArgs: [ex.toString()], + }; + return; + } + owner.helperResult = { + type: "copyValueToClipboard", + value: payload, + }; + }, +}); + +/** + * Take a screenshot of a page. + * + * @param object args + * The arguments to be passed to the screenshot + * @return void + */ +WebConsoleCommandsManager.register({ + name: "screenshot", + isSideEffectFree: false, + command(owner, args = {}) { + owner.helperResult = { + type: "screenshotOutput", + args, + }; + }, +}); + +/** + * Shows a history of commands and expressions previously executed within the command line. + * + * @param object args + * The arguments to be passed to the history + * @return void + */ +WebConsoleCommandsManager.register({ + name: "history", + isSideEffectFree: false, + command(owner, args = {}) { + owner.helperResult = { + type: "historyOutput", + args, + }; + }, +}); + +/** + * Block specific resource from loading + * + * @param object args + * an object with key "url", i.e. a filter + * + * @return void + */ +WebConsoleCommandsManager.register({ + name: "block", + isSideEffectFree: false, + command(owner, args = {}) { + // Note that this command is implemented in the frontend, from actions's input.js + // We only forward the command arguments back to the client. + if (!args.url) { + owner.helperResult = { + type: "error", + message: "webconsole.messages.commands.blockArgMissing", + }; + return; + } + + owner.helperResult = { + type: "blockURL", + args, + }; + }, + validArguments: ["url"], +}); + +/* + * Unblock a blocked a resource + * + * @param object filter + * an object with key "url", i.e. a filter + * + * @return void + */ +WebConsoleCommandsManager.register({ + name: "unblock", + isSideEffectFree: false, + command(owner, args = {}) { + // Note that this command is implemented in the frontend, from actions's input.js + // We only forward the command arguments back to the client. + if (!args.url) { + owner.helperResult = { + type: "error", + message: "webconsole.messages.commands.blockArgMissing", + }; + return; + } + + owner.helperResult = { + type: "unblockURL", + args, + }; + }, + validArguments: ["url"], +}); + +/* + * Toggle JavaScript tracing + * + * @param object args + * An object with various configuration only valid when starting the tracing. + * + * @return void + */ +WebConsoleCommandsManager.register({ + name: "trace", + isSideEffectFree: false, + command(owner, args) { + if (isWorker) { + throw new Error(":trace command isn't supported in workers"); + } + // Disable :trace command on worker until this feature is enabled by default + if ( + !Services.prefs.getBoolPref( + "devtools.debugger.features.javascript-tracing", + false + ) + ) { + throw new Error( + ":trace requires 'devtools.debugger.features.javascript-tracing' preference to be true" + ); + } + const tracerActor = + owner.consoleActor.parentActor.getTargetScopedActor("tracer"); + const logMethod = args.logMethod || "console"; + // Note that toggleTracing does some sanity checks and will throw meaningful error + // when the arguments are wrong. + const enabled = tracerActor.toggleTracing({ + logMethod, + prefix: args.prefix || null, + traceValues: !!args.values, + traceOnNextInteraction: args["on-next-interaction"] || null, + maxDepth: args["max-depth"] || null, + maxRecords: args["max-records"] || null, + }); + + owner.helperResult = { + type: "traceOutput", + enabled, + logMethod, + }; + }, + validArguments: [ + "logMethod", + "max-depth", + "max-records", + "on-next-interaction", + "prefix", + "values", + ], +}); diff --git a/devtools/server/actors/webconsole/commands/moz.build b/devtools/server/actors/webconsole/commands/moz.build new file mode 100644 index 0000000000..9e0516b172 --- /dev/null +++ b/devtools/server/actors/webconsole/commands/moz.build @@ -0,0 +1,10 @@ +# -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*- +# vim: set filetype=python: +# 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/. + +DevToolsModules( + "manager.js", + "parser.js", +) diff --git a/devtools/server/actors/webconsole/commands/parser.js b/devtools/server/actors/webconsole/commands/parser.js new file mode 100644 index 0000000000..49a7a5a1d7 --- /dev/null +++ b/devtools/server/actors/webconsole/commands/parser.js @@ -0,0 +1,249 @@ +/* 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"; + +loader.lazyRequireGetter( + this, + ["WebConsoleCommandsManager"], + "resource://devtools/server/actors/webconsole/commands/manager.js", + true +); + +const COMMAND = "command"; +const KEY = "key"; +const ARG = "arg"; + +const COMMAND_PREFIX = /^:/; +const KEY_PREFIX = /^--/; + +// default value for flags +const DEFAULT_VALUE = true; +const COMMAND_DEFAULT_FLAG = { + block: "url", + screenshot: "filename", + unblock: "url", +}; + +/** + * When given a string that begins with `:` and a unix style string, + * returns the command name and the arguments. + * Throws if the command doesn't exist. + * This is intended to be used by the WebConsole actor only. + * + * @param String string + * A string to format that begins with `:`. + * + * @returns Object The command name and the arguments + * { command: String, args: Object } + */ +function getCommandAndArgs(string) { + if (!isCommand(string)) { + throw Error("getCommandAndArgs was called without `:`"); + } + string = string.trim(); + if (string === ":") { + throw Error("Missing a command name after ':'"); + } + const tokens = string.split(/\s+/).map(createToken); + return parseCommand(tokens); +} + +/** + * creates a token object depending on a string which as a prefix, + * either `:` for a command or `--` for a key, or nothing for an argument + * + * @param String string + * A string to use as the basis for the token + * + * @returns Object Token Object, with the following shape + * { type: String, value: String } + */ +function createToken(string) { + if (isCommand(string)) { + const value = string.replace(COMMAND_PREFIX, ""); + if (!value) { + throw Error("Missing a command name after ':'"); + } + if (!WebConsoleCommandsManager.getAllColonCommandNames().includes(value)) { + throw Error(`'${value}' is not a valid command`); + } + return { type: COMMAND, value }; + } + if (isKey(string)) { + const value = string.replace(KEY_PREFIX, ""); + if (!value) { + throw Error("invalid flag"); + } + return { type: KEY, value }; + } + return { type: ARG, value: string }; +} + +/** + * returns a command Tree object for a set of tokens + * + * + * @param Array Tokens tokens + * An array of Token objects + * + * @returns Object Tree Object, with the following shape + * { command: String, args: Object } + */ +function parseCommand(tokens) { + let command = null; + const args = {}; + + for (let i = 0; i < tokens.length; i++) { + const token = tokens[i]; + if (token.type === COMMAND) { + if (command) { + // we are throwing here because two commands have been passed and it is unclear + // what the user's intention was + throw Error( + "Executing multiple commands in one evaluation is not supported" + ); + } + command = token.value; + } + + if (token.type === KEY) { + const nextTokenIndex = i + 1; + const nextToken = tokens[nextTokenIndex]; + let values = args[token.value] || DEFAULT_VALUE; + if (nextToken && nextToken.type === ARG) { + const { value, offset } = collectString( + nextToken, + tokens, + nextTokenIndex + ); + // in order for JSON.stringify to correctly output values, they must be correctly + // typed + // As per the old GCLI documentation, we can only have one value associated with a + // flag but multiple flags with the same name can exist and should be combined + // into and array. Here we are associating only the value on the right hand + // side if it is of type `arg` as a single value; the second case initializes + // an array, and the final case pushes a value to an existing array + const typedValue = getTypedValue(value); + if (values === DEFAULT_VALUE) { + values = typedValue; + } else if (!Array.isArray(values)) { + values = [values, typedValue]; + } else { + values.push(typedValue); + } + // skip the next token since we have already consumed it + i = nextTokenIndex + offset; + } + args[token.value] = values; + } + + // Since this has only been implemented for screenshot, we can only have one default + // value. Eventually we may have more default values. For now, ignore multiple + // unflagged args + const defaultFlag = COMMAND_DEFAULT_FLAG[command]; + if (token.type === ARG && !args[defaultFlag]) { + const { value, offset } = collectString(token, tokens, i); + // Throw if the command isn't registered in COMMAND_DEFAULT_FLAG + // as this command may not expect any argument without an explicit argument name like "-name arg" + if (!defaultFlag) { + throw new Error( + `:${command} command doesn't support unnamed '${value}' argument.` + ); + } + args[defaultFlag] = getTypedValue(value); + i = i + offset; + } + } + return { command, args }; +} + +const stringChars = ['"', "'", "`"]; +function isStringChar(testChar) { + return stringChars.includes(testChar); +} + +function checkLastChar(string, testChar) { + const lastChar = string[string.length - 1]; + return lastChar === testChar; +} + +function hasUnescapedChar(value, char, rightOffset, leftOffset) { + const lastPos = value.length - 1; + const string = value.slice(rightOffset, lastPos - leftOffset); + const index = string.indexOf(char); + if (index === -1) { + return false; + } + const prevChar = index > 0 ? string[index - 1] : null; + // return false if the unexpected character is escaped, true if it is not + return prevChar !== "\\"; +} + +function collectString(token, tokens, index) { + const firstChar = token.value[0]; + const isString = isStringChar(firstChar); + const UNESCAPED_CHAR_ERROR = segment => + `String has unescaped \`${firstChar}\` in [${segment}...],` + + " may miss a space between arguments"; + let value = token.value; + + // the test value is not a string, or it is a string but a complete one + // i.e. `"test"`, as opposed to `"foo`. In either case, this we can return early + if (!isString || checkLastChar(value, firstChar)) { + return { value, offset: 0 }; + } + + if (hasUnescapedChar(value, firstChar, 1, 0)) { + throw Error(UNESCAPED_CHAR_ERROR(value)); + } + + let offset = null; + for (let i = index + 1; i <= tokens.length; i++) { + if (i === tokens.length) { + throw Error("String does not terminate"); + } + + const nextToken = tokens[i]; + if (nextToken.type !== ARG) { + throw Error(`String does not terminate before flag "${nextToken.value}"`); + } + + value = `${value} ${nextToken.value}`; + + if (hasUnescapedChar(nextToken.value, firstChar, 0, 1)) { + throw Error(UNESCAPED_CHAR_ERROR(value)); + } + + if (checkLastChar(nextToken.value, firstChar)) { + offset = i - index; + break; + } + } + return { value, offset }; +} + +function isCommand(string) { + return COMMAND_PREFIX.test(string); +} + +function isKey(string) { + return KEY_PREFIX.test(string); +} + +function getTypedValue(value) { + if (!isNaN(value)) { + return Number(value); + } + if (value === "true" || value === "false") { + return Boolean(value); + } + if (isStringChar(value[0])) { + return value.slice(1, value.length - 1); + } + return value; +} + +exports.getCommandAndArgs = getCommandAndArgs; +exports.isCommand = isCommand; diff --git a/devtools/server/actors/webconsole/eager-ecma-allowlist.js b/devtools/server/actors/webconsole/eager-ecma-allowlist.js new file mode 100644 index 0000000000..defe98ad8b --- /dev/null +++ b/devtools/server/actors/webconsole/eager-ecma-allowlist.js @@ -0,0 +1,249 @@ +/* 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/. */ +/* global BigInt */ + +"use strict"; + +function matchingProperties(obj, regexp) { + return Object.getOwnPropertyNames(obj) + .filter(n => regexp.test(n)) + .map(n => obj[n]) + .filter(v => typeof v == "function"); +} + +function allProperties(obj) { + return matchingProperties(obj, /./); +} + +function getter(obj, name) { + return Object.getOwnPropertyDescriptor(obj, name).get; +} + +const TypedArray = Reflect.getPrototypeOf(Int8Array); + +const functionAllowList = [ + Array, + Array.from, + Array.isArray, + Array.of, + Array.prototype.concat, + Array.prototype.entries, + Array.prototype.every, + Array.prototype.filter, + Array.prototype.find, + Array.prototype.findIndex, + Array.prototype.flat, + Array.prototype.flatMap, + Array.prototype.forEach, + Array.prototype.includes, + Array.prototype.indexOf, + Array.prototype.join, + Array.prototype.keys, + Array.prototype.lastIndexOf, + Array.prototype.map, + Array.prototype.reduce, + Array.prototype.reduceRight, + Array.prototype.slice, + Array.prototype.some, + Array.prototype.values, + ArrayBuffer, + ArrayBuffer.isView, + ArrayBuffer.prototype.slice, + BigInt, + ...allProperties(BigInt), + Boolean, + DataView, + Date, + Date.now, + Date.parse, + Date.UTC, + ...matchingProperties(Date.prototype, /^get/), + ...matchingProperties(Date.prototype, /^to.*?String$/), + Error, + Function, + Function.prototype.apply, + Function.prototype.bind, + Function.prototype.call, + Function.prototype[Symbol.hasInstance], + Int8Array, + Uint8Array, + Uint8ClampedArray, + Int16Array, + Uint16Array, + Int32Array, + Uint32Array, + Float32Array, + Float64Array, + TypedArray.from, + TypedArray.of, + TypedArray.prototype.entries, + TypedArray.prototype.every, + TypedArray.prototype.filter, + TypedArray.prototype.find, + TypedArray.prototype.findIndex, + TypedArray.prototype.forEach, + TypedArray.prototype.includes, + TypedArray.prototype.indexOf, + TypedArray.prototype.join, + TypedArray.prototype.keys, + TypedArray.prototype.lastIndexOf, + TypedArray.prototype.map, + TypedArray.prototype.reduce, + TypedArray.prototype.reduceRight, + TypedArray.prototype.slice, + TypedArray.prototype.some, + TypedArray.prototype.subarray, + TypedArray.prototype.values, + ...allProperties(JSON), + Map, + Map.prototype.forEach, + Map.prototype.get, + Map.prototype.has, + Map.prototype.entries, + Map.prototype.keys, + Map.prototype.values, + ...allProperties(Math), + Number, + ...allProperties(Number), + ...allProperties(Number.prototype), + Object, + Object.create, + Object.keys, + Object.entries, + Object.getOwnPropertyDescriptor, + Object.getOwnPropertyDescriptors, + Object.getOwnPropertyNames, + Object.getOwnPropertySymbols, + Object.getPrototypeOf, + Object.is, + Object.isExtensible, + Object.isFrozen, + Object.isSealed, + Object.values, + Object.prototype.hasOwnProperty, + Object.prototype.isPrototypeOf, + Proxy, + Proxy.revocable, + Reflect.apply, + Reflect.construct, + Reflect.get, + Reflect.getOwnPropertyDescriptor, + Reflect.getPrototypeOf, + Reflect.has, + Reflect.isExtensible, + Reflect.ownKeys, + RegExp, + RegExp.prototype.exec, + RegExp.prototype.test, + RegExp.prototype[Symbol.match], + RegExp.prototype[Symbol.search], + RegExp.prototype[Symbol.replace], + Set, + Set.prototype.entries, + Set.prototype.forEach, + Set.prototype.has, + Set.prototype.values, + String, + ...allProperties(String), + ...allProperties(String.prototype), + Symbol, + Symbol.keyFor, + WeakMap, + WeakMap.prototype.get, + WeakMap.prototype.has, + WeakSet, + WeakSet.prototype.has, + decodeURI, + decodeURIComponent, + encodeURI, + encodeURIComponent, + escape, + isFinite, + isNaN, + unescape, +]; + +const getterAllowList = [ + getter(ArrayBuffer.prototype, "byteLength"), + getter(ArrayBuffer, Symbol.species), + getter(Array, Symbol.species), + getter(DataView.prototype, "buffer"), + getter(DataView.prototype, "byteLength"), + getter(DataView.prototype, "byteOffset"), + getter(Error.prototype, "stack"), + getter(Function.prototype, "arguments"), + getter(Function.prototype, "caller"), + getter(Intl.Locale.prototype, "baseName"), + getter(Intl.Locale.prototype, "calendar"), + getter(Intl.Locale.prototype, "caseFirst"), + getter(Intl.Locale.prototype, "collation"), + getter(Intl.Locale.prototype, "hourCycle"), + getter(Intl.Locale.prototype, "numeric"), + getter(Intl.Locale.prototype, "numberingSystem"), + getter(Intl.Locale.prototype, "language"), + getter(Intl.Locale.prototype, "script"), + getter(Intl.Locale.prototype, "region"), + getter(Map.prototype, "size"), + getter(Map, Symbol.species), + // NOTE: Object.prototype.__proto__ is not safe, because it can internally + // invoke Proxy getPrototypeOf handler. + getter(Promise, Symbol.species), + getter(RegExp, "input"), + getter(RegExp, "lastMatch"), + getter(RegExp, "lastParen"), + getter(RegExp, "leftContext"), + getter(RegExp, "rightContext"), + getter(RegExp, "$1"), + getter(RegExp, "$2"), + getter(RegExp, "$3"), + getter(RegExp, "$4"), + getter(RegExp, "$5"), + getter(RegExp, "$6"), + getter(RegExp, "$7"), + getter(RegExp, "$8"), + getter(RegExp, "$9"), + getter(RegExp, "$_"), + getter(RegExp, "$&"), + getter(RegExp, "$+"), + getter(RegExp, "$`"), + getter(RegExp, "$'"), + getter(RegExp.prototype, "dotAll"), + getter(RegExp.prototype, "flags"), + getter(RegExp.prototype, "global"), + getter(RegExp.prototype, "hasIndices"), + getter(RegExp.prototype, "ignoreCase"), + getter(RegExp.prototype, "multiline"), + getter(RegExp.prototype, "source"), + getter(RegExp.prototype, "sticky"), + getter(RegExp.prototype, "unicode"), + getter(RegExp.prototype, "unicodeSets"), + getter(RegExp, Symbol.species), + getter(Set.prototype, "size"), + getter(Set, Symbol.species), + getter(Symbol.prototype, "description"), + getter(TypedArray.prototype, "buffer"), + getter(TypedArray.prototype, "byteLength"), + getter(TypedArray.prototype, "byteOffset"), + getter(TypedArray.prototype, "length"), + getter(TypedArray.prototype, Symbol.toStringTag), + getter(TypedArray, Symbol.species), +]; + +// TODO: Integrate in main list when changes array by copy ships by default +const changesArrayByCopy = [ + Array.prototype.toReversed, + Array.prototype.toSorted, + Array.prototype.toSpliced, + Array.prototype.with, + TypedArray.prototype.toReversed, + TypedArray.prototype.toSorted, + TypedArray.prototype.with, +]; +for (const fn of changesArrayByCopy) { + if (typeof fn == "function") { + functionAllowList.push(fn); + } +} + +module.exports = { functions: functionAllowList, getters: getterAllowList }; diff --git a/devtools/server/actors/webconsole/eager-function-allowlist.js b/devtools/server/actors/webconsole/eager-function-allowlist.js new file mode 100644 index 0000000000..363591523d --- /dev/null +++ b/devtools/server/actors/webconsole/eager-function-allowlist.js @@ -0,0 +1,52 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const idlPureAllowlist = require("resource://devtools/server/actors/webconsole/webidl-pure-allowlist.js"); + +const natives = []; +if (Components.Constructor && Cu) { + const sandbox = Cu.Sandbox( + Components.Constructor("@mozilla.org/systemprincipal;1", "nsIPrincipal")(), + { + invisibleToDebugger: true, + wantGlobalProperties: Object.keys(idlPureAllowlist), + } + ); + + function maybePush(maybeFunc) { + if (maybeFunc) { + natives.push(maybeFunc); + } + } + + function collectMethods(obj, methods) { + for (const name of methods) { + maybePush(obj[name]); + } + } + + for (const [iface, ifaceData] of Object.entries(idlPureAllowlist)) { + const ctor = sandbox[iface]; + if (!ctor) { + continue; + } + + if ("static" in ifaceData) { + collectMethods(ctor, ifaceData.static); + } + + if ("prototype" in ifaceData) { + const proto = ctor.prototype; + if (!proto) { + continue; + } + + collectMethods(proto, ifaceData.prototype); + } + } +} + +module.exports = { natives }; diff --git a/devtools/server/actors/webconsole/eval-with-debugger.js b/devtools/server/actors/webconsole/eval-with-debugger.js new file mode 100644 index 0000000000..d422d6cd5e --- /dev/null +++ b/devtools/server/actors/webconsole/eval-with-debugger.js @@ -0,0 +1,710 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const Debugger = require("Debugger"); +const DevToolsUtils = require("resource://devtools/shared/DevToolsUtils.js"); + +const lazy = {}; +ChromeUtils.defineESModuleGetters(lazy, { + Reflect: "resource://gre/modules/reflect.sys.mjs", +}); +loader.lazyRequireGetter( + this, + ["isCommand"], + "resource://devtools/server/actors/webconsole/commands/parser.js", + true +); +loader.lazyRequireGetter( + this, + "WebConsoleCommandsManager", + "resource://devtools/server/actors/webconsole/commands/manager.js", + true +); + +loader.lazyRequireGetter( + this, + "LongStringActor", + "resource://devtools/server/actors/string.js", + true +); +loader.lazyRequireGetter( + this, + "eagerEcmaAllowlist", + "resource://devtools/server/actors/webconsole/eager-ecma-allowlist.js" +); +loader.lazyRequireGetter( + this, + "eagerFunctionAllowlist", + "resource://devtools/server/actors/webconsole/eager-function-allowlist.js" +); + +function isObject(value) { + return Object(value) === value; +} + +/** + * Evaluates a string using the debugger API. + * + * To allow the variables view to update properties from the Web Console we + * provide the "selectedObjectActor" mechanism: the Web Console tells the + * ObjectActor ID for which it desires to evaluate an expression. The + * Debugger.Object pointed at by the actor ID is bound such that it is + * available during expression evaluation (executeInGlobalWithBindings()). + * + * Example: + * _self['foobar'] = 'test' + * where |_self| refers to the desired object. + * + * The |frameActor| property allows the Web Console client to provide the + * frame actor ID, such that the expression can be evaluated in the + * user-selected stack frame. + * + * For the above to work we need the debugger and the Web Console to share + * a connection, otherwise the Web Console actor will not find the frame + * actor. + * + * The Debugger.Frame comes from the jsdebugger's Debugger instance, which + * is different from the Web Console's Debugger instance. This means that + * for evaluation to work, we need to create a new instance for the Web + * Console Commands helpers - they need to be Debugger.Objects coming from the + * jsdebugger's Debugger instance. + * + * When |selectedObjectActor| is used objects can come from different iframes, + * from different domains. To avoid permission-related errors when objects + * come from a different window, we also determine the object's own global, + * such that evaluation happens in the context of that global. This means that + * evaluation will happen in the object's iframe, rather than the top level + * window. + * + * @param string string + * String to evaluate. + * @param object [options] + * Options for evaluation: + * - selectedObjectActor: the ObjectActor ID to use for evaluation. + * |evalWithBindings()| will be called with one additional binding: + * |_self| which will point to the Debugger.Object of the given + * ObjectActor. Executes with the top level window as the global. + * - frameActor: the FrameActor ID to use for evaluation. The given + * debugger frame is used for evaluation, instead of the global window. + * - selectedNodeActor: the NodeActor ID of the currently selected node + * in the Inspector (or null, if there is no selection). This is used + * for helper functions that make reference to the currently selected + * node, like $0. + * - innerWindowID: An optional window id to use instead of webConsole.evalWindow. + * This is used by function that need to evaluate in a different window for which + * we don't have a dedicated target (for example a non-remote iframe). + * - eager: Set to true if you want the evaluation to bail if it may have side effects. + * - url: the url to evaluate the script as. Defaults to "debugger eval code", + * or "debugger eager eval code" if eager is true. + * - preferConsoleCommandsOverLocalSymbols: Set to true if console commands + * should override local symbols. + * @param object webConsole + * + * @return object + * An object that holds the following properties: + * - dbg: the debugger where the string was evaluated. + * - frame: (optional) the frame where the string was evaluated. + * - global: the Debugger.Object for the global where the string was evaluated in. + * - result: the result of the evaluation. + */ +function evalWithDebugger(string, options = {}, webConsole) { + const trimmedString = string.trim(); + // The help function needs to be easy to guess, so accept "?" as a shortcut + if (trimmedString === "?") { + return evalWithDebugger(":help", options, webConsole); + } + + const isCmd = isCommand(trimmedString); + + if (isCmd && options.eager) { + return { + result: null, + }; + } + + const { frame, dbg } = getFrameDbg(options, webConsole); + + const { dbgGlobal, bindSelf } = getDbgGlobal(options, dbg, webConsole); + + // If the strings starts with a `:`, do not try to evaluate the strings + // and instead only call the related command function directly from + // the privileged codebase. + if (isCmd) { + try { + return WebConsoleCommandsManager.executeCommand( + webConsole, + dbgGlobal, + options.selectedNodeActor, + string + ); + } catch (e) { + // Catch any exception and return a result similar to the output + // of executeCommand to notify the client about this unexpected error. + return { + helperResult: { + type: "exception", + message: e.message, + }, + }; + } + } + + const helpers = WebConsoleCommandsManager.getWebConsoleCommands( + webConsole, + dbgGlobal, + frame, + string, + options.selectedNodeActor, + options.preferConsoleCommandsOverLocalSymbols + ); + let { bindings } = helpers; + + // Ease calling the help command by not requiring the "()". + // But wait for the bindings computation in order to know if "help" variable + // was overloaded by the page. If it is missing from bindings, it is overloaded and we should + // display its value by doing a regular evaluation. + if (trimmedString === "help" && bindings.help) { + return evalWithDebugger(":help", options, webConsole); + } + + // '_self' refers to the JS object references via options.selectedObjectActor. + // This isn't exposed on typical console evaluation, but only when "Store As Global" + // runs an invisible script storing `_self` into `temp${i}`. + if (bindSelf) { + bindings._self = bindSelf; + } + + // Log points calls this method from the server side and pass additional variables + // to be exposed to the evaluated JS string + if (options.bindings) { + bindings = { ...bindings, ...options.bindings }; + } + + const evalOptions = {}; + + const urlOption = + options.url || (options.eager ? "debugger eager eval code" : null); + if (typeof urlOption === "string") { + evalOptions.url = urlOption; + } + + if (typeof options.lineNumber === "number") { + evalOptions.lineNumber = options.lineNumber; + } + + if (options.disableBreaks || options.eager) { + // When we are disabling breakpoints for a given evaluation, or when we are doing an eager evaluation, + // also prevent spawning related Debugger.Source object to avoid showing it + // in the debugger UI + evalOptions.hideFromDebugger = true; + } + + if (options.preferConsoleCommandsOverLocalSymbols) { + evalOptions.useInnerBindings = true; + } + + updateConsoleInputEvaluation(dbg, webConsole); + + const evalString = getEvalInput(string, bindings); + const result = getEvalResult( + dbg, + evalString, + evalOptions, + bindings, + frame, + dbgGlobal, + options.eager + ); + + // Attempt to initialize any declarations found in the evaluated string + // since they may now be stuck in an "initializing" state due to the + // error. Already-initialized bindings will be ignored. + if (!frame && result && "throw" in result) { + forceLexicalInitForVariableDeclarationsInThrowingExpression( + dbgGlobal, + string + ); + } + + return { + result, + // Retrieve the result of commands, if any ran + helperResult: helpers.getHelperResult(), + dbg, + frame, + dbgGlobal, + }; +} +exports.evalWithDebugger = evalWithDebugger; + +/** + * Sub-function to reduce the complexity of evalWithDebugger. + * This focuses on calling Debugger.Frame or Debugger.Object eval methods. + * + * @param {Debugger} dbg + * @param {String} string + * The string to evaluate. + * @param {Object} evalOptions + * Spidermonkey options to pass to eval methods. + * @param {Object} bindings + * Dictionary object with symbols to override in the evaluation. + * @param {Debugger.Frame} frame + * If paused, the paused frame. + * @param {Debugger.Object} dbgGlobal + * The target's global. + * @param {Boolean} eager + * Is this an eager evaluation? + * @return {Object} + * The evaluation result object. + * See `Debugger.Ojbect.executeInGlobalWithBindings` definition. + */ +function getEvalResult( + dbg, + string, + evalOptions, + bindings, + frame, + dbgGlobal, + eager +) { + // When we are doing an eager evaluation, we aren't using the target's Debugger object + // but a special one, dedicated to each evaluation. + let noSideEffectDebugger = null; + if (eager) { + noSideEffectDebugger = makeSideeffectFreeDebugger(dbg); + + // When a sideeffect-free debugger has been created, we need to eval + // in the context of that debugger in order for the side-effect tracking + // to apply. + if (frame) { + frame = noSideEffectDebugger.adoptFrame(frame); + } else { + dbgGlobal = noSideEffectDebugger.adoptDebuggeeValue(dbgGlobal); + } + if (bindings) { + bindings = Object.keys(bindings).reduce((acc, key) => { + acc[key] = noSideEffectDebugger.adoptDebuggeeValue(bindings[key]); + return acc; + }, {}); + } + } + + try { + let result; + if (frame) { + result = frame.evalWithBindings(string, bindings, evalOptions); + } else { + result = dbgGlobal.executeInGlobalWithBindings( + string, + bindings, + evalOptions + ); + } + if (noSideEffectDebugger && result) { + if ("return" in result) { + result.return = dbg.adoptDebuggeeValue(result.return); + } + if ("throw" in result) { + result.throw = dbg.adoptDebuggeeValue(result.throw); + } + } + return result; + } finally { + // We need to be absolutely sure that the sideeffect-free debugger's + // debuggees are removed because otherwise we risk them terminating + // execution of later code in the case of unexpected exceptions. + if (noSideEffectDebugger) { + noSideEffectDebugger.removeAllDebuggees(); + noSideEffectDebugger.onNativeCall = undefined; + } + } +} + +/** + * Force lexical initialization for let/const variables declared in a throwing expression. + * By spec, a lexical declaration is added to the *page-visible* global lexical environment + * for those variables, meaning they can't be redeclared (See Bug 1246215). + * + * This function gets the AST of the throwing expression to collect all the let/const + * declarations and call `forceLexicalInitializationByName`, which will initialize them + * to undefined, making it possible for them to be redeclared. + * + * @param {DebuggerObject} dbgGlobal + * @param {String} string: The expression that was evaluated and threw + * @returns + */ +function forceLexicalInitForVariableDeclarationsInThrowingExpression( + dbgGlobal, + string +) { + // Reflect is not usable in workers, so return early to avoid logging an error + // to the console when loading it. + if (isWorker) { + return; + } + + let ast; + // Parse errors will raise an exception. We can/should ignore the error + // since it's already being handled elsewhere and we are only interested + // in initializing bindings. + try { + ast = lazy.Reflect.parse(string); + } catch (e) { + return; + } + + try { + for (const line of ast.body) { + // Only let and const declarations put bindings into an + // "initializing" state. + if (!(line.kind == "let" || line.kind == "const")) { + continue; + } + + const identifiers = []; + for (const decl of line.declarations) { + switch (decl.id.type) { + case "Identifier": + // let foo = bar; + identifiers.push(decl.id.name); + break; + case "ArrayPattern": + // let [foo, bar] = [1, 2]; + // let [foo=99, bar] = [1, 2]; + for (const e of decl.id.elements) { + if (e.type == "Identifier") { + identifiers.push(e.name); + } else if (e.type == "AssignmentExpression") { + identifiers.push(e.left.name); + } + } + break; + case "ObjectPattern": + // let {bilbo, my} = {bilbo: "baggins", my: "precious"}; + // let {blah: foo} = {blah: yabba()} + // let {blah: foo=99} = {blah: yabba()} + for (const prop of decl.id.properties) { + // key + if (prop.key?.type == "Identifier") { + identifiers.push(prop.key.name); + } + // value + if (prop.value?.type == "Identifier") { + identifiers.push(prop.value.name); + } else if (prop.value?.type == "AssignmentExpression") { + identifiers.push(prop.value.left.name); + } else if (prop.type === "SpreadExpression") { + identifiers.push(prop.expression.name); + } + } + break; + } + } + + for (const name of identifiers) { + dbgGlobal.forceLexicalInitializationByName(name); + } + } + } catch (ex) { + console.error( + "Error in forceLexicalInitForVariableDeclarationsInThrowingExpression:", + ex + ); + } +} + +/** + * Creates a side-effect-free Debugger instance. + * + * @param {Debugger} targetActorDbg + * The target actor's dbg object, crafted by make-debugger.js module. + * @return {Debugger} + * Side-effect-free Debugger instance. + */ +function makeSideeffectFreeDebugger(targetActorDbg) { + // Populate the cached Map once before the evaluation + ensureSideEffectFreeNatives(); + + // Note: It is critical for debuggee performance that we implement all of + // this debuggee tracking logic with a separate Debugger instance. + // Bug 1617666 arises otherwise if we set an onEnterFrame hook on the + // existing debugger object and then later clear it. + // + // Also note that we aren't registering any global to this debugger. + // We will only adopt values into it: the paused frame (if any) or the + // target's global (when not paused). + const dbg = new Debugger(); + + // Special flag in order to ensure that any evaluation or call being + // made via this debugger will be ignored by all debuggers except this one. + dbg.exclusiveDebuggerOnEval = true; + + // We need to register all target actor's globals. + // In most cases, this will be only one global, except for the browser toolbox, + // where process target actors may interact with many. + // On the browser toolbox, we may have many debuggees and this is important to register + // them in order to detect native call made from/to these others globals. + for (const global of targetActorDbg.findDebuggees()) { + try { + dbg.addDebuggee(global); + } catch (e) { + // Ignore the following exception which can happen for some globals in the browser toolbox + if ( + !e.message.includes( + "debugger and debuggee must be in different compartments" + ) + ) { + throw e; + } + } + } + + const timeoutDuration = 100; + const endTime = Date.now() + timeoutDuration; + let count = 0; + function shouldCancel() { + // To keep the evaled code as quick as possible, we avoid querying the + // current time on ever single step and instead check every 100 steps + // as an arbitrary count that seemed to be "often enough". + return ++count % 100 === 0 && Date.now() > endTime; + } + + const executedScripts = new Set(); + const handler = { + hit: () => null, + }; + dbg.onEnterFrame = frame => { + if (shouldCancel()) { + return null; + } + frame.onStep = () => { + if (shouldCancel()) { + return null; + } + return undefined; + }; + + const script = frame.script; + + if (executedScripts.has(script)) { + return undefined; + } + executedScripts.add(script); + + const offsets = script.getEffectfulOffsets(); + for (const offset of offsets) { + script.setBreakpoint(offset, handler); + } + + return undefined; + }; + + // The debugger only calls onNativeCall handlers on the debugger that is + // explicitly calling either eval, DebuggerObject.apply or DebuggerObject.call, + // so we need to add this hook on "dbg" even though the rest of our hooks work via "newDbg". + const { SIDE_EFFECT_FREE } = WebConsoleCommandsManager; + dbg.onNativeCall = (callee, reason) => { + try { + // Setters are always effectful. Natives called normally or called via + // getters are handled with an allowlist. + if ( + (reason == "get" || reason == "call") && + nativeIsEagerlyEvaluateable(callee) + ) { + // Returning undefined causes execution to continue normally. + return undefined; + } + } catch (err) { + DevToolsUtils.reportException( + "evalWithDebugger onNativeCall", + new Error("Unable to validate native function against allowlist") + ); + } + + // The WebConsole Commands manager will use Cu.exportFunction which will force + // to call a native method which is hard to identify. + // getEvalResult will flag those getter methods with a magic attribute. + if ( + reason == "call" && + callee.unsafeDereference().isSideEffectFree === SIDE_EFFECT_FREE + ) { + // Returning undefined causes execution to continue normally. + return undefined; + } + + // Returning null terminates the current evaluation. + return null; + }; + + return dbg; +} + +// Native functions which are considered to be side effect free. +let gSideEffectFreeNatives; // string => Array(Function) + +/** + * Generate gSideEffectFreeNatives map. + */ +function ensureSideEffectFreeNatives() { + if (gSideEffectFreeNatives) { + return; + } + + const { natives: domNatives } = eagerFunctionAllowlist; + + const natives = [ + ...eagerEcmaAllowlist.functions, + ...eagerEcmaAllowlist.getters, + + // Pull in all of the non-ECMAScript native functions that we want to + // allow as well. + ...domNatives, + ]; + + const map = new Map(); + for (const n of natives) { + if (!map.has(n.name)) { + map.set(n.name, []); + } + map.get(n.name).push(n); + } + + gSideEffectFreeNatives = map; +} + +function nativeIsEagerlyEvaluateable(fn) { + if (fn.isBoundFunction) { + fn = fn.boundTargetFunction; + } + + // We assume all DOM getters have no major side effect, and they are + // eagerly-evaluateable. + // + // JitInfo is used only by methods/accessors in WebIDL, and being + // "a getter with JitInfo" can be used as a condition to check if given + // function is DOM getter. + // + // This includes privileged interfaces in addition to standard web APIs. + if (fn.isNativeGetterWithJitInfo()) { + return true; + } + + // Natives with certain names are always considered side effect free. + switch (fn.name) { + case "toString": + case "toLocaleString": + case "valueOf": + return true; + } + + const natives = gSideEffectFreeNatives.get(fn.name); + return natives && natives.some(n => fn.isSameNative(n)); +} + +function updateConsoleInputEvaluation(dbg, webConsole) { + // Adopt webConsole._lastConsoleInputEvaluation value in the new debugger, + // to prevent "Debugger.Object belongs to a different Debugger" exceptions + // related to the $_ bindings if the debugger object is changed from the + // last evaluation. + if (webConsole._lastConsoleInputEvaluation) { + webConsole._lastConsoleInputEvaluation = dbg.adoptDebuggeeValue( + webConsole._lastConsoleInputEvaluation + ); + } +} + +function getEvalInput(string, bindings) { + const trimmedString = string.trim(); + // Add easter egg for console.mihai(). + if ( + trimmedString == "console.mihai()" || + trimmedString == "console.mihai();" + ) { + return '"http://incompleteness.me/blog/2015/02/09/console-dot-mihai/"'; + } + return string; +} + +function getFrameDbg(options, webConsole) { + if (!options.frameActor) { + return { frame: null, dbg: webConsole.dbg }; + } + // Find the Debugger.Frame of the given FrameActor. + const frameActor = webConsole.conn.getActor(options.frameActor); + if (frameActor) { + // If we've been given a frame actor in whose scope we should evaluate the + // expression, be sure to use that frame's Debugger (that is, the JavaScript + // debugger's Debugger) for the whole operation, not the console's Debugger. + // (One Debugger will treat a different Debugger's Debugger.Object instances + // as ordinary objects, not as references to be followed, so mixing + // debuggers causes strange behaviors.) + return { frame: frameActor.frame, dbg: frameActor.threadActor.dbg }; + } + return DevToolsUtils.reportException( + "evalWithDebugger", + Error("The frame actor was not found: " + options.frameActor) + ); +} + +/** + * Get debugger object for given debugger and Web Console. + * + * @param object options + * See the `options` parameter of evalWithDebugger + * @param {Debugger} dbg + * Debugger object + * @param {WebConsoleActor} webConsole + * A reference to a webconsole actor which is used to get the target + * eval global and optionally the target actor + * @return object + * An object that holds the following properties: + * - bindSelf: (optional) the self object for the evaluation + * - dbgGlobal: the global object reference in the debugger + */ +function getDbgGlobal(options, dbg, webConsole) { + let evalGlobal = webConsole.evalGlobal; + + if (options.innerWindowID) { + const window = Services.wm.getCurrentInnerWindowWithId( + options.innerWindowID + ); + + if (window) { + evalGlobal = window; + } + } + + const dbgGlobal = dbg.makeGlobalObjectReference(evalGlobal); + + // If we have an object to bind to |_self|, create a Debugger.Object + // referring to that object, belonging to dbg. + if (!options.selectedObjectActor) { + return { bindSelf: null, dbgGlobal }; + } + + // For objects related to console messages, they will be registered under the Target Actor + // instead of the WebConsoleActor. That's because console messages are resources and all resources + // are emitted by the Target Actor. + const actor = + webConsole.getActorByID(options.selectedObjectActor) || + webConsole.parentActor.getActorByID(options.selectedObjectActor); + + if (!actor) { + return { bindSelf: null, dbgGlobal }; + } + + const jsVal = actor instanceof LongStringActor ? actor.str : actor.rawValue(); + if (!isObject(jsVal)) { + return { bindSelf: jsVal, dbgGlobal }; + } + + // If we use the makeDebuggeeValue method of jsVal's own global, then + // we'll get a D.O that sees jsVal as viewed from its own compartment - + // that is, without wrappers. The evalWithBindings call will then wrap + // jsVal appropriately for the evaluation compartment. + const bindSelf = dbgGlobal.makeDebuggeeValue(jsVal); + return { bindSelf, dbgGlobal }; +} diff --git a/devtools/server/actors/webconsole/listeners/console-api.js b/devtools/server/actors/webconsole/listeners/console-api.js new file mode 100644 index 0000000000..3e5d0bc52f --- /dev/null +++ b/devtools/server/actors/webconsole/listeners/console-api.js @@ -0,0 +1,255 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const { + CONSOLE_WORKER_IDS, + WebConsoleUtils, +} = require("resource://devtools/server/actors/webconsole/utils.js"); + +// The window.console API observer + +/** + * The window.console API observer. This allows the window.console API messages + * to be sent to the remote Web Console instance. + * + * @constructor + * @param nsIDOMWindow window + * Optional - the window object for which we are created. This is used + * for filtering out messages that belong to other windows. + * @param Function handler + * This function is invoked with one argument, the Console API message that comes + * from the observer service, whenever a relevant console API call is received. + * @param object filteringOptions + * Optional - The filteringOptions that this listener should listen to: + * - addonId: filter console messages based on the addonId. + * - excludeMessagesBoundToWindow: Set to true to filter out messages that + * are bound to a specific window. + * - matchExactWindow: Set to true to match the messages on a specific window (when + * `window` is defined) and not on the whole window tree. + */ +class ConsoleAPIListener { + constructor( + window, + handler, + { addonId, excludeMessagesBoundToWindow, matchExactWindow } = {} + ) { + this.window = window; + this.handler = handler; + this.addonId = addonId; + this.excludeMessagesBoundToWindow = excludeMessagesBoundToWindow; + this.matchExactWindow = matchExactWindow; + if (this.window) { + this.innerWindowId = WebConsoleUtils.getInnerWindowId(this.window); + } + } + + QueryInterface = ChromeUtils.generateQI([Ci.nsIObserver]); + + /** + * The content window for which we listen to window.console API calls. + * @type nsIDOMWindow + */ + window = null; + + /** + * The function which is notified of window.console API calls. It is invoked with one + * argument: the console API call object that comes from the ConsoleAPIStorage service. + * + * @type function + */ + handler = null; + + /** + * The addonId that we listen for. If not null then only messages from this + * console will be returned. + */ + addonId = null; + + /** + * Initialize the window.console API listener. + */ + init() { + const ConsoleAPIStorage = Cc[ + "@mozilla.org/consoleAPI-storage;1" + ].getService(Ci.nsIConsoleAPIStorage); + + // Note that the listener is process-wide. We will filter the messages as + // needed, see onConsoleAPILogEvent(). + this.onConsoleAPILogEvent = this.onConsoleAPILogEvent.bind(this); + ConsoleAPIStorage.addLogEventListener( + this.onConsoleAPILogEvent, + // We create a principal here to get the privileged principal of this + // script. Note that this is importantly *NOT* the principal of the + // content we are observing, as that would not have access to the + // message object created in ConsoleAPIStorage.jsm's scope. + Cc["@mozilla.org/systemprincipal;1"].createInstance(Ci.nsIPrincipal) + ); + } + + /** + * The console API message listener. When messages are received from the + * ConsoleAPIStorage service we forward them to the remote Web Console instance. + * + * @param object message + * The message object receives from the ConsoleAPIStorage service. + */ + onConsoleAPILogEvent(message) { + if (!this.handler) { + return; + } + + // Here, wrappedJSObject is not a security wrapper but a property defined + // by the XPCOM component which allows us to unwrap the XPCOM interface and + // access the underlying JSObject. + const apiMessage = message.wrappedJSObject; + + if (!this.isMessageRelevant(apiMessage)) { + return; + } + + this.handler(apiMessage); + } + + /** + * Given a message, return true if this window should show it and false + * if it should be ignored. + * + * @param message + * The message from the Storage Service + * @return bool + * Do we care about this message? + */ + isMessageRelevant(message) { + const workerType = WebConsoleUtils.getWorkerType(message); + + if (this.window && workerType === "ServiceWorker") { + // For messages from Service Workers, message.ID is the + // scope, which can be used to determine whether it's controlling + // a window. + const scope = message.ID; + + if (!this.window.shouldReportForServiceWorkerScope(scope)) { + return false; + } + } + + // innerID can be of different type: + // - a number if the message is bound to a specific window + // - a worker type ([Shared|Service]Worker) if the message comes from a worker + // - a JSM filename + // if we want to filter on a specific window, ignore all non-worker messages that + // don't have a proper window id (for now, we receive the worker messages from the + // main process so we still want to get them, although their innerID isn't a number). + if (!workerType && typeof message.innerID !== "number" && this.window) { + return false; + } + + // Don't show ChromeWorker messages on WindowGlobal targets + if (workerType && this.window && message.chromeContext) { + return false; + } + + if (typeof message.innerID == "number") { + if ( + this.excludeMessagesBoundToWindow && + // If innerID is 0, the message isn't actually bound to a window. + message.innerID + ) { + return false; + } + + if (this.window) { + const matchesWindow = this.matchExactWindow + ? this.innerWindowId === message.innerID + : WebConsoleUtils.getInnerWindowIDsForFrames(this.window).includes( + message.innerID + ); + + if (!matchesWindow) { + // Not the same window! + return false; + } + } + } + + if (this.addonId) { + // ConsoleAPI.jsm messages contains a consoleID, (and it is currently + // used in Addon SDK add-ons), the standard 'console' object + // (which is used in regular webpages and in WebExtensions pages) + // contains the originAttributes of the source document principal. + + // Filtering based on the originAttributes used by + // the Console API object. + if (message.addonId == this.addonId) { + return true; + } + + // Filtering based on the old-style consoleID property used by + // the legacy Console JSM module. + if (message.consoleID && message.consoleID == `addon/${this.addonId}`) { + return true; + } + + return false; + } + + return true; + } + + /** + * Get the cached messages for the current inner window and its (i)frames. + * + * @param boolean [includePrivate=false] + * Tells if you want to also retrieve messages coming from private + * windows. Defaults to false. + * @return array + * The array of cached messages. + */ + getCachedMessages(includePrivate = false) { + let messages = []; + const ConsoleAPIStorage = Cc[ + "@mozilla.org/consoleAPI-storage;1" + ].getService(Ci.nsIConsoleAPIStorage); + + // if !this.window, we're in a browser console. Retrieve all events + // for filtering based on privacy. + if (!this.window) { + messages = ConsoleAPIStorage.getEvents(); + } else if (this.matchExactWindow) { + messages = ConsoleAPIStorage.getEvents(this.innerWindowId); + } else { + WebConsoleUtils.getInnerWindowIDsForFrames(this.window).forEach(id => { + messages = messages.concat(ConsoleAPIStorage.getEvents(id)); + }); + } + + CONSOLE_WORKER_IDS.forEach(id => { + messages = messages.concat(ConsoleAPIStorage.getEvents(id)); + }); + + messages = messages.filter(msg => { + return this.isMessageRelevant(msg); + }); + + if (includePrivate) { + return messages; + } + + return messages.filter(m => !m.private); + } + + /** + * Destroy the console API listener. + */ + destroy() { + const ConsoleAPIStorage = Cc[ + "@mozilla.org/consoleAPI-storage;1" + ].getService(Ci.nsIConsoleAPIStorage); + ConsoleAPIStorage.removeLogEventListener(this.onConsoleAPILogEvent); + this.window = this.handler = null; + } +} +exports.ConsoleAPIListener = ConsoleAPIListener; diff --git a/devtools/server/actors/webconsole/listeners/console-file-activity.js b/devtools/server/actors/webconsole/listeners/console-file-activity.js new file mode 100644 index 0000000000..7e5ae0d1a8 --- /dev/null +++ b/devtools/server/actors/webconsole/listeners/console-file-activity.js @@ -0,0 +1,126 @@ +/* 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"; + +/** + * A WebProgressListener that listens for file loads. + * + * @constructor + * @param object window + * The window for which we need to track file loads. + * @param object owner + * The listener owner which needs to implement: + * - onFileActivity(aFileURI) + */ +function ConsoleFileActivityListener(window, owner) { + this.window = window; + this.owner = owner; +} +exports.ConsoleFileActivityListener = ConsoleFileActivityListener; + +ConsoleFileActivityListener.prototype = { + /** + * Tells if the console progress listener is initialized or not. + * @private + * @type boolean + */ + _initialized: false, + + _webProgress: null, + + QueryInterface: ChromeUtils.generateQI([ + "nsIWebProgressListener", + "nsISupportsWeakReference", + ]), + + /** + * Initialize the ConsoleFileActivityListener. + * @private + */ + _init() { + if (this._initialized) { + return; + } + + this._webProgress = this.window.docShell.QueryInterface(Ci.nsIWebProgress); + this._webProgress.addProgressListener( + this, + Ci.nsIWebProgress.NOTIFY_STATE_ALL + ); + + this._initialized = true; + }, + + /** + * Start a monitor/tracker related to the current nsIWebProgressListener + * instance. + */ + startMonitor() { + this._init(); + }, + + /** + * Stop monitoring. + */ + stopMonitor() { + this.destroy(); + }, + + onStateChange(progress, request, state, status) { + if (!this.owner) { + return; + } + + this._checkFileActivity(progress, request, state, status); + }, + + /** + * Check if there is any file load, given the arguments of + * nsIWebProgressListener.onStateChange. If the state change tells that a file + * URI has been loaded, then the remote Web Console instance is notified. + * @private + */ + _checkFileActivity(progress, request, state, status) { + if (!(state & Ci.nsIWebProgressListener.STATE_START)) { + return; + } + + let uri = null; + if (request instanceof Ci.imgIRequest) { + const imgIRequest = request.QueryInterface(Ci.imgIRequest); + uri = imgIRequest.URI; + } else if (request instanceof Ci.nsIChannel) { + const nsIChannel = request.QueryInterface(Ci.nsIChannel); + uri = nsIChannel.URI; + } + + if (!uri || (!uri.schemeIs("file") && !uri.schemeIs("ftp"))) { + return; + } + + this.owner.onFileActivity(uri.spec); + }, + + /** + * Destroy the ConsoleFileActivityListener. + */ + destroy() { + if (!this._initialized) { + return; + } + + this._initialized = false; + + try { + this._webProgress.removeProgressListener(this); + } catch (ex) { + // This can throw during browser shutdown. + } + + this._webProgress = null; + this.window = null; + this.owner = null; + }, +}; diff --git a/devtools/server/actors/webconsole/listeners/console-reflow.js b/devtools/server/actors/webconsole/listeners/console-reflow.js new file mode 100644 index 0000000000..8404a70b4a --- /dev/null +++ b/devtools/server/actors/webconsole/listeners/console-reflow.js @@ -0,0 +1,90 @@ +/* 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"; + +/** + * A ReflowObserver that listens for reflow events from the page. + * Implements nsIReflowObserver. + * + * @constructor + * @param object window + * The window for which we need to track reflow. + * @param object owner + * The listener owner which needs to implement: + * - onReflowActivity(reflowInfo) + */ + +function ConsoleReflowListener(window, listener) { + this.docshell = window.docShell; + this.listener = listener; + this.docshell.addWeakReflowObserver(this); +} + +exports.ConsoleReflowListener = ConsoleReflowListener; + +ConsoleReflowListener.prototype = { + QueryInterface: ChromeUtils.generateQI([ + "nsIReflowObserver", + "nsISupportsWeakReference", + ]), + docshell: null, + listener: null, + + /** + * Forward reflow event to listener. + * + * @param DOMHighResTimeStamp start + * @param DOMHighResTimeStamp end + * @param boolean interruptible + */ + sendReflow(start, end, interruptible) { + const frame = Components.stack.caller.caller; + + let filename = frame ? frame.filename : null; + + if (filename) { + // Because filename could be of the form "xxx.js -> xxx.js -> xxx.js", + // we only take the last part. + filename = filename.split(" ").pop(); + } + + this.listener.onReflowActivity({ + interruptible, + start, + end, + sourceURL: filename, + sourceLine: frame ? frame.lineNumber : null, + functionName: frame ? frame.name : null, + }); + }, + + /** + * On uninterruptible reflow + * + * @param DOMHighResTimeStamp start + * @param DOMHighResTimeStamp end + */ + reflow(start, end) { + this.sendReflow(start, end, false); + }, + + /** + * On interruptible reflow + * + * @param DOMHighResTimeStamp start + * @param DOMHighResTimeStamp end + */ + reflowInterruptible(start, end) { + this.sendReflow(start, end, true); + }, + + /** + * Unregister listener. + */ + destroy() { + this.docshell.removeWeakReflowObserver(this); + this.listener = this.docshell = null; + }, +}; diff --git a/devtools/server/actors/webconsole/listeners/console-service.js b/devtools/server/actors/webconsole/listeners/console-service.js new file mode 100644 index 0000000000..11ced5611f --- /dev/null +++ b/devtools/server/actors/webconsole/listeners/console-service.js @@ -0,0 +1,193 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const { + isWindowIncluded, +} = require("resource://devtools/shared/layout/utils.js"); +const { + WebConsoleUtils, +} = require("resource://devtools/server/actors/webconsole/utils.js"); + +// The page errors listener + +/** + * The nsIConsoleService listener. This is used to send all of the console + * messages (JavaScript, CSS and more) to the remote Web Console instance. + * + * @constructor + * @param nsIDOMWindow [window] + * Optional - the window object for which we are created. This is used + * for filtering out messages that belong to other windows. + * @param Function handler + * This function is invoked with one argument, the nsIConsoleMessage, whenever a + * relevant message is received. + * @param object filteringOptions + * Optional - The filteringOptions that this listener should listen to: + * - matchExactWindow: Set to true to match the messages on a specific window (when + * `window` is defined) and not on the whole window tree. + */ +class ConsoleServiceListener { + constructor(window, handler, { matchExactWindow } = {}) { + this.window = window; + this.handler = handler; + this.matchExactWindow = matchExactWindow; + } + + QueryInterface = ChromeUtils.generateQI([Ci.nsIConsoleListener]); + + /** + * The content window for which we listen to page errors. + * @type nsIDOMWindow + */ + window = null; + + /** + * The function which is notified of messages from the console service. + * @type function + */ + handler = null; + + /** + * Initialize the nsIConsoleService listener. + */ + init() { + Services.console.registerListener(this); + } + + /** + * The nsIConsoleService observer. This method takes all the script error + * messages belonging to the current window and sends them to the remote Web + * Console instance. + * + * @param nsIConsoleMessage message + * The message object coming from the nsIConsoleService. + */ + observe(message) { + if (!this.handler) { + return; + } + + if (this.window) { + if ( + !(message instanceof Ci.nsIScriptError) || + !message.outerWindowID || + !this.isCategoryAllowed(message.category) + ) { + return; + } + + const errorWindow = Services.wm.getOuterWindowWithId( + message.outerWindowID + ); + + if (!errorWindow) { + return; + } + + if (this.matchExactWindow && this.window !== errorWindow) { + return; + } + + if (!isWindowIncluded(this.window, errorWindow)) { + return; + } + } + + // Don't display messages triggered by eager evaluation. + if (message.sourceName === "debugger eager eval code") { + return; + } + this.handler(message); + } + + /** + * Check if the given message category is allowed to be tracked or not. + * We ignore chrome-originating errors as we only care about content. + * + * @param string category + * The message category you want to check. + * @return boolean + * True if the category is allowed to be logged, false otherwise. + */ + isCategoryAllowed(category) { + if (!category) { + return false; + } + + switch (category) { + case "XPConnect JavaScript": + case "component javascript": + case "chrome javascript": + case "chrome registration": + return false; + } + + return true; + } + + /** + * Get the cached page errors for the current inner window and its (i)frames. + * + * @param boolean [includePrivate=false] + * Tells if you want to also retrieve messages coming from private + * windows. Defaults to false. + * @return array + * The array of cached messages. Each element is an nsIScriptError or + * an nsIConsoleMessage + */ + getCachedMessages(includePrivate = false) { + const errors = Services.console.getMessageArray() || []; + + // if !this.window, we're in a browser console. Still need to filter + // private messages. + if (!this.window) { + return errors.filter(error => { + if (error instanceof Ci.nsIScriptError) { + if (!includePrivate && error.isFromPrivateWindow) { + return false; + } + } + + return true; + }); + } + + const ids = this.matchExactWindow + ? [WebConsoleUtils.getInnerWindowId(this.window)] + : WebConsoleUtils.getInnerWindowIDsForFrames(this.window); + + return errors.filter(error => { + if (error instanceof Ci.nsIScriptError) { + if (!includePrivate && error.isFromPrivateWindow) { + return false; + } + if ( + ids && + (!ids.includes(error.innerWindowID) || + !this.isCategoryAllowed(error.category)) + ) { + return false; + } + } else if (ids?.[0]) { + // If this is not an nsIScriptError and we need to do window-based + // filtering we skip this message. + return false; + } + + return true; + }); + } + + /** + * Remove the nsIConsoleService listener. + */ + destroy() { + Services.console.unregisterListener(this); + this.handler = this.window = null; + } +} + +exports.ConsoleServiceListener = ConsoleServiceListener; diff --git a/devtools/server/actors/webconsole/listeners/document-events.js b/devtools/server/actors/webconsole/listeners/document-events.js new file mode 100644 index 0000000000..1c1f926436 --- /dev/null +++ b/devtools/server/actors/webconsole/listeners/document-events.js @@ -0,0 +1,247 @@ +/* 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/. */ + +// XPCNativeWrapper is not defined globally in ESLint as it may be going away. +// See bug 1481337. +/* global XPCNativeWrapper */ + +"use strict"; + +const EventEmitter = require("resource://devtools/shared/event-emitter.js"); + +/** + * About "navigationStart - ${WILL_NAVIGATE_TIME_SHIFT}ms": + * Unfortunately dom-loading's navigationStart timestamp is older than the navigationStart we receive from will-navigate. + * + * That's because we record `navigationStart` before will-navigate code is called. + * And will-navigate code don't have access to performance.timing.navigationStart that dom-loading is using. + * The `performance.timing.navigationStart` is recorded earlier from `DocumentLoadListener.SetNavigating`, here: + * https://searchfox.org/mozilla-central/rev/9b430bb1a11d7152cab2af4574f451ffb906b052/netwerk/ipc/DocumentLoadListener.cpp#907-908 + * https://searchfox.org/mozilla-central/rev/9b430bb1a11d7152cab2af4574f451ffb906b052/netwerk/ipc/DocumentLoadListener.cpp#820-823 + * While this function is being called via `nsIWebProgressListener.onStateChange`, here: + * https://searchfox.org/mozilla-central/rev/9b430bb1a11d7152cab2af4574f451ffb906b052/netwerk/ipc/DocumentLoadListener.cpp#934-939 + * And we record the navigationStart timestamp from onStateChange by using Date.now(), which is more recent + * than performance.timing.navigationStart. + * + * We do this workaround because all DOCUMENT_EVENT comes with a "time" timestamp. + * Each event relates to a particular event in the lifecycle of documents and are supposed to follow a particular order: + * - will-navigate (on the previous target) + * - dom-loading (on the new target) + * - dom-interactive + * - dom-complete + * And some tests are asserting this. + */ +const WILL_NAVIGATE_TIME_SHIFT = 20; +exports.WILL_NAVIGATE_TIME_SHIFT = WILL_NAVIGATE_TIME_SHIFT; + +/** + * Forward `DOMContentLoaded` and `load` events with precise timing + * of when events happened according to window.performance numbers. + * + * @constructor + * @param WindowGlobalTarget targetActor + */ +function DocumentEventsListener(targetActor) { + this.targetActor = targetActor; + + EventEmitter.decorate(this); + this.onWillNavigate = this.onWillNavigate.bind(this); + this.onWindowReady = this.onWindowReady.bind(this); + this.onContentLoaded = this.onContentLoaded.bind(this); + this.onLoad = this.onLoad.bind(this); +} + +exports.DocumentEventsListener = DocumentEventsListener; + +DocumentEventsListener.prototype = { + listen() { + // When EFT is enabled, the Target Actor won't dispatch any will-navigate/window-ready event + // Instead listen to WebProgressListener interface directly, so that we can later drop the whole + // DebuggerProgressListener interface in favor of this class. + // Also, do not wait for "load" event as it can be blocked in case of error during the load + // or when calling window.stop(). We still want to emit "dom-complete" in these scenarios. + if (this.targetActor.ignoreSubFrames) { + // Ignore listening to anything if the page is already fully loaded. + // This can be the case when opening DevTools against an already loaded page + // or when doing bfcache navigations. + if (this.targetActor.window.document.readyState != "complete") { + this.webProgress = this.targetActor.docShell + .QueryInterface(Ci.nsIInterfaceRequestor) + .getInterface(Ci.nsIWebProgress); + this.webProgress.addProgressListener( + this, + Ci.nsIWebProgress.NOTIFY_STATE_WINDOW | + Ci.nsIWebProgress.NOTIFY_STATE_DOCUMENT + ); + } + } else { + // Listen to will-navigate and do not emit a fake one as we only care about upcoming navigation + this.targetActor.on("will-navigate", this.onWillNavigate); + + // Listen to window-ready and then fake one in order to notify about dom-loading for the existing document + this.targetActor.on("window-ready", this.onWindowReady); + } + // The target actor already emitted a window-ready for the top document when instantiating. + // So fake one for the top document right away. + this.onWindowReady({ + window: this.targetActor.window, + isTopLevel: true, + }); + }, + + onWillNavigate({ + window, + isTopLevel, + newURI, + navigationStart, + isFrameSwitching, + }) { + // Ignore iframes + if (!isTopLevel) { + return; + } + + this.emit("will-navigate", { + time: navigationStart - WILL_NAVIGATE_TIME_SHIFT, + newURI, + isFrameSwitching, + }); + }, + + onWindowReady({ window, isTopLevel, isFrameSwitching }) { + // Ignore iframes + if (!isTopLevel) { + return; + } + + const time = window.performance.timing.navigationStart; + + this.emit("dom-loading", { + time, + isFrameSwitching, + }); + + const { readyState } = window.document; + if (readyState != "interactive" && readyState != "complete") { + // When EFT is enabled, we track this event via the WebProgressListener interface. + if (!this.targetActor.ignoreSubFrames) { + window.addEventListener( + "DOMContentLoaded", + e => this.onContentLoaded(e, isFrameSwitching), + { + once: true, + } + ); + } + } else { + this.onContentLoaded({ target: window.document }, isFrameSwitching); + } + if (readyState != "complete") { + // When EFT is enabled, we track the load event via the WebProgressListener interface. + if (!this.targetActor.ignoreSubFrames) { + window.addEventListener("load", e => this.onLoad(e, isFrameSwitching), { + once: true, + }); + } + } else { + this.onLoad({ target: window.document }, isFrameSwitching); + } + }, + + onContentLoaded(event, isFrameSwitching) { + if (this.destroyed) { + return; + } + // milliseconds since the UNIX epoch, when the parser finished its work + // on the main document, that is when its Document.readyState changes to + // 'interactive' and the corresponding readystatechange event is thrown + const window = event.target.defaultView; + const time = window.performance.timing.domInteractive; + this.emit("dom-interactive", { time, isFrameSwitching }); + }, + + onLoad(event, isFrameSwitching) { + if (this.destroyed) { + return; + } + // milliseconds since the UNIX epoch, when the parser finished its work + // on the main document, that is when its Document.readyState changes to + // 'complete' and the corresponding readystatechange event is thrown + const window = event.target.defaultView; + const time = window.performance.timing.domComplete; + this.emit("dom-complete", { + time, + isFrameSwitching, + hasNativeConsoleAPI: this.hasNativeConsoleAPI(window), + }); + }, + + onStateChange(progress, request, flag, status) { + progress.QueryInterface(Ci.nsIDocShell); + // Ignore destroyed, or progress for same-process iframes + if (progress.isBeingDestroyed() || progress != this.webProgress) { + return; + } + + const isStop = flag & Ci.nsIWebProgressListener.STATE_STOP; + const isDocument = flag & Ci.nsIWebProgressListener.STATE_IS_DOCUMENT; + const isWindow = flag & Ci.nsIWebProgressListener.STATE_IS_WINDOW; + const window = progress.DOMWindow; + if (isDocument && isStop) { + const time = window.performance.timing.domInteractive; + this.emit("dom-interactive", { time }); + } else if (isWindow && isStop) { + const time = window.performance.timing.domComplete; + this.emit("dom-complete", { + time, + hasNativeConsoleAPI: this.hasNativeConsoleAPI(window), + }); + } + }, + + /** + * Tells if the window.console object is native or overwritten by script in + * the page. + * + * @param nsIDOMWindow window + * The window object you want to check. + * @return boolean + * True if the window.console object is native, or false otherwise. + */ + hasNativeConsoleAPI(window) { + let isNative = false; + try { + // We are very explicitly examining the "console" property of + // the non-Xrayed object here. + const console = window.wrappedJSObject.console; + // In xpcshell tests, console ends up being undefined and XPCNativeWrapper + // crashes in debug builds. + if (console) { + isNative = new XPCNativeWrapper(console).IS_NATIVE_CONSOLE === true; + } + } catch (ex) { + // ignore + } + return isNative; + }, + + destroy() { + // Also use a flag to silent onContentLoad and onLoad events + this.destroyed = true; + this.targetActor.off("will-navigate", this.onWillNavigate); + this.targetActor.off("window-ready", this.onWindowReady); + if (this.webProgress) { + this.webProgress.removeProgressListener( + this, + Ci.nsIWebProgress.NOTIFY_STATE_WINDOW | + Ci.nsIWebProgress.NOTIFY_STATE_DOCUMENT + ); + } + }, + + QueryInterface: ChromeUtils.generateQI([ + "nsIWebProgressListener", + "nsISupportsWeakReference", + ]), +}; diff --git a/devtools/server/actors/webconsole/listeners/moz.build b/devtools/server/actors/webconsole/listeners/moz.build new file mode 100644 index 0000000000..089de4a087 --- /dev/null +++ b/devtools/server/actors/webconsole/listeners/moz.build @@ -0,0 +1,13 @@ +# -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*- +# vim: set filetype=python: +# 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/. + +DevToolsModules( + "console-api.js", + "console-file-activity.js", + "console-reflow.js", + "console-service.js", + "document-events.js", +) diff --git a/devtools/server/actors/webconsole/moz.build b/devtools/server/actors/webconsole/moz.build new file mode 100644 index 0000000000..58d8a70211 --- /dev/null +++ b/devtools/server/actors/webconsole/moz.build @@ -0,0 +1,20 @@ +# -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*- +# vim: set filetype=python: +# 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/. + +DIRS += [ + "commands", + "listeners", +] + +DevToolsModules( + "eager-ecma-allowlist.js", + "eager-function-allowlist.js", + "eval-with-debugger.js", + "utils.js", + "webidl-pure-allowlist.js", + "webidl-unsafe-getters-names.js", + "worker-listeners.js", +) diff --git a/devtools/server/actors/webconsole/utils.js b/devtools/server/actors/webconsole/utils.js new file mode 100644 index 0000000000..2834696944 --- /dev/null +++ b/devtools/server/actors/webconsole/utils.js @@ -0,0 +1,160 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const CONSOLE_WORKER_IDS = (exports.CONSOLE_WORKER_IDS = new Set([ + "SharedWorker", + "ServiceWorker", + "Worker", +])); + +var WebConsoleUtils = { + /** + * Given a message, return one of CONSOLE_WORKER_IDS if it matches + * one of those. + * + * @return string + */ + getWorkerType(message) { + const innerID = message?.innerID; + return CONSOLE_WORKER_IDS.has(innerID) ? innerID : null; + }, + + /** + * Gets the ID of the inner window of this DOM window. + * + * @param nsIDOMWindow window + * @return integer|null + * Inner ID for the given window, null if we can't access it. + */ + getInnerWindowId(window) { + // Might throw with SecurityError: Permission denied to access property + // "windowGlobalChild" on cross-origin object. + try { + return window.windowGlobalChild.innerWindowId; + } catch (e) { + return null; + } + }, + + /** + * Recursively gather a list of inner window ids given a + * top level window. + * + * @param nsIDOMWindow window + * @return Array + * list of inner window ids. + */ + getInnerWindowIDsForFrames(window) { + const innerWindowID = this.getInnerWindowId(window); + if (innerWindowID === null) { + return []; + } + + let ids = [innerWindowID]; + + if (window.frames) { + for (let i = 0; i < window.frames.length; i++) { + const frame = window.frames[i]; + ids = ids.concat(this.getInnerWindowIDsForFrames(frame)); + } + } + + return ids; + }, + + /** + * Create a grip for the given value. If the value is an object, + * an object wrapper will be created. + * + * @param mixed value + * The value you want to create a grip for, before sending it to the + * client. + * @param function objectWrapper + * If the value is an object then the objectWrapper function is + * invoked to give us an object grip. See this.getObjectGrip(). + * @return mixed + * The value grip. + */ + createValueGrip(value, objectWrapper) { + switch (typeof value) { + case "boolean": + return value; + case "string": + return objectWrapper(value); + case "number": + if (value === Infinity) { + return { type: "Infinity" }; + } else if (value === -Infinity) { + return { type: "-Infinity" }; + } else if (Number.isNaN(value)) { + return { type: "NaN" }; + } else if (!value && 1 / value === -Infinity) { + return { type: "-0" }; + } + return value; + case "undefined": + return { type: "undefined" }; + case "object": + if (value === null) { + return { type: "null" }; + } + // Fall through. + case "function": + case "record": + case "tuple": + return objectWrapper(value); + default: + console.error( + "Failed to provide a grip for value of " + typeof value + ": " + value + ); + return null; + } + }, + + /** + * Remove any frames in a stack that are above a debugger-triggered evaluation + * and will correspond with devtools server code, which we never want to show + * to the user. + * + * @param array stack + * An array of frames, with the topmost first, and each of which has a + * 'filename' property. + * @return array + * An array of stack frames with any devtools server frames removed. + * The original array is not modified. + */ + removeFramesAboveDebuggerEval(stack) { + const debuggerEvalFilename = "debugger eval code"; + + // Remove any frames for server code above the last debugger eval frame. + const evalIndex = stack.findIndex(({ filename }, idx, arr) => { + const nextFrame = arr[idx + 1]; + return ( + filename == debuggerEvalFilename && + (!nextFrame || nextFrame.filename !== debuggerEvalFilename) + ); + }); + if (evalIndex != -1) { + return stack.slice(0, evalIndex + 1); + } + + // In some cases (e.g. evaluated expression with SyntaxError), we might not have a + // "debugger eval code" frame but still have internal ones. If that's the case, we + // return null as the end user shouldn't see those frames. + if ( + stack.some( + ({ filename }) => + filename && filename.startsWith("resource://devtools/") + ) + ) { + return null; + } + + return stack; + }, +}; + +exports.WebConsoleUtils = WebConsoleUtils; diff --git a/devtools/server/actors/webconsole/webidl-pure-allowlist.js b/devtools/server/actors/webconsole/webidl-pure-allowlist.js new file mode 100644 index 0000000000..3db5a14da1 --- /dev/null +++ b/devtools/server/actors/webconsole/webidl-pure-allowlist.js @@ -0,0 +1,87 @@ +/* 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/. */ + +// This file is automatically generated by the GenerateDataFromWebIdls.py +// script. Do not modify it manually. +"use strict"; + +module.exports = { + DOMTokenList: { + prototype: ["item", "contains"], + }, + Document: { + prototype: [ + "getSelection", + "hasStorageAccess", + "getElementsByTagName", + "getElementsByTagNameNS", + "getElementsByClassName", + "getElementById", + "getElementsByName", + "querySelector", + "querySelectorAll", + "createNSResolver", + ], + }, + Element: { + prototype: [ + "getAttributeNames", + "getAttribute", + "getAttributeNS", + "hasAttribute", + "hasAttributeNS", + "hasAttributes", + "closest", + "matches", + "webkitMatchesSelector", + "getElementsByTagName", + "getElementsByTagNameNS", + "getElementsByClassName", + "mozMatchesSelector", + "querySelector", + "querySelectorAll", + "getAsFlexContainer", + "getGridFragments", + "hasGridFragments", + "getElementsWithGrid", + ], + }, + FormData: { + prototype: ["entries", "keys", "values"], + }, + Headers: { + prototype: ["entries", "keys", "values"], + }, + Node: { + prototype: [ + "getRootNode", + "hasChildNodes", + "isSameNode", + "isEqualNode", + "compareDocumentPosition", + "contains", + "lookupPrefix", + "lookupNamespaceURI", + "isDefaultNamespace", + ], + }, + Performance: { + prototype: ["now"], + }, + Range: { + prototype: [ + "isPointInRange", + "comparePoint", + "intersectsNode", + "getClientRects", + "getBoundingClientRect", + ], + }, + Selection: { + prototype: ["getRangeAt", "containsNode"], + }, + URLSearchParams: { + prototype: ["entries", "keys", "values"], + }, +}; diff --git a/devtools/server/actors/webconsole/webidl-unsafe-getters-names.js b/devtools/server/actors/webconsole/webidl-unsafe-getters-names.js new file mode 100644 index 0000000000..9e4faf04c2 --- /dev/null +++ b/devtools/server/actors/webconsole/webidl-unsafe-getters-names.js @@ -0,0 +1,20 @@ +/* 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/. */ + +// This file is automatically generated by the GenerateDataFromWebIdls.py +// script. Do not modify it manually. +"use strict"; + +module.exports = [ + "InstallTrigger", + "farthestViewportElement", + "mozInputSource", + "mozPressure", + "nearestViewportElement", + "onmouseenter", + "onmouseleave", + "onmozfullscreenchange", + "onmozfullscreenerror", + "onreadystatechange", +]; diff --git a/devtools/server/actors/webconsole/worker-listeners.js b/devtools/server/actors/webconsole/worker-listeners.js new file mode 100644 index 0000000000..6861c6da62 --- /dev/null +++ b/devtools/server/actors/webconsole/worker-listeners.js @@ -0,0 +1,35 @@ +/* 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/. */ + +/* global setConsoleEventHandler, retrieveConsoleEvents */ + +"use strict"; + +// This file is loaded on the server side for worker debugging. +// Since the server is running in the worker thread, it doesn't +// have access to Services / Components but the listeners defined here +// are imported by webconsole-utils and used for the webconsole actor. +class ConsoleAPIListener { + constructor(window, listener, consoleID) { + this.window = window; + this.listener = listener; + this.consoleID = consoleID; + this.observe = this.observe.bind(this); + } + + init() { + setConsoleEventHandler(this.observe); + } + destroy() { + setConsoleEventHandler(null); + } + observe(message) { + this.listener(message.wrappedJSObject); + } + getCachedMessages() { + return retrieveConsoleEvents(); + } +} + +exports.ConsoleAPIListener = ConsoleAPIListener; diff --git a/devtools/server/actors/worker/moz.build b/devtools/server/actors/worker/moz.build new file mode 100644 index 0000000000..84e606db58 --- /dev/null +++ b/devtools/server/actors/worker/moz.build @@ -0,0 +1,13 @@ +# -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*- +# vim: set filetype=python: +# 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/. + +DevToolsModules( + "push-subscription.js", + "service-worker-registration-list.js", + "service-worker-registration.js", + "service-worker.js", + "worker-descriptor-actor-list.js", +) diff --git a/devtools/server/actors/worker/push-subscription.js b/devtools/server/actors/worker/push-subscription.js new file mode 100644 index 0000000000..37e6be7fb4 --- /dev/null +++ b/devtools/server/actors/worker/push-subscription.js @@ -0,0 +1,38 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const { Actor } = require("resource://devtools/shared/protocol.js"); +const { + pushSubscriptionSpec, +} = require("resource://devtools/shared/specs/worker/push-subscription.js"); + +class PushSubscriptionActor extends Actor { + constructor(conn, subscription) { + super(conn, pushSubscriptionSpec); + this._subscription = subscription; + } + + form() { + const subscription = this._subscription; + + // Note: subscription.pushCount & subscription.lastPush are no longer + // returned here because the corresponding getters throw on GeckoView. + // Since they were not used in DevTools they were removed from the + // actor in Bug 1637687. If they are reintroduced, make sure to provide + // meaningful fallback values when debugging a GeckoView runtime. + return { + actor: this.actorID, + endpoint: subscription.endpoint, + quota: subscription.quota, + }; + } + + destroy() { + this._subscription = null; + super.destroy(); + } +} +exports.PushSubscriptionActor = PushSubscriptionActor; diff --git a/devtools/server/actors/worker/service-worker-registration-list.js b/devtools/server/actors/worker/service-worker-registration-list.js new file mode 100644 index 0000000000..9821108faf --- /dev/null +++ b/devtools/server/actors/worker/service-worker-registration-list.js @@ -0,0 +1,114 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const { XPCOMUtils } = ChromeUtils.importESModule( + "resource://gre/modules/XPCOMUtils.sys.mjs" +); +loader.lazyRequireGetter( + this, + "ServiceWorkerRegistrationActor", + "resource://devtools/server/actors/worker/service-worker-registration.js", + true +); + +XPCOMUtils.defineLazyServiceGetter( + this, + "swm", + "@mozilla.org/serviceworkers/manager;1", + "nsIServiceWorkerManager" +); + +class ServiceWorkerRegistrationActorList { + constructor(conn) { + this._conn = conn; + this._actors = new Map(); + this._onListChanged = null; + this._mustNotify = false; + this.onRegister = this.onRegister.bind(this); + this.onUnregister = this.onUnregister.bind(this); + } + + getList() { + // Create a set of registrations. + const registrations = new Set(); + const array = swm.getAllRegistrations(); + for (let index = 0; index < array.length; ++index) { + registrations.add( + array.queryElementAt(index, Ci.nsIServiceWorkerRegistrationInfo) + ); + } + + // Delete each actor for which we don't have a registration. + for (const [registration] of this._actors) { + if (!registrations.has(registration)) { + this._actors.delete(registration); + } + } + + // Create an actor for each registration for which we don't have one. + for (const registration of registrations) { + if (!this._actors.has(registration)) { + this._actors.set( + registration, + new ServiceWorkerRegistrationActor(this._conn, registration) + ); + } + } + + if (!this._mustNotify) { + if (this._onListChanged !== null) { + swm.addListener(this); + } + this._mustNotify = true; + } + + const actors = []; + for (const [, actor] of this._actors) { + actors.push(actor); + } + + return Promise.resolve(actors); + } + + get onListchanged() { + return this._onListchanged; + } + + set onListChanged(onListChanged) { + if (typeof onListChanged !== "function" && onListChanged !== null) { + throw new Error("onListChanged must be either a function or null."); + } + + if (this._mustNotify) { + if (this._onListChanged === null && onListChanged !== null) { + swm.addListener(this); + } + if (this._onListChanged !== null && onListChanged === null) { + swm.removeListener(this); + } + } + this._onListChanged = onListChanged; + } + + _notifyListChanged() { + this._onListChanged(); + + if (this._onListChanged !== null) { + swm.removeListener(this); + } + this._mustNotify = false; + } + + onRegister(registration) { + this._notifyListChanged(); + } + + onUnregister(registration) { + this._notifyListChanged(); + } +} + +exports.ServiceWorkerRegistrationActorList = ServiceWorkerRegistrationActorList; diff --git a/devtools/server/actors/worker/service-worker-registration.js b/devtools/server/actors/worker/service-worker-registration.js new file mode 100644 index 0000000000..1e5e80ae8b --- /dev/null +++ b/devtools/server/actors/worker/service-worker-registration.js @@ -0,0 +1,264 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const { Actor } = require("resource://devtools/shared/protocol.js"); +const { + serviceWorkerRegistrationSpec, +} = require("resource://devtools/shared/specs/worker/service-worker-registration.js"); + +const { XPCOMUtils } = ChromeUtils.importESModule( + "resource://gre/modules/XPCOMUtils.sys.mjs" +); +const { + PushSubscriptionActor, +} = require("resource://devtools/server/actors/worker/push-subscription.js"); +const { + ServiceWorkerActor, +} = require("resource://devtools/server/actors/worker/service-worker.js"); + +XPCOMUtils.defineLazyServiceGetter( + this, + "swm", + "@mozilla.org/serviceworkers/manager;1", + "nsIServiceWorkerManager" +); + +XPCOMUtils.defineLazyServiceGetter( + this, + "PushService", + "@mozilla.org/push/Service;1", + "nsIPushService" +); + +class ServiceWorkerRegistrationActor extends Actor { + /** + * Create the ServiceWorkerRegistrationActor + * @param DevToolsServerConnection conn + * The server connection. + * @param ServiceWorkerRegistrationInfo registration + * The registration's information. + */ + constructor(conn, registration) { + super(conn, serviceWorkerRegistrationSpec); + this._registration = registration; + this._pushSubscriptionActor = null; + + // A flag to know if preventShutdown has been called and we should + // try to allow the shutdown of the SW when the actor is destroyed + this._preventedShutdown = false; + + this._registration.addListener(this); + + this._createServiceWorkerActors(); + + Services.obs.addObserver(this, PushService.subscriptionModifiedTopic); + } + + onChange() { + this._destroyServiceWorkerActors(); + this._createServiceWorkerActors(); + this.emit("registration-changed"); + } + + form() { + const registration = this._registration; + const evaluatingWorker = this._evaluatingWorker.form(); + const installingWorker = this._installingWorker.form(); + const waitingWorker = this._waitingWorker.form(); + const activeWorker = this._activeWorker.form(); + + const newestWorker = + activeWorker || waitingWorker || installingWorker || evaluatingWorker; + + return { + actor: this.actorID, + scope: registration.scope, + url: registration.scriptSpec, + evaluatingWorker, + installingWorker, + waitingWorker, + activeWorker, + fetch: newestWorker?.fetch, + // Check if we have an active worker + active: !!activeWorker, + lastUpdateTime: registration.lastUpdateTime, + traits: {}, + }; + } + + destroy() { + super.destroy(); + + // Ensure resuming the service worker in case the connection drops + if (this._registration.activeWorker && this._preventedShutdown) { + this.allowShutdown(); + } + + Services.obs.removeObserver(this, PushService.subscriptionModifiedTopic); + this._registration.removeListener(this); + this._registration = null; + if (this._pushSubscriptionActor) { + this._pushSubscriptionActor.destroy(); + } + this._pushSubscriptionActor = null; + + this._destroyServiceWorkerActors(); + + this._evaluatingWorker = null; + this._installingWorker = null; + this._waitingWorker = null; + this._activeWorker = null; + } + + /** + * Standard observer interface to listen to push messages and changes. + */ + observe(subject, topic, data) { + const scope = this._registration.scope; + if (data !== scope) { + // This event doesn't concern us, pretend nothing happened. + return; + } + switch (topic) { + case PushService.subscriptionModifiedTopic: + if (this._pushSubscriptionActor) { + this._pushSubscriptionActor.destroy(); + this._pushSubscriptionActor = null; + } + this.emit("push-subscription-modified"); + break; + } + } + + start() { + const { activeWorker } = this._registration; + + // TODO: don't return "started" if there's no active worker. + if (activeWorker) { + // This starts up the Service Worker if it's not already running. + // Note that the Service Workers exist in content processes but are + // managed from the parent process. This is why we call `attachDebugger` + // here (in the parent process) instead of in a process script. + activeWorker.attachDebugger(); + activeWorker.detachDebugger(); + } + + return { type: "started" }; + } + + unregister() { + const { principal, scope } = this._registration; + const unregisterCallback = { + unregisterSucceeded() {}, + unregisterFailed() { + console.error("Failed to unregister the service worker for " + scope); + }, + QueryInterface: ChromeUtils.generateQI([ + "nsIServiceWorkerUnregisterCallback", + ]), + }; + swm.propagateUnregister(principal, unregisterCallback, scope); + + return { type: "unregistered" }; + } + + push() { + const { principal, scope } = this._registration; + const originAttributes = ChromeUtils.originAttributesToSuffix( + principal.originAttributes + ); + swm.sendPushEvent(originAttributes, scope); + } + + /** + * Prevent the current active worker to shutdown after the idle timeout. + */ + preventShutdown() { + if (!this._registration.activeWorker) { + throw new Error( + "ServiceWorkerRegistrationActor.preventShutdown could not find " + + "activeWorker in parent-intercept mode" + ); + } + + // attachDebugger has to be called from the parent process in parent-intercept mode. + this._registration.activeWorker.attachDebugger(); + this._preventedShutdown = true; + } + + /** + * Allow the current active worker to shut down again. + */ + allowShutdown() { + if (!this._registration.activeWorker) { + throw new Error( + "ServiceWorkerRegistrationActor.allowShutdown could not find " + + "activeWorker in parent-intercept mode" + ); + } + + this._registration.activeWorker.detachDebugger(); + this._preventedShutdown = false; + } + + getPushSubscription() { + const registration = this._registration; + let pushSubscriptionActor = this._pushSubscriptionActor; + if (pushSubscriptionActor) { + return Promise.resolve(pushSubscriptionActor); + } + return new Promise((resolve, reject) => { + PushService.getSubscription( + registration.scope, + registration.principal, + (result, subscription) => { + if (!subscription) { + resolve(null); + return; + } + pushSubscriptionActor = new PushSubscriptionActor( + this.conn, + subscription + ); + this._pushSubscriptionActor = pushSubscriptionActor; + resolve(pushSubscriptionActor); + } + ); + }); + } + + _destroyServiceWorkerActors() { + this._evaluatingWorker.destroy(); + this._installingWorker.destroy(); + this._waitingWorker.destroy(); + this._activeWorker.destroy(); + } + + _createServiceWorkerActors() { + const { evaluatingWorker, installingWorker, waitingWorker, activeWorker } = + this._registration; + + this._evaluatingWorker = new ServiceWorkerActor( + this.conn, + evaluatingWorker + ); + this._installingWorker = new ServiceWorkerActor( + this.conn, + installingWorker + ); + this._waitingWorker = new ServiceWorkerActor(this.conn, waitingWorker); + this._activeWorker = new ServiceWorkerActor(this.conn, activeWorker); + + // Add the ServiceWorker actors as children of this ServiceWorkerRegistration actor, + // assigning them valid actorIDs. + this.manage(this._evaluatingWorker); + this.manage(this._installingWorker); + this.manage(this._waitingWorker); + this.manage(this._activeWorker); + } +} + +exports.ServiceWorkerRegistrationActor = ServiceWorkerRegistrationActor; diff --git a/devtools/server/actors/worker/service-worker.js b/devtools/server/actors/worker/service-worker.js new file mode 100644 index 0000000000..9185e73e17 --- /dev/null +++ b/devtools/server/actors/worker/service-worker.js @@ -0,0 +1,44 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const { Actor } = require("resource://devtools/shared/protocol.js"); +const { + serviceWorkerSpec, +} = require("resource://devtools/shared/specs/worker/service-worker.js"); + +class ServiceWorkerActor extends Actor { + constructor(conn, worker) { + super(conn, serviceWorkerSpec); + this._worker = worker; + } + + form() { + if (!this._worker) { + return null; + } + + // handlesFetchEvents is not available if the worker's main script is in the + // evaluating state. + const isEvaluating = + this._worker.state == Ci.nsIServiceWorkerInfo.STATE_PARSED; + const fetch = isEvaluating ? undefined : this._worker.handlesFetchEvents; + + return { + actor: this.actorID, + url: this._worker.scriptSpec, + state: this._worker.state, + fetch, + id: this._worker.id, + }; + } + + destroy() { + super.destroy(); + this._worker = null; + } +} + +exports.ServiceWorkerActor = ServiceWorkerActor; diff --git a/devtools/server/actors/worker/worker-descriptor-actor-list.js b/devtools/server/actors/worker/worker-descriptor-actor-list.js new file mode 100644 index 0000000000..10bdb5d5d3 --- /dev/null +++ b/devtools/server/actors/worker/worker-descriptor-actor-list.js @@ -0,0 +1,213 @@ +/* This Source Code Form is subject to the terms of the Mozilla Public + * License, v. 2.0. If a copy of the MPL was not distributed with this + * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ + +"use strict"; + +const { XPCOMUtils } = ChromeUtils.importESModule( + "resource://gre/modules/XPCOMUtils.sys.mjs" +); +loader.lazyRequireGetter( + this, + "WorkerDescriptorActor", + "resource://devtools/server/actors/descriptors/worker.js", + true +); + +XPCOMUtils.defineLazyServiceGetter( + this, + "wdm", + "@mozilla.org/dom/workers/workerdebuggermanager;1", + "nsIWorkerDebuggerManager" +); + +function matchWorkerDebugger(dbg, options) { + if ("type" in options && dbg.type !== options.type) { + return false; + } + if ("window" in options) { + let window = dbg.window; + while (window !== null && window.parent !== window) { + window = window.parent; + } + + if (window !== options.window) { + return false; + } + } + + return true; +} + +function matchServiceWorker(dbg, origin) { + return ( + dbg.type == Ci.nsIWorkerDebugger.TYPE_SERVICE && + new URL(dbg.url).origin == origin + ); +} + +// When a new worker appears, in some cases (i.e. the debugger is running) we +// want it to pause during registration until a later time (i.e. the debugger +// finishes attaching to the worker). This is an optional WorkderDebuggerManager +// listener that can be installed in addition to the WorkerDescriptorActorList +// listener. It always listens to new workers and pauses any matching filters +// which have been set on it. +// +// Two kinds of filters are supported: +// +// setPauseMatching(true) will pause all workers which match the options strcut +// passed in on creation. +// +// setPauseServiceWorkers(origin) will pause all service workers which have the +// specified origin. +// +// FIXME Bug 1601279 separate WorkerPauser from WorkerDescriptorActorList and give +// it a more consistent interface. +class WorkerPauser { + constructor(options) { + this._options = options; + this._pauseMatching = null; + this._pauseServiceWorkerOrigin = null; + + this.onRegister = this._onRegister.bind(this); + this.onUnregister = () => {}; + + wdm.addListener(this); + } + + destroy() { + wdm.removeListener(this); + } + + _onRegister(dbg) { + if ( + (this._pauseMatching && matchWorkerDebugger(dbg, this._options)) || + (this._pauseServiceWorkerOrigin && + matchServiceWorker(dbg, this._pauseServiceWorkerOrigin)) + ) { + // Prevent the debuggee from executing in this worker until the debugger + // has finished attaching to it. + dbg.setDebuggerReady(false); + } + } + + setPauseMatching(shouldPause) { + this._pauseMatching = shouldPause; + } + + setPauseServiceWorkers(origin) { + this._pauseServiceWorkerOrigin = origin; + } +} + +class WorkerDescriptorActorList { + constructor(conn, options) { + this._conn = conn; + this._options = options; + this._actors = new Map(); + this._onListChanged = null; + this._workerPauser = null; + this._mustNotify = false; + this.onRegister = this.onRegister.bind(this); + this.onUnregister = this.onUnregister.bind(this); + } + + destroy() { + this.onListChanged = null; + if (this._workerPauser) { + this._workerPauser.destroy(); + this._workerPauser = null; + } + } + + getList() { + // Create a set of debuggers. + const dbgs = new Set(); + for (const dbg of wdm.getWorkerDebuggerEnumerator()) { + if (matchWorkerDebugger(dbg, this._options)) { + dbgs.add(dbg); + } + } + + // Delete each actor for which we don't have a debugger. + for (const [dbg] of this._actors) { + if (!dbgs.has(dbg)) { + this._actors.delete(dbg); + } + } + + // Create an actor for each debugger for which we don't have one. + for (const dbg of dbgs) { + if (!this._actors.has(dbg)) { + this._actors.set(dbg, new WorkerDescriptorActor(this._conn, dbg)); + } + } + + const actors = []; + for (const [, actor] of this._actors) { + actors.push(actor); + } + + if (!this._mustNotify) { + if (this._onListChanged !== null) { + wdm.addListener(this); + } + this._mustNotify = true; + } + + return Promise.resolve(actors); + } + + get onListChanged() { + return this._onListChanged; + } + + set onListChanged(onListChanged) { + if (typeof onListChanged !== "function" && onListChanged !== null) { + throw new Error("onListChanged must be either a function or null."); + } + if (onListChanged === this._onListChanged) { + return; + } + + if (this._mustNotify) { + if (this._onListChanged === null && onListChanged !== null) { + wdm.addListener(this); + } + if (this._onListChanged !== null && onListChanged === null) { + wdm.removeListener(this); + } + } + this._onListChanged = onListChanged; + } + + _notifyListChanged() { + this._onListChanged(); + + if (this._onListChanged !== null) { + wdm.removeListener(this); + } + this._mustNotify = false; + } + + onRegister(dbg) { + if (matchWorkerDebugger(dbg, this._options)) { + this._notifyListChanged(); + } + } + + onUnregister(dbg) { + if (matchWorkerDebugger(dbg, this._options)) { + this._notifyListChanged(); + } + } + + get workerPauser() { + if (!this._workerPauser) { + this._workerPauser = new WorkerPauser(this._options); + } + return this._workerPauser; + } +} + +exports.WorkerDescriptorActorList = WorkerDescriptorActorList; |