From 54721652b336fc19659a96572406080170d624ba Mon Sep 17 00:00:00 2001
From: windingwind <33902321+windingwind@users.noreply.github.com>
Date: Wed, 3 Jul 2024 15:26:20 +0800
Subject: [PATCH] Fix colorpicker styling on Windows (#4326)

---
 chrome/content/zotero/elements/colorPicker.js | 30 ++++++++++++-------
 chrome/content/zotero/tagColorChooser.xhtml   |  1 +
 2 files changed, 21 insertions(+), 10 deletions(-)

diff --git a/chrome/content/zotero/elements/colorPicker.js b/chrome/content/zotero/elements/colorPicker.js
index b4ae9b3224..610b2d0a1d 100644
--- a/chrome/content/zotero/elements/colorPicker.js
+++ b/chrome/content/zotero/elements/colorPicker.js
@@ -26,10 +26,6 @@
 "use strict";
 
 {
-	var { Services } = ChromeUtils.import("resource://gre/modules/Services.jsm");
-
-	Services.scriptloader.loadSubScript("chrome://zotero/content/elements/base.js", this);
-
 	class ColorPicker extends XULElementBase {
 		content = MozXULElement.parseXULToFragment(`
 			<vbox>
@@ -57,9 +53,15 @@
 			}
 			else {
 				return [
-					'#FF6666', '#FF8C19', '#999999',
-					'#5FB236', '#009980', '#2EA8E5',
-					'#576DD9', '#A28AE5', '#A6507B'
+					'#FF6666',
+					'#FF8C19',
+					'#999999',
+					'#5FB236',
+					'#009980',
+					'#2EA8E5',
+					'#576DD9',
+					'#A28AE5',
+					'#A6507B'
 				];
 			}
 		}
@@ -89,9 +91,15 @@
 					Zotero.debug('WARNING: <color-picker> CE: Set color-labels when setting colors');
 				}
 				return [
-					'general.red', 'general.orange', 'general.gray',
-					'general.green', 'general.teal', 'general.blue',
-					'general.purple', 'general.violet', 'general.maroon'
+					'general.red',
+					'general.orange',
+					'general.gray',
+					'general.green',
+					'general.teal',
+					'general.blue',
+					'general.purple',
+					'general.violet',
+					'general.maroon'
 				].map(label => Zotero.getString(label));
 			}
 		}
@@ -177,6 +185,8 @@
 				let tile = document.createElement('button');
 				tile.setAttribute('aria-label', colorLabels[i]);
 				tile.classList.add('grid-tile');
+				// Disable our custom button styling on Windows
+				tile.classList.add('btn');
 				tile.style.background = color;
 				
 				tile.addEventListener('click', () => {
diff --git a/chrome/content/zotero/tagColorChooser.xhtml b/chrome/content/zotero/tagColorChooser.xhtml
index d8eccbd51c..3e86d093f1 100644
--- a/chrome/content/zotero/tagColorChooser.xhtml
+++ b/chrome/content/zotero/tagColorChooser.xhtml
@@ -50,6 +50,7 @@
 		Services.scriptloader.loadSubScript("chrome://zotero/content/tagColorChooser.js", this);
 
 		// Custom elements
+		Services.scriptloader.loadSubScript("chrome://zotero/content/customElements.js", this);
 		Services.scriptloader.loadSubScript("chrome://zotero/content/elements/colorPicker.js", this);
 	</script>