Allow editing colorpicker values in colorpicker in textfield #13469

This fix adds support for typing in color values according to
http://www.w3schools.com/cssref/css_colors_legal.asp into the
colorpicker popup input textfield.

Change-Id: If14ead791725c3052c05aa31e12e237e90c32348

6 files changed, 338 insertions, 70 deletions

diff --git a/server/src/com/vaadin/ui/components/colorpicker/ColorPickerPreview.java b/server/src/com/vaadin/ui/components/colorpicker/ColorPickerPreview.java
index ae0f717df8..ae00b267ce 100644
--- a/server/src/com/vaadin/ui/components/colorpicker/ColorPickerPreview.java
+++ b/server/src/com/vaadin/ui/components/colorpicker/ColorPickerPreview.java
@@ -19,7 +19,6 @@ import java.lang.reflect.Method;
 
 import com.vaadin.data.Property.ValueChangeEvent;
 import com.vaadin.data.Property.ValueChangeListener;
-import com.vaadin.data.validator.RegexpValidator;
 import com.vaadin.shared.ui.colorpicker.Color;
 import com.vaadin.ui.Component;
 import com.vaadin.ui.CssLayout;
@@ -67,13 +66,12 @@ public class ColorPickerPreview extends CssLayout implements ColorSelector,
         this.color = color;
 
         field = new TextField();
-        field.setReadOnly(true);
         field.setImmediate(true);
         field.setSizeFull();
         field.setStyleName("v-colorpicker-preview-textfield");
         field.setData(this);
         field.addValueChangeListener(this);
-        field.addValidator(new RegexpValidator("#[0-9a-fA-F]{6}", true, ""));
+
         addComponent(field);
 
         setColor(color);
@@ -85,7 +83,6 @@ public class ColorPickerPreview extends CssLayout implements ColorSelector,
 
         // Unregister listener
         field.removeValueChangeListener(this);
-        field.setReadOnly(false);
 
         String colorCSS = color.getCSS();
         field.setValue(colorCSS);
@@ -97,7 +94,6 @@ public class ColorPickerPreview extends CssLayout implements ColorSelector,
         }
 
         // Re-register listener
-        field.setReadOnly(true);
         field.addValueChangeListener(this);
 
         // Set the text color
