Made preset buttons automatically sized according to their (localized) content.

3 files changed, 54 insertions, 5 deletions

diff --git a/src/_locales/en/messages.json b/src/_locales/en/messages.json
index ef26193..c970d13 100644
--- a/src/_locales/en/messages.json
+++ b/src/_locales/en/messages.json
@@ -435,7 +435,7 @@
     "message": "U"
   },
   "Untrusted": {
-    "message": "Untrusted"
+    "message": "Untrusted superca"
   },
   "UntrustedPagesAdj": {
     "message": "untrusted"
diff --git a/src/ui/ui.css b/src/ui/ui.css
index 8f2b81f..901a4b1 100644
--- a/src/ui/ui.css
+++ b/src/ui/ui.css
@@ -197,7 +197,15 @@ input.preset:active, input.preset:focus, input.preset:hover {
   border-radius: .5em;
 }
 
-.presets input.preset:checked, #presets input.preset {
+#presets-sizer {
+  visibility: hidden;
+  width: 10px;
+  height: 1px;
+  overflow: hidden !important;
+  border: 1px solid red;
+}
+
+.presets input.preset:checked, #presets input.preset, #presets-sizer input.preset {
   opacity: 1;
   transform: none;
   min-width: 9.38em;
@@ -226,7 +234,6 @@ input.preset:active, input.preset:focus, input.preset:hover {
   left: 0em;
   padding-left: 2.5em;
 
-  transition: 0.2s all;
 }
 
 .presets input.preset[value^="T"] + label {
@@ -235,10 +242,17 @@ input.preset:active, input.preset:focus, input.preset:hover {
 
 .presets input.preset:checked + label, #presets .presets label {
   opacity: 1;
-  width: 60%;
+  width: 80%;
   display: inline-block;
 }
 
+#presets-sizer .presets label {
+   position: static;
+   display: block;
+   width: auto;
+   overflow: visible;
+}
+
 button.options {
   -moz-appearance: none;
   border: none;
diff --git a/src/ui/ui.js b/src/ui/ui.js
index 99943d7..927a712 100644
--- a/src/ui/ui.js
+++ b/src/ui/ui.js
@@ -187,7 +187,7 @@ var UI = (() => {
 
     initRow(table = this.table) {
       let row = table.querySelector("tr.site");
-
+      debug("initRow: ", new Error().stack);
       // PRESETS
       {
         let presets = row.querySelector(".presets");
@@ -212,7 +212,42 @@ var UI = (() => {
             clone.querySelector(".options").remove();
           }
           presets.appendChild(clone);
+
         }
+
+
+        if (!document.getElementById("presets-sizer")) {
+          // adapt button to label if needed
+          let sizer = table.cloneNode(true);
+          sizer.id = "presets-sizer";
+          document.body.appendChild(sizer);
+          let presetWidth = sizer.querySelector("input.preset").offsetWidth;
+          let labelWidth = 0;
+          for (let l of sizer.querySelectorAll("label.preset")) {
+            let lw = l.offsetWidth;
+            debug("lw", lw);
+            if (lw > labelWidth) labelWidth = lw;
+          }
+
+          debug(`Preset: %s Label: %s`, presetWidth, labelWidth);
+          labelWidth += 16;
+          if (presetWidth < labelWidth) {
+            for (let ss of document.styleSheets) {
+              if (ss.href.endsWith("/ui.css")) {
+                for (let r of ss.cssRules) {
+                  if (/input\.preset:checked.*min-width:/.test(r.cssText)) {
+                    r.style.minWidth = (labelWidth) + "px";
+                    break;
+                  }
+                }
+              }
+            }
+          }
+
+          sizer.style.visibility = "visible";
+          // setTimeout( () => sizer.style.display = "none");
+        }
+
       }
 
       // URL