@iasiv5/dsh-quota-watch 0.1.6 → 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 -90
- package/package.json +1 -1
- package/src/client.mjs +7 -71
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,22 +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
|
-
if (showRail) {
|
|
972
|
-
container.style.height = SURFACE_SIZE + "px";
|
|
973
|
-
container.style.flex = "0 0 auto";
|
|
974
|
-
} else {
|
|
975
|
-
container.style.height = "";
|
|
976
|
-
container.style.flex = "";
|
|
977
|
-
}
|
|
978
908
|
};
|
|
979
909
|
const footResizeObserver = typeof win.ResizeObserver === "function" ? new win.ResizeObserver(() => {
|
|
980
910
|
syncCardVisibility();
|
|
@@ -1040,24 +970,10 @@ function mountQuotaCard({
|
|
|
1040
970
|
if (!disposed) place();
|
|
1041
971
|
});
|
|
1042
972
|
};
|
|
1043
|
-
let sidebarCollapsed = Boolean(doc.querySelector("[data-sidebar-collapsed]"));
|
|
1044
|
-
const syncSidebarCollapsed = () => {
|
|
1045
|
-
const next = Boolean(doc.querySelector("[data-sidebar-collapsed]"));
|
|
1046
|
-
if (next !== sidebarCollapsed) {
|
|
1047
|
-
sidebarCollapsed = next;
|
|
1048
|
-
renderAll();
|
|
1049
|
-
}
|
|
1050
|
-
};
|
|
1051
973
|
const observer = new win.MutationObserver(() => {
|
|
1052
|
-
syncSidebarCollapsed();
|
|
1053
974
|
schedulePlace();
|
|
1054
975
|
});
|
|
1055
|
-
observer.observe(doc.body, {
|
|
1056
|
-
childList: true,
|
|
1057
|
-
subtree: true,
|
|
1058
|
-
attributes: true,
|
|
1059
|
-
attributeFilter: ["data-sidebar-collapsed"]
|
|
1060
|
-
});
|
|
976
|
+
observer.observe(doc.body, { childList: true, subtree: true });
|
|
1061
977
|
place();
|
|
1062
978
|
const startPolling = () => {
|
|
1063
979
|
if (timer !== void 0 || doc.visibilityState === "hidden" || disposed) return;
|
|
@@ -1172,7 +1088,6 @@ function mountQuotaCard({
|
|
|
1172
1088
|
surface.addEventListener("click", onSurfaceClick);
|
|
1173
1089
|
surface.addEventListener("keydown", onSurfaceKeydown);
|
|
1174
1090
|
surface.addEventListener("contextmenu", onSurfaceContext);
|
|
1175
|
-
railTrigger.addEventListener("click", onRailClick);
|
|
1176
1091
|
let disposeDrag = attachDrag(surface);
|
|
1177
1092
|
doc.addEventListener("visibilitychange", onVisibilityChange);
|
|
1178
1093
|
doc.addEventListener("pointerdown", onDocPointerDown, true);
|
|
@@ -1195,7 +1110,6 @@ function mountQuotaCard({
|
|
|
1195
1110
|
surface.removeEventListener("click", onSurfaceClick);
|
|
1196
1111
|
surface.removeEventListener("keydown", onSurfaceKeydown);
|
|
1197
1112
|
surface.removeEventListener("contextmenu", onSurfaceContext);
|
|
1198
|
-
railTrigger.removeEventListener("click", onRailClick);
|
|
1199
1113
|
menu.removeEventListener("click", onMenuClick);
|
|
1200
1114
|
disposeDrag();
|
|
1201
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,26 +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
|
-
// AND the collapsed rail gets an explicit 38px box: CDP layout-chain dump
|
|
927
|
-
// showed the 0.2.0 framework flex-collapsing unknown foot children to 0px
|
|
928
|
-
// height, so the gauge must opt out of the flex squeeze to be visible.
|
|
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
|
|
929
893
|
card.style.display = showCard ? '' : 'none'
|
|
930
|
-
railTrigger.style.display = showRail ? 'inline-flex' : 'none'
|
|
931
|
-
if (showRail) {
|
|
932
|
-
container.style.height = SURFACE_SIZE + 'px'
|
|
933
|
-
container.style.flex = '0 0 auto'
|
|
934
|
-
} else {
|
|
935
|
-
container.style.height = ''
|
|
936
|
-
container.style.flex = ''
|
|
937
|
-
}
|
|
938
894
|
}
|
|
939
895
|
const footResizeObserver = typeof win.ResizeObserver === 'function'
|
|
940
896
|
? new win.ResizeObserver(() => { syncCardVisibility() })
|
|
@@ -1009,28 +965,10 @@ export function mountQuotaCard({
|
|
|
1009
965
|
})
|
|
1010
966
|
}
|
|
1011
967
|
|
|
1012
|
-
// Web narrow-rail collapse: the host keeps the footArea but squeezes it, which
|
|
1013
|
-
// clips the card into garbled text — hide the card and let the capsule carry
|
|
1014
|
-
// the entry (0.0.18 shipped dedicated rail CSS; 0.1.0 retired it, and 0.1.2
|
|
1015
|
-
// reintroduces only this visibility signal — zero layout coupling).
|
|
1016
|
-
let sidebarCollapsed = Boolean(doc.querySelector('[data-sidebar-collapsed]'))
|
|
1017
|
-
const syncSidebarCollapsed = () => {
|
|
1018
|
-
const next = Boolean(doc.querySelector('[data-sidebar-collapsed]'))
|
|
1019
|
-
if (next !== sidebarCollapsed) {
|
|
1020
|
-
sidebarCollapsed = next
|
|
1021
|
-
renderAll()
|
|
1022
|
-
}
|
|
1023
|
-
}
|
|
1024
968
|
const observer = new win.MutationObserver(() => {
|
|
1025
|
-
syncSidebarCollapsed()
|
|
1026
969
|
schedulePlace()
|
|
1027
970
|
})
|
|
1028
|
-
observer.observe(doc.body, {
|
|
1029
|
-
childList: true,
|
|
1030
|
-
subtree: true,
|
|
1031
|
-
attributes: true,
|
|
1032
|
-
attributeFilter: ['data-sidebar-collapsed'],
|
|
1033
|
-
})
|
|
971
|
+
observer.observe(doc.body, { childList: true, subtree: true })
|
|
1034
972
|
place()
|
|
1035
973
|
|
|
1036
974
|
const startPolling = () => {
|
|
@@ -1144,7 +1082,6 @@ export function mountQuotaCard({
|
|
|
1144
1082
|
surface.addEventListener('click', onSurfaceClick)
|
|
1145
1083
|
surface.addEventListener('keydown', onSurfaceKeydown)
|
|
1146
1084
|
surface.addEventListener('contextmenu', onSurfaceContext)
|
|
1147
|
-
railTrigger.addEventListener('click', onRailClick)
|
|
1148
1085
|
let disposeDrag = attachDrag(surface)
|
|
1149
1086
|
doc.addEventListener('visibilitychange', onVisibilityChange)
|
|
1150
1087
|
doc.addEventListener('pointerdown', onDocPointerDown, true)
|
|
@@ -1168,7 +1105,6 @@ export function mountQuotaCard({
|
|
|
1168
1105
|
surface.removeEventListener('click', onSurfaceClick)
|
|
1169
1106
|
surface.removeEventListener('keydown', onSurfaceKeydown)
|
|
1170
1107
|
surface.removeEventListener('contextmenu', onSurfaceContext)
|
|
1171
|
-
railTrigger.removeEventListener('click', onRailClick)
|
|
1172
1108
|
menu.removeEventListener('click', onMenuClick)
|
|
1173
1109
|
disposeDrag()
|
|
1174
1110
|
container.remove()
|