@@ -130,21 +126,63 @@ public class ColorPickerPreview extends CssLayout implements ColorSelector,
     @Override
     public void valueChange(ValueChangeEvent event) {
         String value = (String) event.getProperty().getValue();
-
-        if (!field.isValid()) {
+        try {
+            if (value != null) {
+                /*
+                 * Description of supported formats see
+                 * http://www.w3schools.com/cssref/css_colors_legal.asp
+                 */
+                if (value.length() == 7 && value.startsWith("#")) {
+                    // CSS color format (e.g. #000000)
+                    int red = Integer.parseInt(value.substring(1, 3), 16);
+                    int green = Integer.parseInt(value.substring(3, 5), 16);
+                    int blue = Integer.parseInt(value.substring(5, 7), 16);
+                    color = new Color(red, green, blue);
+
+                } else if (value.startsWith("rgb")) {
+                    // RGB color format rgb/rgba(255,255,255,0.1)
+                    String[] colors = value.substring(value.indexOf("(") + 1,
+                            value.length() - 1).split(",");
+
+                    int red = Integer.parseInt(colors[0]);
+                    int green = Integer.parseInt(colors[1]);
+                    int blue = Integer.parseInt(colors[2]);
+                    if (colors.length > 3) {
+                        int alpha = (int) (Double.parseDouble(colors[3]) * 255d);
+                        color = new Color(red, green, blue, alpha);
+                    } else {
+                        color = new Color(red, green, blue);
+                    }
+
+                } else if (value.startsWith("hsl")) {
+                    // HSL color format hsl/hsla(100,50%,50%,1.0)
+                    String[] colors = value.substring(value.indexOf("(") + 1,
+                            value.length() - 1).split(",");
+
+                    int hue = Integer.parseInt(colors[0]);
+                    int saturation = Integer.parseInt(colors[1]
+                            .replace("%", ""));
+                    int lightness = Integer
+                            .parseInt(colors[2].replace("%", ""));
+                    int rgb = Color.HSLtoRGB(hue, saturation, lightness);
+
+                    if (colors.length > 3) {
+                        int alpha = (int) (Double.parseDouble(colors[3]) * 255d);
+                        color = new Color(rgb);
+                        color.setAlpha(alpha);
+                    } else {
+                        color = new Color(rgb);
+                    }
+                }
+
+                oldValue = value;
+                fireEvent(new ColorChangeEvent((Component) field.getData(),
+                        color));
+            }
+
+        } catch (NumberFormatException nfe) {
+            // Revert value
             field.setValue(oldValue);
-            return;
-        } else {
-            oldValue = value;
-        }
-
-        if (value != null && value.length() == 7) {
-            int red = Integer.parseInt(value.substring(1, 3), 16);
-            int green = Integer.parseInt(value.substring(3, 5), 16);
-            int blue = Integer.parseInt(value.substring(5, 7), 16);
-            color = new Color(red, green, blue);
-
-            fireEvent(new ColorChangeEvent((Component) field.getData(), color));
         }
     }
 
diff --git a/server/tests/src/com/vaadin/tests/server/component/colorpicker/ColorConversions.java b/server/tests/src/com/vaadin/tests/server/component/colorpicker/ColorConversions.java
new file mode 100644
index 0000000000..46d72a6ae6
--- /dev/null
+++ b/server/tests/src/com/vaadin/tests/server/component/colorpicker/ColorConversions.java
@@ -0,0 +1,57 @@
+/*
+ * 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.server.component.colorpicker;
+
+import static org.junit.Assert.assertEquals;
+
+import org.junit.Test;
+
+import com.vaadin.shared.ui.colorpicker.Color;
+
+public class ColorConversions {
+
+    @Test
+    public void convertHSL2RGB() {
+
+        int rgb = Color.HSLtoRGB(100, 50, 50);
+        Color c = new Color(rgb);
+        assertEquals(106, c.getRed());
+        assertEquals(191, c.getGreen());
+        assertEquals(64, c.getBlue());
+        assertEquals("#6abf40", c.getCSS());
+
+        rgb = Color.HSLtoRGB(0, 50, 50);
+        c = new Color(rgb);
+        assertEquals(191, c.getRed());
+        assertEquals(64, c.getGreen());
+        assertEquals(64, c.getBlue());
+        assertEquals("#bf4040", c.getCSS());
+
+        rgb = Color.HSLtoRGB(50, 0, 50);
+        c = new Color(rgb);
+        assertEquals(128, c.getRed());
+        assertEquals(128, c.getGreen());
+        assertEquals(128, c.getBlue());
+        assertEquals("#808080", c.getCSS());
+
+        rgb = Color.HSLtoRGB(50, 100, 0);
+        c = new Color(rgb);
+        assertEquals(0, c.getRed(), 0);
+        assertEquals(0, c.getGreen(), 0);
+        assertEquals(0, c.getBlue(), 0);
+        assertEquals("#000000", c.getCSS());
+    }
+}
diff --git a/shared/src/com/vaadin/shared/ui/colorpicker/Color.java b/shared/src/com/vaadin/shared/ui/colorpicker/Color.java
index 7fbb0ee055..8624327993 100644
--- a/shared/src/com/vaadin/shared/ui/colorpicker/Color.java
+++ b/shared/src/com/vaadin/shared/ui/colorpicker/Color.java
@@ -392,4 +392,62 @@ public class Color implements Serializable {
 
         return 0xff000000 | (red << 16) | (green << 8) | (blue << 0);
     }
+
+    /**
+     * <p>
+     * Converts HSL's hue, saturation and lightness into an RGB value.
+     * 
+     * @param hue
+     *            the hue of the color. The unit of the value is degrees and
+     *            should be between 0-360.
+     * @param saturation
+     *            the saturation of the color. The unit of the value is
+     *            percentages and should be between 0-100;
+     * @param lightness
+     *            the lightness of the color. The unit of the value is
+     *            percentages and should be between 0-100;
+     * 
+     * @return the RGB value of corresponding color
+     */
+    public static int HSLtoRGB(int hue, int saturation, int lightness) {
+        int red = 0;
+        int green = 0;
+        int blue = 0;
+
+        float hueRatio = hue / 360f;
+        float saturationRatio = saturation / 100f;
+        float lightnessRatio = lightness / 100f;
+
+        if (saturationRatio == 0) {
+            red = green = blue = (int) (lightnessRatio * 255.0f + 0.5f);
+        } else {
+            float p = lightnessRatio < 0.5f ? lightnessRatio
+                    * (1f + saturationRatio) : lightnessRatio + saturationRatio
+                    - lightnessRatio * saturationRatio;
+            float q = 2 * lightnessRatio - p;
+
+            red = hslComponentToRgbComponent(p, q, hueRatio + (1f / 3f));
+            green = hslComponentToRgbComponent(p, q, hueRatio);
+            blue = hslComponentToRgbComponent(p, q, hueRatio - (1f / 3f));
+        }
+        return 0xff000000 | (red << 16) | (green << 8) | (blue << 0);
+    }
+
+    private static int hslComponentToRgbComponent(float p, float q, float ratio) {
+        if (ratio < 0) {
+            ratio += 1;
+        } else if (ratio > 1) {
+            ratio -= 1;
+        }
+
+        if (6 * ratio < 1f) {
+            return (int) ((q + (p - q) * 6f * ratio) * 255f + 0.5f);
+        } else if (2f * ratio < 1f) {
+            return (int) (p * 255f + 0.5f);
+        } else if (3f * ratio < 2f) {
+            return (int) ((q + (p - q) * ((2f / 3f) - ratio) * 6f) * 255f + 0.5f);
+        }
+
+        return (int) (q * 255f + 0.5f);
+    }
 }
