From 2dd59f1dc5f5384fd3fc1605313148b1772adcf2 Mon Sep 17 00:00:00 2001
From: Patrick Kettner <patrickkettner@gmail.com>
Date: Sun, 28 Jan 2024 17:10:16 -0500
Subject: [PATCH] update version

---
 specification/window.browser.html | 193 ++++++++++++------------------
 1 file changed, 77 insertions(+), 116 deletions(-)

diff --git a/specification/window.browser.html b/specification/window.browser.html
index 05ce73d4..c7185bc8 100644
--- a/specification/window.browser.html
+++ b/specification/window.browser.html
@@ -5,9 +5,9 @@
   <title>window.browser</title>
   <meta content="UD" name="w3c-status">
   <link href="https://www.w3.org/StyleSheets/TR/2021/W3C-UD" rel="stylesheet">
-  <meta content="Bikeshed version fe5461827, updated Mon Dec 18 10:46:21 2023 -0800" name="generator">
+  <meta content="Bikeshed version 47b277cef, updated Fri Jan 26 09:46:24 2024 -0800" name="generator">
   <link href="https://w3c.github.io/webextensions/specification/window.browser.html" rel="canonical">
-  <meta content="0c9789208a9c689ccc89ab3a2e6e1d055ddde021" name="revision">
+  <meta content="3952d200b977cd32dd893ad2a36b4eb9a81e23f9" name="revision">
 <style>/* Boilerplate: style-autolinks */
 .css.css, .property.property, .descriptor.descriptor {
     color: var(--a-normal-text);
@@ -693,7 +693,7 @@
   <div class="head">
    <p data-fill-with="logo"><a class="logo" href="https://www.w3.org/"> <img alt="W3C" height="48" src="https://www.w3.org/StyleSheets/TR/2021/logos/W3C" width="72"> </a> </p>
    <h1 class="p-name no-ref" id="title">window.browser</h1>
-   <p id="w3c-state"><a href="https://www.w3.org/standards/types#UD">Unofficial Proposal Draft</a>, <time class="dt-updated" datetime="2023-12-26">26 December 2023</time></p>
+   <p id="w3c-state"><a href="https://www.w3.org/standards/types#UD">Unofficial Proposal Draft</a>, <time class="dt-updated" datetime="2024-01-28">28 January 2024</time></p>
    <details open>
     <summary>More details about this document</summary>
     <div data-fill-with="spec-metadata">
@@ -708,7 +708,7 @@ <h1 class="p-name no-ref" id="title">window.browser</h1>
     </div>
    </details>
    <div data-fill-with="warning"></div>
-   <p class="copyright" data-fill-with="copyright"><a href="https://www.w3.org/policies/#copyright">Copyright</a> © 2023 the Contributors to the window.browser Specification, published by the <a href="https://www.w3.org/community/webextensions/">WebExtensions Community Group</a> under the <a href="https://www.w3.org/community/about/agreements/cla/">W3C Community Contributor License Agreement (CLA)</a>.
+   <p class="copyright" data-fill-with="copyright"><a href="https://www.w3.org/policies/#copyright">Copyright</a> © 2024 the Contributors to the window.browser Specification, published by the <a href="https://www.w3.org/community/webextensions/">WebExtensions Community Group</a> under the <a href="https://www.w3.org/community/about/agreements/cla/">W3C Community Contributor License Agreement (CLA)</a>.
 A human-readable <a href="http://www.w3.org/community/about/agreements/cla-deed/">summary</a> is available. </p>
    <hr title="Separator for header">
   </div>
@@ -751,16 +751,16 @@ <h2 class="no-num no-toc no-ref" id="contents">Table of Contents</h2>
   </nav>
   <main>
    <section class="non-normative">
-    <h3 class="heading settled" id="introduction"><span class="content">Introduction {#introduction}</span></h3>
+    <h3 class="heading settled" id="introduction"><span class="content">Introduction</span></h3>
      <em>This section is non-normative.</em> 
     <p>Browser extensions are programs to extend the capabilities of web browsers.
   Although not standardized at first, web browsers have independently implemented a common interoperable set of extension APIs, called WebExtensions.</p>
     <p>Modern WebExtensions are an evolution of a system originally introduced in
-  Chrome version 3. In that system, any API that was added was put under the <code>chrome</code> namespace. When WebExtensions were adopted outside of
+  Chromium. In that system, any API that was added was put under the <code>chrome</code> namespace. When WebExtensions were adopted outside of
   Chromium, other vendors used the more neutral <code>browser</code> namespace.
-  That <code>browser</code> is now considered to canonically correct namespace
+  That <code>browser</code> is now considered the canonically correct namespace
   for all WebExtension APIs.  Some interactions with WebExtensions (such as
-  external messaging from content scripts to background processes) necessitate
+  external messaging from websites to background processes) necessitate
   the exposure of this namespace to the web.</p>
     <p>Given that, this document defines <code>window.browser</code> as reserved for
   the use of APIs designed to interact with WebExtensions. The specifics of what
@@ -769,7 +769,7 @@ <h3 class="heading settled" id="introduction"><span class="content">Introduction
    </section>
    <section>
     <h3 class="heading settled" id="window-interface"><span class="content"> <a class="idl-code" data-link-type="attribute" href="#dom-serviceworkerglobalscope-browser" id="ref-for-dom-serviceworkerglobalscope-browser"><code>window.browser</code></a> API </span></h3>
-    <p><code class="idl"><a data-link-type="idl" href="#dom-dedicatedworkerglobalscope-browser" id="ref-for-dom-dedicatedworkerglobalscope-browser">browser</a></code> is UA defined attribute exposed on <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/nav-history-apis.html#dom-window" id="ref-for-dom-window">window</a></code>. When implemented,
+    <p><code class="idl"><a data-link-type="idl" href="#dom-window-browser" id="ref-for-dom-window-browser">browser</a></code> is UA defined attribute exposed on <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/nav-history-apis.html#dom-window" id="ref-for-dom-window">window</a></code>. When implemented,
     it MUST be used only for WebExtension related functionality.</p>
    </section>
 <pre class="idl highlight def"><c- b>partial</c-> <c- b>interface</c-> <a class="idl-code" data-link-type="interface" href="https://html.spec.whatwg.org/multipage/nav-history-apis.html#window" id="ref-for-window"><c- g>Window</c-></a> {
@@ -779,15 +779,11 @@ <h3 class="heading settled" id="window-interface"><span class="content"> <a clas
 </pre>
    <section>
     <h3 class="heading settled" id="worker-interface"><span class="content"> Worker API </span></h3>
-    <p>When <code class="idl"><a data-link-type="idl" href="#dom-window-browser" id="ref-for-dom-window-browser">browser</a></code> is defined on <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/nav-history-apis.html#dom-window" id="ref-for-dom-window①">window</a></code>, it SHOULD also be implemented on <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/ServiceWorker/#serviceworkerglobalscope" id="ref-for-serviceworkerglobalscope">ServiceWorkerGlobalScope</a></code> and <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/workers.html#dedicatedworkerglobalscope" id="ref-for-dedicatedworkerglobalscope">DedicatedWorkerGlobalScope</a></code>.
-    It MUST be used exclusivly for WebExtension purposes, however the contents of each instance of <code class="idl"><a data-link-type="idl" href="#dom-dedicatedworkerglobalscope-browser" id="ref-for-dom-dedicatedworkerglobalscope-browser①">browser</a></code> is UA defined.</p>
+    <p>When <code class="idl"><a data-link-type="idl" href="#dom-window-browser" id="ref-for-dom-window-browser①">browser</a></code> is defined on <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/nav-history-apis.html#dom-window" id="ref-for-dom-window①">window</a></code>, it SHOULD also be exposed on <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/ServiceWorker/#serviceworkerglobalscope" id="ref-for-serviceworkerglobalscope">ServiceWorkerGlobalScope</a></code> of origins associated with WebExtensions.
+    It MUST be used exclusively for WebExtension purposes, however the contents of each instance of <code class="idl"><a data-link-type="idl" href="#dom-serviceworkerglobalscope-browser" id="ref-for-dom-serviceworkerglobalscope-browser①">browser</a></code> is UA defined.</p>
    </section>
-<pre class="idl highlight def"><c- b>partial</c-> <c- b>interface</c-> <a class="idl-code" data-link-type="interface" href="https://html.spec.whatwg.org/multipage/workers.html#dedicatedworkerglobalscope" id="ref-for-dedicatedworkerglobalscope①"><c- g>DedicatedWorkerGlobalScope</c-></a> {
-  <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-object" id="ref-for-idl-object①"><c- b>object</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="DedicatedWorkerGlobalScope" data-dfn-type="attribute" data-export data-type="object" id="dom-dedicatedworkerglobalscope-browser"><code><c- g>browser</c-></code></dfn>;
-};
-
-<c- b>partial</c-> <c- b>interface</c-> <a class="idl-code" data-link-type="interface" href="https://w3c.github.io/ServiceWorker/#serviceworkerglobalscope" id="ref-for-serviceworkerglobalscope①"><c- g>ServiceWorkerGlobalScope</c-></a> {
-  <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-object" id="ref-for-idl-object②"><c- b>object</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="ServiceWorkerGlobalScope" data-dfn-type="attribute" data-export data-type="object" id="dom-serviceworkerglobalscope-browser"><code><c- g>browser</c-></code></dfn>;
+<pre class="idl highlight def"><c- b>partial</c-> <c- b>interface</c-> <a class="idl-code" data-link-type="interface" href="https://w3c.github.io/ServiceWorker/#serviceworkerglobalscope" id="ref-for-serviceworkerglobalscope①"><c- g>ServiceWorkerGlobalScope</c-></a> {
+  <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-object" id="ref-for-idl-object①"><c- b>object</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="ServiceWorkerGlobalScope" data-dfn-type="attribute" data-export data-type="object" id="dom-serviceworkerglobalscope-browser"><code><c- g>browser</c-></code></dfn>;
 };
 </pre>
   </main>
@@ -825,7 +821,6 @@ <h3 class="no-num no-ref heading settled" id="index-defined-here"><span class="c
    <li>
     browser
     <ul>
-     <li><a href="#dom-dedicatedworkerglobalscope-browser">attribute for DedicatedWorkerGlobalScope</a><span>, in § Unnumbered section</span>
      <li><a href="#dom-serviceworkerglobalscope-browser">attribute for ServiceWorkerGlobalScope</a><span>, in § Unnumbered section</span>
      <li><a href="#dom-window-browser">attribute for Window</a><span>, in § Unnumbered section</span>
     </ul>
@@ -835,7 +830,6 @@ <h3 class="no-num no-ref heading settled" id="index-defined-elsewhere"><span cla
    <li>
     <a data-link-type="biblio">[HTML]</a> defines the following terms:
     <ul>
-     <li><span class="dfn-paneled" id="b8308563">DedicatedWorkerGlobalScope</span>
      <li><span class="dfn-paneled" id="5d7209e9">Window</span>
      <li><span class="dfn-paneled" id="9f156e6b">window</span>
     </ul>
@@ -868,10 +862,6 @@ <h2 class="no-num no-ref heading settled" id="idl-index"><span class="content">I
 };
 
 
-<c- b>partial</c-> <c- b>interface</c-> <a class="idl-code" data-link-type="interface" href="https://html.spec.whatwg.org/multipage/workers.html#dedicatedworkerglobalscope"><c- g>DedicatedWorkerGlobalScope</c-></a> {
-  <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-object"><c- b>object</c-></a> <a data-type="object" href="#dom-dedicatedworkerglobalscope-browser"><code><c- g>browser</c-></code></a>;
-};
-
 <c- b>partial</c-> <c- b>interface</c-> <a class="idl-code" data-link-type="interface" href="https://w3c.github.io/ServiceWorker/#serviceworkerglobalscope"><c- g>ServiceWorkerGlobalScope</c-></a> {
   <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://webidl.spec.whatwg.org/#idl-object"><c- b>object</c-></a> <a data-type="object" href="#dom-serviceworkerglobalscope-browser"><code><c- g>browser</c-></code></a>;
 };
@@ -1080,11 +1070,9 @@ <h2 class="no-num no-ref heading settled" id="idl-index"><span class="content">I
 "5d7209e9": {"dfnID":"5d7209e9","dfnText":"Window","external":true,"refSections":[{"refs":[{"id":"ref-for-window"}],"title":"Unnumbered Section"}],"url":"https://html.spec.whatwg.org/multipage/nav-history-apis.html#window"},
 "86d2a717": {"dfnID":"86d2a717","dfnText":"ServiceWorkerGlobalScope","external":true,"refSections":[{"refs":[{"id":"ref-for-serviceworkerglobalscope"}],"title":"\n      Worker API\n    "},{"refs":[{"id":"ref-for-serviceworkerglobalscope\u2460"}],"title":"Unnumbered Section"}],"url":"https://w3c.github.io/ServiceWorker/#serviceworkerglobalscope"},
 "9f156e6b": {"dfnID":"9f156e6b","dfnText":"window","external":true,"refSections":[{"refs":[{"id":"ref-for-dom-window"}],"title":"\n      window.browser API\n    "},{"refs":[{"id":"ref-for-dom-window\u2460"}],"title":"\n      Worker API\n    "}],"url":"https://html.spec.whatwg.org/multipage/nav-history-apis.html#dom-window"},
-"b8308563": {"dfnID":"b8308563","dfnText":"DedicatedWorkerGlobalScope","external":true,"refSections":[{"refs":[{"id":"ref-for-dedicatedworkerglobalscope"}],"title":"\n      Worker API\n    "},{"refs":[{"id":"ref-for-dedicatedworkerglobalscope\u2460"}],"title":"Unnumbered Section"}],"url":"https://html.spec.whatwg.org/multipage/workers.html#dedicatedworkerglobalscope"},
-"dom-dedicatedworkerglobalscope-browser": {"dfnID":"dom-dedicatedworkerglobalscope-browser","dfnText":"browser","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-dedicatedworkerglobalscope-browser"}],"title":"\n      window.browser API\n    "},{"refs":[{"id":"ref-for-dom-dedicatedworkerglobalscope-browser\u2460"}],"title":"\n      Worker API\n    "}],"url":"#dom-dedicatedworkerglobalscope-browser"},
-"dom-serviceworkerglobalscope-browser": {"dfnID":"dom-serviceworkerglobalscope-browser","dfnText":"browser","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-serviceworkerglobalscope-browser"}],"title":"\n      window.browser API\n    "}],"url":"#dom-serviceworkerglobalscope-browser"},
-"dom-window-browser": {"dfnID":"dom-window-browser","dfnText":"browser","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-window-browser"}],"title":"\n      Worker API\n    "}],"url":"#dom-window-browser"},
-"efd1ec5d": {"dfnID":"efd1ec5d","dfnText":"object","external":true,"refSections":[{"refs":[{"id":"ref-for-idl-object"},{"id":"ref-for-idl-object\u2460"},{"id":"ref-for-idl-object\u2461"}],"title":"Unnumbered Section"}],"url":"https://webidl.spec.whatwg.org/#idl-object"},
+"dom-serviceworkerglobalscope-browser": {"dfnID":"dom-serviceworkerglobalscope-browser","dfnText":"browser","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-serviceworkerglobalscope-browser"}],"title":"\n      window.browser API\n    "},{"refs":[{"id":"ref-for-dom-serviceworkerglobalscope-browser\u2460"}],"title":"\n      Worker API\n    "}],"url":"#dom-serviceworkerglobalscope-browser"},
+"dom-window-browser": {"dfnID":"dom-window-browser","dfnText":"browser","external":false,"refSections":[{"refs":[{"id":"ref-for-dom-window-browser"}],"title":"\n      window.browser API\n    "},{"refs":[{"id":"ref-for-dom-window-browser\u2460"}],"title":"\n      Worker API\n    "}],"url":"#dom-window-browser"},
+"efd1ec5d": {"dfnID":"efd1ec5d","dfnText":"object","external":true,"refSections":[{"refs":[{"id":"ref-for-idl-object"},{"id":"ref-for-idl-object\u2460"}],"title":"Unnumbered Section"}],"url":"https://webidl.spec.whatwg.org/#idl-object"},
 };
 
 document.addEventListener("DOMContentLoaded", ()=>{
@@ -1124,21 +1112,22 @@ <h2 class="no-num no-ref heading settled" id="idl-index"><span class="content">I
         mk.span({id:`infopaneltitle-for-${dfnID}`, style:"display:none"},
             `Info about the '${dfnText}' ${external?"external":""} reference.`),
         mk.a({href:url, class:"dfn-link"}, url),
-        mk.b({}, "Referenced in:"),
-        mk.ul({},
-            ...refSections.map(section=>
-                mk.li({},
-                    ...section.refs.map((ref, refI)=>
-                        [
-                            mk.a({ href: `#${ref.id}` },
-                                (refI == 0) ? section.title : `(${refI + 1})`
-                            ),
-                            " ",
-                        ]
+        refSections.length == 0 ? [] :
+            mk.b({}, "Referenced in:"),
+            mk.ul({},
+                ...refSections.map(section=>
+                    mk.li({},
+                        ...section.refs.map((ref, refI)=>
+                            [
+                                mk.a({ href: `#${ref.id}` },
+                                    (refI == 0) ? section.title : `(${refI + 1})`
+                                ),
+                                " ",
+                            ]
+                        ),
                     ),
                 ),
             ),
-        ),
         genLinkingSyntaxes(dfn),
     );
 
@@ -1192,7 +1181,7 @@ <h2 class="no-num no-ref heading settled" id="idl-index"><span class="content">I
 
 function positionDfnPanel(dfnPanel) {
     const dfn = dfnPanel.dfn;
-    const dfnPos = getRootLevelAbsolutePosition(dfn);
+    const dfnPos = getBounds(dfn);
     dfnPanel.style.top = dfnPos.bottom + "px";
     dfnPanel.style.left = dfnPos.left + "px";
 
@@ -1261,40 +1250,19 @@ <h2 class="no-num no-ref heading settled" id="idl-index"><span class="content">I
     });
 }
 
+// TODO: shared util
 // Returns the root-level absolute position {left and top} of element.
-function getRootLevelAbsolutePosition(el) {
-    const boundsRect = el.getBoundingClientRect();
-    let xPos = 0;
-    let yPos = 0;
-
-    while (el) {
-        let xScroll = el.scrollLeft;
-        let yScroll = el.scrollTop;
-
-        // Ignore scrolling of body.
-        if (el.tagName === "BODY") {
-            xScroll = 0;
-            yScroll = 0;
-        }
-        xPos += (el.offsetLeft - xScroll + el.clientLeft);
-        yPos += (el.offsetTop - yScroll + el.clientTop);
-
-        el = el.offsetParent;
-    }
+function getBounds(el, relativeTo=document.body) {
+    const relativeRect = relativeTo.getBoundingClientRect();
+    const elRect = el.getBoundingClientRect();
+    const top = elRect.top - relativeRect.top;
+    const left = elRect.left - relativeRect.left;
     return {
-        left: xPos,
-        top: yPos,
-        right: xPos + boundsRect.width,
-        bottom: yPos + boundsRect.height,
-    };
-}
-
-function scrolledIntoView(element) {
-    const rect = element.getBoundingClientRect();
-    return (
-        rect.top > 0 &&
-        rect.bottom < window.innerHeight
-    );
+        top,
+        left,
+        bottom: top + elRect.height,
+        right: left + elRect.width,
+    }
 }
 
 function scrollToTargetAndHighlight(event) {
@@ -1303,10 +1271,6 @@ <h2 class="no-num no-ref heading settled" id="idl-index"><span class="content">I
         hash = decodeURIComponent(hash.substring(1));
         const dest = document.getElementById(hash);
         if (dest) {
-            // Maybe prevent default scroll.
-            if (scrolledIntoView(dest)) {
-                event.preventDefault();
-            }
             dest.classList.add('highlighted');
             setTimeout(() => dest.classList.remove('highlighted'), 1000);
         }
@@ -1497,12 +1461,10 @@ <h2 class="no-num no-ref heading settled" id="idl-index"><span class="content">I
 "use strict";
 {
 let refsData = {
-"#dom-dedicatedworkerglobalscope-browser": {"export":true,"for_":["DedicatedWorkerGlobalScope"],"level":"1","normative":true,"shortname":"wecg-browser","spec":"wecg-browser-1","status":"local","text":"browser","type":"attribute","url":"#dom-dedicatedworkerglobalscope-browser"},
 "#dom-serviceworkerglobalscope-browser": {"export":true,"for_":["ServiceWorkerGlobalScope"],"level":"1","normative":true,"shortname":"wecg-browser","spec":"wecg-browser-1","status":"local","text":"browser","type":"attribute","url":"#dom-serviceworkerglobalscope-browser"},
 "#dom-window-browser": {"export":true,"for_":["Window"],"level":"1","normative":true,"shortname":"wecg-browser","spec":"wecg-browser-1","status":"local","text":"browser","type":"attribute","url":"#dom-window-browser"},
 "https://html.spec.whatwg.org/multipage/nav-history-apis.html#dom-window": {"export":true,"for_":["Window"],"level":"1","normative":true,"shortname":"html","spec":"html","status":"current","text":"window","type":"attribute","url":"https://html.spec.whatwg.org/multipage/nav-history-apis.html#dom-window"},
 "https://html.spec.whatwg.org/multipage/nav-history-apis.html#window": {"export":true,"for_":[],"level":"1","normative":true,"shortname":"html","spec":"html","status":"current","text":"Window","type":"interface","url":"https://html.spec.whatwg.org/multipage/nav-history-apis.html#window"},
-"https://html.spec.whatwg.org/multipage/workers.html#dedicatedworkerglobalscope": {"export":true,"for_":[],"level":"1","normative":true,"shortname":"html","spec":"html","status":"current","text":"DedicatedWorkerGlobalScope","type":"interface","url":"https://html.spec.whatwg.org/multipage/workers.html#dedicatedworkerglobalscope"},
 "https://w3c.github.io/ServiceWorker/#serviceworkerglobalscope": {"export":true,"for_":[],"level":"1","normative":true,"shortname":"service-workers","spec":"service-workers","status":"current","text":"ServiceWorkerGlobalScope","type":"interface","url":"https://w3c.github.io/ServiceWorker/#serviceworkerglobalscope"},
 "https://webidl.spec.whatwg.org/#idl-object": {"export":true,"for_":[],"level":"1","normative":true,"shortname":"webidl","spec":"webidl","status":"current","text":"object","type":"interface","url":"https://webidl.spec.whatwg.org/#idl-object"},
 };
@@ -1637,7 +1599,7 @@ <h2 class="no-num no-ref heading settled" id="idl-index"><span class="content">I
 
 function positionRefHint(refHint) {
     const link = refHint.forLink;
-    const linkPos = getRootLevelAbsolutePosition(link);
+    const linkPos = getBounds(link);
     refHint.style.top = linkPos.bottom + "px";
     refHint.style.left = linkPos.left + "px";
 
@@ -1653,47 +1615,46 @@ <h2 class="no-num no-ref heading settled" id="idl-index"><span class="content">I
 
 // TODO: shared util
 // Returns the root-level absolute position {left and top} of element.
-function getRootLevelAbsolutePosition(el) {
-    const boundsRect = el.getBoundingClientRect();
-    let xPos = 0;
-    let yPos = 0;
-
-    while (el) {
-        let xScroll = el.scrollLeft;
-        let yScroll = el.scrollTop;
-
-        // Ignore scrolling of body.
-        if (el.tagName === "BODY") {
-            xScroll = 0;
-            yScroll = 0;
-        }
-        xPos += (el.offsetLeft - xScroll + el.clientLeft);
-        yPos += (el.offsetTop - yScroll + el.clientTop);
-
-        el = el.offsetParent;
-    }
+function getBounds(el, relativeTo=document.body) {
+    const relativeRect = relativeTo.getBoundingClientRect();
+    const elRect = el.getBoundingClientRect();
+    const top = elRect.top - relativeRect.top;
+    const left = elRect.left - relativeRect.left;
     return {
-        left: xPos,
-        top: yPos,
-        right: xPos + boundsRect.width,
-        bottom: yPos + boundsRect.height,
-    };
+        top,
+        left,
+        bottom: top + elRect.height,
+        right: left + elRect.width,
+    }
+}
+
+function showRefHintListener(e) {
+    // If the target isn't in a link (or is a link),
+    // just ignore it.
+    let link = e.target.closest("a");
+    if(!link) return;
+
+    // If the target is in a ref-hint panel
+    // (aka a link in the already-open one),
+    // also just ignore it.
+    if(link.closest(".ref-hint")) return;
+
+    // Otherwise, show the panel for the link.
+    showRefHint(link);
+}
+
+function hideAllHintsListener(e) {
+    // If the click is inside a ref-hint panel, ignore it.
+    if(e.target.closest(".ref-hint")) return;
+    // Otherwise, close all the current panels.
+    hideAllRefHints();
 }
 
 document.addEventListener("DOMContentLoaded", () => {
-    document.body.addEventListener("mouseover", e=>{
-        let link = e.target.closest("a");
-        if(link) showRefHint(link);
-    });
-    document.body.addEventListener("focus", e=>{
-        let link = e.target.closest("a");
-        if(link) showRefHint(link);
-    });
+    document.body.addEventListener("mouseover", showRefHintListener);
+    document.body.addEventListener("focus", showRefHintListener);
 
-    document.body.addEventListener("click", (e) => {
-        // If not handled already, just hide all link panels.
-        hideAllRefHints();
-    });
+    document.body.addEventListener("click", hideAllHintsListener);
 });
 
 window.addEventListener("resize", () => {