Bug 1446572 - Record node inspection selectors starting with root. r=pbro
Reverse the array of node inspection selectors, so that are a bit more naturally
human-readable by starting from the root document and moving inwards.
MozReview-Commit-ID: BYXryJg7iR9
--- a/browser/modules/ContextMenu.jsm
+++ b/browser/modules/ContextMenu.jsm
@@ -455,32 +455,37 @@ class ContextMenu {
if (!request) {
return true;
}
return false;
}
/**
- * Retrieve the array of CSS selectors corresponding to the provided node. The first item
- * of the array is the selector of the node in its owner document. Additional items are
- * used if the node is inside a frame, each representing the CSS selector for finding the
- * frame element in its parent document.
+ * Retrieve the array of CSS selectors corresponding to the provided node.
+ *
+ * The selectors are ordered starting with the root document and ending with the deepest
+ * nested frame. Additional items are used if the node is inside a frame, each
+ * representing the CSS selector for finding the frame element in its parent document.
*
* This format is expected by DevTools in order to handle the Inspect Node context menu
* item.
*
* @param {aNode}
* The node for which the CSS selectors should be computed
- * @return {Array} array of css selectors (strings).
+ * @return {Array}
+ * An array of CSS selectors to find the target node. Several selectors can be
+ * needed if the element is nested in frames and not directly in the root
+ * document. The selectors are ordered starting with the root document and
+ * ending with the deepest nested frame.
*/
_getNodeSelectors(aNode) {
let selectors = [];
while (aNode) {
- selectors.push(findCssSelector(aNode));
+ selectors.unshift(findCssSelector(aNode));
aNode = aNode.ownerGlobal.frameElement;
}
return selectors;
}
_handleContentContextMenu(aEvent) {
let defaultPrevented = aEvent.defaultPrevented;
--- a/devtools/client/framework/devtools.js
+++ b/devtools/client/framework/devtools.js
@@ -606,17 +606,18 @@ DevTools.prototype = {
/**
* Called from the DevToolsShim, used by nsContextMenu.js.
*
* @param {XULTab} tab
* The browser tab on which inspect node was used.
* @param {Array} selectors
* An array of CSS selectors to find the target node. Several selectors can be
* needed if the element is nested in frames and not directly in the root
- * document.
+ * document. The selectors are ordered starting with the root document and
+ * ending with the deepest nested frame.
* @param {Number} startTime
* Optional, indicates the time at which the user event related to this node
* inspection started. This is a `performance.now()` timing.
* @return {Promise} a promise that resolves when the node is selected in the inspector
* markup view.
*/
async inspectNode(tab, nodeSelectors, startTime) {
let target = TargetFactory.forTab(tab);
@@ -625,17 +626,17 @@ DevTools.prototype = {
let inspector = toolbox.getCurrentPanel();
// new-node-front tells us when the node has been selected, whether the
// browser is remote or not.
let onNewNode = inspector.selection.once("new-node-front");
// Evaluate the cross iframes query selectors
async function querySelectors(nodeFront) {
- let selector = nodeSelectors.pop();
+ let selector = nodeSelectors.shift();
if (!selector) {
return nodeFront;
}
nodeFront = await inspector.walker.querySelector(nodeFront, selector);
if (nodeSelectors.length > 0) {
let { nodes } = await inspector.walker.children(nodeFront);
// This is the NodeFront for the document node inside the iframe
nodeFront = nodes[0];
--- a/devtools/startup/DevToolsShim.jsm
+++ b/devtools/startup/DevToolsShim.jsm
@@ -161,17 +161,18 @@ this.DevToolsShim = {
* Called from nsContextMenu.js in mozilla-central when using the Inspect Element
* context menu item.
*
* @param {XULTab} tab
* The browser tab on which inspect node was used.
* @param {Array} selectors
* An array of CSS selectors to find the target node. Several selectors can be
* needed if the element is nested in frames and not directly in the root
- * document.
+ * document. The selectors are ordered starting with the root document and
+ * ending with the deepest nested frame.
* @return {Promise} a promise that resolves when the node is selected in the inspector
* markup view or that resolves immediately if DevTools are not enabled.
*/
inspectNode: function(tab, selectors) {
if (!this.isEnabled()) {
if (!this.isDisabledByPolicy()) {
DevtoolsStartup.openInstallPage("ContextMenu");
}