From 01b9a3c268ae2ed85dc0d099e91b4bc3a2e4cad5 Mon Sep 17 00:00:00 2001
From: Abe Jellinek <jellinek@berkeley.edu>
Date: Wed, 12 Apr 2023 23:09:40 -0400
Subject: [PATCH] fx-compat: Fix <tab> keyboard nav, move CE imports to single
 file (#2756)

Having a single customElements.js file that we import everywhere we need it
helps with organization, and it gives us a single place to put things like the
<tab> fix.

We could switch to using setElementCreationCallback() like Firefox if the number
of imports gets out of hand, but the overhead right now should be small.
---
 chrome/content/scaffold/scaffold.xhtml        |  2 +-
 chrome/content/zotero/advancedSearch.xhtml    |  2 +-
 chrome/content/zotero/customElements.js       | 61 +++++++++++++++++++
 .../content/zotero/elements/guidancePanel.js  |  2 -
 chrome/content/zotero/elements/itemBox.js     |  5 --
 .../content/zotero/elements/zoteroSearch.js   | 15 +++--
 chrome/content/zotero/feedSettings.xhtml      |  2 +-
 .../content/zotero/ingester/selectitems.xhtml |  2 +-
 chrome/content/zotero/note.xhtml              |  6 +-
 .../zotero/preferences/preferences.xhtml      |  3 +-
 chrome/content/zotero/reader.xhtml            |  3 +-
 chrome/content/zotero/searchDialog.xhtml      |  2 +-
 chrome/content/zotero/selectItemsDialog.xhtml |  3 +-
 chrome/content/zotero/zoteroPane.xhtml        | 11 +---
 14 files changed, 80 insertions(+), 39 deletions(-)
 create mode 100644 chrome/content/zotero/customElements.js

diff --git a/chrome/content/scaffold/scaffold.xhtml b/chrome/content/scaffold/scaffold.xhtml
index 203b7fbe27..bb39039c3a 100644
--- a/chrome/content/scaffold/scaffold.xhtml
+++ b/chrome/content/scaffold/scaffold.xhtml
@@ -68,7 +68,7 @@
 		}
 
 		// Custom elements
-		Services.scriptloader.loadSubScript("chrome://global/content/customElements.js", this);
+		Services.scriptloader.loadSubScript("chrome://zotero/content/customElements.js", this);
 	</script>
 
 	<commandset id="mainCommandSet">
diff --git a/chrome/content/zotero/advancedSearch.xhtml b/chrome/content/zotero/advancedSearch.xhtml
index 5468dc8b18..cc36fe828a 100644
--- a/chrome/content/zotero/advancedSearch.xhtml
+++ b/chrome/content/zotero/advancedSearch.xhtml
@@ -26,7 +26,7 @@
 
 	<script>
 		var {Services} = ChromeUtils.import("resource://gre/modules/Services.jsm");
-		Services.scriptloader.loadSubScript("chrome://zotero/content/elements/zoteroSearch.js", this);
+		Services.scriptloader.loadSubScript("chrome://zotero/content/customElements.js", this);
 	</script>
 	
 	<script src="include.js"/>
