Bug 968993 - Don't assign a non-existant 'mixed' property to background-color. Also add a multicolor icon. r+ui-r=bwinton, ui-r=Neil

editor/ui/composer/content/editor.js

@@ -933,52 +933,42 @@ function initFontSizeMenu(menuPopup)
 
 function onHighlightColorChange()
 {
-  var commandNode = document.getElementById("cmd_highlight");
-  if (commandNode)
-  {
-    var color = commandNode.getAttribute("state");
-    var button = document.getElementById("HighlightColorButton");
-    if (button)
-    {
-      // No color set - get color set on page or other defaults
-      if (!color)
-        color = "transparent" ;
-
-      button.setAttribute("style", "background-color:"+color+" !important");
-    }
-  }
+  ChangeButtonColor("cmd_highlight", "HighlightColorButton",
+                    "transparent");
 }
 
 function onFontColorChange()
 {
-  var commandNode = document.getElementById("cmd_fontColor");
-  if (commandNode)
-  {
-    var color = commandNode.getAttribute("state");
-    var button = document.getElementById("TextColorButton");
-    if (button)
-    {
-      // No color set - get color set on page or other defaults
-      if (!color)
-        color = gDefaultTextColor;
-      button.setAttribute("style", "background-color:"+color);
-    }
-  }
+  ChangeButtonColor("cmd_fontColor", "TextColorButton",
+                    gDefaultTextColor);
 }
 
 function onBackgroundColorChange()
 {
-  var commandNode = document.getElementById("cmd_backgroundColor");
+  ChangeButtonColor("cmd_backgroundColor", "BackgroundColorButton",
+                    gDefaultBackgroundColor);
+}
+
+/* Helper function that changes the button color.
+ *   commandID - The ID of the command element.
+ *   id - The ID of the button needing to be changed.
+ *   defaultColor - The default color the button gets set to.
+ */
+function ChangeButtonColor(commandID, id, defaultColor) {
+  var commandNode = document.getElementById(commandID);
   if (commandNode)
   {
     var color = commandNode.getAttribute("state");
-    var button = document.getElementById("BackgroundColorButton");
+    var button = document.getElementById(id);
     if (button)
     {
-      if (!color)
-        color = gDefaultBackgroundColor;
+      button.setAttribute("color", color);
 
-      button.setAttribute("style", "background-color:"+color);
+      // No color or a mixed color - get color set on page or other defaults.
+      if (!color || color == "mixed")
+        color = defaultColor;
+
+      button.setAttribute("style", "background-color:" + color + " !important");
     }
   }
 }

mail/themes/linux/jar.mn

@@ -152,6 +152,7 @@ classic.jar:
   skin/classic/messenger/icons/folder-new-star.png            (mail/icons/folder-new-star.png)
   skin/classic/messenger/icons/message-list.png               (mail/icons/message-list.png)
   skin/classic/messenger/icons/message.png                    (mail/icons/message.png)
+  skin/classic/messenger/icons/multicolor.png                 (mail/icons/multicolor.png)
   skin/classic/messenger/icons/attachment-deleted.png         (mail/icons/attachment-deleted.png)
   skin/classic/messenger/icons/attachment-deleted-large.png   (mail/icons/attachment-deleted-large.png)
   skin/classic/messenger/icons/attachment-col.svg             (mail/icons/attachment-col.svg)

mail/themes/linux/mail/compose/messengercompose.css

@@ -732,6 +732,11 @@ toolbarbutton.formatting-button {
   -moz-margin-end: 9px;
 }
 
+#TextColorButton[color="mixed"] {
+  background-image: url("chrome://messenger/skin/icons/multicolor.png");
+  background-size: cover;
+}
+
 #BackgroundColorButton {
   margin-top: 9px;
   margin-bottom: 2px;

mail/themes/osx/jar.mn

@@ -182,6 +182,7 @@ classic.jar:
   skin/classic/messenger/icons/message-news-attach.png           (mail/icons/message-news-attach.png)
   skin/classic/messenger/icons/message-news-new-attach.png       (mail/icons/message-news-new-attach.png)
   skin/classic/messenger/icons/message-news-new.png              (mail/icons/message-news-new.png)
