diff --git a/core/main.js b/core/main.js
index 0c7ead82399ec3491e0943bd01acc1414a06b874..de7a7b6107afad7fcf06d58826fb096868a33a16 100644
--- a/core/main.js
+++ b/core/main.js
@@ -19,10 +19,43 @@
var main = {};
+/**
+ * Private Methods
+ */
+
+main._initializeOptions = function () {
+
+ let optionDefaults = {
+ 'showIconBadge': true,
+ 'blockMissing': false,
+ 'disablePrefetch': true,
+ 'stripMetadata': true,
+ 'whitelistedDomains': {}
+ };
+
+ chrome.storage.local.get(optionDefaults, function (options) {
+
+ if (options === null) {
+ options = optionDefaults;
+ }
+
+ if (options.disablePrefetch !== false) {
+
+ chrome.privacy.network.networkPredictionEnabled.set({
+ 'value': false
+ });
+ }
+
+ chrome.storage.local.set(options);
+ });
+};
+
/**
* Initializations
*/
+main._initializeOptions();
+
chrome.runtime.getPlatformInfo(function (information) {
main.operatingSystem = information.os;
});
@@ -41,8 +74,6 @@ if (typeof chrome.browserAction.setBadgeBackgroundColor !== 'function') {
});
}
-chrome.privacy.network.networkPredictionEnabled.set({'value': false});
-
chrome.browserAction.setBadgeBackgroundColor({
'color': [74, 130, 108, 255]
});
diff --git a/pages/options/options.css b/pages/options/options.css
index d089cfb6c17958d47c51f88638777ee6928da611..f362a0c3bb396843bf5177e0741a04095da74bd6 100644
--- a/pages/options/options.css
+++ b/pages/options/options.css
@@ -4,8 +4,14 @@
body {
color: #555;
+ cursor: default;
font-family: 'Noto Sans', Arial, sans-serif !important;
font-size: 12px;
+ padding: 10px !important;
+}
+
+.option {
+ margin-bottom: 22px;
}
/**
@@ -13,27 +19,27 @@ body {
*/
@font-face {
- font-family: 'Noto Sans';
- font-style: normal;
- font-weight: 400;
- src: url('../../modules/noto-sans/noto-sans.woff2')
- format('woff2');
+ font-family: 'Noto Sans';
+ font-style: normal;
+ font-weight: 400;
+ src: url('../../modules/noto-sans/noto-sans.woff2')
+ format('woff2');
}
@font-face {
- font-family: 'Noto Sans';
- font-style: normal;
- font-weight: 600;
- src: url('../../modules/noto-sans/noto-sans-bold.woff2')
- format('woff2');
+ font-family: 'Noto Sans';
+ font-style: normal;
+ font-weight: 600;
+ src: url('../../modules/noto-sans/noto-sans-bold.woff2')
+ format('woff2');
}
@font-face {
- font-family: 'Noto Sans';
- font-style: italic;
- font-weight: 400;
- src: url('../../modules/noto-sans/noto-sans-italic.woff2')
- format('woff2');
+ font-family: 'Noto Sans';
+ font-style: italic;
+ font-weight: 400;
+ src: url('../../modules/noto-sans/noto-sans-italic.woff2')
+ format('woff2');
}
/**
@@ -52,6 +58,7 @@ body {
.input-checkbox {
margin: 0 4px 0 0;
+ outline: 0;
}
.input-text {
@@ -65,11 +72,10 @@ body {
.description-option {
color: #777;
font-style: italic;
- margin-bottom: 18px;
padding-left: 29px;
}
-.label {
+.badge {
border-radius: 3px;
color: #fff;
font-size: 8px;
@@ -78,6 +84,11 @@ body {
text-transform: uppercase;
}
-.label-warning {
+.badge-warning {
background-color: #ffa500;
}
+
+.label-checkbox {
+ align-items: center;
+ display: flex;
+}
diff --git a/pages/options/options.html b/pages/options/options.html
index 14b295251ac2411cb0b744f7f0a0abca91ab361e..f974728fe535c0df70810d161644f5e793d20bc7 100644
--- a/pages/options/options.html
+++ b/pages/options/options.html
@@ -17,25 +17,85 @@
<script src="options.js"></script>
- <section>
+ <section class="option">
- <label class="title-option">
+ <div class="title-option">
- <input class="input-checkbox" data-option="blockMissing" type="checkbox">
- <span data-i18n-content="blockMissingTitle"></span>
- <span class="label label-warning" data-i18n-content="advancedLabel"></span>
+ <label class="label-checkbox">
- </label>
+ <input class="input-checkbox" data-option="showIconBadge" type="checkbox" disabled>
+ <span data-i18n-content="showIconBadgeTitle"></span>
+
+ </label>
+
+ </div>
+
+ <div class="description-option" data-i18n-content="showIconBadgeDescription"></div>
+
+ </section>
+
+ <section class="option">
+
+ <div class="title-option">
+
+ <label class="label-checkbox">
+
+ <input class="input-checkbox" data-option="blockMissing" type="checkbox">
+ <span data-i18n-content="blockMissingTitle"></span>
+
+ </label>
+
+ <span class="badge badge-warning" data-i18n-content="advancedLabel"></span>
+
+ </div>
<div class="description-option" data-i18n-content="blockMissingDescription"></div>
</section>
- <section>
+ <section class="option">
+
+ <div class="title-option">
+
+ <label class="label-checkbox">
+
+ <input class="input-checkbox" data-option="disablePrefetch" type="checkbox">
+ <span data-i18n-content="disablePrefetchTitle"></span>
+
+ </label>
+
+ <span class="badge badge-warning" data-i18n-content="advancedLabel"></span>
+
+ </div>
+
+ <div class="description-option" data-i18n-content="disablePrefetchDescription"></div>
+
+ </section>
+
+ <section class="option">
+
+ <div class="title-option">
+
+ <label class="label-checkbox">
+
+ <input class="input-checkbox" data-option="stripMetadata" type="checkbox" disabled>
+ <span data-i18n-content="stripMetadataTitle"></span>
+
+ </label>
+
+ <span class="badge badge-warning" data-i18n-content="advancedLabel"></span>
+
+ </div>
+
+ <div class="description-option" data-i18n-content="stripMetadataDescription"></div>
+
+ </section>
+
+ <section class="option">
- <div class="title-option" data-i18n-content="domainWhitelistTitle"></div>
- <input class="input-text" data-option="domainWhitelist" type="text">
- <div class="description-option" data-i18n-content="domainWhitelistDescription"></div>
+ <div class="title-option" data-i18n-content="whitelistedDomainsTitle"></div>
+ <input class="input-text" data-option="whitelistedDomains" type="text">
+ <div class="description-option" data-i18n-content="whitelistedDomainsDescription"></div>
</section>
diff --git a/pages/options/options.js b/pages/options/options.js
index 22c35323e244329e580e2496158d58bf64e86fa4..6d6773b276ce2bdc3d5b9147f48a16018cde00e4 100644
--- a/pages/options/options.js
+++ b/pages/options/options.js
@@ -13,6 +13,12 @@
'use strict';
+/**
+ * Options
+ */
+
+var options = {};
+
/**
* Constants
*/
@@ -21,13 +27,21 @@ const WEB_PREFIX_VALUE = 'www.';
const WEB_PREFIX_LENGTH = WEB_PREFIX_VALUE.length;
const VALUE_SEPARATOR = ';';
+/**
+ * Private Methods
+ */
+
+options._getOptionElement = function (optionKey) {
+ return document.querySelector('[data-option=' + optionKey + ']');
+};
+
/**
* Initializations
*/
document.addEventListener('DOMContentLoaded', function () {
- let i18nElements, blockMissingElement, domainWhitelistElement;
+ let i18nElements, optionElements;
i18nElements = document.querySelectorAll('[data-i18n-content]');
@@ -37,41 +51,86 @@ document.addEventListener('DOMContentLoaded', function () {
i18nElement.innerText = chrome.i18n.getMessage(i18nMessageName);
});
- blockMissingElement = document.querySelector('[data-option=blockMissing]');
- domainWhitelistElement = document.querySelector('[data-option=domainWhitelist]');
+ optionElements = {
+ 'showIconBadge': options._getOptionElement('showIconBadge'),
+ 'blockMissing': options._getOptionElement('blockMissing'),
+ 'disablePrefetch': options._getOptionElement('disablePrefetch'),
+ 'stripMetadata': options._getOptionElement('stripMetadata'),
+ 'whitelistedDomains': options._getOptionElement('whitelistedDomains')
+ };
+
+ chrome.storage.local.get(Object.keys(optionElements), function (items) {
- chrome.storage.local.get(['blockMissing', 'whitelistedDomains'], function (items) {
+ let whitelistedDomains, domainWhitelist;
- let whitelistedDomains = items.whitelistedDomains || {};
- let domainWhitelist = '';
+ whitelistedDomains = items.whitelistedDomains;
+ domainWhitelist = '';
Object.keys(whitelistedDomains).forEach(function (domain) {
domainWhitelist = domainWhitelist + domain + ';';
});
domainWhitelist = domainWhitelist.slice(0, -1);
+ domainWhitelist = domainWhitelist.replace(/^;+|;+$/g, '');
- blockMissingElement.checked = items.blockMissing || false;
- domainWhitelistElement.value = domainWhitelist || '';
+ optionElements.showIconBadge.checked = items.showIconBadge;
+ optionElements.blockMissing.checked = items.blockMissing;
+ optionElements.disablePrefetch.checked = items.disablePrefetch;
+ optionElements.stripMetadata.checked = items.stripMetadata;
+ optionElements.whitelistedDomains.value = domainWhitelist;
});
- let optionChangedHandler = function () {
+ let optionChangedHandler = function ({target}) {
- let whitelistedDomains = {};
+ let optionKey, optionType, optionValue;
- domainWhitelistElement.value.split(VALUE_SEPARATOR).forEach(function (domain) {
- whitelistedDomains[_normalizeDomain(domain)] = true;
- });
+ optionKey = target.getAttribute('data-option');
+ optionType = target.getAttribute('type');
- chrome.storage.local.set({
+ switch (optionType) {
+ case 'checkbox':
+ optionValue = target.checked;
+ break;
+ default:
+ optionValue = target.value;
+ }
+
+ if (optionKey === 'disablePrefetch') {
+
+ if (optionValue === false) {
+
+ // Restore default values of related preference values.
+ chrome.privacy.network.networkPredictionEnabled.clear({});
+
+ } else {
- 'blockMissing': blockMissingElement.checked,
- 'whitelistedDomains': whitelistedDomains
+ chrome.privacy.network.networkPredictionEnabled.set({
+ 'value': false
+ });
+ }
+ }
+
+ if (optionKey === 'whitelistedDomains') {
+
+ let domainWhitelist = optionValue;
+
+ optionValue = {};
+
+ domainWhitelist.split(VALUE_SEPARATOR).forEach(function (domain) {
+ optionValue[_normalizeDomain(domain)] = true;
+ });
+ }
+
+ chrome.storage.local.set({
+ [optionKey]: optionValue
});
};
- blockMissingElement.addEventListener('change', optionChangedHandler);
- domainWhitelistElement.addEventListener('keyup', optionChangedHandler);
+ optionElements.showIconBadge.addEventListener('change', optionChangedHandler);
+ optionElements.blockMissing.addEventListener('change', optionChangedHandler);
+ optionElements.disablePrefetch.addEventListener('change', optionChangedHandler);
+ optionElements.stripMetadata.addEventListener('change', optionChangedHandler);
+ optionElements.whitelistedDomains.addEventListener('keyup', optionChangedHandler);
});
/**