Fix for Valo notification mixins (#14872).

Change-Id: I6477557c605443419ee3fc9f3398ae5af4956aa7

WebContent/VAADIN/themes/runo/notification/notification.scss

@@ -16,7 +16,9 @@
 	margin: 10px;
 }
 .#{$primaryStyleName}-caption,
-.#{$primaryStyleName}-description {
+.#{$primaryStyleName}-description,
+.#{$primaryStyleName}-system .#{$primaryStyleName}-caption,
+.#{$primaryStyleName}-system .#{$primaryStyleName}-description {
 	display: inline;
 	font-weight: normal;
 	line-height: normal;

WebContent/VAADIN/themes/valo/components/_notification.scss

@@ -1,4 +1,4 @@
-/**
+ /**
  *
  * @group notification
  */
@@ -78,7 +78,7 @@ $v-notification-title-color: $v-focus-color !default;
     -ms-backface-visibility: hidden;
     backface-visibility: hidden;
 
-    @include valo-notification-style;
+    @include valo-notification-style($primary-stylename);
 
   }
 
@@ -111,8 +111,8 @@ $v-notification-title-color: $v-focus-color !default;
   }
   
   .#{$primary-stylename}-system {
-    @include valo-notification-bar-style;
-    @include valo-notification-system-style;
+    @include valo-notification-bar-style($primary-stylename);
+    @include valo-notification-system-style($primary-stylename);
   }
 
   .#{$primary-stylename}.tray {
@@ -129,25 +129,25 @@ $v-notification-title-color: $v-focus-color !default;
   }
 
   .#{$primary-stylename}.warning {
-    @include valo-notification-warning-style;
+    @include valo-notification-warning-style($primary-stylename);
   }
 
   .#{$primary-stylename}.error {
-    @include valo-notification-error-style;
+    @include valo-notification-error-style($primary-stylename);
   }
 
 
   @if $include-additional-styles {
     .#{$primary-stylename}.dark {
-      @include valo-notification-dark-style;
+      @include valo-notification-dark-style($primary-stylename);
     }
 
     .#{$primary-stylename}.bar {
-      @include valo-notification-bar-style;
+      @include valo-notification-bar-style($primary-stylename);
     }
 
     .#{$primary-stylename}.small {
-      @include valo-notification-small-style;
+      @include valo-notification-small-style($primary-stylename);
     }
 
     .#{$primary-stylename}.closable {
@@ -264,32 +264,32 @@ $v-notification-title-color: $v-focus-color !default;
 
 /**
  *
- *
+ * @param {string} $primary-style
  *
  * @group notification
  */
-@mixin valo-notification-style {
+@mixin valo-notification-style ($primary-style) {
   background: $v-overlay-background-color;
   @include box-shadow(0px 5px 15px 0px rgba(0,0,0,0.15));
   padding: round($v-unit-size/2) round($v-unit-size/1.7);
 
-  .#{$primary-stylename}-caption {
+  .#{$primary-style}-caption {
     color: $v-notification-title-color;
     font-size: round($v-font-size * 1.2);
     line-height: 1;
   }
-  .#{$primary-stylename}-description {
+  .#{$primary-style}-description {
     line-height: 1.4;
   }
 }
 
 /**
  *
- *
+ * @param {string} $primary-style
  *
  * @group notification
  */
