diff --git a/devtools/client/inspector/inspector.js b/devtools/client/inspector/inspector.js index c056c213f3..d0458fc1f7 100644 --- a/devtools/client/inspector/inspector.js +++ b/devtools/client/inspector/inspector.js @@ -169,6 +169,10 @@ Inspector.prototype = { return this._target.client.traits.getUniqueSelector; }, + get canGetCssPath() { + return this._target.client.traits.getCssPath; + }, + get canGetUsedFontFaces() { return this._target.client.traits.getUsedFontFaces; }, @@ -1073,6 +1077,15 @@ Inspector.prototype = { hidden: !this.canGetUniqueSelector, click: () => this.copyUniqueSelector(), })); + copySubmenu.append(new MenuItem({ + id: "node-menu-copycsspath", + label: INSPECTOR_L10N.getStr("inspectorCopyCSSPath.label"), + accesskey: + INSPECTOR_L10N.getStr("inspectorCopyCSSPath.accesskey"), + disabled: !isSelectionElement, + hidden: !this.canGetCssPath, + click: () => this.copyCssPath(), + })); copySubmenu.append(new MenuItem({ id: "node-menu-copyimagedatauri", label: INSPECTOR_L10N.getStr("inspectorImageDataUri.label"), @@ -1677,9 +1690,24 @@ Inspector.prototype = { return; } - this.selection.nodeFront.getUniqueSelector().then((selector) => { + this.telemetry.toolOpened("copyuniquecssselector"); + this.selection.nodeFront.getUniqueSelector().then(selector => { clipboardHelper.copyString(selector); - }).then(null, console.error); + }).catch(e => console.error); + }, + + /** + * Copy the full CSS Path of the selected Node to the clipboard. + */ + copyCssPath: function () { + if (!this.selection.isNode()) { + return; + } + + this.telemetry.toolOpened("copyfullcssselector"); + this.selection.nodeFront.getCssPath().then(path => { + clipboardHelper.copyString(path); + }).catch(e => console.error); }, /** diff --git a/devtools/client/inspector/test/browser_inspector_menu-01-sensitivity.js b/devtools/client/inspector/test/browser_inspector_menu-01-sensitivity.js index 59dbbbcc0e..052e9da68c 100644 --- a/devtools/client/inspector/test/browser_inspector_menu-01-sensitivity.js +++ b/devtools/client/inspector/test/browser_inspector_menu-01-sensitivity.js @@ -26,6 +26,7 @@ const ALL_MENU_ITEMS = [ "node-menu-copyinner", "node-menu-copyouter", "node-menu-copyuniqueselector", + "node-menu-copycsspath", "node-menu-copyimagedatauri", "node-menu-delete", "node-menu-pseudo-hover", diff --git a/devtools/client/inspector/test/browser_inspector_menu-02-copy-items.js b/devtools/client/inspector/test/browser_inspector_menu-02-copy-items.js index 0c96e9bbea..57a5dbaa08 100644 --- a/devtools/client/inspector/test/browser_inspector_menu-02-copy-items.js +++ b/devtools/client/inspector/test/browser_inspector_menu-02-copy-items.js @@ -25,6 +25,12 @@ const COPY_ITEMS_TEST_DATA = [ selector: "[data-id=\"copy\"]", text: "body > div:nth-child(1) > p:nth-child(2)", }, + { + desc: "copy css path", + id: "node-menu-copycsspath", + selector: "[data-id=\"copy\"]", + text: "html body div p", + }, { desc: "copy image data uri", id: "node-menu-copyimagedatauri", diff --git a/devtools/client/locales/en-US/inspector.properties b/devtools/client/locales/en-US/inspector.properties index 4f48296787..b6f3e072b6 100644 --- a/devtools/client/locales/en-US/inspector.properties +++ b/devtools/client/locales/en-US/inspector.properties @@ -154,6 +154,12 @@ inspectorCopyOuterHTML.accesskey=O inspectorCopyCSSSelector.label=CSS Selector inspectorCopyCSSSelector.accesskey=S +# LOCALIZATION NOTE (inspectorCopyCSSPath.label): This is the label +# shown in the inspector contextual-menu for the item that lets users copy +# the full CSS path of the current node +inspectorCopyCSSPath.label=CSS Path +inspectorCopyCSSPath.accesskey=P + # LOCALIZATION NOTE (inspectorPasteOuterHTML.label): This is the label shown # in the inspector contextual-menu for the item that lets users paste outer # HTML in the current node diff --git a/devtools/client/shared/telemetry.js b/devtools/client/shared/telemetry.js index 64a2995812..38a21cef6f 100644 --- a/devtools/client/shared/telemetry.js +++ b/devtools/client/shared/telemetry.js @@ -163,6 +163,12 @@ Telemetry.prototype = { toolbareyedropper: { histogram: "DEVTOOLS_TOOLBAR_EYEDROPPER_OPENED_COUNT", }, + copyuniquecssselector: { + histogram: "DEVTOOLS_COPY_UNIQUE_CSS_SELECTOR_OPENED_COUNT", + }, + copyfullcssselector: { + histogram: "DEVTOOLS_COPY_FULL_CSS_SELECTOR_OPENED_COUNT", + }, developertoolbar: { histogram: "DEVTOOLS_DEVELOPERTOOLBAR_OPENED_COUNT", timerHistogram: "DEVTOOLS_DEVELOPERTOOLBAR_TIME_ACTIVE_SECONDS" diff --git a/devtools/server/actors/inspector.js b/devtools/server/actors/inspector.js index 20a227a40d..883809b6cf 100644 --- a/devtools/server/actors/inspector.js +++ b/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. */ diff --git a/devtools/server/actors/root.js b/devtools/server/actors/root.js index b6f8c0ee4c..a5df148c22 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 f632871e15..c4a073635c 100644 --- a/devtools/server/css-logic.js +++ b/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. * diff --git a/devtools/shared/specs/node.js b/devtools/shared/specs/node.js index ea3d1b264c..022d7f1acf 100644 --- a/devtools/shared/specs/node.js +++ b/devtools/shared/specs/node.js @@ -37,6 +37,12 @@ const nodeSpec = generateActorSpec({ value: RetVal("string") } }, + getCssPath: { + request: {}, + response: { + value: RetVal("string") + } + }, scrollIntoView: { request: {}, response: {} diff --git a/devtools/shared/tests/mochitest/chrome.ini b/devtools/shared/tests/mochitest/chrome.ini index 85ece7c485..3e4e028d1a 100644 --- a/devtools/shared/tests/mochitest/chrome.ini +++ b/devtools/shared/tests/mochitest/chrome.ini @@ -2,6 +2,7 @@ tags = devtools skip-if = os == 'android' -[test_eventemitter_basic.html] +[test_css-logic-getCssPath.html] [test_devtools_extensions.html] +[test_eventemitter_basic.html] skip-if = os == 'linux' && debug # Bug 1205739 diff --git a/devtools/shared/tests/mochitest/test_css-logic-getCssPath.html b/devtools/shared/tests/mochitest/test_css-logic-getCssPath.html new file mode 100644 index 0000000000..2c444308ac --- /dev/null +++ b/devtools/shared/tests/mochitest/test_css-logic-getCssPath.html @@ -0,0 +1,121 @@ + + + + + + Test for Bug 1323700 + + + + + + +
+
+
+
+
+
+
+ + + +