From 322852ff67d0fafaa7d8071414b09226f279c03b Mon Sep 17 00:00:00 2001
From: Dan Stillman <dstillman@zotero.org>
Date: Tue, 15 Mar 2016 03:06:48 -0400
Subject: [PATCH] Fix display of tag colorpicker in Firefox 44

(And make the colorpicker work in high-contrast mode, according to the
Mozilla bug that broke this [1].)

[1] https://bugzilla.mozilla.org/show_bug.cgi?id=1047595
---
 .../zotero/bindings/customcolorpicker.xml     | 22 +++++++++++--------
 1 file changed, 13 insertions(+), 9 deletions(-)

diff --git a/chrome/content/zotero/bindings/customcolorpicker.xml b/chrome/content/zotero/bindings/customcolorpicker.xml
index a42069136..6a9f4a567 100644
--- a/chrome/content/zotero/bindings/customcolorpicker.xml
+++ b/chrome/content/zotero/bindings/customcolorpicker.xml
@@ -15,7 +15,7 @@
 		<content>
 			<vbox anonid="tiles" flex="1" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
 				<hbox>
-					<spacer class="colorpickertile" style="background-color: #000000" color="#000000"/>
+					<image class="colorpickertile" color="#000000"/>
 				</hbox>
 			</vbox>
 		</content>
@@ -90,17 +90,21 @@
 							let light = color.charAt(0) == 'L';
 							color = light ? color.substr(1) : color;
 							
-							var spacer = document.createElement('spacer');
-							spacer.className = 'colorpickertile' + (light ? ' cp-light' : '');
-							spacer.setAttribute('style', 'background-color: ' + color);
-							spacer.setAttribute('color', color);
+							let image = document.createElement('image');
+							image.className = 'colorpickertile' + (light ? ' cp-light' : '');
+							image.setAttribute('color', color);
+							
+							let dataURI = "data:image/svg+xml,<svg style='background-color: "
+								+ encodeURIComponent(color) + "' xmlns='http://www.w3.org/2000/svg' />";
+							image.setAttribute('src', dataURI);
+							
 							if (tileWidth) {
-								spacer.width = tileWidth;
+								image.width = tileWidth;
 							}
 							if (tileHeight) {
-								spacer.height = tileHeight;
+								image.height = tileHeight;
 							}
-							hbox.appendChild(spacer);
+							hbox.appendChild(image);
 						}
 						tiles.appendChild(hbox);
 					}
@@ -117,7 +121,7 @@
 			<stylesheet src="chrome://zotero/skin/bindings/customcolorpicker.css"/>
 		</resources>
 		<content>
-			<xul:hbox class="colorpicker-button-colorbox" anonid="colorbox" flex="1" xbl:inherits="disabled"/>
+			<xul:image class="colorpicker-button-colorbox" anonid="colorbox" flex="1" xbl:inherits="disabled"/>
 			
 			<xul:panel class="colorpicker-button-menupopup"
 					anonid="colorpopup" noautofocus="true" level="top"