Merge pull request qbittorrent#21179 from Chocobo1/webui_style

WebUI: use native property to set styles
xavier2k6 · Aug 12, 2024 · d9667b5 · d9667b5
2 parents 155fe96 + 3e18b1d
commit d9667b5
Show file tree

Hide file tree

Showing 8 changed files with 50 additions and 80 deletions.
diff --git a/src/webui/www/private/css/style.css b/src/webui/www/private/css/style.css
@@ -682,15 +682,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/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
@@ -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`;
             }
         },
 
@@ -185,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);
@@ -686,10 +674,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 +686,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
@@ -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
@@ -125,16 +125,16 @@ 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) {
         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
@@ -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
@@ -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;
     }
 

diff --git 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 {