Notification styles should be scoped more eagerly (#14872)

Change-Id: Ifb648b8913c9999d3c0c855f05f79c8356577887

WebContent/VAADIN/themes/base/notification/notification.scss

@@ -10,12 +10,12 @@
 	opacity: .9;
 	filter: alpha(opacity=90);
 }
-.#{$primaryStyleName} h1,
-.#{$primaryStyleName} p,
-.#{$primaryStyleName}-error h1,
-.#{$primaryStyleName}-error p,
-.#{$primaryStyleName}-warning h1,
-.#{$primaryStyleName}-warning p {
+.#{$primaryStyleName} .#{$primaryStyleName}-caption,
+.#{$primaryStyleName} .#{$primaryStyleName}-description,
+.#{$primaryStyleName}-error .#{$primaryStyleName}-caption,
+.#{$primaryStyleName}-error .#{$primaryStyleName}-description,
+.#{$primaryStyleName}-warning .#{$primaryStyleName}-caption,
+.#{$primaryStyleName}-warning .#{$primaryStyleName}-description {
 	display: inline;
 	margin: 0 0.5em 0 0;
 }
@@ -25,16 +25,16 @@
 .#{$primaryStyleName}-error {
 	background: red;
 }
-.#{$primaryStyleName}-tray h1 {
+.#{$primaryStyleName}-tray .#{$primaryStyleName}-caption {
 	display: block;
 }
-.#{$primaryStyleName}-tray p {
+.#{$primaryStyleName}-tray .#{$primaryStyleName}-description {
 	display: block;
 }
 .#{$primaryStyleName}-system {
 	background-color: red;
 }
-.#{$primaryStyleName}-system h1 {
+.#{$primaryStyleName}-system .#{$primaryStyleName}-caption {
 	display: block;
 	margin: 0;
 }

WebContent/VAADIN/themes/chameleon/components/notification/notification.scss

@@ -13,7 +13,7 @@ div.#{$primaryStyleName} {
 	background:rgba(255,255,255,.90) url(../../img/grad-light-top.png) repeat-x;
 	}
 
-.#{$primaryStyleName} p {
+.#{$primaryStyleName}-description {
 	line-height: 1.3;
 	}
 
@@ -23,7 +23,7 @@ div.#{$primaryStyleName}-warning {
 	border: 2px solid #fee3af;
 	}
 
-div.#{$primaryStyleName}-warning h1 {
+div.#{$primaryStyleName}-warning .#{$primaryStyleName}-caption {
 	padding-left: 44px;
 	background: transparent url(../../img/label-warning-icon-big.png) no-repeat 0 50%;
 	}
@@ -35,7 +35,7 @@ div.#{$primaryStyleName}-error {
 	border: 2px solid #ca3030;
 	}
 
-div.#{$primaryStyleName}-error h1 {
+div.#{$primaryStyleName}-error .#{$primaryStyleName}-caption {
 	padding-left: 44px;
 	background: transparent url(../../img/label-error-icon-big.png) no-repeat 0 50%;
 	}
@@ -52,12 +52,12 @@ div.#{$primaryStyleName}-tray {
 	text-shadow: 0 1px 1px rgba(0,0,0,.5);
 	}
 
-.#{$primaryStyleName}-tray h1 {
+.#{$primaryStyleName}-tray .#{$primaryStyleName}-caption {
 	font-size: 14px;
 	line-height: 18px;
 	}
 
-.#{$primaryStyleName}-tray p {
+.#{$primaryStyleName}-tray .#{$primaryStyleName}-description {
 	font-size: 12px;
 	font-weight: normal;
 	}
@@ -68,4 +68,4 @@ div.#{$primaryStyleName}-system {
 	background-color: #b40000;
 	}
 
-}
+}

WebContent/VAADIN/themes/liferay/notification/notification.scss

@@ -11,12 +11,8 @@
 	border: 1px solid #a7cedf;
 }
 
-.v-Notification h1,
-.v-Notification p,
-.v-Notification-error h1,
-.v-Notification-error p,
-.v-Notification-warning h1,
-.v-Notification-warning p {
+.v-Notification-caption,
+.v-Notification-description {
 	display: inline;
 	margin: 0 0.5em 0 0;
 }
@@ -34,19 +30,19 @@
 	background-color: #e5e5e5;
 	border-color: #b5b5b5;
 }
