From 0c7045042d11b3657e9b1a59752006b85c0a3047 Mon Sep 17 00:00:00 2001 From: Chocobo1 Date: Fri, 9 Aug 2024 22:28:23 +0800 Subject: [PATCH 1/3] WebUI: replace deprecated property --- src/webui/www/private/scripts/progressbar.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/webui/www/private/scripts/progressbar.js b/src/webui/www/private/scripts/progressbar.js index 9344c4cc8950..05b8cfbb8834 100644 --- a/src/webui/www/private/scripts/progressbar.js +++ b/src/webui/www/private/scripts/progressbar.js @@ -125,8 +125,8 @@ window.qBittorrent.ProgressBar ??= (() => { this.vals.light.textContent = displayedValue; const r = parseInt((this.vals.width * (value / 100)), 10); - this.vals.dark.setStyle("clip", `rect(0, ${r}px, ${this.vals.height}px, 0)`); - this.vals.light.setStyle("clip", `rect(0, ${this.vals.width}px, ${this.vals.height}px, ${r}px)`); + this.vals.dark.style.clipPath = `inset(0 calc(100% - ${r}px) 0 0)`; + this.vals.light.style.clipPath = `inset(0 0 0 ${r}px)`; } function ProgressBar_setWidth(value) { From 9df3ee0de8722245aecf04d5e35143197b2ddf32 Mon Sep 17 00:00:00 2001 From: Chocobo1 Date: Fri, 9 Aug 2024 23:00:06 +0800 Subject: [PATCH 2/3] WebUI: use native property to set styles --- src/webui/www/private/scripts/client.js | 6 +- src/webui/www/private/scripts/contextmenu.js | 59 +++++++------------ src/webui/www/private/scripts/dynamicTable.js | 34 +++++------ src/webui/www/private/scripts/progressbar.js | 12 ++-- src/webui/www/private/views/log.html | 4 +- src/webui/www/private/views/rss.html | 2 +- 6 files changed, 48 insertions(+), 69 deletions(-) diff --git a/src/webui/www/private/scripts/client.js b/src/webui/www/private/scripts/client.js index f26a1bdfa526..149ffe82e9c6 100644 --- a/src/webui/www/private/scripts/client.js +++ b/src/webui/www/private/scripts/client.js @@ -172,10 +172,8 @@ window.addEventListener("DOMContentLoaded", () => { }); /* MochaUI.Desktop = new MochaUI.Desktop(); - MochaUI.Desktop.desktop.setStyles({ - 'background': '#fff', - 'visibility': 'visible' - });*/ + MochaUI.Desktop.desktop.style.background = "#fff"; + MochaUI.Desktop.desktop.style.visibility = "visible"; */ MochaUI.Desktop.initialize(); const buildTransfersTab = function() { diff --git a/src/webui/www/private/scripts/contextmenu.js b/src/webui/www/private/scripts/contextmenu.js index 6140e7ced2ba..614bae0f4f7e 100644 --- a/src/webui/www/private/scripts/contextmenu.js +++ b/src/webui/www/private/scripts/contextmenu.js @@ -78,23 +78,18 @@ window.qBittorrent.ContextMenu ??= (() => { this.fx = new Fx.Tween(this.menu, { property: "opacity", duration: this.options.fadeSpeed, - onComplete: function() { - if (this.getStyle("opacity")) - this.setStyle("visibility", "visible"); - else - this.setStyle("visibility", "hidden"); - }.bind(this.menu) + onComplete: () => { + this.menu.style.visibility = (getComputedStyle(this.menu).opacity > 0) ? "visible" : "hidden"; + } }); // hide and begin the listener this.hide().startListener(); // hide the menu - this.menu.setStyles({ - "position": "absolute", - "top": "-900000px", - "display": "block" - }); + this.menu.style.position = "absolute"; + this.menu.style.top = "-900000px"; + this.menu.style.display = "block"; }, adjustMenuPosition: function(e) { @@ -103,13 +98,11 @@ window.qBittorrent.ContextMenu ??= (() => { const scrollableMenuMaxHeight = document.documentElement.clientHeight * 0.75; if (this.menu.hasClass("scrollableMenu")) - this.menu.setStyle("max-height", scrollableMenuMaxHeight); + this.menu.style.maxHeight = `${scrollableMenuMaxHeight}px`; // draw the menu off-screen to know the menu dimensions - this.menu.setStyles({ - left: "-999em", - top: "-999em" - }); + this.menu.style.left = "-999em"; + this.menu.style.top = "-999em"; // position the menu let xPosMenu = e.pageX + this.options.offsets.x; @@ -122,19 +115,17 @@ window.qBittorrent.ContextMenu ??= (() => { xPosMenu = 0; if (yPosMenu < 0) yPosMenu = 0; - this.menu.setStyles({ - left: xPosMenu, - top: yPosMenu, - position: "absolute", - "z-index": "2000" - }); + this.menu.style.left = `${xPosMenu}px`; + this.menu.style.top = `${yPosMenu}px`; + this.menu.style.position = "absolute"; + this.menu.style.zIndex = "2000"; // position the sub-menu const uls = this.menu.getElementsByTagName("ul"); for (let i = 0; i < uls.length; ++i) { const ul = uls[i]; if (ul.hasClass("scrollableMenu")) - ul.setStyle("max-height", scrollableMenuMaxHeight); + ul.style.maxHeight = `${scrollableMenuMaxHeight}px`; const rectParent = ul.parentNode.getBoundingClientRect(); const xPosOrigin = rectParent.left; const yPosOrigin = rectParent.bottom; @@ -148,10 +139,8 @@ window.qBittorrent.ContextMenu ??= (() => { xPos = 0; if (yPos < 0) yPos = 0; - ul.setStyles({ - "margin-left": xPos - xPosOrigin, - "margin-top": yPos - yPosOrigin - }); + ul.style.marginLeft = `${xPos - xPosOrigin}px`; + ul.style.marginTop = `${yPos - yPosOrigin}px`; } }, @@ -686,10 +675,8 @@ window.qBittorrent.ContextMenu ??= (() => { this.updateMenuItems(); // draw the menu off-screen to know the menu dimensions - this.menu.setStyles({ - left: "-999em", - top: "-999em" - }); + this.menu.style.left = "-999em"; + this.menu.style.top = "-999em"; // position the menu let xPosMenu = e.pageX + this.options.offsets.x - $("rssdownloaderpage").offsetLeft; let yPosMenu = e.pageY + this.options.offsets.y - $("rssdownloaderpage").offsetTop; @@ -700,12 +687,10 @@ window.qBittorrent.ContextMenu ??= (() => { xPosMenu = Math.max(xPosMenu, 0); yPosMenu = Math.max(yPosMenu, 0); - this.menu.setStyles({ - left: xPosMenu, - top: yPosMenu, - position: "absolute", - "z-index": "2000" - }); + this.menu.style.left = `${xPosMenu}px`; + this.menu.style.top = `${yPosMenu}px`; + this.menu.style.position = "absolute"; + this.menu.style.zIndex = "2000"; }, updateMenuItems: function() { const selectedRows = window.qBittorrent.RssDownloader.rssDownloaderRulesTable.selectedRowsIds(); diff --git a/src/webui/www/private/scripts/dynamicTable.js b/src/webui/www/private/scripts/dynamicTable.js index 1b12b8d3bb97..ecf618be989d 100644 --- a/src/webui/www/private/scripts/dynamicTable.js +++ b/src/webui/www/private/scripts/dynamicTable.js @@ -137,16 +137,10 @@ window.qBittorrent.DynamicTable ??= (() => { this.canResize = false; const resetElementBorderStyle = function(el, side) { - if ((side === "left") || (side !== "right")) { - el.setStyle("border-left-style", ""); - el.setStyle("border-left-color", ""); - el.setStyle("border-left-width", ""); - } - if ((side === "right") || (side !== "left")) { - el.setStyle("border-right-style", ""); - el.setStyle("border-right-color", ""); - el.setStyle("border-right-width", ""); - } + if ((side === "left") || (side !== "right")) + el.style.borderLeft = ""; + if ((side === "right") || (side !== "left")) + el.style.borderRight = ""; }; const mouseMoveFn = function(e) { @@ -190,11 +184,13 @@ window.qBittorrent.DynamicTable ??= (() => { changeBorderSide = "left"; } - borderChangeElement.setStyle("border-" + changeBorderSide + "-style", "solid"); - borderChangeElement.setStyle("border-" + changeBorderSide + "-color", "#e60"); - borderChangeElement.setStyle("border-" + changeBorderSide + "-width", "initial"); + const borderStyle = "initial solid #e60"; + if (changeBorderSide === "left") + borderChangeElement.style.borderLeft = borderStyle; + else + borderChangeElement.style.borderRight = borderStyle; - resetElementBorderStyle(borderChangeElement, changeBorderSide === "right" ? "left" : "right"); + resetElementBorderStyle(borderChangeElement, ((changeBorderSide === "right") ? "left" : "right")); borderChangeElement.getSiblings('[class=""]').each((el) => { resetElementBorderStyle(el); @@ -218,11 +214,11 @@ window.qBittorrent.DynamicTable ??= (() => { const onStart = function(el, event) { if (this.canResize) { this.currentHeaderAction = "resize"; - this.startWidth = this.resizeTh.getStyle("width").toFloat(); + this.startWidth = parseInt(this.resizeTh.style.width, 10); } else { this.currentHeaderAction = "drag"; - el.setStyle("background-color", "#C1D5E7"); + el.style.backgroundColor = "#C1D5E7"; } }.bind(this); @@ -238,7 +234,7 @@ window.qBittorrent.DynamicTable ??= (() => { const onComplete = function(el, event) { resetElementBorderStyle(this.lastHoverTh); - el.setStyle("background-color", ""); + el.style.backgroundColor = ""; if (this.currentHeaderAction === "resize") LocalPreferences.set("column_" + this.resizeTh.columnName + "_width_" + this.dynamicTableDivId, this.columns[this.resizeTh.columnName].width); if ((this.currentHeaderAction === "drag") && (el !== this.lastHoverTh)) { @@ -855,7 +851,7 @@ window.qBittorrent.DynamicTable ??= (() => { }, selectNextRow: function() { - const visibleRows = $(this.dynamicTableDivId).getElements("tbody tr").filter(e => e.getStyle("display") !== "none"); + const visibleRows = $(this.dynamicTableDivId).getElements("tbody tr").filter(e => e.style.display !== "none"); const selectedRowId = this.getSelectedRowId(); let selectedIndex = -1; @@ -877,7 +873,7 @@ window.qBittorrent.DynamicTable ??= (() => { }, selectPreviousRow: function() { - const visibleRows = $(this.dynamicTableDivId).getElements("tbody tr").filter(e => e.getStyle("display") !== "none"); + const visibleRows = $(this.dynamicTableDivId).getElements("tbody tr").filter(e => e.style.display !== "none"); const selectedRowId = this.getSelectedRowId(); let selectedIndex = -1; diff --git a/src/webui/www/private/scripts/progressbar.js b/src/webui/www/private/scripts/progressbar.js index 05b8cfbb8834..db089086b1e3 100644 --- a/src/webui/www/private/scripts/progressbar.js +++ b/src/webui/www/private/scripts/progressbar.js @@ -132,9 +132,9 @@ window.qBittorrent.ProgressBar ??= (() => { function ProgressBar_setWidth(value) { if (this.vals.width !== value) { this.vals.width = value; - this.setStyle("width", value); - this.vals.dark.setStyle("width", value); - this.vals.light.setStyle("width", value); + this.style.width = `${value}px`; + this.vals.dark.style.width = `${value}px`; + this.vals.light.style.width = `${value}px`; this.setValue(this.vals.value); } } @@ -145,10 +145,10 @@ window.qBittorrent.ProgressBar ??= (() => { return; if (!obj.parentNode) return setTimeout('ProgressBar_checkForParent("' + id + '")', 100); - obj.setStyle("width", "100%"); + obj.style.width = "100%"; const w = obj.offsetWidth; - obj.vals.dark.setStyle("width", w); - obj.vals.light.setStyle("width", w); + obj.vals.dark.style.width = `${w}px`; + obj.vals.light.style.width = `${w}px`; obj.vals.width = w; obj.setValue(obj.vals.value); } diff --git a/src/webui/www/private/views/log.html b/src/webui/www/private/views/log.html index d5ced4281628..6a1086697236 100644 --- a/src/webui/www/private/views/log.html +++ b/src/webui/www/private/views/log.html @@ -228,8 +228,8 @@ tableInfo["main"].instance.setup("logMessageTableDiv", "logMessageTableFixedHeaderDiv", logTableContextMenu); tableInfo["peer"].instance.setup("logPeerTableDiv", "logPeerTableFixedHeaderDiv", logTableContextMenu); - MUI.Panels.instances.LogPanel.contentEl.setStyle("height", "100%"); - $("logView").setStyle("height", "inherit"); + MUI.Panels.instances.LogPanel.contentEl.style.height = "100%"; + $("logView").style.height = "inherit"; load(); }; diff --git a/src/webui/www/private/views/rss.html b/src/webui/www/private/views/rss.html index 6f95b98b6c22..6b4ce36c1234 100644 --- a/src/webui/www/private/views/rss.html +++ b/src/webui/www/private/views/rss.html @@ -39,7 +39,7 @@ #rightRssColumn { float: left; /* should be 20 px but due to rounding differences some browsers don't render that properly */ - width: calc(calc(100% - 21px) / 3); + width: calc((100% - 21px) / 3); border: none; } From 3e18b1d30c95b3b5e73603aa93c82de343f66da7 Mon Sep 17 00:00:00 2001 From: Chocobo1 Date: Fri, 9 Aug 2024 23:49:57 +0800 Subject: [PATCH 3/3] WebUI: remove outdated CSS property WebUI already has the standard counterparts. --- src/webui/www/private/css/style.css | 4 ---- src/webui/www/private/scripts/contextmenu.js | 1 - src/webui/www/private/views/searchplugins.html | 4 ---- 3 files changed, 9 deletions(-) diff --git a/src/webui/www/private/css/style.css b/src/webui/www/private/css/style.css index 5fc361c4a710..d5c1f42e6d10 100644 --- a/src/webui/www/private/css/style.css +++ b/src/webui/www/private/css/style.css @@ -678,15 +678,11 @@ td.statusBarSeparator { } #searchResultsTableContainer { - -moz-height: calc(100% - 177px); - -webkit-height: calc(100% - 177px); height: calc(100% - 177px); overflow: auto; } #searchResultsTableDiv { - -moz-height: calc(100% - 26px) !important; - -webkit-height: calc(100% - 26px) !important; height: calc(100% - 26px) !important; } diff --git a/src/webui/www/private/scripts/contextmenu.js b/src/webui/www/private/scripts/contextmenu.js index 614bae0f4f7e..979766ba6bad 100644 --- a/src/webui/www/private/scripts/contextmenu.js +++ b/src/webui/www/private/scripts/contextmenu.js @@ -174,7 +174,6 @@ window.qBittorrent.ContextMenu ??= (() => { addTarget: function(t) { // prevent long press from selecting this text t.style.userSelect = "none"; - t.style["-webkit-user-select"] = "none"; this.targets[this.targets.length] = t; this.setupEventListeners(t); diff --git a/src/webui/www/private/views/searchplugins.html b/src/webui/www/private/views/searchplugins.html index b795c47c8c8c..20582b196df2 100644 --- a/src/webui/www/private/views/searchplugins.html +++ b/src/webui/www/private/views/searchplugins.html @@ -17,8 +17,6 @@ #searchPluginsTable { width: 100%; height: calc(100% - 150px); - -moz-height: calc(100% - 150px); - -webkit-height: calc(100% - 150px); } #searchPluginsTable .dynamicTable { @@ -27,8 +25,6 @@ #searchPluginsTableDiv { height: calc(100% - 26px); - -moz-height: calc(100% - 26px); - -webkit-height: calc(100% - 26px); } #dynamicTableFixedHeaderDiv {