Bug 1446572 - Record node inspection selectors starting with root. r=pbro
authorJ. Ryan Stinnett <jryans@gmail.com>
Wed, 28 Mar 2018 14:30:12 -0500
changeset 410621 eac0947f9e416afa766bb7e45a5af9a0c8c8be36
parent 410620 729748e603e5614b5d1bf674aa4baeedbc0ff792
child 410622 3fb23173dcbfa4d1221c41074f3a7c722c6fa9ac
push id33733
push useraciure@mozilla.com
push dateThu, 29 Mar 2018 22:05:29 +0000
treeherdermozilla-central@7ca58ce09779 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerspbro
bugs1446572
milestone61.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
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
browser/modules/ContextMenu.jsm
devtools/client/framework/devtools.js
devtools/startup/DevToolsShim.jsm
--- 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");
       }