From c9561f1041b8eb05cbc21ecff86025dfa64a49e6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adomas=20Ven=C4=8Dkauskas?= <adomas.ven@gmail.com>
Date: Tue, 16 Apr 2024 11:44:58 +0300
Subject: [PATCH] Prevent itemlist in classic cit and edit bibl dialogs from
 expanding

Also
- Cleanup the XUL of said dialogs
- Refactor, spearate and clarify custom CSS injection into FX XUL
  elements
---
 chrome/content/zotero/customElements.js       |  25 ++--
 .../integration/addCitationDialog.xhtml       | 111 +++++++++---------
 .../integration/editBibliographyDialog.xhtml  |  56 ++++-----
 chrome/skin/default/zotero/integration.css    |   4 +
 scss/components/_selectItemsDialog.scss       |   9 ++
 scss/dialog-win.scss                          |  28 -----
 scss/wizard-win.scss                          |  23 ----
 scss/xulElementPatches/README.md              |   4 +
 scss/xulElementPatches/dialog-win.scss        |  28 +++++
 scss/xulElementPatches/dialog.scss            |   5 +
 scss/xulElementPatches/wizard-win.scss        |  23 ++++
 scss/{ => xulElementPatches}/wizard.scss      |   0
 12 files changed, 170 insertions(+), 146 deletions(-)
 delete mode 100644 scss/dialog-win.scss
 delete mode 100644 scss/wizard-win.scss
 create mode 100644 scss/xulElementPatches/README.md
 create mode 100644 scss/xulElementPatches/dialog-win.scss
 create mode 100644 scss/xulElementPatches/dialog.scss
 create mode 100644 scss/xulElementPatches/wizard-win.scss
 rename scss/{ => xulElementPatches}/wizard.scss (100%)

