ResponsiveConnector should request layout update when breakpoints change

(#14354)

Change-Id: Ie995268f8d89a951e9ebb351edde4ba1e824101e

WebContent/VAADIN/themes/tests-responsive/styles.css

@@ -98,4 +98,19 @@
 }
 .v-csslayout-width-and-height[height-range~="500px-"][width-range~="600px-"] {
 	background: red;
-}
+}
+
+/* Styles for ResponsiveLayoutUpdate test */
+.layout-update .change-width {
+  white-space: normal;
+  background: #ddd;
+}
+.layout-update[width-range="0-599px"] .change-width {
+  width: 200px;
+  height: 200px;
+}
+
+.layout-update[width-range="600px-"] .change-width {
+  width: 300px;
+  height: 300px;
+}

client/src/com/vaadin/client/extensions/ResponsiveConnector.java

@@ -302,11 +302,11 @@ public class ResponsiveConnector extends AbstractExtensionConnector implements
 
     }-*/;
 
-    private String currentWidthRanges;
-    private String currentHeightRanges;
+    private String currentWidthRanges = "";
+    private String currentHeightRanges = "";
 
     @Override
-    public void onElementResize(ElementResizeEvent event) {
+    public void onElementResize(final ElementResizeEvent event) {
         int width = event.getLayoutManager().getOuterWidth(event.getElement());
         int height = event.getLayoutManager()
                 .getOuterHeight(event.getElement());
@@ -315,6 +315,9 @@ public class ResponsiveConnector extends AbstractExtensionConnector implements
                 .getElement();
         boolean forceRedraw = false;
 
+        String oldWidthRanges = currentWidthRanges;
+        String oldHeightRanges = currentHeightRanges;
+
         // Loop through breakpoints and see which one applies to this width
         currentWidthRanges = resolveBreakpoint("width", width,
                 event.getElement());
@@ -342,6 +345,14 @@ public class ResponsiveConnector extends AbstractExtensionConnector implements
         if (forceRedraw) {
             forceRedrawIfIE8(element);
         }
+
+        // If a new breakpoint is triggered, ensure all sizes are updated in
+        // case some new styles are applied
+        if (!currentWidthRanges.equals(oldWidthRanges)
+                || !currentHeightRanges.equals(oldHeightRanges)) {
+            event.getLayoutManager().setNeedsMeasureRecursively(
+                    ResponsiveConnector.this.target);
+        }
     }
 
     /**

uitest/src/com/vaadin/tests/extensions/ResponsiveLayoutUpdate.java

@@ -0,0 +1,61 @@
+/*
+ * 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.extensions;
+
+import com.vaadin.annotations.Theme;
+import com.vaadin.server.Responsive;
+import com.vaadin.server.VaadinRequest;
+import com.vaadin.tests.components.AbstractTestUI;
+import com.vaadin.ui.HorizontalLayout;
+import com.vaadin.ui.Label;
+import com.vaadin.ui.Panel;
+
+@Theme("tests-responsive")
+public class ResponsiveLayoutUpdate extends AbstractTestUI {
+
+    @Override
+    protected void setup(VaadinRequest request) {
+        HorizontalLayout layout = new HorizontalLayout();
+        layout.addStyleName("layout-update");
+        layout.setWidth("100%");
+        setContent(layout);
+        Responsive.makeResponsive(layout);
+
+        Label label = new Label(
+                "This label changes its size between the breakpoints, allowing more space for the adjacent component.");
+        label.addStyleName("change-width");
+        label.setSizeUndefined();
+        layout.addComponent(label);
+
+        Panel panel = new Panel("Panel");
+        panel.setContent(new Label(
+                "This Panel should be maximized in both breakpoints."));
+        panel.setSizeFull();
+        layout.addComponent(panel);
+        layout.setExpandRatio(panel, 1);
+    }
+
+    @Override
+    protected String getTestDescription() {
+        return "A new layout phase should be requested after a new breakpoint is triggered, ensuring any style changes affecting component sizes are taken into account.";
+    }
+
+    @Override
+    protected Integer getTicketNumber() {
+        return 14354;
+    }
+}

uitest/src/com/vaadin/tests/extensions/ResponsiveLayoutUpdateTest.java

@@ -0,0 +1,52 @@
+/*
+ * 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.extensions;
+
+import org.junit.Test;
+import org.openqa.selenium.WebDriver;
+import org.openqa.selenium.support.ui.ExpectedCondition;
+
+import com.vaadin.testbench.By;
+import com.vaadin.testbench.elements.PanelElement;
+import com.vaadin.tests.tb3.MultiBrowserTest;
+
+public class ResponsiveLayoutUpdateTest extends MultiBrowserTest {
+
+    @Test
+    public void testWidthAndHeightRanges() throws Exception {
+        openTestURL();
+
+        final PanelElement panelElement = $(PanelElement.class).first();
+        // I currently have no idea why PhantomJS wants a click here to work
+        // properly
+        panelElement.click();
+        waitForElementVisible(By.cssSelector(".layout-update"));
+
+        compareScreen("large");
+
+        // Resize below 600px width breakpoint
+        testBench().resizeViewPortTo(400, 768);
+
+        waitUntil(new ExpectedCondition<Boolean>() {
+            @Override
+            public Boolean apply(WebDriver input) {
+                return panelElement.getSize().getWidth() < 500;
+            }
+        });
+        compareScreen("small");
+    }
+}