Bug 1261827 - inplace-editor: copyTextStyles should not copy line-height property;r=pbro

Only text styles should be copied between the replaced element and the input.
Other styles are still copied between the input and the measurement element.

MozReview-Commit-ID: 7YSWtjLgH2z

--HG--
extra : rebase_source : 568ac2a70b6b70e3df97bcb9ab2e55cc693a51b6

devtools/client/shared/inplace-editor.js

@@ -382,7 +382,7 @@ InplaceEditor.prototype = {
       }
     }
 
-    copyTextStyles(this.input, this._measurement);
+    copyAllStyles(this.input, this._measurement);
     this._updateSize();
   },
 
@@ -1367,6 +1367,17 @@ function copyTextStyles(from, to) {
   to.style.fontSize = getCssText("font-size");
   to.style.fontWeight = getCssText("font-weight");
   to.style.fontStyle = getCssText("font-style");
+}
+
+/**
+ * Copy all styles which could have an impact on the element size.
+ */
+function copyAllStyles(from, to) {
+  let win = from.ownerDocument.defaultView;
+  let style = win.getComputedStyle(from);
+  let getCssText = name => style.getPropertyCSSValue(name).cssText;
+
+  copyTextStyles(from, to);
   to.style.lineHeight = getCssText("line-height");
 
   // If box-sizing is set to border-box, box model styles also need to be

devtools/client/shared/test/browser_inplace-editor_maxwidth.js

@@ -6,7 +6,6 @@
 
 var { editableField } = require("devtools/client/shared/inplace-editor");
 
-const LINE_HEIGHT = 15;
 const MAX_WIDTH = 300;
 const START_TEXT = "Start text";
 const LONG_TEXT = "I am a long text and I will not fit in a 300px container. " +
@@ -95,7 +94,10 @@ let testMaxWidth = Task.async(function* (editor) {
  * @return {Number} the number of lines
  */
 function getLines(textarea) {
-  return Math.floor(textarea.clientHeight / LINE_HEIGHT);
+  let win = textarea.ownerDocument.defaultView;
+  let style = win.getComputedStyle(textarea);
+  let lineHeight = style.getPropertyCSSValue("line-height").cssText;
+  return Math.floor(textarea.clientHeight / parseFloat(lineHeight));
 }
 
 /**
@@ -125,7 +127,6 @@ function createSpan(doc) {
   info("Creating a new span element");
   let span = doc.createElement("span");
   span.setAttribute("tabindex", "0");
-  span.style.lineHeight = LINE_HEIGHT + "px";
   span.style.fontSize = "11px";
   span.style.fontFamily = "monospace";
   span.textContent = START_TEXT;