diff --git a/chrome/content/zotero/components/virtualized-table.jsx b/chrome/content/zotero/components/virtualized-table.jsx index 4408bd5224..92a0f818b3 100644 --- a/chrome/content/zotero/components/virtualized-table.jsx +++ b/chrome/content/zotero/components/virtualized-table.jsx @@ -1102,9 +1102,8 @@ class VirtualizedTable extends React.Component { this._setXulTooltip(); this._topDiv.style.setProperty("--first-column-extra-width", `${this.firstColumnExtraWidth}px`); - window.addEventListener("resize", () => { - this._debouncedRerender(); - }); + this._resizeObserver = new ResizeObserver(() => this.rerender()); + this._resizeObserver.observe(this._jsWindow.targetElement); if (this.props.stickySectionHeaders) { this._jsWindow.targetElement.addEventListener('scroll', this._updateStickySectionHeader, { passive: true }); @@ -1117,6 +1116,7 @@ class VirtualizedTable extends React.Component { } componentWillUnmount() { + this._resizeObserver?.disconnect(); if (this.props.stickySectionHeaders && this._jsWindow) { this._jsWindow.targetElement.removeEventListener('scroll', this._updateStickySectionHeader); } @@ -1589,8 +1589,6 @@ class VirtualizedTable extends React.Component { return parseFloat(height.split('px')[0]); } - _debouncedRerender = Zotero.Utilities.debounce(this.rerender, 200); - _updateWidth() { if (!this.props.showHeader) return; const jsWindow = document.querySelector(`#${this._jsWindowID} .windowed-list`); diff --git a/chrome/content/zotero/libraryTree.js b/chrome/content/zotero/libraryTree.js index a3a7783335..50b4c7f697 100644 --- a/chrome/content/zotero/libraryTree.js +++ b/chrome/content/zotero/libraryTree.js @@ -252,16 +252,6 @@ var LibraryTree = class LibraryTree extends React.Component { this.tree && this.tree.scrollToRow(index); } - updateHeight = () => { - this.forceUpdate(() => { - if (this.tree) { - this.tree.rerender(); - } - }); - }; - - updateHeightDebounced = Zotero.Utilities.debounce(this.updateHeight, 200); - updateFontSize() { this.tree.updateFontSize(); } diff --git a/chrome/content/zotero/zoteroPane.js b/chrome/content/zotero/zoteroPane.js index d14c5b4ddb..ab9c09f954 100644 --- a/chrome/content/zotero/zoteroPane.js +++ b/chrome/content/zotero/zoteroPane.js @@ -1675,9 +1675,6 @@ var ZoteroPane = new function () { } this.tagSelector.handleResize(); } - if (this.collectionsView) { - this.collectionsView.updateHeightDebounced(); - } }, 100); @@ -1949,12 +1946,8 @@ var ZoteroPane = new function () { document.getElementById('zotero-tb-search').updateMode(); let refreshPromise; - if (state === 'open' && oldState === 'collapsed' - || state === 'collapsed' && oldState === 'open') { - // State change only causes visual refresh - update the tree height - this.itemsView.updateHeight(); - } - else { + if (!(state === 'open' && oldState === 'collapsed' + || state === 'collapsed' && oldState === 'open')) { // State change changes displayed items - refresh the tree refreshPromise = this._refreshAdvancedSearchPane(); } @@ -7199,11 +7192,6 @@ var ZoteroPane = new function () { } this.updateLayoutConstraints(); - if (ZoteroPane.itemsView) { - // Need to immediately rerender the items here without any debouncing - // since tree height will have changed - ZoteroPane.itemsView.updateHeight(); - } ZoteroContextPane.update(); Zotero_Tabs.updateSidebarLayout(); }; @@ -7387,9 +7375,6 @@ var ZoteroPane = new function () { var collectionsPaneWidth = collectionsPane.getBoundingClientRect().width; tagSelector.style.maxWidth = collectionsPaneWidth + 'px'; - if (ZoteroPane.itemsView) { - ZoteroPane.itemsView.updateHeightDebounced(); - } this.handleTagSelectorResize(); diff --git a/resource/require.js b/resource/require.js index 343d5fe98e..d512cc3550 100644 --- a/resource/require.js +++ b/resource/require.js @@ -131,6 +131,7 @@ function ZoteroLoader({ clearInterval: win.clearInterval, requestAnimationFrame: win.requestAnimationFrame, cancelAnimationFrame: win.requestAnimationFrame, + ResizeObserver: win.ResizeObserver, }; for (const name in injectedGlobals) { this.loader.globals[name] = injectedGlobals[name];