Allow changing theme on the fly (#2874, #14139, #14124)

* Updates UI and overlay container class names when the theme changes
* Initially verifies that the theme has actually been loaded (for the embed case)
  and class names have been properly set
* Forces a state change to all components to re-translate theme:// URLs
* Runs a full layout after the new theme has been loaded and activated

Change-Id: I5a7391abe1bb467130bbb4660e4829b43f3e4255

3 files changed, 261 insertions, 17 deletions

diff --git a/uitest/src/com/vaadin/tests/tb3/AbstractTB3Test.java b/uitest/src/com/vaadin/tests/tb3/AbstractTB3Test.java
index c4573fb9b8..a4d85775f7 100644
--- a/uitest/src/com/vaadin/tests/tb3/AbstractTB3Test.java
+++ b/uitest/src/com/vaadin/tests/tb3/AbstractTB3Test.java
@@ -16,15 +16,15 @@
 
 package com.vaadin.tests.tb3;
 
-import java.lang.annotation.ElementType;
-import java.lang.annotation.Retention;
-import java.lang.annotation.RetentionPolicy;
-import java.lang.annotation.Target;
-import java.net.URL;
-import java.util.Collections;
-import java.util.List;
-
+import com.thoughtworks.selenium.webdriven.WebDriverBackedSelenium;
+import com.vaadin.server.LegacyApplication;
+import com.vaadin.server.UIProvider;
+import com.vaadin.testbench.TestBench;
 import com.vaadin.testbench.TestBenchElement;
+import com.vaadin.testbench.TestBenchTestCase;
+import com.vaadin.tests.components.AbstractTestUIWithLog;
+import com.vaadin.tests.tb3.MultiBrowserTest.Browser;
+import com.vaadin.ui.UI;
 import org.junit.After;
 import org.junit.Before;
 import org.junit.runner.RunWith;
@@ -41,14 +41,13 @@ import org.openqa.selenium.support.ui.ExpectedCondition;
 import org.openqa.selenium.support.ui.ExpectedConditions;
 import org.openqa.selenium.support.ui.WebDriverWait;
 
-import com.thoughtworks.selenium.webdriven.WebDriverBackedSelenium;
-import com.vaadin.server.LegacyApplication;
-import com.vaadin.server.UIProvider;
-import com.vaadin.testbench.TestBench;
-import com.vaadin.testbench.TestBenchTestCase;
-import com.vaadin.tests.components.AbstractTestUIWithLog;
-import com.vaadin.tests.tb3.MultiBrowserTest.Browser;
-import com.vaadin.ui.UI;
+import java.lang.annotation.ElementType;
+import java.lang.annotation.Retention;
+import java.lang.annotation.RetentionPolicy;
+import java.lang.annotation.Target;
+import java.net.URL;
+import java.util.Collections;
+import java.util.List;
 
 import static com.vaadin.tests.tb3.TB3Runner.localWebDriverIsUsed;
 
@@ -224,7 +223,22 @@ public abstract class AbstractTB3Test extends TestBenchTestCase {
      * {@link #isPush()}.
      */
     protected void openTestURL() {
-        driver.get(getTestUrl());
+        openTestURL("");
+    }
+
+    /**
+     * Opens the given test (defined by {@link #getTestUrl()}, optionally with
+     * debug window and/or push (depending on {@link #isDebug()} and
+     * {@link #isPush()}.
+     */
+    protected void openTestURL(String extraParameters) {
+        String url = getTestUrl();
+        if (url.contains("?")) {
+            url = url + "&" + extraParameters;
+        } else {
+            url = url + "?" + extraParameters;
+        }
+        driver.get(url);
     }
 
     /**
diff --git a/uitest/src/com/vaadin/tests/themes/ThemeChangeOnTheFly.java b/uitest/src/com/vaadin/tests/themes/ThemeChangeOnTheFly.java
new file mode 100644
index 0000000000..ec22edd205
--- /dev/null
+++ b/uitest/src/com/vaadin/tests/themes/ThemeChangeOnTheFly.java
@@ -0,0 +1,109 @@
+/*
+ * Copyright 2000-2013 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.themes;
+
+import com.vaadin.annotations.Theme;
+import com.vaadin.server.ThemeResource;
+import com.vaadin.server.VaadinRequest;
+import com.vaadin.tests.components.AbstractTestUIWithLog;
+import com.vaadin.tests.util.PersonContainer;
+import com.vaadin.ui.Button;
+import com.vaadin.ui.Button.ClickEvent;
+import com.vaadin.ui.Button.ClickListener;
+import com.vaadin.ui.GridLayout;
+import com.vaadin.ui.HorizontalLayout;
+import com.vaadin.ui.Image;
+import com.vaadin.ui.Label;
+import com.vaadin.ui.Table;
+import com.vaadin.ui.VerticalLayout;
+import com.vaadin.ui.Window;
+
+@Theme("reindeer")
+public class ThemeChangeOnTheFly extends AbstractTestUIWithLog {
+
+    @Override
+    protected void setup(VaadinRequest request) {
+        Button inject = new Button("Inject blue background");
+        inject.addClickListener(new ClickListener() {
+
+            @Override
+            public void buttonClick(ClickEvent event) {
+                getPage().getStyles().add(
+                        ".v-app { background: blue !important;}");
+
+            }
+        });
+        addComponent(inject);
+
+        GridLayout gl = new GridLayout(2, 4);
+        gl.setCaption("Change theme by clicking a button");
+        for (final String theme : new String[] { "reindeer", "runo",
+                "chameleon", "base", null }) {
+            Button b = new Button(theme);
+            b.setId(theme + "");
+            b.addClickListener(new ClickListener() {
+
+                @Override
+                public void buttonClick(ClickEvent event) {
+                    getUI().setTheme(theme);
+                }
+            });
+            gl.addComponent(b);
+        }
+
+        Table t = new Table();
+        PersonContainer pc = PersonContainer.createWithTestData();
+        pc.addNestedContainerBean("address");
+        t.setContainerDataSource(pc);
+        gl.addComponent(t, 0, 3, 1, 3);
+        gl.setRowExpandRatio(3, 1);
+
+        gl.setWidth("500px");
+        gl.setHeight("800px");
+
+        HorizontalLayout images = new HorizontalLayout();
+        images.setSpacing(true);
+
+        Label l = new Label("Chameleon theme image in caption");
+        l.setIcon(new ThemeResource("img/magnifier.png"));
+        images.addComponent(l);
+        Image image = new Image("Runo theme image", new ThemeResource(
+                "icons/64/ok.png"));
+        images.addComponent(image);
+        image = new Image("Reindeer theme image", new ThemeResource(
+                "button/img/left-focus.png"));
+        images.addComponent(image);
+        addComponent(images);
+        addComponent(gl);
+
+        getLayout().setSpacing(true);
+
+        Window w = new Window();
+        w.setContent(new VerticalLayout(new Button("Button in window")));
+        addWindow(w);
+    }
+
+    @Override
+    protected String getTestDescription() {
+        return "Test that you can change theme on the fly";
+    }
+
+    @Override
+    protected Integer getTicketNumber() {
+        return 2874;
+    }
+
+}
diff --git a/uitest/src/com/vaadin/tests/themes/ThemeChangeOnTheFlyTest.java b/uitest/src/com/vaadin/tests/themes/ThemeChangeOnTheFlyTest.java
new file mode 100644
index 0000000000..eb010e82ee
--- /dev/null
+++ b/uitest/src/com/vaadin/tests/themes/ThemeChangeOnTheFlyTest.java
@@ -0,0 +1,121 @@
+/*
+ * Copyright 2000-2013 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.themes;
+
+import java.io.IOException;
+import java.util.List;
+
+import org.junit.Assert;
+import org.junit.Test;
+import org.openqa.selenium.By;
+import org.openqa.selenium.WebDriver;
+import org.openqa.selenium.WebElement;
+import org.openqa.selenium.remote.DesiredCapabilities;
+import org.openqa.selenium.support.ui.ExpectedCondition;
+
+import com.vaadin.testbench.elements.ButtonElement;
+import com.vaadin.tests.tb3.MultiBrowserTest;
+
+public class ThemeChangeOnTheFlyTest extends MultiBrowserTest {
+
+    @Override
+    public List<DesiredCapabilities> getBrowsersToTest() {
+        // Seems like stylesheet onload is not fired on PhantomJS
+        // https://github.com/ariya/phantomjs/issues/12332
+        List<DesiredCapabilities> l = super.getBrowsersToTest();
+        l.remove(Browser.PHANTOMJS.getDesiredCapabilities());
+        return l;
+    }
+
+    @Test
+    public void injectedStyleAndThemeChange() throws IOException {
+        openTestURL();
+        $(ButtonElement.class).caption("Inject blue background").first()
+                .click();
+        changeTheme("runo");
+        compareScreen("runo-blue-background");
+    }
+
+    @Test
+    public void reindeerToOthers() throws IOException {
+        openTestURL();
+        compareScreen("reindeer");
+
+        changeThemeAndCompare("runo");
+        changeThemeAndCompare("chameleon");
+        changeThemeAndCompare("base");
+
+    }
+
+    @Test
+    public void runoToReindeer() throws IOException {
+        openTestURL("theme=runo");
+        compareScreen("runo");
+        changeThemeAndCompare("reindeer");
+    }
+
+    @Test
+    public void reindeerToNullToReindeer() throws IOException {
+        openTestURL();
+
+        changeThemeAndCompare("null");
+        changeThemeAndCompare("reindeer");
+    }
+
+    private void changeThemeAndCompare(String theme) throws IOException {
+        changeTheme(theme);
+        compareScreen(theme);
+    }
+
+    private void changeTheme(String theme) {
+        $(ButtonElement.class).id(theme).click();
+        if (theme.equals("null")) {
+            waitForThemeToChange("");
+            assertOverlayTheme("");
+        } else {
+            waitForThemeToChange(theme);
+            assertOverlayTheme(theme);
+        }
+    }
+
+    private void waitForThemeToChange(final String theme) {
+
+        final WebElement rootDiv = findElement(By
+                .xpath("//div[contains(@class,'v-app')]"));
+        waitUntil(new ExpectedCondition<Boolean>() {
+
+            @Override
+            public Boolean apply(WebDriver input) {
+                String rootClass = rootDiv.getAttribute("class").trim();
+                String expected = "v-app " + theme;
+                expected = expected.trim();
+                return rootClass.equals(expected);
+            }
+        }, 30);
+    }
+
+    private void assertOverlayTheme(String theme) {
+        final WebElement overlayContainerDiv = findElement(By
+                .xpath("//div[contains(@class,'v-overlay-container')]"));
+        String expected = "v-app v-overlay-container " + theme;
+        expected = expected.trim();
+
+        String overlayClass = overlayContainerDiv.getAttribute("class").trim();
+
+        Assert.assertEquals(expected, overlayClass);
+    }
+
+}