Bug 1495808 - Replace existing usages of XUL colorpicker with input[type='color']. r=aceman,jorgk

editor/ui/dialogs/content/EdColorPicker.js

@@ -111,7 +111,7 @@ function Startup()
 
   // Set initial color in input field and in the colorpicker
   SetCurrentColor(gColor);
-  gDialog.ColorPicker.initColor(gColor);
+  gDialog.ColorPicker.value = gColor;
 
   // Use last-picked colors passed in, or those persistent on dialog
   if (TextType)
@@ -163,15 +163,9 @@ function Startup()
   SetWindowLocation();
 }
 
-function ChangePalette(palette)
-{
-  gDialog.ColorPicker.setAttribute("palettename", palette);
-  window.sizeToContent();
-}
-
 function SelectColor()
 {
-  var color = gDialog.ColorPicker.color;
+  var color = gDialog.ColorPicker.value;
   if (color)
     SetCurrentColor(color);
 }

editor/ui/dialogs/content/EdColorPicker.xul

@@ -10,6 +10,7 @@
 
 <dialog title="&windowTitle.label;"
     xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+    xmlns:html="http://www.w3.org/1999/xhtml"
     onload="Startup()"
     ondialogaccept="return onAccept();"
     ondialogcancel="return onCancelColor();">
@@ -28,19 +29,13 @@
       <radio id="CellRadio"  label="&cell.label;"  accesskey="&cell.accessKey;"/>
   </radiogroup>
   </hbox>
-  <colorpicker id="ColorPicker" palettename="standard"
-    persist="palettename"
+  <label value="&chooseColor1.label;"/>
+  <html:input type="color" id="ColorPicker"
     onclick="SetDefaultToOk();"
     ondblclick="if (onAccept()) window.close();"
     onkeypress="SelectColorByKeypress(event);"
-    onselect="SelectColor();"/>
-<!-- Web palette is not implemented???
-  <hbox align="center">
-    <label value="&palette.label;"/>
-    <radio id="StandardPalette" label="&standardPalette.label;" oncommand="ChangePalette('standard')"/>
-    <radio id="WebPalette" label="&webPalette.label;" oncommand="ChangePalette('web')"/>
-  </hbox>
--->
+    onchange="SelectColor();"/>
+
   <spacer class="spacer"/>
   <vbox flex="1">
     <button id="LastPickedButton" crop="right" oncommand="SelectLastPickedColor();">
@@ -49,8 +44,7 @@
                   persist="LastTextColor LastBackgroundColor"/>
       <label value="&lastPickedColor.label;" accesskey="&lastPickedColor.accessKey;" flex="1" style="text-align: center;"/>
     </button>
-    <label value="&setColor1.label;"/>
-    <label value="&setColor2.label;" accesskey="&setColor2.accessKey;" control="ColorInput"/>
+    <label value="&chooseColor2.label;" accesskey="&chooseColor2.accessKey;" control="ColorInput"/>
     <label value="&setColorExample.label;"/>
     <hbox align="center" flex="1=">
       <textbox id="ColorInput" style="width: 8em" oninput="SetColorSwatch(); SetDefaultToOk();"/>

editor/ui/locales/en-US/chrome/dialogs/EdColorPicker.dtd

@@ -5,9 +5,9 @@
 <!ENTITY windowTitle.label "Color">
 <!ENTITY lastPickedColor.label "Last-picked color">
 <!ENTITY lastPickedColor.accessKey "L">
-<!ENTITY setColor1.label "Click on a color or">
-<!ENTITY setColor2.label "enter an HTML color string">
-<!ENTITY setColor2.accessKey "H">
+<!ENTITY chooseColor1.label "Choose a color:">
+<!ENTITY chooseColor2.label "Enter an HTML color string">
+<!ENTITY chooseColor2.accessKey "H">
 <!ENTITY setColorExample.label "(e.g.: &quot;#0000ff&quot; or &quot;blue&quot;):">
 <!ENTITY default.label "Default">
 <!ENTITY default.accessKey "D">

mail/base/content/newTagDialog.js

@@ -46,7 +46,7 @@ function initializeForEditing(aTagKey)
   document.documentElement.setAttribute("ondialogaccept", "return onOKEditTag();");
 
   // extract the color and name for the current tag
-  document.getElementById("tagColorPicker").color = MailServices.tags.getColorForKey(aTagKey);
+  document.getElementById("tagColorPicker").value = MailServices.tags.getColorForKey(aTagKey);
   dialog.nameField.value = MailServices.tags.getTagForKey(aTagKey);
 }
 