-.v-Notification-tray h1 {
+.v-Notification-tray .v-Notification-caption {
 	display: block;
 }
-.v-Notification-tray p {
+.v-Notification-tray .v-Notification-description {
 	display: block;
 }
 .v-Notification-system {
 	background-color: #ffdddd;
 	border-color: #ff0000;
 }
-.v-Notification-system h1 {
+.v-Notification-system .v-Notification-caption {
 	display: block;
 	margin: 0;
 }
 
-}
+}

WebContent/VAADIN/themes/reindeer/notification/notification.scss

@@ -11,13 +11,12 @@
 }
 
 .v-ie9 &, .v-ie10 & {
-	.#{$primaryStyleName} H1 {
-	/* Fix for #6793 */
-	font-weight: bold;
+	.#{$primaryStyleName}-caption {
+		/* Fix for #6793 */
+		font-weight: bold;
 	}
 }
-	
-.#{$primaryStyleName} p {
+.#{$primaryStyleName}-description {
 	line-height: 1.3;
 }
 .#{$primaryStyleName}-warning {
@@ -35,11 +34,11 @@
 	border: 2px solid #585b5c;
 	padding: 0.8em 0.9em;
 }
-.#{$primaryStyleName}-tray h1 {
+.#{$primaryStyleName}-tray .#{$primaryStyleName}-caption {
 	font-size: 14px;
 	line-height: 18px;
 }
-.#{$primaryStyleName}-tray p {
+.#{$primaryStyleName}-tray .#{$primaryStyleName}-description {
 	font-size: 12px;
 	font-weight: normal;
 }
@@ -47,4 +46,4 @@
 	background-color: #b40000;
 }
 
-}
+}

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

@@ -15,12 +15,12 @@
 	-moz-box-shadow: 0 3px 10px rgba(0,0,0,.3);
 	margin: 10px;
 }
-.#{$primaryStyleName} h1,
-.#{$primaryStyleName} p,
-.#{$primaryStyleName}-error h1,
-.#{$primaryStyleName}-error p,
-.#{$primaryStyleName}-warning h1,
-.#{$primaryStyleName}-warning p {
+.#{$primaryStyleName} .#{$primaryStyleName}-caption,
+.#{$primaryStyleName} .#{$primaryStyleName}-description,
+.#{$primaryStyleName}-error .#{$primaryStyleName}-caption,
+.#{$primaryStyleName}-error .#{$primaryStyleName}-description,
+.#{$primaryStyleName}-warning .#{$primaryStyleName}-caption,
+.#{$primaryStyleName}-warning .#{$primaryStyleName}-description  {
 	display: inline;
 	font-weight: normal;
 	line-height: normal;
@@ -43,7 +43,7 @@
 	-moz-box-shadow: 0 3px 6px rgba(0,0,0,.5);
 	max-width: 17em;
 }
-.#{$primaryStyleName}-tray h1 {
+.#{$primaryStyleName}-tray .#{$primaryStyleName}-caption {
 	display: block;
 	font-weight: bold;
 	font-size: 11.7px;
@@ -55,7 +55,7 @@
 	-webkit-border-radius: 2px;
 	border-radius: 2px;
 }
-.#{$primaryStyleName}-tray p {
+.#{$primaryStyleName}-tray .#{$primaryStyleName}-description {
 	display: block;
 	font-size: 10.4px;
 	line-height: 1.2;
@@ -68,4 +68,4 @@
 	padding: 14px 32px;
 }
 
-}
+}

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

@@ -78,7 +78,7 @@ $v-notification-title-color: $v-focus-color !default;
     -ms-backface-visibility: hidden;
     backface-visibility: hidden;
 
-    h1 {
+    .#{$primary-stylename}-caption {
       margin: 0;
       display: inline-block;
       text-align: left;
@@ -88,7 +88,7 @@ $v-notification-title-color: $v-focus-color !default;
       letter-spacing: 0;
     }
 
-    p {
+    .#{$primary-stylename}-description {
       margin: 0;
       display: inline-block;
       vertical-align: middle;
@@ -98,11 +98,11 @@ $v-notification-title-color: $v-focus-color !default;
       overflow: auto;
     }
 
-    h1 ~ p {
+    .#{$primary-stylename}-caption ~ .#{$primary-stylename}-description {
       margin-left: round($v-font-size * 1.5);
     }
 
-    .v-icon + h1 {
+    .v-icon + .#{$primary-stylename}-caption {
       margin-left: round($v-font-size);
     }
 
@@ -117,11 +117,11 @@ $v-notification-title-color: $v-focus-color !default;
 
   .#{$primary-stylename}.tray {
     text-align: left;
-    h1 {
+    .#{$primary-stylename}-caption {
       //display: block;
     }
 