diff --git a/uitest/src/com/vaadin/tests/components/colorpicker/ColorPickerInputFormatsTest.java b/uitest/src/com/vaadin/tests/components/colorpicker/ColorPickerInputFormatsTest.java
new file mode 100644
index 0000000000..90c01116cc
--- /dev/null
+++ b/uitest/src/com/vaadin/tests/components/colorpicker/ColorPickerInputFormatsTest.java
@@ -0,0 +1,98 @@
+/*
+ * 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.components.colorpicker;
+
+import static org.junit.Assert.assertEquals;
+
+import org.junit.Test;
+import org.openqa.selenium.By;
+import org.openqa.selenium.Keys;
+import org.openqa.selenium.WebElement;
+
+import com.vaadin.tests.tb3.MultiBrowserTest;
+
+/**
+ * Test legal color values according to
+ * http://www.w3schools.com/cssref/css_colors_legal.asp
+ */
+public class ColorPickerInputFormatsTest extends MultiBrowserTest {
+
+    @Override
+    protected Class<?> getUIClass() {
+        return ColorPickerTestUI.class;
+    }
+
+    @Test
+    public void testRGBValue() throws Exception {
+        openTestURL();
+
+        setColorpickerValue("rgb(100,100,100)");
+
+        assertEquals("#646464", getColorpickerValue());
+    }
+
+    @Test
+    public void testRGBAValue() {
+        openTestURL();
+
+        setColorpickerValue("rgba(100,100,100, 0.5)");
+
+        assertEquals("#646464", getColorpickerValue());
+    }
+
+    @Test
+    public void testHSLValue() {
+        openTestURL();
+
+        setColorpickerValue("hsl(120,100%,50%)");
+
+        assertEquals("#00ff00", getColorpickerValue());
+    }
+
+    @Test
+    public void testHSLAValue() {
+        openTestURL();
+
+        setColorpickerValue("hsla(120,100%,50%, 0.3)");
+
+        assertEquals("#00ff00", getColorpickerValue());
+    }
+
+    private void setColorpickerValue(String value) {
+
+        // Open colorpicker
+        getDriver().findElement(By.id("colorpicker1")).click();
+
+        // Add RGB value
+        WebElement field = getDriver().findElement(
+                By.className("v-colorpicker-preview-textfield"));
+
+        // Select all text
+        field.sendKeys(Keys.chord(Keys.CONTROL, "a"));
+
+        // Replace with rgb value
+        field.sendKeys(value);
+
+        // Submit
+        field.sendKeys(Keys.ENTER);
+    }
+
+    private String getColorpickerValue() {
+        WebElement field = getDriver().findElement(
+                By.className("v-colorpicker-preview-textfield"));
+        return field.getAttribute("value");
+    }
+}
diff --git a/uitest/src/com/vaadin/tests/components/colorpicker/ColorPickerTest.html b/uitest/src/com/vaadin/tests/components/colorpicker/ColorPickerTest.html
index 23c44d3cc0..48a4219c87 100644
--- a/uitest/src/com/vaadin/tests/components/colorpicker/ColorPickerTest.html
+++ b/uitest/src/com/vaadin/tests/components/colorpicker/ColorPickerTest.html
@@ -4,16 +4,16 @@
 <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="" />
-<title>ColorPickerTest</title>
+<title>ColorPickerTestUI</title>
 </head>
 <body>
 <table cellpadding="1" cellspacing="1" border="1">
 <thead>
-<tr><td rowspan="1" colspan="3">ColorPickerTest</td></tr>
+<tr><td rowspan="1" colspan="3">ColorPickerTestUI</td></tr>
 </thead><tbody>
 <tr>
 	<td>open</td>
-	<td>/run/com.vaadin.tests.components.colorpicker.ColorPickerTest?restartApplication</td>
+	<td>/run/com.vaadin.tests.components.colorpicker.ColorPickerTestUI?restartApplication</td>
 	<td></td>
 </tr>
 
@@ -25,17 +25,17 @@
 </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>vaadin=runcomvaadintestscomponentscolorpickerColorPickerTestUI::/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::/VWindow[0]/FocusableScrollPanel[0]/VVerticalLayout[0]/Slot[0]/VTabsheet[0]/VTabsheetPanel[0]/VVerticalLayout[0]/Slot[1]/VColorPickerGradient[0]#clicklayer</td>
+	<td>vaadin=runcomvaadintestscomponentscolorpickerColorPickerTestUI::/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>
 	<td>click</td>
-	<td>vaadin=runcomvaadintestscomponentscolorpickerColorPickerTest::/VWindow[0]/FocusableScrollPanel[0]/VVerticalLayout[0]/VOrderedLayout$Slot[3]/VHorizontalLayout[0]/VOrderedLayout$Slot[0]/VButton[0]/domChild[0]/domChild[0]</td>
+	<td>vaadin=runcomvaadintestscomponentscolorpickerColorPickerTestUI::/VWindow[0]/FocusableScrollPanel[0]/VVerticalLayout[0]/VOrderedLayout$Slot[3]/VHorizontalLayout[0]/VOrderedLayout$Slot[0]/VButton[0]/domChild[0]/domChild[0]</td>
 	<td></td>
 </tr>
 
@@ -47,12 +47,12 @@
 </tr>
 <tr>
 	<td>mouseClick</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>vaadin=runcomvaadintestscomponentscolorpickerColorPickerTestUI::/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>
 	<td>click</td>
-	<td>vaadin=runcomvaadintestscomponentscolorpickerColorPickerTest::/VWindow[0]/FocusableScrollPanel[0]/VVerticalLayout[0]/VOrderedLayout$Slot[3]/VHorizontalLayout[0]/VOrderedLayout$Slot[0]/VButton[0]/domChild[0]/domChild[0]</td>
+	<td>vaadin=runcomvaadintestscomponentscolorpickerColorPickerTestUI::/VWindow[0]/FocusableScrollPanel[0]/VVerticalLayout[0]/VOrderedLayout$Slot[3]/VHorizontalLayout[0]/VOrderedLayout$Slot[0]/VButton[0]/domChild[0]/domChild[0]</td>
 	<td></td>
 </tr>
 <tr>
@@ -64,42 +64,42 @@
 <!-- change foreground color with area button -->
 <tr>
 	<td>mouseClick</td>
-	<td>vaadin=runcomvaadintestscomponentscolorpickerColorPickerTest::PID_Scolorpicker5/domChild[1]</td>
+	<td>vaadin=runcomvaadintestscomponentscolorpickerColorPickerTestUI::PID_Scolorpicker5/domChild[1]</td>
 	<td>10,15</td>
 </tr>
 <!-- expand history -->
 <tr>
 	<td>click</td>
