use $root more

edit/embedded-popup.js

@@ -1,4 +1,4 @@
-/* global $ $create $remove getEventKeyName */// dom.js
+/* global $ $create $remove $root getEventKeyName */// dom.js
 /* global CodeMirror */
 /* global baseInit */// base.js
 /* global prefs */
@@ -20,7 +20,7 @@
     title: t('optionsCustomizePopup') + '\n' + POPUP_HOTKEY,
     onclick: embedPopup,
   });
-  document.documentElement.appendChild(btn);
+  $root.appendChild(btn);
   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 focusAccessibility toggleDataset */// dom.js
+/* global $ $$ $create $remove $root focusAccessibility toggleDataset */// dom.js
 /* global CodeMirror */
 /* global chromeLocal */// storage-util.js
 /* global colorMimicry */
@@ -54,7 +54,7 @@
 
     undoHistory: [],
 
-    searchInApplies: !document.documentElement.classList.contains('usercss'),
+    searchInApplies: !editor.isUsercss,
   };
 
   //endregion
@@ -588,7 +588,7 @@
       input: colorMimicry($('input:not(:disabled)'), {bg: 'backgroundColor'}),
       icon: colorMimicry($$('svg.info')[1], {fill: 'fill'}),
     };
-    document.documentElement.appendChild(
+    $root.appendChild(
       $(DIALOG_STYLE_SELECTOR) ||
       $create('style' + DIALOG_STYLE_SELECTOR)
     ).textContent = `

edit/moz-section-widget.js

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

edit/sections-editor.js

@@ -1,4 +1,4 @@
-/* global $ $create $remove messageBoxProxy */// dom.js
+/* global $ $create $remove $root messageBoxProxy */// dom.js
 /* global API */// msg.js
 /* global CodeMirror */
 /* global RX_META debounce */// toolbox.js
@@ -25,7 +25,6 @@ function SectionsEditor() {
   updateMeta();
   rerouteHotkeys.toggle(true); // enabled initially because we don't always focus a CodeMirror
   editor.livePreview.init();
-  container.classList.add('section-editor');
   $('#to-mozilla').on('click', showMozillaFormat);
   $('#to-mozilla-help').on('click', showToMozillaHelp);
   $('#from-mozilla').on('click', () => showMozillaFormatImport());
@@ -397,7 +396,7 @@ function SectionsEditor() {
     }
 
     function lockPageUI(locked) {
-      document.documentElement.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 getEventKeyName messageBoxProxy moveFocus */// dom.js
+/* global $ $create $root getEventKeyName messageBoxProxy moveFocus */// dom.js
 /* global CodeMirror */
 /* global editor */
 /* global prefs */
@@ -195,7 +195,7 @@ function showCodeMirrorPopup(title, html, options) {
   }, options));
   cm.focus();
 
-  document.documentElement.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);
-    document.documentElement.style.removeProperty('pointer-events');
+    $root.style.removeProperty('pointer-events');
     cm = popup.codebox = null;
   }, {once: true});
 

manage/manage.js

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

manage/sorter.js

@@ -1,4 +1,4 @@
-/* global $ $create messageBoxProxy onDOMready */// dom.js
+/* global $ $create $root 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 = document.documentElement.lastElementChild;
+    for (let el = $root.lastElementChild;
          el.localName === 'style';
          el = el.previousElementSibling) {
       if (el.textContent.includes('--columns:')) {
-        newValue = Math.max(1, getComputedStyle(document.documentElement).getPropertyValue('--columns') | 0);
+        newValue = Math.max(1, getComputedStyle($root).getPropertyValue('--columns') | 0);
         break;
       }
     }

popup/popup.js

@@ -1,4 +1,4 @@
-/* global $ $$ $create setupLivePrefs */// dom.js
+/* global $ $$ $create $root 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) => {
-  document.documentElement.classList.toggle('styles-last', !stylesFirst);
+  $root.classList.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 = document.documentElement.style;
+  const style = $root.style;
   if (state) {
     style.cssText +=
       'border-left: 2px solid white !important;' +