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

@@ -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">

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"/>

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;
+				}
+			}
+		});
+	}
+}

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">

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();

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);
+	class ZoteroSearch extends SearchElementBase {
-	Services.scriptloader.loadSubScript("chrome://zotero/content/elements/base.js", this);
-	Services.scriptloader.loadSubScript("chrome://zotero/content/elements/shadowAutocompleteInput.js", this);
-
-	class ZoteroSearch extends XULElementBase {
 		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)">

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">

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">

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/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/note.js", this);
 	</script>
 

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/customElements.js", this);
-		Services.scriptloader.loadSubScript("chrome://zotero/content/elements/textLink.js", this);
 	</script>
 
 	<keyset>

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/customElements.js", this);
-		Services.scriptloader.loadSubScript("chrome://zotero/content/elements/tagsBox.js", this);
 	</script>
 
 	<commandset id="mainCommandSet">

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"/>

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/customElements.js", this);
-			Services.scriptloader.loadSubScript("chrome://zotero/content/elements/quickSearchTextbox.js", this);
 		</script>
 
 		<vbox id="zotero-select-items-container" flex="1">

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/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/tabs.js", this);
 		Services.scriptloader.loadSubScript("chrome://zotero/content/zoteroPane.js", this);