+  skin/classic/messenger/icons/multicolor.png                    (mail/icons/multicolor.png)
   skin/classic/messenger/icons/toolbarbutton-dropmarker.png      (mail/icons/toolbarbutton-dropmarker.png)
   skin/classic/messenger/icons/toolbarbutton-dropmarker-lion.png (mail/icons/toolbarbutton-dropmarker-lion.png)
   skin/classic/messenger/icons/toolbarbutton-dropmarker-lion@2x.png (mail/icons/toolbarbutton-dropmarker-lion@2x.png)

mail/themes/osx/mail/compose/messengercompose.css

@@ -1391,6 +1391,11 @@ toolbarbutton.formatting-button > .toolbarbutton-menubutton-dropmarker {
   -moz-margin-end: 9px;
 }
 
+#TextColorButton[color="mixed"] {
+  background-image: url("chrome://messenger/skin/icons/multicolor.png");
+  background-size: cover;
+}
+
 #BackgroundColorButton {
   margin-top: 9px;
   margin-bottom: 2px;

mail/themes/windows/jar.mn

@@ -171,6 +171,7 @@ classic.jar:
   skin/classic/messenger/icons/mail-toolbar-small.png         (mail/icons/mail-toolbar-small.png)
   skin/classic/messenger/icons/folder.png                     (mail/icons/folder.png)
   skin/classic/messenger/icons/message.png                    (mail/icons/message.png)
+  skin/classic/messenger/icons/multicolor.png                 (mail/icons/multicolor.png)
   skin/classic/messenger/icons/license.txt                    (mail/icons/license.txt)
   skin/classic/messenger/icons/appmenu-icons.png              (mail/icons/appmenu-icons.png)
   skin/classic/messenger/icons/attachment-deleted.png         (mail/icons/attachment-deleted.png)

mail/themes/windows/mail/compose/messengercompose.css

@@ -942,6 +942,11 @@ toolbarbutton.formatting-button {
   -moz-margin-end: 9px;
 }
 
+#TextColorButton[color="mixed"] {
+  background-image: url("chrome://messenger/skin/icons/multicolor.png");
+  background-size: cover;
+}
+
 #BackgroundColorButton {
   margin-top: 9px;
   margin-bottom: 2px;

suite/themes/classic/editor/editorFormatToolbar.css

@@ -486,6 +486,11 @@ toolbarbutton.formatting-button {
   -moz-margin-end: 9px;
 }
 
+#TextColorButton[color="mixed"] {
+  background-image: url("chrome://editor/skin/icons/multicolor.png");
+  background-size: cover;
+}
+
 #BackgroundColorButton {
   margin-top: 9px;
   margin-bottom: 2px;

suite/themes/classic/jar.mn

@@ -208,6 +208,7 @@ classic.jar:
   skin/classic/editor/icons/img-align-right.gif                         (editor/icons/img-align-right.gif)
   skin/classic/editor/icons/img-align-top.gif                           (editor/icons/img-align-top.gif)
   skin/classic/editor/icons/btn2.gif                                    (editor/icons/btn2.gif)
+  skin/classic/editor/icons/multicolor.png                              (editor/icons/multicolor.png)
   skin/classic/editor/icons/progress-busy.gif                           (editor/icons/progress-busy.gif)
   skin/classic/editor/icons/progress-done.gif                           (editor/icons/progress-done.gif)
   skin/classic/editor/icons/progress-failed.gif                         (editor/icons/progress-failed.gif)

suite/themes/modern/editor/editorFormatToolbar.css

@@ -496,6 +496,11 @@ toolbarbutton.formatting-button {
   -moz-margin-end: 9px;
 }
 
+#TextColorButton[color="mixed"] {
+  background-image: url("chrome://editor/skin/icons/multicolor.png");
+  background-size: cover;
+}
+
 #BackgroundColorButton {
   margin-top: 9px;
   margin-bottom: 2px;

suite/themes/modern/jar.mn

@@ -184,6 +184,7 @@ modern.jar:
   skin/modern/editor/icons/mast-editor.gif                         (editor/icons/mast-editor.gif)
   skin/modern/editor/icons/btn1.gif                                (editor/icons/btn1.gif)
   skin/modern/editor/icons/btn2.gif                                (editor/icons/btn2.gif)
+  skin/modern/editor/icons/multicolor.png                          (editor/icons/multicolor.png)
   skin/modern/editor/icons/progress-busy.gif                       (editor/icons/progress-busy.gif)
   skin/modern/editor/icons/progress-done.gif                       (editor/icons/progress-done.gif)
   skin/modern/editor/icons/progress-failed.gif                     (editor/icons/progress-failed.gif)