Meta: Update the dfn panels to match Bikeshed's output more closely

Andreu Botella · domenic · commit 0337d295bdef · 2020-10-02T11:58:29.000-04:00
This change removes the HTML-specific styles dealing with the dfn panels, and changes html-dfn.js to have those panels match Bikeshed's output more closely. The particular changes are: - Panels have the "dfn-panel" class, rather than "dfnPanel". They also have the "on" class, to make them visible. - Moved panels gain the "activated" class, instead of gaining inline styles. - The elements that can open a dfn panel when clicked now include headings with the "data-dfn-type" attribute (corresponding to a "dfn" attribute in the source). See whatwg/whatwg.org#343, which adds Bikeshed's dfn panel styles to standard.css.
diff --git a/html-dfn.js b/html-dfn.js
@@ -20,7 +20,9 @@ function handleClick(event) {
   var node;
   var eventInDfnPanel = false;
   while (current) {
-    if (current.localName === 'dfn') {
+    if (current.matches(
+      "dfn, h2[data-dfn-type], h3[data-dfn-type], h4[data-dfn-type], h5[data-dfn-type], h6[data-dfn-type]"
+    )) {
       node = current;
     }
     if (dfnPanel && current === dfnPanel) {
@@ -81,7 +83,7 @@ function loadReferences(id, path, specURL) {
 
 function createPanel(id, path, specURL) {
   var panel = document.createElement('div');
-  panel.className = 'dfnPanel';
+  panel.className = 'dfn-panel on';
   if (id) {
     var permalinkP = document.createElement('p');
     var permalinkA = document.createElement('a');
@@ -162,12 +164,7 @@ function movePanel(event) {
   if (!dfnPanel) {
     return;
   }
-  dfnPanel.style.position = 'fixed';
-  dfnPanel.style.left = '1em';
-  dfnPanel.style.bottom = '1em';
-  dfnPanel.style.maxWidth = '20em';
-  dfnPanel.style.maxHeight = '50vh';
-  dfnPanel.style.overflow = 'auto';
+  dfnPanel.classList.add("activated");
   if (event) {
     event.stopPropagation();
   }
diff --git a/styles.css b/styles.css
@@ -1,26 +1,3 @@
-body.dfnEnabled dfn, body.dfnEnabled h2[data-dfn-type], body.dfnEnabled h3[data-dfn-type], body.dfnEnabled h4[data-dfn-type], body.dfnEnabled h5[data-dfn-type], body.dfnEnabled h6[data-dfn-type] { cursor: pointer; }
-.dfnPanel {
-  cursor: auto;
-  display: inline;
-  position: absolute;
-  z-index: 35;
-  height: auto;
-  width: auto;
-  padding: 0.5em 0.75em;
-  font: small Helvetica Neue, sans-serif, Droid Sans Fallback;
-  background: #DDDDDD;
-  color: black;
-  border: outset 0.2em;
-}
-.dfnPanel * { margin: 0; padding: 0; font: inherit; text-indent: 0; }
-.dfnPanel :link, .dfnPanel :visited { color: black; cursor: pointer; }
-/* Delicate specificity wars to pretend isolation from pre:hover rules elsewhere... */
-.dfnPanel *, pre:hover .dfnPanel * { text-decoration: none; }
-pre:hover .dfnPanel :link:hover, pre:hover .dfnPanel :visited:hover { text-decoration: underline; }
-.dfnPanel p:not(.spec-link) { font-weight: bolder; }
-.dfnPanel * + p { margin-top: 0.25em; }
-.dfnPanel li { list-style-position: inside; list-style-type: disc; }
-
 .bad, .bad *:not(.X\58X) { color: gray; }
 
 .applies .yes, .yesno .yes { background: yellow; }
