fx-compat: Convert itembox XBL to custom element

Still lots of things to fix, particularly with styling, but the basic
functionality is there.

.eslintrc

@@ -14,10 +14,12 @@
 		"ConcurrentCaller": false,
 		"ctypes": false,
 		"OS": false,
+		"MozXULElement": false,
 		"PluralForm": false,
 		"Services": false,
 		"XPCOMUtils": false,
-		"XRegExp": false
+		"XRegExp": false,
+		"XULElement": false
 	},
 	"extends": [
 		"@zotero",

chrome/content/zotero/elements/menulistItemTypes.js

@@ -0,0 +1,92 @@
+/*
+    ***** BEGIN LICENSE BLOCK *****
+    
+    Copyright © 2020 Corporation for Digital Scholarship
+                     Vienna, Virginia, USA
+                     https://www.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";
+
+{
+	// The menulist CE is defined lazily. Create one now to get menulist defined,
+	// allowing us to inherit from it.
+	if (!customElements.get("menulist")) {
+		delete document.createXULElement("menulist");
+	}
+	
+	class ItemTypeMenuList extends customElements.get("menulist") {
+		constructor() {
+			super();
+		}
+		
+		connectedCallback() {
+			super.connectedCallback();
+			
+			if (this.delayConnectedCallback()) {
+				return;
+			}
+			
+			if (this.menupopup) {
+				return;
+			}
+			
+			var t = Zotero.ItemTypes.getTypes();
+			
+			// Sort by localized name
+			var itemTypes = [];
+			for (let i = 0; i < t.length; i++) {
+				itemTypes.push({
+					name: t[i].name,
+					localized: Zotero.ItemTypes.getLocalizedString(t[i].id)
+				});
+			}
+			var collation = Zotero.getLocaleCollation();
+			itemTypes.sort((a, b) => collation.compareString(1, a.localized, b.localized));
+			
+			for (let i = 0; i < itemTypes.length; i++) {
+				let name = itemTypes[i].name;
+				if (name != 'attachment' && name != 'note' && name != 'annotation') {
+					this.appendItem(itemTypes[i].localized, itemTypes[i].name);
+				}
+			}
+			
+			if (this._preconnectedValue) {
+				Zotero.debug("SETTING PRECONNECT");
+				this.value = this._preconnectedValue;
+			}
+		}
+		
+		set value(value) {
+			if (!this.itemCount) {
+				Zotero.debug("STORING PRECONNECT");
+				this._preconnectedValue = value;
+			}
+			else {
+				Zotero.debug("SETTING VAL NOW " + value);
+				Zotero.debug(this.itemCount);
+				Zotero.debug(value);
+				super.value = value;
+			}
+		}
+	}
+	
+	customElements.define("menulist-item-types", ItemTypeMenuList, { extends: "menulist" });
+}

chrome/content/zotero/itemPane.js

@@ -45,7 +45,6 @@ var ZoteroItemPane = new function() {
 			return;
 		}
 		
-		_itemBox = document.getElementById('zotero-editpane-item-box');
 		_notesLabel = document.getElementById('zotero-editpane-notes-label');
 		_notesButton = document.getElementById('zotero-editpane-notes-add');
 		_notesList = document.getElementById('zotero-editpane-dynamic-notes');
@@ -75,9 +74,15 @@ var ZoteroItemPane = new function() {
 		Zotero.debug('Viewing item in pane ' + index);
 		
 		switch (index) {
-			case 0:
+			case 0: {
+				if (!_itemBox) {
+					_itemBox = new (customElements.get('item-box'));
+					_itemBox.id = 'zotero-editpane-item-box';
+					document.getElementById('item-box-container').appendChild(_itemBox);
+				}
 				var box = _itemBox;
 				break;
+			}
 			
 			case 3:
 				var box = _relatedBox;
@@ -89,13 +94,15 @@ var ZoteroItemPane = new function() {
 		if (_lastItem && _lastItem != item) {
 			switch (index) {
 				case 0:
-					yield box.blurOpenField();
+					// TEMP
+					//yield box.blurOpenField();
 					// DEBUG: Currently broken
 					//box.scrollToTop();
 					break;
 				
 				case 2:
-					_tagsBox.current.blurOpenField();
+					// TEMP
+					//_tagsBox.current.blurOpenField();
 					break;
 			}
 		}

chrome/content/zotero/standalone/standalone.js

@@ -243,7 +243,7 @@ const ZoteroStandalone = new function() {
 			});
 			
 			for (var i = 0; i<itemTypes.length; i++) {
-				var menuitem = document.createElement("menuitem");
+				var menuitem = document.createXULElement("menuitem");
 				menuitem.setAttribute("label", itemTypes[i].localized);
 				menuitem.setAttribute("tooltiptext", "");
 				let type = itemTypes[i].id;
@@ -256,7 +256,7 @@ const ZoteroStandalone = new function() {
 			
 			// add separator between sets
 			if(j !== typeSets.length-1) {
-				addMenu.appendChild(document.createElement("menuseparator"));
+				addMenu.appendChild(document.createXULElement("menuseparator"));
 			}
 		}
 	}

chrome/content/zotero/xpcom/menulistItemTypes.js

@@ -0,0 +1,92 @@
+/*
+    ***** BEGIN LICENSE BLOCK *****
+    
+    Copyright © 2020 Corporation for Digital Scholarship
+                     Vienna, Virginia, USA
+                     https://www.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";
+
+{
+	// The menulist CE is defined lazily. Create one now to get menulist defined,
+	// allowing us to inherit from it.
+	if (!customElements.get("menulist")) {
+		delete document.createXULElement("menulist");
+	}
+	
+	class ItemTypeMenuList extends customElements.get("menulist") {
+		constructor() {
+			super();
+		}
+		
+		connectedCallback() {
+			super.connectedCallback();
+			
+			if (this.delayConnectedCallback()) {
+				return;
+			}
+			
+			if (this.menupopup) {
+				return;
+			}
+			
+			var t = Zotero.ItemTypes.getTypes();
+			
+			// Sort by localized name
+			var itemTypes = [];
+			for (let i = 0; i < t.length; i++) {
+				itemTypes.push({
+					name: t[i].name,
+					localized: Zotero.ItemTypes.getLocalizedString(t[i].id)
+				});
+			}
+			var collation = Zotero.getLocaleCollation();
+			itemTypes.sort((a, b) => collation.compareString(1, a.localized, b.localized));
+			
+			for (let i = 0; i < itemTypes.length; i++) {
+				let name = itemTypes[i].name;
+				if (name != 'attachment' && name != 'note') {
+					this.appendItem(itemTypes[i].localized, itemTypes[i].name);
+				}
+			}
+			
+			if (this._preconnectedValue) {
+				Zotero.debug("SETTING PRECONNECT");
+				this.value = this._preconnectedValue;
+			}
+		}
+		
+		set value(value) {
+			if (!this.itemCount) {
+				Zotero.debug("STORING PRECONNECT");
+				this._preconnectedValue = value;
+			}
+			else {
+				Zotero.debug("SETTING VAL NOW " + value);
+				Zotero.debug(this.itemCount);
+				Zotero.debug(value);
+				super.value = value;
+			}
+		}
+	}
+	
+	customElements.define("menulist-item-types", ItemTypeMenuList, { extends: "menulist" });
+}

chrome/content/zotero/zoteroPane.xhtml

@@ -34,8 +34,6 @@
 <?xml-stylesheet href="chrome://zotero-platform-version/content/style.css"?>
 <?xml-stylesheet href="chrome://zotero/skin/itemPane.css" type="text/css"?>
 <?xml-stylesheet href="chrome://zotero-platform/content/itemPane.css" type="text/css"?>
-<?xml-stylesheet href="chrome://zotero/skin/bindings/itembox.css" type="text/css"?>
-<?xml-stylesheet href="chrome://zotero-platform/content/itembox.css" type="text/css"?>
 <?xml-stylesheet href="chrome://zotero-platform/content/zotero-react-client.css"?>
 
 <!DOCTYPE window [
@@ -64,6 +62,12 @@
 	<!--<html:script src="chrome://global/content/inlineSpellCheckUI.js"></html:script>-->
 	
 	<html:script src="overlay.js"></html:script>
+	
+	<!-- Custom elements -->
+	<html:script src="chrome://global/content/customElements.js"></html:script>
+	<html:script src="elements/menulistItemTypes.js"></html:script>
+	<html:script src="elements/itemBox.js"></html:script>
+	
 	<html:script src="tabs.js"></html:script>
 	<html:script src="zoteroPane.js"></html:script>
 	<html:script src="itemPane.js"></html:script>
@@ -1059,9 +1063,7 @@
 													<tab id="zotero-editpane-related-tab" label="&zotero.tabs.related.label;"/>
 												</tabs>
 												<tabpanels id="zotero-view-item" class="zotero-view-item" flex="1">
-													<tabpanel flex="1">
+													<tabpanel id="item-box-container"/>
-														<zoteroitembox id="zotero-editpane-item-box" class="zotero-editpane-item-box" flex="1"/>
-													</tabpanel>
 													
 													<tabpanel flex="1" orient="vertical">
 														<vbox flex="1" id="zotero-editpane-notes" class="zotero-box">

chrome/skin/default/zotero/bindings/itembox.css

@@ -1,149 +0,0 @@
-#item-box
-{
-	overflow: auto;
-	margin-top: 8px;
-}
-
-row, tagsbox row
-{
-	min-height: 1em;
-}
-
-
-/* DEBUG: this doesn't seem to work, unfortunately
-label[singleField=false]:after
-{
-	content:",";
-}
-*/
-
-textbox .textbox-input-box
-{
-	margin: 0;
-}
-
-/* metadata field names */
-row > label:first-child, .creator-type-label
-{
-	text-align: right;
-	margin-left: 5px !important;
-	margin-right: 2px !important;
-}
-
-#more-creators-label
-{
-	font-weight: bold;
-}
-
-row > label
-{
-	border: 1px solid transparent;
-}
-
-row label
-{
-	-moz-user-focus: ignore;
-}
-
-row .pointer:hover {
-	cursor: pointer !important;
-}
-
-/* creator type menu */
-
-.creator-type-label, .creator-type-value {
-	-moz-box-align: center;
-	-moz-box-pack: end;
-}
-
-.creator-type-label > label
-{
-	margin: 1px 0 1px 0 !important;
-	padding-right: 2px !important;
-}
- 
-.creator-type-label > image {
-	margin: 0 1em 1px;
-	list-style-image: url('chrome://zotero/skin/arrow-down.gif');
-}
-
-.comma
-{
-	margin: 1px 0 1px -3px !important;
-	padding: 0 !important;
-}
-
-.creator-name-box > label:not(.comma), .date-box > label
-{
-	margin: 1px 0 1px 1px !important;
-	padding-left: 2px !important;
-	padding-right: 2px !important;
-}
-
-row > label, row > vbox[fieldname]
-{
-	margin-top: 1px !important;
-	margin-bottom: 1px !important;
-	-moz-box-pack: start;
-	-moz-margin-start: 1px !important;
-	-moz-margin-end: 5px !important;
-	padding: 0 2px 0 2px;
-}
-
-row > vbox > description
-{
-	margin: 0 !important;
-}
-
-#zotero-date-field-status
-{
-	color: #666;
-	padding: 0 10px 0 1px !important;
-}
-
-#item-type-menu
-{
-	-moz-appearance: none;
-	height: 1.5em !important;
-	min-height: 1.5em !important;
-	padding: 0 0 0 2px !important;
-	margin: 1px 5px 0 1px !important;
-	max-height: 1.5em !important;
-	border: 1px solid transparent;	
-	background-color: transparent;
-}
-
-#item-type-menu > .menulist-label-box
-{
-	-moz-box-flex: 0 !important;
-}
-
-#item-type-menu > .menulist-label-box, #item-type-menu > .menulist-label-box > .menulist-label
-{
-	margin: 0 !important;
-	padding: 0 !important;
-}
-
-#item-type-menu > .menulist-dropmarker
-{
-	display: none;
-}
-
-.zotero-field-toggle
-{
-	width: 27px !important;
-	max-width: 27px !important;
-	min-width: 27px !important;
-	height: 14px;
-	margin: 0 5px 0 0 !important;
-	background-repeat: no-repeat !important;
-	background-position: center !important;
-	border-width: 0 !important;
-	border-radius: 4px !important;
-}
-
-/* Merge pane in duplicates view */
-.zotero-field-version-button {
-	margin: 0;
-	padding: 0;
-}

chrome/skin/default/zotero/itemPane.css

@@ -49,6 +49,7 @@
 	margin-left: 5px;
 }
 
