remove hack, change markup instead

speced · Apr 17, 2020 · 2bb70a8 · 2bb70a8
1 parent 86e8f5a
commit 2bb70a8
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 21 deletions.
diff --git a/assets/dfn-panel.css b/assets/dfn-panel.css
@@ -17,19 +17,22 @@ dfn {
     0 0 1px 1px rgba(0, 0, 0, 0.05);
   border-radius: 2px;
 }
-
 /* Triangle/caret */
-.dfn-panel:not(.docked)::before,
-.dfn-panel:not(.docked)::after {
+.dfn-panel:not(.docked) > .caret {
+  position: relative;
+  top: -0.25em;
+}
+.dfn-panel:not(.docked) > .caret::before,
+.dfn-panel:not(.docked) > .caret::after {
   content: "";
   position: absolute;
   border: 10px solid transparent;
   border-top: 0;
-  border-bottom: 9px solid #a2a9b1; /* triangle outline */
-  top: -9px;
+  border-bottom: 10px solid #fff;
+  top: 0;
 }
-.dfn-panel:not(.docked)::after {
-  border-bottom: 10px solid #fff; /* triangle fill */
+.dfn-panel:not(.docked) > .caret::before {
+  border-bottom: 10px solid #a2a9b1;
 }
 
 .dfn-panel * {

diff --git a/src/core/dfn-panel.js b/src/core/dfn-panel.js
@@ -20,16 +20,6 @@ export async function run() {
     /** @type {HTMLElement} */
     const el = event.target;
 
-    // This is a horrible workaround for w3c/css-validator not supporting CSS variables.
-    // See https://github.com/w3c/respec/issues/2845
-    // Remove this ASAP 😭😭
-    /** @type {HTMLStyleElement} */
-    const { sheet } = document.getElementById("respec-dfn-panel-css");
-    sheet.insertRule(".dfn-panel { left: var(--left); top: var(--top); }");
-    sheet.insertRule(
-      ".dfn-panel:not(.docked)::before, .dfn-panel:not(.docked)::after { left: var(--caret-offset) }"
-    );
-
     const action = deriveAction(el);
     switch (action) {
       case "show": {
@@ -44,6 +34,8 @@ export async function run() {
         break;
       }
       case "hide": {
+        panel.style.left = null;
+        panel.style.top = null;
         panel.remove();
         break;
       }
@@ -80,6 +72,7 @@ function createPanel(dfn) {
   /** @type {HTMLElement} */
   const panel = hyperHTML`
     <aside class="dfn-panel" id="dfn-panel">
+      <span class="caret"></span>
       <b><a class="self-link" href="${href}">Permalink</a></b>
       <b>Referenced in:</b>
       ${referencesToHTML(id, links)}
@@ -168,17 +161,18 @@ function displayPanel(dfn, panel, { x, y }) {
 
   const top = window.scrollY + closestTop + dfnRects[0].height;
   const left = x - MARGIN;
-  panel.style.setProperty("--left", `${left}px`);
-  panel.style.setProperty("--top", `${top}px`);
+  panel.style.left = `${left}px`;
+  panel.style.top = `${top}px`;
 
   // Find if the panel is flowing out of the window
   const panelRect = panel.getBoundingClientRect();
   const SCREEN_WIDTH = Math.min(window.innerWidth, window.screen.width);
   if (panelRect.right > SCREEN_WIDTH) {
     const newLeft = Math.max(MARGIN, x + MARGIN - panelRect.width);
     const newCaretOffset = left - newLeft;
-    panel.style.setProperty("--left", `${newLeft}px`);
-    panel.style.setProperty("--caret-offset", `${newCaretOffset}px`);
+    const caret = panel.querySelector(".caret");
+    panel.style.left = `${newLeft}px`;
+    caret.style.left = `${newCaretOffset}px`;
   }
 }