Bug 1495808 - Replace existing usages of XUL colorpicker with input[type='color']. r=aceman,jorgk
authorRichard Marti <richard.marti@gmail.com>
Wed, 03 Oct 2018 10:08:06 +0200
changeset 33312 7ee3e492186abf5d064a0f16f41137fb7cfdaa86
parent 33311 4aa20359173fc49b4ae3699985ba8696577f1cbe
child 33313 f34a77fd94161f3c02a35d31a3c4e6f24450c6ca
push id387
push userclokep@gmail.com
push dateMon, 10 Dec 2018 21:30:47 +0000
reviewersaceman, jorgk
bugs1495808
Bug 1495808 - Replace existing usages of XUL colorpicker with input[type='color']. r=aceman,jorgk
editor/ui/dialogs/content/EdColorPicker.js
editor/ui/dialogs/content/EdColorPicker.xul
editor/ui/locales/en-US/chrome/dialogs/EdColorPicker.dtd
mail/base/content/newTagDialog.js
mail/base/content/newTagDialog.xul
mail/components/preferences/aboutPreferences.xul
mail/components/preferences/colors.xul
mail/components/preferences/compose.inc.xul
mail/components/preferences/compose.js
mail/components/preferences/display.inc.xul
mail/components/preferences/display.js
mail/themes/linux/editor/EditorDialog.css
mail/themes/osx/editor/EditorDialog.css
mail/themes/windows/editor/EditorDialog.css
--- a/editor/ui/dialogs/content/EdColorPicker.js
+++ b/editor/ui/dialogs/content/EdColorPicker.js
@@ -106,17 +106,17 @@ function Startup()
       tmpColor = gColorObj.TextColor;
       if (tmpColor && tmpColor.toLowerCase() != "windowtext")
         gColor = gColorObj.TextColor;
       break;
   }
 
   // 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)
   {
     if ( !("LastTextColor" in gColorObj) || !gColorObj.LastTextColor)
       gColorObj.LastTextColor = gDialog.LastPickedColor.getAttribute("LastTextColor");
     LastPickedColor = gColorObj.LastTextColor;
   }
