(READ ONLY) Margin is an open annotation layer for the internet. Powered by the AT Protocol.
margin.at
extension
web
atproto
comments
Enhance overlay interaction and visibility management by simplifying height calculation, clearing state when hidden, and adding error handling for badge updates.
+54
-26
+16
-8
extension/background/service-worker.js
+16
-8
extension/background/service-worker.js
···
369
369
370
370
if (sender.tab) {
371
371
const count = items.length;
372
-
chrome.action.setBadgeText({
373
-
text: count > 0 ? count.toString() : "",
374
-
tabId: sender.tab.id,
375
-
});
376
-
chrome.action.setBadgeBackgroundColor({
377
-
color: "#6366f1",
378
-
tabId: sender.tab.id,
379
-
});
372
+
chrome.action
373
+
.setBadgeText({
374
+
text: count > 0 ? count.toString() : "",
375
+
tabId: sender.tab.id,
376
+
})
377
+
.catch(() => {
378
+
/* ignore */
379
+
});
380
+
chrome.action
381
+
.setBadgeBackgroundColor({
382
+
color: "#6366f1",
383
+
tabId: sender.tab.id,
384
+
})
385
+
.catch(() => {
386
+
/* ignore */
387
+
});
380
388
}
381
389
break;
382
390
}
+38
-18
extension/content/content.js
+38
-18
extension/content/content.js
···
484
484
function initOverlay() {
485
485
sidebarHost = document.createElement("div");
486
486
sidebarHost.id = "margin-overlay-host";
487
-
const getScrollHeight = () => {
488
-
const bodyH = document.body?.scrollHeight || 0;
489
-
const docH = document.documentElement?.scrollHeight || 0;
490
-
return Math.max(bodyH, docH);
491
-
};
492
-
493
487
sidebarHost.style.cssText = `
494
488
position: absolute; top: 0; left: 0; width: 100%;
495
-
height: ${getScrollHeight()}px;
489
+
height: 0;
490
+
overflow: visible;
496
491
pointer-events: none; z-index: 2147483647;
497
492
`;
498
493
document.body?.appendChild(sidebarHost) ||
···
508
503
container.id = "margin-overlay-container";
509
504
sidebarShadow.appendChild(container);
510
505
511
-
const observer = new ResizeObserver(() => {
512
-
sidebarHost.style.height = `${getScrollHeight()}px`;
513
-
});
514
-
if (document.body) observer.observe(document.body);
515
-
if (document.documentElement) observer.observe(document.documentElement);
516
-
517
506
if (typeof chrome !== "undefined" && chrome.storage) {
518
507
chrome.storage.local.get(["showOverlay", "theme"], (result) => {
519
508
applyTheme(result.theme);
···
538
527
if (changes.showOverlay) {
539
528
if (changes.showOverlay.newValue === false) {
540
529
sidebarHost.style.display = "none";
530
+
activeItems = [];
531
+
if (typeof CSS !== "undefined" && CSS.highlights) {
532
+
CSS.highlights.clear();
533
+
}
541
534
} else {
542
535
sidebarHost.style.display = "";
543
536
fetchAnnotations();
···
633
626
function handleMouseMove(e) {
634
627
const x = e.clientX;
635
628
const y = e.clientY;
629
+
630
+
if (sidebarHost && sidebarHost.style.display === "none") return;
631
+
636
632
let foundItems = [];
637
633
let firstRange = null;
638
634
for (const { range, item } of activeItems) {
···
644
640
y >= rect.top &&
645
641
y <= rect.bottom
646
642
) {
647
-
if (!firstRange) firstRange = range;
648
-
if (!foundItems.some((f) => f.item === item)) {
649
-
foundItems.push({ range, item, rect });
643
+
let container = range.commonAncestorContainer;
644
+
if (container.nodeType === Node.TEXT_NODE) {
645
+
container = container.parentNode;
646
+
}
647
+
648
+
if (
649
+
container &&
650
+
(e.target.contains(container) || container.contains(e.target))
651
+
) {
652
+
if (!firstRange) firstRange = range;
653
+
if (!foundItems.some((f) => f.item === item)) {
654
+
foundItems.push({ range, item, rect });
655
+
}
650
656
}
651
657
break;
652
658
}
···
737
743
function handleDocumentClick(e) {
738
744
const x = e.clientX;
739
745
const y = e.clientY;
746
+
747
+
if (sidebarHost && sidebarHost.style.display === "none") return;
748
+
740
749
if (popoverEl && sidebarShadow) {
741
750
const rect = popoverEl.getBoundingClientRect();
742
751
if (
···
759
768
y >= rect.top &&
760
769
y <= rect.bottom
761
770
) {
762
-
if (!clickedItems.includes(item)) {
763
-
clickedItems.push(item);
771
+
let container = range.commonAncestorContainer;
772
+
if (container.nodeType === Node.TEXT_NODE) {
773
+
container = container.parentNode;
774
+
}
775
+
776
+
if (
777
+
container &&
778
+
(e.target.contains(container) || container.contains(e.target))
779
+
) {
780
+
if (!clickedItems.includes(item)) {
781
+
clickedItems.push(item);
782
+
}
764
783
}
765
784
break;
766
785
}
···
1075
1094
if (request.show) {
1076
1095
fetchAnnotations();
1077
1096
} else {
1097
+
activeItems = [];
1078
1098
if (typeof CSS !== "undefined" && CSS.highlights) {
1079
1099
CSS.highlights.clear();
1080
1100
}