wuggy/Dactyloidae
wuggy/Dactyloidae
1
0
Fork 0
mirror of https://repo.dactyloidae.xyz/Dactyloidae/UXP.git synced 2026-09-08 16:58:38 +09:00
Code Issues Projects Releases Packages Wiki Activity

Markup View: show an ellipsis character in collapsed nodes

Browse source 
Issue #2
This commit is contained in:
janekptacijarabaci 2018-02-02 20:32:00 +01:00 • committed by Roy Tam
commit 2d167f91a8
2 changed files with 20 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

2
devtools/client/inspector/markup/views/markup-container.js
View file

@ -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.

19
devtools/client/themes/markup.css
View file

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