Bug 1323193 - markupview: show an ellipsis character in collapsed nodes;r=gl draft
authorJulian Descottes <jdescottes@mozilla.com>
Tue, 13 Dec 2016 17:47:46 +0100
changeset 449846 65b68a2d8930668676059e90396e050e3debf3c4
parent 449801 7652a58efa46f1c57c94bba26efc5d53b6184e83
child 539613 571d0be2add2e6b550ede3c2865552f82921ff3a
push id38700
push userjdescottes@mozilla.com
push dateThu, 15 Dec 2016 09:24:34 +0000
reviewersgl
bugs1323193
milestone53.0a1
Bug 1323193 - markupview: show an ellipsis character in collapsed nodes;r=gl MozReview-Commit-ID: 50iNPTLMK2b
devtools/client/inspector/markup/views/markup-container.js
devtools/client/themes/markup.css
--- 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);
 }