diff --git a/chrome/content/zotero/customElements.js b/chrome/content/zotero/customElements.js
new file mode 100644
index 0000000000..542127eeab
--- /dev/null
+++ b/chrome/content/zotero/customElements.js
@@ -0,0 +1,61 @@
+/*
+	***** BEGIN LICENSE BLOCK *****
+	
+	Copyright © 2022 Corporation for Digital Scholarship
+                     Vienna, Virginia, USA
+					http://zotero.org
+	
+	This file is part of Zotero.
+	
+	Zotero is free software: you can redistribute it and/or modify
+	it under the terms of the GNU Affero General Public License as published by
+	the Free Software Foundation, either version 3 of the License, or
+	(at your option) any later version.
+	
+	Zotero is distributed in the hope that it will be useful,
+	but WITHOUT ANY WARRANTY; without even the implied warranty of
+	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+	GNU Affero General Public License for more details.
+
+	You should have received a copy of the GNU Affero General Public License
+	along with Zotero.  If not, see <http://www.gnu.org/licenses/>.
+	
+	***** END LICENSE BLOCK *****
+*/
+
+'use strict';
+
+Services.scriptloader.loadSubScript("chrome://global/content/customElements.js", this);
+Services.scriptloader.loadSubScript("chrome://zotero/content/elements/base.js", this);
+
+// Load our custom elements
+Services.scriptloader.loadSubScript('chrome://zotero/content/elements/attachmentBox.js', this);
+Services.scriptloader.loadSubScript('chrome://zotero/content/elements/guidancePanel.js', this);
+Services.scriptloader.loadSubScript('chrome://zotero/content/elements/itemBox.js', this);
+Services.scriptloader.loadSubScript('chrome://zotero/content/elements/menulistItemTypes.js', this);
+Services.scriptloader.loadSubScript('chrome://zotero/content/elements/noteEditor.js', this);
+Services.scriptloader.loadSubScript('chrome://zotero/content/elements/notesBox.js', this);
+Services.scriptloader.loadSubScript('chrome://zotero/content/elements/quickSearchTextbox.js', this);
+Services.scriptloader.loadSubScript('chrome://zotero/content/elements/relatedBox.js', this);
+Services.scriptloader.loadSubScript('chrome://zotero/content/elements/shadowAutocompleteInput.js', this);
+Services.scriptloader.loadSubScript("chrome://zotero/content/elements/splitMenuButton.js", this);
+Services.scriptloader.loadSubScript('chrome://zotero/content/elements/tagsBox.js', this);
+Services.scriptloader.loadSubScript('chrome://zotero/content/elements/textLink.js', this);
+Services.scriptloader.loadSubScript('chrome://zotero/content/elements/zoteroSearch.js', this);
+
+// Fix missing property bug that breaks arrow key navigation between <tab>s
+{
+	let MozTabPrototype = customElements.get('tab').prototype;
+	if (!MozTabPrototype.hasOwnProperty('container')) {
+		Object.defineProperty(MozTabPrototype, 'container', {
+			get: function () {
+				if (this.parentElement && this.parentElement.localName == 'tabs') {
+					return this.parentElement;
+				}
+				else {
+					return null;
+				}
+			}
+		});
+	}
+}
diff --git a/chrome/content/zotero/elements/guidancePanel.js b/chrome/content/zotero/elements/guidancePanel.js
index 477ad222b8..4d1cde88c1 100644
--- a/chrome/content/zotero/elements/guidancePanel.js
+++ b/chrome/content/zotero/elements/guidancePanel.js
@@ -26,8 +26,6 @@
 "use strict";
 
 {
-	Services.scriptloader.loadSubScript("chrome://zotero/content/elements/base.js", this);
-
 	class GuidancePanel extends XULElementBase {
 		content = MozXULElement.parseXULToFragment(`
 			<panel type="arrow" align="top">
diff --git a/chrome/content/zotero/elements/itemBox.js b/chrome/content/zotero/elements/itemBox.js
index b34db04df4..656e7409d3 100644
--- a/chrome/content/zotero/elements/itemBox.js
+++ b/chrome/content/zotero/elements/itemBox.js
@@ -26,11 +26,6 @@
 "use strict";
 
 {
-	var { Services } = ChromeUtils.import("resource://gre/modules/Services.jsm");
-
-	Services.scriptloader.loadSubScript("chrome://zotero/content/elements/shadowAutocompleteInput.js", this);
-	Services.scriptloader.loadSubScript("chrome://zotero/content/elements/guidancePanel.js", this);
-
 	class ItemBox extends XULElement {
 		constructor() {
 			super();
diff --git a/chrome/content/zotero/elements/zoteroSearch.js b/chrome/content/zotero/elements/zoteroSearch.js
index dd8c98df2f..819aaf04d2 100644
--- a/chrome/content/zotero/elements/zoteroSearch.js
+++ b/chrome/content/zotero/elements/zoteroSearch.js
@@ -26,13 +26,16 @@
 "use strict";
 
 {
-	var { Services } = ChromeUtils.import("resource://gre/modules/Services.jsm");
+	class SearchElementBase extends XULElementBase {
+		get stylesheets() {
+			return [
+				'chrome://global/skin/global.css',
+				'chrome://zotero-platform/content/zoteroSearch.css'
+			];
+		}
+	}
 
-	Services.scriptloader.loadSubScript("chrome://global/content/customElements.js", this);
-	Services.scriptloader.loadSubScript("chrome://zotero/content/elements/base.js", this);
-	Services.scriptloader.loadSubScript("chrome://zotero/content/elements/shadowAutocompleteInput.js", this);
-
-	class ZoteroSearch extends XULElementBase {
+	class ZoteroSearch extends SearchElementBase {
 		content = MozXULElement.parseXULToFragment(`
 			<vbox xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
 					id="search-box" flex="1" onkeypress="this.closest('zoterosearch').handleKeyPress(event)">
diff --git a/chrome/content/zotero/feedSettings.xhtml b/chrome/content/zotero/feedSettings.xhtml
index 5914fa2df7..0bf22a1fda 100644
--- a/chrome/content/zotero/feedSettings.xhtml
+++ b/chrome/content/zotero/feedSettings.xhtml
@@ -14,7 +14,7 @@
 	onload="Zotero_Feed_Settings.init()">
 <dialog>
 	<script src="include.js"/>
-	<script src="chrome://global/content/customElements.js"/>
+	<script src="chrome://zotero/content/customElements.js"/>
 	<script src="feedSettings.js"/>
 	
 	<html:div class="form-grid">
diff --git a/chrome/content/zotero/ingester/selectitems.xhtml b/chrome/content/zotero/ingester/selectitems.xhtml
index 2b091a2674..2fac0e2292 100755
--- a/chrome/content/zotero/ingester/selectitems.xhtml
+++ b/chrome/content/zotero/ingester/selectitems.xhtml
@@ -40,7 +40,7 @@
 		var { Services } = ChromeUtils.import("resource://gre/modules/Services.jsm");
 		Services.scriptloader.loadSubScript("chrome://zotero/content/include.js", this);
 		Services.scriptloader.loadSubScript("chrome://zotero/content/ingester/selectitems.js", this);
-		Services.scriptloader.loadSubScript("chrome://global/content/customElements.js", this);
+		Services.scriptloader.loadSubScript("chrome://zotero/content/customElements.js", this);
 	</script>
 	
 	<vbox id="zotero-select-items-container" flex="1">
diff --git a/chrome/content/zotero/note.xhtml b/chrome/content/zotero/note.xhtml
index 999c1ae68c..afe55a98ab 100644
--- a/chrome/content/zotero/note.xhtml
+++ b/chrome/content/zotero/note.xhtml
@@ -23,11 +23,7 @@
 		Services.scriptloader.loadSubScript("chrome://zotero/content/include.js", this);
 		Services.scriptloader.loadSubScript("resource://zotero/require.js", this);
 
-		Services.scriptloader.loadSubScript("chrome://global/content/customElements.js", this);
-		Services.scriptloader.loadSubScript("chrome://zotero/content/elements/shadowAutocompleteInput.js", this);
-		Services.scriptloader.loadSubScript("chrome://zotero/content/elements/noteEditor.js", this);
-		Services.scriptloader.loadSubScript("chrome://zotero/content/elements/relatedBox.js", this);
-		Services.scriptloader.loadSubScript("chrome://zotero/content/elements/tagsBox.js", this);
+		Services.scriptloader.loadSubScript("chrome://zotero/content/customElements.js", this);
 		Services.scriptloader.loadSubScript("chrome://zotero/content/note.js", this);
 	</script>
 
diff --git a/chrome/content/zotero/preferences/preferences.xhtml b/chrome/content/zotero/preferences/preferences.xhtml
index 683af2b056..15dc25028d 100644
--- a/chrome/content/zotero/preferences/preferences.xhtml
+++ b/chrome/content/zotero/preferences/preferences.xhtml
@@ -67,8 +67,7 @@
 		}
 		
 		// Custom elements
-		Services.scriptloader.loadSubScript("chrome://global/content/customElements.js", this);
-		Services.scriptloader.loadSubScript("chrome://zotero/content/elements/textLink.js", this);
+		Services.scriptloader.loadSubScript("chrome://zotero/content/customElements.js", this);
 	</script>
 
 	<keyset>
diff --git a/chrome/content/zotero/reader.xhtml b/chrome/content/zotero/reader.xhtml
index 9221161478..fa0674068d 100644
--- a/chrome/content/zotero/reader.xhtml
+++ b/chrome/content/zotero/reader.xhtml
@@ -38,8 +38,7 @@
 			Services.scriptloader.loadSubScript("chrome://global/content/macWindowMenu.js", this);
 		}
 
-		Services.scriptloader.loadSubScript("chrome://zotero/content/elements/shadowAutocompleteInput.js", this);
-		Services.scriptloader.loadSubScript("chrome://zotero/content/elements/tagsBox.js", this);
+		Services.scriptloader.loadSubScript("chrome://zotero/content/customElements.js", this);
 	</script>
 
 	<commandset id="mainCommandSet">
diff --git a/chrome/content/zotero/searchDialog.xhtml b/chrome/content/zotero/searchDialog.xhtml
index 0b01e675c9..650d6d7181 100644
--- a/chrome/content/zotero/searchDialog.xhtml
+++ b/chrome/content/zotero/searchDialog.xhtml
@@ -19,7 +19,7 @@
 
 	<script>
 		var {Services} = ChromeUtils.import("resource://gre/modules/Services.jsm");
-		Services.scriptloader.loadSubScript("chrome://zotero/content/elements/zoteroSearch.js", this);
+		Services.scriptloader.loadSubScript("chrome://zotero/content/customElements.js", this);
 	</script>
 	
 	<script src="include.js"/>
diff --git a/chrome/content/zotero/selectItemsDialog.xhtml b/chrome/content/zotero/selectItemsDialog.xhtml
index 3ae8b1b54e..703d77b86c 100644
--- a/chrome/content/zotero/selectItemsDialog.xhtml
+++ b/chrome/content/zotero/selectItemsDialog.xhtml
@@ -56,8 +56,7 @@
 			Services.scriptloader.loadSubScript("chrome://zotero/content/selectItemsDialog.js", this);
 			
 			// Custom elements
-			Services.scriptloader.loadSubScript("chrome://global/content/customElements.js", this);
-			Services.scriptloader.loadSubScript("chrome://zotero/content/elements/quickSearchTextbox.js", this);
+			Services.scriptloader.loadSubScript("chrome://zotero/content/customElements.js", this);
 		</script>
 
 		<vbox id="zotero-select-items-container" flex="1">
diff --git a/chrome/content/zotero/zoteroPane.xhtml b/chrome/content/zotero/zoteroPane.xhtml
index 50673cff48..1fb9d1c59d 100644
--- a/chrome/content/zotero/zoteroPane.xhtml
+++ b/chrome/content/zotero/zoteroPane.xhtml
@@ -78,16 +78,7 @@
 		}
 		
 		// Custom elements
