Make responsive work with setTheme (#15281)

The size break points are now parsed again when the theme is changed

Change-Id: Ic1583926942966fda29025e4cf2d7298691189f9

3 files changed, 184 insertions, 25 deletions

diff --git a/client/src/com/vaadin/client/extensions/ResponsiveConnector.java b/client/src/com/vaadin/client/extensions/ResponsiveConnector.java
index 8e349bac7b..e88025531b 100644
--- a/client/src/com/vaadin/client/extensions/ResponsiveConnector.java
+++ b/client/src/com/vaadin/client/extensions/ResponsiveConnector.java
@@ -24,11 +24,13 @@ import com.google.gwt.dom.client.Element;
 import com.vaadin.client.BrowserInfo;
 import com.vaadin.client.LayoutManager;
 import com.vaadin.client.ServerConnector;
+import com.vaadin.client.communication.StateChangeEvent;
 import com.vaadin.client.ui.AbstractComponentConnector;
 import com.vaadin.client.ui.layout.ElementResizeEvent;
 import com.vaadin.client.ui.layout.ElementResizeListener;
 import com.vaadin.server.Responsive;
 import com.vaadin.shared.ui.Connect;
+import com.vaadin.shared.util.SharedUtil;
 
 /**
  * The client side connector for the Responsive extension.
@@ -68,6 +70,12 @@ public class ResponsiveConnector extends AbstractExtensionConnector implements
      */
     protected static JavaScriptObject heightRangeCache;
 
+    /**
+     * The theme that was in use when the width and height range caches were
+     * created.
+     */
+    protected static String parsedTheme;
+
     private static Logger getLogger() {
         return Logger.getLogger(ResponsiveConnector.class.getName());
     }
@@ -78,16 +86,7 @@ public class ResponsiveConnector extends AbstractExtensionConnector implements
 
     @Override
     protected void extend(ServerConnector target) {
-        // Initialize cache if not already done
-        if (widthRangeCache == null) {
-            searchForBreakPoints();
-        }
-
         this.target = (AbstractComponentConnector) target;
-
-        // Get any breakpoints from the styles defined for this widget
-        getBreakPointsFor(constructSelectorsForTarget());
-
         // Start listening for size changes
         LayoutManager.get(getConnection()).addElementResizeListener(
                 this.target.getWidget().getElement(), this);
@@ -131,11 +130,37 @@ public class ResponsiveConnector extends AbstractExtensionConnector implements
                 target.getWidget().getElement(), this);
     }
 
+    @Override
+    public void onStateChanged(StateChangeEvent event) {
+        super.onStateChanged(event);
+        // Changing the theme may introduce new style sheets so we may need to
+        // rebuild the cache
+        if (widthRangeCache == null
+                || !SharedUtil.equals(parsedTheme, getCurrentThemeName())) {
+            // updating break points
+            searchForBreakPoints();
+        }
+        // Get any breakpoints from the styles defined for this widget
+        getBreakPointsFor(constructSelectorsForTarget());
+        // make sure that the ranges are updated at least once regardless of
+        // resize events.
+        updateRanges();
+    }
+
+    private String getCurrentThemeName() {
+        return getConnection().getUIConnector().getActiveTheme();
+    }
+
+    private void searchForBreakPoints() {
+        searchForBreakPointsNative();
+        parsedTheme = getCurrentThemeName();
+    }
+
     /**
      * Build a cache of all 'width-range' and 'height-range' attribute selectors
      * found in the stylesheets.
      */
