From 8d0c635d4652ef9ac4962f19b68d4f9c15060e9b Mon Sep 17 00:00:00 2001 From: Ray Lothian Date: Tue, 4 Aug 2020 07:52:40 +0200 Subject: [PATCH] ui --- extension/data/popup/index.css | 17 +++--- extension/data/popup/index.html | 10 ++-- extension/data/popup/index.js | 93 +++++++++++++++++++-------------- 3 files changed, 68 insertions(+), 52 deletions(-) diff --git a/extension/data/popup/index.css b/extension/data/popup/index.css index 8549949..1c4e87d 100644 --- a/extension/data/popup/index.css +++ b/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; diff --git a/extension/data/popup/index.html b/extension/data/popup/index.html index 0cfe9ab..1e04638 100644 --- a/extension/data/popup/index.html +++ b/extension/data/popup/index.html @@ -86,7 +86,7 @@ appVersion
- +
@@ -94,13 +94,13 @@ platform
- +
vendor
- +
@@ -108,13 +108,13 @@ product
- +
oscpu
- +
diff --git a/extension/data/popup/index.js b/extension/data/popup/index.js index 7b06318..33f5b42 100644 --- a/extension/data/popup/index.js +++ b/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); - return cache.match(link).then(resp => { - return resp || fetch(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,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(); - 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); - } +document.addEventListener('DOMContentLoaded', () => fetch('./map.json').then(r => r.json()).then(o => { + Object.assign(map, o); - document.querySelector('#browser optgroup:last-of-type').appendChild(f1); - document.querySelector('#os optgroup:last-of-type').appendChild(f2); + const f1 = document.createDocumentFragment(); + 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({ - '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']; + document.querySelector('#browser optgroup:last-of-type').appendChild(f1); + document.querySelector('#os optgroup:last-of-type').appendChild(f2); - 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; - update(ua); - document.getElementById('ua').value = ua; - document.getElementById('ua').dispatchEvent(new Event('input')); - }); - })); + 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 }));