-    h1 + p {
+    .#{$primary-stylename}-caption + .#{$primary-stylename}-description {
       display: block;
       margin: .5em 0 0;
     }
@@ -179,7 +179,7 @@ $v-notification-title-color: $v-focus-color !default;
       color: #555;
       border: 2px solid $v-friendly-color;
 
-      h1 {
+      .#{$primary-stylename}-caption {
         color: $v-friendly-color;
         font-weight: $v-font-weight + 100;
 
@@ -198,7 +198,7 @@ $v-notification-title-color: $v-focus-color !default;
     .#{$primary-stylename}.failure {
       border-color: $v-error-indicator-color;
 
-      h1 {
+      .#{$primary-stylename}-caption {
         color: $v-error-indicator-color;
 
         &:before {
@@ -273,12 +273,12 @@ $v-notification-title-color: $v-focus-color !default;
   @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);
 
-  h1 {
+  .#{$primary-stylename}-caption {
     color: $v-notification-title-color;
     font-size: round($v-font-size * 1.2);
     line-height: 1;
   }
-  p {
+  .#{$primary-stylename}-description {
     line-height: 1.4;
   }
 }
@@ -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);
 
-  p {
+  .#{$primary-stylename}-description {
     max-width: 50em;
   }
 
@@ -343,12 +343,12 @@ $v-notification-title-color: $v-focus-color !default;
   font-weight: $v-font-weight + 100;
   line-height: round($v-font-size * 1.4);
 
-  h1 {
+  .#{$primary-stylename}-caption {
     color: #fff;
     vertical-align: middle;
   }
 
-  p {
+  .#{$primary-stylename}-description {
     color: #e6e6e6;
   }
 }
@@ -385,11 +385,11 @@ $v-notification-title-color: $v-focus-color !default;
 @mixin valo-notification-warning-style {
   background: #FFF3D2;
 
-  h1 {
+  .#{$primary-stylename}-caption {
     color: #AC7C00;
   }
 
-  p {
+  .#{$primary-stylename}-description {
     color: #9D874D;
   }
 }
@@ -405,11 +405,11 @@ $v-notification-title-color: $v-focus-color !default;
   font-weight: $v-font-weight + 100;
   @include box-shadow(0px 5px 15px 0px rgba(0,0,0,0.25));
 
-  h1 {
+  .#{$primary-stylename}-caption {
     color: valo-font-color($v-error-indicator-color, 1);
   }
 
-  p {
+  .#{$primary-stylename}-description {
     color: valo-font-color($v-error-indicator-color, .8);
   }
 }
@@ -423,10 +423,10 @@ $v-notification-title-color: $v-focus-color !default;
 @mixin valo-notification-small-style {
   padding: round($v-unit-size/3.3) round($v-unit-size/2.8);
 
-  h1 {
+  .#{$primary-stylename}-caption {
     font-size: $v-font-size;
   }
-  p {
+  .#{$primary-stylename}-description {
     font-size: round($v-font-size * 0.85);
   }
 }

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

@@ -63,6 +63,9 @@ public class VNotification extends VOverlay {
     private static final String STYLENAME_POSITION_CENTER = "v-position-center";
     private static final String STYLENAME_POSITION_ASSISTIVE = "v-position-assistive";
 
+    private static final String CAPTION = "caption";
+    private static final String DESCRIPTION = "description";
+
     /**
      * Position that is only accessible for assistive devices, invisible for
      * visual users.
@@ -256,11 +259,9 @@ public class VNotification extends VOverlay {
         positionOrSizeUpdated();
         /**
          * Android 4 fails to render notifications correctly without a little
-         * nudge (#8551)
-         * Chrome 41 now requires this too (#17252)
+         * nudge (#8551) Chrome 41 now requires this too (#17252)
          */
-        if (BrowserInfo.get().isAndroid()
-                || isChrome41OrHigher()) {
+        if (BrowserInfo.get().isAndroid() || isChrome41OrHigher()) {
             WidgetUtil.setStyleTemporarily(getElement(), "display", "none");
         }
     }
@@ -501,7 +502,8 @@ public class VNotification extends VOverlay {
                 caption = WidgetUtil.escapeHTML(caption);
                 caption = caption.replaceAll("\\n", "<br />");
             }
-            html += "<h1>" + caption + "</h1>";
+            html += "<h1 class='" + getDependentStyle(client, CAPTION) + "'>"
+                    + caption + "</h1>";
         }
         if (notification
                 .hasAttribute(UIConstants.ATTRIBUTE_NOTIFICATION_MESSAGE)) {
@@ -511,7 +513,8 @@ public class VNotification extends VOverlay {
                 message = WidgetUtil.escapeHTML(message);
                 message = message.replaceAll("\\n", "<br />");
             }
-            html += "<p>" + message + "</p>";
+            html += "<p class='" + getDependentStyle(client, DESCRIPTION)
+                    + "'>" + message + "</p>";
         }
 
         final String style = notification
