dsh-width-tiers 1.0.1 → 1.0.3

package/lib/client.js

@@ -41,8 +41,14 @@ window.__ModuleLoader__.load({
 		 */
 		const KEY = "dsh.widthTier";
 		const OLD_KEY = "dsh.wide";
-		const SELF_HEAL_MS = 1000;
 		const READY_TIMEOUT_MS = 30000;
+		/* Self-heal cadence: DOM-driven (MutationObserver scheduling on the
+		 * next animation frame — before paint, so the width never flashes
+		 * default) with a low-frequency fallback and backoff retries while
+		 * the width root is missing (conversation-switch remount). */
+		const ROOT_RETRY_MIN_MS = 200;
+		const ROOT_RETRY_MAX_MS = 2000;
+		const FALLBACK_HEAL_MS = 2000;
 
 		/** Dictionary namespace owned by this plugin. */
 		const NS = "width-tiers";
@@ -91,13 +97,16 @@ window.__ModuleLoader__.load({
 		//#region lib/types/client/styles.js
 		/** Button + menu styles (theme variables, light/dark aware). */
 		const css = [
-			"#dsh-wide-toggle{position:fixed;right:20px;bottom:76px;z-index:999;display:flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;border:1px solid var(--dsw-alias-border-l2);border-radius:50%;background:var(--dsw-alias-button-floating-fill);color:var(--dsw-alias-label-secondary);box-shadow:0 2px 8px rgba(0,0,0,.18);cursor:pointer;opacity:.72;transition:opacity .2s ease,transform .2s ease,background .2s ease,color .2s ease}",
-			"#dsh-wide-toggle:hover{opacity:1;transform:scale(1.08)}",
-			"#dsh-wide-toggle:focus-visible{outline:2px solid var(--dsw-alias-state-business-primary);outline-offset:2px}",
+			"#dsh-wide-toggle{position:fixed;right:10px;bottom:216px;z-index:999;display:flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;border:1px solid var(--dsw-alias-border-l2);border-radius:50%;overflow:hidden;background:var(--dsw-alias-button-floating-fill);color:var(--dsw-alias-label-secondary);box-shadow:0 2px 8px rgba(0,0,0,.18);cursor:pointer;opacity:.72;transition:opacity .2s ease,width .2s ease,border-radius .2s ease,background .2s ease,color .2s ease}",
+			"#dsh-wide-toggle::after{content:'';position:fixed;right:10px;bottom:216px;width:36px;height:36px;pointer-events:auto}",
+			"#dsh-wide-toggle:hover{opacity:1}",
+			"#dsh-wide-toggle:focus-visible{outline:2px solid var(--dsw-alias-state-business-primary);outline-offset:2px;width:36px;border-radius:50%}",
+			"#dsh-wide-toggle:not(:hover):not(:focus-visible){width:10px;border-radius:6px}",
+			"#dsh-wide-toggle:not(:hover):not(:focus-visible) svg rect{width:6px;x:5px}",
 			"#dsh-wide-toggle.active{background:var(--dsw-alias-state-business-primary);border-color:transparent;color:var(--dsw-static-neutral-00);opacity:1}",
 			"#dsh-wide-toggle.pulse{animation:dsh-wide-pulse .65s ease-out}",
 			"@keyframes dsh-wide-pulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--dsw-alias-state-business-primary) 60%,transparent)}100%{box-shadow:0 0 0 14px transparent}}",
-			"#dsh-width-menu{position:fixed;right:20px;bottom:124px;z-index:1000;min-width:196px;padding:6px;border:1px solid var(--dsw-alias-border-l2);border-radius:12px;background:var(--dsw-specific-menu);box-shadow:0 8px 28px rgba(0,0,0,.24);display:flex;flex-direction:column;gap:2px}",
+			"#dsh-width-menu{position:fixed;right:20px;bottom:264px;z-index:1000;min-width:196px;padding:6px;border:1px solid var(--dsw-alias-border-l2);border-radius:12px;background:var(--dsw-specific-menu);box-shadow:0 8px 28px rgba(0,0,0,.24);display:flex;flex-direction:column;gap:2px}",
 			"#dsh-width-menu[hidden]{display:none}",
 			"#dsh-width-menu button{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 12px;border:none;border-radius:8px;background:transparent;color:var(--dsw-alias-label-primary);font:inherit;font-size:13px;line-height:18px;text-align:left;cursor:pointer}",
 			"#dsh-width-menu button:hover{background:var(--dsw-alias-interactive-bg-hover)}",
@@ -174,25 +183,62 @@ window.__ModuleLoader__.load({
 
 				/* Locate the element that defines --dsh-chat-content-width at
 				 * runtime (first match wins; only one element declares it).
-				 * Cached; re-scanned whenever the cached node is gone. */
+				 * Cached; the app remounts the chat tree on conversation switch,
+				 * so re-location first walks the recorded child-index path from
+				 * <body> (React keeps the tree shape — O(depth), one style
+				 * read) and only falls back to a full scan. */
 				let widthRoot = null;
+				let widthPath = null;
 
-				function findWidthRoot() {
-					if (widthRoot !== null && document.contains(widthRoot)) return widthRoot;
-					widthRoot = null;
+				function hasWidthVar(el) {
+					return getComputedStyle(el)
+						.getPropertyValue("--dsh-chat-content-width")
+						.trim() !== "";
+				}
+
+				function recordWidthPath(el) {
+					const path = [];
+					let node = el;
+					while (node && node !== document.body) {
+						const parent = node.parentNode;
+						if (!parent || !parent.children) break;
+						path.unshift(Array.prototype.indexOf.call(parent.children, node));
+						node = parent;
+					}
+					widthPath = path.length > 0 ? path : null;
+				}
+
+				function scanWidthRoot() {
 					const all = document.querySelectorAll("[class]");
 					for (let i = 0; i < all.length; i++) {
-						const v = getComputedStyle(all[i])
-							.getPropertyValue("--dsh-chat-content-width")
-							.trim();
-						if (v) {
+						if (hasWidthVar(all[i])) {
 							widthRoot = all[i];
+							recordWidthPath(widthRoot);
 							return widthRoot;
 						}
 					}
+					widthRoot = null;
+					widthPath = null;
 					return null;
 				}
 
+				function findWidthRoot(allowScan) {
+					if (widthRoot !== null && document.contains(widthRoot)) return widthRoot;
+					if (widthPath !== null) {
+						let el = document.body;
+						for (let i = 0; i < widthPath.length; i++) {
+							el = el.children[widthPath[i]];
+							if (!el) break;
+						}
+						if (el && el !== widthRoot && document.contains(el) && hasWidthVar(el)) {
+							widthRoot = el;
+							return widthRoot;
+						}
+					}
+					if (allowScan === false) return null;
+					return scanWidthRoot();
+				}
+
 				function tierWidth(tier) {
 					switch (tier) {
 						case "medium": return "960px";
@@ -367,6 +413,7 @@ window.__ModuleLoader__.load({
 					syncButton();
 					const saved = getSavedTier();
 					if (saved !== "standard") applyTier(saved);
+					startHealing();
 				}
 
 				const readyTimer = setInterval(attach, 300);
@@ -378,20 +425,107 @@ window.__ModuleLoader__.load({
 
 				/* ---- self-heal: keep the details panel closed for non-standard
 				 * tiers. The sidebar is never managed here — the user may expand
-				 * it any time. ---- */
-				const healTimer = setInterval(() => {
+				 * it any time. Driven by DOM mutations, scheduled on the next
+				 * animation frame (before the browser paints) instead of a fixed
+				 * hot loop: conversation switches remount the chat tree, and the
+				 * width override must land on the fresh root before its first
+				 * paint — otherwise the default width flashes for a frame.
+				 * While the new root has not appeared yet (mid-remount), full
+				 * scans are owned by a backoff retry; mutation-driven heals only
+				 * try the cheap path walk so DOM churn cannot storm. ---- */
+				let rootMissing = false;
+				let rootRetryDelay = ROOT_RETRY_MIN_MS;
+				let rootRetryTimer = null;
+				let healFrame = null;
+				let observer = null;
+				let fallbackTimer = null;
+
+				const scheduleFrame = typeof requestAnimationFrame === "function"
+					? (cb) => { healFrame = requestAnimationFrame(cb); }
+					: (cb) => { healFrame = window.setTimeout(cb, 0); };
+				const cancelFrame = typeof cancelAnimationFrame === "function"
+					? (id) => cancelAnimationFrame(id)
+					: (id) => window.clearTimeout(id);
+
+				function scheduleRootRetry() {
+					if (rootRetryTimer !== null) return;
+					rootRetryTimer = window.setTimeout(() => {
+						rootRetryTimer = null;
+						const tier = currentTier();
+						if (tier === "standard") return;
+						const prev = widthRoot;
+						const root = findWidthRoot();
+						if (root === null) {
+							rootRetryDelay = Math.min(rootRetryDelay * 2, ROOT_RETRY_MAX_MS);
+							scheduleRootRetry();
+						} else {
+							rootMissing = false;
+							rootRetryDelay = ROOT_RETRY_MIN_MS;
+							if (root !== prev) applyContentWidth(tier);
+						}
+					}, rootRetryDelay);
+				}
+
+				function heal(fromObserver) {
 					const tier = currentTier();
 					if (tier === "standard") return;
 					closeDetails();
-					if (widthRoot !== null && !document.contains(widthRoot)) findWidthRoot();
-				}, SELF_HEAL_MS);
+					const prev = widthRoot;
+					let root;
+					if (rootMissing) {
+						/* Mid-remount: a mutation-driven heal only walks the
+						 * recorded path (O(depth)) — the backoff retry owns
+						 * full scans until the new root exists. */
+						root = fromObserver ? findWidthRoot(false) : findWidthRoot();
+					} else {
+						root = findWidthRoot();
+					}
+					if (root === null) {
+						if (!rootMissing) {
+							rootMissing = true;
+							rootRetryDelay = ROOT_RETRY_MIN_MS;
+							scheduleRootRetry();
+						}
+						return;
+					}
+					if (rootMissing) {
+						rootMissing = false;
+						rootRetryDelay = ROOT_RETRY_MIN_MS;
+					}
+					if (root !== prev) applyContentWidth(tier);
+				}
+
+				function startHealing() {
+					if (typeof MutationObserver !== "undefined") {
+						observer = new MutationObserver(() => {
+							if (healFrame !== null) return;
+							scheduleFrame(() => {
+								healFrame = null;
+								heal(true);
+							});
+						});
+						observer.observe(document.body, {
+							subtree: true,
+							childList: true,
+							attributes: true,
+							attributeFilter: ["data-details-collapsed", "data-sidebar-collapsed"]
+						});
+					}
+					/* Low-frequency fallback so self-heal still runs if the
+					 * observer misses something — cheap: no scan while the
+					 * cached root is alive. */
+					fallbackTimer = setInterval(() => heal(false), FALLBACK_HEAL_MS);
+				}
 
 				/* ---- disposer ---- */
 				return () => {
 					unsubscribeLocale();
 					clearInterval(readyTimer);
-					clearInterval(healTimer);
+					clearInterval(fallbackTimer);
 					clearTimeout(timeout);
+					clearTimeout(rootRetryTimer);
+					if (healFrame !== null) cancelFrame(healFrame);
+					if (observer !== null) observer.disconnect();
 					document.removeEventListener("click", onDocClick);
 					document.removeEventListener("keydown", onDocKey);
 					if (btn.parentNode) btn.parentNode.removeChild(btn);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-width-tiers",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "description": "DSH Web client plugin: chat content width tiers (standard / medium / wide / ultra / full) with a floating picker button. Frees wide tables from the app's hard-coded 748px content cap. UI copy follows the app language (zh / en).",
   "license": "MIT",
   "author": "aaronlei",