Bug 796069 - [markup panel] gap space before closing bracket is distracting. r=harth

browser/devtools/markupview/markup-view.css

@@ -18,6 +18,15 @@ ul.children:not([expanded]) {
   display: inline-block;
   width: 1em;
   height: 1ex;
+  margin-right: -1em;
+}
+
+.newattr:focus {
+  margin-right: 0;
+}
+
+.closing-bracket {
+  pointer-events: none;
 }
 
 .summary {
@@ -28,10 +37,6 @@ ul.children:not([expanded]) {
   display: none;
 }
 
-#root {
-  margin-right: 80px;
-}
-
 /* Preview */
 
 #previewbar {

browser/devtools/markupview/markup-view.xhtml

@@ -23,7 +23,7 @@
       <li id="template-more-nodes" class="more-nodes devtools-class-comment" save="${elt}"><span>${showing}</span> <button href="#" onclick="${allButtonClick}">${showAll}</button></li>
     </ul>
 
-    <span id="template-element" save="${elt}" class="editor"><span>&lt;</span><span save="${tag}" class="tagname theme-fg-color3"></span><span save="${attrList}"></span><span save="${newAttr}" class="newattr" tabindex="0"></span>&gt;</span>
+    <span id="template-element" save="${elt}" class="editor"><span>&lt;</span><span save="${tag}" class="tagname theme-fg-color3"></span><span save="${attrList}"></span><span save="${newAttr}" class="newattr" tabindex="0"></span><span class="closing-bracket">&gt;</span></span>
 
     <span id="template-attribute" save="${attr}" data-attr="${attrName}" class="attreditor" style="display:none"> <span class="editable" save="${inner}" tabindex="0"><span save="${name}" class="attrname theme-fg-color2"></span>=&quot;<span save="${val}" class="attrvalue theme-fg-color6"></span>&quot;</span></span>