Bug 1323193 - markupview: show an ellipsis character in collapsed nodes;r=gl
authorJulian Descottes <jdescottes@mozilla.com>
Tue, 13 Dec 2016 17:47:46 +0100
changeset 326100 333f5945aad4cfbca420101aa4c917fc6702486a
parent 326099 eab7fdc5394fdae1d017be3c3313a848bdb752bd
child 326101 e6091803e801123c9501eda50f5b10dc306d0d3f
push id31086
push usercbook@mozilla.com
push dateFri, 16 Dec 2016 15:03:32 +0000
treeherdermozilla-central@917fc78005dd [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersgl
bugs1323193
milestone53.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
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);
 }