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

Issue #3

devtools/server/actors/inspector.js

@@ -625,6 +625,18 @@ var NodeActor = exports.NodeActor = protocol.ActorClassWithSpec(nodeSpec, {
     return CssLogic.findCssSelector(this.rawNode);
   },
 
+  /**
+   * 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.
    */

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

devtools/server/css-logic.js

@@ -792,6 +792,55 @@ CssLogic.findCssSelector = function (ele) {
   return selector;
 };
 
+/**
+ * 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.
  *