Colorpicker IE fixes

Change-Id: I9b1e42a75175eff4a01560db0a13865e253b72d5

4 files changed, 50 insertions, 30 deletions

diff --git a/WebContent/VAADIN/themes/base/colorpicker/colorpicker.scss b/WebContent/VAADIN/themes/base/colorpicker/colorpicker.scss
index bd4420b55b..b2558d8df3 100644
--- a/WebContent/VAADIN/themes/base/colorpicker/colorpicker.scss
+++ b/WebContent/VAADIN/themes/base/colorpicker/colorpicker.scss
@@ -86,13 +86,13 @@
 	opacity: 0;
 }
 
-.#{$name}-popup #rgb-gradient .#{$name}-gradient-background {
+.#{$name}-popup .rgb-gradient .#{$name}-gradient-background {
 	width: 220px;
 	height: 220px;
 	background: url(images/gradient2.png);
 }
 
-.#{$name}-popup #hsv-gradient .#{$name}-gradient-foreground {
+.#{$name}-popup .hsv-gradient .#{$name}-gradient-foreground {
 	background: url(images/gradient.png);
 }
 
diff --git a/client/src/com/vaadin/client/ui/colorpicker/VColorPickerGradient.java b/client/src/com/vaadin/client/ui/colorpicker/VColorPickerGradient.java
index 6defc57996..6a3f50cecc 100644
--- a/client/src/com/vaadin/client/ui/colorpicker/VColorPickerGradient.java
+++ b/client/src/com/vaadin/client/ui/colorpicker/VColorPickerGradient.java
@@ -1,15 +1,17 @@
 package com.vaadin.client.ui.colorpicker;
 
+import com.google.gwt.dom.client.Style.Unit;
 import com.google.gwt.event.dom.client.MouseDownEvent;
 import com.google.gwt.event.dom.client.MouseDownHandler;
 import com.google.gwt.event.dom.client.MouseMoveEvent;
 import com.google.gwt.event.dom.client.MouseMoveHandler;
 import com.google.gwt.event.dom.client.MouseUpEvent;
 import com.google.gwt.event.dom.client.MouseUpHandler;
-import com.google.gwt.user.client.DOM;
+import com.google.gwt.user.client.Element;
 import com.google.gwt.user.client.ui.AbsolutePanel;
 import com.google.gwt.user.client.ui.FocusPanel;
 import com.google.gwt.user.client.ui.HTML;
+import com.vaadin.client.ui.SubPartAware;
 
 /**
  * Client side implementation for ColorPickerGradient.
@@ -18,7 +20,7 @@ import com.google.gwt.user.client.ui.HTML;
  * 
  */
 public class VColorPickerGradient extends FocusPanel implements
