Bug 1241059 - Part 1: Extend the markup outline to the closing tag. r=gl
authorMarco Schaefer <msfr-develop@posteo.me>
Fri, 18 Nov 2016 15:43:37 +0100
changeset 324286 1f2ff51b2169fb0f003ef920f7955f03a20c95a0
parent 324285 d0bfc6df50fc9b7df92e211444ca749b96dc479d
child 324287 0b6635a4c87d88ac36f88073839e5d7191da798b
push id24
push usermaklebus@msu.edu
push dateTue, 20 Dec 2016 03:11:33 +0000
reviewersgl
bugs1241059
milestone53.0a1
Bug 1241059 - Part 1: Extend the markup outline to the closing tag. r=gl
devtools/client/themes/markup.css
--- a/devtools/client/themes/markup.css
+++ b/devtools/client/themes/markup.css
@@ -134,29 +134,36 @@ 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 {
+.tag-line[selected] + .children,
+.tag-line[selected] ~ .tag-line {
   background-image: linear-gradient(to top, var(--markup-outline), var(--markup-outline));
+  background-position-x: -6px;
   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;
+  background-size: 1.5px 100%;
   border-left: 6px solid transparent;
   margin-left: -6px;
 }
 
+.tag-line[selected] + .children {
+  background-position-y: 2px;
+}
+
+.tag-line[selected] ~ .tag-line {
+  background-position-y: -2px;
+  /* Unset transition-property to prevent the markup outline from horizontal shifting */
+  transition-property: none;
+}
+
 .html-editor-container {
   position: relative;
   min-height: 200px;
 }
 
 /* This extra element placed in each tag is positioned absolutely to cover the
  * whole tag line and is used for background styling (when a selection is made
  * or when the tag is flashing) */