From c9cd934f8a1e779f59888dbcf7d7154b6650a84b Mon Sep 17 00:00:00 2001
From: Jonas Jenwald <jonas.jenwald@gmail.com>
Date: Sun, 17 Sep 2023 08:06:33 +0200
Subject: [PATCH] Stop hard-coding the panel width in `web/debugger.js`

Thanks to CSS variables we can avoid hard-coding the panel width in the JavaScript code.
---
 web/debugger.css | 6 +++++-
 web/debugger.js  | 3 +--
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/web/debugger.css b/web/debugger.css
index 2f88c0c77..c66160dd7 100644
--- a/web/debugger.css
+++ b/web/debugger.css
@@ -13,6 +13,10 @@
  * limitations under the License.
  */
 
+:root {
+  --panel-width: 300px;
+}
+
 #PDFBug,
 #PDFBug :is(input, button, select) {
   font: message-box;
@@ -26,7 +30,7 @@
   bottom: 0;
   font-size: 10px;
   padding: 0;
-  width: 300px;
+  width: var(--panel-width);
 }
 #PDFBug .controls {
   background: rgba(238, 238, 238, 1);
diff --git a/web/debugger.js b/web/debugger.js
index 2a560db8c..8474673d6 100644
--- a/web/debugger.js
+++ b/web/debugger.js
@@ -492,7 +492,6 @@ const Stats = (function Stats() {
 
 // Manages all the debugging tools.
 const PDFBug = (function PDFBugClosure() {
-  const panelWidth = 300;
   const buttons = [];
   let activePanel = null;
 
@@ -541,7 +540,7 @@ const PDFBug = (function PDFBugClosure() {
       ui.append(panels);
 
       container.append(ui);
-      container.style.right = panelWidth + "px";
+      container.style.right = "var(--panel-width)";
 
       // Initialize all the debugging tools.
       for (const tool of this.tools) {