From 1cdffea6186af8965d722575ed8fa74b0a6e193c Mon Sep 17 00:00:00 2001
From: Raymond Hill <rhill@raymondhill.net>
Date: Mon, 21 Sep 2020 07:18:11 -0400
Subject: [PATCH] Allow customization of some popup panel CSS properties

Related issue:
- https://github.com/uBlockOrigin/uBlock-issues/issues/1254

The advanced setting `uiStyles`[1] can be used to control
the minimum width of both the main and firewall panes
in the popup panel:

- `--popup-main-min-width`, default to `18em`
- `--popup-firewall-min-width`, default to `30em`

* * *

[1] https://github.com/gorhill/uBlock/wiki/Advanced-settings#uistyles
---
 src/css/popup-fenix.css | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/src/css/popup-fenix.css b/src/css/popup-fenix.css
index 9ebc0bda6..cd0762f59 100644
--- a/src/css/popup-fenix.css
+++ b/src/css/popup-fenix.css
@@ -13,7 +13,10 @@
     --font-size: 14px;
     --popup-gap: var(--font-size);
     --popup-gap-thin: calc(0.5 * var(--popup-gap));
-    --popup-gap-extra-thin: calc(0.25 * var(--font-size));
+    --popup-gap-extra-thin: calc(0.25 * var(--popup-gap));
+    --popup-main-min-width: 18em;
+    --popup-firewall-min-width: 30em;
+    --popup-rule-cell-width: 5em;
     font-size: var(--font-size);
     line-height: 20px;
     }
@@ -38,7 +41,7 @@ a {
 #main {
     align-self: flex-start;
     max-width: 340px;
-    min-width: 18em;
+    min-width: var(--popup-main-min-width);
     }
 :root.portrait #main {
     align-self: inherit;
@@ -258,11 +261,10 @@ body[data-more=""] #lessButton {
     margin: 0;
     max-height: 600px;
     max-width: 460px;
-    min-width: 30em;
+    min-width: var(--popup-firewall-min-width);
     padding: 0;
     overflow-y: auto;
     text-align: right;
-    --rule-cell-width: 5em;
     }
 :root.desktop body.vMin #firewall {
     max-height: 100vh;
@@ -306,7 +308,7 @@ body[data-more=""] #lessButton {
     justify-content: flex-end;
     padding-right: 2px;
     white-space: normal;
-    width: calc(100% - var(--rule-cell-width));
+    width: calc(100% - var(--popup-rule-cell-width));
     word-break: break-word;
     }
 #firewall > div.isCname > span:first-of-type {
@@ -324,7 +326,7 @@ body[data-more=""] #lessButton {
 #firewall > div > span:first-of-type ~ span {
     flex-shrink: 0;
     margin-left: 1px;
-    width: var(--rule-cell-width);
+    width: var(--popup-rule-cell-width);
     }
 #firewall > div > span:nth-of-type(2) {
     display: none;
@@ -398,7 +400,7 @@ body[data-more=""] #lessButton {
     }
 
 body.advancedUser #firewall > div > span:first-of-type {
-    width: calc(100% - 2 * var(--rule-cell-width));
+    width: calc(100% - 2 * var(--popup-rule-cell-width));
     }
 body.advancedUser #firewall > div > span:nth-of-type(2) {
     display: inline-flex;