-	<td>vaadin=runcomvaadintestscomponentscolorpickerColorPickerTest::/VWindow[0]/FocusableScrollPanel[0]/VVerticalLayout[0]/VOrderedLayout$Slot[2]/VButton[0]/domChild[0]</td>
+	<td>vaadin=runcomvaadintestscomponentscolorpickerColorPickerTestUI::/VWindow[0]/FocusableScrollPanel[0]/VVerticalLayout[0]/VOrderedLayout$Slot[2]/VButton[0]/domChild[0]</td>
 	<td></td>
 </tr>
 <!-- choose from history -->
 <tr>
 	<td>mouseClick</td>
-	<td>vaadin=runcomvaadintestscomponentscolorpickerColorPickerTest::/VWindow[0]/FocusableScrollPanel[0]/VVerticalLayout[0]/VOrderedLayout$Slot[1]/VVerticalLayout[0]/VOrderedLayout$Slot[0]/VVerticalLayout[0]/VOrderedLayout$Slot[0]/VCustomComponent[0]/VColorPickerGrid[0]/domChild[0]/domChild[1]/domChild[0]/domChild[3]</td>
+	<td>vaadin=runcomvaadintestscomponentscolorpickerColorPickerTestUI::/VWindow[0]/FocusableScrollPanel[0]/VVerticalLayout[0]/VOrderedLayout$Slot[1]/VVerticalLayout[0]/VOrderedLayout$Slot[0]/VVerticalLayout[0]/VOrderedLayout$Slot[0]/VCustomComponent[0]/VColorPickerGrid[0]/domChild[0]/domChild[1]/domChild[0]/domChild[3]</td>
 	<td>9,9</td>
 </tr>
 <tr>
 	<td>click</td>
-	<td>vaadin=runcomvaadintestscomponentscolorpickerColorPickerTest::/VWindow[0]/FocusableScrollPanel[0]/VVerticalLayout[0]/VOrderedLayout$Slot[3]/VHorizontalLayout[0]/VOrderedLayout$Slot[0]/VButton[0]/domChild[0]/domChild[0]</td>
+	<td>vaadin=runcomvaadintestscomponentscolorpickerColorPickerTestUI::/VWindow[0]/FocusableScrollPanel[0]/VVerticalLayout[0]/VOrderedLayout$Slot[3]/VHorizontalLayout[0]/VOrderedLayout$Slot[0]/VButton[0]/domChild[0]/domChild[0]</td>
 	<td></td>
 </tr>
 
 <!-- change background color with area button -->
 <tr>
 	<td>mouseClick</td>
-	<td>vaadin=runcomvaadintestscomponentscolorpickerColorPickerTest::PID_Scolorpicker6/domChild[1]</td>
+	<td>vaadin=runcomvaadintestscomponentscolorpickerColorPickerTestUI::PID_Scolorpicker6/domChild[1]</td>
 	<td>12,24</td>
 </tr>
 <tr>
 	<td>mouseClick</td>
-	<td>vaadin=runcomvaadintestscomponentscolorpickerColorPickerTest::/VWindow[0]/FocusableScrollPanel[0]/VVerticalLayout[0]/VOrderedLayout$Slot[1]/VVerticalLayout[0]/VOrderedLayout$Slot[0]/VVerticalLayout[0]/VOrderedLayout$Slot[0]/VCustomComponent[0]/VColorPickerGrid[0]/domChild[0]/domChild[1]/domChild[0]/domChild[1]</td>
+	<td>vaadin=runcomvaadintestscomponentscolorpickerColorPickerTestUI::/VWindow[0]/FocusableScrollPanel[0]/VVerticalLayout[0]/VOrderedLayout$Slot[1]/VVerticalLayout[0]/VOrderedLayout$Slot[0]/VVerticalLayout[0]/VOrderedLayout$Slot[0]/VCustomComponent[0]/VColorPickerGrid[0]/domChild[0]/domChild[1]/domChild[0]/domChild[1]</td>
 	<td>9,12</td>
 </tr>
 <!-- choose from history -->
 <tr>
 	<td>click</td>
-	<td>vaadin=runcomvaadintestscomponentscolorpickerColorPickerTest::/VWindow[0]/FocusableScrollPanel[0]/VVerticalLayout[0]/VOrderedLayout$Slot[3]/VHorizontalLayout[0]/VOrderedLayout$Slot[0]/VButton[0]/domChild[0]</td>
+	<td>vaadin=runcomvaadintestscomponentscolorpickerColorPickerTestUI::/VWindow[0]/FocusableScrollPanel[0]/VVerticalLayout[0]/VOrderedLayout$Slot[3]/VHorizontalLayout[0]/VOrderedLayout$Slot[0]/VButton[0]/domChild[0]</td>
 	<td></td>
 </tr>
 <tr>
@@ -123,59 +123,59 @@
 <!-- open and close using area button -->
 <tr>
 	<td>mouseClick</td>
-	<td>vaadin=runcomvaadintestscomponentscolorpickerColorPickerTest::PID_Scolorpicker5/domChild[1]</td>
+	<td>vaadin=runcomvaadintestscomponentscolorpickerColorPickerTestUI::PID_Scolorpicker5/domChild[1]</td>
 	<td>11,17</td>
 </tr>
 <tr>
 	<td>mouseClick</td>