@@ -158,25 +158,19 @@ function Startup()
 
   // Set focus to colorpicker if not set to table radio buttons above
   if (!haveTableRadio)
     gDialog.ColorPicker.focus();
 
   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);
 }
 
 function RemoveColor()
 {
   SetCurrentColor("");
   gDialog.ColorInput.focus();
--- a/editor/ui/dialogs/content/EdColorPicker.xul
+++ b/editor/ui/dialogs/content/EdColorPicker.xul
@@ -5,16 +5,17 @@
 
 <?xml-stylesheet href="chrome://editor/skin/editor.css" type="text/css"?>
 <?xml-stylesheet href="chrome://editor/skin/EditorDialog.css" type="text/css"?>
 
 <!DOCTYPE dialog SYSTEM "chrome://editor/locale/EdColorPicker.dtd">
 
 <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();">
 
   <script type="application/javascript" src="chrome://editor/content/editorUtilities.js"/>
   <script type="application/javascript" src="chrome://editor/content/EdDialogCommon.js"/>
   <script type="application/javascript" src="chrome://editor/content/EdColorPicker.js"/>
 
@@ -23,39 +24,32 @@
 
   <hbox id="TableOrCellGroup" align="center" collapsed="true">
     <label control="CellOrTableGroup" value="&background.label;" accesskey="&background.accessKey;"/>
     <radiogroup id="CellOrTableGroup" orient="horizontal">
       <radio id="TableRadio" label="&table.label;" accesskey="&table.accessKey;"/>
       <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();">
       <spacer id="LastPickedColor"
                   LastTextColor="" LastBackgroundColor=""
                   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();"/>
       <spacer flex="1"/>
       <spacer id="ColorPickerSwatch"/>
       <spacer flex="1"/>
       <button id="DefaultColorButton" label="&default.label;" accesskey="&default.accessKey;"
         style="margin-right:0px;" oncommand="RemoveColor()"/>
--- a/editor/ui/locales/en-US/chrome/dialogs/EdColorPicker.dtd
+++ b/editor/ui/locales/en-US/chrome/dialogs/EdColorPicker.dtd
@@ -1,18 +1,18 @@
 <!-- This Source Code Form is subject to the terms of the Mozilla Public
    - 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/. -->
 
 <!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">
 <!ENTITY palette.label "Palette:">
 <!ENTITY standardPalette.label "Standard">
 <!ENTITY webPalette.label "All web colors">
 <!ENTITY background.label "Background for:">
 <!ENTITY background.accessKey "B">
--- a/mail/base/content/newTagDialog.js
+++ b/mail/base/content/newTagDialog.js
@@ -41,17 +41,17 @@ function initializeForEditing(aTagKey)
   // Change the title of the dialog
   var messengerBundle = document.getElementById("bundle_messenger");
   document.title = messengerBundle.getString("editTagTitle");
 
   // override the OK button
   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);
 }
 
 /**
  * on OK handler for editing a new tag.
  */
 function onOKEditTag()
 {
@@ -66,34 +66,34 @@ function onOKEditTag()
     {
       alertForExistingTag();
       return false; // abort the OK
     }
 
     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();
 }
 
 /**
  * on OK handler for creating a new tag. Alerts the user if a tag with
  * the name already exists.
  */
 function onOKNewTag()
 {
   var name = dialog.nameField.value;
 
   if (MailServices.tags.getKeyForTag(name))
   {
     alertForExistingTag();
     return false;
   }
-  return dialog.okCallback(name, document.getElementById("tagColorPicker").color);
+  return dialog.okCallback(name, document.getElementById("tagColorPicker").value);
 }
 
 /**
  * Alerts the user that they are trying to create a tag with a name that
  * already exists.
  */
 function alertForExistingTag()
 {
--- a/mail/base/content/newTagDialog.xul
+++ b/mail/base/content/newTagDialog.xul
@@ -5,24 +5,25 @@
    - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
 
 <?xml-stylesheet href="chrome://messenger/skin/dialogs.css" type="text/css"?>
 
 <!DOCTYPE dialog SYSTEM "chrome://messenger/locale/newTagDialog.dtd">
 
 <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();">
 
   <stringbundleset id="stringbundleset">
     <stringbundle id="bundle_messenger" src="chrome://messenger/locale/messenger.properties"/>
   </stringbundleset>
 
   <script type="application/javascript" src="chrome://messenger/content/newTagDialog.js"/>
   <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>
--- a/mail/components/preferences/aboutPreferences.xul
+++ b/mail/components/preferences/aboutPreferences.xul
@@ -14,16 +14,17 @@
 <?xml-stylesheet href="chrome://messenger/skin/preferences/aboutPreferences.css"?>
 
 #include doctype.inc
 
 <preftab id="MailPreferences" flex="1"
          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;">
 #endif
 #ifdef XP_UNIX
 #ifndef XP_MACOSX
          title="&prefWindow.titleGNOME;">
 #else
--- a/mail/components/preferences/colors.xul
+++ b/mail/components/preferences/colors.xul
@@ -7,25 +7,39 @@
 
 <?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
 <?xml-stylesheet href="chrome://messenger/skin/preferences/preferences.css"?>
 
 <!DOCTYPE prefwindow SYSTEM "chrome://messenger/locale/preferences/colors.dtd" >
 
 <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
             style="width: &window.width; !important;">
 #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>
       <preference id="browser.display.document_color_use"   name="browser.display.document_color_use"   type="int"/>
       <preference id="browser.anchor_color"                 name="browser.anchor_color"                 type="string"/>
       <preference id="browser.visited_color"                name="browser.visited_color"                type="string"/>
       <preference id="browser.underline_anchors"            name="browser.underline_anchors"            type="bool"/>
       <preference id="browser.display.foreground_color"     name="browser.display.foreground_color"     type="string"/>
@@ -34,45 +48,41 @@
     </preferences>
 
     <hbox>
       <groupbox flex="1">
         <caption label="&color;"/>
         <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">
           <checkbox id="browserUseSystemColors" label="&useSystemColors.label;" accesskey="&useSystemColors.accesskey;"
                     preference="browser.display.use_system_colors"/>
         </hbox>
       </groupbox>
 
       <groupbox flex="1">
         <caption label="&links;"/>
         <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">
           <checkbox id="browserUnderlineAnchors" label="&underlineLinks.label;" accesskey="&underlineLinks.accesskey;"
                     preference="browser.underline_anchors"/>
         </hbox>
       </groupbox>
     </hbox>
--- a/mail/components/preferences/compose.inc.xul
+++ b/mail/components/preferences/compose.inc.xul
@@ -131,20 +131,20 @@
                 </menupopup>
               </menulist>
             </hbox>
 
             <separator class="thin"/>
 
             <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();"/>
             </hbox>
 
             <separator class="thin"/>
 
             <hbox align="center">
--- a/mail/components/preferences/compose.js
+++ b/mail/components/preferences/compose.js
@@ -20,16 +20,18 @@ var gComposePane = {
     this.updateAutosave();
 
     this.updateAttachmentCheck();
 
     this.updateEmailCollection();
 
     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");
       if (preference.value)
         document.getElementById("composePrefs").selectedIndex = preference.value;
     }
 
     this.mInitialized = true;
@@ -101,16 +103,23 @@ var gComposePane = {
       else
         dirList.value = "";
     } else {
       // Choose item meaning there is no default startup directory any more.
       dirList.value = "";
     }
   },
 