+/* Context pane */
 .zotero-context-pane-pinned-note {
 	border-top: 1px solid #d9d9d9;
 }
@@ -57,81 +58,6 @@
 /*	background: #ececec;*/
 /*}*/
 
-#retraction-box {
-	cursor: default;
-}
-
-#retraction-header {
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-	padding: 1.5em 1em;
-	background: #d93425;
-	color: white;
-	font-weight: bold;
-}
-
-#retraction-details {
-	background: #fbf0f0;
-	padding: .5em 1.5em;
-	margin-top: 0;
-	margin-bottom: 1em;
-	cursor: text;
-	-moz-user-select: text;
-}
-
-#retraction-details dt {
-	font-weight: bold;
-}
-
-#retraction-details dt:not(:first-child) {
-	margin-top: .5em;
-}
-
-#retraction-details dd {
-	margin-left: 2em;
-}
-
-#retraction-details a {
-	text-decoration: underline;
-}
-
-#retraction-links ul {
-	padding-left: 0;
-}
-
-#retraction-links li {
-	list-style: none;
-}
-
-#retraction-links li:not(:first-child) {
-	margin-top: .75em;
-}
-
-#retraction-credit {
-	text-align: right;
-	margin-top: 1.5em;
-	margin-right: -.9em;
-	margin-bottom: .2em;
-}
-
-#retraction-hide {
-	text-align: right;
-	margin-top: .3em;
-	margin-right: -1.2em;
-	margin-bottom: .3em;
-}
-
-#retraction-hide button {
-	background: none;
-	margin: 0;
-	padding: 0;
-	cursor: pointer;
-	display: inline;
-	text-decoration: underline;
-	border-style: none;
-}
-
 /* Buttons in trash and feed views */
 .zotero-item-pane-top-buttons {
 	-moz-appearance: toolbar;

chrome/skin/default/zotero/overlay.css

@@ -635,6 +635,10 @@
 	margin-left: 3px !important;
 }
 
