Add a "copy full CSS path" option to the inspector's menu

Issue #3

3 files changed, 63 insertions, 0 deletions

diff --git a/devtools/server/actors/inspector.js b/devtools/server/actors/inspector.js
index 20a227a40..883809b6c 100644
--- a/devtools/server/actors/inspector.js
+++ b/devtools/server/actors/inspector.js
@@ -626,6 +626,18 @@ var NodeActor = exports.NodeActor = protocol.ActorClassWithSpec(nodeSpec, {
   },
 
   /**
+   * 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: function () {
+    if (Cu.isDeadWrapper(this.rawNode)) {
+      return "";
+    }
+    return CssLogic.getCssPath(this.rawNode);
+  },
+
+  /**
    * Scroll the selected node into view.
    */
   scrollIntoView: function () {
diff --git a/devtools/server/actors/root.js b/devtools/server/actors/root.js
index b6f8c0ee4..a5df148c2 100644
--- a/devtools/server/actors/root.js
+++ b/devtools/server/actors/root.js
@@ -145,6 +145,8 @@ RootActor.prototype = {
     addNewRule: true,
     // Whether the dom node actor implements the getUniqueSelector method
     getUniqueSelector: true,
+    // Whether the dom node actor implements the getCssPath method
+    getCssPath: true,
     // Whether the director scripts are supported
     directorScripts: true,
     // Whether the debugger server supports
diff --git a/devtools/server/css-logic.js b/devtools/server/css-logic.js
index f632871e1..c4a073635 100644
--- a/devtools/server/css-logic.js
+++ b/devtools/server/css-logic.js
@@ -793,6 +793,55 @@ CssLogic.findCssSelector = function (ele) {
 };
 
 /**
+ * Get the full CSS path for a given element.
+ * @returns a string that can be used as a CSS selector for the element. It might not
+ * match the element uniquely. It does however, represent the full path from the root
+ * node to the element.
+ */
+CssLogic.getCssPath = function (ele) {
+  ele = getRootBindingParent(ele);
+  const document = ele.ownerDocument;
+  if (!document || !document.contains(ele)) {
+    throw new Error("getCssPath received element not inside document");
+  }
+
+  const getElementSelector = element => {
+    if (!element.localName) {
+      return "";
+    }
+
+    let label = element.nodeName == element.nodeName.toUpperCase()
+                ? element.localName.toLowerCase()
+                : element.localName;
+
+    if (element.id) {
+      label += "#" + element.id;
+    }
+
+    if (element.classList) {
+      for (let cl of element.classList) {
+        label += "." + cl;
+      }
+    }
+
+    return label;
+  };
+
+  let paths = [];
+
+  while (ele) {
+    if (!ele || ele.nodeType !== Node.ELEMENT_NODE) {
+      break;
+    }
+
+    paths.splice(0, 0, getElementSelector(ele));
+    ele = ele.parentNode;
+  }
+
+  return paths.length ? paths.join(" ") : "";
+}
+
+/**
  * A safe way to access cached bits of information about a stylesheet.
  *
  * @constructor