Fix bug 1002597 - Consider using <html:input type=color> as a color picker instead of <xul:colorpicker>. r=Decathlon

calendar/base/content/dialogs/calendar-properties-dialog.js

@@ -17,12 +17,10 @@ let gCalendar;
  */
 function onLoad() {
     gCalendar = window.arguments[0].calendar;
+    let calColor = gCalendar.getProperty('color');
 
     document.getElementById("calendar-name").value = gCalendar.name;
-    let calColor = gCalendar.getProperty('color');
-    if (calColor) {
-       document.getElementById("calendar-color").color = calColor;
-    }
+    document.getElementById("calendar-color").value = calColor || "#A8C2E1";
     document.getElementById("calendar-uri").value = gCalendar.uri.spec;
     document.getElementById("read-only").checked = gCalendar.readOnly;
 
@@ -78,7 +76,7 @@ function onAcceptDialog() {
     gCalendar.name = document.getElementById("calendar-name").value;
 
     // Save calendar color
-    gCalendar.setProperty("color", document.getElementById("calendar-color").color);
+    gCalendar.setProperty("color", document.getElementById("calendar-color").value);
 
     // Save readonly state
     gCalendar.readOnly = document.getElementById("read-only").checked;

calendar/base/content/dialogs/calendar-properties-dialog.xul

@@ -25,6 +25,7 @@
     onload="onLoad()"
     persist="screenX screenY"
     xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+    xmlns:html="http://www.w3.org/1999/xhtml"
     width="500">
 
   <script type="application/javascript" src="chrome://calendar/content/calendar-properties-dialog.js"/>
@@ -58,11 +59,10 @@
                disable-with-calendar="true"
                control="calendar-color"/>
           <hbox align="center">
-            <colorpicker id="calendar-color"
-                         class="small-margin"
-                         type="button"
-                         palettename="standard"
-                         disable-with-calendar="true"/>
+            <html:input id="calendar-color"
+                        class="small-margin"
+                        type="color"
+                        disable-with-calendar="true"/>
           </hbox>
       </row>
       <row id="calendar-uri-row" align="center">

calendar/base/content/preferences/editCategory.js

@@ -2,7 +2,6 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-
 Components.utils.import("resource://calendar/modules/calUtils.jsm");
 
 // Global variable, set to true if the user has picked a custom color.
@@ -12,13 +11,15 @@ var customColorSelected = false;
  * Load Handler, called when the edit category dialog is loaded
  */
 function editCategoryLoad() {
+    let color = window.arguments[1] || cal.hashColor(window.arguments[0]);
+    let hasColor = (window.arguments[1] != null);
     document.getElementById("categoryName").value = window.arguments[0];
+    document.getElementById("categoryColor").value = color;
+    document.getElementById("useColor").checked = hasColor;
+    customColorSelected = hasColor;
     document.title = window.arguments[2];
-    if (window.arguments[1]) {
-        document.getElementById("useColor").checked = true;
-        document.getElementById("categoryColor").color = window.arguments[1];
-        customColorSelected = true;
-    }
+
+    toggleColor();
 }
 
 /**
@@ -27,7 +28,7 @@ function editCategoryLoad() {
  */
 function doOK() {
     let color = document.getElementById("useColor").checked ?
-                document.getElementById("categoryColor").color :
+                document.getElementById("categoryColor").value :
                 null;
 
     let categoryName = document.getElementById("categoryName").value;
@@ -46,23 +47,9 @@ function categoryNameChanged() {
         customColorSelected = false;
     }
 
-    if (!customColorSelected && document.getElementById("useColor").checked) {
+    if (!customColorSelected && document.getElementById('useColor').checked) {
         // Color is wanted, choose the color based on the category name's hash.
-        document.getElementById("categoryColor").color = cal.hashColor(newValue);
-    }
-}
-
-/**
- * Handler function to be called when the checkbox to use a category color was
- * changed. Toggles the color checkbox and recomputes the color, if needed.
- */
-function toggleColor() {
-    if (document.getElementById("useColor").checked) {
-        // Pretend the category name changed, this selects the color
-        categoryNameChanged();
-    } else {
-        document.getElementById("categoryColor").color = "transparent";
-        customColorSelected = false;
+        document.getElementById("categoryColor").value = cal.hashColor(newValue);
     }
 }
 
@@ -73,3 +60,49 @@ function colorPickerChanged() {
     document.getElementById('useColor').checked = true;
     customColorSelected = true;
 }
+
+/**
+ * Handler called when the use color checkbox is toggled.
+ */
+function toggleColor() {
+    let useColor = document.getElementById('useColor').checked;
+    let categoryColor = document.getElementById('categoryColor');
+
+    if (useColor) {
+        categoryColor.setAttribute("type", "color");
+        if (toggleColor.lastColor) {
+            categoryColor.value = toggleColor.lastColor;
+        }
+    } else {
+        categoryColor.setAttribute("type", "button");
+        toggleColor.lastColor = categoryColor.value;
+        categoryColor.value = "";
+    }
+}
+
+/**
+ * Click handler for the color picker. Turns the button back into a colorpicker
+ * when clicked.
+ */
+function clickColor() {
+    let categoryColor = document.getElementById('categoryColor');
+    if (categoryColor.getAttribute("type") == "button") {
+        colorPickerChanged();
+        toggleColor();
+        categoryColor.click();
+    }
+}
+
+/**
+ * Call the function after the given timeout, resetting the timer if delay is
+ * called again with the same function.
+ *
+ * @param timeout   The timeout interval.
+ * @param func      The function to call after the timeout.
+ */
+function delay(timeout, func) {
+    if (func.timer) {
+      clearTimeout(func.timer);
+    }
+    func.timer = setTimeout(func, timeout);
+}

calendar/base/content/preferences/editCategory.xul

@@ -15,6 +15,7 @@
 
 <dialog id="editCategory"
         xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+        xmlns:html="http://www.w3.org/1999/xhtml"
         buttons="accept,cancel"
         onload="editCategoryLoad();"
         ondialogaccept="return doOK();">
@@ -22,17 +23,19 @@
 
   <!-- dialog-box: from dialogOverlay.xul -->
   <vbox id="dialog-box">
-    <hbox>
+    <hbox align="center">
       <label value="&pref.categories.name.label;" control="categoryName"/>
-      <textbox id="categoryName"/>
+      <textbox id="categoryName" onchange="categoryNameChanged()" oninput="delay(500, categoryNameChanged)"/>
     </hbox>
-    <hbox id="row2" pack="center">
+    <hbox id="row2">
       <checkbox id="useColor"
                 label="&pref.categories.usecolor.label;"
-                oncommand="toggleColor()"/>
-      <colorpicker id="categoryColor"
-                   type="button"
-                   onchange="colorPickerChanged()"/>
+                oncommand="toggleColor(); categoryNameChanged()"/>
+      <html:input id="categoryColor"
+                  type="color"
+                  style="width: 64px; height: 23px"
+                  onclick="clickColor()"
+                  onchange="colorPickerChanged()"/>
     </hbox>
   </vbox>
 </dialog>

calendar/resources/content/calendarCreation.js

@@ -35,6 +35,7 @@ function initCustomizePage() {
     let suppressAlarmsRow = document.getElementById("customize-suppressAlarms-row");
     suppressAlarmsRow.hidden =
         (gCalendar && gCalendar.getProperty("capabilities.alarms.popup.supported") === false);
+    document.getElementById("calendar-color").value = "#A8C2E1";
 }
 
 /**
@@ -166,7 +167,7 @@ function prepareCreateCalendar() {
  */
 function doCreateCalendar() {
     let cal_name = document.getElementById("calendar-name").value;
-    let cal_color = document.getElementById('calendar-color').color;
+    let cal_color = document.getElementById("calendar-color").value;
 
     gCalendar.name = cal_name;
     gCalendar.setProperty('color', cal_color);

calendar/resources/content/calendarCreation.xul

@@ -15,6 +15,7 @@
         title="&wizard.title;"
         windowtype="Calendar:NewCalendarWizard"
         xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+        xmlns:html="http://www.w3.org/1999/xhtml"
         onwizardfinish=""
         persist="screenX screenY">
 
@@ -109,10 +110,10 @@
                 <row id="customize-color-row" align="center">
                     <label value="&calendarproperties.color.label;" control="calendar-color"/>
                     <hbox align="center">
-                        <colorpicker id="calendar-color"
-                                     class="small-margin"
-                                     type="button"
-                                     palettename="standard"/>
+                        <html:input id="calendar-color"
+                                    class="small-margin"
+                                    type="color"
+                                    palettename="standard"/>
                     </hbox>
                 </row>
                 <row id="customize-suppressAlarms-row" align="center">