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
--- 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;
}