Bug 796069 - [markup panel] gap space before closing bracket is distracting. r=harth
authorPaul Rouget <paul@mozilla.com>
Mon, 15 Jul 2013 04:39:00 +0300
changeset 151589 c3f39498c164aa4a7c911dd5e0c3178464766cee
parent 151588 5d860e628af6868ce0fdaa1c93b61f3b01417c05
child 151590 dcf2afce5801f13472f7d2dcd71852de9bf929e2
push id2859
push userakeybl@mozilla.com
push dateMon, 16 Sep 2013 19:14:59 +0000
treeherdermozilla-beta@87d3c51cd2bf [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersharth
bugs796069
milestone25.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 796069 - [markup panel] gap space before closing bracket is distracting. r=harth
browser/devtools/markupview/markup-view.css
browser/devtools/markupview/markup-view.xhtml
--- a/browser/devtools/markupview/markup-view.css
+++ b/browser/devtools/markupview/markup-view.css
@@ -13,30 +13,35 @@ ul.children:not([expanded]) {
 .codebox {
   display: inline-block;
 }
 
 .newattr {
   display: inline-block;
   width: 1em;
   height: 1ex;
+  margin-right: -1em;
+}
+
+.newattr:focus {
+  margin-right: 0;
+}
+
+.closing-bracket {
+  pointer-events: none;
 }
 
 .summary {
   cursor: pointer;
 }
 
 .summary[expanded] {
   display: none;
 }
 
-#root {
-  margin-right: 80px;
-}
-
 /* Preview */
 
 #previewbar {
   position: fixed;
   top: 0;
   right: 0;
   width: 90px;
   background: black;
--- a/browser/devtools/markupview/markup-view.xhtml
+++ b/browser/devtools/markupview/markup-view.xhtml
@@ -18,17 +18,17 @@
   <div id="root"></div>
   <div id="templates" style="display:none">
     <ul>
       <li id="template-container" save="${elt}" class="container"><span save="${codeBox}" class="codebox"><span save="${expander}" class="theme-twisty expander"></span><ul save="${children}" class="children"></ul></span></li>
 
       <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>
 
     <span id="template-text" save="${elt}" class="editor text">
       <pre save="${value}" style="display:inline-block;" tabindex="0"></pre>
     </span>
 
     <span id="template-comment" save="${elt}" class="editor comment theme-comment">