From 9502e64f5fc08c8575753b4ecce9461e1ba61c77 Mon Sep 17 00:00:00 2001 From: Ray Lothian Date: Sun, 15 Mar 2020 10:44:52 +0100 Subject: [PATCH] mobile-friendly options page --- extension/common.js | 2 +- extension/data/options/index.css | 105 ++++++++++++++++++++++++ extension/data/options/index.html | 131 +++++++++++++----------------- extension/data/options/index.js | 17 ++++ 4 files changed, 180 insertions(+), 75 deletions(-) create mode 100644 extension/data/options/index.css diff --git a/extension/common.js b/extension/common.js index 343ccf5..4bae2b9 100644 --- a/extension/common.js +++ b/extension/common.js @@ -78,7 +78,7 @@ chrome.storage.onChanged.addListener(ps => { if (ps.ua || ps.mode) { ua.update(); } - else if (ps.custom) { + if (ps.custom) { expand(); } }); diff --git a/extension/data/options/index.css b/extension/data/options/index.css new file mode 100644 index 0000000..3b64d24 --- /dev/null +++ b/extension/data/options/index.css @@ -0,0 +1,105 @@ +body { + min-width: 600px; +} +@media (pointer: none), (pointer: coarse) { + body { + min-width: unset; + } +} + +@supports (-moz-appearance:none) { + body { + font-size: 13px; + font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; + margin: 10px; + min-width: unset; + } + textarea { + padding: 5px; + border: solid 1px #ccc; + } + button, + input[type=submit], + input[type=button] { + height: 24px; + color: rgb(68, 68, 68); + background-image: linear-gradient(rgb(237, 237, 237), rgb(237, 237, 237) 38%, rgb(222, 222, 222)); + box-shadow: rgba(0, 0, 0, 0.08) 0 1px 0, rgba(255, 255, 255, 0.75) 0 1px 2px inset; + text-shadow: rgb(240, 240, 240) 0 1px 0; + border: solid 1px rgba(0, 0, 0, 0.25); + } + input[type=button]:disabled { + opacity: 0.5; + } +} +h1 { + font-size: 15px; + font-weight: normal; +} +textarea { + width: 100%; +} +.mode-2, +.mode { + display: grid; + white-space: nowrap; + align-items: center; + grid-gap: 5px; +} +.mode { + grid-template-columns: min-content min-content min-content; +} +.mode-2 { + grid-template-columns: min-content min-content; +} +#toggle-parser-desc, +#toggle-protected-desc, +#toggle-custom-desc, +#toggle-whitelist-desc, +#toggle-blacklist-desc { + cursor: pointer; + color: #2f2f2f; + background-color: #e8e8e8; + padding: 1px 4px; +} +.note { + background: #e8e8e8; + color: #2f2f2f; + padding: 5px; + margin: 0 0 10px 0; +} +.hidden { + display: none; +} +.checked { + display: grid; + grid-template-columns: min-content 1fr; + grid-gap: 5px; + margin: 10px 0; +} + +#tools, +#backup { + display: grid; + white-space: nowrap; + grid-gap: 5px; +} +#backup { + margin: 10px 0; + grid-template-columns: min-content min-content; +} +#tools { + grid-template-columns: repeat(4, min-content) 1fr; + align-items: center; +} +@media screen and (max-width: 600px) { + body { + min-width: unset; + } + #backup { + grid-template-columns: 1fr 1fr; + } + #tools { + grid-template-columns: 1fr 1fr; + } +} diff --git a/extension/data/options/index.html b/extension/data/options/index.html index 5920b03..7940724 100644 --- a/extension/data/options/index.html +++ b/extension/data/options/index.html @@ -1,89 +1,72 @@ - My Test Extension Options - + User-Agent Switcher and Manager :: Options + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- -
- -
- Press here to insert a sample JSON object. -
Disable Spoofing A comma-separated list of keywords that the extension should not spoof the user-agent header. Use this list to protect URLs that contain these protected keywords. Each keyword need to be at least 5 char long.
- Custom User-Agent Parsing: A JSON object to bypass the internal user-agent string parsing method. The keys are the actual user-agent strings and the value of each key is an object of the keys that need to be set for the "navigator" object. You can use the "[delete]" keyword if you want a key in the "navigator" object to get deleted. Press here to insert a sample JSON object. -
+
+ + + Description +
+ + -

+

+ + + Description +
+ + + +
+ + + Description +
+ + + +
+ + + + + + + + +
+ +
+

Disable Spoofing

+ Description +
+ + + +
+

Custom User-Agent Parsing

+ Description +
+ + + +
-

-

+

+
- - + + -

+
diff --git a/extension/data/options/index.js b/extension/data/options/index.js index 6fb3020..9775111 100644 --- a/extension/data/options/index.js +++ b/extension/data/options/index.js @@ -188,3 +188,20 @@ document.getElementById('import').addEventListener('click', () => { } } }); + +/* toggle */ +document.getElementById('toggle-blacklist-desc').addEventListener('click', () => { + document.querySelector('[for="toggle-blacklist-desc"]').classList.toggle('hidden'); +}); +document.getElementById('toggle-whitelist-desc').addEventListener('click', () => { + document.querySelector('[for="toggle-whitelist-desc"]').classList.toggle('hidden'); +}); +document.getElementById('toggle-custom-desc').addEventListener('click', () => { + document.querySelector('[for="toggle-custom-desc"]').classList.toggle('hidden'); +}); +document.getElementById('toggle-protected-desc').addEventListener('click', () => { + document.querySelector('[for="toggle-protected-desc"]').classList.toggle('hidden'); +}); +document.getElementById('toggle-parser-desc').addEventListener('click', () => { + document.querySelector('[for="toggle-parser-desc"]').classList.toggle('hidden'); +});