Fix Grid jerky resize in vertical split panel (#18370)

This patch makes SplitPanels overflow hidden when there is a full
height/width widget in the container.

Change-Id: I9cb80019806cd5237b7e07fdda05d44e50d3b929

client/src/com/vaadin/client/ui/VAbstractSplitPanel.java

@@ -49,7 +49,7 @@ import com.vaadin.client.ui.TouchScrollDelegate.TouchScrollHandler;
 import com.vaadin.client.ui.VAbstractSplitPanel.SplitterMoveHandler.SplitterMoveEvent;
 import com.vaadin.shared.ui.Orientation;
 
-public class VAbstractSplitPanel extends ComplexPanel {
+public abstract class VAbstractSplitPanel extends ComplexPanel {
 
     private boolean enabled = false;
 
@@ -571,6 +571,7 @@ public class VAbstractSplitPanel extends ComplexPanel {
             }
             break;
         case Event.ONCLICK:
+            stopResize();
             resizing = false;
             break;
         }
@@ -590,6 +591,7 @@ public class VAbstractSplitPanel extends ComplexPanel {
         }
         final Element trg = event.getEventTarget().cast();
         if (trg == splitter || trg == DOM.getChild(splitter, 0)) {
+            startResize();
             resizing = true;
             DOM.setCapture(getElement());
             origX = DOM.getElementPropertyInt(splitter, "offsetLeft");
@@ -601,6 +603,40 @@ public class VAbstractSplitPanel extends ComplexPanel {
         }
     }
 
+    /**
+     * Called when starting drag resize
+     * 
+     * @since
+     */
+    abstract protected void startResize();
+
+    /**
+     * Called when stopping drag resize
+     * 
+     * @since
+     */
+    abstract protected void stopResize();
+
+    /**
+     * Gets the first container
+     * 
+     * @since
+     * @return the firstContainer
+     */
+    protected Element getFirstContainer() {
+        return firstContainer;
+    }
+
+    /**
+     * Gets the second container
+     * 
+     * @since
+     * @return the secondContainer
+     */
+    protected Element getSecondContainer() {
+        return secondContainer;
+    }
+
     public void onMouseMove(Event event) {
         switch (orientation) {
         case HORIZONTAL:
@@ -685,6 +721,7 @@ public class VAbstractSplitPanel extends ComplexPanel {
     public void onMouseUp(Event event) {
         DOM.releaseCapture(getElement());
         hideDraggingCurtain();
+        stopResize();
         resizing = false;
         if (!WidgetUtil.isTouchEvent(event)) {
             onMouseMove(event);

client/src/com/vaadin/client/ui/VSplitPanelHorizontal.java

@@ -16,6 +16,8 @@
 
 package com.vaadin.client.ui;
 
+import com.google.gwt.dom.client.Style.Overflow;
+import com.google.gwt.user.client.ui.Widget;
 import com.vaadin.shared.ui.Orientation;
 
 public class VSplitPanelHorizontal extends VAbstractSplitPanel {
@@ -23,4 +25,25 @@ public class VSplitPanelHorizontal extends VAbstractSplitPanel {
     public VSplitPanelHorizontal() {
         super(Orientation.HORIZONTAL);
     }
+
+    @Override
+    protected void startResize() {
+        if (isWidgetFullWidth(getFirstWidget())) {
+            getFirstContainer().getStyle().setOverflow(Overflow.HIDDEN);
+        }
+
+        if (isWidgetFullWidth(getSecondWidget())) {
+            getSecondContainer().getStyle().setOverflow(Overflow.HIDDEN);
+        }
+    }
+
+    @Override
+    protected void stopResize() {
+        getFirstContainer().getStyle().clearOverflow();
+        getSecondContainer().getStyle().clearOverflow();
+    }
+
+    private boolean isWidgetFullWidth(Widget w) {
+        return w.getElement().getStyle().getWidth().equals("100%");
+    }
 }

client/src/com/vaadin/client/ui/VSplitPanelVertical.java

@@ -16,6 +16,8 @@
 
 package com.vaadin.client.ui;
 
+import com.google.gwt.dom.client.Style.Overflow;
+import com.google.gwt.user.client.ui.Widget;
 import com.vaadin.shared.ui.Orientation;
 
 public class VSplitPanelVertical extends VAbstractSplitPanel {
@@ -23,4 +25,25 @@ public class VSplitPanelVertical extends VAbstractSplitPanel {
     public VSplitPanelVertical() {
         super(Orientation.VERTICAL);
     }
+
+    @Override
+    protected void startResize() {
+        if (isWidgetFullHeight(getFirstWidget())) {
+            getFirstContainer().getStyle().setOverflow(Overflow.HIDDEN);
+        }
+
+        if (isWidgetFullHeight(getSecondWidget())) {
+            getSecondContainer().getStyle().setOverflow(Overflow.HIDDEN);
+        }
+    }
+
+    @Override
+    protected void stopResize() {
+        getFirstContainer().getStyle().clearOverflow();
+        getSecondContainer().getStyle().clearOverflow();
+    }
+
+    private boolean isWidgetFullHeight(Widget w) {
+        return w.getElement().getStyle().getHeight().equals("100%");
+    }
 }