Bug 1260121 - [markupview] Pseudo class lock indicator should not appear underneath tree twisty r=pbro a=kwierso
authorGabriel Luong <gabriel.luong@gmail.com>
Thu, 31 Mar 2016 16:17:56 -0700
changeset 291297 a15b5e6efd30491de81c36691e46398abee99172
parent 291296 140c43bb6f49951ba375c941965117f5910cd889
child 291298 8a8cd8d35d0141f95c2b0b00cba1449d3cccf204
push id19656
push usergwagner@mozilla.com
push dateMon, 04 Apr 2016 13:43:23 +0000
treeherderb2g-inbound@e99061fde28a [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerspbro, kwierso
bugs1260121
milestone48.0a1
Bug 1260121 - [markupview] Pseudo class lock indicator should not appear underneath tree twisty r=pbro a=kwierso MozReview-Commit-ID: GyP5KxG5mG7
devtools/client/themes/markup.css
--- a/devtools/client/themes/markup.css
+++ b/devtools/client/themes/markup.css
@@ -27,18 +27,18 @@ body {
  * This allows long overflows of text or input fields to still be styled with
  * the container, rather than the background disappearing when scrolling */
 #root {
   float: left;
   min-width: 100%;
 }
 
 /* Don't display a parent-child outline for the root elements */
-#root > ul > li > .children::before {
-  display: none;
+#root > ul > li > .children {
+  background: none;
 }
 
 body.dragging .tag-line {
   cursor: grabbing;
 }
 
 #root-wrapper:after {
    content: "";
@@ -74,17 +74,16 @@ body.dragging .tag-line {
   margin: 0;
   padding: 0;
 }
 
 .children {
   list-style: none;
   padding: 0;
   margin: 0;
-  position: relative;
 }
 
 /* Tags are organized in a UL/LI tree and indented thanks to a left padding.
  * A very large padding is used in combination with a slightly smaller margin
  * to make sure childs actually span from edge-to-edge. */
 .child {
   margin-left: -1000em;
   padding-left: 1001em;
@@ -131,30 +130,27 @@ ul.children + .tag-line::before {
 .tag-line {
   min-height: 1.4em;
   line-height: 1.4em;
   position: relative;
   cursor: default;
   padding-left: 2px;
 }
 
-.tag-line[selected] + .children::before {
-  content: "";
-  background: var(--markup-outline);
-  width: 1.5px;
-  height: calc(100% - 4px);
-  left: -6px;
-  top: 2px;
-  border-radius: 2px;
-  position: absolute;
-  display: block;
-}
-
-.tag-line:hover:not([selected]) + .children::before {
-  opacity: 0.5;
+.tag-line[selected] + .children {
+  background-image: linear-gradient(to top, var(--markup-outline), var(--markup-outline));
+  background-repeat: no-repeat;
+  /* Shorten the outline height by 4px to account for the 2px top padding and
+   * allow for a 2px bottom padding */
+  background-size: 1.5px calc(100% - 4px);
+  /* Align the outline to under the expander arrow and provide 2px top
+   * padding */
+  background-position: -6px 2px;
+  border-left: 6px solid transparent;
+  margin-left: -6px;
 }
 
 .html-editor-container {
   position: relative;
   min-height: 200px;
 }
 
 /* This extra element placed in each tag is positioned absolutely to cover the