From 7ceb591cbf06a60dbcd566898e181c6f6d95beec Mon Sep 17 00:00:00 2001
From: DemonGatanjieu <207458273+DemonGatanjieu@users.noreply.github.com>
Date: Thu, 15 Oct 2026 12:52:49 +0800
Subject: [PATCH] Fix the list column's :has() rule slowing every style change
 (#22)

The rule that hides the list column while a workspace is open matched
the workspace panel's style attribute inside :has(). Chrome then treats
every inline-style write on the page as a possible change and restyles
the whole page, so extensions that move their buttons every frame took
a large workflow's canvas down to 2-3 fps. The container now gets an
anomalous-workspace-open class from a MutationObserver on the panel's
style (every module opening a workspace sets its display), and the CSS
keys off that class.

Found, measured and fix proposed by Lindemellis in issue #22.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 CHANGELOG.md                 | 5 +++++
 web/modules/ui_sidebar.js    | 6 ++++++
 web/styles.css               | 2 +-
 web/styles/15-shell-rail.css | 2 +-
 4 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2d58896..9204ed1 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,10 @@
 # 📈 Anomalous Model Browser Changelog
 
+## v1.58.3 Beta (Fix: canvas speed with other extensions) — unreleased
+
+### 🐢 The canvas stays smooth with other extensions (画布不再被其他插件拖慢)
+- One style rule of the browser (the list column stepping aside while a workspace is open) made every inline-style change on the page, by any extension and also while the browser is closed, restyle the whole page. Extensions that move their buttons on every canvas frame (ComfyUI-Prompt-Assistant, for one) then brought a large workflow's canvas down to 2–3 fps. The list column now follows a class on the window instead. Thanks to **@Lindemellis** for finding it, measuring it and proposing the fix ([#22](https://github.com/DemonGatanjieu/Anomalous_Model_Browser/issues/22)).
+
 ## v1.58.2 Beta (Small fixes: Esc closes, Show in folder, insert a picture as a node) — 2026-10-13
 
 ### 💬 From a Bilibili comment (来自 B 站评论)
diff --git a/web/modules/ui_sidebar.js b/web/modules/ui_sidebar.js
index fa4cd32..d0e4bfd 100644
--- a/web/modules/ui_sidebar.js
+++ b/web/modules/ui_sidebar.js
@@ -221,6 +221,12 @@ export function createDOM() {
         content.append(header, this.grid, this.detailPanel, this.galleryPanel, this.homePanel, this.activityPanel, this.scanPanel, this.settingsPanel, this.doctorPanel,
             this.assistantPanel, this.audioStudioPanel, this.scriptPanel, this.audioGalleryPanel);
         container.append(rail.root, this.sidebarWrapper, content, this.nbPanel);
+        // The list column steps aside while a workspace is open. Several modules open it by
+        // setting its display, so the container gets a class for it; CSS matching the style
+        // attribute inside :has() makes every inline-style write on the page recalc all
+        // styles (issue #22, canvas at 2-3 fps).
+        const syncWorkspaceOpen = () => container.classList.toggle('anomalous-workspace-open', this.nbPanel.style.display === 'flex');
+        new MutationObserver(syncWorkspaceOpen).observe(this.nbPanel, { attributes: true, attributeFilter: ['style'] });
         this.modal.appendChild(container);
 
         installShellNavigation(this, { container, rail, listToggle, title: pageTitle });
diff --git a/web/styles.css b/web/styles.css
index 2b28923..a60bc92 100644
--- a/web/styles.css
+++ b/web/styles.css
@@ -13,7 +13,7 @@
 @import url("./styles/12-tts-setup.css?v=20261002-theme-1");
 @import url("./styles/13-script-director.css?v=20261002-voiceover-2");
 @import url("./styles/14-version-manager.css?v=20261002-theme-1");
-@import url("./styles/15-shell-rail.css?v=20261012-remote");
+@import url("./styles/15-shell-rail.css?v=20261015-workspace");
 @import url("./styles/16-activity.css?v=20261002-theme-1");
 @import url("./styles/17-model-types.css?v=20261002-theme-1");
 @import url("./styles/18-scan-page.css?v=20261003-folders-1");
diff --git a/web/styles/15-shell-rail.css b/web/styles/15-shell-rail.css
index 761ffb1..aec1780 100644
--- a/web/styles/15-shell-rail.css
+++ b/web/styles/15-shell-rail.css
@@ -139,7 +139,7 @@
 }
 
 #anomalous-container.anomalous-has-rail.anomalous-sidebar-closed #anomalous-sidebar-wrapper,
-#anomalous-container.anomalous-has-rail:has(> .anomalous-nb-modal[style*="display: flex"]) #anomalous-sidebar-wrapper {
+#anomalous-container.anomalous-has-rail.anomalous-workspace-open #anomalous-sidebar-wrapper {
     width: 0;
     margin-right: 0;
     margin-left: 0;