Bug 1323193 - markupview: show an ellipsis character in collapsed nodes;r=gl
MozReview-Commit-ID: 50iNPTLMK2b
--- a/devtools/client/inspector/markup/views/markup-container.js
+++ b/devtools/client/inspector/markup/views/markup-container.js
@@ -206,20 +206,22 @@ MarkupContainer.prototype = {
},
updateExpander: function () {
if (!this.expander) {
return;
}
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.
this.tagLine.removeAttribute("aria-expanded");
}
},
/**
--- a/devtools/client/themes/markup.css
+++ b/devtools/client/themes/markup.css
@@ -199,16 +199,32 @@ ul.children + .tag-line::before {
.child.collapsed > .tag-line ~ .tag-line {
display: none;
}
.child.collapsed .close {
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 {
display: none;
}
.closing-bracket {
pointer-events: none;
@@ -321,17 +337,18 @@ ul.children + .tag-line::before {
sibling of the class, not a child. */
.theme-selected ~ .editor,
.theme-selected ~ .editor .theme-fg-color1,
.theme-selected ~ .editor .theme-fg-color2,
.theme-selected ~ .editor .theme-fg-color3,
.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);
}
/* Make sure even text nodes are white when selected in the Inspector panel. */
.theme-firebug .theme-selected ~ .editor .open,
.theme-firebug .theme-selected ~ .editor .close {
color: var(--theme-selection-color);
}