Update RichTextArea editor height on resize (#11320)

Change-Id: I4d4d054c2e4f068aacd9b324350be4ee696cf3d3

4 files changed, 143 insertions, 88 deletions

diff --git a/client/src/com/vaadin/client/ui/VRichTextArea.java b/client/src/com/vaadin/client/ui/VRichTextArea.java
index 52e3782f32..3f63f38067 100644
--- a/client/src/com/vaadin/client/ui/VRichTextArea.java
+++ b/client/src/com/vaadin/client/ui/VRichTextArea.java
@@ -21,10 +21,6 @@ import java.util.Map;
 import java.util.Map.Entry;
 
 import com.google.gwt.core.client.Scheduler;
-import com.google.gwt.dom.client.Element;
-import com.google.gwt.dom.client.Style.Position;
-import com.google.gwt.dom.client.Style.Unit;
-import com.google.gwt.dom.client.Style.Visibility;
 import com.google.gwt.event.dom.client.BlurHandler;
 import com.google.gwt.event.dom.client.KeyDownEvent;
 import com.google.gwt.event.dom.client.KeyDownHandler;
@@ -32,7 +28,6 @@ import com.google.gwt.event.dom.client.KeyPressEvent;
 import com.google.gwt.event.dom.client.KeyPressHandler;
 import com.google.gwt.event.shared.HandlerRegistration;
 import com.google.gwt.user.client.Command;
-import com.google.gwt.user.client.DOM;
 import com.google.gwt.user.client.Timer;
 import com.google.gwt.user.client.ui.Composite;
 import com.google.gwt.user.client.ui.FlowPanel;
@@ -43,7 +38,6 @@ import com.google.gwt.user.client.ui.Widget;
 import com.vaadin.client.ApplicationConnection;
 import com.vaadin.client.BrowserInfo;
 import com.vaadin.client.ConnectorMap;
-import com.vaadin.client.Util;
 import com.vaadin.client.ui.ShortcutActionHandler.ShortcutActionHandlerOwner;
 import com.vaadin.client.ui.richtextarea.VRichTextToolbar;
 
@@ -73,7 +67,8 @@ public class VRichTextArea extends Composite implements Field, KeyPressHandler,
     /** For internal use only. May be removed or replaced in the future. */
     public RichTextArea rta;
 
-    private VRichTextToolbar formatter;
+    /** For internal use only. May be removed or replaced in the future. */
+    public VRichTextToolbar formatter;
 
     /** For internal use only. May be removed or replaced in the future. */
     public HTML html = new HTML();
@@ -82,9 +77,6 @@ public class VRichTextArea extends Composite implements Field, KeyPressHandler,
 
     private boolean enabled = true;
 
-    private int extraHorizontalPixels = -1;
-    private int extraVerticalPixels = -1;
-
     /** For internal use only. May be removed or replaced in the future. */
     public int maxLength = -1;
 
@@ -193,92 +185,17 @@ public class VRichTextArea extends Composite implements Field, KeyPressHandler,
         return readOnly;
     }
 
