mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-10-17 07:15:46 +00:00
Bug 1449954 - Slotted node reveal ux. r=bgrins
Merged the arrow icon and the "reveal" text link in a single icon. MozReview-Commit-ID: ELANKmAKACs
This commit is contained in:
parent
9be3391072
commit
3889e0d450
@ -12,7 +12,7 @@ function SlottedNodeEditor(container, node) {
|
||||
this.container = container;
|
||||
this.markup = this.container.markup;
|
||||
this.buildMarkup();
|
||||
this.tag.textContent = "→ <" + node.nodeName.toLowerCase() + ">";
|
||||
this.tag.textContent = "<" + node.nodeName.toLowerCase() + ">";
|
||||
|
||||
// Make the "tag" part of this editor focusable.
|
||||
this.tag.setAttribute("tabindex", "-1");
|
||||
@ -31,7 +31,7 @@ SlottedNodeEditor.prototype = {
|
||||
|
||||
this.revealLink = doc.createElement("span");
|
||||
this.revealLink.classList.add("reveal-link");
|
||||
this.revealLink.textContent = INSPECTOR_L10N.getStr("markupView.revealLink.label");
|
||||
this.revealLink.title = INSPECTOR_L10N.getStr("markupView.revealLink.tooltip");
|
||||
this.elt.appendChild(this.revealLink);
|
||||
},
|
||||
|
||||
|
@ -257,6 +257,7 @@ devtools.jar:
|
||||
skin/images/pane-expand.svg (themes/images/pane-expand.svg)
|
||||
skin/images/help.svg (themes/images/help.svg)
|
||||
skin/images/read-only.svg (themes/images/read-only.svg)
|
||||
skin/images/reveal.svg (themes/images/reveal.svg)
|
||||
|
||||
# Debugger
|
||||
skin/images/debugger/angular.svg (themes/images/debugger/angular.svg)
|
||||
|
@ -83,11 +83,12 @@ markupView.event.tooltiptext=Event listener
|
||||
# and a screen reader user tabs to it. This string is not visible onscreen.
|
||||
markupView.newAttribute.label=New attribute
|
||||
|
||||
# LOCALIZATION NOTE (markupView.revealLink.label)
|
||||
# Used in the markup view when displaying elements inserted in <slot> nodes in a custom
|
||||
# component. On hover, a link with this label will be shown to select the corresponding
|
||||
# non-slotted container. (test with dom.webcomponents.shadowdom.enabled set to true)
|
||||
markupView.revealLink.label=reveal
|
||||
# LOCALIZATION NOTE (markupView.revealLink.tooltip)
|
||||
# Used as a tooltip for an icon in the markup view when displaying elements inserted in
|
||||
# <slot> nodes in a custom component. When clicking on the icon, the corresponding
|
||||
# non-slotted container will be selected
|
||||
# (test with dom.webcomponents.shadowdom.enabled set to true)
|
||||
markupView.revealLink.tooltip=Reveal
|
||||
|
||||
#LOCALIZATION NOTE: Used in the image preview tooltip when the image could not be loaded
|
||||
previewTooltip.image.brokenImage=Could not load the image
|
||||
|
10
devtools/client/themes/images/reveal.svg
Normal file
10
devtools/client/themes/images/reveal.svg
Normal file
@ -0,0 +1,10 @@
|
||||
<!-- This Source Code Form is subject to the terms of the Mozilla Public
|
||||
- License, v. 2.0. If a copy of the MPL was not distributed with this
|
||||
- file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
|
||||
|
||||
<svg width="16" height="8" xmlns="http://www.w3.org/2000/svg" stroke="context-stroke" fill="none" stroke-linecap="round">
|
||||
<g transform="rotate(90 8,8)">
|
||||
<path d="M5.5 3.5l2 2M5.5 7.5l2-2"/>
|
||||
<path d="M7 5.5H4.006c-1.012 0-1.995 1.017-2.011 2.024-.005.023-.005 1.347 0 3.971" stroke-linejoin="round"/>
|
||||
</g>
|
||||
</svg>
|
After Width: | Height: | Size: 536 B |
@ -332,17 +332,14 @@ ul.children + .tag-line::before {
|
||||
}
|
||||
|
||||
.reveal-link {
|
||||
margin-inline-start: 10px;
|
||||
cursor: pointer;
|
||||
display: none;
|
||||
}
|
||||
background: url("chrome://devtools/skin/images/reveal.svg") no-repeat;
|
||||
display: inline-block;
|
||||
width: 16px;
|
||||
height: 8px;
|
||||
|
||||
.reveal-link:hover {
|
||||
text-decoration: underline
|
||||
}
|
||||
|
||||
.tag-line:hover .reveal-link {
|
||||
display: inline;
|
||||
-moz-context-properties: stroke;
|
||||
stroke: currentColor;
|
||||
}
|
||||
|
||||
/* Draw a circle next to nodes that have a pseudo class lock.
|
||||
|
Loading…
Reference in New Issue
Block a user