(READ ONLY) Margin is an open annotation layer for the internet. Powered by the AT Protocol. margin.at
extension web atproto comments
99
fork

Configure Feed

Select the types of activity you want to include in your feed.

Enhance overlay interaction and visibility management by simplifying height calculation, clearing state when hidden, and adding error handling for badge updates.

scanash00 1a89a3f0 afea1234

+54 -26
+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
··· 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 }