ui

extension/data/popup/index.css

@@ -23,6 +23,7 @@
 }
 
 body {
+  color: #000;
   background-color: #fff;
   font-family: "Helvetica Neue", Helvetica, arial, sans-serif;
   font-size: 13px;
@@ -38,9 +39,6 @@ table {
   width: 100%;
   border-collapse: collapse;
 }
-fieldset {
-  border: solid 1px #ccc;
-}
 input[type=search],
 input[type=text] {
   box-sizing: border-box;
@@ -52,15 +50,16 @@ input[type=text] {
   width: 100%;
 }
 input[type=text]:read-only {
+  color: #636363;
   background-color: transparent;
 }
 input {
   outline: none;
   background-color: #fff;
   color: #000;
-  border: solid 1px #e7e7e7;
+  border: none;
   box-sizing: border-box;
-  height: 24px;
+  height: 28px;
   border-radius: 0;
   font-size: 11px;
 }
@@ -88,8 +87,8 @@ select {
   background-size: 8px;
   font-size: 13px;
   border-radius: 0;
-  padding: 2px 16px 2px 4px;
+  padding: 6px 16px 6px 4px;
-  border: solid 1px #e7e7e7;
+  border: none;
 }
 #list {
   overflow: auto;
@@ -210,7 +209,7 @@ select {
 }
 
 #explore:not([data-loaded="true"]) {
-  height: 16px;
+  height: 18px;
 }
 
 body[data-android="true"] [data-cmd="reload"],
@@ -232,7 +231,7 @@ body[data-android="true"] [data-cmd="window"] {
 
 #toast {
   position: fixed;
-  bottom: 50px;
+  bottom: 95px;
   right: 10px;
   background-color: #e68509;
   color: #fff;

extension/data/popup/index.html

@@ -86,7 +86,7 @@
           <td>appVersion</td>
           <td colspan="3">
             <div hbox>
-              <input readonly id="appVersion" type="text" title="This is a readonly field. Use options page for custom parsing.">
+              <input readonly value="-" id="appVersion" type="text" title="This is a readonly field. Use options page for custom parsing.">
             </div>
           </td>
         </tr>
@@ -94,13 +94,13 @@
           <td>platform</td>
           <td>
             <div hbox>
-              <input readonly id="platform" type="text" title="This is a readonly field. Use options page for custom parsing.">
+              <input readonly value="-" id="platform" type="text" title="This is a readonly field. Use options page for custom parsing.">
             </div>
           </td>
           <td>vendor</td>
           <td>
             <div hbox>
-              <input readonly id="vendor" type="text" title="This is a readonly field. Use options page for custom parsing.">
+              <input readonly value="-" id="vendor" type="text" title="This is a readonly field. Use options page for custom parsing.">
             </div>
           </td>
         </tr>
@@ -108,13 +108,13 @@
           <td>product</td>
           <td>
             <div hbox>
-              <input readonly id="product" type="text" title="This is a readonly field. Use options page for custom parsing.">
+              <input readonly value="-" id="product" type="text" title="This is a readonly field. Use options page for custom parsing.">
             </div>
           </td>
           <td>oscpu</td>
           <td>
             <div hbox>
-              <input readonly id="oscpu" type="text" title="This is a readonly field. Use options page for custom parsing.">
+              <input readonly value="-" id="oscpu" type="text" title="This is a readonly field. Use options page for custom parsing.">
             </div>
           </td>
         </tr>

extension/data/popup/index.js

@@ -34,12 +34,31 @@ function sort(arr) {
 }
 
 function get(path) {
-  return caches.open('agents').then(cache => {
+  return (typeof caches !== 'undefined' ? caches : {
+    open() {
+      return Promise.resolve({
+        match() {
+          return Promise.resolve();
+        },
+        add() {
+          return Promise.resolve();
+        }
+      });
+    }
+  }).open('agents').then(cache => {
     const link = 'https://cdn.jsdelivr.net/gh/ray-lothian/UserAgent-Switcher/node/' + path;
-    cache.add(link);
+    // updating agents once per 7 days
-    return cache.match(link).then(resp => {
+    chrome.storage.local.get({
-      return resp || fetch(path);
+      ['cache.' + path]: 0
+    }, prefs => {
+      const now = Date.now();
+      if (now - prefs['cache.' + path] > 7 * 24 * 60 * 60 * 1000) {
+        cache.add(link).then(() => chrome.storage.local.set({
+          ['cache.' + path]: now
+        }));
+      }
     });
+    return cache.match(link).then(resp => resp || fetch(path));
   });
 }
 
@@ -116,44 +135,42 @@ document.addEventListener('change', ({target}) => {
     document.getElementById('ua').dispatchEvent(new Event('input'));
   }
 });
-document.addEventListener('DOMContentLoaded', () => fetch('./map.json').then(r => r.json())
-  .then(o => {
-    Object.assign(map, o);
 
-    const f1 = document.createDocumentFragment();
+document.addEventListener('DOMContentLoaded', () => fetch('./map.json').then(r => r.json()).then(o => {
-    for (const browser of map.browser) {
+  Object.assign(map, o);
-      const option = document.createElement('option');
-      option.value = option.textContent = browser;
-      f1.appendChild(option);
-    }
-    const f2 = document.createDocumentFragment();
-    for (const os of map.os) {
-      const option = document.createElement('option');
-      option.value = option.textContent = os;
-      f2.appendChild(option);
-    }
 
-    document.querySelector('#browser optgroup:last-of-type').appendChild(f1);
+  const f1 = document.createDocumentFragment();
-    document.querySelector('#os optgroup:last-of-type').appendChild(f2);
+  for (const browser of map.browser) {
+    const option = document.createElement('option');
+    option.value = option.textContent = browser;
+    f1.appendChild(option);
+  }
+  const f2 = document.createDocumentFragment();
+  for (const os of map.os) {
+    const option = document.createElement('option');
+    option.value = option.textContent = os;
+    f2.appendChild(option);
+  }
 
-    chrome.storage.local.get({
+  document.querySelector('#browser optgroup:last-of-type').appendChild(f1);
-      'ua': '',
+  document.querySelector('#os optgroup:last-of-type').appendChild(f2);
-      '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);
+  chrome.storage.local.get({
+    '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'];
 
-      const ua = prefs.ua || navigator.userAgent;
+    const ua = prefs.ua || navigator.userAgent;
-      update(ua);
+    update(ua);
-      document.getElementById('ua').value = ua;
+    document.getElementById('ua').value = ua;
-      document.getElementById('ua').dispatchEvent(new Event('input'));
+    document.getElementById('ua').dispatchEvent(new Event('input'));
-    });
+  });
-  }));
+}));
 
 document.getElementById('list').addEventListener('click', ({target}) => {
   const tr = target.closest('tbody tr');
@@ -236,7 +253,7 @@ document.addEventListener('click', ({target}) => {
     }
     else if (cmd === 'test') {
       chrome.storage.local.get({
-        'test': 'https://webbrowsertools.com/useragent/?method=normal&verbose=false&r=' + Math.random()
+        'test': 'https://webbrowsertools.com/useragent/?method=normal&verbose=false'
       }, prefs => chrome.tabs.create({
         url: prefs.test
       }));