From 58852b579a26e973290c4cbb844fca93685a5094 Mon Sep 17 00:00:00 2001
From: skomerko <168652295+skomerko@users.noreply.github.com>
Date: Fri, 9 May 2025 09:51:37 +0200
Subject: [PATCH] apply review comments

---
 src/webui/www/private/scripts/piecesbar.js | 28 ++++------------------
 1 file changed, 5 insertions(+), 23 deletions(-)

diff --git a/src/webui/www/private/scripts/piecesbar.js b/src/webui/www/private/scripts/piecesbar.js
index 8fd816b43..2ddf363df 100644
--- a/src/webui/www/private/scripts/piecesbar.js
+++ b/src/webui/www/private/scripts/piecesbar.js
@@ -52,7 +52,7 @@ window.qBittorrent.PiecesBar ??= (() => {
         #id = ++PiecesBar.#piecesBarUniqueId;
         #resizeObserver;
 
-        constructor(pieces, options = {}) {
+        constructor(pieces, styles = {}) {
             super();
             this.setPieces(pieces);
             this.#vals = {
@@ -61,30 +61,17 @@ window.qBittorrent.PiecesBar ??= (() => {
                 haveColor: "hsl(210deg 55% 55%)", // @TODO palette vars not supported for this value, apply average
                 borderSize: 1,
                 borderColor: "var(--color-border-default)",
-                ...options
+                ...styles
             };
 
-            const style = document.createElement("style");
-            style.textContent = `
-                :host {
-                    display: block;
-                    border: ${this.#vals.borderSize}px solid ${this.#vals.borderColor};
-                    height: ${this.#vals.height}px;
-                }
-
-                canvas {
-                    height: 100%;
-                    image-rendering: pixelated;
-                    width: 100%;
-                }
-            `;
-
             this.#canvasEl = document.createElement("canvas");
+            this.#canvasEl.style.cssText = `height: 100%; image-rendering: pixelated; width: 100%;`;
             this.#ctx = this.#canvasEl.getContext("2d");
 
             this.attachShadow({ mode: "open" });
             this.shadowRoot.host.id = `piecesbar_${this.#id}`;
-            this.shadowRoot.append(style, this.#canvasEl);
+            this.shadowRoot.host.style.cssText = `display: block; height: ${this.#vals.height}px; border: ${this.#vals.borderSize}px solid ${this.#vals.borderColor};`;
+            this.shadowRoot.append(this.#canvasEl);
 
             this.#resizeObserver = new ResizeObserver(window.qBittorrent.Misc.createDebounceHandler(100, () => {
                 this.#refresh();
@@ -96,10 +83,6 @@ window.qBittorrent.PiecesBar ??= (() => {
             this.#refresh();
         }
 
-        disconnectedCallback() {
-            this.#resizeObserver.disconnect();
-        }
-
         clear() {
             this.setPieces([]);
         }
@@ -120,7 +103,6 @@ window.qBittorrent.PiecesBar ??= (() => {
 
             // change canvas size to fit exactly in the space
             this.#canvasEl.width = width - (2 * this.#vals.borderSize);
-            this.#canvasEl.height = this.clientHeight;
 
             this.#ctx.clearRect(0, 0, this.#canvasEl.width, this.#canvasEl.height);