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

@@ -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;
     }
 

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;
       }

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.
    */