@iasiv5/dsh-quota-watch 0.1.5 → 0.1.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/client.js +4 -83
- package/package.json +1 -1
- package/src/client.mjs +7 -63
package/lib/client.js
CHANGED
|
@@ -234,13 +234,6 @@ var STYLE_TEXT = `
|
|
|
234
234
|
.dqw-chev { font-size: 9px; line-height: 14px; opacity: .6; flex: none; width: 10px; text-align: center; }
|
|
235
235
|
.dqw-stale-mark { flex: none; font-size: 9px; line-height: 14px; color: var(--dsw-alias-label-warning, #b46900); cursor: help; }
|
|
236
236
|
.dqw-errtext { font-size: 10px; line-height: 14px; opacity: .7; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
237
|
-
.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; }
|
|
238
|
-
.dqw-rail-trigger svg { display: block; width: 16px; height: 16px; }
|
|
239
|
-
.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); }
|
|
240
|
-
.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); }
|
|
241
|
-
.dqw-rail-trigger:focus-visible { outline: 2px solid var(--dsw-alias-brand-primary, #5b8def); outline-offset: 2px; }
|
|
242
|
-
:host([data-dsh-quota-watch-sidebar-collapsed]) .dqw-card { display: none; }
|
|
243
|
-
:host([data-dsh-quota-watch-sidebar-collapsed]) .dqw-rail-trigger { display: inline-flex; }
|
|
244
237
|
@media print { :host { display: none !important; } }
|
|
245
238
|
`;
|
|
246
239
|
var FLOAT_STYLE_TEXT = `
|
|
@@ -353,36 +346,6 @@ function text(doc, tag, className, value) {
|
|
|
353
346
|
node.textContent = String(value ?? "");
|
|
354
347
|
return node;
|
|
355
348
|
}
|
|
356
|
-
function quotaIcon(doc) {
|
|
357
|
-
const namespace = "http://www.w3.org/2000/svg";
|
|
358
|
-
const svg = doc.createElementNS(namespace, "svg");
|
|
359
|
-
svg.setAttribute("viewBox", "0 0 24 24");
|
|
360
|
-
svg.setAttribute("width", "16");
|
|
361
|
-
svg.setAttribute("height", "16");
|
|
362
|
-
svg.setAttribute("fill", "none");
|
|
363
|
-
svg.setAttribute("stroke", "currentColor");
|
|
364
|
-
svg.setAttribute("stroke-width", "2");
|
|
365
|
-
svg.setAttribute("stroke-linecap", "round");
|
|
366
|
-
svg.setAttribute("stroke-linejoin", "round");
|
|
367
|
-
svg.setAttribute("aria-hidden", "true");
|
|
368
|
-
svg.setAttribute("focusable", "false");
|
|
369
|
-
const dial = doc.createElementNS(namespace, "circle");
|
|
370
|
-
dial.setAttribute("cx", "12");
|
|
371
|
-
dial.setAttribute("cy", "12");
|
|
372
|
-
dial.setAttribute("r", "10");
|
|
373
|
-
const ticks = doc.createElementNS(namespace, "path");
|
|
374
|
-
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");
|
|
375
|
-
const needle = doc.createElementNS(namespace, "path");
|
|
376
|
-
needle.setAttribute("d", "M12 12l4.5-4");
|
|
377
|
-
const hub = doc.createElementNS(namespace, "circle");
|
|
378
|
-
hub.setAttribute("cx", "12");
|
|
379
|
-
hub.setAttribute("cy", "12");
|
|
380
|
-
hub.setAttribute("r", "1.4");
|
|
381
|
-
hub.setAttribute("fill", "currentColor");
|
|
382
|
-
hub.setAttribute("stroke", "none");
|
|
383
|
-
svg.append(dial, ticks, needle, hub);
|
|
384
|
-
return svg;
|
|
385
|
-
}
|
|
386
349
|
function menuItem(doc, action, label) {
|
|
387
350
|
const item = doc.createElement("button");
|
|
388
351
|
item.type = "button";
|
|
@@ -489,16 +452,7 @@ function mountQuotaCard({
|
|
|
489
452
|
const lastUpdated = text(doc, "p", "dqw-meta", copy.loading);
|
|
490
453
|
lastUpdated.dataset.role = "updated";
|
|
491
454
|
body.append(lastUpdated);
|
|
492
|
-
|
|
493
|
-
railTrigger.type = "button";
|
|
494
|
-
railTrigger.className = "dqw-rail-trigger";
|
|
495
|
-
railTrigger.dataset.dshQuotaWatchRail = "";
|
|
496
|
-
railTrigger.title = copy.title;
|
|
497
|
-
railTrigger.setAttribute("aria-label", copy.title);
|
|
498
|
-
railTrigger.setAttribute("aria-haspopup", "dialog");
|
|
499
|
-
railTrigger.setAttribute("aria-expanded", "false");
|
|
500
|
-
railTrigger.append(quotaIcon(doc));
|
|
501
|
-
card.append(body, railTrigger);
|
|
455
|
+
card.append(body);
|
|
502
456
|
cardRoot.append(style, card);
|
|
503
457
|
const panel = doc.createElement("div");
|
|
504
458
|
panel.className = "dqw-panel";
|
|
@@ -831,7 +785,6 @@ function mountQuotaCard({
|
|
|
831
785
|
lastAnchor = null;
|
|
832
786
|
panelNav = false;
|
|
833
787
|
surface.setAttribute("aria-expanded", "false");
|
|
834
|
-
railTrigger.setAttribute("aria-expanded", "false");
|
|
835
788
|
return;
|
|
836
789
|
}
|
|
837
790
|
if (openKey === "overview") {
|
|
@@ -842,7 +795,6 @@ function mountQuotaCard({
|
|
|
842
795
|
panel.hidden = false;
|
|
843
796
|
placePanel();
|
|
844
797
|
surface.setAttribute("aria-expanded", "true");
|
|
845
|
-
railTrigger.setAttribute("aria-expanded", "true");
|
|
846
798
|
return;
|
|
847
799
|
}
|
|
848
800
|
const provider = (snapshot?.providers ?? []).find((item) => item?.key === openKey);
|
|
@@ -859,7 +811,6 @@ function mountQuotaCard({
|
|
|
859
811
|
panel.hidden = false;
|
|
860
812
|
placePanel();
|
|
861
813
|
surface.setAttribute("aria-expanded", "true");
|
|
862
|
-
railTrigger.setAttribute("aria-expanded", "true");
|
|
863
814
|
};
|
|
864
815
|
const renderFloatFace = () => {
|
|
865
816
|
const providers = snapshot?.providers ?? [];
|
|
@@ -931,14 +882,6 @@ function mountQuotaCard({
|
|
|
931
882
|
event.preventDefault();
|
|
932
883
|
openMenu();
|
|
933
884
|
};
|
|
934
|
-
const onRailClick = () => {
|
|
935
|
-
if (openKey !== void 0 && !panel.hidden) {
|
|
936
|
-
openKey = void 0;
|
|
937
|
-
syncPop();
|
|
938
|
-
return;
|
|
939
|
-
}
|
|
940
|
-
openOverview(railTrigger);
|
|
941
|
-
};
|
|
942
885
|
const onMenuClick = (event) => {
|
|
943
886
|
const item = event.target?.closest?.("[data-menu]");
|
|
944
887
|
if (!item) return;
|
|
@@ -959,15 +902,9 @@ function mountQuotaCard({
|
|
|
959
902
|
};
|
|
960
903
|
const syncCardVisibility = () => {
|
|
961
904
|
syncFootNarrowness();
|
|
962
|
-
const
|
|
963
|
-
|
|
964
|
-
const showCard = cardOn && !narrowOrCollapsed && !noDataHidden;
|
|
965
|
-
const showRail = cardOn && narrowOrCollapsed && !noDataHidden;
|
|
966
|
-
container.hidden = !showCard && !showRail;
|
|
967
|
-
if (showRail) container.dataset.dshQuotaWatchSidebarCollapsed = "";
|
|
968
|
-
else delete container.dataset.dshQuotaWatchSidebarCollapsed;
|
|
905
|
+
const showCard = !surfaceFlags.cardHidden && !footTooNarrow && !noDataHidden;
|
|
906
|
+
container.hidden = !showCard;
|
|
969
907
|
card.style.display = showCard ? "" : "none";
|
|
970
|
-
railTrigger.style.display = showRail ? "inline-flex" : "none";
|
|
971
908
|
};
|
|
972
909
|
const footResizeObserver = typeof win.ResizeObserver === "function" ? new win.ResizeObserver(() => {
|
|
973
910
|
syncCardVisibility();
|
|
@@ -1033,24 +970,10 @@ function mountQuotaCard({
|
|
|
1033
970
|
if (!disposed) place();
|
|
1034
971
|
});
|
|
1035
972
|
};
|
|
1036
|
-
let sidebarCollapsed = Boolean(doc.querySelector("[data-sidebar-collapsed]"));
|
|
1037
|
-
const syncSidebarCollapsed = () => {
|
|
1038
|
-
const next = Boolean(doc.querySelector("[data-sidebar-collapsed]"));
|
|
1039
|
-
if (next !== sidebarCollapsed) {
|
|
1040
|
-
sidebarCollapsed = next;
|
|
1041
|
-
renderAll();
|
|
1042
|
-
}
|
|
1043
|
-
};
|
|
1044
973
|
const observer = new win.MutationObserver(() => {
|
|
1045
|
-
syncSidebarCollapsed();
|
|
1046
974
|
schedulePlace();
|
|
1047
975
|
});
|
|
1048
|
-
observer.observe(doc.body, {
|
|
1049
|
-
childList: true,
|
|
1050
|
-
subtree: true,
|
|
1051
|
-
attributes: true,
|
|
1052
|
-
attributeFilter: ["data-sidebar-collapsed"]
|
|
1053
|
-
});
|
|
976
|
+
observer.observe(doc.body, { childList: true, subtree: true });
|
|
1054
977
|
place();
|
|
1055
978
|
const startPolling = () => {
|
|
1056
979
|
if (timer !== void 0 || doc.visibilityState === "hidden" || disposed) return;
|
|
@@ -1165,7 +1088,6 @@ function mountQuotaCard({
|
|
|
1165
1088
|
surface.addEventListener("click", onSurfaceClick);
|
|
1166
1089
|
surface.addEventListener("keydown", onSurfaceKeydown);
|
|
1167
1090
|
surface.addEventListener("contextmenu", onSurfaceContext);
|
|
1168
|
-
railTrigger.addEventListener("click", onRailClick);
|
|
1169
1091
|
let disposeDrag = attachDrag(surface);
|
|
1170
1092
|
doc.addEventListener("visibilitychange", onVisibilityChange);
|
|
1171
1093
|
doc.addEventListener("pointerdown", onDocPointerDown, true);
|
|
@@ -1188,7 +1110,6 @@ function mountQuotaCard({
|
|
|
1188
1110
|
surface.removeEventListener("click", onSurfaceClick);
|
|
1189
1111
|
surface.removeEventListener("keydown", onSurfaceKeydown);
|
|
1190
1112
|
surface.removeEventListener("contextmenu", onSurfaceContext);
|
|
1191
|
-
railTrigger.removeEventListener("click", onRailClick);
|
|
1192
1113
|
menu.removeEventListener("click", onMenuClick);
|
|
1193
1114
|
disposeDrag();
|
|
1194
1115
|
container.remove();
|
package/package.json
CHANGED
package/src/client.mjs
CHANGED
|
@@ -107,13 +107,6 @@ const STYLE_TEXT = `
|
|
|
107
107
|
.dqw-chev { font-size: 9px; line-height: 14px; opacity: .6; flex: none; width: 10px; text-align: center; }
|
|
108
108
|
.dqw-stale-mark { flex: none; font-size: 9px; line-height: 14px; color: var(--dsw-alias-label-warning, #b46900); cursor: help; }
|
|
109
109
|
.dqw-errtext { font-size: 10px; line-height: 14px; opacity: .7; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
110
|
-
.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; }
|
|
111
|
-
.dqw-rail-trigger svg { display: block; width: 16px; height: 16px; }
|
|
112
|
-
.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); }
|
|
113
|
-
.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); }
|
|
114
|
-
.dqw-rail-trigger:focus-visible { outline: 2px solid var(--dsw-alias-brand-primary, #5b8def); outline-offset: 2px; }
|
|
115
|
-
:host([data-dsh-quota-watch-sidebar-collapsed]) .dqw-card { display: none; }
|
|
116
|
-
:host([data-dsh-quota-watch-sidebar-collapsed]) .dqw-rail-trigger { display: inline-flex; }
|
|
117
110
|
@media print { :host { display: none !important; } }
|
|
118
111
|
`
|
|
119
112
|
|
|
@@ -392,18 +385,7 @@ export function mountQuotaCard({
|
|
|
392
385
|
const lastUpdated = text(doc, 'p', 'dqw-meta', copy.loading)
|
|
393
386
|
lastUpdated.dataset.role = 'updated'
|
|
394
387
|
body.append(lastUpdated)
|
|
395
|
-
|
|
396
|
-
// replaces the card body; the shadow CSS swaps them on the host's collapsed flag.
|
|
397
|
-
const railTrigger = doc.createElement('button')
|
|
398
|
-
railTrigger.type = 'button'
|
|
399
|
-
railTrigger.className = 'dqw-rail-trigger'
|
|
400
|
-
railTrigger.dataset.dshQuotaWatchRail = ''
|
|
401
|
-
railTrigger.title = copy.title
|
|
402
|
-
railTrigger.setAttribute('aria-label', copy.title)
|
|
403
|
-
railTrigger.setAttribute('aria-haspopup', 'dialog')
|
|
404
|
-
railTrigger.setAttribute('aria-expanded', 'false')
|
|
405
|
-
railTrigger.append(quotaIcon(doc))
|
|
406
|
-
card.append(body, railTrigger)
|
|
388
|
+
card.append(body)
|
|
407
389
|
cardRoot.append(style, card)
|
|
408
390
|
// Details open in a viewport-level floating panel — the only detail surface.
|
|
409
391
|
const panel = doc.createElement('div')
|
|
@@ -771,7 +753,6 @@ export function mountQuotaCard({
|
|
|
771
753
|
lastAnchor = null
|
|
772
754
|
panelNav = false
|
|
773
755
|
surface.setAttribute('aria-expanded', 'false')
|
|
774
|
-
railTrigger.setAttribute('aria-expanded', 'false')
|
|
775
756
|
return
|
|
776
757
|
}
|
|
777
758
|
if (openKey === 'overview') {
|
|
@@ -782,7 +763,6 @@ export function mountQuotaCard({
|
|
|
782
763
|
panel.hidden = false
|
|
783
764
|
placePanel()
|
|
784
765
|
surface.setAttribute('aria-expanded', 'true')
|
|
785
|
-
railTrigger.setAttribute('aria-expanded', 'true')
|
|
786
766
|
return
|
|
787
767
|
}
|
|
788
768
|
const provider = (snapshot?.providers ?? []).find((item) => item?.key === openKey)
|
|
@@ -799,7 +779,6 @@ export function mountQuotaCard({
|
|
|
799
779
|
panel.hidden = false
|
|
800
780
|
placePanel()
|
|
801
781
|
surface.setAttribute('aria-expanded', 'true')
|
|
802
|
-
railTrigger.setAttribute('aria-expanded', 'true')
|
|
803
782
|
}
|
|
804
783
|
|
|
805
784
|
const renderFloatFace = () => {
|
|
@@ -877,15 +856,6 @@ export function mountQuotaCard({
|
|
|
877
856
|
event.preventDefault()
|
|
878
857
|
openMenu()
|
|
879
858
|
}
|
|
880
|
-
/** Collapsed-rail gauge icon: toggles the panel, exactly like the capsule. */
|
|
881
|
-
const onRailClick = () => {
|
|
882
|
-
if (openKey !== undefined && !panel.hidden) {
|
|
883
|
-
openKey = undefined
|
|
884
|
-
syncPop()
|
|
885
|
-
return
|
|
886
|
-
}
|
|
887
|
-
openOverview(railTrigger)
|
|
888
|
-
}
|
|
889
859
|
const onMenuClick = (event) => {
|
|
890
860
|
const item = event.target?.closest?.('[data-menu]')
|
|
891
861
|
if (!item) return
|
|
@@ -915,18 +885,12 @@ export function mountQuotaCard({
|
|
|
915
885
|
// build (0.2.0-rc.2 web) never writes data-sidebar-collapsed on collapse
|
|
916
886
|
// (verified via CDP + bundle grep), but the foot container measurably
|
|
917
887
|
// narrows — and the 36px gauge icon fits any rail.
|
|
918
|
-
|
|
919
|
-
|
|
920
|
-
|
|
921
|
-
const
|
|
922
|
-
container.hidden = !showCard
|
|
923
|
-
if (showRail) container.dataset.dshQuotaWatchSidebarCollapsed = ''
|
|
924
|
-
else delete container.dataset.dshQuotaWatchSidebarCollapsed
|
|
925
|
-
// The card ↔ rail swap is driven by INLINE styles: know-how 017's lesson —
|
|
926
|
-
// critical visibility state must not depend on stylesheet rules that
|
|
927
|
-
// external actors (aggressive extensions) may neuter in the user's browser.
|
|
888
|
+
// The sidebar card shows ONLY in an expanded sidebar: the width guard hides
|
|
889
|
+
// it in narrow rails / squeezed containers (works on every profile), and no
|
|
890
|
+
// host collapse signal is consulted at all (they proved host-specific).
|
|
891
|
+
const showCard = !surfaceFlags.cardHidden && !footTooNarrow && !noDataHidden
|
|
892
|
+
container.hidden = !showCard
|
|
928
893
|
card.style.display = showCard ? '' : 'none'
|
|
929
|
-
railTrigger.style.display = showRail ? 'inline-flex' : 'none'
|
|
930
894
|
}
|
|
931
895
|
const footResizeObserver = typeof win.ResizeObserver === 'function'
|
|
932
896
|
? new win.ResizeObserver(() => { syncCardVisibility() })
|
|
@@ -1001,28 +965,10 @@ export function mountQuotaCard({
|
|
|
1001
965
|
})
|
|
1002
966
|
}
|
|
1003
967
|
|
|
1004
|
-
// Web narrow-rail collapse: the host keeps the footArea but squeezes it, which
|
|
1005
|
-
// clips the card into garbled text — hide the card and let the capsule carry
|
|
1006
|
-
// the entry (0.0.18 shipped dedicated rail CSS; 0.1.0 retired it, and 0.1.2
|
|
1007
|
-
// reintroduces only this visibility signal — zero layout coupling).
|
|
1008
|
-
let sidebarCollapsed = Boolean(doc.querySelector('[data-sidebar-collapsed]'))
|
|
1009
|
-
const syncSidebarCollapsed = () => {
|
|
1010
|
-
const next = Boolean(doc.querySelector('[data-sidebar-collapsed]'))
|
|
1011
|
-
if (next !== sidebarCollapsed) {
|
|
1012
|
-
sidebarCollapsed = next
|
|
1013
|
-
renderAll()
|
|
1014
|
-
}
|
|
1015
|
-
}
|
|
1016
968
|
const observer = new win.MutationObserver(() => {
|
|
1017
|
-
syncSidebarCollapsed()
|
|
1018
969
|
schedulePlace()
|
|
1019
970
|
})
|
|
1020
|
-
observer.observe(doc.body, {
|
|
1021
|
-
childList: true,
|
|
1022
|
-
subtree: true,
|
|
1023
|
-
attributes: true,
|
|
1024
|
-
attributeFilter: ['data-sidebar-collapsed'],
|
|
1025
|
-
})
|
|
971
|
+
observer.observe(doc.body, { childList: true, subtree: true })
|
|
1026
972
|
place()
|
|
1027
973
|
|
|
1028
974
|
const startPolling = () => {
|
|
@@ -1136,7 +1082,6 @@ export function mountQuotaCard({
|
|
|
1136
1082
|
surface.addEventListener('click', onSurfaceClick)
|
|
1137
1083
|
surface.addEventListener('keydown', onSurfaceKeydown)
|
|
1138
1084
|
surface.addEventListener('contextmenu', onSurfaceContext)
|
|
1139
|
-
railTrigger.addEventListener('click', onRailClick)
|
|
1140
1085
|
let disposeDrag = attachDrag(surface)
|
|
1141
1086
|
doc.addEventListener('visibilitychange', onVisibilityChange)
|
|
1142
1087
|
doc.addEventListener('pointerdown', onDocPointerDown, true)
|
|
@@ -1160,7 +1105,6 @@ export function mountQuotaCard({
|
|
|
1160
1105
|
surface.removeEventListener('click', onSurfaceClick)
|
|
1161
1106
|
surface.removeEventListener('keydown', onSurfaceKeydown)
|
|
1162
1107
|
surface.removeEventListener('contextmenu', onSurfaceContext)
|
|
1163
|
-
railTrigger.removeEventListener('click', onRailClick)
|
|
1164
1108
|
menu.removeEventListener('click', onMenuClick)
|
|
1165
1109
|
disposeDrag()
|
|
1166
1110
|
container.remove()
|