+#item-box-container {
+	display: flex;
+}
+
 #retracted-items-banner, #sync-reminder-banner {
 	display: flex;
 	justify-content: center;

chrome/skin/default/zotero/zotero.css

@@ -97,10 +97,6 @@ zoterosearchagefield
 	-moz-binding: url('chrome://zotero/content/bindings/zoterosearch.xml#search-in-the-last');
 }
 
-zoteroitembox {
-	-moz-binding: url('chrome://zotero/content/bindings/itembox.xml#item-box');
-}
-
 zoteromergegroup {
 	-moz-binding: url('chrome://zotero/content/bindings/merge.xml#merge-group');
 }

scss/_itemBox.scss

@@ -0,0 +1,2 @@
+@import "components/itemBox";
+@import "components/clicky";

scss/components/_itemBox.scss

@@ -0,0 +1,231 @@
+#item-box {
+	display: flex;
+	/*overflow: auto;*/
+	margin-top: 8px;
+}
+
+th, td {
+	min-height: 1em;
+}
+
+td {
+	display: flex;
+}
+
+th > label, td > [fieldname] {
+	margin-top: 1px !important;
+	margin-bottom: 1px !important;
+	-moz-box-pack: start;
+	-moz-margin-start: 1px !important;
+	-moz-margin-end: 5px !important;
+	padding: 0 2px 0 2px;
+}
+
+td > [fieldname] {
+  width: 100%;
+}
+
+/*td > vbox > description
+{
+	margin: 0 !important;
+}*/
+
+#item-type-menu {
+	-moz-appearance: none;
+	height: 1.5em !important;
+	min-height: 1.5em !important;
+	padding: 0 0 0 2px !important;
+	margin: 1px 5px 0 1px !important;
+	max-height: 1.5em !important;
+	border: 1px solid transparent;	
+	background-color: transparent;
+}
+
+#item-type-menu > .menulist-label-box {
+	-moz-box-flex: 0 !important;
+}
+
+#item-type-menu > .menulist-label-box, #item-type-menu > .menulist-label-box > .menulist-label {
+	margin: 0 !important;
+	padding: 0 !important;
+}
+
+#item-type-menu > .menulist-dropmarker {
+	display: none;
+}
+
+/* DEBUG: this doesn't seem to work, unfortunately
+label[singleField=false]:after
+{
+	content:",";
+}
+*/
+
+/*textbox .textbox-input-box
+{
+	margin: 0;
+}*/
+
+/* metadata field names */
+th, .creator-type-label {
+	font-weight: normal;
+	text-align: right;
+	margin-left: 5px !important;
+	margin-right: 2px !important;
+}
+
+#more-creators-label
+{
+	font-weight: bold;
+}
+
+/*row > label
+{
+	border: 1px solid transparent;
+}
+
+row label
+{
+	-moz-user-focus: ignore;
+}*/
+
+.pointer:hover {
+	cursor: pointer !important;
+}
+
+/* creator type menu */
+
+.creator-type-label, .creator-type-value {
+	-moz-box-align: center;
+	-moz-box-pack: end;
+}
+
+.creator-name-box {
+	display: flex;
+	flex: 1;
+}
+
+.creator-type-label > label
+{
+	margin: 1px 0 1px 0 !important;
+	padding-right: 2px !important;
+}
+ 
+.creator-type-dropmarker {
+	margin: 0 1em 1px;
+	background-image: url('chrome://zotero/skin/arrow-down.gif');
+	width: 11px;
+	height: 6px;
+}
+
+.creator-name-box, .date-box > span {
+	margin: 1px 0 1px 0;
+}
+
+.comma {
+	margin: 1px 3px 1px 0 !important;
+}
+
+#zotero-date-field-status
+{
+	color: #666;
+	padding: 0 10px 0 1px !important;
+	white-space: nowrap;
+}
+
+.zotero-field-toggle
+{
+	width: 27px !important;
+	max-width: 27px !important;
+	min-width: 27px !important;
+	height: 14px;
+	margin: 0 5px 0 0 !important;
+	background-repeat: no-repeat !important;
+	background-position: center !important;
+	border-width: 0 !important;
+	border-radius: 4px !important;
+}
+
+/* Merge pane in duplicates view */
+.zotero-field-version-button {
+	margin: 0;
+	padding: 0;
+}
+
+/*
+ * Retraction box
+ */
+#retraction-box {
+	cursor: default;
+}
+
+#retraction-header {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	padding: 1.5em 1em;
+	background: #d93425;
+	color: white;
+	font-weight: bold;
+}
+
+#retraction-details {
+	background: #fbf0f0;
+	padding: .5em 1.5em;
+	margin-top: 0;
+	margin-bottom: 1em;
+	cursor: text;
+	-moz-user-select: text;
+}
+
+#retraction-details dt {
+	font-weight: bold;
+}
+
+#retraction-details dt:not(:first-child) {
+	margin-top: .5em;
+}
+
+#retraction-details dd {
+	margin-left: 2em;
+}
+
+#retraction-details a {
+	text-decoration: underline;
+}
+
+#retraction-links ul {
+	padding-left: 0;
+}
+
+#retraction-links li {
+	list-style: none;
+}
+
+#retraction-links li:not(:first-child) {
+	margin-top: .75em;
+}
+
+#retraction-credit {
+	text-align: right;
+	margin-top: 1.5em;
+	margin-right: -.9em;
+	margin-bottom: .2em;
+}
+
+#retraction-hide {
+	text-align: right;
+	margin-top: .3em;
+	margin-right: -1.2em;
+	margin-bottom: .3em;
+}
+
+#retraction-hide button {
+	background: none;
+	margin: 0;
+	padding: 0;
+	cursor: pointer;
+	display: inline;
+	text-decoration: underline;
+	border-style: none;
+}

