fix stuff

edit/base.js

@@ -1,4 +1,4 @@
-/* global $ $$ $create $root setupLivePrefs waitForSelector */// dom.js
+/* global $ $$ $create setupLivePrefs waitForSelector */// dom.js
 /* global API */// msg.js
 /* global CODEMIRROR_THEMES */
 /* global CodeMirror */
@@ -32,7 +32,7 @@ const editor = {
   cancel: () => location.assign('/manage.html'),
 
   updateClass() {
-    $root.classList.toggle('is-new-style', !editor.style.id);
+    $.rootCL.toggle('is-new-style', !editor.style.id);
   },
 
   updateTitle(isDirty = editor.dirty.isDirty()) {
@@ -50,7 +50,7 @@ const editor = {
 const baseInit = (() => {
   const domReady = waitForSelector('#sections');
   const mqCompact = matchMedia('(max-width: 850px)');
-  const toggleCompact = mq => $root.classList.toggle('compact-layout', mq.matches);
+  const toggleCompact = mq => $.rootCL.toggle('compact-layout', mq.matches);
   mqCompact.on('change', toggleCompact);
   toggleCompact(mqCompact);
 
@@ -92,7 +92,7 @@ const baseInit = (() => {
     editor.style = style;
     editor.updateClass();
     editor.updateTitle(false);
-    $root.classList.add(editor.isUsercss ? 'usercss' : 'sectioned');
+    $.rootCL.add(editor.isUsercss ? 'usercss' : 'sectioned');
     sessionStore.justEditedStyleId = style.id || '';
     // no such style so let's clear the invalid URL parameters
     if (!style.id) history.replaceState({}, '', location.pathname);

edit/edit.css

@@ -1,5 +1,5 @@
 :root {
-  --pad: 1rem;
+  --pad: 1rem; /* Edge padding for modals/blocks/whatnot. TODO: reuse it in more places */
   --pad05: calc(0.5 * var(--pad));
   --popup-button-width: 16px;
 }
@@ -1095,12 +1095,6 @@ body:not(.find-open) [data-match-highlight-count="1"] .CodeMirror-selection-high
     flex-direction: row;
     margin: .25em 0 var(--pad05);
   }
-  #details-wrapper[data-open^=".."] details {
-    max-width: 50%;
-  }
-  #details-wrapper[data-open^="..."] {
-    flex-wrap: wrap;
-  }
   #details-wrapper details[open] {
     margin-top: 0;
     z-index: 1000;
@@ -1114,11 +1108,22 @@ body:not(.find-open) [data-match-highlight-count="1"] .CodeMirror-selection-high
   }
   #details-wrapper details[open] > summary + * {
     position: absolute;
-    overflow-y: auto;
+    overflow: hidden auto;
-    max-height: 10vh;
+    max-height: var(--max-height, 10vh);
     background: #fff;
     box-shadow: 0 6px 20px rgba(0, 0, 0, .3);
     padding: var(--pad);
+    margin-top: var(--pad05);
+  }
+  @media (max-height: 500px) {
+    #details-wrapper {
+      --max-height: 50px;
+    }
+  }
+  #sections-list[open] > #toc {
+    left: 0;
+    margin-left: auto;
+    margin-right: auto;
   }
   #sections-list[open] > #toc,
   #lint[open] > .lint-report-container {

edit/edit.js

