From b30e97537925e4892c26d531b84d1c5313351906 Mon Sep 17 00:00:00 2001
From: Tom Najdek <tom@doppnet.com>
Date: Wed, 10 Jan 2024 13:17:39 +0100
Subject: [PATCH] Inject custom styles into <wizard>

<wizard> is a custom element built-in in FF. This commit monkey-patches
attachShadow to inject custom styles into the shadow root of <wizard>.
---
 chrome/content/zotero/customElements.js              | 12 ++++++++++++
 .../zotero/elements/publicationsLicenseInfo.js       |  3 ---
 chrome/content/zotero/elements/styleConfigurator.js  |  2 --
 chrome/content/zotero/import/importWizard.xhtml      | 10 +++++++---
 chrome/content/zotero/publicationsDialog.xhtml       |  6 +++++-
 chrome/content/zotero/rtfScan.xhtml                  |  6 +++++-
 scss/wizard.scss                                     |  1 +
 7 files changed, 30 insertions(+), 10 deletions(-)
 create mode 100644 scss/wizard.scss

diff --git a/chrome/content/zotero/customElements.js b/chrome/content/zotero/customElements.js
index a290bf4efd..e93bb02dd9 100644
--- a/chrome/content/zotero/customElements.js
+++ b/chrome/content/zotero/customElements.js
@@ -155,4 +155,16 @@ Services.scriptloader.loadSubScript('chrome://zotero/content/elements/librariesC
 			originalEnsureInitialized.apply(this);
 		};
 	}
+
+	// inject custom CSS into FF built-in custom elements (currently only <wizard>)
+	for (let element of ["wizard"]) {
+		let oldAttachShadow = customElements.get(element).prototype.attachShadow;
+		customElements.get(element).prototype.attachShadow = function () {
+			let shadowRoot = oldAttachShadow.apply(this, arguments);
+			shadowRoot.appendChild(MozXULElement.parseXULToFragment(
+				`<html:link rel="stylesheet" href="chrome://zotero/skin/${element}.css"/>`
+			));
+			return shadowRoot;
+		};
+	}
 }
diff --git a/chrome/content/zotero/elements/publicationsLicenseInfo.js b/chrome/content/zotero/elements/publicationsLicenseInfo.js
index 1dd2d3908f..5b90a72357 100644
--- a/chrome/content/zotero/elements/publicationsLicenseInfo.js
+++ b/chrome/content/zotero/elements/publicationsLicenseInfo.js
@@ -26,9 +26,6 @@
 /* global XULElementBase: false */
 
 {
-	const { Services } = ChromeUtils.import("resource://gre/modules/Services.jsm");
-	Services.scriptloader.loadSubScript("chrome://zotero/content/elements/base.js", this);
-
 	const links = {
 		cc: 'https://wiki.creativecommons.org/Considerations_for_licensors_and_licensees',
 		cc0: 'https://wiki.creativecommons.org/CC0_FAQ'
diff --git a/chrome/content/zotero/elements/styleConfigurator.js b/chrome/content/zotero/elements/styleConfigurator.js
index d97293e5dc..c9c5e2c266 100644
--- a/chrome/content/zotero/elements/styleConfigurator.js
+++ b/chrome/content/zotero/elements/styleConfigurator.js
@@ -26,8 +26,6 @@
 /* global XULElementBase: false */
 
 {
-	Services.scriptloader.loadSubScript("chrome://zotero/content/elements/base.js", this);
-
 	class StyleSelector extends XULElementBase {
 		content = MozXULElement.parseXULToFragment(`
 			<div id="style-selector"
diff --git a/chrome/content/zotero/import/importWizard.xhtml b/chrome/content/zotero/import/importWizard.xhtml
index 6c0623a640..0cabdaeea9 100644
--- a/chrome/content/zotero/import/importWizard.xhtml
+++ b/chrome/content/zotero/import/importWizard.xhtml
@@ -15,7 +15,12 @@
 		<html:link rel="localization" href="zotero.ftl" />
 	</linkset>
 
-	<script src="chrome://global/content/customElements.js"/>
+	<script>
+		var { Services } = ChromeUtils.import("resource://gre/modules/Services.jsm");
+		Services.scriptloader.loadSubScript("chrome://zotero/content/include.js", this);
+		Services.scriptloader.loadSubScript("chrome://zotero/content/customElements.js", this);
+	</script>
+	
 	<wizard id="import-wizard" class="import-wizard" width="600" height="400">
 		<wizardpage pageid="page-start" data-header-label-id="import-where-from">
 			<radiogroup id="import-source-group" align="start">
@@ -108,8 +113,7 @@
 			</div>
 		</wizardpage>
 	</wizard>
-		
-	<script src="chrome://zotero/content/include.js"/>
+
 	<script src="../fileInterface.js"/>
 	<script src="./importWizard.js" />
 </window>
\ No newline at end of file
diff --git a/chrome/content/zotero/publicationsDialog.xhtml b/chrome/content/zotero/publicationsDialog.xhtml
index 09dda6c6bc..15ab5a79fe 100644
--- a/chrome/content/zotero/publicationsDialog.xhtml
+++ b/chrome/content/zotero/publicationsDialog.xhtml
@@ -37,7 +37,11 @@
 		<html:link rel="localization" href="zotero.ftl" />
 	</linkset>
 	
-	<script src="chrome://global/content/customElements.js" />
+	<script>
+		var { Services } = ChromeUtils.import("resource://gre/modules/Services.jsm");
+		Services.scriptloader.loadSubScript("chrome://zotero/content/include.js", this);
+		Services.scriptloader.loadSubScript("chrome://zotero/content/customElements.js", this);
+	</script>
 	<script src="chrome://zotero/content/elements/publicationsLicenseInfo.js" />
 
 	<wizard 
diff --git a/chrome/content/zotero/rtfScan.xhtml b/chrome/content/zotero/rtfScan.xhtml
index 1b1d1a5bf7..3ba2883b70 100644
--- a/chrome/content/zotero/rtfScan.xhtml
+++ b/chrome/content/zotero/rtfScan.xhtml
@@ -14,7 +14,11 @@
 		<html:link rel="localization" href="zotero.ftl" />
 	</linkset>
 	
-	<script src="chrome://global/content/customElements.js" />
+	<script>
+		var { Services } = ChromeUtils.import("resource://gre/modules/Services.jsm");
+		Services.scriptloader.loadSubScript("chrome://zotero/content/include.js", this);
+		Services.scriptloader.loadSubScript("chrome://zotero/content/customElements.js", this);
+	</script>
 	
 	<wizard id="rtfscan-wizard" class="rtfscan-wizard" width="700" height="550" data-l10n-id="rtfScan-wizard">
 		<wizardpage pageid="page-start" data-l10n-id="rtfScan-intro-page">
diff --git a/scss/wizard.scss b/scss/wizard.scss
new file mode 100644
index 0000000000..543ea65943
--- /dev/null
+++ b/scss/wizard.scss
@@ -0,0 +1 @@
+// Override/enhance native wizard styles
\ No newline at end of file