diff --git a/chrome/content/zotero-platform/mac/zotero.css b/chrome/content/zotero-platform/mac/zotero.css deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/chrome/content/zotero/about.xhtml b/chrome/content/zotero/about.xhtml index 8d3ba2906e..12547bd31d 100644 --- a/chrome/content/zotero/about.xhtml +++ b/chrome/content/zotero/about.xhtml @@ -2,7 +2,7 @@ - + - + diff --git a/chrome/content/zotero/createParentDialog.xhtml b/chrome/content/zotero/createParentDialog.xhtml index 063baf5fe8..7fa2d1c0ca 100644 --- a/chrome/content/zotero/createParentDialog.xhtml +++ b/chrome/content/zotero/createParentDialog.xhtml @@ -3,7 +3,7 @@ - + %zoteroDTD; diff --git a/chrome/content/zotero/dictionaryManager.xhtml b/chrome/content/zotero/dictionaryManager.xhtml index 482b3102ad..e439d9b47d 100644 --- a/chrome/content/zotero/dictionaryManager.xhtml +++ b/chrome/content/zotero/dictionaryManager.xhtml @@ -1,7 +1,7 @@ - + diff --git a/chrome/content/zotero/elements/attachmentBox.js b/chrome/content/zotero/elements/attachmentBox.js index e87e106ca7..b6dacfad14 100644 --- a/chrome/content/zotero/elements/attachmentBox.js +++ b/chrome/content/zotero/elements/attachmentBox.js @@ -168,7 +168,7 @@ } this._mode = val; - this.shadowRoot.getElementById('attachment-box').setAttribute('mode', val); + this.querySelector('#attachment-box').setAttribute('mode', val); } get item() { @@ -184,14 +184,7 @@ } connectedCallback() { - var shadow = this.attachShadow({ mode: "open" }); - - var s1 = document.createElement("link"); - s1.rel = "stylesheet"; - s1.href = "chrome://zotero-platform/content/attachmentBox.css"; - shadow.append(s1); - - shadow.appendChild(document.importNode(this.content, true)); + this.appendChild(document.importNode(this.content, true)); // For the time being, use a silly little popup this._id('title').addEventListener('click', () => { @@ -605,7 +598,7 @@ } _id(id) { - return this.shadowRoot.getElementById(id); + return this.querySelector(`#${id}`); } } diff --git a/chrome/content/zotero/elements/base.js b/chrome/content/zotero/elements/base.js index ebe1a5049c..8bd8048003 100644 --- a/chrome/content/zotero/elements/base.js +++ b/chrome/content/zotero/elements/base.js @@ -24,13 +24,6 @@ */ class XULElementBase extends XULElement { - /** - * @return {String[]} Stylesheet URIs - */ - get stylesheets() { - return []; - } - /** * @return {DocumentFragment | null} */ @@ -43,23 +36,14 @@ class XULElementBase extends XULElement { destroy() {} connectedCallback() { - let shadow = this.attachShadow({ mode: 'open' }); - - for (let href of this.stylesheets) { - let link = document.createElement('link'); - link.rel = 'stylesheet'; - link.href = href; - shadow.append(link); - } - let content = this.content; if (content) { content = document.importNode(content, true); - shadow.append(content); + this.append(content); } MozXULElement.insertFTLIfNeeded("zotero.ftl"); - if (document.l10n) { + if (document.l10n && this.shadowRoot) { document.l10n.connectRoot(this.shadowRoot); } diff --git a/chrome/content/zotero/elements/colorPicker.js b/chrome/content/zotero/elements/colorPicker.js index 77bd937ebe..cf6e8faf21 100644 --- a/chrome/content/zotero/elements/colorPicker.js +++ b/chrome/content/zotero/elements/colorPicker.js @@ -31,16 +31,14 @@ Services.scriptloader.loadSubScript("chrome://zotero/content/elements/base.js", this); class ColorPicker extends XULElementBase { - stylesheets = ['chrome://global/skin/', 'chrome://zotero-platform/content/colorPicker.css']; - content = MozXULElement.parseXULToFragment(` - - + + - - + + `); @@ -103,9 +101,9 @@ } init() { - let button = this.shadowRoot.getElementById('button'); - let panel = this.shadowRoot.getElementById('panel'); - let grid = this.shadowRoot.getElementById('grid'); + let button = this.querySelector('.button'); + let panel = this.querySelector('.panel'); + let grid = this.querySelector('.grid'); button.addEventListener('click', () => { grid.style.gridTemplateColumns = `repeat(${this.cols}, ${this.tileWidth}px)`; @@ -120,10 +118,10 @@ attributeChangedCallback(attrName, oldVal, newVal) { if (attrName == 'color') { - this.shadowRoot.getElementById('button-tile').style.backgroundColor = newVal; + this.querySelector('.button-tile').style.backgroundColor = newVal; } else if (attrName == 'colors') { - let grid = this.shadowRoot.getElementById('grid'); + let grid = this.querySelector('.grid'); grid.innerHTML = ''; for (let color of newVal.split(',')) { let tile = document.createElement('div'); @@ -131,13 +129,13 @@ tile.style.backgroundColor = color; tile.addEventListener('click', () => { this.color = color; - this.shadowRoot.getElementById('panel').hidePopup(); + this.querySelector('.panel').hidePopup(); }); grid.append(tile); } } else if (attrName == 'disabled') { - this.shadowRoot.getElementById('button').disabled = !!newVal; + this.querySelector('.button').disabled = !!newVal; } } } diff --git a/chrome/content/zotero/elements/guidancePanel.js b/chrome/content/zotero/elements/guidancePanel.js index de4876a19d..477ad222b8 100644 --- a/chrome/content/zotero/elements/guidancePanel.js +++ b/chrome/content/zotero/elements/guidancePanel.js @@ -47,10 +47,8 @@ `); - stylesheets = ['chrome://global/skin/', 'chrome://zotero-platform/content/guidancePanel.css']; - get panel() { - return this.shadowRoot.querySelector('panel'); + return this.querySelector('panel'); } init() { @@ -194,7 +192,7 @@ } id(id) { - return this.shadowRoot.getElementById(id); + return this.querySelector(`#${id}`); } } diff --git a/chrome/content/zotero/elements/itemBox.js b/chrome/content/zotero/elements/itemBox.js index 018a1c91bc..fee1355c99 100644 --- a/chrome/content/zotero/elements/itemBox.js +++ b/chrome/content/zotero/elements/itemBox.js @@ -110,20 +110,7 @@ this._destroyed = false; window.addEventListener("unload", this.destroy); - var shadow = this.attachShadow({ mode: "open" }); - //shadow.host.style.display = 'flex'; - - var s1 = document.createElement("link"); - s1.rel = "stylesheet"; - s1.href = "chrome://zotero-platform/content/itemBox.css"; - shadow.append(s1); - - var s2 = document.createElement("link"); - s2.rel = "stylesheet"; - s2.href = "chrome://global/skin/global.css"; - shadow.append(s2); - - shadow.appendChild(document.importNode(this.content, true)); + this.appendChild(document.importNode(this.content, true)); this._creatorTypeMenu.addEventListener('popupshowing', () => { var typeBox = document.popupNode.localName == 'th' ? document.popupNode : document.popupNode.parentNode; @@ -617,7 +604,7 @@ this.nextSibling.querySelector('input, textarea').blur(); } else { - this.getRootNode().host.toggleAbstractExpand( + this.closest('item-box').toggleAbstractExpand( this.firstElementChild, this.closest('tr').querySelector('.value') ); } @@ -1024,7 +1011,7 @@ var td = document.createElement('td'); td.id = 'more-creators-label'; td.setAttribute('onclick', - "var binding = this.getRootNode().host; " + "var binding = this.closest('item-box'); " + "binding._displayAllCreators = true; " + "binding.refresh()" ); @@ -1076,7 +1063,7 @@ button.style.background = `url("chrome://zotero/skin/textfield-dual${Zotero.hiDPISuffix}.png") center/21px auto no-repeat`; button.setAttribute('title', Zotero.getString('pane.item.switchFieldMode.two')); lastName.setAttribute('fieldMode', '1'); - button.setAttribute('onclick', "this.getRootNode().host.switchCreatorMode(this.closest('tr'), 0, false, true)"); + button.setAttribute('onclick', "this.closest('item-box').switchCreatorMode(this.closest('tr'), 0, false, true)"); delete lastName.style.width; delete lastName.style.maxWidth; @@ -1115,7 +1102,7 @@ button.style.background = `url("chrome://zotero/skin/textfield-single${Zotero.hiDPISuffix}.png") center/21px auto no-repeat`; button.setAttribute('title', Zotero.getString('pane.item.switchFieldMode.one')); lastName.setAttribute('fieldMode', '0'); - button.setAttribute('onclick', "this.getRootNode().host.switchCreatorMode(this.closest('tr'), 1, false, true)"); + button.setAttribute('onclick', "this.closest('item-box').switchCreatorMode(this.closest('tr'), 1, false, true)"); // appropriately truncate lastName @@ -1979,7 +1966,7 @@ newVal = val; if (Zotero.ItemTypes.getName(this.item.itemTypeID) === "bookSection") { - var creatorTypeLabels = this.shadowRoot.querySelectorAll(".creator-type-label"); + var creatorTypeLabels = this.querySelectorAll(".creator-type-label"); this._id("zotero-author-guidance").show({ forEl: creatorTypeLabels[creatorTypeLabels.length - 1] }); @@ -2309,7 +2296,7 @@ } focusField(fieldName) { - let field = this.shadowRoot.querySelector(`[fieldname="${fieldName}"][ztabindex]`); + let field = this.querySelector(`[fieldname="${fieldName}"][ztabindex]`); if (!field) return false; return this._focusNextField(field.getAttribute('ztabindex')); } @@ -2558,7 +2545,7 @@ } _id(id) { - return this.shadowRoot.getElementById(id); + return this.querySelector(`#${id}`); } } customElements.define("item-box", ItemBox); diff --git a/chrome/content/zotero/elements/noteEditor.js b/chrome/content/zotero/elements/noteEditor.js index 27176ea185..1e146e6f74 100644 --- a/chrome/content/zotero/elements/noteEditor.js +++ b/chrome/content/zotero/elements/noteEditor.js @@ -59,13 +59,12 @@ this._destroyed = false; window.addEventListener("unload", this.destroy); - var shadow = this.attachShadow({ mode: "open" }); MozXULElement.insertFTLIfNeeded('mozilla/textActions.ftl'); - document.l10n.connectRoot(shadow); + document.l10n.connectRoot(this); // var s1 = document.createElement("link"); // s1.rel = "stylesheet"; - // s1.href = "chrome://zotero-platform/content/noteEditor.css"; + // s1.href = "chrome://zotero-platform/content/zotero.css"; // shadow.append(s1); let content = document.importNode(this.content, true); @@ -86,7 +85,7 @@ }, true); this._initialized = true; }); - shadow.append(content); + this.append(content); this._notifierID = Zotero.Notifier.registerObserver(this, ['item'], 'noteEditor'); this.notitle = !!this.getAttribute('notitle'); @@ -322,7 +321,7 @@ } _id(id) { - return this.shadowRoot.querySelector(`[id=${id}]`); + return this.querySelector(`#${id}`); } } customElements.define("note-editor", NoteEditor); @@ -367,18 +366,7 @@ this._destroyed = false; window.addEventListener("unload", this.destroy); - var shadow = this.attachShadow({ mode: "open" }); - var s1 = document.createElement("link"); - s1.rel = "stylesheet"; - s1.href = "chrome://zotero-platform/content/noteEditor.css"; - shadow.append(s1); - - var s2 = document.createElement("link"); - s2.rel = "stylesheet"; - s2.href = "chrome://global/skin/global.css"; - shadow.append(s2); - - shadow.append(document.importNode(this.content, true)); + this.append(document.importNode(this.content, true)); this._id('parent-value').addEventListener('click', this._parentClickHandler); this._id('related-value').addEventListener('click', this._relatedClickHandler); @@ -538,7 +526,7 @@ }; _id(id) { - return this.shadowRoot.querySelector(`[id=${id}]`); + return this.querySelector(`#${id}`); } } customElements.define("links-box", LinksBox); diff --git a/chrome/content/zotero/elements/notesBox.js b/chrome/content/zotero/elements/notesBox.js index 11a0055e6d..c6e025f0ea 100644 --- a/chrome/content/zotero/elements/notesBox.js +++ b/chrome/content/zotero/elements/notesBox.js @@ -52,15 +52,8 @@ this._destroyed = false; window.addEventListener("unload", this.destroy); - let shadow = this.attachShadow({ mode: "open" }); - - let s1 = document.createElement("link"); - s1.rel = "stylesheet"; - s1.href = "chrome://zotero-platform/content/notesBox.css"; - shadow.append(s1); - let content = document.importNode(this.content, true); - shadow.append(content); + this.append(content); this._id('add').addEventListener('click', this._handleAdd); @@ -173,7 +166,7 @@ } _id(id) { - return this.shadowRoot.querySelector(`[id=${id}]`); + return this.querySelector(`[id=${id}]`); } } customElements.define("notes-box", NotesBox); diff --git a/chrome/content/zotero/elements/quickSearchTextbox.js b/chrome/content/zotero/elements/quickSearchTextbox.js index f8e8f333b9..fc3c8e542d 100644 --- a/chrome/content/zotero/elements/quickSearchTextbox.js +++ b/chrome/content/zotero/elements/quickSearchTextbox.js @@ -48,23 +48,18 @@ return; } - let s1 = document.createElement("link"); - s1.rel = "stylesheet"; - s1.href = "chrome://zotero-platform/content/quickSearchTextbox.css"; - this.shadowRoot.append(s1); - // Need to create an inner shadow DOM so that global.css styles, // which we need for the menupopup, don't break the search textbox let dropmarkerHost = document.createXULElement('hbox'); let dropmarkerShadow = dropmarkerHost.attachShadow({ mode: 'open' }); + let s1 = document.createElement("link"); + s1.rel = "stylesheet"; + s1.href = "chrome://zotero-platform/content/zotero.css"; + let s2 = document.createElement("link"); s2.rel = "stylesheet"; - s2.href = "chrome://zotero-platform/content/quickSearchTextbox.css"; - - let s3 = document.createElement("link"); - s3.rel = "stylesheet"; - s3.href = "chrome://global/skin/global.css"; + s2.href = "chrome://global/skin/global.css"; let dropmarker = document.createXULElement('button'); dropmarker.id = "zotero-tb-search-menu-button"; @@ -72,7 +67,7 @@ dropmarker.setAttribute("type", "menu"); dropmarker.append(this.searchModePopup); - dropmarkerShadow.append(s2, s3, dropmarker); + dropmarkerShadow.append(s1, s2, dropmarker); this.inputField.before(dropmarkerHost); diff --git a/chrome/content/zotero/elements/relatedBox.js b/chrome/content/zotero/elements/relatedBox.js index 9d464b3c9e..a02fba4fe1 100644 --- a/chrome/content/zotero/elements/relatedBox.js +++ b/chrome/content/zotero/elements/relatedBox.js @@ -54,15 +54,8 @@ this._destroyed = false; window.addEventListener("unload", this.destroy); - let shadow = this.attachShadow({ mode: "open" }); - - let s1 = document.createElement("link"); - s1.rel = "stylesheet"; - s1.href = "chrome://zotero-platform/content/relatedBox.css"; - shadow.append(s1); - let content = document.importNode(this.content, true); - shadow.append(content); + this.append(content); this._id('related-add').addEventListener('click', this.add); @@ -258,7 +251,7 @@ } _id(id) { - return this.shadowRoot.querySelector(`[id=${id}]`); + return this.querySelector(`[id=${id}]`); } } customElements.define("related-box", RelatedBox); diff --git a/chrome/content/zotero/elements/tagsBox.js b/chrome/content/zotero/elements/tagsBox.js index a41271e2ec..05d96da633 100644 --- a/chrome/content/zotero/elements/tagsBox.js +++ b/chrome/content/zotero/elements/tagsBox.js @@ -76,25 +76,8 @@ this._destroyed = false; window.addEventListener("unload", this.destroy); - let shadow = this.attachShadow({ mode: "open" }); - - let s1 = document.createElement("link"); - s1.rel = "stylesheet"; - s1.href = "chrome://zotero-platform/content/tagsBox.css"; - shadow.append(s1); - - let s2 = document.createElement("link"); - s2.rel = "stylesheet"; - s2.href = "chrome://global/skin/"; - shadow.append(s2); - - let s3 = document.createElement("link"); - s3.rel = "stylesheet"; - s3.href = "chrome://zotero/skin/overlay.css"; - shadow.append(s3); - let content = document.importNode(this.content, true); - shadow.append(content); + this.append(content); this._id('add').addEventListener('click', this._handleAddButtonClick); this._id('add').addEventListener('keydown', this._handleAddButtonKeyDown); @@ -919,7 +902,7 @@ Zotero.debug('Looking for tabindex ' + nextIndex, 4); - var next = this.shadowRoot.getElementsByAttribute('ztabindex', nextIndex); + var next = this.querySelector(`[ztabindex=${nextIndex}]`); if (next.length) { next = next[0]; next.click(); @@ -958,7 +941,7 @@ async blurOpenField(stayOpen) { this._lastTabIndex = false; - var textboxe = this.shadowRoot.querySelector('.editable'); + var textboxe = this.querySelector('.editable'); if (textboxe) { await this.blurHandler({ target: textboxe, @@ -971,7 +954,7 @@ } _id(id) { - return this.shadowRoot.querySelector(`[id=${id}]`); + return this.querySelector(`[id=${id}]`); } } diff --git a/chrome/content/zotero/elements/zoteroSearch.js b/chrome/content/zotero/elements/zoteroSearch.js index 4ac681b999..dd8c98df2f 100644 --- a/chrome/content/zotero/elements/zoteroSearch.js +++ b/chrome/content/zotero/elements/zoteroSearch.js @@ -32,29 +32,20 @@ Services.scriptloader.loadSubScript("chrome://zotero/content/elements/base.js", this); Services.scriptloader.loadSubScript("chrome://zotero/content/elements/shadowAutocompleteInput.js", this); - class SearchElementBase extends XULElementBase { - get stylesheets() { - return [ - 'chrome://global/skin/global.css', - 'chrome://zotero-platform/content/zoteroSearch.css' - ]; - } - } - - class ZoteroSearch extends SearchElementBase { + class ZoteroSearch extends XULElementBase { content = MozXULElement.parseXULToFragment(` + id="search-box" flex="1" onkeypress="this.closest('zoterosearch').handleKeyPress(event)"> - - + + - + `, ['chrome://zotero/locale/zotero.dtd', 'chrome://zotero/locale/searchbox.dtd']); @@ -81,7 +72,7 @@ set search(val) { this.searchRef = val; - var libraryMenu = this.shadowRoot.getElementById('libraryMenu'); + var libraryMenu = this.querySelector('#libraryMenu'); var libraries = Zotero.Libraries.getAll(); Zotero.Utilities.Internal.buildLibraryMenu( libraryMenu, libraries, this.searchRef.libraryID @@ -91,10 +82,10 @@ } this.updateLibrary(); - this.shadowRoot.getElementById('joinModeMenu').removeAttribute('condition'); - this.shadowRoot.getElementById('joinModeMenu').value = 'all'; + this.querySelector('#joinModeMenu').removeAttribute('condition'); + this.querySelector('#joinModeMenu').value = 'all'; - var conditionsBox = this.shadowRoot.getElementById('conditions'); + var conditionsBox = this.querySelector('#conditions'); while (conditionsBox.hasChildNodes()) conditionsBox.removeChild(conditionsBox.firstChild); @@ -107,14 +98,14 @@ case 'noChildren': case 'includeParentsAndChildren': let checkbox = condition.condition + 'Checkbox'; - this.shadowRoot.getElementById(checkbox).setAttribute('condition', id); - this.shadowRoot.getElementById(checkbox).checked = condition.operator == 'true'; + this.querySelector(`#${checkbox}`).setAttribute('condition', id); + this.querySelector(`#${checkbox}`).checked = condition.operator == 'true'; continue; } if (condition.condition == 'joinMode') { - this.shadowRoot.getElementById('joinModeMenu').setAttribute('condition', id); - this.shadowRoot.getElementById('joinModeMenu').value = condition.operator; + this.querySelector('#joinModeMenu').setAttribute('condition', id); + this.querySelector('#joinModeMenu').value = condition.operator; } else { this.addCondition(condition); @@ -123,7 +114,7 @@ } addCondition(ref) { - var conditionsBox = this.shadowRoot.getElementById('conditions'); + var conditionsBox = this.querySelector('#conditions'); var condition = document.createXULElement('zoterosearchcondition'); condition.setAttribute('flex', '1'); @@ -145,7 +136,7 @@ } removeCondition(id) { - var conditionsBox = this.shadowRoot.getElementById('conditions'); + var conditionsBox = this.querySelector('#conditions'); this.search.removeCondition(id); @@ -162,7 +153,7 @@ } updateLibrary() { - var menu = this.shadowRoot.getElementById('libraryMenu'); + var menu = this.querySelector('#libraryMenu'); var libraryID = parseInt(menu.selectedItem.value); if (this.onLibraryChange) { @@ -172,11 +163,11 @@ this.searchRef.libraryID = libraryID; } - [...this.shadowRoot.getElementById('conditions').childNodes].forEach(x => x.onLibraryChange()); + [...this.querySelector('#conditions').childNodes].forEach(x => x.onLibraryChange()); } updateJoinMode() { - var menu = this.shadowRoot.getElementById('joinModeMenu'); + var menu = this.querySelector('#joinModeMenu'); if(menu.hasAttribute('condition')) this.search.updateCondition(menu.getAttribute('condition'),'joinMode',menu.value,null); else @@ -184,7 +175,7 @@ } updateCheckbox(condition) { - var checkbox = this.shadowRoot.getElementById(condition + 'Checkbox'); + var checkbox = this.querySelector('#' + condition + 'Checkbox'); var value = checkbox.checked ? 'true' : 'false'; if(checkbox.hasAttribute('condition')) { @@ -200,7 +191,7 @@ // Calls updateSearch() on all search conditions updateSearch() { - var conditionsBox = this.shadowRoot.getElementById('conditions'); + var conditionsBox = this.querySelector('#conditions'); if (conditionsBox.hasChildNodes()) { for(var i = 0, len=conditionsBox.childNodes.length; i < len; i++) { conditionsBox.childNodes[i].updateSearch(); @@ -225,20 +216,20 @@ } customElements.define("zoterosearch", ZoteroSearch); - class ZoteroSearchCondition extends SearchElementBase { + class ZoteroSearchCondition extends XULElementBase { content = MozXULElement.parseXULToFragment(` - - + + - + @@ -246,8 +237,8 @@ `, ['chrome://zotero/locale/zotero.dtd', 'chrome://zotero/locale/searchbox.dtd']); @@ -264,7 +255,7 @@ 'isAfter', 'isInTheLast' ]; - var operatorsList = this.shadowRoot.getElementById('operatorsmenu'); + var operatorsList = this.querySelector('#operatorsmenu'); // Build operator menu for (let operator of operators) { @@ -275,8 +266,8 @@ } // Build conditions menu - var conditionsMenu = this.shadowRoot.getElementById('conditionsmenu'); - var moreConditionsMenu = this.shadowRoot.getElementById('more-conditions-menu'); + var conditionsMenu = this.querySelector('#conditionsmenu'); + var moreConditionsMenu = this.querySelector('#more-conditions-menu'); var conditions = Zotero.SearchConditions.getStandardConditions(); for (let condition of conditions) { @@ -300,7 +291,7 @@ // Add tooltip, building it if it doesn't exist if (baseFields) { - if (!this.shadowRoot.getElementById(condition.name + '-tooltip')) { + if (!this.querySelector('#' + condition.name + '-tooltip')) { var fieldName = null; try { fieldName = Zotero.ItemFields.getLocalizedString(condition.name); @@ -343,7 +334,7 @@ hbox.appendChild(vbox); tt.appendChild(hbox); - this.shadowRoot.getElementById('condition-tooltips').appendChild(tt); + this.querySelector('#condition-tooltips').appendChild(tt); } menuitem.setAttribute('tooltip', condition.name + '-tooltip'); @@ -375,8 +366,8 @@ } onConditionSelected(conditionName, reload) { - var conditionsMenu = this.shadowRoot.getElementById('conditionsmenu'); - var operatorsList = this.shadowRoot.getElementById('operatorsmenu'); + var conditionsMenu = this.querySelector('#conditionsmenu'); + var operatorsList = this.querySelector('#operatorsmenu'); // Skip if no condition or correct condition already selected if (!conditionName || (conditionName == this.selectedCondition && !reload)) { @@ -488,22 +479,22 @@ default: if (operatorsList.value=='isInTheLast') { - this.shadowRoot.getElementById('value-date-age').value = this.value; + this.querySelector('#value-date-age').value = this.value; } // Textbox else { // If switching from menu to textbox, clear value - if (this.shadowRoot.getElementById('valuefield').hidden){ - this.shadowRoot.getElementById('valuefield').value = ''; + if (this.querySelector('#valuefield').hidden){ + this.querySelector('#valuefield').value = ''; } // If switching between textbox conditions, get loaded value for new one else { - this.shadowRoot.getElementById('valuefield').value = this.value; + this.querySelector('#valuefield').value = this.value; } // Update field drop-down if applicable - this.shadowRoot.getElementById('valuefield').update(conditionName, this.mode); + this.querySelector('#valuefield').update(conditionName, this.mode); } } @@ -511,44 +502,44 @@ } onOperatorSelected() { - var operatorsList = this.shadowRoot.getElementById('operatorsmenu'); + var operatorsList = this.querySelector('#operatorsmenu'); // Drop-down menu if (this.selectedCondition == 'collection' || this.selectedCondition == 'itemType' || this.selectedCondition == 'fileTypeID') { - this.shadowRoot.getElementById('valuefield').hidden = true; - this.shadowRoot.getElementById('valuemenu').hidden = false; - this.shadowRoot.getElementById('value-date-age').hidden = true; + this.querySelector('#valuefield').hidden = true; + this.querySelector('#valuemenu').hidden = false; + this.querySelector('#value-date-age').hidden = true; } // Textbox + units dropdown for isInTheLast operator else if (operatorsList.value=='isInTheLast') { // If switching from text field, clear value - if (this.shadowRoot.getElementById('value-date-age').hidden){ + if (this.querySelector('#value-date-age').hidden){ this.value = ''; } - this.shadowRoot.getElementById('valuefield').hidden = true; - this.shadowRoot.getElementById('valuemenu').hidden = true; - this.shadowRoot.getElementById('value-date-age').hidden = false; + this.querySelector('#valuefield').hidden = true; + this.querySelector('#valuemenu').hidden = true; + this.querySelector('#value-date-age').hidden = false; } // Textbox else { // If switching from date age, clear value - if (this.shadowRoot.getElementById('valuefield').hidden){ + if (this.querySelector('#valuefield').hidden){ this.value = ''; } - this.shadowRoot.getElementById('valuefield').hidden = false; - this.shadowRoot.getElementById('valuemenu').hidden = true; - this.shadowRoot.getElementById('value-date-age').hidden = true; + this.querySelector('#valuefield').hidden = false; + this.querySelector('#valuemenu').hidden = true; + this.querySelector('#value-date-age').hidden = true; } } createValueMenu(rows) { - let valueMenu = this.shadowRoot.getElementById('valuemenu'); + let valueMenu = this.querySelector('#valuemenu'); while (valueMenu.hasChildNodes()){ valueMenu.removeChild(valueMenu.firstChild); @@ -568,13 +559,13 @@ valueMenu.value = this.value; } - valueMenu.shadowRoot.querySelector('#label-box > image').style.maxHeight = '16px'; + valueMenu.querySelector('#label-box > image').style.maxHeight = '16px'; } initWithParentAndCondition(parent, condition) { this.parent = parent; this.conditionID = condition['id']; - var menu = this.shadowRoot.getElementById('conditionsmenu'); + var menu = this.querySelector('#conditionsmenu'); if(this.parent.search) { @@ -613,7 +604,7 @@ } this.mode = condition['mode']; - this.shadowRoot.getElementById('operatorsmenu').value = condition['operator']; + this.querySelector('#operatorsmenu').value = condition['operator']; this.value = prefix + (condition.value ? condition.value : ''); @@ -622,19 +613,19 @@ this.onConditionSelected(menu.value); - this.shadowRoot.getElementById('conditionsmenu').focus(); + this.querySelector('#conditionsmenu').focus(); } updateSearch() { if(this.parent && this.parent.search && !this.dontupdate) { var condition = this.selectedCondition; - var operator = this.shadowRoot.getElementById('operatorsmenu').value; + var operator = this.querySelector('#operatorsmenu').value; // Regular text field - if (!this.shadowRoot.getElementById('valuefield').hidden) + if (!this.querySelector('#valuefield').hidden) { - var value = this.shadowRoot.getElementById('valuefield').value; + var value = this.querySelector('#valuefield').value; // Convert datetimes to UTC before saving switch (condition) { @@ -647,21 +638,21 @@ } // Append mode to condition - if (this.shadowRoot.getElementById('valuefield').mode){ - condition += '/' + this.shadowRoot.getElementById('valuefield').mode; + if (this.querySelector('#valuefield').mode){ + condition += '/' + this.querySelector('#valuefield').mode; } } // isInTheLast operator - else if (!this.shadowRoot.getElementById('value-date-age').hidden) + else if (!this.querySelector('#value-date-age').hidden) { - var value = this.shadowRoot.getElementById('value-date-age').value; + var value = this.querySelector('#value-date-age').value; } // Handle special C1234 and S5678 form for // collections and searches else if (condition == 'collection') { - var letter = this.shadowRoot.getElementById('valuemenu').value.substr(0,1); + var letter = this.querySelector('#valuemenu').value.substr(0,1); if (letter=='C') { condition = 'collection'; @@ -670,13 +661,13 @@ { condition = 'savedSearch'; } - var value = this.shadowRoot.getElementById('valuemenu').value.substr(1); + var value = this.querySelector('#valuemenu').value.substr(1); } // Regular drop-down menu else { - var value = this.shadowRoot.getElementById('valuemenu').value; + var value = this.querySelector('#valuemenu').value; } this.parent.search.updateCondition(this.conditionID, condition, operator, value); } @@ -705,7 +696,7 @@ } if (!menu) { - menu = this.shadowRoot.getElementById('conditionsmenu'); + menu = this.querySelector('#conditionsmenu'); } for (let i = 0; i < menu.itemCount; i++) { let item = menu.getItemAtIndex(i); @@ -745,8 +736,8 @@ if (this.parent){ let ref = this.parent.search.getCondition( this.parent.search.addCondition( - this.shadowRoot.getElementById('conditionsmenu').getAttribute('data-value'), - this.shadowRoot.getElementById('operatorsmenu').value, + this.querySelector('#conditionsmenu').getAttribute('data-value'), + this.querySelector('#operatorsmenu').value, "" ) ) @@ -756,20 +747,20 @@ } disableRemoveButton() { - var button = this.shadowRoot.getElementById("remove"); + var button = this.querySelector("#remove"); button.setAttribute('disabled', true); button.removeAttribute('onclick'); } enableRemoveButton() { - var button = this.shadowRoot.getElementById("remove"); + var button = this.querySelector("#remove"); button.setAttribute('disabled', false); - button.setAttribute('onclick', "this.getRootNode().host.onRemoveClicked(event)"); + button.setAttribute('onclick', "this.closest('zoterosearchcondition').onRemoveClicked(event)"); } } customElements.define("zoterosearchcondition", ZoteroSearchCondition); - class ZoteroSearchTextbox extends SearchElementBase { + class ZoteroSearchTextbox extends XULElementBase { content = MozXULElement.parseXULToFragment(` - + diff --git a/chrome/content/zotero/exportOptions.xhtml b/chrome/content/zotero/exportOptions.xhtml index 8fc298a55e..6d4cbc3ce2 100644 --- a/chrome/content/zotero/exportOptions.xhtml +++ b/chrome/content/zotero/exportOptions.xhtml @@ -1,6 +1,6 @@ - + diff --git a/chrome/content/zotero/integration/addCitationDialog.xhtml b/chrome/content/zotero/integration/addCitationDialog.xhtml index 65492aa5f6..7951c5f489 100644 --- a/chrome/content/zotero/integration/addCitationDialog.xhtml +++ b/chrome/content/zotero/integration/addCitationDialog.xhtml @@ -28,7 +28,7 @@ - + diff --git a/chrome/content/zotero/integration/editBibliographyDialog.xhtml b/chrome/content/zotero/integration/editBibliographyDialog.xhtml index 589c7d0800..b1112987b6 100644 --- a/chrome/content/zotero/integration/editBibliographyDialog.xhtml +++ b/chrome/content/zotero/integration/editBibliographyDialog.xhtml @@ -27,7 +27,7 @@ - + diff --git a/chrome/content/zotero/locateManager.xhtml b/chrome/content/zotero/locateManager.xhtml index faf58e06aa..7e7222c123 100644 --- a/chrome/content/zotero/locateManager.xhtml +++ b/chrome/content/zotero/locateManager.xhtml @@ -28,7 +28,7 @@ - + - + diff --git a/chrome/content/zotero/merge.xul b/chrome/content/zotero/merge.xul index 2ecf59946d..176098dace 100644 --- a/chrome/content/zotero/merge.xul +++ b/chrome/content/zotero/merge.xul @@ -27,7 +27,7 @@ - + diff --git a/chrome/content/zotero/preferences/librariesToSync.xhtml b/chrome/content/zotero/preferences/librariesToSync.xhtml index 22c681afee..6a8a3fb186 100644 --- a/chrome/content/zotero/preferences/librariesToSync.xhtml +++ b/chrome/content/zotero/preferences/librariesToSync.xhtml @@ -26,7 +26,7 @@ - + - +