popup width is now adjustable

_locales/en/messages.json

@@ -464,6 +464,9 @@
   "optionsBadgeDisabled": {
     "message": "Badge background color (when disabled)"
   },
+  "optionsPopupWidth": {
+    "message": "Popup width (in pixels)"
+  },
   "optionsUpdateInterval": {
     "message": "Automatically check for and install all available userstyle updates (in hrs)"
   },

options/index.html

@@ -18,6 +18,10 @@
         <td i18n-text="optionsBadgeDisabled"></td>
         <td><input type="color" id="badgeDisabled"></td>
       </tr>
+      <tr>
+        <td i18n-text="optionsPopupWidth"></td>
+        <td><input type="number" id="popupWidth" min="200"></td>
+      </tr>
       <tr>
         <td i18n-text="optionsUpdateInterval"><sup>1</sup></td>
         <td><input type="number" min="0" id="updateInterval"></td>

options/index.js

@@ -4,6 +4,7 @@ function restore () {
   chrome.runtime.getBackgroundPage(bg => {
     document.getElementById('badgeDisabled').value = bg.prefs.get('badgeDisabled');
     document.getElementById('badgeNormal').value = bg.prefs.get('badgeNormal');
+    document.getElementById('popupWidth').value = bg.prefs.get('popupWidth');
     document.getElementById('updateInterval').value = bg.prefs.get('updateInterval');
   });
 }
@@ -12,6 +13,7 @@ function save () {
   chrome.runtime.getBackgroundPage(bg => {
     bg.prefs.set('badgeDisabled', document.getElementById('badgeDisabled').value);
     bg.prefs.set('badgeNormal', document.getElementById('badgeNormal').value);
+    bg.prefs.set('popupWidth', +document.getElementById('popupWidth').value);
     bg.prefs.set(
       'updateInterval',
       Math.max(0, +document.getElementById('updateInterval').value)

popup.css

@@ -81,7 +81,9 @@ body > .actions {
 
 #unavailable {
   border: none;
-  display: none;
+  display: none; /* flex */
+  align-items: center;
+  justify-content: center;
   font-size: 14px;
   text-indent: 6px;
 }

popup.js

@@ -13,7 +13,7 @@ function updatePopUp(url) {
 	var urlWillWork = /^(file|http|https|ftps?|chrome\-extension):/.exec(url);
 	if (!urlWillWork) {
 		document.body.classList.add("blocked");
-		document.getElementById("unavailable").style.display = "block";
+		document.getElementById("unavailable").style.display = "flex";
 		return;
 	}
 
@@ -227,3 +227,6 @@ document.querySelector('#popup-shortcuts-button').addEventListener("click", func
         'url': 'chrome://extensions/configureCommands'
     });
 });
+
+// popup width
+document.body.style.width = prefs.get('popupWidth') + 'px';

storage.js

@@ -352,6 +352,8 @@ var prefs = chrome.extension.getBackgroundPage().prefs || new function Prefs() {
 		"badgeDisabled": "#8B0000",     // badge background color when disabled
 		"badgeNormal": "#006666",       // badge background color
 
+		"popupWidth": 240,              // popup width in pixels
+
 		"updateInterval": 0             // user-style automatic update interval, hour
 	};
 	var values = deepCopy(defaults);