@iasiv5/dsh-quota-watch 0.0.16 → 0.0.18

package/lib/client.js

@@ -166,7 +166,7 @@ var STYLE_TEXT = `
 .dqw-stale-mark { flex: none; font-size: 9px; line-height: 14px; color: var(--dsw-alias-label-warning, #b46900); cursor: help; }
 .dqw-errtext { font-size: 10px; line-height: 14px; opacity: .7; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .dqw-rail-trigger { display: none; flex: none; align-items: center; justify-content: center; width: 36px; height: 36px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--dsw-alias-label-primary, inherit); cursor: pointer; transition: background-color .12s, color .12s; }
-.dqw-rail-trigger svg { display: block; width: 22px; height: 22px; }
+.dqw-rail-trigger svg { display: block; width: 16px; height: 16px; }
 .dqw-rail-trigger:hover:not(:disabled) { background: var(--dsw-alias-interactive-bg-hover, rgba(128,128,128,.12)); color: var(--dsw-alias-label-primary, inherit); }
 .dqw-rail-trigger:active:not(:disabled), .dqw-rail-trigger[aria-expanded="true"] { background: var(--dsw-alias-interactive-bg-active, rgba(128,128,128,.18)); color: var(--dsw-alias-label-primary, inherit); }
 .dqw-rail-trigger:focus-visible { outline: 2px solid var(--dsw-alias-brand-primary, #5b8def); outline-offset: 2px; }
@@ -252,11 +252,11 @@ function quotaIcon(doc) {
   const namespace = "http://www.w3.org/2000/svg";
   const svg = doc.createElementNS(namespace, "svg");
   svg.setAttribute("viewBox", "0 0 24 24");
-  svg.setAttribute("width", "22");
-  svg.setAttribute("height", "22");
+  svg.setAttribute("width", "16");
+  svg.setAttribute("height", "16");
   svg.setAttribute("fill", "none");
   svg.setAttribute("stroke", "currentColor");
-  svg.setAttribute("stroke-width", "1.7");
+  svg.setAttribute("stroke-width", "2");
   svg.setAttribute("stroke-linecap", "round");
   svg.setAttribute("stroke-linejoin", "round");
   svg.setAttribute("aria-hidden", "true");
@@ -264,15 +264,15 @@ function quotaIcon(doc) {
   const dial = doc.createElementNS(namespace, "circle");
   dial.setAttribute("cx", "12");
   dial.setAttribute("cy", "12");
-  dial.setAttribute("r", "9");
+  dial.setAttribute("r", "10");
   const ticks = doc.createElementNS(namespace, "path");
-  ticks.setAttribute("d", "M12 2.7v2.1M12 19.2v2.1M2.7 12h2.1M19.2 12h2.1M5.43 5.43l1.49 1.49M17.08 17.08l1.49 1.49M18.57 5.43l-1.49 1.49M6.92 17.08l-1.49 1.49");
+  ticks.setAttribute("d", "M12 2.4v1.6M12 20v1.6M2.4 12h1.6M20 12h1.6M5.2 5.2l1.1 1.1M18.8 18.8l-1.1-1.1M18.8 5.2l-1.1 1.1M5.2 18.8l1.1-1.1");
   const needle = doc.createElementNS(namespace, "path");
   needle.setAttribute("d", "M12 12l4.5-4");
   const hub = doc.createElementNS(namespace, "circle");
   hub.setAttribute("cx", "12");
   hub.setAttribute("cy", "12");
-  hub.setAttribute("r", "1.2");
+  hub.setAttribute("r", "1.4");
   hub.setAttribute("fill", "currentColor");
   hub.setAttribute("stroke", "none");
   svg.append(dial, ticks, needle, hub);
@@ -363,7 +363,7 @@ function mountQuotaCard({
   container.dataset.dshQuotaWatchCard = "";
   container.dataset.dshPlugin = "quota-watch";
   container.dataset.dshPart = "sidebar-card";
-  const style = text(doc, "style", "", STYLE_TEXT);
+  let style = text(doc, "style", "", STYLE_TEXT);
   const card = doc.createElement("section");
   card.className = "dqw-card";
   card.setAttribute("aria-label", copy.title);
@@ -383,6 +383,25 @@ function mountQuotaCard({
   body.append(lastUpdated);
   card.append(body);
   container.append(style, card, railTrigger);
+  const supportsAdopted = Array.isArray(doc.adoptedStyleSheets) && typeof win.CSSStyleSheet === "function";
+  let adoptedSheet = null;
+  if (supportsAdopted) {
+    try {
+      adoptedSheet = new win.CSSStyleSheet();
+      adoptedSheet.replaceSync(STYLE_TEXT);
+      doc.adoptedStyleSheets = [...doc.adoptedStyleSheets, adoptedSheet];
+    } catch {
+      adoptedSheet = null;
+    }
+  }
+  let styleAlive = () => doc.contains(style) && style.sheet !== null && style.sheet.cssRules.length > 0;
+  let ensureStyleAlive = () => {
+    if (styleAlive()) return;
+    const fresh = text(doc, "style", "", STYLE_TEXT);
+    if (doc.contains(style)) style.replaceWith(fresh);
+    else container.prepend(fresh);
+    style = fresh;
+  };
   const pop = doc.createElement("div");
   pop.className = "dqw-pop";
   pop.id = "dqw-quota-watch-pop";
@@ -659,6 +678,7 @@ function mountQuotaCard({
     positionPop();
   };
   const renderAll = () => {
+    ensureStyleAlive();
     const providers = snapshot?.providers ?? [];
     const glm = providers.find((provider) => provider?.key === "glm");
     const copilot = providers.find((provider) => provider?.key === "copilot");
@@ -840,6 +860,9 @@ function mountQuotaCard({
     pop.removeEventListener("click", onPopClick);
     container.remove();
     pop.remove();
+    if (adoptedSheet !== null && Array.isArray(doc.adoptedStyleSheets)) {
+      doc.adoptedStyleSheets = doc.adoptedStyleSheets.filter((sheet) => sheet !== adoptedSheet);
+    }
   };
 }
 function apply(ctx) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iasiv5/dsh-quota-watch",
-  "version": "0.0.16",
+  "version": "0.0.18",
   "description": "DSH Web sidebar monitor for GLM Coding Plan quotas and GitHub Copilot credits",
   "type": "module",
   "main": "./src/host.mjs",

package/src/client.mjs

@@ -88,7 +88,7 @@ const STYLE_TEXT = `
 .dqw-stale-mark { flex: none; font-size: 9px; line-height: 14px; color: var(--dsw-alias-label-warning, #b46900); cursor: help; }
 .dqw-errtext { font-size: 10px; line-height: 14px; opacity: .7; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .dqw-rail-trigger { display: none; flex: none; align-items: center; justify-content: center; width: 36px; height: 36px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--dsw-alias-label-primary, inherit); cursor: pointer; transition: background-color .12s, color .12s; }
-.dqw-rail-trigger svg { display: block; width: 22px; height: 22px; }
+.dqw-rail-trigger svg { display: block; width: 16px; height: 16px; }
 .dqw-rail-trigger:hover:not(:disabled) { background: var(--dsw-alias-interactive-bg-hover, rgba(128,128,128,.12)); color: var(--dsw-alias-label-primary, inherit); }
 .dqw-rail-trigger:active:not(:disabled), .dqw-rail-trigger[aria-expanded="true"] { background: var(--dsw-alias-interactive-bg-active, rgba(128,128,128,.18)); color: var(--dsw-alias-label-primary, inherit); }
 .dqw-rail-trigger:focus-visible { outline: 2px solid var(--dsw-alias-brand-primary, #5b8def); outline-offset: 2px; }
@@ -181,11 +181,11 @@ function quotaIcon(doc) {
   const namespace = 'http://www.w3.org/2000/svg'
   const svg = doc.createElementNS(namespace, 'svg')
   svg.setAttribute('viewBox', '0 0 24 24')
-  svg.setAttribute('width', '22')
-  svg.setAttribute('height', '22')
+  svg.setAttribute('width', '16')
+  svg.setAttribute('height', '16')
   svg.setAttribute('fill', 'none')
   svg.setAttribute('stroke', 'currentColor')
-  svg.setAttribute('stroke-width', '1.7')
+  svg.setAttribute('stroke-width', '2')
   svg.setAttribute('stroke-linecap', 'round')
   svg.setAttribute('stroke-linejoin', 'round')
   svg.setAttribute('aria-hidden', 'true')
@@ -193,15 +193,15 @@ function quotaIcon(doc) {
   const dial = doc.createElementNS(namespace, 'circle')
   dial.setAttribute('cx', '12')
   dial.setAttribute('cy', '12')
-  dial.setAttribute('r', '9')
+  dial.setAttribute('r', '10')
   const ticks = doc.createElementNS(namespace, 'path')
-  ticks.setAttribute('d', 'M12 2.7v2.1M12 19.2v2.1M2.7 12h2.1M19.2 12h2.1M5.43 5.43l1.49 1.49M17.08 17.08l1.49 1.49M18.57 5.43l-1.49 1.49M6.92 17.08l-1.49 1.49')
+  ticks.setAttribute('d', 'M12 2.4v1.6M12 20v1.6M2.4 12h1.6M20 12h1.6M5.2 5.2l1.1 1.1M18.8 18.8l-1.1-1.1M18.8 5.2l-1.1 1.1M5.2 18.8l1.1-1.1')
   const needle = doc.createElementNS(namespace, 'path')
   needle.setAttribute('d', 'M12 12l4.5-4')
   const hub = doc.createElementNS(namespace, 'circle')
   hub.setAttribute('cx', '12')
   hub.setAttribute('cy', '12')
-  hub.setAttribute('r', '1.2')
+  hub.setAttribute('r', '1.4')
   hub.setAttribute('fill', 'currentColor')
   hub.setAttribute('stroke', 'none')
   svg.append(dial, ticks, needle, hub)
@@ -304,7 +304,7 @@ export function mountQuotaCard({
   container.dataset.dshQuotaWatchCard = ''
   container.dataset.dshPlugin = 'quota-watch'
   container.dataset.dshPart = 'sidebar-card'
-  const style = text(doc, 'style', '', STYLE_TEXT)
+  let style = text(doc, 'style', '', STYLE_TEXT)
   const card = doc.createElement('section')
   card.className = 'dqw-card'
   card.setAttribute('aria-label', copy.title)
@@ -325,6 +325,34 @@ export function mountQuotaCard({
   body.append(lastUpdated)
   card.append(body)
   container.append(style, card, railTrigger)
+  // The card carries its stylesheet in a <style> tag next to its DOM. External
+  // actors (browser extensions, aggressive theming) have been observed to strip
+  // or neuter foreign style tags while the page's styles churn (theme switches,
+  // plugin reloads, service restarts); the card then renders unstyled until a
+  // full page refresh. Two defenses:
+  //   1. mirror the rules into a constructable stylesheet (adoptedStyleSheets),
+  //      which those actors do not touch;
+  //   2. re-create the tag on every render pass that finds it dead or missing.
+  const supportsAdopted =
+    Array.isArray(doc.adoptedStyleSheets) && typeof win.CSSStyleSheet === 'function'
+  let adoptedSheet = null
+  if (supportsAdopted) {
+    try {
+      adoptedSheet = new win.CSSStyleSheet()
+      adoptedSheet.replaceSync(STYLE_TEXT)
+      doc.adoptedStyleSheets = [...doc.adoptedStyleSheets, adoptedSheet]
+    } catch {
+      adoptedSheet = null
+    }
+  }
+  let styleAlive = () => doc.contains(style) && style.sheet !== null && style.sheet.cssRules.length > 0
+  let ensureStyleAlive = () => {
+    if (styleAlive()) return
+    const fresh = text(doc, 'style', '', STYLE_TEXT)
+    if (doc.contains(style)) style.replaceWith(fresh)
+    else container.prepend(fresh)
+    style = fresh
+  }
   // Details and collapsed-rail summaries open in a viewport-level panel.
   const pop = doc.createElement('div')
   pop.className = 'dqw-pop'
@@ -620,6 +648,7 @@ export function mountQuotaCard({
   }
 
   const renderAll = () => {
+    ensureStyleAlive()
     const providers = snapshot?.providers ?? []
     const glm = providers.find((provider) => provider?.key === 'glm')
     const copilot = providers.find((provider) => provider?.key === 'copilot')
@@ -806,6 +835,9 @@ export function mountQuotaCard({
     pop.removeEventListener('click', onPopClick)
     container.remove()
     pop.remove()
+    if (adoptedSheet !== null && Array.isArray(doc.adoptedStyleSheets)) {
+      doc.adoptedStyleSheets = doc.adoptedStyleSheets.filter((sheet) => sheet !== adoptedSheet)
+    }
   }
 }