@@ -39,19 +39,6 @@ baseInit.ready.then(async () => {
   new MutationObserver(() => elSec.open && editor.updateToc())
     .observe(elSec, {attributes: true, attributeFilter: ['open']});
 
-  // Auto-update `data-open` attribute to the number of open details
-  {
-    const wrapper = $('#details-wrapper');
-    const details = $$('details', wrapper);
-    const ds = wrapper.dataset;
-    const update = () => {
-      ds.open = '.'.repeat(details.reduce((res, el) => res + (el.open ? 1 : 0), 0));
-    };
-    for (const el of details) {
-      new MutationObserver(update).observe(el, {attributes: true, attributeFilter: ['open']});
-    }
-  }
-
   $('#toc').onclick = e =>
     editor.jumpToEditor([...$('#toc').children].indexOf(e.target));
   $('#keyMap-help').onclick = () =>
@@ -75,7 +62,8 @@ baseInit.ready.then(async () => {
   const {isUsercss} = editor;
   const el = $create('#header-sticker');
   const scroller = isUsercss ? $('.CodeMirror-scroll') : document.body;
-  const xo = new IntersectionObserver(onScrolled, {root: isUsercss ? scroller : document});
+  const xoRoot = isUsercss ? scroller : undefined;
+  const xo = new IntersectionObserver(onScrolled, {root: xoRoot});
   scroller.appendChild(el);
   onCompactToggled(baseInit.mqCompact);
   baseInit.mqCompact.on('change', onCompactToggled);
@@ -92,9 +80,9 @@ baseInit.ready.then(async () => {
     }
   }
   /** @param {IntersectionObserverEntry[]} entries */
-  function onScrolled([e]) {
+  function onScrolled(entries) {
     const h = $('#header');
-    const sticky = !e.isIntersecting;
+    const sticky = !entries.pop().isIntersecting;
     if (!isUsercss) scroller.style.paddingTop = sticky ? h.offsetHeight + 'px' : '';
     h.classList.toggle('sticky', sticky);
   }

edit/embedded-popup.js

@@ -1,4 +1,4 @@
-/* global $ $create $remove $root getEventKeyName */// dom.js
+/* global $ $create $remove getEventKeyName */// dom.js
 /* global CodeMirror */
 /* global baseInit */// base.js
 /* global prefs */
@@ -20,8 +20,8 @@
     title: t('optionsCustomizePopup') + '\n' + POPUP_HOTKEY,
     onclick: embedPopup,
   });
-  $root.appendChild(btn);
+  $.root.appendChild(btn);
-  $root.classList.add('popup-window');
+  $.rootCL.add('popup-window');
   baseInit.domReady.then(() => {
     document.body.appendChild(btn);
     // Adding a dummy command to show in keymap help popup

edit/global-search.js

@@ -1,4 +1,4 @@
-/* global $ $$ $create $remove $root focusAccessibility toggleDataset */// dom.js
+/* global $ $$ $create $remove focusAccessibility toggleDataset */// dom.js
 /* global CodeMirror */
 /* global chromeLocal */// storage-util.js
 /* global colorMimicry */
@@ -588,7 +588,7 @@
       input: colorMimicry($('input:not(:disabled)'), {bg: 'backgroundColor'}),
       icon: colorMimicry($$('svg.info')[1], {fill: 'fill'}),
     };
-    $root.appendChild(
+    $.root.appendChild(
       $(DIALOG_STYLE_SELECTOR) ||
       $create('style' + DIALOG_STYLE_SELECTOR)
     ).textContent = `

edit/linter-manager.js

@@ -344,7 +344,8 @@ linterMan.DEFAULTS = {
     };
 
     function updateCaption() {
-      Object.assign(caption, editor.getEditorTitle(cm));
+      const t = editor.getEditorTitle(cm);
+      Object.assign(caption, typeof t == 'string' ? {textContent: t} : t);
     }
 
     function updateAnnotations(lines) {

edit/moz-section-widget.js

@@ -1,4 +1,4 @@
-/* global $ $create $root messageBoxProxy */// dom.js
+/* global $ $create messageBoxProxy */// dom.js
 /* global CodeMirror */
 /* global MozSectionFinder */
 /* global colorMimicry */
@@ -218,7 +218,7 @@ function MozSectionWidget(cm, finder = MozSectionFinder(cm)) {
         transition: none;
       }
     `;
-    $root.appendChild(actualStyle);
+    $.root.appendChild(actualStyle);
   }
 
   /**

edit/sections-editor.js

@@ -1,4 +1,4 @@
-/* global $ $create $remove $root messageBoxProxy */// dom.js
+/* global $ $create $remove messageBoxProxy */// dom.js
 /* global API */// msg.js
 /* global CodeMirror */
 /* global RX_META debounce */// toolbox.js
@@ -396,7 +396,7 @@ function SectionsEditor() {
     }
 
     function lockPageUI(locked) {
-      $root.style.pointerEvents = locked ? 'none' : '';
+      $.root.style.pointerEvents = locked ? 'none' : '';
       if (popup.codebox) {
         popup.classList.toggle('ready', locked ? false : !popup.codebox.isBlank());
         popup.codebox.options.readOnly = locked;

edit/util.js

@@ -1,4 +1,4 @@
-/* global $ $create $root getEventKeyName messageBoxProxy moveFocus */// dom.js
+/* global $ $create getEventKeyName messageBoxProxy moveFocus */// dom.js
 /* global CodeMirror */
 /* global editor */
 /* global prefs */
@@ -195,7 +195,7 @@ function showCodeMirrorPopup(title, html, options) {
   }, options));
   cm.focus();
 
-  $root.style.pointerEvents = 'none';
+  $.root.style.pointerEvents = 'none';
   popup.style.pointerEvents = 'auto';
 
   const onKeyDown = event => {
@@ -210,7 +210,7 @@ function showCodeMirrorPopup(title, html, options) {
 
   window.on('closeHelp', () => {
     window.off('keydown', onKeyDown, true);
-    $root.style.removeProperty('pointer-events');
+    $.root.style.removeProperty('pointer-events');
     cm = popup.codebox = null;
   }, {once: true});
 

js/dom.js

@@ -27,7 +27,8 @@ Object.assign(EventTarget.prototype, {
 
 //#region Exports
 
-const $root = document.documentElement;
+$.root = document.documentElement;
+$.rootCL = $.root.classList;
 
 // Makes the focus outline appear on keyboard tabbing, but not on mouse clicks.
 const focusAccessibility = {
@@ -476,9 +477,9 @@ const dom = {};
   const lazyScripts = [
     '/js/dom-on-load',
   ];
-  if (!UA.windows) $root.classList.add('non-windows');
+  if (!UA.windows) $.rootCL.add('non-windows');
   // set language for a) CSS :lang pseudo and b) hyphenation
-  $root.setAttribute('lang', chrome.i18n.getUILanguage());
+  $.root.setAttribute('lang', chrome.i18n.getUILanguage());
   // set up header width resizer
   const HW = 'headerWidth.';
   const HWprefId = HW + location.pathname.match(/^.(\w*)/)[1];
@@ -490,7 +491,7 @@ const dom = {};
         // If this is a small window on a big monitor the user can maximize it later
         const max = (innerWidth < 850 ? screen.availWidth : innerWidth) / 3;
         width = Math.round(Math.max(200, Math.min(max, Number(width) || 0)));
-        $root.style.setProperty('--header-width', width + 'px');
+        $.root.style.setProperty('--header-width', width + 'px');
         return width;
       },
     });

manage/manage.js

@@ -10,7 +10,6 @@
   $
   $$
   $create
-  $root
   animateElement
   setupLivePrefs
   waitForSelector
@@ -37,9 +36,8 @@ Object.assign(newUI, {
   ids: Object.keys(newUI),
   prefKeyForId: id => `manage.newUI.${id}`.replace(/\.enabled$/, ''),
   renderClass: () => {
-    const cl = $root.classList;
+    $.rootCL.toggle('newUI', newUI.enabled);
-    cl.toggle('newUI', newUI.enabled);
+    $.rootCL.toggle('oldUI', !newUI.enabled);
-    cl.toggle('oldUI', !newUI.enabled);
   },
 });
 // ...read the actual values
@@ -129,7 +127,7 @@ function onRuntimeMessage(msg) {
 
 async function toggleEmbeddedOptions(state) {
   const el = $('#stylus-embedded-options') ||
-    state && $root.appendChild($create('iframe', {
+    state && $.root.appendChild($create('iframe', {
       id: 'stylus-embedded-options',
       src: '/options.html',
     }));

manage/sorter.js

@@ -1,4 +1,4 @@
-/* global $ $create $root messageBoxProxy onDOMready */// dom.js
+/* global $ $create messageBoxProxy onDOMready */// dom.js
 /* global installed */// manage.js
 /* global prefs */
 /* global t */// localization.js
@@ -172,11 +172,11 @@ const sorter = (() => {
 
   function updateColumnCount() {
     let newValue = 1;
-    for (let el = $root.lastElementChild;
+    for (let el = $.root.lastElementChild;
          el.localName === 'style';
          el = el.previousElementSibling) {
       if (el.textContent.includes('--columns:')) {
-        newValue = Math.max(1, getComputedStyle($root).getPropertyValue('--columns') | 0);
+        newValue = Math.max(1, getComputedStyle($.root).getPropertyValue('--columns') | 0);
         break;
       }
     }

popup/popup.js

@@ -1,4 +1,4 @@
-/* global $ $$ $create $root setupLivePrefs */// dom.js
+/* global $ $$ $create setupLivePrefs */// dom.js
 /* global ABOUT_BLANK getStyleDataMerged preinit */// preinit.js
 /* global API msg */// msg.js
 /* global Events */
@@ -38,7 +38,7 @@ preinit.then(({frames, styles, url}) => {
 msg.onExtension(onRuntimeMessage);
 
 prefs.subscribe('popup.stylesFirst', (key, stylesFirst) => {
-  $root.classList.toggle('styles-last', !stylesFirst);
+  $.rootCL.toggle('styles-last', !stylesFirst);
 }, {runNow: true});
 if (CHROME_POPUP_BORDER_BUG) {
   prefs.subscribe('popup.borders', toggleSideBorders, {runNow: true});
@@ -70,7 +70,7 @@ function setPopupWidth(_key, width) {
 
 function toggleSideBorders(_key, state) {
   // runs before <body> is parsed
-  const style = $root.style;
+  const style = $.root.style;
   if (state) {
     style.cssText +=
       'border-left: 2px solid white !important;' +