-	<td>vaadin=runcomvaadintestscomponentscolorpickerColorPickerTest::PID_Scolorpicker5/domChild[1]</td>
+	<td>vaadin=runcomvaadintestscomponentscolorpickerColorPickerTestUI::PID_Scolorpicker5/domChild[1]</td>
 	<td>11,17</td>
 </tr>
 
 <!-- open background (using area button) to display HSV effects -->
 <tr>
 	<td>mouseClick</td>
-	<td>vaadin=runcomvaadintestscomponentscolorpickerColorPickerTest::PID_Scolorpicker6/domChild[1]</td>
+	<td>vaadin=runcomvaadintestscomponentscolorpickerColorPickerTestUI::PID_Scolorpicker6/domChild[1]</td>
 	<td>21,15</td>
 </tr>
 <!-- HSV tab -->
 <tr>
 	<td>mouseClick</td>
-	<td>vaadin=runcomvaadintestscomponentscolorpickerColorPickerTest::/VWindow[0]/FocusableScrollPanel[0]/VVerticalLayout[0]/VOrderedLayout$Slot[0]/VTabsheet[0]/domChild[0]/domChild[0]/domChild[0]/domChild[0]/domChild[1]/domChild[0]/domChild[0]/domChild[0]</td>
+	<td>vaadin=runcomvaadintestscomponentscolorpickerColorPickerTestUI::/VWindow[0]/FocusableScrollPanel[0]/VVerticalLayout[0]/VOrderedLayout$Slot[0]/VTabsheet[0]/domChild[0]/domChild[0]/domChild[0]/domChild[0]/domChild[1]/domChild[0]/domChild[0]/domChild[0]</td>
 	<td>12,6</td>
 </tr>
 <!-- hue slider -->
 <tr>
 	<td>dragAndDrop</td>
-	<td>vaadin=runcomvaadintestscomponentscolorpickerColorPickerTest::/VWindow[0]/FocusableScrollPanel[0]/VVerticalLayout[0]/VOrderedLayout$Slot[0]/VTabsheet[0]/VTabsheetPanel[0]/VVerticalLayout[0]/VOrderedLayout$Slot[2]/VVerticalLayout[0]/VOrderedLayout$Slot[0]/VSlider[0]/domChild[2]/domChild[0]</td>
+	<td>vaadin=runcomvaadintestscomponentscolorpickerColorPickerTestUI::/VWindow[0]/FocusableScrollPanel[0]/VVerticalLayout[0]/VOrderedLayout$Slot[0]/VTabsheet[0]/VTabsheetPanel[0]/VVerticalLayout[0]/VOrderedLayout$Slot[2]/VVerticalLayout[0]/VOrderedLayout$Slot[0]/VSlider[0]/domChild[2]/domChild[0]</td>
 	<td>136,0</td>
 </tr>
 <!-- saturation slider -->
 <tr>
 	<td>dragAndDrop</td>
-	<td>vaadin=runcomvaadintestscomponentscolorpickerColorPickerTest::/VWindow[0]/FocusableScrollPanel[0]/VVerticalLayout[0]/VOrderedLayout$Slot[0]/VTabsheet[0]/VTabsheetPanel[0]/VVerticalLayout[0]/VOrderedLayout$Slot[2]/VVerticalLayout[0]/VOrderedLayout$Slot[1]/VSlider[0]/domChild[2]/domChild[0]</td>
+	<td>vaadin=runcomvaadintestscomponentscolorpickerColorPickerTestUI::/VWindow[0]/FocusableScrollPanel[0]/VVerticalLayout[0]/VOrderedLayout$Slot[0]/VTabsheet[0]/VTabsheetPanel[0]/VVerticalLayout[0]/VOrderedLayout$Slot[2]/VVerticalLayout[0]/VOrderedLayout$Slot[1]/VSlider[0]/domChild[2]/domChild[0]</td>
 	<td>100,0</td>
 </tr>
 <!-- value slider -->
 <tr>
 	<td>dragAndDrop</td>
-	<td>vaadin=runcomvaadintestscomponentscolorpickerColorPickerTest::/VWindow[0]/FocusableScrollPanel[0]/VVerticalLayout[0]/VOrderedLayout$Slot[0]/VTabsheet[0]/VTabsheetPanel[0]/VVerticalLayout[0]/VOrderedLayout$Slot[2]/VVerticalLayout[0]/VOrderedLayout$Slot[2]/VSlider[0]/domChild[2]/domChild[0]</td>
+	<td>vaadin=runcomvaadintestscomponentscolorpickerColorPickerTestUI::/VWindow[0]/FocusableScrollPanel[0]/VVerticalLayout[0]/VOrderedLayout$Slot[0]/VTabsheet[0]/VTabsheetPanel[0]/VVerticalLayout[0]/VOrderedLayout$Slot[2]/VVerticalLayout[0]/VOrderedLayout$Slot[2]/VSlider[0]/domChild[2]/domChild[0]</td>
 	<td>-60,0</td>
 </tr>
 <!-- Swatches tab (choose color) -->
 <tr>
 	<td>mouseClick</td>