scss/itemBox-mac.scss

@@ -0,0 +1,2 @@
+@import "itemBox";
+@import "mac/itemBox";

scss/itemBox-unix.scss

@@ -0,0 +1,2 @@
+@import "itemBox";
+@import "linux/itemBox";

scss/itemBox-win.scss

@@ -0,0 +1,2 @@
+@import "itemBox";
+@import "win/itemBox";

scss/linux/_itemBox.scss

@@ -1,5 +1,4 @@
-textbox
+input {
-{
 	padding: 1px 2px 1px 1px;
 	margin: -1px 0 -1px 0;
 }

scss/mac/_itemBox.scss

@@ -3,12 +3,11 @@ scrollbox
 	padding-top: 3px;
 }
 
-row > label:first-child, .creator-type-label, #more-creators-label
+th > label, .creator-type-label, #more-creators-label {
-{
 	color: #7f7f7f;
 }
 
-.zotero-field-toggle .toolbarbutton-text
+/*.zotero-field-toggle .toolbarbutton-text
 {	
 	visibility: hidden;
 }
@@ -16,17 +15,16 @@ row > label:first-child, .creator-type-label, #more-creators-label
 .zotero-field-toggle .toolbarbutton-icon
 {
 	margin: 0px !important;
-}
+}*/
 
-.creator-type-label > image {
+.creator-type-dropmarker {
 	margin: 1px .2em 1px;
-	list-style-image: url('chrome://zotero/skin/mac/arrow-down.png');
+	background-image: url('chrome://zotero/skin/mac/arrow-down.png');
 	max-width: 7px;
 	max-height: 7px;
 }
 
-textbox
+input {
-{
 	margin: -1px 5px -1px 0;
 	padding: 0;
 }
@@ -34,5 +32,5 @@ textbox
 
 /* BEGIN 2X BLOCK -- DO NOT EDIT MANUALLY -- USE 2XIZE */
 @media (min-resolution: 1.25dppx) {
-	.creator-type-label > image  { list-style-image: url('chrome://zotero/skin/mac/arrow-down@2x.png'); }
+	.creator-type-dropmarker { background-image: url('chrome://zotero/skin/mac/arrow-down@2x.png'); }
 }

scss/win/_itemBox.scss

@@ -16,8 +16,7 @@ row vbox[fieldname]
 	margin-bottom: 0;
 }
 
-textbox
+input {
-{
 	padding: 2px 2px 2px 2px;
 	margin: -1px 0 -1px 1px;
 }