nodes/Azornes-Comfyui-Model-Resolver
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

perf(missing-browser): optimize resize and rendering performance

Browse Source 
- Disable CSS transitions during splitter drag to prevent jank
- Apply content-visibility: auto to off-screen missing list and match rows
- Suppress redundant style.setProperty calls when split width is unchanged
- Reset applied split width state on cleanup
This commit is contained in:
Dariusz L
2026-06-21 20:04:52 +02:00
parent baabbb6027
commit 9cfa50e406
2 changed files with 36 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/css/resolver-main.css
+25
View File
@@ -511,6 +511,14 @@
pointer-events: none;
user-select: none;
}
.mr-missing-browser.is-resizing .mr-missing-list-row,
.mr-missing-browser.is-resizing .mr-match-row,
.mr-missing-browser.is-resizing .mr-search-results-table tr,
.mr-missing-browser.is-resizing .mr-btn,
.mr-missing-browser.is-resizing .mr-node-chip,
.mr-missing-browser.is-resizing .mr-category-chip {
transition: none !important;
}
.mr-missing-list-toolbar {
display: flex;
align-items: center;
@@ -617,6 +625,12 @@
text-align: left;
transition: background 0.14s ease, box-shadow 0.14s ease, border-color 0.14s ease;
}
@supports (content-visibility: auto) {
#model-resolver-modal .mr-missing-list-row {
content-visibility: auto;
contain-intrinsic-size: auto 64px;
}
}
#model-resolver-modal .mr-missing-list-row:hover {
background: rgba(255,255,255,0.032);
}
@@ -5628,6 +5642,17 @@
border-color: rgba(255,255,255,0.065);
border-radius: 7px;
}
@supports (content-visibility: auto) {
#model-resolver-modal .mr-missing-detail-pane .mr-match-row {
content-visibility: auto;
contain-intrinsic-size: auto 42px;
}
#model-resolver-modal .mr-missing-detail-pane .mr-search-results-table-wrap {
content-visibility: auto;
contain-intrinsic-size: auto 220px;
}
}
#model-resolver-modal .mr-missing-detail-pane .mr-match-row.mr-best-match {
background: linear-gradient(90deg, rgba(114,211,138,0.135) 0%, rgba(114,211,138,0.07) 55%, rgba(114,211,138,0.035) 100%);
border-color: rgba(114,211,138,0.26);
web/resolver/views/missing_browser_methods.js
+11 -3
View File
@@ -482,6 +482,7 @@ export const missingBrowserMethods = {
width: detailPane.getBoundingClientRect().width,
bounds: this.getMissingBrowserSplitBounds(browser)
};
this._appliedMissingBrowserSplitWidth = Math.round(this._missingBrowserSplitStart.width);
this._lastMissingBrowserSplitApply = 0;
this._missingBrowserSplitBrowser = browser;
this._missingBrowserSplitDetailPane = detailPane;
@@ -509,8 +510,11 @@ export const missingBrowserMethods = {
if (this._missingBrowserSplitFrame) return;
this._missingBrowserSplitFrame = requestAnimationFrame(() => {
this._missingBrowserSplitFrame = null;
if (!this._missingBrowserSplitDragging || !this._missingBrowserSplitDetailPane || !this._pendingMissingBrowserSplitWidth) return;
this._missingBrowserSplitDetailPane.style.setProperty('--mr-missing-detail-track', `${this._pendingMissingBrowserSplitWidth}px`);
const nextWidth = this._pendingMissingBrowserSplitWidth;
if (!this._missingBrowserSplitDragging || !this._missingBrowserSplitDetailPane || !nextWidth) return;
if (nextWidth === this._appliedMissingBrowserSplitWidth) return;
this._missingBrowserSplitDetailPane.style.setProperty('--mr-missing-detail-track', `${nextWidth}px`);
this._appliedMissingBrowserSplitWidth = nextWidth;
});
},
@@ -524,7 +528,10 @@ export const missingBrowserMethods = {
this._missingBrowserSplitFrame = null;
}
if (this._missingBrowserSplitDetailPane && this._pendingMissingBrowserSplitWidth) {
this._missingBrowserSplitDetailPane.style.setProperty('--mr-missing-detail-track', `${this._pendingMissingBrowserSplitWidth}px`);
if (this._pendingMissingBrowserSplitWidth !== this._appliedMissingBrowserSplitWidth) {
this._missingBrowserSplitDetailPane.style.setProperty('--mr-missing-detail-track', `${this._pendingMissingBrowserSplitWidth}px`);
this._appliedMissingBrowserSplitWidth = this._pendingMissingBrowserSplitWidth;
}
try {
localStorage.setItem(this.missingBrowserSplitStorageKey, String(this._pendingMissingBrowserSplitWidth));
} catch (e) {}
@@ -534,6 +541,7 @@ export const missingBrowserMethods = {
this._missingBrowserSplitDetailPane = null;
this._missingBrowserSplitStart = null;
this._pendingMissingBrowserSplitWidth = null;
this._appliedMissingBrowserSplitWidth = null;
this._lastMissingBrowserSplitApply = 0;
try {
document.body.style.userSelect = this._missingBrowserPrevUserSelect || '';