-	<td>vaadin=runcomvaadintestscomponentscolorpickerColorPickerTest::/VWindow[0]/FocusableScrollPanel[0]/VVerticalLayout[0]/VOrderedLayout$Slot[0]/VTabsheet[0]/domChild[0]/domChild[0]/domChild[0]/domChild[0]/domChild[2]/domChild[0]/domChild[0]/domChild[0]</td>
+	<td>vaadin=runcomvaadintestscomponentscolorpickerColorPickerTestUI::/VWindow[0]/FocusableScrollPanel[0]/VVerticalLayout[0]/VOrderedLayout$Slot[0]/VTabsheet[0]/domChild[0]/domChild[0]/domChild[0]/domChild[0]/domChild[2]/domChild[0]/domChild[0]/domChild[0]</td>
 	<td>43,8</td>
 </tr>
 <tr>
 	<td>mouseClick</td>
-	<td>vaadin=runcomvaadintestscomponentscolorpickerColorPickerTest::/VWindow[0]/FocusableScrollPanel[0]/VVerticalLayout[0]/VOrderedLayout$Slot[0]/VTabsheet[0]/VTabsheetPanel[0]/VVerticalLayout[0]/VOrderedLayout$Slot[1]/VCustomComponent[0]/VVerticalLayout[0]/VOrderedLayout$Slot[1]/VColorPickerGrid[0]/domChild[0]/domChild[1]/domChild[11]/domChild[9]</td>
+	<td>vaadin=runcomvaadintestscomponentscolorpickerColorPickerTestUI::/VWindow[0]/FocusableScrollPanel[0]/VVerticalLayout[0]/VOrderedLayout$Slot[0]/VTabsheet[0]/VTabsheetPanel[0]/VVerticalLayout[0]/VOrderedLayout$Slot[1]/VCustomComponent[0]/VVerticalLayout[0]/VOrderedLayout$Slot[1]/VColorPickerGrid[0]/domChild[0]/domChild[1]/domChild[11]/domChild[9]</td>
 	<td>12,10</td>
 </tr>
 <tr>
 	<td>click</td>
-	<td>vaadin=runcomvaadintestscomponentscolorpickerColorPickerTest::/VWindow[0]/FocusableScrollPanel[0]/VVerticalLayout[0]/VOrderedLayout$Slot[3]/VHorizontalLayout[0]/VOrderedLayout$Slot[0]/VButton[0]/domChild[0]/domChild[0]</td>
+	<td>vaadin=runcomvaadintestscomponentscolorpickerColorPickerTestUI::/VWindow[0]/FocusableScrollPanel[0]/VVerticalLayout[0]/VOrderedLayout$Slot[3]/VHorizontalLayout[0]/VOrderedLayout$Slot[0]/VButton[0]/domChild[0]/domChild[0]</td>
 	<td></td>
 </tr>
 <tr>
@@ -187,73 +187,73 @@
 <!-- open foreground (using area button) to display checkbox effects -->
 <tr>
 	<td>mouseClick</td>
-	<td>vaadin=runcomvaadintestscomponentscolorpickerColorPickerTest::PID_Scolorpicker5/domChild[1]</td>
+	<td>vaadin=runcomvaadintestscomponentscolorpickerColorPickerTestUI::PID_Scolorpicker5/domChild[1]</td>
 	<td>14,25</td>
 </tr>
 <!-- remove Swatches tab -->
 <tr>
 	<td>mouseClick</td>
-	<td>vaadin=runcomvaadintestscomponentscolorpickerColorPickerTest::PID_SswaBox/domChild[0]</td>
+	<td>vaadin=runcomvaadintestscomponentscolorpickerColorPickerTestUI::PID_SswaBox/domChild[0]</td>
 	<td>9,6</td>
 </tr>
 <!-- remove css field -->
 <tr>
 	<td>mouseClick</td>
-	<td>vaadin=runcomvaadintestscomponentscolorpickerColorPickerTest::PID_StxtBox/domChild[0]</td>
+	<td>vaadin=runcomvaadintestscomponentscolorpickerColorPickerTestUI::PID_StxtBox/domChild[0]</td>
 	<td>6,9</td>
 </tr>
 <!-- remove history -->
 <tr>
 	<td>mouseClick</td>
-	<td>vaadin=runcomvaadintestscomponentscolorpickerColorPickerTest::PID_ShisBox/domChild[0]</td>
+	<td>vaadin=runcomvaadintestscomponentscolorpickerColorPickerTestUI::PID_ShisBox/domChild[0]</td>
 	<td>6,7</td>
 </tr>
 <!-- remove RGB tab -->
 <tr>
 	<td>mouseClick</td>
-	<td>vaadin=runcomvaadintestscomponentscolorpickerColorPickerTest::PID_SrgbBox/domChild[0]</td>
+	<td>vaadin=runcomvaadintestscomponentscolorpickerColorPickerTestUI::PID_SrgbBox/domChild[0]</td>
 	<td>6,7</td>
 </tr>
 <!-- return RGB tab -->
 <tr>
 	<td>mouseClick</td>
-	<td>vaadin=runcomvaadintestscomponentscolorpickerColorPickerTest::PID_SrgbBox/domChild[0]</td>
+	<td>vaadin=runcomvaadintestscomponentscolorpickerColorPickerTestUI::PID_SrgbBox/domChild[0]</td>
 	<td>6,7</td>
 </tr>
 <!-- remove HSV tab -->
 <tr>
 	<td>mouseClick</td>
-	<td>vaadin=runcomvaadintestscomponentscolorpickerColorPickerTest::PID_ShsvBox/domChild[0]</td>
+	<td>vaadin=runcomvaadintestscomponentscolorpickerColorPickerTestUI::PID_ShsvBox/domChild[0]</td>
 	<td>6,9</td>
 </tr>
 <!-- return HSV tab -->
 <tr>
 	<td>mouseClick</td>