-    /**
-     * @return space used by components paddings and borders
-     */
-    private int getExtraHorizontalPixels() {
-        if (extraHorizontalPixels < 0) {
-            detectExtraSizes();
-        }
-        return extraHorizontalPixels;
-    }
-
-    /**
-     * @return space used by components paddings and borders
-     */
-    private int getExtraVerticalPixels() {
-        if (extraVerticalPixels < 0) {
-            detectExtraSizes();
-        }
-        return extraVerticalPixels;
-    }
-
-    /**
-     * Detects space used by components paddings and borders.
-     */
-    private void detectExtraSizes() {
-        Element clone = Util.cloneNode(getElement(), false);
-        DOM.setElementAttribute(clone, "id", "");
-        clone.getStyle().setVisibility(Visibility.HIDDEN);
-        clone.getStyle().setPosition(Position.ABSOLUTE);
-        // due FF3 bug set size to 10px and later subtract it from extra pixels
-        clone.getStyle().setWidth(10, Unit.PX);
-        clone.getStyle().setHeight(10, Unit.PX);
-        DOM.appendChild(DOM.getParent(getElement()), clone);
-        extraHorizontalPixels = DOM.getElementPropertyInt(clone, "offsetWidth") - 10;
-        extraVerticalPixels = DOM.getElementPropertyInt(clone, "offsetHeight") - 10;
-
-        DOM.removeChild(DOM.getParent(getElement()), clone);
-    }
-
     @Override
     public void setHeight(String height) {
-        if (height.endsWith("px")) {
-            float h = Float
-                    .parseFloat(height.substring(0, height.length() - 2));
-            h -= getExtraVerticalPixels();
-            if (h < 0) {
-                h = 0;
-            }
-
-            super.setHeight(h + "px");
-        } else {
-            super.setHeight(height);
-        }
-
+        super.setHeight(height);
         if (height == null || height.equals("")) {
             rta.setHeight("");
-        } else {
-            /*
-             * The formatter height will be initially calculated wrong so we
-             * delay the height setting so the DOM has had time to stabilize.
-             */
-            Scheduler.get().scheduleDeferred(new Command() {
-                @Override
-                public void execute() {
-                    int editorHeight = getOffsetHeight()
-                            - getExtraVerticalPixels()
-                            - formatter.getOffsetHeight();
-                    if (editorHeight < 0) {
-                        editorHeight = 0;
-                    }
-                    rta.setHeight(editorHeight + "px");
-                }
-            });
         }
     }
 
     @Override
     public void setWidth(String width) {
-        if (width.endsWith("px")) {
-            float w = Float.parseFloat(width.substring(0, width.length() - 2));
-            w -= getExtraHorizontalPixels();
-            if (w < 0) {
-                w = 0;
-            }
-
-            super.setWidth(w + "px");
-        } else if (width.equals("")) {
+        if (width.equals("")) {
             /*
              * IE cannot calculate the width of the 100% iframe correctly if
              * there is no width specified for the parent. In this case we would
diff --git a/client/src/com/vaadin/client/ui/richtextarea/RichTextAreaConnector.java b/client/src/com/vaadin/client/ui/richtextarea/RichTextAreaConnector.java
index 6b3bf84578..5fe637447e 100644
--- a/client/src/com/vaadin/client/ui/richtextarea/RichTextAreaConnector.java
+++ b/client/src/com/vaadin/client/ui/richtextarea/RichTextAreaConnector.java
@@ -23,6 +23,7 @@ import com.vaadin.client.Paintable;
 import com.vaadin.client.UIDL;
 import com.vaadin.client.ui.AbstractFieldConnector;
 import com.vaadin.client.ui.ShortcutActionHandler.BeforeShortcutActionListener;
+import com.vaadin.client.ui.SimpleManagedLayout;
 import com.vaadin.client.ui.VRichTextArea;
 import com.vaadin.shared.ui.Connect;
 import com.vaadin.shared.ui.Connect.LoadStyle;
@@ -31,7 +32,7 @@ import com.vaadin.ui.RichTextArea;
 
 @Connect(value = RichTextArea.class, loadStyle = LoadStyle.LAZY)
 public class RichTextAreaConnector extends AbstractFieldConnector implements
-        Paintable, BeforeShortcutActionListener {
+        Paintable, BeforeShortcutActionListener, SimpleManagedLayout {
 
     /*
      * Last value received from the server
@@ -47,6 +48,15 @@ public class RichTextAreaConnector extends AbstractFieldConnector implements
                 flush();
             }
         });
+        getLayoutManager().registerDependency(this,
+                getWidget().formatter.getElement());
+    }
+
+    @Override
+    public void onUnregister() {
+        super.onUnregister();
+        getLayoutManager().unregisterDependency(this,
+                getWidget().formatter.getElement());
     }
 
     @Override
@@ -110,4 +120,19 @@ public class RichTextAreaConnector extends AbstractFieldConnector implements
             }
         }
     }
+
+    @Override
+    public void layout() {
+        if (!isUndefinedHeight()) {
+            int rootElementInnerHeight = getLayoutManager().getInnerHeight(
+                    getWidget().getElement());
+            int formatterHeight = getLayoutManager().getOuterHeight(
+                    getWidget().formatter.getElement());
+            int editorHeight = rootElementInnerHeight - formatterHeight;
+            if (editorHeight < 0) {
+                editorHeight = 0;
+            }
+            getWidget().rta.setHeight(editorHeight + "px");
+        }
+    }
 }
diff --git a/uitest/src/com/vaadin/tests/components/richtextarea/RichTextAreaRelativeHeightResize.java b/uitest/src/com/vaadin/tests/components/richtextarea/RichTextAreaRelativeHeightResize.java
new file mode 100644
index 0000000000..870c6cb8cb
--- /dev/null
+++ b/uitest/src/com/vaadin/tests/components/richtextarea/RichTextAreaRelativeHeightResize.java
@@ -0,0 +1,58 @@
+/*
+ * Copyright 2000-2014 Vaadin Ltd.
+ * 
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not
+ * use this file except in compliance with the License. You may obtain a copy of
+ * the License at
+ * 
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations under
+ * the License.
+ */
+package com.vaadin.tests.components.richtextarea;
+
+import com.vaadin.server.VaadinRequest;
+import com.vaadin.tests.components.AbstractTestUI;
+import com.vaadin.ui.Button;
+import com.vaadin.ui.Button.ClickEvent;
+import com.vaadin.ui.RichTextArea;
+import com.vaadin.ui.VerticalLayout;
+
+public class RichTextAreaRelativeHeightResize extends AbstractTestUI {
+
+    @Override
+    protected void setup(VaadinRequest request) {
+        final VerticalLayout layout = new VerticalLayout();
+        layout.setSizeFull();
+        layout.setHeight("300px");
+
+        RichTextArea richTextArea = new RichTextArea();
+        richTextArea.setSizeFull();
+        layout.addComponent(richTextArea);
+
+        addComponent(layout);
+        addComponent(new Button("Increase height", new Button.ClickListener() {
+            @Override
+            public void buttonClick(ClickEvent event) {
+                layout.setHeight("400px");
+            }
+        }));
+
+    }
+
+    @Override
+    protected String getTestDescription() {
+        return "Tests that a RichTextArea with dynamic height "
+                + "updates its editor elements height on resize";
+    }
+
+    @Override
+    protected Integer getTicketNumber() {
+        return 11320;
+    }
+
+}
diff --git a/uitest/src/com/vaadin/tests/components/richtextarea/RichTextAreaRelativeHeightResizeTest.java b/uitest/src/com/vaadin/tests/components/richtextarea/RichTextAreaRelativeHeightResizeTest.java
new file mode 100644
index 0000000000..5c31ce4dc7
--- /dev/null
+++ b/uitest/src/com/vaadin/tests/components/richtextarea/RichTextAreaRelativeHeightResizeTest.java
@@ -0,0 +1,55 @@
+/*
+ * Copyright 2000-2014 Vaadin Ltd.
+ * 
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not
+ * use this file except in compliance with the License. You may obtain a copy of
+ * the License at
+ * 
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations under
+ * the License.
+ */
+package com.vaadin.tests.components.richtextarea;
+
+import org.junit.Assert;
+import org.junit.Test;
+
+import com.vaadin.testbench.By;
+import com.vaadin.tests.tb3.MultiBrowserTest;
+
+public class RichTextAreaRelativeHeightResizeTest extends MultiBrowserTest {
+
+    @Test
+    public void testCenteredClosingAndPostLayout() {
+        openTestURL();
+
+        int originalHeight = driver
+                .findElement(By.cssSelector(".v-richtextarea")).getSize()
+                .getHeight();
+        int originalEditorHeight = driver
+                .findElement(By.cssSelector(".v-richtextarea iframe"))
+                .getSize().getHeight();
+
+        // Increase the component height
+        driver.findElement(By.cssSelector(".v-button")).click();
+
+        int newHeight = driver.findElement(By.cssSelector(".v-richtextarea"))
+                .getSize().getHeight();
+        int newEditorHeight = driver
+                .findElement(By.cssSelector(".v-richtextarea iframe"))
+                .getSize().getHeight();
+
+        // Check that the component height changed and that the editor height
+        // changed equally as much
+        Assert.assertTrue("RichTextArea height didn't change",
+                newHeight != originalHeight);
+        Assert.assertEquals(
+                "Editor height change didn't match the Component height change",
+                newHeight - originalHeight, newEditorHeight
+                        - originalEditorHeight);
+    }
+}