feat: new delete icon

dist/BetterYTM.user.js

@@ -487,7 +487,7 @@ const scriptInfo = Object.freeze({
     name: GM.info.script.name,
     version: GM.info.script.version,
     namespace: GM.info.script.namespace,
-    lastCommit: "bdafbdf", // assert as generic string instead of union
+    lastCommit: "0de7c51", // assert as generic string instead of union
 });
 
 
@@ -985,8 +985,8 @@ function addWatermark() {
 function addConfigMenuOption(container) {
     const cfgOptElem = document.createElement("a");
     cfgOptElem.role = "button";
-    cfgOptElem.tabIndex = 0;
     cfgOptElem.className = "bytm-cfg-menu-option";
+    cfgOptElem.ariaLabel = "Click to open BetterYTM's configuration menu";
     const cfgOptItemElem = document.createElement("div");
     cfgOptItemElem.className = "bytm-cfg-menu-option-item";
     cfgOptItemElem.addEventListener("click", () => {
@@ -1000,7 +1000,6 @@ function addConfigMenuOption(container) {
     const cfgOptTextElem = document.createElement("div");
     cfgOptTextElem.className = "bytm-cfg-menu-option-text";
     cfgOptTextElem.innerText = "BetterYTM Configuration";
-    cfgOptTextElem.title = "Click to open BetterYTM's configuration menu";
     cfgOptItemElem.appendChild(cfgOptIconElem);
     cfgOptItemElem.appendChild(cfgOptTextElem);
     cfgOptElem.appendChild(cfgOptItemElem);
@@ -1037,7 +1036,6 @@ function setVolSliderStep() {
     sliderElem.setAttribute("step", String(features.volumeSliderStep));
 }
 //#MARKER queue buttons
-// TODO: account for the fact initially the elements might not exist, if the site was not opened directly with a video playing or via the /watch path
 function initQueueButtons() {
     const addQueueBtns = (evt) => {
         let amt = 0;
@@ -1156,7 +1154,7 @@ function addQueueButtons(queueItem) {
             }));
             const imgElem = document.createElement("img");
             imgElem.className = "bytm-generic-btn-img";
-            imgElem.src = (0,_utils__WEBPACK_IMPORTED_MODULE_2__.getAssetUrl)("close.png"); // TODO: make own icon for this
+            imgElem.src = (0,_utils__WEBPACK_IMPORTED_MODULE_2__.getAssetUrl)("delete.svg");
             deleteBtnElem.appendChild(imgElem);
         }
         //#SECTION append elements to DOM
@@ -1168,7 +1166,6 @@ function addQueueButtons(queueItem) {
     });
 }
 //#MARKER better clickable stuff
-// TODO: account for the fact initially the elements might not exist, if the site was opened directly with the /watch path
 /** Adds anchors around elements and tweaks existing ones so songs are easier to open in a new tab */
 function addAnchorImprovements() {
     /** Only adds anchor improvements for carousel shelves that contain the regular list-item-renderer, not the two-row-item-renderer */
@@ -2242,6 +2239,7 @@ var __awaiter = (undefined && undefined.__awaiter) || function (thisArg, _argume
 const precacheImgs = [
     (0,_utils__WEBPACK_IMPORTED_MODULE_2__.getAssetUrl)("close.png"),
     (0,_utils__WEBPACK_IMPORTED_MODULE_2__.getAssetUrl)("loading.svg"),
+    (0,_utils__WEBPACK_IMPORTED_MODULE_2__.getAssetUrl)("delete.svg"),
     (0,_utils__WEBPACK_IMPORTED_MODULE_2__.getAssetUrl)("icon/icon.png"),
 ];
 {

src/features/layout.ts

@@ -48,8 +48,8 @@ export function addWatermark() {
 export function addConfigMenuOption(container: HTMLElement) {
   const cfgOptElem = document.createElement("a");
   cfgOptElem.role = "button";
-  cfgOptElem.tabIndex = 0;
   cfgOptElem.className = "bytm-cfg-menu-option";
+  cfgOptElem.ariaLabel = "Click to open BetterYTM's configuration menu";
   
   const cfgOptItemElem = document.createElement("div");
   cfgOptItemElem.className = "bytm-cfg-menu-option-item";
@@ -66,7 +66,6 @@ export function addConfigMenuOption(container: HTMLElement) {
   const cfgOptTextElem = document.createElement("div");
   cfgOptTextElem.className = "bytm-cfg-menu-option-text";
   cfgOptTextElem.innerText = "BetterYTM Configuration";
-  cfgOptTextElem.title = "Click to open BetterYTM's configuration menu";
 
   cfgOptItemElem.appendChild(cfgOptIconElem);
   cfgOptItemElem.appendChild(cfgOptTextElem);
@@ -118,7 +117,6 @@ export function setVolSliderStep() {
 
 //#MARKER queue buttons
 
-// TODO: account for the fact initially the elements might not exist, if the site was not opened directly with a video playing or via the /watch path
 export function initQueueButtons() {
   const addQueueBtns = (evt: Event) => {
     let amt = 0;
@@ -263,7 +261,7 @@ async function addQueueButtons(queueItem: HTMLElement) {
 
     const imgElem = document.createElement("img");
     imgElem.className = "bytm-generic-btn-img";
-    imgElem.src = getAssetUrl("close.png"); // TODO: make own icon for this
+    imgElem.src = getAssetUrl("delete.svg");
 
     deleteBtnElem.appendChild(imgElem);
   }
@@ -281,7 +279,6 @@ async function addQueueButtons(queueItem: HTMLElement) {
 
 //#MARKER better clickable stuff
 
-// TODO: account for the fact initially the elements might not exist, if the site was opened directly with the /watch path
 /** Adds anchors around elements and tweaks existing ones so songs are easier to open in a new tab */
 export function addAnchorImprovements() {
   /** Only adds anchor improvements for carousel shelves that contain the regular list-item-renderer, not the two-row-item-renderer */

src/index.ts

@@ -19,6 +19,7 @@ import {
 const precacheImgs = [
   getAssetUrl("close.png"),
   getAssetUrl("loading.svg"),
+  getAssetUrl("delete.svg"),
   getAssetUrl("icon/icon.png"),
 ];