+  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
       // the default view when starting up the main AB.
       Services.prefs.setCharPref("mail.addr_book.view.startupURI", aDirURI);
       Services.prefs.setBoolPref("mail.addr_book.view.startupURIisDefault", true);
     } else {
       // Set pref that there's no default startup view directory any more.
@@ -187,16 +196,18 @@ var gComposePane = {
 
      try {
        document.getElementById("msgcompose.text_color").reset();
      } catch (ex) {}
 
      try {
        document.getElementById("msgcompose.background_color").reset();
      } catch (ex) {}
+
+     this.setButtonColors();
   },
 
   startupDirListener: {
     inited: false,
     domain: "mail.addr_book.view.startupURI",
     observe(subject, topic, prefName) {
       if (topic != "nsPref:changed")
         return;
--- a/mail/components/preferences/display.inc.xul
+++ b/mail/components/preferences/display.inc.xul
@@ -147,17 +147,17 @@
               <menulist id="mailQuotedSize" preference="mail.quoted_size">
                 <menupopup>
                   <menuitem value="0" label="&regularSize.label;"/>
                   <menuitem value="1" label="&bigger.label;"/>
                   <menuitem value="2" label="&smaller.label;"/>
                 </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>
 
         </tabpanel>
 
         <tabpanel orient="vertical">
           <label control="tagList">&displayTagsText.label;</label>
           <hbox>
--- a/mail/components/preferences/display.js
+++ b/mail/components/preferences/display.js
@@ -26,16 +26,19 @@ var gDisplayPane = {
       item.setAttribute("label", "");
       item.setAttribute("value", "");
       menulist.menupopup.insertBefore(item, menulist.menupopup.firstChild);
       menulist.selectedIndex = 0;
     }
 
     this.mInitialized = true;
 
+    document.getElementById("citationmenu").value =
+      document.getElementById("mail.citation_color").value;
+
     this.mTagListBox = document.getElementById("tagList");
     this.buildTagList();
   },
 
   // FONTS
 
   /**
    * Populates the default font list in UI.
--- a/mail/themes/linux/editor/EditorDialog.css
+++ b/mail/themes/linux/editor/EditorDialog.css
@@ -1,13 +1,14 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * 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/. */
 
 @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 {
   margin:         2px 5px /* 4px 5px */;
   padding-top:    2px;
   padding-bottom: 4px;
 }
 
@@ -77,16 +78,19 @@ groupbox {
 }
 
 .menu-list[focused="true"] {
   color: white;
 }
 
 #ColorPicker {
   -moz-user-focus: normal;
+  margin: 1px 5px 2px;
+  padding: 3px;
+  height: 28px;
 }
 
 #ColorPickerSwatch {
   border : 2px outset #CCCCCC;
   width: 25px;
   height: 20px;
   margin-top: 0px;
   margin-bottom: 0px;
--- a/mail/themes/osx/editor/EditorDialog.css
+++ b/mail/themes/osx/editor/EditorDialog.css
@@ -1,13 +1,14 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * 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/. */
 
 @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 {
   margin:         2px 5px /* 4px 5px */;
   padding-top:    2px;
   padding-bottom: 4px;
 }
 
@@ -77,16 +78,19 @@ groupbox {
 }
 
 .menu-list[focused="true"] {
   color: white;
 }
 
 #ColorPicker {
   -moz-user-focus: normal;
+  margin: 1px 5px 2px;
+  padding: 3px;
+  height: 28px;
 }
 
 #ColorPickerSwatch {
   border : 2px outset #CCCCCC;
   width: 25px;
   height: 20px;
   margin-top: 0px;
   margin-bottom: 0px;
--- a/mail/themes/windows/editor/EditorDialog.css
+++ b/mail/themes/windows/editor/EditorDialog.css
@@ -1,13 +1,14 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * 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/. */
 
 @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 {
   margin:         2px 5px /* 4px 5px */;
   padding-top:    2px;
   padding-bottom: 4px;
 }
 
@@ -77,16 +78,19 @@ groupbox {
 }
 
 .menu-list[focused="true"] {
   color: white;
 }
 
 #ColorPicker {
   -moz-user-focus: normal;
+  margin: 1px 5px 2px;
+  padding: 3px;
+  height: 28px;
 }
 
 #ColorPickerSwatch {
   border : 2px outset #CCCCCC;
   width: 25px;
   height: 20px;
   margin-top: 0px;
   margin-bottom: 0px;