ref: change innerText to textContent

contributing.md

@@ -490,7 +490,7 @@ The usage and example blocks on each are written in TypeScript but can be used i
 > 
 > ```ts
 > const customConfigMenuTitle = document.createElement("div");
-> customConfigMenuTitle.innerText = unsafeWindow.BYTM.t("config_menu_title", "My cool BYTM Plugin");
+> customConfigMenuTitle.textContent = unsafeWindow.BYTM.t("config_menu_title", "My cool BYTM Plugin");
 > // translated text: "My cool BYTM Plugin - Configuration" (if locale is en_US or en_UK)
 > ```
 > </details>

package.json

@@ -97,7 +97,7 @@
       "changelog.md",
       "package.json"
     ],
-    "ext": "ts,tsx,mts,js,jsx,mjs,json,html,css,svg,png",
+    "ext": "ts,mts,js,jsx,mjs,json,html,css,svg,png",
     "ignore": [
       "dist/*",
       "dev/*"

src/features/behavior.ts

@@ -72,7 +72,7 @@ export async function initAutoCloseToasts() {
           await pauseFor(closeTimeout);
 
           toastElem.classList.remove("paper-toast-open");
-          log(`Automatically closed toast '${toastElem.querySelector<HTMLDivElement>("#text-container yt-formatted-string")?.innerText}' after ${features.closeToastsTimeout * 1000}ms`);
+          log(`Automatically closed toast '${toastElem.querySelector<HTMLDivElement>("#text-container yt-formatted-string")?.textContent}' after ${features.closeToastsTimeout * 1000}ms`);
 
           // wait for the transition to finish
           await pauseFor(animTimeout);

src/features/layout.ts

@@ -22,7 +22,7 @@ export async function addWatermark() {
   watermark.role = "button";
   watermark.id = "bytm-watermark";
   watermark.className = "style-scope ytmusic-nav-bar bytm-no-select";
-  watermark.innerText = scriptInfo.name;
+  watermark.textContent = scriptInfo.name;
   watermark.ariaLabel = watermark.title = t("open_menu_tooltip", scriptInfo.name);
   watermark.tabIndex = 0;
 
@@ -136,7 +136,7 @@ export async function addConfigMenuOption(container: HTMLElement) {
 
   const cfgOptTextElem = document.createElement("div");
   cfgOptTextElem.className = "bytm-cfg-menu-option-text";
-  cfgOptTextElem.innerText = t("config_menu_option", scriptInfo.name);
+  cfgOptTextElem.textContent = t("config_menu_option", scriptInfo.name);
 
   cfgOptItemElem.appendChild(cfgOptIconElem);
   cfgOptItemElem.appendChild(cfgOptTextElem);
@@ -216,7 +216,7 @@ export async function initVolumeFeatures() {
 function addVolumeSliderLabel(sliderElem: HTMLInputElement, sliderContainer: HTMLDivElement) {
   const labelElem = document.createElement("div");
   labelElem.id = "bytm-vol-slider-label";
-  labelElem.innerText = `${sliderElem.value}%`;
+  labelElem.textContent = `${sliderElem.value}%`;
 
   // prevent video from minimizing
   labelElem.addEventListener("click", (e) => e.stopPropagation());
@@ -238,7 +238,7 @@ function addVolumeSliderLabel(sliderElem: HTMLInputElement, sliderContainer: HTM
 
     const labelElem2 = document.querySelector<HTMLDivElement>("#bytm-vol-slider-label");
     if(labelElem2)
-      labelElem2.innerText = `${sliderElem.value}%`;
+      labelElem2.textContent = `${sliderElem.value}%`;
   };
 
   sliderElem.addEventListener("change", () => updateLabel());

src/features/lyrics.ts

@@ -179,7 +179,7 @@ export async function getCurrentLyricsUrl() {
 
     const songNameRaw = songTitleElem.title;
     let songName = songNameRaw;
-    let artistName = songMetaElem.innerText;
+    let artistName = songMetaElem.textContent;
 
     if(isVideo) {
       // for some fucking reason some music videos have YTM-like song title and artist separation, some don't

src/features/songLists.ts

@@ -124,8 +124,8 @@ async function addQueueButtons(
           return;
       
         const [songEl, artistEl] = songInfo.querySelectorAll<HTMLElement>("yt-formatted-string");
-        song = songEl?.innerText;
-        artist = artistEl?.innerText;
+        song = songEl?.textContent;
+        artist = artistEl?.textContent;
       }
       else if(listType === "genericQueue") {
         const songEl = queueItem.querySelector<HTMLElement>(".title-column yt-formatted-string a");
@@ -136,8 +136,8 @@ async function addQueueButtons(
         else
           artistEl = queueItem.querySelector<HTMLElement>(".secondary-flex-columns yt-formatted-string:first-child a");
 
-        song = songEl?.innerText;
-        artist = artistEl?.innerText;
+        song = songEl?.textContent;
+        artist = artistEl?.textContent;
       }
       else return;
 

src/menu/hotkeyInput.ts

@@ -29,7 +29,7 @@ export function createHotkeyInput({ initialValue, resetValue, onChange }: Hotkey
   resetElem.classList.add("bytm-hotkey-reset", "bytm-link");
   resetElem.role = "button";
   resetElem.tabIndex = 0;
-  resetElem.innerText = `(${t("reset")})`;
+  resetElem.textContent = `(${t("reset")})`;
 
   const resetClicked = (e: MouseEvent | KeyboardEvent) => {
     e.preventDefault();
@@ -38,14 +38,14 @@ export function createHotkeyInput({ initialValue, resetValue, onChange }: Hotkey
     onChange(resetValue!);
     inputElem.value = resetValue!.code;
     inputElem.dataset.state = "inactive";
-    infoElem.innerText = getHotkeyInfo(resetValue!);
+    infoElem.textContent = getHotkeyInfo(resetValue!);
   };
 
   resetElem.addEventListener("click", resetClicked);
   resetElem.addEventListener("keydown", (e) => e.key === "Enter" && resetClicked(e));
 
   if(initialValue)
-    infoElem.innerText = getHotkeyInfo(initialValue);
+    infoElem.textContent = getHotkeyInfo(initialValue);
 
   let lastKeyDown: HotkeyObj | undefined;
 
@@ -65,7 +65,7 @@ export function createHotkeyInput({ initialValue, resetValue, onChange }: Hotkey
     } as HotkeyObj;
     inputElem.value = hotkey.code;
     inputElem.dataset.state = "inactive";
-    infoElem.innerText = getHotkeyInfo(hotkey);
+    infoElem.textContent = getHotkeyInfo(hotkey);
     onChange(hotkey);
   });
 
@@ -87,7 +87,7 @@ export function createHotkeyInput({ initialValue, resetValue, onChange }: Hotkey
 
     inputElem.value = hotkey.code;
     inputElem.dataset.state = "inactive";
-    infoElem.innerText = getHotkeyInfo(hotkey);
+    infoElem.textContent = getHotkeyInfo(hotkey);
     inputElem.ariaLabel = inputElem.title = t("hotkey_input_click_to_cancel_tooltip");
     onChange(hotkey);
   });
@@ -98,7 +98,7 @@ export function createHotkeyInput({ initialValue, resetValue, onChange }: Hotkey
     inputElem.value = curVal?.code ?? t("hotkey_input_click_to_change");
     inputElem.dataset.state = "inactive";
     inputElem.ariaLabel = inputElem.title = t("hotkey_input_click_to_change_tooltip");
-    infoElem.innerText = curVal ? getHotkeyInfo(curVal) : "";
+    infoElem.textContent = curVal ? getHotkeyInfo(curVal) : "";
   };
 
   const activate = () => {

src/menu/menu_old.ts

@@ -86,7 +86,7 @@ export async function addCfgMenu() {
   titleElem.className = "bytm-menu-title";
 
   const titleTextElem = document.createElement("div");
-  titleTextElem.innerText = t("config_menu_title", scriptInfo.name);
+  titleTextElem.textContent = t("config_menu_title", scriptInfo.name);
 
   titleElem.appendChild(titleTextElem);
 
@@ -153,12 +153,12 @@ export async function addCfgMenu() {
 
   const footerElem = document.createElement("div");
   footerElem.classList.add("bytm-menu-footer", "hidden");
-  footerElem.innerText = t("reload_hint");
+  footerElem.textContent = t("reload_hint");
 
   const reloadElem = document.createElement("button");
   reloadElem.classList.add("bytm-btn");
   reloadElem.style.marginLeft = "10px";
-  reloadElem.innerText = t("reload_now");
+  reloadElem.textContent = t("reload_now");
   reloadElem.ariaLabel = reloadElem.title = t("reload_tooltip");
   reloadElem.addEventListener("click", () => {
     closeCfgMenu();
@@ -172,7 +172,7 @@ export async function addCfgMenu() {
   const resetElem = document.createElement("button");
   resetElem.classList.add("bytm-btn");
   resetElem.ariaLabel = resetElem.title = t("reset_tooltip");
-  resetElem.innerText = t("reset");
+  resetElem.textContent = t("reset");
   resetElem.addEventListener("click", async () => {
     if(confirm(t("reset_confirm"))) {
       await setDefaultFeatures();
@@ -184,7 +184,7 @@ export async function addCfgMenu() {
   const exportElem = document.createElement("button");
   exportElem.classList.add("bytm-btn");
   exportElem.ariaLabel = exportElem.title = t("export_tooltip");
-  exportElem.innerText = t("export");
+  exportElem.textContent = t("export");
   exportElem.addEventListener("click", async () => {
     closeCfgMenu();
     openExportMenu();
@@ -192,7 +192,7 @@ export async function addCfgMenu() {
   const importElem = document.createElement("button");
   importElem.classList.add("bytm-btn");
   importElem.ariaLabel = importElem.title = t("import_tooltip");
-  importElem.innerText = t("import");
+  importElem.textContent = t("import");
   importElem.addEventListener("click", async () => {
     closeCfgMenu();
     openImportMenu();
@@ -267,7 +267,7 @@ export async function addCfgMenu() {
     catHeaderElem.classList.add("bytm-ftconf-category-header");
     catHeaderElem.role = "heading";
     catHeaderElem.ariaLevel = "2";
-    catHeaderElem.innerText = `${t(`feature_category_${category}`)}:`;
+    catHeaderElem.textContent = `${t(`feature_category_${category}`)}:`;
     featuresCont.appendChild(catHeaderElem);
 
     for(const featKey in featObj) {
@@ -293,7 +293,7 @@ export async function addCfgMenu() {
         featLeftSideElem.classList.add("bytm-ftitem-leftside");
 
         const textElem = document.createElement("span");
-        textElem.innerText = t(`feature_desc_${featKey}`);
+        textElem.textContent = t(`feature_desc_${featKey}`);
 
         let adornmentElem: undefined | HTMLElement;
 
@@ -404,21 +404,21 @@ export async function addCfgMenu() {
           if(type === "slider") {
             labelElem = document.createElement("label");
             labelElem.classList.add("bytm-ftconf-label", "bytm-slider-label");
-            labelElem.innerText = fmtVal(initialVal) + unitTxt;
+            labelElem.textContent = fmtVal(initialVal) + unitTxt;
 
             inputElem.addEventListener("input", () => {
               if(labelElem)
-                labelElem.innerText = fmtVal(Number(inputElem.value)) + unitTxt;
+                labelElem.textContent = fmtVal(Number(inputElem.value)) + unitTxt;
             });
           }
           else if(type === "toggle") {
             labelElem = document.createElement("label");
             labelElem.classList.add("bytm-ftconf-label", "bytm-toggle-label");
-            labelElem.innerText = toggleLabelText(Boolean(initialVal)) + unitTxt;
+            labelElem.textContent = toggleLabelText(Boolean(initialVal)) + unitTxt;
 
             inputElem.addEventListener("input", () => {
               if(labelElem)
-                labelElem.innerText = toggleLabelText(inputElem.checked) + unitTxt;
+                labelElem.textContent = toggleLabelText(inputElem.checked) + unitTxt;
             });
           }
           else if(type === "select") {
@@ -428,7 +428,7 @@ export async function addCfgMenu() {
             for(const { value, label } of ftOpts) {
               const optionElem = document.createElement("option");
               optionElem.value = String(value);
-              optionElem.innerText = label;
+              optionElem.textContent = label;
               if(value === initialVal)
                 optionElem.selected = true;
               inputElem.appendChild(optionElem);
@@ -498,9 +498,9 @@ export async function addCfgMenu() {
       // @ts-ignore
       const unitTxt = typeof ftInfo.unit === "string" ? " " + ftInfo.unit : "";
       if(ftInfo.type === "slider")
-        labelElem.innerText = fmtVal(Number(value)) + unitTxt;
+        labelElem.textContent = fmtVal(Number(value)) + unitTxt;
       else if(ftInfo.type === "toggle")
-        labelElem.innerText = toggleLabelText(Boolean(value)) + unitTxt;
+        labelElem.textContent = toggleLabelText(Boolean(value)) + unitTxt;
     }
     info("Rebuilt config menu");
   });
@@ -553,7 +553,7 @@ export async function addCfgMenu() {
   versionElem.role = "button";
   versionElem.tabIndex = 0;
   versionElem.ariaLabel = versionElem.title = t("version_tooltip", scriptInfo.version, scriptInfo.buildNumber);
-  versionElem.innerText = `v${scriptInfo.version} (${scriptInfo.buildNumber})`;
+  versionElem.textContent = `v${scriptInfo.version} (${scriptInfo.buildNumber})`;
   const versionElemClicked = (e: MouseEvent | KeyboardEvent) => {
     e.preventDefault();
     e.stopPropagation();
@@ -733,11 +733,11 @@ async function openHelpDialog(featureKey: FeatureKey) {
     const featDescElem = menuBgElem.querySelector<HTMLElement>("#bytm-feat-help-menu-desc")!;
     const helpTextElem = menuBgElem.querySelector<HTMLElement>("#bytm-feat-help-menu-text")!;
 
-    featDescElem.innerText = t(`feature_desc_${featureKey}`);
+    featDescElem.textContent = t(`feature_desc_${featureKey}`);
 
     // @ts-ignore
     const helpText: string | undefined = featInfo[featureKey]?.helpText?.();
-    helpTextElem.innerText = helpText ?? t(`feature_helptext_${featureKey}`);
+    helpTextElem.textContent = helpText ?? t(`feature_helptext_${featureKey}`);
   }
 
   // show menu
@@ -815,7 +815,7 @@ async function addExportMenu() {
 
   const titleElem = document.createElement("h2");
   titleElem.className = "bytm-menu-title";
-  titleElem.innerText = t("export_menu_title", scriptInfo.name);
+  titleElem.textContent = t("export_menu_title", scriptInfo.name);
 
   const closeElem = document.createElement("img");
   closeElem.classList.add("bytm-menu-close");
@@ -842,7 +842,7 @@ async function addExportMenu() {
 
   const textElem = document.createElement("div");
   textElem.id = "bytm-export-menu-text";
-  textElem.innerText = t("export_hint");
+  textElem.textContent = t("export_hint");
 
   const textAreaElem = document.createElement("textarea");
   textAreaElem.id = "bytm-export-menu-textarea";
@@ -863,13 +863,13 @@ async function addExportMenu() {
 
   const copyBtnElem = document.createElement("button");
   copyBtnElem.classList.add("bytm-btn");
-  copyBtnElem.innerText = t("copy_to_clipboard");
+  copyBtnElem.textContent = t("copy_to_clipboard");
   copyBtnElem.ariaLabel = copyBtnElem.title = t("copy_config_tooltip");
 
   const copiedTextElem = document.createElement("span");
   copiedTextElem.id = "bytm-export-menu-copied-txt";
   copiedTextElem.classList.add("bytm-menu-footer-copied");
-  copiedTextElem.innerText = t("copied_notice");
+  copiedTextElem.textContent = t("copied_notice");
   copiedTextElem.style.display = "none";
 
   copyBtnElem.addEventListener("click", async (evt) => {
@@ -990,7 +990,7 @@ async function addImportMenu() {
 
   const titleElem = document.createElement("h2");
   titleElem.className = "bytm-menu-title";
-  titleElem.innerText = t("import_menu_title", scriptInfo.name);
+  titleElem.textContent = t("import_menu_title", scriptInfo.name);
 
   const closeElem = document.createElement("img");
   closeElem.classList.add("bytm-menu-close");
@@ -1017,7 +1017,7 @@ async function addImportMenu() {
 
   const textElem = document.createElement("div");
   textElem.id = "bytm-import-menu-text";
-  textElem.innerText = t("import_hint");
+  textElem.textContent = t("import_hint");
 
   const textAreaElem = document.createElement("textarea");
   textAreaElem.id = "bytm-import-menu-textarea";
@@ -1028,7 +1028,7 @@ async function addImportMenu() {
 
   const importBtnElem = document.createElement("button");
   importBtnElem.classList.add("bytm-btn");
-  importBtnElem.innerText = t("import");
+  importBtnElem.textContent = t("import");
   importBtnElem.ariaLabel = importBtnElem.title = t("start_import_tooltip");
 
   importBtnElem.addEventListener("click", async (evt) => {
@@ -1201,7 +1201,7 @@ async function addChangelogMenu() {
 
   const titleElem = document.createElement("h2");
   titleElem.className = "bytm-menu-title";
-  titleElem.innerText = t("changelog_menu_title", scriptInfo.name);
+  titleElem.textContent = t("changelog_menu_title", scriptInfo.name);
 
   const closeElem = document.createElement("img");
   closeElem.classList.add("bytm-menu-close");

src/menu/updateMenu.ts

@@ -56,7 +56,7 @@ export function openUpdateMenu(newVersion: string) {
     return warn("Couldn't find update menu background element");
 
   const changes = {
-    "#update-menu-version": (el: HTMLElement) => el.innerText = newVersion,
+    "#update-menu-version": (el: HTMLElement) => el.textContent = newVersion,
     "#update-menu-changelog-url": (el: HTMLAnchorElement) => {
       el.href = `https://github.com/Sv443/BetterYTM/blob/main/changelog.md#${newVersion.replace(/\./g, "")}`;
     },

src/menu/welcomeMenu.ts

@@ -106,7 +106,7 @@ export async function addWelcomeMenu() {
   for(const [locale, { name }] of Object.entries(locales)) {
     const localeOptionElem = document.createElement("option");
     localeOptionElem.value = locale;
-    localeOptionElem.innerText = name;
+    localeOptionElem.textContent = name;
     localeSelectElem.appendChild(localeOptionElem);
   }
   localeSelectElem.value = getFeatures().locale;
@@ -197,18 +197,18 @@ function retranslateWelcomeMenu() {
   };
 
   const changes = {
-    "#bytm-welcome-menu-title": (e: HTMLElement) => e.innerText = t("welcome_menu_title", scriptInfo.name),
+    "#bytm-welcome-menu-title": (e: HTMLElement) => e.textContent = t("welcome_menu_title", scriptInfo.name),
     "#bytm-welcome-menu-title-close": (e: HTMLElement) => e.ariaLabel = e.title = t("close_menu_tooltip"),
     "#bytm-welcome-menu-open-cfg": (e: HTMLElement) => {
-      e.innerText = t("config_menu");
+      e.textContent = t("config_menu");
       e.ariaLabel = e.title = t("open_config_menu_tooltip");
     },
     "#bytm-welcome-menu-open-changelog": (e: HTMLElement) => {
-      e.innerText = t("open_changelog");
+      e.textContent = t("open_changelog");
       e.ariaLabel = e.title = t("open_changelog_tooltip");
     },
     "#bytm-welcome-menu-footer-close": (e: HTMLElement) => {
-      e.innerText = t("close");
+      e.textContent = t("close");
       e.ariaLabel = e.title = t("close_menu_tooltip");
     },
     "#bytm-welcome-text-line1": (e: HTMLElement) => e.innerHTML = t("welcome_text_line_1"),