From 6b819e259c052b5942e9cbf99c97b6e5aaae6e07 Mon Sep 17 00:00:00 2001 From: Adomas Ven Date: Sat, 1 Apr 2023 08:37:55 +0300 Subject: [PATCH] fx102: Cleans up scss files, removes shadow DOM use from CEs (#3051) Removes a huge amount of excessive files and duplication for CE scss. All CE css is now output in the single zotero-react-client.css file. Moving all CE styling into a single stylesheet required removing their shadow DOMs. It is desirable anyway, since you want to be able to style CEs from "outside", when embedding in different contexts. Shadow removal required some CE code changes to maintain functionality. Elements refactored: - attachment-box (displayed when an attachment (like PDF) is selected in the item tree) - color-picker (in the tag color selector) - guidance-panel (displayed on first run when editing authors for a book section) - item-box (info tab in the item pane) - note-editor - notes-box (note tab in the item pane) - quick-search-textbox - related-box (related tab in the item pane) - tags-box (tags tab in the item pane) - zoterosearch (advanced search condition builder form) --- chrome/content/zotero-platform/mac/zotero.css | 0 chrome/content/zotero/about.xhtml | 2 +- chrome/content/zotero/advancedSearch.xhtml | 2 +- .../content/zotero/createParentDialog.xhtml | 2 +- chrome/content/zotero/dictionaryManager.xhtml | 2 +- .../content/zotero/elements/attachmentBox.js | 13 +- chrome/content/zotero/elements/base.js | 20 +- chrome/content/zotero/elements/colorPicker.js | 24 +- .../content/zotero/elements/guidancePanel.js | 6 +- chrome/content/zotero/elements/itemBox.js | 29 +- chrome/content/zotero/elements/noteEditor.js | 24 +- chrome/content/zotero/elements/notesBox.js | 11 +- .../zotero/elements/quickSearchTextbox.js | 17 +- chrome/content/zotero/elements/relatedBox.js | 11 +- chrome/content/zotero/elements/tagsBox.js | 25 +- .../content/zotero/elements/zoteroSearch.js | 179 +++++----- chrome/content/zotero/errorReport.xhtml | 2 +- chrome/content/zotero/exportOptions.xhtml | 2 +- .../integration/addCitationDialog.xhtml | 2 +- .../integration/editBibliographyDialog.xhtml | 2 +- chrome/content/zotero/locateManager.xhtml | 2 +- chrome/content/zotero/longTagFixer.xhtml | 2 +- chrome/content/zotero/merge.xul | 2 +- .../zotero/preferences/librariesToSync.xhtml | 2 +- .../zotero/preferences/preferences.xhtml | 2 +- .../content/zotero/progressQueueDialog.xhtml | 2 +- chrome/content/zotero/rtfScan.xhtml | 2 +- chrome/content/zotero/selectItemsDialog.xhtml | 2 +- chrome/content/zotero/tagColorChooser.xhtml | 1 + chrome/content/zotero/zoteroPane.xhtml | 2 +- scss/_attachmentBox.scss | 3 - scss/_colorPicker.scss | 1 - scss/_guidancePanel.scss | 1 - scss/_itemBox.scss | 2 - scss/_noteEditor.scss | 4 - scss/_notesBox.scss | 2 - scss/_quickSearchTextbox.scss | 1 - scss/_relatedBox.scss | 2 - scss/_tagsBox.scss | 2 - ..._zotero-react-client.scss => _zotero.scss} | 13 +- scss/_zoteroSearch.scss | 2 - scss/attachmentBox-mac.scss | 2 - scss/attachmentBox-unix.scss | 1 - scss/attachmentBox-win.scss | 1 - scss/colorPicker-mac.scss | 1 - scss/colorPicker-unix.scss | 1 - scss/colorPicker-win.scss | 1 - scss/components/_attachmentBox.scss | 69 ---- scss/components/_colorPicker.scss | 37 --- scss/components/_guidancePanel.scss | 56 ---- scss/components/_itemBox.scss | 305 ------------------ scss/components/_notesBox.scss | 42 --- scss/components/_relatedBox.scss | 42 --- scss/components/_tagsBox.scss | 72 ----- scss/components/_zoteroSearch.scss | 55 ---- scss/elements/_attachmentBox.scss | 71 ++++ scss/elements/_colorPicker.scss | 40 +++ scss/elements/_guidancePanel.scss | 58 ++++ scss/elements/_itemBox.scss | 304 +++++++++++++++++ .../{components => elements}/_noteEditor.scss | 0 scss/elements/_notesBox.scss | 44 +++ .../_quickSearchTextbox.scss | 8 +- scss/elements/_tagsBox.scss | 74 +++++ scss/elements/_zoteroSearch.scss | 57 ++++ scss/guidancePanel-mac.scss | 1 - scss/guidancePanel-unix.scss | 1 - scss/guidancePanel-win.scss | 1 - scss/itemBox-mac.scss | 2 - scss/itemBox-unix.scss | 2 - scss/itemBox-win.scss | 2 - .../linux/_feedSettings.scss | 0 scss/linux/_itemBox.scss | 7 - scss/linux/elements/_itemBox.scss | 20 ++ .../{ => elements}/_quickSearchTextbox.scss | 0 scss/mac/{ => elements}/_attachmentBox.scss | 0 scss/mac/{ => elements}/_itemBox.scss | 0 .../{ => elements}/_quickSearchTextbox.scss | 0 scss/noteEditor-mac.scss | 1 - scss/noteEditor-unix.scss | 1 - scss/noteEditor-win.scss | 1 - scss/notesBox-mac.scss | 1 - scss/notesBox-unix.scss | 1 - scss/notesBox-win.scss | 1 - scss/quickSearchTextbox-mac.scss | 2 - scss/quickSearchTextbox-unix.scss | 2 - scss/quickSearchTextbox-win.scss | 2 - scss/relatedBox-mac.scss | 1 - scss/relatedBox-unix.scss | 1 - scss/relatedBox-win.scss | 1 - scss/tagsBox-mac.scss | 1 - scss/tagsBox-unix.scss | 1 - scss/tagsBox-win.scss | 1 - scss/win/{ => elements}/_itemBox.scss | 0 .../{ => elements}/_quickSearchTextbox.scss | 0 ...-react-client-mac.scss => zotero-mac.scss} | 8 +- ...eact-client-unix.scss => zotero-unix.scss} | 8 +- ...-react-client-win.scss => zotero-win.scss} | 7 +- scss/zoteroSearch-mac.scss | 1 - scss/zoteroSearch-unix.scss | 1 - scss/zoteroSearch-win.scss | 1 - 100 files changed, 854 insertions(+), 994 deletions(-) delete mode 100644 chrome/content/zotero-platform/mac/zotero.css delete mode 100644 scss/_attachmentBox.scss delete mode 100644 scss/_colorPicker.scss delete mode 100644 scss/_guidancePanel.scss delete mode 100644 scss/_itemBox.scss delete mode 100644 scss/_noteEditor.scss delete mode 100644 scss/_notesBox.scss delete mode 100644 scss/_quickSearchTextbox.scss delete mode 100644 scss/_relatedBox.scss delete mode 100644 scss/_tagsBox.scss rename scss/{_zotero-react-client.scss => _zotero.scss} (78%) delete mode 100644 scss/_zoteroSearch.scss delete mode 100644 scss/attachmentBox-mac.scss delete mode 100644 scss/attachmentBox-unix.scss delete mode 100644 scss/attachmentBox-win.scss delete mode 100644 scss/colorPicker-mac.scss delete mode 100644 scss/colorPicker-unix.scss delete mode 100644 scss/colorPicker-win.scss delete mode 100644 scss/components/_attachmentBox.scss delete mode 100644 scss/components/_colorPicker.scss delete mode 100644 scss/components/_guidancePanel.scss delete mode 100644 scss/components/_itemBox.scss delete mode 100644 scss/components/_notesBox.scss delete mode 100644 scss/components/_relatedBox.scss delete mode 100644 scss/components/_tagsBox.scss delete mode 100644 scss/components/_zoteroSearch.scss create mode 100644 scss/elements/_attachmentBox.scss create mode 100644 scss/elements/_colorPicker.scss create mode 100644 scss/elements/_guidancePanel.scss create mode 100644 scss/elements/_itemBox.scss rename scss/{components => elements}/_noteEditor.scss (100%) create mode 100644 scss/elements/_notesBox.scss rename scss/{components => elements}/_quickSearchTextbox.scss (82%) create mode 100644 scss/elements/_tagsBox.scss create mode 100644 scss/elements/_zoteroSearch.scss delete mode 100644 scss/guidancePanel-mac.scss delete mode 100644 scss/guidancePanel-unix.scss delete mode 100644 scss/guidancePanel-win.scss delete mode 100644 scss/itemBox-mac.scss delete mode 100644 scss/itemBox-unix.scss delete mode 100644 scss/itemBox-win.scss rename chrome/content/zotero-platform/unix/zotero.css => scss/linux/_feedSettings.scss (100%) delete mode 100644 scss/linux/_itemBox.scss create mode 100644 scss/linux/elements/_itemBox.scss rename scss/linux/{ => elements}/_quickSearchTextbox.scss (100%) rename scss/mac/{ => elements}/_attachmentBox.scss (100%) rename scss/mac/{ => elements}/_itemBox.scss (100%) rename scss/mac/{ => elements}/_quickSearchTextbox.scss (100%) delete mode 100644 scss/noteEditor-mac.scss delete mode 100644 scss/noteEditor-unix.scss delete mode 100644 scss/noteEditor-win.scss delete mode 100644 scss/notesBox-mac.scss delete mode 100644 scss/notesBox-unix.scss delete mode 100644 scss/notesBox-win.scss delete mode 100644 scss/quickSearchTextbox-mac.scss delete mode 100644 scss/quickSearchTextbox-unix.scss delete mode 100644 scss/quickSearchTextbox-win.scss delete mode 100644 scss/relatedBox-mac.scss delete mode 100644 scss/relatedBox-unix.scss delete mode 100644 scss/relatedBox-win.scss delete mode 100644 scss/tagsBox-mac.scss delete mode 100644 scss/tagsBox-unix.scss delete mode 100644 scss/tagsBox-win.scss rename scss/win/{ => elements}/_itemBox.scss (100%) rename scss/win/{ => elements}/_quickSearchTextbox.scss (100%) rename scss/{zotero-react-client-mac.scss => zotero-mac.scss} (69%) rename scss/{zotero-react-client-unix.scss => zotero-unix.scss} (70%) rename scss/{zotero-react-client-win.scss => zotero-win.scss} (66%) delete mode 100644 scss/zoteroSearch-mac.scss delete mode 100644 scss/zoteroSearch-unix.scss delete mode 100644 scss/zoteroSearch-win.scss 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 @@ - + - +