Bug 1243695 - reduce inplace editor size in ruleview;r=miker

devtools/client/inspector/rules/test/browser_rules_edit-selector-click.js

@@ -54,7 +54,7 @@ function* testClickOnSelectorEditorInput(view) {
   info("Click outside the editor input");
   let onBlur = once(editorInput, "blur");
   let rect = editorInput.getBoundingClientRect();
-  EventUtils.synthesizeMouse(editorInput, rect.width + 5, 0, {},
+  EventUtils.synthesizeMouse(editorInput, rect.width + 5, rect.height / 2, {},
     view.styleWindow);
   yield onBlur;
 

devtools/client/shared/inplace-editor.js

@@ -373,11 +373,7 @@ InplaceEditor.prototype = {
     // will be wrong.
     this._measurement.textContent = this.input.value.replace(/ /g, "\u00a0");
 
-    // We add a bit of padding to the end.  Should be enough to fit
-    // any letter that could be typed, otherwise we'll scroll before
-    // we get a chance to resize.  Yuck.
-    let width = this._measurement.offsetWidth + 10;
-
+    let width = this._measurement.offsetWidth;
     if (this.multiline) {
       // Make sure there's some content in the current line.  This is a hack to
       // account for the fact that after adding a newline the <pre> doesn't grow
@@ -386,7 +382,12 @@ InplaceEditor.prototype = {
       this.input.style.height = this._measurement.offsetHeight + "px";
     }
 
-    this.input.style.width = width + "px";
+    if (width === 0) {
+      // If the editor is empty use a width corresponding to 1 character.
+      this.input.style.width = "1ch";
+    } else {
+      this.input.style.width = width + "px";
+    }
   },
 
   /**

devtools/client/themes/rules.css

@@ -319,6 +319,7 @@
 .styleinspector-propertyeditor {
   border: 1px solid #CCC;
   padding: 0;
+  margin: -1px;
 }
 
 .ruleview-property {