-        MouseDownHandler, MouseUpHandler, MouseMoveHandler {
+        MouseDownHandler, MouseUpHandler, MouseMoveHandler, SubPartAware {
 
     /** Set the CSS class name to allow styling. */
     public static final String CLASSNAME = "v-colorpicker-gradient";
@@ -28,6 +30,7 @@ public class VColorPickerGradient extends FocusPanel implements
     public static final String CLASSNAME_HIGHERBOX = CLASSNAME + "-higherbox";
     public static final String CLASSNAME_CONTAINER = CLASSNAME + "-container";
     public static final String CLASSNAME_CLICKLAYER = CLASSNAME + "-clicklayer";
+    private static final String CLICKLAYER_ID = "clicklayer";
 
     private final HTML background;
     private final HTML foreground;
@@ -41,6 +44,9 @@ public class VColorPickerGradient extends FocusPanel implements
     private int cursorX;
     private int cursorY;
 
+    private int width = 220;
+    private int height = 220;
+
     /**
      * Instantiates the client side component for a color picker gradient.
      */
@@ -49,9 +55,6 @@ public class VColorPickerGradient extends FocusPanel implements
 
         setStyleName(CLASSNAME);
 
-        int width = 220;
-        int height = 220;
-
         background = new HTML();
         background.setStyleName(CLASSNAME_BACKGROUND);
         background.setPixelSize(width, height);
@@ -107,7 +110,11 @@ public class VColorPickerGradient extends FocusPanel implements
      * @param bgColor
      */
     protected void setBGColor(String bgColor) {
-        background.getElement().getStyle().setProperty("background", bgColor);
+        if (bgColor == null) {
+            background.getElement().getStyle().clearBackgroundColor();
+        } else {
+            background.getElement().getStyle().setBackgroundColor(bgColor);
+        }
     }
 
     @Override
@@ -148,29 +155,41 @@ public class VColorPickerGradient extends FocusPanel implements
         cursorX = x;
         cursorY = y;
         if (x >= 0) {
-            DOM.setStyleAttribute(lowercross.getElement(), "width",
-                    String.valueOf(x) + "px");
+            lowercross.getElement().getStyle().setWidth(x, Unit.PX);
         }
         if (y >= 0) {
-            DOM.setStyleAttribute(lowercross.getElement(), "top",
-                    String.valueOf(y) + "px");
+            lowercross.getElement().getStyle().setTop(y, Unit.PX);
         }
         if (y >= 0) {
-            DOM.setStyleAttribute(lowercross.getElement(), "height",
-                    String.valueOf((background.getOffsetHeight() - y)) + "px");
+            lowercross.getElement().getStyle().setHeight(height - y, Unit.PX);
         }
 
         if (x >= 0) {
-            DOM.setStyleAttribute(highercross.getElement(), "width",
-                    String.valueOf((background.getOffsetWidth() - x)) + "px");
+            highercross.getElement().getStyle().setWidth(width - x, Unit.PX);
         }
         if (x >= 0) {
-            DOM.setStyleAttribute(highercross.getElement(), "left",
-                    String.valueOf(x) + "px");
+            highercross.getElement().getStyle().setLeft(x, Unit.PX);
         }
         if (y >= 0) {
-            DOM.setStyleAttribute(highercross.getElement(), "height",
-                    String.valueOf((y)) + "px");
+            highercross.getElement().getStyle().setHeight(y, Unit.PX);
+        }
+    }
+
+    @Override
+    public Element getSubPartElement(String subPart) {
+        if (subPart.equals(CLICKLAYER_ID)) {
+            return clicklayer.getElement();
         }
+
+        return null;
+    }
+
+    @Override
+    public String getSubPartName(Element subElement) {
+        if (clicklayer.getElement().isOrHasChild(subElement)) {
+            return CLICKLAYER_ID;
+        }
+
+        return null;
     }
 }
diff --git a/server/src/com/vaadin/ui/components/colorpicker/ColorPickerGradient.java b/server/src/com/vaadin/ui/components/colorpicker/ColorPickerGradient.java
index ddd61f37b2..1bff71f0f7 100644
--- a/server/src/com/vaadin/ui/components/colorpicker/ColorPickerGradient.java
+++ b/server/src/com/vaadin/ui/components/colorpicker/ColorPickerGradient.java
@@ -52,9 +52,6 @@ public class ColorPickerGradient extends AbstractComponent implements
     /** The y-coordinate. */
     private int y = 0;
 
