version 0.3.5

extension/data/options/index.css

@@ -93,9 +93,6 @@ textarea {
   align-items: center;
 }
 @media screen and (max-width: 600px) {
-  body {
-    min-width: unset;
-  }
   #backup {
     grid-template-columns: 1fr 1fr;
   }

extension/data/popup/index.css

@@ -24,11 +24,16 @@
 
 body {
   background-color: #fff;
-  font-family: "Helvetica Neue", Helvetica, sans-serif;
+  font-family: "Helvetica Neue", Helvetica, arial, sans-serif;
   font-size: 13px;
-  min-width: 650px;
+  width: 600px;
   margin: 0;
 }
+@media (pointer: none), (pointer: coarse) {
+  body {
+    width: unset;
+  }
+}
 table {
   width: 100%;
   border-collapse: collapse;
@@ -88,7 +93,6 @@ select {
 }
 #list {
   overflow: auto;
-  scroll-behavior: smooth;
   height: 268px;
   margin-bottom: 16px;
   color: #000;
@@ -128,11 +132,17 @@ select {
   background-color: #f5f5f5;
 }
 #list[data-loading=false] tbody:empty::before {
-  content: 'no user-agent string for this query!';
+  content: 'No matching user-agent string for this query';
-  display: block;
   position: absolute;
-  top: 50px;
+  left: 0;
-  left: 10px;
+  top: 0;
+  width: 100%;
+  height: 268px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: initial;
+  pointer-events: none;
 }
 #list td:nth-child(1) {
   text-align: center;
@@ -166,9 +176,9 @@ select {
 
 #agent {
   white-space: nowrap;
-}
+  display: grid;
-#agent input:not(:last-child) {
+  grid-template-columns: repeat(7, 1fr);
-  margin-right: 1px;
+  grid-gap: 1px;
 }
 
 #info {

extension/data/popup/index.html

@@ -40,8 +40,8 @@
           <th>
             <input type="search" id="custom" placeholder="Filter items">&nbsp;
             <select id="sort">
-              <option value="true">descending</option>
+              <option value="descending">Z to A</option>
-              <option value="false">ascending</option>
+              <option value="ascending">A to Z</option>
             </select>
           </th>
         </tr>
@@ -122,13 +122,13 @@
     </div>
     <div id="explore" data-cols=4></div>
     <div hbox id="agent" align="center">
-      <input flex="1" type="button" value="Options" title="Open options page" style="margin-left: 2px;" data-cmd="options">
+      <input type="button" value="Options" title="Open options page" style="margin-left: 2px;" data-cmd="options">
-      <input flex="1" type="button" value="Restart" title="Click to reload the extension. This will cause all the window-based user-agent strings to be cleared" data-cmd="reload">
+      <input type="button" value="Restart" title="Click to reload the extension. This will cause all the window-based user-agent strings to be cleared" data-cmd="reload">
-      <input flex="1" type="button" value="Refresh Tab" title="Refresh the current page" data-cmd="refresh">
+      <input type="button" value="Refresh Tab" title="Refresh the current page" data-cmd="refresh">
-      <input flex="1" type="button" value="Reset" title="Reset User-Agent string to the default one. This will not reset window-based UA strings. To reset them, use the 'Restart' button" data-cmd="reset">
+      <input type="button" value="Reset" title="Reset User-Agent string to the default one. This will not reset window-based UA strings. To reset them, use the 'Restart' button" data-cmd="reset">
-      <input flex="1" type="button" value="Test" title="Test your user-agent string" data-cmd="test">
+      <input type="button" value="Test" title="Test your user-agent string" data-cmd="test">
-      <input flex="1" type="button" value="Window" title="Set this string as this window's User-Agent string" data-cmd="window">
+      <input type="button" value="Window" title="Set this string as this window's User-Agent string" data-cmd="window">
-      <input flex="1" type="button" value="Apply" title="Set this string as the browser's User-Agent string" data-cmd="apply">
+      <input type="button" value="Apply" title="Set this string as the browser's User-Agent string" data-cmd="apply">
     </div>
     <script src="index.js"></script>
     <script async src="matched.js"></script>

extension/data/popup/index.js

@@ -27,7 +27,7 @@ function sort(arr) {
     return 0;
   }
   const list = arr.sort((a, b) => sort(a.browser.version, b.browser.version));
-  if (document.getElementById('sort').value === 'true') {
+  if (document.getElementById('sort').value === 'descending') {
     return list.reverse();
   }
   return list;
@@ -73,7 +73,7 @@ function update(ua) {
       }
       document.getElementById('custom').placeholder = `Filter among ${list.length}`;
       [...document.getElementById('os').querySelectorAll('option')].forEach(option => {
-        option.disabled = map.matching[browser.toLowerCase()].indexOf(option.value.toLowerCase()) === -1;
+        option.disabled = (map.matching[browser.toLowerCase()] || []).indexOf(option.value.toLowerCase()) === -1;
       });
     }
     else {
@@ -84,9 +84,18 @@ function update(ua) {
   });
 }
 
+document.getElementById('browser').addEventListener('change', e => chrome.storage.local.set({
+  'popup-browser': e.target.value
+}));
+document.getElementById('os').addEventListener('change', e => chrome.storage.local.set({
+  'popup-os': e.target.value
+}));
+document.getElementById('sort').addEventListener('change', e => chrome.storage.local.set({
+  'popup-sort': e.target.value
+}));
+
 document.addEventListener('change', ({target}) => {
   if (target.closest('#filter')) {
-    localStorage.setItem(target.id, target.value);
     chrome.storage.local.get({
       ua: ''
     }, prefs => update(prefs.ua || navigator.userAgent));
@@ -114,14 +123,20 @@ document.addEventListener('DOMContentLoaded', () => fetch('./map.json').then(r =
     }
 
     document.querySelector('#browser optgroup:last-of-type').appendChild(f1);
-    document.getElementById('browser').value = localStorage.getItem('browser') || 'Chrome';
-
     document.querySelector('#os optgroup:last-of-type').appendChild(f2);
-    document.getElementById('os').value = localStorage.getItem('os') || 'Windows';
 
     chrome.storage.local.get({
-      ua: ''
+      'ua': '',
+      'popup-browser': 'Chrome',
+      'popup-os': 'Windows',
+      'popup-sort': 'descending'
     }, prefs => {
+      document.getElementById('browser').value = prefs['popup-browser'];
+      document.getElementById('os').value = prefs['popup-os'];
+      document.getElementById('sort').value = prefs['popup-sort'];
+
+      console.log(prefs);
+
       const ua = prefs.ua || navigator.userAgent;
       update(ua);
       document.getElementById('ua').value = ua;

extension/manifest.json

@@ -2,7 +2,7 @@
   "manifest_version": 2,
   "name": "User-Agent Switcher and Manager",
   "short_name": "useragent-switcher",
-  "version": "0.3.4",
+  "version": "0.3.5",
 
   "description": "Spoof websites trying to gather information about your web navigation to deliver distinct content you may not want",