Bug 1261827 - inplace-editor: copyTextStyles should not copy line-height property;r=pbro draft
authorJulian Descottes <jdescottes@mozilla.com>
Mon, 04 Apr 2016 16:26:37 +0200
changeset 347298 c82c058e9d9e8d8e6df3ba73f23ec74e23975281
parent 347279 fc4a988ca8d61e809bb30ef635ad50e189f742b3
child 517596 f864eac7b232e66373c23472f6a5c6f89354a0d2
push id14545
push userjdescottes@mozilla.com
push dateMon, 04 Apr 2016 15:19:59 +0000
reviewerspbro
bugs1261827
milestone48.0a1
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
devtools/client/shared/inplace-editor.js
devtools/client/shared/test/browser_inplace-editor_maxwidth.js
--- a/devtools/client/shared/inplace-editor.js
+++ b/devtools/client/shared/inplace-editor.js
@@ -377,17 +377,17 @@ InplaceEditor.prototype = {
       if (this.maxWidth) {
         style.maxWidth = this.maxWidth + "px";
         // Use position fixed to measure dimensions without any influence from
         // the container of the editor.
         style.position = "fixed";
       }
     }
 
-    copyTextStyles(this.input, this._measurement);
+    copyAllStyles(this.input, this._measurement);
     this._updateSize();
   },
 
   /**
    * Clean up the mess created by _autosize().
    */
   _stopAutosize: function() {
     if (!this._measurement) {
@@ -1362,16 +1362,27 @@ function copyTextStyles(from, to) {
   let win = from.ownerDocument.defaultView;
   let style = win.getComputedStyle(from);
   let getCssText = name => style.getPropertyCSSValue(name).cssText;
 
   to.style.fontFamily = getCssText("font-family");
   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
   // copied.
   let boxSizing = getCssText("box-sizing");
   if (boxSizing === "border-box") {
     to.style.boxSizing = boxSizing;
     copyBoxModelStyles(from, to);
--- a/devtools/client/shared/test/browser_inplace-editor_maxwidth.js
+++ b/devtools/client/shared/test/browser_inplace-editor_maxwidth.js
@@ -1,17 +1,16 @@
 /* vim: set ts=2 et sw=2 tw=80: */
 /* Any copyright is dedicated to the Public Domain.
    http://creativecommons.org/publicdomain/zero/1.0/ */
 
 "use strict";
 
 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. " +
   "I expect the inplace editor to wrap.";
 
 // Test the inplace-editor behavior with a maxWidth configuration option
 // defined.
 
@@ -90,17 +89,20 @@ let testMaxWidth = Task.async(function* 
 
 /**
  * Retrieve the current number of lines displayed in the provided textarea.
  *
  * @param {DOMNode} textarea
  * @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));
 }
 
 /**
  * Verify that the provided textarea has no vertical or horizontal scrollbar.
  *
  * @param {DOMNode} textarea
  */
 function checkScrollbars(textarea) {
@@ -120,15 +122,14 @@ function createInplaceEditorAndClick(opt
   info("Clicking on the inplace-editor field to turn to edit mode");
   span.click();
 }
 
 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;
   doc.body.appendChild(span);
   return span;
 }