From bc68b6e9fe46feedbeeff315b2cd153ed658812b Mon Sep 17 00:00:00 2001
From: Dan Stillman <dstillman@zotero.org>
Date: Thu, 12 May 2022 05:14:05 -0400
Subject: [PATCH] fx-compat: Start to fix tag color chooser dialog

Among other things, need to recreate XBL <customcolorpicker> as a Custom
Element and need to change `ondialogaccept`/etc. to event listeners:

https://searchfox.org/mozilla-central/rev/b72e9d7d63bf499d1d8168291b93d4ec7fde236e/browser/components/places/content/bookmarkProperties.js#232-237
---
 .../zotero/containers/tagSelectorContainer.jsx  |  2 +-
 chrome/content/zotero/tagColorChooser.js        |  2 +-
 ...agColorChooser.xul => tagColorChooser.xhtml} | 17 +++++++++++------
 test/tests/tagSelectorTest.js                   |  2 +-
 4 files changed, 14 insertions(+), 9 deletions(-)
 rename chrome/content/zotero/{tagColorChooser.xul => tagColorChooser.xhtml} (91%)

diff --git a/chrome/content/zotero/containers/tagSelectorContainer.jsx b/chrome/content/zotero/containers/tagSelectorContainer.jsx
index 3b3c77aec9..0bdf1c63e7 100644
--- a/chrome/content/zotero/containers/tagSelectorContainer.jsx
+++ b/chrome/content/zotero/containers/tagSelectorContainer.jsx
@@ -620,7 +620,7 @@ Zotero.TagSelector = class TagSelectorContainer extends React.PureComponent {
 		io.tagColors = tagColors;
 		
 		window.openDialog(
-			'chrome://zotero/content/tagColorChooser.xul',
+			'chrome://zotero/content/tagColorChooser.xhtml',
 			'zotero-tagSelector-colorChooser',
 			'chrome,modal,centerscreen', io
 		);
diff --git a/chrome/content/zotero/tagColorChooser.js b/chrome/content/zotero/tagColorChooser.js
index 42b46849ef..21a364c6bb 100644
--- a/chrome/content/zotero/tagColorChooser.js
+++ b/chrome/content/zotero/tagColorChooser.js
@@ -29,7 +29,7 @@ var Zotero_Tag_Color_Chooser = new function() {
 	var _io;
 	
 	this.init = function () {
-		var dialog = document.getElementById('tag-color-chooser');
+		var dialog = document.querySelector('dialog');
 		
 		try {
 			// Set font size from pref
diff --git a/chrome/content/zotero/tagColorChooser.xul b/chrome/content/zotero/tagColorChooser.xhtml
similarity index 91%
rename from chrome/content/zotero/tagColorChooser.xul
rename to chrome/content/zotero/tagColorChooser.xhtml
index 4e0fd8a04e..f36c467ce1 100644
--- a/chrome/content/zotero/tagColorChooser.xul
+++ b/chrome/content/zotero/tagColorChooser.xhtml
@@ -28,17 +28,21 @@
 <?xml-stylesheet href="chrome://zotero/skin/tagColorChooser.css" type="text/css"?>
 <!DOCTYPE window SYSTEM "chrome://zotero/locale/zotero.dtd">
 
-<dialog xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
-	title="&zotero.tagColorChooser.title;" buttons="cancel,accept"
-	id="tag-color-chooser"
+<window
+	xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+	xmlns:html="http://www.w3.org/1999/xhtml"
+	title="&zotero.tagColorChooser.title;"
+	onload="Zotero_Tag_Color_Chooser.init()"
+	width="350"
+	height="140">
+<dialog
+	buttons="cancel,accept"
 	buttonlabelaccept="&zotero.tagColorChooser.setColor;"
 	buttonlabelextra1="&zotero.tagColorChooser.removeColor;"
 	ondialogaccept="Zotero_Tag_Color_Chooser.onDialogAccept()"
 	ondialogcancel="Zotero_Tag_Color_Chooser.onDialogCancel()"
 	ondialogextra1="Zotero_Tag_Color_Chooser.onDialogRemoveColor()"
-	onload="Zotero_Tag_Color_Chooser.init()"
-	width="350"
-	height="140">
+	>
 	
 	<script src="include.js"/>
 	<script src="tagColorChooser.js"/>
@@ -61,3 +65,4 @@
 		<separator class="thin"/>
 	</vbox>
 </dialog>
+</window>
diff --git a/test/tests/tagSelectorTest.js b/test/tests/tagSelectorTest.js
index e57b939b7f..2c905cc618 100644
--- a/test/tests/tagSelectorTest.js
+++ b/test/tests/tagSelectorTest.js
@@ -714,7 +714,7 @@ describe("Tag Selector", function () {
 			
 			assert.include(getRegularTags(), "a");
 			
-			var dialogPromise = waitForDialog(false, undefined, 'chrome://zotero/content/tagColorChooser.xul');
+			var dialogPromise = waitForDialog(false, undefined, 'chrome://zotero/content/tagColorChooser.xhtml');
 			var tagSelectorPromise = waitForTagSelector(win);
 			tagSelector.contextTag = {name: tag};
 			yield tagSelector.openColorPickerWindow();