Fixed primary stylenames with Slider #9898

Change-Id: Id49802efac15d9472383b13d9611fed08d6776fe

3 files changed, 198 insertions, 51 deletions

diff --git a/client/src/com/vaadin/client/ui/slider/VSlider.java b/client/src/com/vaadin/client/ui/slider/VSlider.java
index 648201c2b5..c7e9d35c83 100644
--- a/client/src/com/vaadin/client/ui/slider/VSlider.java
+++ b/client/src/com/vaadin/client/ui/slider/VSlider.java
@@ -1,4 +1,4 @@
-/* 
+/*
  * Copyright 2011 Vaadin Ltd.
  * 
  * Licensed under the Apache License, Version 2.0 (the "License"); you may not
@@ -13,11 +13,15 @@
  * License for the specific language governing permissions and limitations under
  * the License.
  */
-// 
+//
 package com.vaadin.client.ui.slider;
 
 import com.google.gwt.core.client.Scheduler;
 import com.google.gwt.core.client.Scheduler.ScheduledCommand;
+import com.google.gwt.dom.client.Style.Display;
+import com.google.gwt.dom.client.Style.Overflow;
+import com.google.gwt.dom.client.Style.Unit;
+import com.google.gwt.dom.client.Style.Visibility;
 import com.google.gwt.event.dom.client.KeyCodes;
 import com.google.gwt.event.logical.shared.ValueChangeEvent;
 import com.google.gwt.event.logical.shared.ValueChangeHandler;
@@ -66,8 +70,6 @@ public class VSlider extends SimpleFocusablePanel implements Field,
     protected Double value;
     protected SliderOrientation orientation = SliderOrientation.HORIZONTAL;
 
-    private boolean valueChangeHandlerInitialized = false;
-
     private final HTML feedback = new HTML("", false);
     private final VOverlay feedbackPopup = new VOverlay(true, false, true) {
 
@@ -113,28 +115,56 @@ public class VSlider extends SimpleFocusablePanel implements Field,
         bigger = DOM.createDiv();
 
         setStyleName(CLASSNAME);
-        DOM.setElementProperty(base, "className", CLASSNAME + "-base");
-        DOM.setElementProperty(handle, "className", CLASSNAME + "-handle");
-        DOM.setElementProperty(smaller, "className", CLASSNAME + "-smaller");
-        DOM.setElementProperty(bigger, "className", CLASSNAME + "-bigger");
 
-        DOM.appendChild(getElement(), bigger);
-        DOM.appendChild(getElement(), smaller);
-        DOM.appendChild(getElement(), base);
-        DOM.appendChild(base, handle);
+        getElement().appendChild(bigger);
+        getElement().appendChild(smaller);
+        getElement().appendChild(base);
+        base.appendChild(handle);
 
         // Hide initially
-        DOM.setStyleAttribute(smaller, "display", "none");
-        DOM.setStyleAttribute(bigger, "display", "none");
-        DOM.setStyleAttribute(handle, "visibility", "hidden");
+        smaller.getStyle().setDisplay(Display.NONE);
+        bigger.getStyle().setDisplay(Display.NONE);
+        handle.getStyle().setVisibility(Visibility.HIDDEN);
 
         sinkEvents(Event.MOUSEEVENTS | Event.ONMOUSEWHEEL | Event.KEYEVENTS
                 | Event.FOCUSEVENTS | Event.TOUCHEVENTS);
 
-        feedbackPopup.addStyleName(CLASSNAME + "-feedback");
+
         feedbackPopup.setWidget(feedback);
     }
 
