summaryrefslogtreecommitdiffstats
path: root/devtools/server
diff options
context:
space:
mode:
authorjanekptacijarabaci <janekptacijarabaci@seznam.cz>2018-02-02 20:42:28 +0100
committerjanekptacijarabaci <janekptacijarabaci@seznam.cz>2018-02-02 20:42:28 +0100
commitf34094bae31e216228d5c2da2f2461d03df38302 (patch)
treebe78d0059fafcf0bfc451b9add9a0dbd175a4a85 /devtools/server
parent9627f18cebab38cdfe45592d83371ee7bbc62cfa (diff)
downloadUXP-f34094bae31e216228d5c2da2f2461d03df38302.tar
UXP-f34094bae31e216228d5c2da2f2461d03df38302.tar.gz
UXP-f34094bae31e216228d5c2da2f2461d03df38302.tar.lz
UXP-f34094bae31e216228d5c2da2f2461d03df38302.tar.xz
UXP-f34094bae31e216228d5c2da2f2461d03df38302.zip
Add a "copy full CSS path" option to the inspector's menu
Issue #3
Diffstat (limited to 'devtools/server')
-rw-r--r--devtools/server/actors/inspector.js12
-rw-r--r--devtools/server/actors/root.js2
-rw-r--r--devtools/server/css-logic.js49
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