Item/collection tree: Resize using ResizeObserver, not debounce (#5977)

This commit is contained in:
Abe Jellinek 2026-06-30 08:44:18 -04:00 • committed by GitHub
parent 9cffc1c7c2
commit f3328b02ee
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 6 additions and 32 deletions

View file

@ -1102,9 +1102,8 @@ class VirtualizedTable extends React.Component {
this._setXulTooltip(); this._setXulTooltip();
this._topDiv.style.setProperty("--first-column-extra-width", `${this.firstColumnExtraWidth}px`); this._topDiv.style.setProperty("--first-column-extra-width", `${this.firstColumnExtraWidth}px`);
window.addEventListener("resize", () => { this._resizeObserver = new ResizeObserver(() => this.rerender());
this._debouncedRerender(); this._resizeObserver.observe(this._jsWindow.targetElement);
});
if (this.props.stickySectionHeaders) { if (this.props.stickySectionHeaders) {
this._jsWindow.targetElement.addEventListener('scroll', this._updateStickySectionHeader, { passive: true }); this._jsWindow.targetElement.addEventListener('scroll', this._updateStickySectionHeader, { passive: true });
@ -1117,6 +1116,7 @@ class VirtualizedTable extends React.Component {
} }
componentWillUnmount() { componentWillUnmount() {
this._resizeObserver?.disconnect();
if (this.props.stickySectionHeaders && this._jsWindow) { if (this.props.stickySectionHeaders && this._jsWindow) {
this._jsWindow.targetElement.removeEventListener('scroll', this._updateStickySectionHeader); this._jsWindow.targetElement.removeEventListener('scroll', this._updateStickySectionHeader);
} }
@ -1589,8 +1589,6 @@ class VirtualizedTable extends React.Component {
return parseFloat(height.split('px')[0]); return parseFloat(height.split('px')[0]);
} }
_debouncedRerender = Zotero.Utilities.debounce(this.rerender, 200);
_updateWidth() { _updateWidth() {
if (!this.props.showHeader) return; if (!this.props.showHeader) return;
const jsWindow = document.querySelector(`#${this._jsWindowID} .windowed-list`); const jsWindow = document.querySelector(`#${this._jsWindowID} .windowed-list`);

View file

@ -252,16 +252,6 @@ var LibraryTree = class LibraryTree extends React.Component {
this.tree && this.tree.scrollToRow(index); this.tree && this.tree.scrollToRow(index);
} }
updateHeight = () => {
this.forceUpdate(() => {
if (this.tree) {
this.tree.rerender();
}
});
};
updateHeightDebounced = Zotero.Utilities.debounce(this.updateHeight, 200);
updateFontSize() { updateFontSize() {
this.tree.updateFontSize(); this.tree.updateFontSize();
} }

View file

@ -1675,9 +1675,6 @@ var ZoteroPane = new function () {
} }
this.tagSelector.handleResize(); this.tagSelector.handleResize();
} }
if (this.collectionsView) {
this.collectionsView.updateHeightDebounced();
}
}, 100); }, 100);
@ -1949,12 +1946,8 @@ var ZoteroPane = new function () {
document.getElementById('zotero-tb-search').updateMode(); document.getElementById('zotero-tb-search').updateMode();
let refreshPromise; let refreshPromise;
if (state === 'open' && oldState === 'collapsed' if (!(state === 'open' && oldState === 'collapsed'
|| state === 'collapsed' && oldState === 'open') { || state === 'collapsed' && oldState === 'open')) {
// State change only causes visual refresh - update the tree height
this.itemsView.updateHeight();
}
else {
// State change changes displayed items - refresh the tree // State change changes displayed items - refresh the tree
refreshPromise = this._refreshAdvancedSearchPane(); refreshPromise = this._refreshAdvancedSearchPane();
} }
@ -7199,11 +7192,6 @@ var ZoteroPane = new function () {
} }
this.updateLayoutConstraints(); 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(); ZoteroContextPane.update();
Zotero_Tabs.updateSidebarLayout(); Zotero_Tabs.updateSidebarLayout();
}; };
@ -7387,9 +7375,6 @@ var ZoteroPane = new function () {
var collectionsPaneWidth = collectionsPane.getBoundingClientRect().width; var collectionsPaneWidth = collectionsPane.getBoundingClientRect().width;
tagSelector.style.maxWidth = collectionsPaneWidth + 'px'; tagSelector.style.maxWidth = collectionsPaneWidth + 'px';
if (ZoteroPane.itemsView) {
ZoteroPane.itemsView.updateHeightDebounced();
}
this.handleTagSelectorResize(); this.handleTagSelectorResize();

View file

@ -131,6 +131,7 @@ function ZoteroLoader({
clearInterval: win.clearInterval, clearInterval: win.clearInterval,
requestAnimationFrame: win.requestAnimationFrame, requestAnimationFrame: win.requestAnimationFrame,
cancelAnimationFrame: win.requestAnimationFrame, cancelAnimationFrame: win.requestAnimationFrame,
ResizeObserver: win.ResizeObserver,
}; };
for (const name in injectedGlobals) { for (const name in injectedGlobals) {
this.loader.globals[name] = injectedGlobals[name]; this.loader.globals[name] = injectedGlobals[name];