Bug 915910 - [markup view] UI updates following refactor in Bug 855523. r=miker

browser/devtools/markupview/markup-view.css

@@ -2,9 +2,18 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-#root-wrapper {
-  overflow: hidden;
-  min-width: 250px;
+/* Force height and width (possibly overflowing) from inline elements.
+ * 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%;
+}
+
+#root-wrapper:after {
+   content: "";
+   display: block;
+   clear: both;
 }
 
 .children {
@@ -26,14 +35,13 @@
 
 /* Children are indented thanks to their parent's left padding, that means they
  * are not stretching from edge to edge, which is what we want.
- * So we insert a pseudo-element and make sure it covers the whole "line" */
+ * So we insert an element and make sure it covers the whole "line" */
 .tag-line .highlighter {
-    content: "";
-    position: absolute;
-    left: -1000em;
-    right: 0;
-    height: 100%;
-    z-index: -1;
+  position: absolute;
+  left: -1000em;
+  right: 0;
+  height: 100%;
+  z-index: -1;
 }
 
 .expander {
@@ -62,6 +70,10 @@
   display: inline;
 }
 
+.closing-bracket {
+  pointer-events: none;
+}
+
 .newattr {
   display: inline-block;
   width: 1em;

browser/devtools/markupview/markup-view.xhtml

@@ -29,7 +29,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 class="open">&lt;<span save="${tag}" class="tag theme-fg-color3" tabindex="0"></span><span save="${attrList}"></span><span save="${newAttr}" class="newattr" tabindex="0"></span>&gt;</span><span class="close">&lt;/<span save="${closeTag}" class="tag theme-fg-color3"></span>&gt;</span></span>
+    <span id="template-element" save="${elt}" class="editor"><span class="open">&lt;<span save="${tag}" class="tag theme-fg-color3" tabindex="0"></span><span save="${attrList}"></span><span save="${newAttr}" class="newattr" tabindex="0"></span><span class="closing-bracket">&gt;</span></span><span class="close">&lt;/<span save="${closeTag}" class="tag theme-fg-color3"></span>&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="attr-name theme-fg-color2"></span>=&quot;<span save="${val}" class="attr-value theme-fg-color6"></span>&quot;</span></span>
 

browser/devtools/shared/inplace-editor.js

@@ -201,9 +201,11 @@ function InplaceEditor(aOptions, aEvent)
   this.input.addEventListener("blur", this._onBlur, false);
   this.input.addEventListener("keypress", this._onKeyPress, false);
   this.input.addEventListener("input", this._onInput, false);
-  this.input.addEventListener("mousedown", function(aEvt) {
-                                             aEvt.stopPropagation();
-                                           }, false);
+
+  this.input.addEventListener("dblclick",
+    (e) => { e.stopPropagation(); }, false);
+  this.input.addEventListener("mousedown",
+    (e) => { e.stopPropagation(); }, false);
 
   this.validate = aOptions.validate;