ref: move stuff around

src/utils/dom.ts

@@ -134,20 +134,7 @@ export function waitVideoElementReady(): Promise<HTMLVideoElement> {
   });
 }
 
-//#region other
-
-/** Removes all child nodes of an element without invoking the slow-ish HTML parser */
-export function clearInner(element: Element) {
-  while(element.hasChildNodes())
-    clearNode(element!.firstChild as Element);
-}
-
-/** Removes all child nodes of an element recursively and also removes the element itself */
-export function clearNode(element: Element) {
-  while(element.hasChildNodes())
-    clearNode(element!.firstChild as Element);
-  element.parentNode!.removeChild(element);
-}
+//#region css utils
 
 /**
  * Adds a style element to the DOM at runtime.
@@ -163,6 +150,19 @@ export async function addStyle(css: string, ref?: string, transform: (css: strin
   return elem;
 }
 
+/**
+ * Adds a global style element with the contents fetched from the specified CSS resource.  
+ * The CSS can be transformed using the provided function before being added to the DOM.
+ */
+export async function addStyleFromResource(key: ResourceKey & `css-${string}`, transform: (css: string) => string = (c) => c) {
+  const css = await fetchCss(key);
+  if(css) {
+    addStyle(transform(css), key.slice(4));
+    return true;
+  }
+  return false;
+}
+
 /** Sets a global CSS variable on the &lt;document&gt; element */
 export function setGlobalCssVar(name: string, value: Stringifiable) {
   document.documentElement.style.setProperty(`--bytm-global-${name}`, String(value));
@@ -174,6 +174,21 @@ export function setGlobalCssVars(vars: Record<string, Stringifiable>) {
     setGlobalCssVar(name, value);
 }
 
+//#region other
+
+/** Removes all child nodes of an element without invoking the slow-ish HTML parser */
+export function clearInner(element: Element) {
+  while(element.hasChildNodes())
+    clearNode(element!.firstChild as Element);
+}
+
+/** Removes all child nodes of an element recursively and also removes the element itself */
+export function clearNode(element: Element) {
+  while(element.hasChildNodes())
+    clearNode(element!.firstChild as Element);
+  element.parentNode!.removeChild(element);
+}
+
 /**
  * Checks if the currently playing media is a song or a video.  
  * This function should only be called after awaiting {@linkcode waitVideoElementReady}!
@@ -185,19 +200,6 @@ export function currentMediaType(): "video" | "song" {
   return getUnsafeWindow().getComputedStyle(songImgElem).display !== "none" ? "song" : "video";
 }
 
-/**
- * Adds a global style element with the contents fetched from the specified CSS resource.  
- * The CSS can be transformed using the provided function before being added to the DOM.
- */
-export async function addStyleFromResource(key: ResourceKey & `css-${string}`, transform: (css: string) => string = (c) => c) {
-  const css = await fetchCss(key);
-  if(css) {
-    addStyle(transform(css), key.slice(4));
-    return true;
-  }
-  return false;
-}
-
 /** Copies the provided text to the clipboard and shows an error message for manual copying if the grant `GM.setClipboard` is not given. */
 export function copyToClipboard(text: Stringifiable) {
   try {