@@ -529,6 +532,16 @@ public class VNotification extends VOverlay {
                 html, position, style);
     }
 
+    private static String getDependentStyle(ApplicationConnection client,
+            String style) {
+        VNotification notification = createNotification(-1, client
+                .getUIConnector().getWidget());
+        String styleName = notification.getStyleName();
+        notification.addStyleDependentName(style);
+        String extendedStyle = notification.getStyleName();
+        return extendedStyle.substring(styleName.length()).trim();
+    }
+
     public static VNotification createNotification(int delayMsec, Widget owner) {
         final VNotification notification = GWT.create(VNotification.class);
         notification.setWaiAriaRole(null);

uitest/src/com/vaadin/tests/themes/valo/NotificationStyle.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.themes.valo;
+
+import com.vaadin.annotations.Theme;
+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.Notification;
+
+/**
+ * Test UI for H1 and P elements styles.
+ * 
+ * @author Vaadin Ltd
+ */
+@Theme("valo")
+public class NotificationStyle extends AbstractTestUI {
+
+    @Override
+    protected void setup(VaadinRequest request) {
+        Button button = new Button("Show notification",
+                new Button.ClickListener() {
+
+                    @Override
+                    public void buttonClick(ClickEvent event) {
+                        Notification notification = new Notification(
+                                "<p>Caption</p>",
+                                "<div style='display:inline-block;'><h1>Description</h1></div>");
+                        notification.setHtmlContentAllowed(true);
+                        notification.setDelayMsec(50000);
+                        notification.show(getPage());
+                    }
+                });
+        addComponent(button);
+    }
+
+    @Override
+    protected Integer getTicketNumber() {
+        return 14872;
+    }
+
+    @Override
+    protected String getTestDescription() {
+        return "Notification styles should be scoped more eagerly.";
+    }
+
+}

uitest/src/com/vaadin/tests/themes/valo/NotificationStyleTest.java

@@ -0,0 +1,84 @@
+/*
+ * 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.themes.valo;
+
+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.interactions.Actions;
+import org.openqa.selenium.support.ui.ExpectedCondition;
+
+import com.vaadin.testbench.elements.ButtonElement;
+import com.vaadin.tests.tb3.MultiBrowserTest;
+
+/**
+ * Test for H1 and P elements styles in Notifications.
+ * 
+ * @author Vaadin Ltd
+ */
+public class NotificationStyleTest extends MultiBrowserTest {
+
+    @Test
+    public void testNotificationH1Style() {
+        openTestURL();
+
+        $(ButtonElement.class).first().click();
+
+        new Actions(getDriver()).moveByOffset(10, 10).perform();
+        waitUntil(notificationPresentCondition(), 2);
+
+        WebElement notification = findElement(By.className("v-Notification"));
+        List<WebElement> headers = notification.findElements(By.tagName("h1"));
+        String textAlign = headers.get(0).getCssValue("text-align");
+        String textAlignInnerHeader = headers.get(1).getCssValue("text-align");
+        Assert.assertNotEquals("Styles for notification defined h1 tag "
+                + "and custom HTML tag are the same", textAlign,
+                textAlignInnerHeader);
+    }
+
+    @Test
+    public void testNotificationPStyle() {
+        openTestURL();
+
+        $(ButtonElement.class).first().click();
+
+        new Actions(getDriver()).moveByOffset(10, 10).perform();
+        waitUntil(notificationPresentCondition(), 2);
+
+        WebElement notification = findElement(By.className("v-Notification"));
+        List<WebElement> headers = notification.findElements(By.tagName("p"));
+        String lineHeight = headers.get(0).getCssValue("line-height");
+        String lineHeightInnerHeader = headers.get(1)
+                .getCssValue("line-height");
+        Assert.assertNotEquals("Styles for notification defined 'p' tag "
+                + "and custom HTML tag are the same", lineHeight,
+                lineHeightInnerHeader);
+    }
+
+    private ExpectedCondition<Boolean> notificationPresentCondition() {
+        return new ExpectedCondition<Boolean>() {
+
+            @Override
+            public Boolean apply(WebDriver input) {
+                return isElementPresent(By.className("v-Notification"));
+            }
+        };
+    }
+}