-    private static native void searchForBreakPoints()
+    private static native void searchForBreakPointsNative()
     /*-{
 
         // Initialize variables
@@ -307,36 +332,36 @@ public class ResponsiveConnector extends AbstractExtensionConnector implements
 
     @Override
     public void onElementResize(final ElementResizeEvent event) {
-        int width = event.getLayoutManager().getOuterWidth(event.getElement());
-        int height = event.getLayoutManager()
-                .getOuterHeight(event.getElement());
+        updateRanges();
+    }
 
+    private void updateRanges() {
+        LayoutManager layoutManager = LayoutManager.get(getConnection());
         com.google.gwt.user.client.Element element = target.getWidget()
                 .getElement();
+        int width = layoutManager.getOuterWidth(element);
+        int height = layoutManager.getOuterHeight(element);
+
         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());
+        currentWidthRanges = resolveBreakpoint("width", width);
 
         if (!"".equals(currentWidthRanges)) {
-            target.getWidget().getElement()
-                    .setAttribute("width-range", currentWidthRanges);
+            element.setAttribute("width-range", currentWidthRanges);
             forceRedraw = true;
         } else {
             element.removeAttribute("width-range");
         }
 
         // Loop through breakpoints and see which one applies to this height
-        currentHeightRanges = resolveBreakpoint("height", height,
-                event.getElement());
+        currentHeightRanges = resolveBreakpoint("height", height);
 
         if (!"".equals(currentHeightRanges)) {
-            target.getWidget().getElement()
-                    .setAttribute("height-range", currentHeightRanges);
+            element.setAttribute("height-range", currentHeightRanges);
             forceRedraw = true;
         } else {
             element.removeAttribute("height-range");
@@ -350,8 +375,8 @@ public class ResponsiveConnector extends AbstractExtensionConnector implements
         // case some new styles are applied
         if (!currentWidthRanges.equals(oldWidthRanges)
                 || !currentHeightRanges.equals(oldHeightRanges)) {
-            event.getLayoutManager().setNeedsMeasureRecursively(
-                    ResponsiveConnector.this.target);
+            layoutManager
+                    .setNeedsMeasureRecursively(ResponsiveConnector.this.target);
         }
     }
 
@@ -370,8 +395,7 @@ public class ResponsiveConnector extends AbstractExtensionConnector implements
         }
     }
 
-    private native String resolveBreakpoint(String which, int size,
-            Element element)
+    private native String resolveBreakpoint(String which, int size)
     /*-{
 
         // Default to "width" breakpoints
diff --git a/uitest/src/com/vaadin/tests/extensions/SetThemeAndResponsiveLayout.java b/uitest/src/com/vaadin/tests/extensions/SetThemeAndResponsiveLayout.java
new file mode 100644
index 0000000000..f3df1a1176
--- /dev/null
+++ b/uitest/src/com/vaadin/tests/extensions/SetThemeAndResponsiveLayout.java
@@ -0,0 +1,59 @@
+/*
+ * 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.server.Responsive;
+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.CssLayout;
+import com.vaadin.ui.Label;
+
+public class SetThemeAndResponsiveLayout extends AbstractTestUI {
+
+    @Override
+    protected void setup(VaadinRequest request) {
+        getLayout().setSizeFull();
+        CssLayout responsiveLayout = new CssLayout();
+        responsiveLayout.addStyleName("width-and-height");
+        responsiveLayout.setSizeFull();
+        setContent(responsiveLayout);
+        responsiveLayout
+                .addComponent(new Label(
+                        "First set the theme using the button and then resize the browser window in both dimensions to see the background color change."));
+        Button setThemeButton = new Button("Set theme");
+        setThemeButton.addClickListener(new Button.ClickListener() {
+            @Override
+            public void buttonClick(ClickEvent event) {
+                setTheme("tests-responsive");
+            }
+        });
+        responsiveLayout.addComponent(setThemeButton);
+        Responsive.makeResponsive(responsiveLayout);
+    }
+
+    @Override
+    protected String getTestDescription() {
+        return "This test verifies that responsive works also when theme is set using setTheme method";
+    };
+
+    @Override
+    protected Integer getTicketNumber() {
+        return 15281;
+    };
+
+}
diff --git a/uitest/src/com/vaadin/tests/extensions/SetThemeAndResponsiveLayoutTest.java b/uitest/src/com/vaadin/tests/extensions/SetThemeAndResponsiveLayoutTest.java
new file mode 100644
index 0000000000..8a1fbde245
--- /dev/null
+++ b/uitest/src/com/vaadin/tests/extensions/SetThemeAndResponsiveLayoutTest.java
@@ -0,0 +1,76 @@
+/*
+ * 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 static org.junit.Assert.assertEquals;
+
+import java.util.List;
+
+import org.junit.Before;
+import org.junit.Test;
+import org.openqa.selenium.remote.DesiredCapabilities;
+import org.openqa.selenium.support.ui.ExpectedConditions;
+import org.openqa.selenium.support.ui.WebDriverWait;
+
+import com.vaadin.testbench.By;
+import com.vaadin.testbench.elements.ButtonElement;
+import com.vaadin.testbench.elements.CssLayoutElement;
+import com.vaadin.tests.tb3.MultiBrowserTest;
+
+public class SetThemeAndResponsiveLayoutTest extends MultiBrowserTest {
+
+    @Before
+    public void setUp() throws Exception {
+        // We need this in order to ensure that the initial width-range is
+        // width: 600px- and height: 500px-
+        testBench().resizeViewPortTo(1024, 768);
+    }
+
+    @Override
+    public List<DesiredCapabilities> getBrowsersToTest() {
+        // Seems like stylesheet onload is not fired on PhantomJS
+        // https://github.com/ariya/phantomjs/issues/12332
+        return super.getBrowsersExcludingPhantomJS();
+    }
+
+    @Test
+    public void testWidthAndHeightRanges() throws Exception {
+        openTestURL();
+        // IE sometimes has trouble waiting long enough.
+        new WebDriverWait(getDriver(), 30).until(ExpectedConditions
+                .presenceOfElementLocated(By
+                        .cssSelector(".v-csslayout-width-and-height")));
+        // set the theme programmatically
+        $(ButtonElement.class).caption("Set theme").first().click();
+        new WebDriverWait(getDriver(), 30).until(ExpectedConditions
+                .presenceOfElementLocated(By.xpath("//div[@width-range]")));
+
+        // Verify both width-range and height-range.
+        assertEquals("600px-",
+                $(CssLayoutElement.class).first().getAttribute("width-range"));
+        assertEquals("500px-",
+                $(CssLayoutElement.class).first().getAttribute("height-range"));
+
+        // Resize
+        testBench().resizeViewPortTo(550, 450);
+
+        // Verify updated width-range and height-range.
+        assertEquals("0-599px",
+                $(CssLayoutElement.class).first().getAttribute("width-range"));
+        assertEquals("0-499px",
+                $(CssLayoutElement.class).first().getAttribute("height-range"));
+    }
+}