+    @Override
+    public void setStyleName(String style) {
+        updateStyleNames(style, false);
+    }
+
+    @Override
+    public void setStylePrimaryName(String style) {
+        updateStyleNames(style, true);
+    }
+
+    protected void updateStyleNames(String styleName, boolean isPrimaryStyleName) {
+
+        feedbackPopup.removeStyleName(getStylePrimaryName() + "-feedback");
+        removeStyleName(getStylePrimaryName() + "-vertical");
+
+        if (isPrimaryStyleName) {
+            super.setStylePrimaryName(styleName);
+        } else {
+            super.setStyleName(styleName);
+        }
+
+        feedbackPopup.addStyleName(getStylePrimaryName() + "-feedback");
+        base.setClassName(getStylePrimaryName() + "-base");
+        handle.setClassName(getStylePrimaryName() + "-handle");
+        smaller.setClassName(getStylePrimaryName() + "-smaller");
+        bigger.setClassName(getStylePrimaryName() + "-bigger");
+
+        if (isVertical()) {
+            addStyleName(getStylePrimaryName() + "-vertical");
+        }
+    }
+
     void setFeedbackValue(double value) {
         String currentValue = "" + value;
         if (resolution == 0) {
@@ -146,14 +176,14 @@ public class VSlider extends SimpleFocusablePanel implements Field,
     private void updateFeedbackPosition() {
         if (isVertical()) {
             feedbackPopup.setPopupPosition(
-                    DOM.getAbsoluteLeft(handle) + handle.getOffsetWidth(),
-                    DOM.getAbsoluteTop(handle) + handle.getOffsetHeight() / 2
+                    handle.getAbsoluteLeft() + handle.getOffsetWidth(),
+                    handle.getAbsoluteTop() + handle.getOffsetHeight() / 2
                             - feedbackPopup.getOffsetHeight() / 2);
         } else {
             feedbackPopup.setPopupPosition(
-                    DOM.getAbsoluteLeft(handle) + handle.getOffsetWidth() / 2
+                    handle.getAbsoluteLeft() + handle.getOffsetWidth() / 2
                             - feedbackPopup.getOffsetWidth() / 2,
-                    DOM.getAbsoluteTop(handle)
+                    handle.getAbsoluteTop()
                             - feedbackPopup.getOffsetHeight());
         }
     }
@@ -165,29 +195,29 @@ public class VSlider extends SimpleFocusablePanel implements Field,
                 : "offsetWidth";
 
         // clear unnecessary opposite style attribute
-        DOM.setStyleAttribute(base, oppositeStyleAttribute, "");
+        base.getStyle().clearProperty(oppositeStyleAttribute);
 
-        final Element p = DOM.getParent(getElement());
-        if (DOM.getElementPropertyInt(p, domProperty) > 50) {
+        final Element p = getElement().getParentElement().cast();
+        if (p.getPropertyInt(domProperty) > 50) {
             if (isVertical()) {
                 setHeight();
             } else {
-                DOM.setStyleAttribute(base, styleAttribute, "");
+                base.getStyle().clearProperty(styleAttribute);
             }
         } else {
             // Set minimum size and adjust after all components have
             // (supposedly) been drawn completely.
-            DOM.setStyleAttribute(base, styleAttribute, MIN_SIZE + "px");
+            base.getStyle().setPropertyPx(styleAttribute, MIN_SIZE);
             Scheduler.get().scheduleDeferred(new Command() {
 
                 @Override
                 public void execute() {
-                    final Element p = DOM.getParent(getElement());
-                    if (DOM.getElementPropertyInt(p, domProperty) > (MIN_SIZE + 5)) {
+                    final Element p = getElement().getParentElement().cast();
+                    if (p.getPropertyInt(domProperty) > (MIN_SIZE + 5)) {
                         if (isVertical()) {
                             setHeight();
                         } else {
-                            DOM.setStyleAttribute(base, styleAttribute, "");
+                            base.getStyle().clearProperty(styleAttribute);
                         }
                         // Ensure correct position
                         setValue(value, false);
@@ -219,14 +249,13 @@ public class VSlider extends SimpleFocusablePanel implements Field,
         final String oppositeHandleAttribute = isVertical() ? "marginLeft"
                 : "marginTop";
 
-        DOM.setStyleAttribute(handle, handleAttribute, "0");
+        handle.getStyle().setProperty(handleAttribute, "0");
 
         // clear unnecessary opposite handle attribute
-        DOM.setStyleAttribute(handle, oppositeHandleAttribute, "");
+        handle.getStyle().clearProperty(oppositeHandleAttribute);
 
         // Restore visibility
-        DOM.setStyleAttribute(handle, "visibility", "visible");
-
+        handle.getStyle().setVisibility(Visibility.VISIBLE);
     }
 
     @Override
@@ -297,8 +326,9 @@ public class VSlider extends SimpleFocusablePanel implements Field,
                 focus();
                 feedbackPopup.show();
                 dragging = true;
-                DOM.setElementProperty(handle, "className", CLASSNAME
-                        + "-handle " + CLASSNAME + "-handle-active");
+                handle.setClassName(getStylePrimaryName() + "-handle");
+                handle.addClassName(getStylePrimaryName() + "-handle-active");
+
                 DOM.setCapture(getElement());
                 DOM.eventPreventDefault(event); // prevent selecting text
                 DOM.eventCancelBubble(event, true);
@@ -321,7 +351,7 @@ public class VSlider extends SimpleFocusablePanel implements Field,
             // feedbackPopup.hide();
             VConsole.log("Slider move end");
             dragging = false;
-            DOM.setElementProperty(handle, "className", CLASSNAME + "-handle");
+            handle.setClassName(getStylePrimaryName() + "-handle");
             DOM.releaseCapture(getElement());
             setValueByEvent(event, true);
             event.stopPropagation();
@@ -411,14 +441,14 @@ public class VSlider extends SimpleFocusablePanel implements Field,
 
     private void setHeight() {
         // Calculate decoration size
-        DOM.setStyleAttribute(base, "height", "0");
-        DOM.setStyleAttribute(base, "overflow", "hidden");
-        int h = DOM.getElementPropertyInt(getElement(), "offsetHeight");
+        base.getStyle().setHeight(0, Unit.PX);
+        base.getStyle().setOverflow(Overflow.HIDDEN);
+        int h = getElement().getOffsetHeight();
         if (h < MIN_SIZE) {
             h = MIN_SIZE;
         }
-        DOM.setStyleAttribute(base, "height", h + "px");
-        DOM.setStyleAttribute(base, "overflow", "");
+        base.getStyle().setHeight(h, Unit.PX);
+        base.getStyle().clearOverflow();
     }
 
     private void fireValueChanged() {
@@ -537,12 +567,7 @@ public class VSlider extends SimpleFocusablePanel implements Field,
     public void setOrientation(SliderOrientation orientation) {
         if (this.orientation != orientation) {
             this.orientation = orientation;
-
-            if (isVertical()) {
-                addStyleName(VSlider.CLASSNAME + "-vertical");
-            } else {
-                removeStyleName(VSlider.CLASSNAME + "-vertical");
-            }
+            updateStyleNames(getStylePrimaryName(), true);
         }
     }
 
@@ -581,10 +606,9 @@ public class VSlider extends SimpleFocusablePanel implements Field,
         final String styleAttribute = isVertical() ? "marginTop" : "marginLeft";
         final String domProperty = isVertical() ? "offsetHeight"
                 : "offsetWidth";
-        final int handleSize = Integer.parseInt(DOM.getElementProperty(handle,
-                domProperty));
-        final int baseSize = Integer.parseInt(DOM.getElementProperty(base,
-                domProperty)) - (2 * BASE_BORDER_WIDTH);
+        final int handleSize = handle.getPropertyInt(domProperty);
+        final int baseSize = base.getPropertyInt(domProperty)
+                - (2 * BASE_BORDER_WIDTH);
 
         final int range = baseSize - handleSize;
         double v = value.doubleValue();
@@ -609,7 +633,7 @@ public class VSlider extends SimpleFocusablePanel implements Field,
         }
         final double pos = p;
 
-        DOM.setStyleAttribute(handle, styleAttribute, (Math.round(pos)) + "px");
+        handle.getStyle().setPropertyPx(styleAttribute, (int) Math.round(pos));
 
         // Update value
         this.value = new Double(v);
diff --git a/uitest/src/com/vaadin/tests/components/slider/SliderPrimaryStyleName.html b/uitest/src/com/vaadin/tests/components/slider/SliderPrimaryStyleName.html
new file mode 100644
index 0000000000..b61ec80920
--- /dev/null
+++ b/uitest/src/com/vaadin/tests/components/slider/SliderPrimaryStyleName.html
@@ -0,0 +1,87 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head profile="http://selenium-ide.openqa.org/profiles/test-case">
+<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+<link rel="selenium.base" href="http://localhost:8888/" />
+<title>New Test</title>
+</head>
+<body>
+<table cellpadding="1" cellspacing="1" border="1">
+<thead>
+<tr><td rowspan="1" colspan="3">New Test</td></tr>
+</thead><tbody>
+<tr>
+    <td>open</td>
+    <td>/run/com.vaadin.tests.components.slider.SliderPrimaryStyleName?restartApplication</td>
+    <td></td>
+</tr>
+<tr>
+    <td>assertNotCSSClass</td>
+    <td>vaadin=runcomvaadintestscomponentssliderSliderPrimaryStyleName::/VVerticalLayout[0]/VOrderedLayout$Slot[1]/VVerticalLayout[0]/domChild[0]/domChild[0]</td>
+    <td>v-slider</td>
+</tr>
+<tr>
+    <td>assertCSSClass</td>
+    <td>vaadin=runcomvaadintestscomponentssliderSliderPrimaryStyleName::/VVerticalLayout[0]/VOrderedLayout$Slot[1]/VVerticalLayout[0]/domChild[0]/domChild[0]</td>
+    <td>my-slider</td>
+</tr>
+<tr>
+    <td>assertCSSClass</td>
+    <td>vaadin=runcomvaadintestscomponentssliderSliderPrimaryStyleName::/VVerticalLayout[0]/VOrderedLayout$Slot[1]/VVerticalLayout[0]/domChild[0]/domChild[0]/domChild[0]</td>
+    <td>my-slider-bigger</td>
+</tr>
+<tr>
+    <td>assertCSSClass</td>
+    <td>vaadin=runcomvaadintestscomponentssliderSliderPrimaryStyleName::/VVerticalLayout[0]/VOrderedLayout$Slot[1]/VVerticalLayout[0]/domChild[0]/domChild[0]/domChild[1]</td>
+    <td>my-slider-smaller</td>
+</tr>
+<tr>
+    <td>assertCSSClass</td>
+    <td>vaadin=runcomvaadintestscomponentssliderSliderPrimaryStyleName::/VVerticalLayout[0]/VOrderedLayout$Slot[1]/VVerticalLayout[0]/domChild[0]/domChild[0]/domChild[2]</td>
+    <td>my-slider-base</td>
+</tr>
+<tr>
+    <td>assertCSSClass</td>
+    <td>vaadin=runcomvaadintestscomponentssliderSliderPrimaryStyleName::/VVerticalLayout[0]/VOrderedLayout$Slot[1]/VVerticalLayout[0]/domChild[0]/domChild[0]/domChild[2]/domChild[0]</td>
+    <td>my-slider-handle</td>
+</tr>
+<tr>
+    <td>click</td>
+    <td>vaadin=runcomvaadintestscomponentssliderSliderPrimaryStyleName::/VVerticalLayout[0]/VOrderedLayout$Slot[1]/VVerticalLayout[0]/VOrderedLayout$Slot[1]/VButton[0]/domChild[0]/domChild[0]</td>
+    <td></td>
+</tr>
+<tr>
+    <td>assertNotCSSClass</td>
+    <td>vaadin=runcomvaadintestscomponentssliderSliderPrimaryStyleName::/VVerticalLayout[0]/VOrderedLayout$Slot[1]/VVerticalLayout[0]/domChild[0]/domChild[0]</td>
+    <td>my-slider</td>
+</tr>
+<tr>
+    <td>assertCSSClass</td>
+    <td>vaadin=runcomvaadintestscomponentssliderSliderPrimaryStyleName::/VVerticalLayout[0]/VOrderedLayout$Slot[1]/VVerticalLayout[0]/domChild[0]/domChild[0]</td>
+    <td>my-second-slider</td>
+</tr>
+<tr>
+    <td>assertCSSClass</td>
+    <td>vaadin=runcomvaadintestscomponentssliderSliderPrimaryStyleName::/VVerticalLayout[0]/VOrderedLayout$Slot[1]/VVerticalLayout[0]/domChild[0]/domChild[0]/domChild[0]</td>
+    <td>my-second-slider-bigger</td>
+</tr>
+<tr>
+    <td>assertCSSClass</td>
+    <td>vaadin=runcomvaadintestscomponentssliderSliderPrimaryStyleName::/VVerticalLayout[0]/VOrderedLayout$Slot[1]/VVerticalLayout[0]/domChild[0]/domChild[0]/domChild[1]</td>
+    <td>my-second-slider-smaller</td>
+</tr>
+<tr>
+    <td>assertCSSClass</td>
+    <td>vaadin=runcomvaadintestscomponentssliderSliderPrimaryStyleName::/VVerticalLayout[0]/VOrderedLayout$Slot[1]/VVerticalLayout[0]/domChild[0]/domChild[0]/domChild[2]</td>
+    <td>my-second-slider-base</td>
+</tr>
+<tr>
+    <td>assertCSSClass</td>
+    <td>vaadin=runcomvaadintestscomponentssliderSliderPrimaryStyleName::/VVerticalLayout[0]/VOrderedLayout$Slot[1]/VVerticalLayout[0]/domChild[0]/domChild[0]/domChild[2]/domChild[0]</td>
+    <td>my-second-slider-handle</td>
+</tr>
+
+</tbody></table>
+</body>
+</html>
diff --git a/uitest/src/com/vaadin/tests/components/slider/SliderPrimaryStyleName.java b/uitest/src/com/vaadin/tests/components/slider/SliderPrimaryStyleName.java
new file mode 100644
index 0000000000..00e1713222
--- /dev/null
+++ b/uitest/src/com/vaadin/tests/components/slider/SliderPrimaryStyleName.java
@@ -0,0 +1,36 @@
+package com.vaadin.tests.components.slider;
+
+import com.vaadin.tests.components.TestBase;
+import com.vaadin.ui.Button;
+import com.vaadin.ui.Button.ClickEvent;
+import com.vaadin.ui.Slider;
+
+public class SliderPrimaryStyleName extends TestBase {
+
+    @Override
+    protected void setup() {
+        final Slider slider = new Slider(0, 100);
+        slider.setWidth("100px");
+        slider.setPrimaryStyleName("my-slider");
+        addComponent(slider);
+
+        addComponent(new Button("Change primary style",
+                new Button.ClickListener() {
+                    @Override
+                    public void buttonClick(ClickEvent event) {
+                        slider.setPrimaryStyleName("my-second-slider");
+                    }
+                }));
+    }
+
+    @Override
+    protected String getDescription() {
+        return "Setting the primary stylename should work both initially and dynamically";
+    }
+
+    @Override
+    protected Integer getTicketNumber() {
+        return 9898;
+    }
+
+}