-	<td>vaadin=runcomvaadintestscomponentscolorpickerColorPickerTest::PID_ShsvBox/domChild[0]</td>
+	<td>vaadin=runcomvaadintestscomponentscolorpickerColorPickerTestUI::PID_ShsvBox/domChild[0]</td>
 	<td>6,9</td>
 </tr>
 <!-- return css field -->
 <tr>
 	<td>mouseClick</td>
-	<td>vaadin=runcomvaadintestscomponentscolorpickerColorPickerTest::PID_StxtBox/domChild[0]</td>
+	<td>vaadin=runcomvaadintestscomponentscolorpickerColorPickerTestUI::PID_StxtBox/domChild[0]</td>
 	<td>8,8</td>
 </tr>
 <!-- return history -->
 <tr>
 	<td>mouseClick</td>
-	<td>vaadin=runcomvaadintestscomponentscolorpickerColorPickerTest::PID_ShisBox/domChild[0]</td>
+	<td>vaadin=runcomvaadintestscomponentscolorpickerColorPickerTestUI::PID_ShisBox/domChild[0]</td>
 	<td>6,8</td>
 </tr>
 <!-- return Swatches tab -->
 <tr>
 	<td>mouseClick</td>
-	<td>vaadin=runcomvaadintestscomponentscolorpickerColorPickerTest::PID_SswaBox/domChild[0]</td>
+	<td>vaadin=runcomvaadintestscomponentscolorpickerColorPickerTestUI::PID_SswaBox/domChild[0]</td>
 	<td>4,8</td>
 </tr>
 <!-- close without choosing a new color -->
 <tr>
 	<td>click</td>
-	<td>vaadin=runcomvaadintestscomponentscolorpickerColorPickerTest::/VWindow[0]/FocusableScrollPanel[0]/VVerticalLayout[0]/VOrderedLayout$Slot[3]/VHorizontalLayout[0]/VOrderedLayout$Slot[1]/VButton[0]/domChild[0]</td>
+	<td>vaadin=runcomvaadintestscomponentscolorpickerColorPickerTestUI::/VWindow[0]/FocusableScrollPanel[0]/VVerticalLayout[0]/VOrderedLayout$Slot[3]/VHorizontalLayout[0]/VOrderedLayout$Slot[1]/VButton[0]/domChild[0]</td>
 	<td></td>
 </tr>
 
@@ -265,12 +265,12 @@
 </tr>
 <tr>
 	<td>mouseClick</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>vaadin=runcomvaadintestscomponentscolorpickerColorPickerTestUI::/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>
 	<td>click</td>
-	<td>vaadin=runcomvaadintestscomponentscolorpickerColorPickerTest::/VWindow[0]/FocusableScrollPanel[0]/VVerticalLayout[0]/VOrderedLayout$Slot[3]/VHorizontalLayout[0]/VOrderedLayout$Slot[0]/VButton[0]/domChild[0]/domChild[0]</td>
+	<td>vaadin=runcomvaadintestscomponentscolorpickerColorPickerTestUI::/VWindow[0]/FocusableScrollPanel[0]/VVerticalLayout[0]/VOrderedLayout$Slot[3]/VHorizontalLayout[0]/VOrderedLayout$Slot[0]/VButton[0]/domChild[0]/domChild[0]</td>
 	<td></td>
 </tr>
 <tr>
@@ -287,29 +287,29 @@
 </tr>
 <tr>
 	<td>mouseClick</td>
-	<td>vaadin=runcomvaadintestscomponentscolorpickerColorPickerTest::/VWindow[0]/FocusableScrollPanel[0]/VVerticalLayout[0]/VOrderedLayout$Slot[1]/VVerticalLayout[0]/VOrderedLayout$Slot[0]/VVerticalLayout[0]/VOrderedLayout$Slot[0]/VCustomComponent[0]/VColorPickerGrid[0]/domChild[0]/domChild[1]/domChild[0]/domChild[6]</td>
+	<td>vaadin=runcomvaadintestscomponentscolorpickerColorPickerTestUI::/VWindow[0]/FocusableScrollPanel[0]/VVerticalLayout[0]/VOrderedLayout$Slot[1]/VVerticalLayout[0]/VOrderedLayout$Slot[0]/VVerticalLayout[0]/VOrderedLayout$Slot[0]/VCustomComponent[0]/VColorPickerGrid[0]/domChild[0]/domChild[1]/domChild[0]/domChild[6]</td>
 	<td>10,7</td>
 </tr>
 <tr>
 	<td>click</td>
-	<td>vaadin=runcomvaadintestscomponentscolorpickerColorPickerTest::/VWindow[0]/FocusableScrollPanel[0]/VVerticalLayout[0]/VOrderedLayout$Slot[3]/VHorizontalLayout[0]/VOrderedLayout$Slot[0]/VButton[0]/domChild[0]/domChild[0]</td>
+	<td>vaadin=runcomvaadintestscomponentscolorpickerColorPickerTestUI::/VWindow[0]/FocusableScrollPanel[0]/VVerticalLayout[0]/VOrderedLayout$Slot[3]/VHorizontalLayout[0]/VOrderedLayout$Slot[0]/VButton[0]/domChild[0]/domChild[0]</td>
 	<td></td>
 </tr>
 
 <!-- change color of the last shade area -->
 <tr>
 	<td>mouseClick</td>
