diff options
| author | Moonchild <mcwerewolf@gmail.com> | 2018-02-04 19:50:46 +0100 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2018-02-04 19:50:46 +0100 |
| commit | 604bfb33c6ec30ac96507390cff00f2554d6b897 (patch) | |
| tree | cfd55eadedcd6450ab13bfc69510ef5713eb6fd2 /devtools | |
| parent | 6d7980b875c3e8df8d2b675811516bb3303eeba6 (diff) | |
| parent | e19a1da1b451d8194bb1ede770c19dbabeb97fb5 (diff) | |
| download | uxp-604bfb33c6ec30ac96507390cff00f2554d6b897.tar.gz | |
Merge pull request #5 from janekptacijarabaci/devtools_inspector_markupView_1
Markup View: show an ellipsis character in collapsed nodes
Diffstat (limited to 'devtools')
| -rw-r--r-- | devtools/client/inspector/markup/views/markup-container.js | 2 | ||||
| -rw-r--r-- | devtools/client/themes/markup.css | 19 |
2 files changed, 20 insertions, 1 deletions
diff --git a/devtools/client/inspector/markup/views/markup-container.js b/devtools/client/inspector/markup/views/markup-container.js index b54157242d..44768b46c6 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/themes/markup.css b/devtools/client/themes/markup.css index 4b4cfd031f..0569b7ce76 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); } |