From 43afa3e1fb3400749cea1da59010b606294c4a74 Mon Sep 17 00:00:00 2001
From: Michiel De Backker <mail@backkem.me>
Date: Wed, 13 Dec 2023 07:16:26 +0000
Subject: [PATCH] Escape ampersand.

SHA: 71d142a7c4143bbb7d0aa2db14ff9c514f7c3c48
Reason: push, by backkem

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
---
 index.html | 921 +++++++++++++++++++++++++++++++++++++++--------------
 1 file changed, 677 insertions(+), 244 deletions(-)

diff --git a/index.html b/index.html
index 18ec83d..ed4f584 100644
--- a/index.html
+++ b/index.html
@@ -4,9 +4,9 @@
   <title>Local Peer-to-Peer API</title>
   <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
   <link href="https://www.w3.org/StyleSheets/TR/2021/cg-draft" rel="stylesheet">
-  <meta content="Bikeshed version 82ce88815, updated Thu Sep 7 16:33:55 2023 -0700" name="generator">
+  <meta content="Bikeshed version 5dc73194b, updated Mon Dec 11 17:50:16 2023 -0800" name="generator">
   <link href="https://WICG.github.io/local-peer-to-peer/" rel="canonical">
-  <meta content="31cdf704ce84c0e362e489e9ad8534d2768961b6" name="document-revision">
+  <meta content="71d142a7c4143bbb7d0aa2db14ff9c514f7c3c48" name="revision">
 <style>/* Boilerplate: style-autolinks */
 .css.css, .property.property, .descriptor.descriptor {
     color: var(--a-normal-text);
@@ -332,11 +332,15 @@
 :root {
     --dfnpanel-bg: #ddd;
     --dfnpanel-text: var(--text);
+    --dfnpanel-target-bg: #ffc;
+    --dfnpanel-target-outline: orange;
 }
 @media (prefers-color-scheme: dark) {
     :root {
         --dfnpanel-bg: #222;
         --dfnpanel-text: var(--text);
+        --dfnpanel-target-bg: #333;
+        --dfnpanel-target-outline: silver;
     }
 }
 .dfn-panel {
@@ -359,11 +363,13 @@
 .dfn-panel > b { display: block; }
 .dfn-panel a { color: var(--dfnpanel-text); }
 .dfn-panel a:not(:hover) { text-decoration: none !important; border-bottom: none !important; }
+.dfn-panel a:focus {
+    outline: 5px auto Highlight;
+    outline: 5px auto -webkit-focus-ring-color;
+}
 .dfn-panel > b + b { margin-top: 0.25em; }
 .dfn-panel ul { padding: 0 0 0 1em; list-style: none; }
 .dfn-panel li a {
-    white-space: pre;
-    display: inline-block;
     max-width: calc(300px - 1.5em - 1em);
     overflow: hidden;
     text-overflow: ellipsis;
@@ -372,67 +378,79 @@
 .dfn-panel.activated {
     display: inline-block;
     position: fixed;
-    left: .5em;
+    left: 8px;
     bottom: 2em;
     margin: 0 auto;
     max-width: calc(100vw - 1.5em - .4em - .5em);
     max-height: 30vh;
+    transition: left 1s ease-out, bottom 1s ease-out;
 }
 
-.dfn-paneled[role="button"] { cursor: pointer; }
-</style>
-<style>/* Boilerplate: style-dfn-panel */
-:root {
-    --dfnpanel-bg: #ddd;
-    --dfnpanel-text: var(--text);
+.dfn-panel .link-item:hover {
+    text-decoration: underline;
 }
-@media (prefers-color-scheme: dark) {
-    :root {
-        --dfnpanel-bg: #222;
-        --dfnpanel-text: var(--text);
-    }
+.dfn-panel .link-item .copy-icon {
+    opacity: 0;
 }
-.dfn-panel {
-    position: absolute;
-    z-index: 35;
-    width: 20em;
-    width: 300px;
-    height: auto;
-    max-height: 500px;
-    overflow: auto;
-    padding: 0.5em 0.75em;
-    font: small Helvetica Neue, sans-serif, Droid Sans Fallback;
-    background: var(--dfnpanel-bg);
-    color: var(--dfnpanel-text);
-    border: outset 0.2em;
-    white-space: normal; /* in case it's moved into a pre */
+.dfn-panel .link-item:hover .copy-icon,
+.dfn-panel .link-item .copy-icon:focus {
+    opacity: 1;
 }
-.dfn-panel:not(.on) { display: none; }
-.dfn-panel * { margin: 0; padding: 0; text-indent: 0; }
-.dfn-panel > b { display: block; }
-.dfn-panel a { color: var(--dfnpanel-text); }
-.dfn-panel a:not(:hover) { text-decoration: none !important; border-bottom: none !important; }
-.dfn-panel > b + b { margin-top: 0.25em; }
-.dfn-panel ul { padding: 0 0 0 1em; list-style: none; }
-.dfn-panel li a {
-    white-space: pre;
+
+.dfn-panel .copy-icon {
     display: inline-block;
-    max-width: calc(300px - 1.5em - 1em);
-    overflow: hidden;
-    text-overflow: ellipsis;
+    margin-right: 0.5em;
+    width: 0.85em;
+    height: 1em;
+    border-radius: 3px;
+    background-color: #ccc;
+    cursor: pointer;
 }
 
-.dfn-panel.activated {
-    display: inline-block;
-    position: fixed;
-    left: .5em;
-    bottom: 2em;
-    margin: 0 auto;
-    max-width: calc(100vw - 1.5em - .4em - .5em);
-    max-height: 30vh;
+.dfn-panel .copy-icon .icon {
+    width: 100%;
+    height: 100%;
+    background-color: #fff;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+}
+
+.dfn-panel .copy-icon .icon::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border: 1px solid black;
+    background-color: #ccc;
+    opacity: 0.25;
+    transform: translate(3px, -3px);
 }
 
-.dfn-paneled[role="button"] { cursor: pointer; }
+.dfn-panel .copy-icon:active .icon::before {
+    opacity: 1;
+}
+
+.dfn-paneled[role="button"] { cursor: help; }
+
+.highlighted {
+    animation: target-fade 3s;
+}
+
+@keyframes target-fade {
+    from {
+        background-color: var(--dfnpanel-target-bg);
+        outline: 5px solid var(--dfnpanel-target-outline);
+    }
+    to {
+        color: var(--a-normal-text);
+        background-color: transparent;
+        outline: transparent;
+    }
+}
 </style>
 <style>/* Boilerplate: style-issues */
 a[href].issue-return {
@@ -453,6 +471,43 @@
     margin-bottom: 0;
 }
 </style>
+<style>/* Boilerplate: style-ref-hints */
+:root {
+    --ref-hint-bg: #ddd;
+    --ref-hint-text: var(--text);
+}
+@media (prefers-color-scheme: dark) {
+    :root {
+        --ref-hint-bg: #222;
+        --ref-hint-text: var(--text);
+    }
+}
+
+.ref-hint {
+    display: none;
+    position: absolute;
+    z-index: 35;
+    width: 20em;
+    width: 300px;
+    height: auto;
+    max-height: 500px;
+    overflow: auto;
+    padding: 0.5em 0.5em;
+    font: small Helvetica Neue, sans-serif, Droid Sans Fallback;
+    background: var(--ref-hint-bg);
+    color: var(--ref-hint-text);
+    border: outset 0.2em;
+    white-space: normal; /* in case it's moved into a pre */
+}
+
+.ref-hint.on {
+    display: inline-block;
+}
+
+.ref-hint * { margin: 0; padding: 0; text-indent: 0; }
+
+.ref-hint ul { padding: 0 0 0 1em; list-style: none; }
+</style>
 <style>/* Boilerplate: style-selflinks */
 
 :root {
@@ -512,13 +567,6 @@
 a.self-link::before            { content: "¶"; }
 .heading > a.self-link::before { content: "§"; }
 dfn > a.self-link::before      { content: "#"; }
-</style>
-<style>/* Boilerplate: style-syntax-highlighting */
-
-            pre.idl.highlight {
-                background: var(--borderedblock-bg, var(--def-bg));
-            }
-            
 </style>
 <style>/* Boilerplate: style-syntax-highlighting */
 
@@ -647,7 +695,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">Local Peer-to-Peer API</h1>
-   <p id="w3c-state"><a href="https://www.w3.org/standards/types#CG-DRAFT">Draft Community Group Report</a>, <time class="dt-updated" datetime="2023-12-06">6 December 2023</time></p>
+   <p id="w3c-state"><a href="https://www.w3.org/standards/types#CG-DRAFT">Draft Community Group Report</a>, <time class="dt-updated" datetime="2023-12-13">13 December 2023</time></p>
    <div data-fill-with="spec-metadata">
     <dl>
      <dt>This version:
@@ -1559,163 +1607,179 @@ <h2 class="no-num no-ref heading settled" id="issues-index"><span class="content
 <script>/* Boilerplate: script-dfn-panel */
 "use strict";
 {
-    const dfnsJson = window.dfnsJson || {};
-
-    function genDfnPanel({dfnID, url, dfnText, refSections, external}) {
-        return mk.aside({
-            class: "dfn-panel",
-            id: `infopanel-for-${dfnID}`,
-            "data-for": dfnID,
-            "aria-labelled-by":`infopaneltitle-for-${dfnID}`,
-            },
-            mk.span({id:`infopaneltitle-for-${dfnID}`, style:"display:none"},
-                `Info about the '${dfnText}' ${external?"external":""} reference.`),
-            mk.a({href:url}, 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})`
-                                ),
-                                " ",
-                            ]
-                        ),
-                    ),
-                ),
-            ),
-        );
-    }
-
-    function genAllDfnPanels() {
-        for(const panelData of Object.values(window.dfnpanelData)) {
-            const dfnID = panelData.dfnID;
-            const dfn = document.getElementById(dfnID);
-            if(!dfn) {
-                console.log(`Can't find dfn#${dfnID}.`, panelData);
-            } else {
-                const panel = genDfnPanel(panelData);
-                append(document.body, panel);
-                insertDfnPopupAction(dfn, panel)
-            }
+    // Functions, divided by link type, that wrap an autolink's
+    // contents with the appropriate outer syntax.
+    // Alternately, a string naming another type they format
+    // the same as.
+    const typeFormatters = {
+        'dfn': (text) => `[=${text}=]`,
+        'abstract-op': (text) => `[\$${text}\$]`,
+        'value': (text) => `''${text}''`,
+        'http-header': (text) => `[:${text}:]`,
+        'idl': (text) => `{{${text}}}`,
+        'interface': 'idl',
+        'constructor': 'idl',
+        'method': 'idl',
+        'argument': 'idl',
+        'attribute': 'idl',
+        'callback': 'idl',
+        'dictionary': 'idl',
+        'dict-member': 'idl',
+        'enum': 'idl',
+        'enum-value': 'idl',
+        'exception': 'idl',
+        'const': 'idl',
+        'typedef': 'idl',
+        'stringifier': 'idl',
+        'serializer': 'idl',
+        'iterator': 'idl',
+        'maplike': 'idl',
+        'setlike': 'idl',
+        'extended-attribute': 'idl',
+        'event': 'idl',
+        'element': (element) => `<{${element}}>`,
+        'element-state': 'element',
+        'element-attr': 'element',
+        'attr-value': 'element',
+        'scheme': 'dfn',
+        'permission': 'dfn',
+        'grammar': (text) => `${text} (within a <pre class=prod>)`,
+        'type': (text)=> `<<${text}>>`,
+        'property': (text) => `'${text}'`,
+        'descriptor': 'property',
+        'function': 'value',
+        'at-rule': 'value',
+        'selector': 'value',
+    };
+    const typesUsingFor = new Set(
+        [
+            "descriptor",
+            "value",
+            "element-attr",
+            "attr-value",
+            "element-state",
+            "method",
+            "constructor",
+            "argument",
+            "attribute",
+            "const",
+            "dict-member",
+            "event",
+            "enum-value",
+            "stringifier",
+            "serializer",
+            "iterator",
+            "maplike",
+            "setlike",
+            "state",
+            "mode",
+            "context",
+            "facet",
+        ],
+    )
+    const typesNotUsingFor = new Set(
+        [
+            "property",
+            "element",
+            "interface",
+            "namespace",
+            "callback",
+            "dictionary",
+            "enum",
+            "exception",
+            "typedef",
+            "http-header",
+            "permission",
+        ],
+    )
+    function linkFormatterFromType(type) {
+        const fnOrType = typeFormatters[type];
+        if(typeof fnOrType === 'string') {
+            // follow the alias
+            return linkFormatterFromType(fnOrType);
         }
-    }
-
-    document.addEventListener("DOMContentLoaded", ()=>{
-        genAllDfnPanels();
+        return fnOrType;
+    };
 
-        // Add popup behavior to all dfns to show the corresponding dfn-panel.
-        var dfns = queryAll('.dfn-paneled');
-        for(let dfn of dfns) { ; }
+    function genLinkingSyntaxes(dfn) {
+        if(dfn.tagName != "DFN") return;
 
-        document.body.addEventListener("click", (e) => {
-            // If not handled already, just hide all dfn panels.
-            hideAllDfnPanels();
-        });
-    })
-
-
-    function hideAllDfnPanels() {
-        // Turn off any currently "on" or "activated" panels.
-        queryAll(".dfn-panel.on, .dfn-panel.activated").forEach(el=>hideDfnPanel(el));
-    }
-
-    function showDfnPanel(dfnPanel, dfn) {
-        hideAllDfnPanels(); // Only display one at this time.
-        dfn.setAttribute("aria-expanded", "true");
-        dfnPanel.classList.add("on");
-        dfnPanel.style.left = "5px";
-        dfnPanel.style.top = "0px";
-        const panelRect = dfnPanel.getBoundingClientRect();
-        const panelWidth = panelRect.right - panelRect.left;
-        if (panelRect.right > document.body.scrollWidth) {
-            // Panel's overflowing the screen.
-            // Just drop it below the dfn and flip it rightward instead.
-            // This still wont' fix things if the screen is *really* wide,
-            // but fixing that's a lot harder without 'anchor()'.
-            dfnPanel.style.top = "1.5em";
-            dfnPanel.style.left = "auto";
-            dfnPanel.style.right = "0px";
+        const type = dfn.getAttribute('data-dfn-type');
+        if(!type) {
+            console.log(`<dfn> doesn't have a data-dfn-type:`, dfn);
+            return [];
         }
-    }
 
-    function pinDfnPanel(dfnPanel) {
-        // Switch it to "activated" state, which pins it.
-        dfnPanel.classList.add("activated");
-        dfnPanel.style.left = null;
-        dfnPanel.style.top = null;
-    }
-
-    function hideDfnPanel(dfnPanel, dfn) {
-        if(!dfn) {
-            dfn = document.getElementById(dfnPanel.getAttribute("data-for"));
+        // Return a function that wraps link text based on the type
+        const linkFormatter = linkFormatterFromType(type);
+        if(!linkFormatter) {
+            console.log(`<dfn> has an unknown data-dfn-type:`, dfn);
+            return [];
         }
-        dfn.setAttribute("aria-expanded", "false")
-        dfnPanel.classList.remove("on");
-        dfnPanel.classList.remove("activated");
-    }
 
-    function toggleDfnPanel(dfnPanel, dfn) {
-        if(dfnPanel.classList.contains("on")) {
-            hideDfnPanel(dfnPanel, dfn);
+        let ltAlts;
+        if(dfn.hasAttribute('data-lt')) {
+            ltAlts = dfn.getAttribute('data-lt')
+                .split("|")
+                .map(x=>x.trim());
         } else {
-            showDfnPanel(dfnPanel, dfn);
+            ltAlts = [dfn.textContent.trim()];
         }
-    }
-
-    function insertDfnPopupAction(dfn, dfnPanel) {
-        // Find dfn panel
-        const panelWrapper = document.createElement('span');
-        panelWrapper.appendChild(dfnPanel);
-        panelWrapper.style.position = "relative";
-        panelWrapper.style.height = "0px";
-        dfn.insertAdjacentElement("afterend", panelWrapper);
-        dfn.setAttribute('role', 'button');
-        dfn.setAttribute('aria-expanded', 'false')
-        dfn.tabIndex = 0;
-        dfn.classList.add('has-dfn-panel');
-        dfn.addEventListener('click', (event) => {
-            showDfnPanel(dfnPanel, dfn);
-            event.stopPropagation();
-        });
-        dfn.addEventListener('keypress', (event) => {
-            const kc = event.keyCode;
-            // 32->Space, 13->Enter
-            if(kc == 32 || kc == 13) {
-                toggleDfnPanel(dfnPanel, dfn);
-                event.stopPropagation();
-                event.preventDefault();
+        if(type == "type") {
+            // lt of "<foo>", but "foo" is the interior;
+            // <<foo/bar>> is how you write it with a for,
+            // not <foo/<bar>> or whatever.
+            for(var i = 0; i < ltAlts.length; i++) {
+                const lt = ltAlts[i];
+                const match = /<(.*)>/.exec(lt);
+                if(match) { ltAlts[i] = match[1]; }
             }
-        });
+        }
 
-        dfnPanel.addEventListener('click', (event) => {
-            if (event.target.nodeName == 'A') {
-                pinDfnPanel(dfnPanel);
-            }
-            event.stopPropagation();
-        });
+        let forAlts;
+        if(dfn.hasAttribute('data-dfn-for')) {
+            forAlts = dfn.getAttribute('data-dfn-for')
+                .split(",")
+                .map(x=>x.trim());
+        } else {
+            forAlts = [''];
+        }
 
-        dfnPanel.addEventListener('keydown', (event) => {
-            if(event.keyCode == 27) { // Escape key
-                hideDfnPanel(dfnPanel, dfn);
-                event.stopPropagation();
-                event.preventDefault();
+        let linkingSyntaxes = [];
+        if(!typesUsingFor.has(type)) {
+            for(const lt of ltAlts) {
+                linkingSyntaxes.push(linkFormatter(lt));
             }
-        })
+        }
+        if(!typesNotUsingFor.has(type)) {
+            for(const f of forAlts) {
+                linkingSyntaxes.push(linkFormatter(`${f}/${ltAlts[0]}`))
+            }
+        }
+        return [
+            mk.b({}, 'Possible linking syntaxes:'),
+            mk.ul({},
+                ...linkingSyntaxes.map(link => {
+                    const copyLink = async () =>
+                        await navigator.clipboard.writeText(link);
+                    return mk.li({},
+                        mk.div({ class: 'link-item' },
+                            mk.button({
+                                class: 'copy-icon', title: 'Copy',
+                                type: 'button',
+                                _onclick: copyLink,
+                                tabindex: 0,
+                            }, mk.span({ class: 'icon' }) ),
+                            mk.span({}, link)
+                        )
+                    );
+                })
+            )
+        ];
     }
-}
-</script>
-<script>/* Boilerplate: script-dfn-panel */
-"use strict";
-{
-    const dfnsJson = window.dfnsJson || {};
 
-    function genDfnPanel({dfnID, url, dfnText, refSections, external}) {
-        return mk.aside({
+    function genDfnPanel({ dfn, dfnID, url, dfnText, refSections, external }) {
+        const dfnPanel = mk.aside({
             class: "dfn-panel",
             id: `infopanel-for-${dfnID}`,
             "data-for": dfnID,
@@ -1723,16 +1787,14 @@ <h2 class="no-num no-ref heading settled" id="issues-index"><span class="content
             },
             mk.span({id:`infopaneltitle-for-${dfnID}`, style:"display:none"},
                 `Info about the '${dfnText}' ${external?"external":""} reference.`),
-            mk.a({href:url}, url),
+            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}`
-                                    },
+                                mk.a({ href: `#${ref.id}` },
                                     (refI == 0) ? section.title : `(${refI + 1})`
                                 ),
                                 " ",
@@ -1741,7 +1803,11 @@ <h2 class="no-num no-ref heading settled" id="issues-index"><span class="content
                     ),
                 ),
             ),
+            genLinkingSyntaxes(dfn),
         );
+        dfnPanel.forDfn = dfn;
+        if(!dfn) { console.log(dfnPanel); }
+        return dfnPanel;
     }
 
     function genAllDfnPanels() {
@@ -1750,96 +1816,101 @@ <h2 class="no-num no-ref heading settled" id="issues-index"><span class="content
             const dfn = document.getElementById(dfnID);
             if(!dfn) {
                 console.log(`Can't find dfn#${dfnID}.`, panelData);
-            } else {
-                const panel = genDfnPanel(panelData);
-                append(document.body, panel);
-                insertDfnPopupAction(dfn, panel)
+                continue;
             }
+            const panel = genDfnPanel({ ...panelData, dfn });
+            append(document.body, panel);
+            insertDfnPopupAction(panel)
         }
     }
 
     document.addEventListener("DOMContentLoaded", ()=>{
         genAllDfnPanels();
 
-        // Add popup behavior to all dfns to show the corresponding dfn-panel.
-        var dfns = queryAll('.dfn-paneled');
-        for(let dfn of dfns) { ; }
-
         document.body.addEventListener("click", (e) => {
             // If not handled already, just hide all dfn panels.
             hideAllDfnPanels();
         });
     })
 
-
     function hideAllDfnPanels() {
         // Turn off any currently "on" or "activated" panels.
         queryAll(".dfn-panel.on, .dfn-panel.activated").forEach(el=>hideDfnPanel(el));
     }
 
-    function showDfnPanel(dfnPanel, dfn) {
+    function showDfnPanel(dfnPanel) {
         hideAllDfnPanels(); // Only display one at this time.
+
+        const dfn = dfnPanel.forDfn;
         dfn.setAttribute("aria-expanded", "true");
+
         dfnPanel.classList.add("on");
-        dfnPanel.style.left = "5px";
-        dfnPanel.style.top = "0px";
-        const panelRect = dfnPanel.getBoundingClientRect();
-        const panelWidth = panelRect.right - panelRect.left;
-        if (panelRect.right > document.body.scrollWidth) {
-            // Panel's overflowing the screen.
-            // Just drop it below the dfn and flip it rightward instead.
-            // This still wont' fix things if the screen is *really* wide,
-            // but fixing that's a lot harder without 'anchor()'.
-            dfnPanel.style.top = "1.5em";
-            dfnPanel.style.left = "auto";
-            dfnPanel.style.right = "0px";
+        positionDfnPanel(dfnPanel);
+
+        let tabIndex = 100;
+        dfn.tabIndex = tabIndex++;
+        // Increment tabindex for each anchor and button tags in panel
+        const tabbable = dfnPanel.querySelectorAll(":is(a, button)");
+        for (const el of tabbable) {
+            el.tabIndex = tabIndex++;
         }
     }
 
+    function positionDfnPanel(dfnPanel) {
+        const dfn = dfnPanel.forDfn;
+        const dfnPos = getRootLevelAbsolutePosition(dfn);
+        dfnPanel.style.top = dfnPos.bottom + "px";
+        dfnPanel.style.left = dfnPos.left + "px";
+
+        const panelPos = dfnPanel.getBoundingClientRect();
+        const panelMargin = 8;
+        const maxRight = document.body.parentNode.clientWidth - panelMargin;
+        if (panelPos.right > maxRight) {
+            const overflowAmount = panelPos.right - maxRight;
+            const newLeft = Math.max(panelMargin, dfnPos.left - overflowAmount);
+            dfnPanel.style.left = newLeft + "px";
+        }}
+
     function pinDfnPanel(dfnPanel) {
         // Switch it to "activated" state, which pins it.
         dfnPanel.classList.add("activated");
+        dfnPanel.style.position = "fixed";
         dfnPanel.style.left = null;
         dfnPanel.style.top = null;
     }
 
-    function hideDfnPanel(dfnPanel, dfn) {
-        if(!dfn) {
-            dfn = document.getElementById(dfnPanel.getAttribute("data-for"));
-        }
-        dfn.setAttribute("aria-expanded", "false")
+    function hideDfnPanel(dfnPanel) {
+        const dfn = dfnPanel.forDfn;
+        dfn.setAttribute("aria-expanded", "false");
+        dfn.tabIndex = undefined;
+        dfnPanel.style.position = "absolute"; // unfix it
         dfnPanel.classList.remove("on");
         dfnPanel.classList.remove("activated");
     }
 
-    function toggleDfnPanel(dfnPanel, dfn) {
+    function toggleDfnPanel(dfnPanel) {
         if(dfnPanel.classList.contains("on")) {
-            hideDfnPanel(dfnPanel, dfn);
+            hideDfnPanel(dfnPanel);
         } else {
-            showDfnPanel(dfnPanel, dfn);
+            showDfnPanel(dfnPanel);
         }
     }
 
-    function insertDfnPopupAction(dfn, dfnPanel) {
-        // Find dfn panel
-        const panelWrapper = document.createElement('span');
-        panelWrapper.appendChild(dfnPanel);
-        panelWrapper.style.position = "relative";
-        panelWrapper.style.height = "0px";
-        dfn.insertAdjacentElement("afterend", panelWrapper);
+    function insertDfnPopupAction(dfnPanel) {
+        const dfn = dfnPanel.forDfn;
         dfn.setAttribute('role', 'button');
         dfn.setAttribute('aria-expanded', 'false')
         dfn.tabIndex = 0;
         dfn.classList.add('has-dfn-panel');
         dfn.addEventListener('click', (event) => {
-            showDfnPanel(dfnPanel, dfn);
+            showDfnPanel(dfnPanel);
             event.stopPropagation();
         });
         dfn.addEventListener('keypress', (event) => {
             const kc = event.keyCode;
             // 32->Space, 13->Enter
             if(kc == 32 || kc == 13) {
-                toggleDfnPanel(dfnPanel, dfn);
+                toggleDfnPanel(dfnPanel);
                 event.stopPropagation();
                 event.preventDefault();
             }
@@ -1847,9 +1918,11 @@ <h2 class="no-num no-ref heading settled" id="issues-index"><span class="content
 
         dfnPanel.addEventListener('click', (event) => {
             if (event.target.nodeName == 'A') {
+                scrollToTargetAndHighlight(event);
                 pinDfnPanel(dfnPanel);
             }
             event.stopPropagation();
+            refocusOnTarget(event);
         });
 
         dfnPanel.addEventListener('keydown', (event) => {
@@ -1860,6 +1933,72 @@ <h2 class="no-num no-ref heading settled" id="issues-index"><span class="content
             }
         })
     }
+
+    function refocusOnTarget(event) {
+        const target = event.target;
+        setTimeout(() => {
+            // Refocus on the event.target element.
+            // This is needed after browser scrolls to the destination.
+            target.focus();
+        });
+    }
+
+    // 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;
+        }
+        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
+        );
+    }
+
+    function scrollToTargetAndHighlight(event) {
+        let hash = event.target.hash;
+        if (hash) {
+            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);
+            }
+        }
+    }
+
+    window.addEventListener("resize", () => {
+        // Pin any visible dfn panel
+        queryAll(".dfn-panel.on, .dfn-panel.activated").forEach(el=>positionDfnPanel(el));
+    });
 }
 </script>
 <script>/* Boilerplate: script-dfn-panel-json */
@@ -2142,4 +2281,298 @@ <h2 class="no-num no-ref heading settled" id="issues-index"><span class="content
 		return el.content;
 	}
 }
+</script>
+<script>/* Boilerplate: script-ref-hints */
+"use strict";
+{
+    function genRefHint(link, ref) {
+        const linkText = link.textContent;
+        let dfnTextElements = '';
+        if (ref.text != linkText) {
+            dfnTextElements =
+                mk.li({},
+                    mk.b({}, "DFN: "),
+                    mk.code({ class: "dfn-text" }, ref.text)
+                );
+        }
+        const forList = ref.for_;
+        const forListElements = forList.length === 0 ? '' : mk.li({},
+            mk.b({}, "For: "),
+            mk.ul({},
+                ...forList.map(forItem =>
+                    mk.li({},
+                        mk.span({}, `${forItem}`)
+                    ),
+                ),
+            ),
+        );
+        const url = ref.url;
+        const safeUrl = encodeURIComponent(url);
+        const hintPanel = mk.aside({
+            class: "ref-hint",
+            id: `ref-hint-for-${safeUrl}`,
+            "data-for": url,
+            "aria-labelled-by": `ref-hint-for-${safeUrl}`,
+        },
+            mk.ul({},
+                dfnTextElements,
+                mk.li({},
+                    mk.b({}, "URL: "),
+                    mk.a({ href: url, class: "ref" }, url),
+                ),
+                mk.li({},
+                    mk.b({}, "Type: "),
+                    mk.span({}, `${ref.type}`),
+                ),
+                mk.li({},
+                    mk.b({}, "Spec: "),
+                    mk.span({}, `${ref.spec ? ref.spec : ''}`),
+                ),
+                forListElements
+            ),
+        );
+        hintPanel.forLink = link;
+        return hintPanel;
+    }
+    function genAllRefHints() {
+        for(const refData of Object.values(window.refsData)) {
+            const refUrl = refData.url;
+            const links = document.querySelectorAll(`a[href="${refUrl}"]`);
+            if (links.length == 0) {
+                console.log(`Can't find link href="${refUrl}".`, refData);
+                continue;
+            }
+            for (let i = 0; i < links.length; i++) {
+                const link = links[i];
+                const hint = genRefHint(link, refData);
+                append(document.body, hint);
+                insertLinkPopupAction(hint)
+            }
+        }
+    }
+
+    function hideAllRefHints() {
+        queryAll(".ref-hint.on").forEach(el=>hideRefHint(el));
+    }
+
+    function hideRefHint(refHint) {
+        const link = refHint.forLink;
+        link.setAttribute("aria-expanded", "false");
+        refHint.style.position = "absolute"; // unfix it
+        refHint.classList.remove("on");
+        const teardown = refHint.teardownEventListeners;
+        if (teardown) {
+            refHint.teardownEventListeners = undefined;
+            teardown();
+        }
+    }
+
+    function showRefHint(refHint) {
+        hideAllRefHints(); // Only display one at this time.
+
+        const link = refHint.forLink;
+        link.setAttribute("aria-expanded", "true");
+        refHint.classList.add("on");
+        positionRefHint(refHint);
+        setupRefHintEventListeners(refHint);
+    }
+
+    function setupRefHintEventListeners(refHint) {
+        if (refHint.teardownEventListeners) return;
+        const link = refHint.forLink;
+        // Add event handlers to hide the refHint after the user moves away
+        // from both the link and refHint, if not hovering either within one second.
+        let timeout = null;
+        const startHidingRefHint = (event) => {
+            if (timeout) {
+                clearTimeout(timeout);
+            }
+            timeout = setTimeout(() => {
+                hideRefHint(refHint);
+            }, 1000);
+        }
+        const resetHidingRefHint = (event) => {
+            if (timeout) clearTimeout(timeout);
+            timeout = null;
+        };
+        link.addEventListener("mouseleave", startHidingRefHint);
+        link.addEventListener("mouseenter", resetHidingRefHint);
+        link.addEventListener("blur", startHidingRefHint);
+        link.addEventListener("focus", resetHidingRefHint);
+        refHint.addEventListener("mouseleave", startHidingRefHint);
+        refHint.addEventListener("mouseenter", resetHidingRefHint);
+        refHint.addEventListener("blur", startHidingRefHint);
+        refHint.addEventListener("focus", resetHidingRefHint);
+
+        refHint.teardownEventListeners = () => {
+            // remove event listeners
+            resetHidingRefHint();
+            link.removeEventListener("mouseleave", startHidingRefHint);
+            link.removeEventListener("mouseenter", resetHidingRefHint);
+            link.removeEventListener("blur", startHidingRefHint);
+            link.removeEventListener("focus", resetHidingRefHint);
+            refHint.removeEventListener("mouseleave", startHidingRefHint);
+            refHint.removeEventListener("mouseenter", resetHidingRefHint);
+            refHint.removeEventListener("blur", startHidingRefHint);
+            refHint.removeEventListener("focus", resetHidingRefHint);
+        };
+    }
+
+    function positionRefHint(refHint) {
+        const link = refHint.forLink;
+        const linkPos = getRootLevelAbsolutePosition(link);
+        refHint.style.top = linkPos.bottom + "px";
+        refHint.style.left = linkPos.left + "px";
+
+        const panelPos = refHint.getBoundingClientRect();
+        const panelMargin = 8;
+        const maxRight = document.body.parentNode.clientWidth - panelMargin;
+        if (panelPos.right > maxRight) {
+            const overflowAmount = panelPos.right - maxRight;
+            const newLeft = Math.max(panelMargin, linkPos.left - overflowAmount);
+            refHint.style.left = newLeft + "px";
+        }
+    }
+
+    // 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;
+        }
+        return {
+            left: xPos,
+            top: yPos,
+            right: xPos + boundsRect.width,
+            bottom: yPos + boundsRect.height,
+        };
+    }
+
+    function insertLinkPopupAction(refHint) {
+        const link = refHint.forLink;
+        // link.setAttribute('role', 'button');
+        link.setAttribute('aria-expanded', 'false')
+        link.classList.add('has-ref-hint');
+        link.addEventListener('mouseover', (event) => {
+            showRefHint(refHint);
+        });
+        link.addEventListener('focus', (event) => {
+            showRefHint(refHint);
+        })
+    }
+
+    document.addEventListener("DOMContentLoaded", () => {
+        genAllRefHints();
+
+        document.body.addEventListener("click", (e) => {
+            // If not handled already, just hide all link panels.
+            hideAllRefHints();
+        });
+    });
+
+    window.addEventListener("resize", () => {
+        // Hide any open ref hint.
+        hideAllRefHints();
+    });
+}
+</script>
+<script>/* Boilerplate: script-ref-hints-json */
+window.refsData = {};
+window.refsData['https://w3c.github.io/webappsec-permissions-policy/#policy-controlled-feature'] = {"text": "policy-controlled feature", "type": "dfn", "spec": "permissions-policy-1", "shortname": "permissions-policy", "level": "1", "status": "current", "url": "https://w3c.github.io/webappsec-permissions-policy/#policy-controlled-feature", "export": true, "normative": true, "for_": []};
+window.refsData['https://w3c.github.io/webappsec-permissions-policy/#policy-controlled-feature-default-allowlist'] = {"text": "default allowlist", "type": "dfn", "spec": "permissions-policy-1", "shortname": "permissions-policy", "level": "1", "status": "current", "url": "https://w3c.github.io/webappsec-permissions-policy/#policy-controlled-feature-default-allowlist", "export": true, "normative": true, "for_": ["policy-controlled feature"]};
+window.refsData['https://html.spec.whatwg.org/multipage/browsers.html#same-origin'] = {"text": "same origin", "type": "dfn", "spec": "html", "shortname": "html", "level": "1", "status": "current", "url": "https://html.spec.whatwg.org/multipage/browsers.html#same-origin", "export": true, "normative": true, "for_": []};
+window.refsData['https://html.spec.whatwg.org/multipage/iframe-embed-object.html#allowed-to-use'] = {"text": "allowed to use", "type": "dfn", "spec": "html", "shortname": "html", "level": "1", "status": "current", "url": "https://html.spec.whatwg.org/multipage/iframe-embed-object.html#allowed-to-use", "export": true, "normative": true, "for_": []};
+window.refsData['#peer'] = {"text": "peer", "type": "dfn", "spec": "local-peer-to-peer-1", "shortname": "local-peer-to-peer", "level": "1", "status": "local", "url": "#peer", "export": true, "normative": true, "for_": []};
+window.refsData['#start-local-peer-discovery'] = {"text": "start local peer discovery", "type": "dfn", "spec": "local-peer-to-peer-1", "shortname": "local-peer-to-peer", "level": "1", "status": "local", "url": "#start-local-peer-discovery", "export": true, "normative": true, "for_": []};
+window.refsData['#establish-local-peer-connection'] = {"text": "establish local peer connection", "type": "dfn", "spec": "local-peer-to-peer-1", "shortname": "local-peer-to-peer", "level": "1", "status": "local", "url": "#establish-local-peer-connection", "export": true, "normative": true, "for_": []};
+window.refsData['#acquire-a-local-peer-grant'] = {"text": "acquire a local peer grant", "type": "dfn", "spec": "local-peer-to-peer-1", "shortname": "local-peer-to-peer", "level": "1", "status": "local", "url": "#acquire-a-local-peer-grant", "export": true, "normative": true, "for_": []};
+window.refsData['#local-peer-to-peer-manager'] = {"text": "local peer-to-peer manager", "type": "dfn", "spec": "local-peer-to-peer-1", "shortname": "local-peer-to-peer", "level": "1", "status": "local", "url": "#local-peer-to-peer-manager", "export": true, "normative": true, "for_": []};
+window.refsData['https://infra.spec.whatwg.org/#ordered-map'] = {"text": "ordered map", "type": "dfn", "spec": "infra", "shortname": "infra", "level": "1", "status": "current", "url": "https://infra.spec.whatwg.org/#ordered-map", "export": true, "normative": true, "for_": []};
+window.refsData['#known-peer'] = {"text": "known peer", "type": "dfn", "spec": "local-peer-to-peer-1", "shortname": "local-peer-to-peer", "level": "1", "status": "local", "url": "#known-peer", "export": true, "normative": true, "for_": []};
+window.refsData['#authentication-state'] = {"text": "authentication state", "type": "dfn", "spec": "local-peer-to-peer-1", "shortname": "local-peer-to-peer", "level": "1", "status": "local", "url": "#authentication-state", "export": true, "normative": true, "for_": []};
+window.refsData['#peer-grant-state'] = {"text": "peer grant state", "type": "dfn", "spec": "local-peer-to-peer-1", "shortname": "local-peer-to-peer", "level": "1", "status": "local", "url": "#peer-grant-state", "export": true, "normative": true, "for_": []};
+window.refsData['#persisted'] = {"text": "persisted", "type": "dfn", "spec": "local-peer-to-peer-1", "shortname": "local-peer-to-peer", "level": "1", "status": "local", "url": "#persisted", "export": true, "normative": true, "for_": []};
+window.refsData['#session-advertise-agent'] = {"text": "advertise agent", "type": "dfn", "spec": "local-peer-to-peer-1", "shortname": "local-peer-to-peer", "level": "1", "status": "local", "url": "#session-advertise-agent", "export": true, "normative": true, "for_": ["session"]};
+window.refsData['#known-peers-map'] = {"text": "known peers map", "type": "dfn", "spec": "local-peer-to-peer-1", "shortname": "local-peer-to-peer", "level": "1", "status": "local", "url": "#known-peers-map", "export": true, "normative": true, "for_": []};
+window.refsData['#session-discover-agents'] = {"text": "discover agents", "type": "dfn", "spec": "local-peer-to-peer-1", "shortname": "local-peer-to-peer", "level": "1", "status": "local", "url": "#session-discover-agents", "export": true, "normative": true, "for_": ["session"]};
+window.refsData['#session-authenticate-an-agent'] = {"text": "authenticate an agent", "type": "dfn", "spec": "local-peer-to-peer-1", "shortname": "local-peer-to-peer", "level": "1", "status": "local", "url": "#session-authenticate-an-agent", "export": true, "normative": true, "for_": ["session"]};
+window.refsData['#authenticated'] = {"text": "authenticated", "type": "dfn", "spec": "local-peer-to-peer-1", "shortname": "local-peer-to-peer", "level": "1", "status": "local", "url": "#authenticated", "export": true, "normative": true, "for_": []};
+window.refsData['#authenticate-a-local-peer'] = {"text": "authenticate a local peer", "type": "dfn", "spec": "local-peer-to-peer-1", "shortname": "local-peer-to-peer", "level": "1", "status": "local", "url": "#authenticate-a-local-peer", "export": true, "normative": true, "for_": []};
+window.refsData['#protocol-local-peer-to-peer-session'] = {"text": "local peer-to-peer session", "type": "dfn", "spec": "local-peer-to-peer-1", "shortname": "local-peer-to-peer", "level": "1", "status": "local", "url": "#protocol-local-peer-to-peer-session", "export": true, "normative": true, "for_": ["protocol"]};
+window.refsData['#open-a-data-channel'] = {"text": "open a data channel", "type": "dfn", "spec": "local-peer-to-peer-1", "shortname": "local-peer-to-peer", "level": "1", "status": "local", "url": "#open-a-data-channel", "export": true, "normative": true, "for_": []};
+window.refsData['#send-data-on-a-channel'] = {"text": "send data on a channel", "type": "dfn", "spec": "local-peer-to-peer-1", "shortname": "local-peer-to-peer", "level": "1", "status": "local", "url": "#send-data-on-a-channel", "export": true, "normative": true, "for_": []};
+window.refsData['#open-a-webtransport-session'] = {"text": "open a webtransport session", "type": "dfn", "spec": "local-peer-to-peer-1", "shortname": "local-peer-to-peer", "level": "1", "status": "local", "url": "#open-a-webtransport-session", "export": true, "normative": true, "for_": []};
+window.refsData['#data-channels'] = {"text": "data-channels", "type": "dfn", "spec": "local-peer-to-peer-1", "shortname": "local-peer-to-peer", "level": "1", "status": "local", "url": "#data-channels", "export": true, "normative": true, "for_": []};
+window.refsData['#agent-capability'] = {"text": "agent-capability", "type": "dfn", "spec": "local-peer-to-peer-1", "shortname": "local-peer-to-peer", "level": "1", "status": "local", "url": "#agent-capability", "export": true, "normative": true, "for_": []};
+window.refsData['#session-discover-metadata'] = {"text": "discover metadata", "type": "dfn", "spec": "local-peer-to-peer-1", "shortname": "local-peer-to-peer", "level": "1", "status": "local", "url": "#session-discover-metadata", "export": true, "normative": true, "for_": ["session"]};
+window.refsData['#data-channel-open-request'] = {"text": "data-channel-open-request", "type": "dfn", "spec": "local-peer-to-peer-1", "shortname": "local-peer-to-peer", "level": "1", "status": "local", "url": "#data-channel-open-request", "export": true, "normative": true, "for_": []};
+window.refsData['#data-channel-open-response'] = {"text": "data-channel-open-response", "type": "dfn", "spec": "local-peer-to-peer-1", "shortname": "local-peer-to-peer", "level": "1", "status": "local", "url": "#data-channel-open-response", "export": true, "normative": true, "for_": []};
+window.refsData['#data-frame'] = {"text": "data-frame", "type": "dfn", "spec": "local-peer-to-peer-1", "shortname": "local-peer-to-peer", "level": "1", "status": "local", "url": "#data-frame", "export": true, "normative": true, "for_": []};
+window.refsData['#data-channel-encoding-id'] = {"text": "data-channel-encoding-id", "type": "dfn", "spec": "local-peer-to-peer-1", "shortname": "local-peer-to-peer", "level": "1", "status": "local", "url": "#data-channel-encoding-id", "export": true, "normative": true, "for_": []};
+window.refsData['#encoding-id-blob'] = {"text": "encoding-id-blob", "type": "dfn", "spec": "local-peer-to-peer-1", "shortname": "local-peer-to-peer", "level": "1", "status": "local", "url": "#encoding-id-blob", "export": true, "normative": true, "for_": []};
+window.refsData['#encoding-id-string'] = {"text": "encoding-id-string", "type": "dfn", "spec": "local-peer-to-peer-1", "shortname": "local-peer-to-peer", "level": "1", "status": "local", "url": "#encoding-id-string", "export": true, "normative": true, "for_": []};
+window.refsData['#encoding-id-array-buffer'] = {"text": "encoding-id-array-buffer", "type": "dfn", "spec": "local-peer-to-peer-1", "shortname": "local-peer-to-peer", "level": "1", "status": "local", "url": "#encoding-id-array-buffer", "export": true, "normative": true, "for_": []};
+window.refsData['#quick-transport'] = {"text": "quick-transport", "type": "dfn", "spec": "local-peer-to-peer-1", "shortname": "local-peer-to-peer", "level": "1", "status": "local", "url": "#quick-transport", "export": true, "normative": true, "for_": []};
+window.refsData['https://webidl.spec.whatwg.org/#Exposed'] = {"text": "Exposed", "type": "extended-attribute", "spec": "webidl", "shortname": "webidl", "level": "1", "status": "current", "url": "https://webidl.spec.whatwg.org/#Exposed", "export": true, "normative": true, "for_": []};
+window.refsData['https://webidl.spec.whatwg.org/#SecureContext'] = {"text": "SecureContext", "type": "extended-attribute", "spec": "webidl", "shortname": "webidl", "level": "1", "status": "current", "url": "https://webidl.spec.whatwg.org/#SecureContext", "export": true, "normative": true, "for_": []};
+window.refsData['#lp2preceiver'] = {"text": "LP2PReceiver", "type": "interface", "spec": "local-peer-to-peer-1", "shortname": "local-peer-to-peer", "level": "1", "status": "local", "url": "#lp2preceiver", "export": true, "normative": true, "for_": []};
+window.refsData['https://dom.spec.whatwg.org/#eventtarget'] = {"text": "EventTarget", "type": "interface", "spec": "dom", "shortname": "dom", "level": "1", "status": "current", "url": "https://dom.spec.whatwg.org/#eventtarget", "export": true, "normative": true, "for_": []};
+window.refsData['#dictdef-lp2preceiveroptions'] = {"text": "LP2PReceiverOptions", "type": "dictionary", "spec": "local-peer-to-peer-1", "shortname": "local-peer-to-peer", "level": "1", "status": "local", "url": "#dictdef-lp2preceiveroptions", "export": true, "normative": true, "for_": []};
+window.refsData['https://html.spec.whatwg.org/multipage/webappapis.html#eventhandler'] = {"text": "EventHandler", "type": "typedef", "spec": "html", "shortname": "html", "level": "1", "status": "current", "url": "https://html.spec.whatwg.org/multipage/webappapis.html#eventhandler", "export": true, "normative": true, "for_": []};
+window.refsData['#dom-lp2preceiver-onconnection'] = {"text": "onconnection", "type": "attribute", "spec": "local-peer-to-peer-1", "shortname": "local-peer-to-peer", "level": "1", "status": "local", "url": "#dom-lp2preceiver-onconnection", "export": true, "normative": true, "for_": ["LP2PReceiver"]};
+window.refsData['https://webidl.spec.whatwg.org/#idl-promise'] = {"text": "Promise", "type": "interface", "spec": "webidl", "shortname": "webidl", "level": "1", "status": "current", "url": "https://webidl.spec.whatwg.org/#idl-promise", "export": true, "normative": true, "for_": []};
+window.refsData['https://webidl.spec.whatwg.org/#idl-undefined'] = {"text": "undefined", "type": "interface", "spec": "webidl", "shortname": "webidl", "level": "1", "status": "current", "url": "https://webidl.spec.whatwg.org/#idl-undefined", "export": true, "normative": true, "for_": []};
+window.refsData['https://webidl.spec.whatwg.org/#idl-DOMString'] = {"text": "DOMString", "type": "interface", "spec": "webidl", "shortname": "webidl", "level": "1", "status": "current", "url": "https://webidl.spec.whatwg.org/#idl-DOMString", "export": true, "normative": true, "for_": []};
+window.refsData['https://dom.spec.whatwg.org/#event'] = {"text": "Event", "type": "interface", "spec": "dom", "shortname": "dom", "level": "1", "status": "current", "url": "https://dom.spec.whatwg.org/#event", "export": true, "normative": true, "for_": []};
+window.refsData['#dictdef-lp2pconnectioneventinit'] = {"text": "LP2PConnectionEventInit", "type": "dictionary", "spec": "local-peer-to-peer-1", "shortname": "local-peer-to-peer", "level": "1", "status": "local", "url": "#dictdef-lp2pconnectioneventinit", "export": true, "normative": true, "for_": []};
+window.refsData['#lp2pconnection'] = {"text": "LP2PConnection", "type": "interface", "spec": "local-peer-to-peer-1", "shortname": "local-peer-to-peer", "level": "1", "status": "local", "url": "#lp2pconnection", "export": true, "normative": true, "for_": []};
+window.refsData['https://dom.spec.whatwg.org/#dictdef-eventinit'] = {"text": "EventInit", "type": "dictionary", "spec": "dom", "shortname": "dom", "level": "1", "status": "current", "url": "https://dom.spec.whatwg.org/#dictdef-eventinit", "export": true, "normative": true, "for_": []};
+window.refsData['https://dom.spec.whatwg.org/#concept-event-fire'] = {"text": "fire an event", "type": "dfn", "spec": "dom", "shortname": "dom", "level": "1", "status": "current", "url": "https://dom.spec.whatwg.org/#concept-event-fire", "export": true, "normative": true, "for_": []};
+window.refsData['#lp2pconnectionevent'] = {"text": "LP2PConnectionEvent", "type": "interface", "spec": "local-peer-to-peer-1", "shortname": "local-peer-to-peer", "level": "1", "status": "local", "url": "#lp2pconnectionevent", "export": true, "normative": true, "for_": []};
+window.refsData['https://html.spec.whatwg.org/multipage/webappapis.html#event-handlers'] = {"text": "event handler", "type": "dfn", "spec": "html", "shortname": "html", "level": "1", "status": "current", "url": "https://html.spec.whatwg.org/multipage/webappapis.html#event-handlers", "export": true, "normative": true, "for_": []};
+window.refsData['https://html.spec.whatwg.org/multipage/webappapis.html#event-handler-event-type'] = {"text": "event handler event type", "type": "dfn", "spec": "html", "shortname": "html", "level": "1", "status": "current", "url": "https://html.spec.whatwg.org/multipage/webappapis.html#event-handler-event-type", "export": true, "normative": true, "for_": []};
+window.refsData['https://html.spec.whatwg.org/multipage/webappapis.html#event-handler-idl-attributes'] = {"text": "event handler idl attribute", "type": "dfn", "spec": "html", "shortname": "html", "level": "1", "status": "current", "url": "https://html.spec.whatwg.org/multipage/webappapis.html#event-handler-idl-attributes", "export": true, "normative": true, "for_": []};
+window.refsData['#eventdef-lp2preceiver-connection'] = {"text": "connection", "type": "event", "spec": "local-peer-to-peer-1", "shortname": "local-peer-to-peer", "level": "1", "status": "local", "url": "#eventdef-lp2preceiver-connection", "export": true, "normative": true, "for_": ["LP2PReceiver"]};
+window.refsData['#lp2prequest'] = {"text": "LP2PRequest", "type": "interface", "spec": "local-peer-to-peer-1", "shortname": "local-peer-to-peer", "level": "1", "status": "local", "url": "#lp2prequest", "export": true, "normative": true, "for_": []};
+window.refsData['#dictdef-lp2prequestoptions'] = {"text": "LP2PRequestOptions", "type": "dictionary", "spec": "local-peer-to-peer-1", "shortname": "local-peer-to-peer", "level": "1", "status": "local", "url": "#dictdef-lp2prequestoptions", "export": true, "normative": true, "for_": []};
+window.refsData['https://webidl.spec.whatwg.org/#idl-USVString'] = {"text": "USVString", "type": "interface", "spec": "webidl", "shortname": "webidl", "level": "1", "status": "current", "url": "https://webidl.spec.whatwg.org/#idl-USVString", "export": true, "normative": true, "for_": []};
+window.refsData['#dictdef-lp2pdatachannelinit'] = {"text": "LP2PDataChannelInit", "type": "dictionary", "spec": "local-peer-to-peer-1", "shortname": "local-peer-to-peer", "level": "1", "status": "local", "url": "#dictdef-lp2pdatachannelinit", "export": true, "normative": true, "for_": []};
+window.refsData['https://webidl.spec.whatwg.org/#idl-unsigned-short'] = {"text": "unsigned short", "type": "interface", "spec": "webidl", "shortname": "webidl", "level": "1", "status": "current", "url": "https://webidl.spec.whatwg.org/#idl-unsigned-short", "export": true, "normative": true, "for_": []};
+window.refsData['#dom-lp2pdatachannel-onopen'] = {"text": "onopen", "type": "attribute", "spec": "local-peer-to-peer-1", "shortname": "local-peer-to-peer", "level": "1", "status": "local", "url": "#dom-lp2pdatachannel-onopen", "export": true, "normative": true, "for_": ["LP2PDataChannel"]};
+window.refsData['#dom-lp2pdatachannel-onerror'] = {"text": "onerror", "type": "attribute", "spec": "local-peer-to-peer-1", "shortname": "local-peer-to-peer", "level": "1", "status": "local", "url": "#dom-lp2pdatachannel-onerror", "export": true, "normative": true, "for_": ["LP2PDataChannel"]};
+window.refsData['#dom-lp2pdatachannel-onclosing'] = {"text": "onclosing", "type": "attribute", "spec": "local-peer-to-peer-1", "shortname": "local-peer-to-peer", "level": "1", "status": "local", "url": "#dom-lp2pdatachannel-onclosing", "export": true, "normative": true, "for_": ["LP2PDataChannel"]};
+window.refsData['#dom-lp2pdatachannel-onclose'] = {"text": "onclose", "type": "attribute", "spec": "local-peer-to-peer-1", "shortname": "local-peer-to-peer", "level": "1", "status": "local", "url": "#dom-lp2pdatachannel-onclose", "export": true, "normative": true, "for_": ["LP2PDataChannel"]};
+window.refsData['#dom-lp2pdatachannel-onmessage'] = {"text": "onmessage", "type": "attribute", "spec": "local-peer-to-peer-1", "shortname": "local-peer-to-peer", "level": "1", "status": "local", "url": "#dom-lp2pdatachannel-onmessage", "export": true, "normative": true, "for_": ["LP2PDataChannel"]};
+window.refsData['https://websockets.spec.whatwg.org/#enumdef-binarytype'] = {"text": "BinaryType", "type": "enum", "spec": "websockets", "shortname": "websockets", "level": "1", "status": "current", "url": "https://websockets.spec.whatwg.org/#enumdef-binarytype", "export": true, "normative": true, "for_": []};
+window.refsData['https://w3c.github.io/FileAPI/#dfn-Blob'] = {"text": "Blob", "type": "interface", "spec": "fileapi", "shortname": "fileapi", "level": "1", "status": "current", "url": "https://w3c.github.io/FileAPI/#dfn-Blob", "export": true, "normative": true, "for_": []};
+window.refsData['https://webidl.spec.whatwg.org/#idl-ArrayBuffer'] = {"text": "ArrayBuffer", "type": "interface", "spec": "webidl", "shortname": "webidl", "level": "1", "status": "current", "url": "https://webidl.spec.whatwg.org/#idl-ArrayBuffer", "export": true, "normative": true, "for_": []};
+window.refsData['https://webidl.spec.whatwg.org/#ArrayBufferView'] = {"text": "ArrayBufferView", "type": "typedef", "spec": "webidl", "shortname": "webidl", "level": "1", "status": "current", "url": "https://webidl.spec.whatwg.org/#ArrayBufferView", "export": true, "normative": true, "for_": []};
+window.refsData['https://webidl.spec.whatwg.org/#EnforceRange'] = {"text": "EnforceRange", "type": "extended-attribute", "spec": "webidl", "shortname": "webidl", "level": "1", "status": "current", "url": "https://webidl.spec.whatwg.org/#EnforceRange", "export": true, "normative": true, "for_": []};
+window.refsData['#lp2pdatachannel'] = {"text": "LP2PDataChannel", "type": "interface", "spec": "local-peer-to-peer-1", "shortname": "local-peer-to-peer", "level": "1", "status": "local", "url": "#lp2pdatachannel", "export": true, "normative": true, "for_": []};
+window.refsData['https://html.spec.whatwg.org/multipage/comms.html#messageevent'] = {"text": "MessageEvent", "type": "interface", "spec": "html", "shortname": "html", "level": "1", "status": "current", "url": "https://html.spec.whatwg.org/multipage/comms.html#messageevent", "export": true, "normative": true, "for_": []};
+window.refsData['#eventdef-lp2pdatachannel-open'] = {"text": "open", "type": "event", "spec": "local-peer-to-peer-1", "shortname": "local-peer-to-peer", "level": "1", "status": "local", "url": "#eventdef-lp2pdatachannel-open", "export": true, "normative": true, "for_": ["LP2PDataChannel"]};
+window.refsData['#eventdef-lp2pdatachannel-message'] = {"text": "message", "type": "event", "spec": "local-peer-to-peer-1", "shortname": "local-peer-to-peer", "level": "1", "status": "local", "url": "#eventdef-lp2pdatachannel-message", "export": true, "normative": true, "for_": ["LP2PDataChannel"]};
+window.refsData['#eventdef-lp2pdatachannel-error'] = {"text": "error", "type": "event", "spec": "local-peer-to-peer-1", "shortname": "local-peer-to-peer", "level": "1", "status": "local", "url": "#eventdef-lp2pdatachannel-error", "export": true, "normative": true, "for_": ["LP2PDataChannel"]};
+window.refsData['#eventdef-lp2pdatachannel-closing'] = {"text": "closing", "type": "event", "spec": "local-peer-to-peer-1", "shortname": "local-peer-to-peer", "level": "1", "status": "local", "url": "#eventdef-lp2pdatachannel-closing", "export": true, "normative": true, "for_": ["LP2PDataChannel"]};
+window.refsData['#eventdef-lp2pdatachannel-close'] = {"text": "close", "type": "event", "spec": "local-peer-to-peer-1", "shortname": "local-peer-to-peer", "level": "1", "status": "local", "url": "#eventdef-lp2pdatachannel-close", "export": true, "normative": true, "for_": ["LP2PDataChannel"]};
+window.refsData['#dom-lp2pconnection-ondatachannel'] = {"text": "ondatachannel", "type": "attribute", "spec": "local-peer-to-peer-1", "shortname": "local-peer-to-peer", "level": "1", "status": "local", "url": "#dom-lp2pconnection-ondatachannel", "export": true, "normative": true, "for_": ["LP2PConnection"]};
+window.refsData['#dictdef-lp2pdatachanneleventinit'] = {"text": "LP2PDataChannelEventInit", "type": "dictionary", "spec": "local-peer-to-peer-1", "shortname": "local-peer-to-peer", "level": "1", "status": "local", "url": "#dictdef-lp2pdatachanneleventinit", "export": true, "normative": true, "for_": []};
+window.refsData['#lp2pdatachannelevent'] = {"text": "LP2PDataChannelEvent", "type": "interface", "spec": "local-peer-to-peer-1", "shortname": "local-peer-to-peer", "level": "1", "status": "local", "url": "#lp2pdatachannelevent", "export": true, "normative": true, "for_": []};
+window.refsData['#eventdef-lp2pconnection-datachannel'] = {"text": "datachannel", "type": "event", "spec": "local-peer-to-peer-1", "shortname": "local-peer-to-peer", "level": "1", "status": "local", "url": "#eventdef-lp2pconnection-datachannel", "export": true, "normative": true, "for_": ["LP2PConnection"]};
+window.refsData['https://w3c.github.io/webtransport/#webtransport'] = {"text": "WebTransport", "type": "interface", "spec": "webtransport", "shortname": "webtransport", "level": "1", "status": "current", "url": "https://w3c.github.io/webtransport/#webtransport", "export": true, "normative": true, "for_": []};
 </script>
\ No newline at end of file