@@ -71,7 +71,7 @@ function onOKEditTag()
     MailServices.tags.setTagForKey(dialog.editTagKey, dialog.nameField.value);
   }
 
-  MailServices.tags.setColorForKey(dialog.editTagKey, document.getElementById("tagColorPicker").color);
+  MailServices.tags.setColorForKey(dialog.editTagKey, document.getElementById("tagColorPicker").value);
   return dialog.okCallback();
 }
 
@@ -88,7 +88,7 @@ function onOKNewTag()
     alertForExistingTag();
     return false;
   }
-  return dialog.okCallback(name, document.getElementById("tagColorPicker").color);
+  return dialog.okCallback(name, document.getElementById("tagColorPicker").value);
 }
 
 /**

mail/base/content/newTagDialog.xul

@@ -10,6 +10,7 @@
 
 <dialog xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
         xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+        xmlns:html="http://www.w3.org/1999/xhtml"
         title="&newTagDialog1.title;"
         onload="onLoad();"
         ondialogaccept="return onOKNewTag();">
@@ -22,7 +23,7 @@
   <label value="&name.label;" accesskey="&name.accesskey;" control="name"/>
   <hbox>
     <textbox id="name" oninput="doEnabling();" flex="1"/>
-    <colorpicker class="small-margin" type="button" id="tagColorPicker" palettename="standard"/>
+    <html:input type="color" class="small-margin" id="tagColorPicker"/>
   </hbox>
   <separator/>
 </dialog>

mail/components/preferences/aboutPreferences.xul

@@ -19,6 +19,7 @@
          windowtype="Mail:Preferences"
          xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
          xmlns:xhtml="http://www.w3.org/1999/xhtml"
+         xmlns:html="http://www.w3.org/1999/xhtml"
          onload="gSubDialog.init();"
 #ifdef XP_WIN
          title="&prefWindow.titleWin;">

mail/components/preferences/colors.xul

@@ -12,8 +12,10 @@
 
 <prefwindow id="ColorsDialog" type="child"
             xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+            xmlns:html="http://www.w3.org/1999/xhtml"
             title="&colorsDialog.title;"
             dlgbuttons="accept,cancel"
+            onload="init()"
 #ifdef XP_MACOSX
             style="width: &window.macWidth; !important;">
 #else
@@ -21,6 +23,18 @@
 #endif
 
   <script type="application/javascript" src="chrome://communicator/content/utilityOverlay.js"/>
+  <script type="application/javascript"><![CDATA[
+    function init() {
+      document.getElementById("foregroundtextmenu").value =
+        document.getElementById("browser.display.foreground_color").value;
+      document.getElementById("backgroundmenu").value =
+        document.getElementById("browser.display.background_color").value;
+      document.getElementById("unvisitedlinkmenu").value =
+        document.getElementById("browser.anchor_color").value;
+      document.getElementById("visitedlinkmenu").value =
+        document.getElementById("browser.visited_color").value;
+    }
+  ]]></script>
   <prefpane id="ColorsDialogPane">
 
     <preferences>
@@ -39,14 +53,12 @@
         <hbox align="center">
           <label value="&textColor.label;" accesskey="&textColor.accesskey;" control="foregroundtextmenu"/>
           <spacer flex="1"/>
-          <colorpicker type="button" id="foregroundtextmenu" palettename="standard"
-                       preference="browser.display.foreground_color"/>
+          <html:input type="color" id="foregroundtextmenu" preference="browser.display.foreground_color"/>
         </hbox>
         <hbox align="center" style="margin-top: 5px">
           <label value="&backgroundColor.label;" accesskey="&backgroundColor.accesskey;" control="backgroundmenu"/>
           <spacer flex="1"/>
-          <colorpicker type="button" id="backgroundmenu" palettename="standard"
-                       preference="browser.display.background_color"/>
+          <html:input type="color" id="backgroundmenu" preference="browser.display.background_color"/>
         </hbox>
         <separator class="thin"/>
         <hbox align="center">
@@ -60,14 +72,12 @@
         <hbox align="center">
           <label value="&linkColor.label;" accesskey="&linkColor.accesskey;" control="unvisitedlinkmenu"/>
           <spacer flex="1"/>
-          <colorpicker type="button" id="unvisitedlinkmenu" palettename="standard"
-                       preference="browser.anchor_color"/>
+          <html:input type="color" id="unvisitedlinkmenu" preference="browser.anchor_color"/>
         </hbox>
         <hbox align="center" style="margin-top: 5px">
           <label value="&visitedLinkColor.label;" accesskey="&visitedLinkColor.accesskey;" control="visitedlinkmenu"/>
           <spacer flex="1"/>
-          <colorpicker type="button" id="visitedlinkmenu" palettename="standard"
-                       preference="browser.visited_color"/>
+          <html:input type="color" id="visitedlinkmenu" preference="browser.visited_color"/>
         </hbox>
         <separator class="thin"/>
         <hbox align="center">

mail/components/preferences/compose.inc.xul

@@ -136,10 +136,10 @@
 
             <hbox align="center">
               <label control="textColorButton" value="&fontColor.label;" accesskey="&fontColor.accesskey;"/>
-              <colorpicker type="button" id="textColorButton" preference="msgcompose.text_color"/>
+              <html:input type="color" id="textColorButton" preference="msgcompose.text_color"/>
               <separator orient="vertical" class="thin"/>
               <label control="backgroundColorButton" value="&bgColor.label;" accesskey="&bgColor.accesskey;"/>
-              <colorpicker type="button" id="backgroundColorButton" preference="msgcompose.background_color"/>
+              <html:input type="color" id="backgroundColorButton" preference="msgcompose.background_color"/>
               <spacer flex="1"/>
               <button label="&restoreHTMLDefaults.label;" accesskey="&restoreHTMLDefaults.accesskey;"
                       oncommand="gComposePane.restoreHTMLDefaults();"/>

mail/components/preferences/compose.js

@@ -25,6 +25,8 @@ var gComposePane = {
 
     this.initAbDefaultStartupDir();
 
+    this.setButtonColors();
+
     if (!(("arguments" in window) && window.arguments[1])) {
       // If no tab was specified, select the last used tab.
       let preference = document.getElementById("mail.preferences.compose.selectedTabIndex");
@@ -106,6 +108,13 @@ var gComposePane = {
     }
   },
 
+  setButtonColors() {
+    document.getElementById("textColorButton").value =
+      document.getElementById("msgcompose.text_color").value;
+    document.getElementById("backgroundColorButton").value =
+      document.getElementById("msgcompose.background_color").value;
+  },
+
   setDefaultStartupDir(aDirURI) {
     if (aDirURI) {
       // Some AB directory was selected. Set prefs to make this directory
@@ -192,6 +201,8 @@ var gComposePane = {
      try {
        document.getElementById("msgcompose.background_color").reset();
      } catch (ex) {}
+
+     this.setButtonColors();
   },
 
   startupDirListener: {

mail/components/preferences/display.inc.xul

@@ -152,7 +152,7 @@
                 </menupopup>
               </menulist>
               <label value="&quotedTextColor.label;" accesskey="&quotedTextColor.accesskey;" control="citationmenu"/>
-              <colorpicker type="button" id="citationmenu" palettename="standard" preference="mail.citation_color"/>
+              <html:input type="color" id="citationmenu" preference="mail.citation_color"/>
             </hbox>
           </groupbox>
 

mail/components/preferences/display.js

@@ -31,6 +31,9 @@ var gDisplayPane = {
 
     this.mInitialized = true;
 
+    document.getElementById("citationmenu").value =
+      document.getElementById("mail.citation_color").value;
+
     this.mTagListBox = document.getElementById("tagList");
     this.buildTagList();
   },

mail/themes/linux/editor/EditorDialog.css

@@ -3,6 +3,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
+@namespace url(http://www.w3.org/1999/xhtml);
 
 /* The defaults are WAY to big! */
 groupbox {
@@ -82,6 +83,9 @@ groupbox {
 
 #ColorPicker {
   -moz-user-focus: normal;
+  margin: 1px 5px 2px;
+  padding: 3px;
+  height: 28px;
 }
 
 #ColorPickerSwatch {

mail/themes/osx/editor/EditorDialog.css

@@ -3,6 +3,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
+@namespace url(http://www.w3.org/1999/xhtml);
 
 /* The defaults are WAY to big! */
 groupbox {
@@ -82,6 +83,9 @@ groupbox {
 
 #ColorPicker {
   -moz-user-focus: normal;
+  margin: 1px 5px 2px;
+  padding: 3px;
+  height: 28px;
 }
 
 #ColorPickerSwatch {

mail/themes/windows/editor/EditorDialog.css

@@ -3,6 +3,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
+@namespace url(http://www.w3.org/1999/xhtml);
 
 /* The defaults are WAY to big! */
 groupbox {
@@ -82,6 +83,9 @@ groupbox {
 
 #ColorPicker {
   -moz-user-focus: normal;
+  margin: 1px 5px 2px;
+  padding: 3px;
+  height: 28px;
 }
 
 #ColorPickerSwatch {