WebUI: Replace getElements & getChildren

This PR further reduces Mootools usage.
PR #22220.

src/webui/www/private/scripts/client.js

@@ -490,7 +490,8 @@ window.addEventListener("DOMContentLoaded", () => {
         const categoryList = document.getElementById("categoryFilterList");
         if (!categoryList)
             return;
-        categoryList.getChildren().each(c => c.destroy());
+
+        [...categoryList.children].forEach((el) => { el.destroy(); });
 
         const categoryItemTemplate = document.getElementById("categoryFilterItem");
 
@@ -611,7 +612,7 @@ window.addEventListener("DOMContentLoaded", () => {
         if (tagFilterList === null)
             return;
 
-        tagFilterList.getChildren().each(c => c.destroy());
+        [...tagFilterList.children].forEach((el) => { el.destroy(); });
 
         const tagItemTemplate = document.getElementById("tagFilterItem");
 
@@ -664,7 +665,7 @@ window.addEventListener("DOMContentLoaded", () => {
         if (trackerFilterList === null)
             return;
 
-        trackerFilterList.getChildren().each(c => c.destroy());
+        [...trackerFilterList.children].forEach((el) => { el.destroy(); });
 
         const trackerItemTemplate = document.getElementById("trackerFilterItem");
 

src/webui/www/private/scripts/contextmenu.js

@@ -478,7 +478,7 @@ window.qBittorrent.ContextMenu ??= (() => {
 
         updateCategoriesSubMenu(categories) {
             const contextCategoryList = $("contextCategoryList");
-            contextCategoryList.getChildren().each(c => c.destroy());
+            [...contextCategoryList.children].forEach((el) => { el.destroy(); });
 
             const createMenuItem = (text, imgURL, clickFn) => {
                 const anchor = document.createElement("a");
@@ -633,15 +633,12 @@ window.qBittorrent.ContextMenu ??= (() => {
     class SearchPluginsTableContextMenu extends ContextMenu {
         updateMenuItems() {
             const enabledColumnIndex = (text) => {
-                const columns = $("searchPluginsTableFixedHeaderRow").getChildren("th");
+                const columns = document.querySelectorAll("#searchPluginsTableFixedHeaderRow th");
-                for (let i = 0; i < columns.length; ++i) {
+                return Array.prototype.findIndex.call(columns, (column => column.textContent === "Enabled"));
-                    if (columns[i].textContent === "Enabled")
-                        return i;
-                }
             };
 
             this.showItem("Enabled");
-            this.setItemChecked("Enabled", (this.options.element.getChildren("td")[enabledColumnIndex()].textContent === "Yes"));
+            this.setItemChecked("Enabled", (this.options.element.children[enabledColumnIndex()].textContent === "Yes"));
 
             this.showItem("Uninstall");
         }

src/webui/www/private/scripts/dynamicTable.js

@@ -74,9 +74,9 @@ window.qBittorrent.DynamicTable ??= (() => {
             this.dynamicTableDivId = dynamicTableDivId;
             this.dynamicTableFixedHeaderDivId = dynamicTableFixedHeaderDivId;
             this.dynamicTableDiv = document.getElementById(dynamicTableDivId);
-            this.fixedTableHeader = $(dynamicTableFixedHeaderDivId).getElements("tr")[0];
+            this.fixedTableHeader = document.querySelector(`#${dynamicTableFixedHeaderDivId} thead tr`);
-            this.hiddenTableHeader = $(dynamicTableDivId).getElements("tr")[0];
+            this.hiddenTableHeader = this.dynamicTableDiv.querySelector(`thead tr`);
-            this.tableBody = $(dynamicTableDivId).getElements("tbody")[0];
+            this.tableBody = this.dynamicTableDiv.querySelector(`tbody`);
             this.rows = new Map();
             this.selectedRows = [];
             this.columns = [];
@@ -330,10 +330,7 @@ window.qBittorrent.DynamicTable ??= (() => {
                 }
             }.bind(this);
 
-            const ths = this.fixedTableHeader.getElements("th");
+            for (const th of this.getRowCells(this.fixedTableHeader)) {
-
-            for (let i = 0; i < ths.length; ++i) {
-                const th = ths[i];
                 th.addEventListener("mousemove", mouseMoveFn);
                 th.addEventListener("mouseout", mouseOutFn);
                 th.addEventListener("touchend", onTouch, { passive: true });
@@ -382,8 +379,8 @@ window.qBittorrent.DynamicTable ??= (() => {
             context.font = window.getComputedStyle(bodyColumn, null).getPropertyValue("font");
 
             const longestTd = { value: "", width: 0 };
-            for (const tr of this.tableBody.querySelectorAll("tr")) {
+            for (const tr of this.getTrs()) {
-                const tds = tr.querySelectorAll("td");
+                const tds = this.getRowCells(tr);
                 const td = tds[columnIndex];
 
                 const buffer = column.calculateBuffer(tr.rowId);
@@ -606,8 +603,7 @@ window.qBittorrent.DynamicTable ??= (() => {
         },
 
         updateHeader: function(header) {
-            const ths = header.getElements("th");
+            const ths = this.getRowCells(header);
-
             for (let i = 0; i < ths.length; ++i) {
                 const th = ths[i];
                 th._this = this;
@@ -708,10 +704,7 @@ window.qBittorrent.DynamicTable ??= (() => {
 
         selectAll: function() {
             this.deselectAll();
-
+            for (const tr of this.getTrs()) {
-            const trs = this.tableBody.getElements("tr");
-            for (let i = 0; i < trs.length; ++i) {
-                const tr = trs[i];
                 this.selectedRows.push(tr.rowId);
                 tr.classList.add("selected");
             }
@@ -741,16 +734,15 @@ window.qBittorrent.DynamicTable ??= (() => {
             }
 
             let select = false;
-            const that = this;
+            for (const tr of this.getTrs()) {
-            this.tableBody.getElements("tr").each((tr) => {
                 if ((tr.rowId === rowId1) || (tr.rowId === rowId2)) {
                     select = !select;
-                    that.selectedRows.push(tr.rowId);
+                    this.selectedRows.push(tr.rowId);
                 }
                 else if (select) {
-                    that.selectedRows.push(tr.rowId);
+                    this.selectedRows.push(tr.rowId);
+                }
             }
-            });
             this.setRowClass();
             this.onSelectedRowChanged();
         },
@@ -758,14 +750,14 @@ window.qBittorrent.DynamicTable ??= (() => {
         reselectRows: function(rowIds) {
             this.deselectAll();
             this.selectedRows = rowIds.slice();
-            this.tableBody.getElements("tr").each((tr) => {
+            for (const tr of this.getTrs()) {
                 if (rowIds.includes(tr.rowId))
                     tr.classList.add("selected");
-            });
+            }
         },
 
         setRowClass: function() {
-            for (const tr of this.tableBody.querySelectorAll("tr"))
+            for (const tr of this.getTrs())
                 tr.classList.toggle("selected", this.isRowSelected(tr.rowId));
         },
 
@@ -827,12 +819,7 @@ window.qBittorrent.DynamicTable ??= (() => {
         },
 
         getTrByRowId: function(rowId) {
-            const trs = this.tableBody.getElements("tr");
+            return Array.prototype.find.call(this.getTrs(), (tr => tr.rowId === rowId));
-            for (let i = 0; i < trs.length; ++i) {
-                if (trs[i].rowId === rowId)
-                    return trs[i];
-            }
-            return null;
         },
 
         updateTable: function(fullUpdate = false) {
@@ -845,7 +832,7 @@ window.qBittorrent.DynamicTable ??= (() => {
                 }
             }
 
-            const trs = this.tableBody.getElements("tr");
+            const trs = [...this.getTrs()];
 
             for (let rowPos = 0; rowPos < rows.length; ++rowPos) {
                 const rowId = rows[rowPos]["rowId"];
@@ -927,9 +914,8 @@ window.qBittorrent.DynamicTable ??= (() => {
         clear: function() {
             this.deselectAll();
             this.rows.clear();
-            const trs = this.tableBody.getElements("tr");
+            for (const tr of this.getTrs())
-            while (trs.length > 0)
+                tr.destroy();
-                trs.pop().destroy();
         },
 
         selectedRowsIds: function() {
@@ -953,7 +939,7 @@ window.qBittorrent.DynamicTable ??= (() => {
         },
 
         selectNextRow: function() {
-            const visibleRows = $(this.dynamicTableDivId).getElements("tbody tr").filter(e => e.style.display !== "none");
+            const visibleRows = Array.prototype.filter.call(this.getTrs(), (tr => !tr.classList.contains("invisible") && (tr.style.display !== "none")));
             const selectedRowId = this.getSelectedRowId();
 
             let selectedIndex = -1;
@@ -975,7 +961,7 @@ window.qBittorrent.DynamicTable ??= (() => {
         },
 
         selectPreviousRow: function() {
-            const visibleRows = $(this.dynamicTableDivId).getElements("tbody tr").filter(e => e.style.display !== "none");
+            const visibleRows = Array.prototype.filter.call(this.getTrs(), (tr => !tr.classList.contains("invisible") && (tr.style.display !== "none")));
             const selectedRowId = this.getSelectedRowId();
 
             let selectedIndex = -1;
@@ -1249,8 +1235,8 @@ window.qBittorrent.DynamicTable ??= (() => {
                 if ((progressFormatted === 100.0) && (progress !== 1.0))
                     progressFormatted = 99.9;
 
-                if (td.getChildren("div").length > 0) {
+                const div = td.firstElementChild;
-                    const div = td.getChildren("div")[0];
+                if (div !== null) {
                     if (td.resized) {
                         td.resized = false;
                         div.setWidth(progressColumnWidth - 5);
@@ -1270,14 +1256,13 @@ window.qBittorrent.DynamicTable ??= (() => {
             this.columns["progress"].staticWidth = 100;
             this.columns["progress"].onResize = function(columnName) {
                 const pos = this.getColumnPos(columnName);
-                const trs = this.tableBody.getElements("tr");
                 progressColumnWidth = -1;
-                for (let i = 0; i < trs.length; ++i) {
+                for (const tr of this.getTrs()) {
-                    const td = trs[i].getElements("td")[pos];
+                    const td = this.getRowCells(tr)[pos];
                     if (progressColumnWidth < 0)
                         progressColumnWidth = td.offsetWidth;
                     td.resized = true;
-                    this.columns[columnName].updateTd(td, this.rows.get(trs[i].rowId));
+                    this.columns[columnName].updateTd(td, this.getRow(tr.rowId));
                 }
             }.bind(this);
 
@@ -2312,11 +2297,10 @@ window.qBittorrent.DynamicTable ??= (() => {
         },
 
         reselectRows: function(rowIds) {
-            const that = this;
             this.deselectAll();
-            this.tableBody.getElements("tr").each((tr) => {
+            for (const tr of this.getTrs()) {
                 if (rowIds.includes(tr.rowId)) {
-                    const node = that.getNode(tr.rowId);
+                    const node = this.getNode(tr.rowId);
                     node.checked = 0;
                     node.full_data.checked = 0;
 
@@ -2325,8 +2309,7 @@ window.qBittorrent.DynamicTable ??= (() => {
                     checkbox.indeterminate = false;
                     checkbox.checked = true;
                 }
-            });
+            }
-
             this.updateGlobalCheckbox();
         },
 
@@ -2838,7 +2821,7 @@ window.qBittorrent.DynamicTable ??= (() => {
             const row = this.rows.get(tr.rowId);
             const data = row[fullUpdate ? "full_data" : "data"];
 
-            const tds = tr.getElements("td");
+            const tds = this.getRowCells(tr);
             for (let i = 0; i < this.columns.length; ++i) {
                 if (Object.hasOwn(data, this.columns[i].dataProperties[0]))
                     this.columns[i].updateTd(tds[i], row);
@@ -2975,7 +2958,7 @@ window.qBittorrent.DynamicTable ??= (() => {
             const data = row[fullUpdate ? "full_data" : "data"];
             tr.classList.toggle("unreadArticle", !row.full_data.isRead);
 
-            const tds = tr.getElements("td");
+            const tds = this.getRowCells(tr);
             for (let i = 0; i < this.columns.length; ++i) {
                 if (Object.hasOwn(data, this.columns[i].dataProperties[0]))
                     this.columns[i].updateTd(tds[i], row);
@@ -3251,7 +3234,7 @@ window.qBittorrent.DynamicTable ??= (() => {
                 tr.classList.add("articleTableArticle");
             }
 
-            const tds = tr.getElements("td");
+            const tds = this.getRowCells(tr);
             for (let i = 0; i < this.columns.length; ++i) {
                 if (Object.hasOwn(data, this.columns[i].dataProperties[0]))
                     this.columns[i].updateTd(tds[i], row);
@@ -3266,7 +3249,7 @@ window.qBittorrent.DynamicTable ??= (() => {
         filterText: "",
 
         filteredLength: function() {
-            return this.tableBody.getElements("tr").length;
+            return this.tableBody.rows.length;
         },
 
         initColumns: function() {

src/webui/www/private/scripts/search.js

@@ -166,7 +166,7 @@ window.qBittorrent.Search ??= (() => {
     };
 
     const numSearchTabs = () => {
-        return $("searchTabs").getElements("li").length;
+        return document.querySelectorAll("#searchTabs li").length;
     };
 
     const getSearchIdFromTab = (tab) => {

src/webui/www/private/views/preferences.html

@@ -2102,7 +2102,8 @@ Use ';' to split multiple entries. Can use wildcard '*'.)QBT_TR[CONTEXT=OptionsD
 
         // Advanced Tab
         const updateNetworkInterfaces = (default_iface, default_iface_name) => {
-            $("networkInterface").getChildren().each(c => c.destroy());
+            [...document.getElementById("networkInterface").children].forEach((el) => { el.destroy(); });
+
             fetch("api/v2/app/networkInterfaceList", {
                     method: "GET",
                     cache: "no-store"
@@ -2130,7 +2131,8 @@ Use ';' to split multiple entries. Can use wildcard '*'.)QBT_TR[CONTEXT=OptionsD
         };
 
         const updateInterfaceAddresses = (iface, default_addr) => {
-            $("optionalIPAddressToBind").getChildren().each(c => c.destroy());
+            [...document.getElementById("optionalIPAddressToBind").children].forEach((el) => { el.destroy(); });
+
             const url = new URL("api/v2/app/networkInterfaceAddressList", window.location);
             url.search = new URLSearchParams({
                 iface: iface

src/webui/www/private/views/rss.html

@@ -417,13 +417,18 @@
                     });
                 });
 
-            $("rssDetailsView").getChildren().each(c => c.destroy());
+            clearDetails();
             rssArticleTable.updateTable(false);
         };
 
+        const clearDetails = () => {
+            [...document.getElementById("rssDetailsView").children].forEach((el) => { el.destroy(); });
+        };
+
         const showDetails = (feedUid, articleID) => {
             markArticleAsRead(pathByFeedId.get(feedUid), articleID);
-            $("rssDetailsView").getChildren().each(c => c.destroy());
+            clearDetails();
+
             const article = feedData[feedUid].filter((article) => article.id === articleID)[0];
             if (article) {
                 $("rssDetailsView").append((() => {