-		Services.scriptloader.loadSubScript("chrome://global/content/customElements.js", this);
-		Services.scriptloader.loadSubScript("chrome://zotero/content/elements/menulistItemTypes.js", this);
-		Services.scriptloader.loadSubScript("chrome://zotero/content/elements/itemBox.js", this);
-		Services.scriptloader.loadSubScript("chrome://zotero/content/elements/noteEditor.js", this);
-		Services.scriptloader.loadSubScript("chrome://zotero/content/elements/notesBox.js", this);
-		Services.scriptloader.loadSubScript("chrome://zotero/content/elements/tagsBox.js", this);
-		Services.scriptloader.loadSubScript("chrome://zotero/content/elements/relatedBox.js", this);
-		Services.scriptloader.loadSubScript("chrome://zotero/content/elements/attachmentBox.js", this);
-		Services.scriptloader.loadSubScript("chrome://zotero/content/elements/quickSearchTextbox.js", this);
-		Services.scriptloader.loadSubScript("chrome://zotero/content/elements/splitMenuButton.js", this);
+		Services.scriptloader.loadSubScript("chrome://zotero/content/customElements.js", this);
 
 		Services.scriptloader.loadSubScript("chrome://zotero/content/tabs.js", this);
 		Services.scriptloader.loadSubScript("chrome://zotero/content/zoteroPane.js", this);