From 509bfd2c211fbc8ec5212b595c3adf4d73620c3b Mon Sep 17 00:00:00 2001 From: "J. Ryan Stinnett" Date: Wed, 28 Mar 2018 14:30:12 -0500 Subject: [PATCH] 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 --HG-- extra : rebase_source : b88b1289aaa768a7a852b433cd07ed4cf167c51c --- browser/modules/ContextMenu.jsm | 17 +++++++++++------ devtools/client/framework/devtools.js | 5 +++-- devtools/startup/DevToolsShim.jsm | 3 ++- 3 files changed, 16 insertions(+), 9 deletions(-) diff --git a/browser/modules/ContextMenu.jsm b/browser/modules/ContextMenu.jsm index 35d69ea237eb..b940384b3899 100644 --- a/browser/modules/ContextMenu.jsm +++ b/browser/modules/ContextMenu.jsm @@ -460,22 +460,27 @@ class ContextMenu { } /** - * 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; } diff --git a/devtools/client/framework/devtools.js b/devtools/client/framework/devtools.js index bff0f1b3aeb1..1e0fd169c9de 100644 --- a/devtools/client/framework/devtools.js +++ b/devtools/client/framework/devtools.js @@ -611,7 +611,8 @@ DevTools.prototype = { * @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. @@ -630,7 +631,7 @@ DevTools.prototype = { // Evaluate the cross iframes query selectors async function querySelectors(nodeFront) { - let selector = nodeSelectors.pop(); + let selector = nodeSelectors.shift(); if (!selector) { return nodeFront; } diff --git a/devtools/startup/DevToolsShim.jsm b/devtools/startup/DevToolsShim.jsm index a6b1caa55dbc..ef44e623e531 100644 --- a/devtools/startup/DevToolsShim.jsm +++ b/devtools/startup/DevToolsShim.jsm @@ -166,7 +166,8 @@ this.DevToolsShim = { * @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. */