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;
-  border: solid 1px #e7e7e7;
+  padding: 6px 16px 6px 4px;
+  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 => {
-    const link = 'https://cdn.jsdelivr.net/gh/ray-lothian/UserAgent-Switcher/node/' + path;
-    cache.add(link);
-    return cache.match(link).then(resp => {
-      return resp || fetch(path);
+  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;
+    // updating agents once per 7 days
+    chrome.storage.local.get({
+      ['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,8 +135,8 @@ document.addEventListener('change', ({target}) => {
     document.getElementById('ua').dispatchEvent(new Event('input'));
   }
 });
-document.addEventListener('DOMContentLoaded', () => fetch('./map.json').then(r => r.json())
-  .then(o => {
+
+document.addEventListener('DOMContentLoaded', () => fetch('./map.json').then(r => r.json()).then(o => {
   Object.assign(map, o);
 
   const f1 = document.createDocumentFragment();
@@ -146,14 +165,12 @@ document.addEventListener('DOMContentLoaded', () => fetch('./map.json').then(r =
     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;
     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
       }));