diff options
Diffstat (limited to 'devtools/client')
8 files changed, 69 insertions, 5 deletions
diff --git a/devtools/client/framework/test/browser.ini b/devtools/client/framework/test/browser.ini index f34cd66f0..2404490ce 100644 --- a/devtools/client/framework/test/browser.ini +++ b/devtools/client/framework/test/browser.ini @@ -91,5 +91,3 @@ skip-if = os == "mac" && os_version == "10.8" || os == "win" && os_version == "5 [browser_toolbox_window_title_frame_select.js] [browser_toolbox_zoom.js] [browser_two_tabs.js] -# We want this test to run for mochitest-dt as well, so we include it here: -[../../../../browser/base/content/test/general/browser_parsable_css.js] diff --git a/devtools/client/inspector/inspector.js b/devtools/client/inspector/inspector.js index c056c213f..d0458fc1f 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; }, @@ -1074,6 +1078,15 @@ Inspector.prototype = { 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"), disabled: !isSelectionElement || !markupContainer || @@ -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/markup/views/markup-container.js b/devtools/client/inspector/markup/views/markup-container.js index b54157242..44768b46c 100644 --- a/devtools/client/inspector/markup/views/markup-container.js +++ b/devtools/client/inspector/markup/views/markup-container.js @@ -211,10 +211,12 @@ MarkupContainer.prototype = { } if (this.showExpander) { + this.elt.classList.add("expandable"); this.expander.style.visibility = "visible"; // Update accessibility expanded state. this.tagLine.setAttribute("aria-expanded", this.expanded); } else { + this.elt.classList.remove("expandable"); this.expander.style.visibility = "hidden"; // No need for accessible expanded state indicator when expander is not // shown. 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 59dbbbcc0..052e9da68 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 0c96e9bbe..57a5dbaa0 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 @@ -26,6 +26,12 @@ const COPY_ITEMS_TEST_DATA = [ 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", selector: "#copyimage", diff --git a/devtools/client/locales/en-US/inspector.properties b/devtools/client/locales/en-US/inspector.properties index 4f4829678..b6f3e072b 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 64a299581..38a21cef6 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/client/themes/markup.css b/devtools/client/themes/markup.css index 4b4cfd031..0569b7ce7 100644 --- a/devtools/client/themes/markup.css +++ b/devtools/client/themes/markup.css @@ -197,6 +197,22 @@ ul.children + .tag-line::before { display: inline; } +.expandable.collapsed .close::before { + /* Display an ellipsis character in collapsed nodes that can be expanded. */ + content: "\2026"; + display: inline-block; + width: 12px; + height: 8px; + margin: 0 2px; + line-height: 3px; + color: var(--theme-body-color-inactive); + border-radius: 3px; + border-style: solid; + border-width: 1px; + text-align: center; + vertical-align: middle; +} + /* Hide HTML void elements (img, hr, br, …) closing tag when the element is not * expanded (it can be if it has pseudo-elements attached) */ .child.collapsed > .tag-line .void-element .close { @@ -318,7 +334,8 @@ ul.children + .tag-line::before { .theme-selected ~ .editor .theme-fg-color4, .theme-selected ~ .editor .theme-fg-color5, .theme-selected ~ .editor .theme-fg-color6, -.theme-selected ~ .editor .theme-fg-color7 { +.theme-selected ~ .editor .theme-fg-color7, +.theme-selected ~ .editor .close::before { color: var(--theme-selection-color); } |