diff --git a/chrome/content/zotero/customElements.js b/chrome/content/zotero/customElements.js
index e93a729015..5880efc6e4 100644
--- a/chrome/content/zotero/customElements.js
+++ b/chrome/content/zotero/customElements.js
@@ -167,13 +167,20 @@ Services.scriptloader.loadSubScript('chrome://zotero/content/elements/librariesC
 
 	// inject custom CSS into FF built-in custom elements (currently only <wizard>)
 	const InjectCSSConfig = {
-		global: ["wizard"],
+		global: [
+			"wizard",
+			{
+				element: "dialog",
+				patchedFunction: "connectedCallback"
+			}
+		],
 		win: [
 			"wizard",
 			{
 				element: "dialog",
 				// The `attachShadow` are cleared in <dialog>, we need to monkey-patch after `connectedCallback`.
-				patchee: "connectedCallback"
+				patchedFunction: "connectedCallback",
+				filename: "wizard-dialog"
 			}
 		],
 		mac: [],
@@ -185,24 +192,24 @@ Services.scriptloader.loadSubScript('chrome://zotero/content/elements/librariesC
 		if (key == "linux" && !Zotero.isLinux) continue;
 		let prefix = "";
 		if (key == "global") {
-			prefix = "zotero/skin/";
+			prefix = "zotero/skin/xulElementPatches/";
 		}
 		else {
-			prefix = "zotero-platform/content/";
+			prefix = "zotero-platform/content/xulElementPatches/";
 		}
 		for (let config of configs) {
-			let element, patchee;
+			let element, patchedFunction;
 			// By default, monkey-patch `attachShadow`
 			if (typeof config === "string") {
 				element = config;
-				patchee = "attachShadow";
+				patchedFunction = "attachShadow";
 			}
 			else {
 				element = config.element;
-				patchee = config.patchee;
+				patchedFunction = config.patchedFunction;
 			}
-			let oldFunc = customElements.get(element).prototype[patchee];
-			customElements.get(element).prototype[patchee] = function () {
+			let oldFunc = customElements.get(element).prototype[patchedFunction];
+			customElements.get(element).prototype[patchedFunction] = function () {
 				let ret = oldFunc.apply(this, arguments);
 				this.shadowRoot.append(MozXULElement.parseXULToFragment(
 					`<html:link rel="stylesheet" href="chrome://${prefix}${element}.css"/>`
diff --git a/chrome/content/zotero/integration/addCitationDialog.xhtml b/chrome/content/zotero/integration/addCitationDialog.xhtml
index 8863f3e607..c70b71a380 100644
--- a/chrome/content/zotero/integration/addCitationDialog.xhtml
+++ b/chrome/content/zotero/integration/addCitationDialog.xhtml
@@ -34,6 +34,7 @@
 
 <window
 	id="add-citation-dialog"
+	class="contain-richlistbox"
 	windowtype="zotero:item-selector"
 	orient="vertical"
 	title="&zotero.integration.addEditCitation.title;"
@@ -61,67 +62,65 @@
 
 
 	<vbox id="zotero-select-items-container" flex="1">
-		<vbox flex="1">
-			<hbox flex="1">
-				<vbox align="stretch" flex="1" style="min-width: 500px">
-					<hbox align="center" pack="end">
-						<quick-search-textbox id="zotero-tb-search" timeout="250" oncommand="onSearch()" dir="reverse"/>
-					</hbox>
-					<hbox flex="1" style="margin-top: 5px">
-						<vbox id="zotero-collections-tree-container" class="virtualized-table-container" style="min-width: 200px; min-height: 100%;">
-							<html:div id="zotero-collections-tree"></html:div>
-						</vbox>
-
-						<hbox id="zotero-items-pane-content" class="virtualized-table-container" flex="1" style="width: 100%; min-height: 100%;">
-							<html:div id="zotero-items-tree"></html:div>
-						</hbox>
-					</hbox>
-				</vbox>
-						
-				<hbox hidden="true" id="multiple-sources" align="stretch">
-					<vbox align="center" pack="center" id="citation-buttons">
-						<toolbarbutton id="up" oncommand="Zotero_Citation_Dialog.up()" disabled="true"/>
-						<toolbarbutton id="add" oncommand="Zotero_Citation_Dialog.add()" disabled="true"/>
-						<toolbarbutton id="remove" oncommand="Zotero_Citation_Dialog.remove()" disabled="true"/>
-						<toolbarbutton id="down" oncommand="Zotero_Citation_Dialog.down()" disabled="true"/>
-					</vbox>
-					<vbox align="left">
-						<checkbox id="keepSorted" hidden="true" checked="false" oncommand="Zotero_Citation_Dialog.citationSortUnsort()" label="&zotero.citation.keepSorted.label;" native="true"/>
-						<richlistbox id="item-list" flex="1" align="stretch" seltype="single" style="width: 250px;"
-							onselect="Zotero_Citation_Dialog.listItemSelected();"/>
-					</vbox>
+		<hbox flex="1">
+			<vbox align="stretch" flex="1" style="min-width: 500px">
+				<hbox align="center" pack="end">
+					<quick-search-textbox id="zotero-tb-search" timeout="250" oncommand="onSearch()" dir="reverse"/>
 				</hbox>
-			</hbox>
-			
-			<hbox align="stretch" style="margin-top: 8px">
-				<vbox flex="1">
-					<hbox align="center">
-						<label value="&zotero.citation.prefix.label;"/>
-						<html:input type="text" class="fix" id="prefix" tabindex="3"
-									oninput="Zotero_Citation_Dialog.confirmRegenerate(false)"
-									onchange="Zotero_Citation_Dialog.confirmRegenerate(true)"/>
+				<hbox flex="1" style="margin-top: 5px">
+					<vbox id="zotero-collections-tree-container" class="virtualized-table-container" style="min-width: 200px; min-height: 100%;">
+						<html:div id="zotero-collections-tree"></html:div>
+					</vbox>
+
+					<hbox id="zotero-items-pane-content" class="virtualized-table-container" flex="1" style="width: 100%; min-height: 100%;">
+						<html:div id="zotero-items-tree"></html:div>
 					</hbox>
-					<hbox align="center">
-						<label value="&zotero.citation.suffix.label;"/>
-						<html:input type="text" class="fix" id="suffix" tabindex="4"
-									oninput="Zotero_Citation_Dialog.confirmRegenerate(false)"
-									onchange="Zotero_Citation_Dialog.confirmRegenerate(true)"/>
-					</hbox>
-					<spacer flex="1"/>
+				</hbox>
+			</vbox>
+					
+			<hbox hidden="true" id="multiple-sources" align="stretch">
+				<vbox align="center" pack="center" id="citation-buttons">
+					<toolbarbutton id="up" oncommand="Zotero_Citation_Dialog.up()" disabled="true"/>
+					<toolbarbutton id="add" oncommand="Zotero_Citation_Dialog.add()" disabled="true"/>
+					<toolbarbutton id="remove" oncommand="Zotero_Citation_Dialog.remove()" disabled="true"/>
+					<toolbarbutton id="down" oncommand="Zotero_Citation_Dialog.down()" disabled="true"/>
 				</vbox>
-				<separator flex="4"/>
-				<vbox flex="1">
-					<hbox align="stretch">
-						<menulist onchange="Zotero_Citation_Dialog.confirmRegenerate(true)" id="label" tabindex="5" native="true">
-							<menupopup id="locator-type-popup"/>
-						</menulist>
-						<html:input oninput="Zotero_Citation_Dialog.confirmRegenerate(false)" onchange="Zotero_Citation_Dialog.confirmRegenerate(true)" id="locator" tabindex="2"/>
-					</hbox>
-					<separator style="height: 2px" flex="1"/>
-					<checkbox oncommand="Zotero_Citation_Dialog.confirmRegenerate(true)" id="suppress-author" label="&zotero.citation.suppressAuthor.label;" tabindex="6" native="true"/>
+				<vbox align="left">
+					<checkbox id="keepSorted" hidden="true" checked="false" oncommand="Zotero_Citation_Dialog.citationSortUnsort()" label="&zotero.citation.keepSorted.label;" native="true"/>
+					<richlistbox id="item-list" flex="1" align="stretch" seltype="single" style="width: 250px;"
+						onselect="Zotero_Citation_Dialog.listItemSelected();"/>
 				</vbox>
 			</hbox>
-		</vbox>
+		</hbox>
+		
+		<hbox align="stretch" style="margin-top: 8px">
+			<vbox flex="1">
+				<hbox align="center">
+					<label value="&zotero.citation.prefix.label;"/>
+					<html:input type="text" class="fix" id="prefix" tabindex="3"
+								oninput="Zotero_Citation_Dialog.confirmRegenerate(false)"
+								onchange="Zotero_Citation_Dialog.confirmRegenerate(true)"/>
+				</hbox>
+				<hbox align="center">
+					<label value="&zotero.citation.suffix.label;"/>
+					<html:input type="text" class="fix" id="suffix" tabindex="4"
+								oninput="Zotero_Citation_Dialog.confirmRegenerate(false)"
+								onchange="Zotero_Citation_Dialog.confirmRegenerate(true)"/>
+				</hbox>
+				<spacer flex="1"/>
+			</vbox>
+			<separator flex="4"/>
+			<vbox flex="1">
+				<hbox align="stretch">
+					<menulist onchange="Zotero_Citation_Dialog.confirmRegenerate(true)" id="label" tabindex="5" native="true">
+						<menupopup id="locator-type-popup"/>
+					</menulist>
+					<html:input oninput="Zotero_Citation_Dialog.confirmRegenerate(false)" onchange="Zotero_Citation_Dialog.confirmRegenerate(true)" id="locator" tabindex="2"/>
+				</hbox>
+				<separator style="height: 2px" flex="1"/>
+				<checkbox oncommand="Zotero_Citation_Dialog.confirmRegenerate(true)" id="suppress-author" label="&zotero.citation.suppressAuthor.label;" tabindex="6" native="true"/>
+			</vbox>
+		</hbox>
 
 		<iframe id="editor" src="simpleEditor.html" hidden="true" flex="1" type="content" remote="false" maychangeremoteness="false"/>
 		<description id="zotero-editor-warning" style="margin: 9px 1px 0" hidden="true">&zotero.citation.editorWarning.label;</description>
diff --git a/chrome/content/zotero/integration/editBibliographyDialog.xhtml b/chrome/content/zotero/integration/editBibliographyDialog.xhtml
index 1ef16fac91..524576a119 100644
--- a/chrome/content/zotero/integration/editBibliographyDialog.xhtml
+++ b/chrome/content/zotero/integration/editBibliographyDialog.xhtml
@@ -33,6 +33,7 @@
 
 <window
 	id="edit-bibliography-dialog"
+	class="contain-richlistbox"
 	orient="vertical"
 	title="&zotero.integration.editBibliography.title;"
 	onload="Zotero_Bibliography_Dialog.load();"
@@ -58,37 +59,32 @@
 	</script>
 	
 	<vbox id="zotero-select-items-container" flex="1">
-		<vbox flex="1">
-			<hbox flex="1">
-				<vbox align="stretch" flex="1">
-					<hbox align="center" pack="end">
-						<quick-search-textbox id="zotero-tb-search" timeout="250" oncommand="onSearch()" dir="reverse"/>
-					</hbox>
-					<hbox flex="1" style="margin-top: 5px">
-						<vbox id="zotero-collections-tree-container" class="virtualized-table-container">
-							<html:div id="zotero-collections-tree" class="edit-bibl"></html:div>
-						</vbox>
-
-						<hbox id="zotero-items-pane-content" class="virtualized-table-container" flex="1">
-							<html:div id="zotero-items-tree"></html:div>
-						</hbox>
-					</hbox>
-				</vbox>
-						
-				<hbox id="source-list">
-					<vbox align="center" pack="center" id="citation-buttons">
-						<toolbarbutton id="add" oncommand="Zotero_Bibliography_Dialog.add()" disabled="true"/>
-						<toolbarbutton id="remove" oncommand="Zotero_Bibliography_Dialog.remove()" disabled="true"/>
-					</vbox>
-					<vbox>
-						<label value="&zotero.integration.references.label;"/>
-						<richlistbox id="item-list" flex="1" align="stretch" seltype="multiple"
-							style="width: 250px;" onselect="Zotero_Bibliography_Dialog.listItemSelected();"
-							onchanged="Zotero_Bibliography_Dialog.textChanged()"/>
-					</vbox>
+		<hbox flex="1">
+			<vbox align="stretch" flex="1">
+				<hbox align="center" pack="end">
+					<quick-search-textbox id="zotero-tb-search" timeout="250" oncommand="onSearch()" dir="reverse"/>
 				</hbox>
-			</hbox>
-		</vbox>
+				<hbox flex="1" style="margin-top: 5px">
+					<vbox id="zotero-collections-tree-container" class="virtualized-table-container">
+						<html:div id="zotero-collections-tree" class="edit-bibl"></html:div>
+					</vbox>
+					<hbox id="zotero-items-pane-content" class="virtualized-table-container" flex="1">
+						<html:div id="zotero-items-tree"></html:div>
+					</hbox>
+				</hbox>
+			</vbox>
+					
+			<vbox align="center" pack="center" id="citation-buttons">
+				<toolbarbutton id="add" oncommand="Zotero_Bibliography_Dialog.add()" disabled="true"/>
+				<toolbarbutton id="remove" oncommand="Zotero_Bibliography_Dialog.remove()" disabled="true"/>
+			</vbox>
+			<vbox>
+				<label value="&zotero.integration.references.label;"/>
+				<richlistbox id="item-list" flex="1" align="stretch" seltype="multiple"
+							 style="width: 250px;" onselect="Zotero_Bibliography_Dialog.listItemSelected();"
+							 onchanged="Zotero_Bibliography_Dialog.textChanged()"/>
+			</vbox>
+		</hbox>
 		
 		<iframe id="editor" src="simpleEditor.html" flex="1" type="content" remote="false" maychangeremoteness="false"/>
 		<description id="zotero-editor-warning" style="margin: 9px 1px 0">&zotero.citation.editorWarning.label;</description>
diff --git a/chrome/skin/default/zotero/integration.css b/chrome/skin/default/zotero/integration.css
index ccf8a2f8f2..3afd54c30d 100644
--- a/chrome/skin/default/zotero/integration.css
+++ b/chrome/skin/default/zotero/integration.css
@@ -384,3 +384,7 @@ window.citation-dialog {
 window#add-citation-dialog, window#edit-bibliography-dialog {
 	min-height: 600px;
 }
+
+window#add-citation-dialog dialog, window#edit-bibliography-dialog dialog {
+	max-height: 100vh;
+}
diff --git a/scss/components/_selectItemsDialog.scss b/scss/components/_selectItemsDialog.scss
index 332e415d50..b950784761 100644
--- a/scss/components/_selectItemsDialog.scss
+++ b/scss/components/_selectItemsDialog.scss
@@ -36,4 +36,13 @@
         flex: 1 1 auto;
         margin-bottom: 8px;
     }
+}
+
+// richlistbox elements are crazy and will expand beyond the window size
+// unless all/most elements in the hierarchy that contain that
+// richlistbox have a min-height: 0 set
+.contain-richlistbox {
+    vbox, hbox {
+        min-height: 0;
+    }
 }
\ No newline at end of file
diff --git a/scss/dialog-win.scss b/scss/dialog-win.scss
deleted file mode 100644
index f257fdbdc1..0000000000
--- a/scss/dialog-win.scss
+++ /dev/null
@@ -1,28 +0,0 @@
-// Override/enhance mozilla <dialog> styles on Windows. See customElements.js
-@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
-@namespace html url("http://www.w3.org/1999/xhtml");
-
-@import "abstracts/variables";
-@import "abstracts/functions";
-@import "abstracts/mixins";
-@import "abstracts/placeholders";
-@import "abstracts/utilities";
-@import "abstracts/split-button";
-@import "abstracts/svgicon";
-
-@import "themes/light";
-@import "themes/dark";
-
-// Base
-// --------------------------------------------------
-
-@import "base/base";
-
-@import "win/abstracts/mixins";
-
-@import "win/components/button";
-
-
-.dialog-button-box {
-	margin-top: 8px;
-}
diff --git a/scss/wizard-win.scss b/scss/wizard-win.scss
deleted file mode 100644
index 2aa82dcab6..0000000000
--- a/scss/wizard-win.scss
+++ /dev/null
@@ -1,23 +0,0 @@
-// Override/enhance mozilla <wizard> styles on windows. See customElements.js
-@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
-@namespace html url("http://www.w3.org/1999/xhtml");
-
-@import "abstracts/variables";
-@import "abstracts/functions";
-@import "abstracts/mixins";
-@import "abstracts/placeholders";
-@import "abstracts/utilities";
-@import "abstracts/split-button";
-@import "abstracts/svgicon";
-
-@import "themes/light";
-@import "themes/dark";
-
-// Base
-// --------------------------------------------------
-
-@import "base/base";
-
-@import "win/abstracts/mixins";
-
-@import "win/components/button";
diff --git a/scss/xulElementPatches/README.md b/scss/xulElementPatches/README.md
new file mode 100644
index 0000000000..2fea4df5bf
--- /dev/null
+++ b/scss/xulElementPatches/README.md
@@ -0,0 +1,4 @@
+The scss files in this directory are monkey-patch injected into firefox XUL elements with
+shadow-doms that cannot be styled directly.
+
+See chrome/content/zotero/customElements.js for how this is implemented and configured
\ No newline at end of file
diff --git a/scss/xulElementPatches/dialog-win.scss b/scss/xulElementPatches/dialog-win.scss
new file mode 100644
index 0000000000..3e0c9769b7
--- /dev/null
+++ b/scss/xulElementPatches/dialog-win.scss
@@ -0,0 +1,28 @@
+// Override/enhance mozilla <dialog> styles on Windows. See customElements.js
+@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
+@namespace html url("http://www.w3.org/1999/xhtml");
+
+@import "../abstracts/variables";
+@import "../abstracts/functions";
+@import "../abstracts/mixins";
+@import "../abstracts/placeholders";
+@import "../abstracts/utilities";
+@import "../abstracts/split-button";
+@import "../abstracts/svgicon";
+
+@import "../themes/light";
+@import "../themes/dark";
+
+// Base
+// --------------------------------------------------
+
+@import "../base/base";
+
+@import "../win/abstracts/mixins";
+
+@import "../win/components/button";
+
+
+.dialog-button-box {
+	margin-top: 8px;
+}
diff --git a/scss/xulElementPatches/dialog.scss b/scss/xulElementPatches/dialog.scss
new file mode 100644
index 0000000000..bd5b013656
--- /dev/null
+++ b/scss/xulElementPatches/dialog.scss
@@ -0,0 +1,5 @@
+// Without this any richlistboxes within the dialog element will expand vertically
+// beyond the limits of the dialog
+vbox {
+	min-height: 0;
+}
\ No newline at end of file
diff --git a/scss/xulElementPatches/wizard-win.scss b/scss/xulElementPatches/wizard-win.scss
new file mode 100644
index 0000000000..09165b93e5
--- /dev/null
+++ b/scss/xulElementPatches/wizard-win.scss
@@ -0,0 +1,23 @@
+// Override/enhance mozilla <wizard> styles on windows. See customElements.js
+@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
+@namespace html url("http://www.w3.org/1999/xhtml");
+
+@import "../abstracts/variables";
+@import "../abstracts/functions";
+@import "../abstracts/mixins";
+@import "../abstracts/placeholders";
+@import "../abstracts/utilities";
+@import "../abstracts/split-button";
+@import "../abstracts/svgicon";
+
+@import "../themes/light";
+@import "../themes/dark";
+
+// Base
+// --------------------------------------------------
+
+@import "../base/base";
+
+@import "../win/abstracts/mixins";
+
+@import "../win/components/button";
diff --git a/scss/wizard.scss b/scss/xulElementPatches/wizard.scss
similarity index 100%
rename from scss/wizard.scss
rename to scss/xulElementPatches/wizard.scss