-@mixin valo-notification-bar-style {
+@mixin valo-notification-bar-style ($primary-style) {
   left: 0 !important;
   right: 0;
   max-width: 100%;
@@ -298,7 +298,7 @@ $v-notification-title-color: $v-focus-color !default;
   @include box-shadow(0 0 20px 0 rgba(0,0,0,0.25));
   padding: round($v-unit-size/3) round($v-unit-size/2.5);
 
-  .#{$primary-stylename}-description {
+  .#{$primary-style}-description {
     max-width: 50em;
   }
 
@@ -337,30 +337,30 @@ $v-notification-title-color: $v-focus-color !default;
  *
  * @group notification
  */
-@mixin valo-notification-dark-style {
+@mixin valo-notification-dark-style ($primary-style) {
   background-color: #444;
   background-color: rgba(#444, .9);
   font-weight: $v-font-weight + 100;
   line-height: round($v-font-size * 1.4);
 
-  .#{$primary-stylename}-caption {
+  .#{$primary-style}-caption {
     color: #fff;
     vertical-align: middle;
   }
 
-  .#{$primary-stylename}-description {
+  .#{$primary-style}-description {
     color: #e6e6e6;
   }
 }
 
 /**
  *
- *
+ * @param {string} $primary-style
  *
  * @group notification
  */
-@mixin valo-notification-system-style {
-  @include valo-notification-dark-style;
+@mixin valo-notification-system-style ($primary-style) {
+  @include valo-notification-dark-style($primary-style);
 
   // No need to underline the "click here" text, let's imply that the whole banner is clickable
   u {
@@ -378,55 +378,55 @@ $v-notification-title-color: $v-focus-color !default;
 
 /**
  *
- *
+ * @param {string} $primary-style
  *
  * @group notification
  */
-@mixin valo-notification-warning-style {
+@mixin valo-notification-warning-style ($primary-style) {
   background: #FFF3D2;
 
-  .#{$primary-stylename}-caption {
+  .#{$primary-style}-caption {
     color: #AC7C00;
   }
 
-  .#{$primary-stylename}-description {
+  .#{$primary-style}-description {
     color: #9D874D;
   }
 }
 
 /**
  *
- *
+ * @param {string} $primary-style
  *
  * @group notification
  */
-@mixin valo-notification-error-style {
+@mixin valo-notification-error-style ($primary-style) {
   background: $v-error-indicator-color;
   font-weight: $v-font-weight + 100;
   @include box-shadow(0px 5px 15px 0px rgba(0,0,0,0.25));
 
-  .#{$primary-stylename}-caption {
+  .#{$primary-style}-caption {
     color: valo-font-color($v-error-indicator-color, 1);
   }
 
-  .#{$primary-stylename}-description {
+  .#{$primary-style}-description {
     color: valo-font-color($v-error-indicator-color, .8);
   }
 }
 
 /**
  *
- *
+ * @param {string} $primary-style
  *
  * @group notification
  */
-@mixin valo-notification-small-style {
+@mixin valo-notification-small-style ($primary-style) {
   padding: round($v-unit-size/3.3) round($v-unit-size/2.8);
 
-  .#{$primary-stylename}-caption {
+  .#{$primary-style}-caption {
     font-size: $v-font-size;
   }
-  .#{$primary-stylename}-description {
+  .#{$primary-style}-description {
     font-size: round($v-font-size * 0.85);
   }
 }

uitest/src/com/vaadin/tests/application/CriticalNotifications.java

@@ -0,0 +1,130 @@
+/*
+ * 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.application;
+
+import java.io.IOException;
+
+import com.vaadin.server.SystemMessages;
+import com.vaadin.server.VaadinRequest;
+import com.vaadin.server.VaadinResponse;
+import com.vaadin.server.VaadinService;
+import com.vaadin.shared.JsonConstants;
+import com.vaadin.tests.components.AbstractTestUI;
+import com.vaadin.ui.Button;
+import com.vaadin.ui.Button.ClickEvent;
+import com.vaadin.ui.Button.ClickListener;
+
+public class CriticalNotifications extends AbstractTestUI {
+
+    private SystemMessages systemMessages;
+
+    @Override
+    protected void setup(VaadinRequest request) {
+        systemMessages = VaadinService.getCurrent().getSystemMessages(
+                getLocale(), request);
+
+        Button sessionExpired = new Button("Session expired");
+        addComponent(sessionExpired);
+        sessionExpired.addClickListener(new ClickListener() {
+            @Override
+            public void buttonClick(ClickEvent event) {
+                showCriticalNotification(
+                        systemMessages.getSessionExpiredCaption(),
+                        systemMessages.getSessionExpiredMessage(), null,
+                        systemMessages.getSessionExpiredURL());
+
+            }
+        });
+
+        Button authenticationError = new Button("Authentication error");
+        addComponent(authenticationError);
+        authenticationError.addClickListener(new ClickListener() {
+            @Override
+            public void buttonClick(ClickEvent event) {
+                showCriticalNotification(
+                        systemMessages.getAuthenticationErrorCaption(),
+                        systemMessages.getAuthenticationErrorMessage(), null,
+                        systemMessages.getAuthenticationErrorURL());
+
+            }
+        });
+
+        Button communicationError = new Button("Communication error");
+        addComponent(communicationError);
+        communicationError.addClickListener(new ClickListener() {
+            @Override
+            public void buttonClick(ClickEvent event) {
+                showCriticalNotification(
+                        systemMessages.getCommunicationErrorCaption(),
+                        systemMessages.getCommunicationErrorMessage(), null,
+                        systemMessages.getCommunicationErrorURL());
+
+            }
+        });
+
+        Button internalError = new Button("Internal error");
+        addComponent(internalError);
+        internalError.addClickListener(new ClickListener() {
+            @Override
+            public void buttonClick(ClickEvent event) {
+                showCriticalNotification(
+                        systemMessages.getInternalErrorCaption(),
+                        systemMessages.getInternalErrorMessage(), null,
+                        systemMessages.getInternalErrorURL());
+
+            }
+        });
+
+        Button cookiesDisabled = new Button("Cookies disabled");
+        addComponent(cookiesDisabled);
+        cookiesDisabled.addClickListener(new ClickListener() {
+            @Override
+            public void buttonClick(ClickEvent event) {
+                showCriticalNotification(
+                        systemMessages.getCookiesDisabledCaption(),
+                        systemMessages.getCookiesDisabledMessage(), null,
+                        systemMessages.getCookiesDisabledURL());
+
+            }
+        });
+        Button custom = new Button("Custom");
+        addComponent(custom);
+        custom.addClickListener(new ClickListener() {
+            @Override
+            public void buttonClick(ClickEvent event) {
+                showCriticalNotification("Custom caption", "Custom message",
+                        "Custom details", "custom url");
+
+            }
+        });
+    }
+
+    protected void showCriticalNotification(String caption, String message,
+            String details, String url) {
+        VaadinService service = VaadinService.getCurrent();
+        VaadinResponse response = VaadinService.getCurrentResponse();
+
+        try {
+            service.writeStringResponse(response,
+                    JsonConstants.JSON_CONTENT_TYPE, VaadinService
+                            .createCriticalNotificationJSON(caption, message,
+                                    details, url));
+        } catch (IOException e) {
+            e.printStackTrace();
+        }
+
+    }
+}

uitest/src/com/vaadin/tests/application/CriticalNotificationsTestBase.java

@@ -0,0 +1,110 @@
+/*
+ * 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.application;
+
+import org.junit.Test;
+
+import com.vaadin.testbench.elements.ButtonElement;
+import com.vaadin.tests.tb3.MultiBrowserThemeTest;
+
+public abstract class CriticalNotificationsTestBase extends
+        MultiBrowserThemeTest {
+
+    public static class ValoCriticalNotificationsTest extends
+            CriticalNotificationsTestBase {
+        @Override
+        protected String getTheme() {
+            return "valo";
+        }
+    }
+
+    public static class ReindeerCriticalNotificationsTest extends
+            CriticalNotificationsTestBase {
+        @Override
+        protected String getTheme() {
+            return "reindeer";
+        }
+    }
+
+    public static class RunoCriticalNotificationsTest extends
+            CriticalNotificationsTestBase {
+        @Override
+        protected String getTheme() {
+            return "runo";
+        }
+    }
+
+    public static class ChameleonCriticalNotificationsTest extends
+            CriticalNotificationsTestBase {
+        @Override
+        protected String getTheme() {
+            return "chameleon";
+        }
+    }
+
+    public static class BaseCriticalNotificationsTest extends
+            CriticalNotificationsTestBase {
+        @Override
+        protected String getTheme() {
+            return "base";
+        }
+    }
+
+    @Test
+    public void authenticationError() throws Exception {
+        testCriticalNotification("Authentication error");
+    }
+
+    @Test
+    public void communicationError() throws Exception {
+        testCriticalNotification("Communication error");
+    }
+
+    @Test
+    public void internalError() throws Exception {
+        testCriticalNotification("Internal error");
+    }
+
+    @Test
+    public void cookiesDisabled() throws Exception {
+        testCriticalNotification("Cookies disabled");
+    }
+
+    @Test
+    public void custom() throws Exception {
+        testCriticalNotification("Custom");
+    }
+
+    @Test
+    public void sessionExpired() throws Exception {
+        testCriticalNotification("Session expired");
+    }
+
+    private void testCriticalNotification(String buttonCaption)
+            throws Exception {
+        openTestURL(); // "theme=" + getTheme());
+        $(ButtonElement.class).caption(buttonCaption).first().click();
+        // Give the notification some time to animate
+        sleep(1000);
+        compareScreen("notification");
+    }
+
+    @Override
+    protected Class<?> getUIClass() {
+        return CriticalNotifications.class;
+    }
+
+}

uitest/src/com/vaadin/tests/tb3/MultiBrowserThemeTest.java

@@ -0,0 +1,35 @@
+/*
+ * 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.tb3;
+
+import java.util.Arrays;
+import java.util.HashSet;
+import java.util.Set;
+
+/**
+ * Test which uses theme returned by {@link #getTheme()} for running the test
+ */
+public abstract class MultiBrowserThemeTest extends MultiBrowserTest {
+
+    protected abstract String getTheme();
+
+    @Override
+    protected void openTestURL(Class<?> uiClass, String... parameters) {
+        Set<String> params = new HashSet<String>(Arrays.asList(parameters));
+        params.add("theme=" + getTheme());
+        super.openTestURL(uiClass, params.toArray(new String[params.size()]));
+    }
+}