summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--src/_locales/en/messages.json2
-rw-r--r--src/ui/ui.css20
-rw-r--r--src/ui/ui.js37
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