-    /** The background color. */
-    private Color backgroundColor;
-
     /**
      * Instantiates a new color picker gradient.
      * 
@@ -65,7 +62,7 @@ public class ColorPickerGradient extends AbstractComponent implements
      */
     public ColorPickerGradient(String id, Coordinates2Color converter) {
         registerRpc(rpc);
-        getState().id = id;
+        addStyleName(id);
         // width and height must be set here instead of in theme, otherwise
         // coordinate calculations fail
         getState().width = "220px";
@@ -103,7 +100,6 @@ public class ColorPickerGradient extends AbstractComponent implements
      *            the new background color
      */
     public void setBackgroundColor(Color color) {
-        backgroundColor = color;
         getState().bgColor = color.getCSS();
     }
 
diff --git a/uitest/src/com/vaadin/tests/components/colorpicker/ColorPickerTest.html b/uitest/src/com/vaadin/tests/components/colorpicker/ColorPickerTest.html
index fb8669b9f0..23c44d3cc0 100644
--- a/uitest/src/com/vaadin/tests/components/colorpicker/ColorPickerTest.html
+++ b/uitest/src/com/vaadin/tests/components/colorpicker/ColorPickerTest.html
@@ -3,7 +3,7 @@
 <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/run/com.vaadin.tests.components.colorpicker.ColorPickerTest?restartApplication" />
+<link rel="selenium.base" href="" />
 <title>ColorPickerTest</title>
 </head>
 <body>
@@ -24,8 +24,13 @@
 	<td></td>
 </tr>
 <tr>
+	<td>waitForElementPresent</td>
+	<td>vaadin=runcomvaadintestscomponentscolorpickerColorPickerTest::/VWindow[0]/FocusableScrollPanel[0]/VVerticalLayout[0]/Slot[0]/VTabsheet[0]/VTabsheetPanel[0]/VVerticalLayout[0]/Slot[1]/VColorPickerGradient[0]#clicklayer</td>
+	<td></td>
+</tr>
+<tr>
 	<td>mouseClick</td>
-	<td>vaadin=runcomvaadintestscomponentscolorpickerColorPickerTest::PID_Srgb-gradient/domChild[1]/domChild[4]</td>
+	<td>vaadin=runcomvaadintestscomponentscolorpickerColorPickerTest::/VWindow[0]/FocusableScrollPanel[0]/VVerticalLayout[0]/Slot[0]/VTabsheet[0]/VTabsheetPanel[0]/VVerticalLayout[0]/Slot[1]/VColorPickerGradient[0]#clicklayer</td>
 	<td>190,87</td>
 </tr>
 <tr>
@@ -42,7 +47,7 @@
 </tr>
 <tr>
 	<td>mouseClick</td>
-	<td>vaadin=runcomvaadintestscomponentscolorpickerColorPickerTest::PID_Srgb-gradient/domChild[1]/domChild[4]</td>
+	<td>vaadin=runcomvaadintestscomponentscolorpickerColorPickerTest::/VWindow[0]/FocusableScrollPanel[0]/VVerticalLayout[0]/Slot[0]/VTabsheet[0]/VTabsheetPanel[0]/VVerticalLayout[0]/Slot[1]/VColorPickerGradient[0]#clicklayer</td>
 	<td>51,33</td>
 </tr>
 <tr>
@@ -260,7 +265,7 @@
 </tr>
 <tr>
 	<td>mouseClick</td>
-	<td>vaadin=runcomvaadintestscomponentscolorpickerColorPickerTest::PID_Srgb-gradient/domChild[1]/domChild[4]</td>
+	<td>vaadin=runcomvaadintestscomponentscolorpickerColorPickerTest::/VWindow[0]/FocusableScrollPanel[0]/VVerticalLayout[0]/Slot[0]/VTabsheet[0]/VTabsheetPanel[0]/VVerticalLayout[0]/Slot[1]/VColorPickerGradient[0]#clicklayer</td>
 	<td>148,127</td>
 </tr>
 <tr>
@@ -299,7 +304,7 @@
 </tr>
 <tr>
 	<td>mouseClick</td>
-	<td>vaadin=runcomvaadintestscomponentscolorpickerColorPickerTest::PID_Srgb-gradient/domChild[1]/domChild[4]</td>
+	<td>vaadin=runcomvaadintestscomponentscolorpickerColorPickerTest::/VWindow[0]/FocusableScrollPanel[0]/VVerticalLayout[0]/Slot[0]/VTabsheet[0]/VTabsheetPanel[0]/VVerticalLayout[0]/Slot[1]/VColorPickerGradient[0]#clicklayer</td>
 	<td>36,93</td>
 </tr>
 <tr>