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

Issue #3
This commit is contained in:
janekptacijarabaci 2018-02-02 20:42:28 +01:00 committed by Roy Tam
commit c3a7fd56e7
11 changed files with 241 additions and 3 deletions

View file

@ -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);
},
/**

View file

@ -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",

View file

@ -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",