-	<td>vaadin=runcomvaadintestscomponentscolorpickerColorPickerTest::PID_Sshadearea_16/domChild[1]</td>
+	<td>vaadin=runcomvaadintestscomponentscolorpickerColorPickerTestUI::PID_Sshadearea_16/domChild[1]</td>
 	<td>10,-65</td>
 </tr>
 <tr>
 	<td>mouseClick</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>vaadin=runcomvaadintestscomponentscolorpickerColorPickerTestUI::/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>
 	<td>click</td>
-	<td>vaadin=runcomvaadintestscomponentscolorpickerColorPickerTest::/VWindow[0]/FocusableScrollPanel[0]/VVerticalLayout[0]/VOrderedLayout$Slot[3]/VHorizontalLayout[0]/VOrderedLayout$Slot[0]/VButton[0]/domChild[0]/domChild[0]</td>
+	<td>vaadin=runcomvaadintestscomponentscolorpickerColorPickerTestUI::/VWindow[0]/FocusableScrollPanel[0]/VVerticalLayout[0]/VOrderedLayout$Slot[3]/VHorizontalLayout[0]/VOrderedLayout$Slot[0]/VButton[0]/domChild[0]/domChild[0]</td>
 	<td></td>
 </tr>
 <tr>
@@ -321,17 +321,17 @@
 <!-- reset the color back to white -->
 <tr>
 	<td>mouseClick</td>
-	<td>vaadin=runcomvaadintestscomponentscolorpickerColorPickerTest::PID_Sshadearea_16/domChild[1]</td>
+	<td>vaadin=runcomvaadintestscomponentscolorpickerColorPickerTestUI::PID_Sshadearea_16/domChild[1]</td>
 	<td>19,-65</td>
 </tr>
 <tr>
 	<td>mouseClick</td>
-	<td>vaadin=runcomvaadintestscomponentscolorpickerColorPickerTest::/VWindow[0]/FocusableScrollPanel[0]/VVerticalLayout[0]/VOrderedLayout$Slot[1]/VVerticalLayout[0]/VOrderedLayout$Slot[0]/VVerticalLayout[0]/VOrderedLayout$Slot[0]/VCustomComponent[0]/VColorPickerGrid[0]/domChild[0]/domChild[1]/domChild[0]/domChild[4]</td>
+	<td>vaadin=runcomvaadintestscomponentscolorpickerColorPickerTestUI::/VWindow[0]/FocusableScrollPanel[0]/VVerticalLayout[0]/VOrderedLayout$Slot[1]/VVerticalLayout[0]/VOrderedLayout$Slot[0]/VVerticalLayout[0]/VOrderedLayout$Slot[0]/VCustomComponent[0]/VColorPickerGrid[0]/domChild[0]/domChild[1]/domChild[0]/domChild[4]</td>
 	<td>6,7</td>
 </tr>
 <tr>
 	<td>click</td>
-	<td>vaadin=runcomvaadintestscomponentscolorpickerColorPickerTest::/VWindow[0]/FocusableScrollPanel[0]/VVerticalLayout[0]/VOrderedLayout$Slot[3]/VHorizontalLayout[0]/VOrderedLayout$Slot[0]/VButton[0]/domChild[0]</td>
+	<td>vaadin=runcomvaadintestscomponentscolorpickerColorPickerTestUI::/VWindow[0]/FocusableScrollPanel[0]/VVerticalLayout[0]/VOrderedLayout$Slot[3]/VHorizontalLayout[0]/VOrderedLayout$Slot[0]/VButton[0]/domChild[0]</td>
 	<td></td>
 </tr>
 <tr>
diff --git a/uitest/src/com/vaadin/tests/components/colorpicker/ColorPickerTest.java b/uitest/src/com/vaadin/tests/components/colorpicker/ColorPickerTestUI.java
index 0f7e639725..544cdafaf0 100644
--- a/uitest/src/com/vaadin/tests/components/colorpicker/ColorPickerTest.java
+++ b/uitest/src/com/vaadin/tests/components/colorpicker/ColorPickerTestUI.java
@@ -1,3 +1,18 @@
+/*
+ * 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.components.colorpicker;
 
 import java.awt.Graphics;
@@ -13,9 +28,10 @@ import javax.imageio.ImageIO;
 
 import com.vaadin.data.Property.ValueChangeEvent;
 import com.vaadin.server.StreamResource;
+import com.vaadin.server.VaadinRequest;
 import com.vaadin.shared.ui.colorpicker.Color;
 import com.vaadin.shared.ui.label.ContentMode;
-import com.vaadin.tests.components.TestBase;
+import com.vaadin.tests.components.AbstractTestUI;
 import com.vaadin.ui.AbstractColorPicker;
 import com.vaadin.ui.Alignment;
 import com.vaadin.ui.CheckBox;
@@ -30,10 +46,11 @@ import com.vaadin.ui.VerticalLayout;
 import com.vaadin.ui.components.colorpicker.ColorChangeEvent;
 import com.vaadin.ui.components.colorpicker.ColorChangeListener;
 
-public class ColorPickerTest extends TestBase implements ColorChangeListener {
+public class ColorPickerTestUI extends AbstractTestUI implements
+        ColorChangeListener {
 
     @Override
-    protected String getDescription() {
+    public String getTestDescription() {
         return "Vaadin 7 compatible ColorPicker";
     }
 
@@ -178,7 +195,7 @@ public class ColorPickerTest extends TestBase implements ColorChangeListener {
     }
 
     @Override
-    protected void setup() {
+    protected void setup(VaadinRequest request) {
         getLayout().setWidth("1000px");
         getLayout().setHeight(null);
         getLayout().addStyleName("colorpicker-mainwindow-content");