Microsoft has acquired GitHub. Decentraleyes has left GitHub. Welcome to its new home!

To participate, please register, or sign in with an existing GitLab.com, Bitbucket, or GitHub account.

Past contributions on GitHub? Be sure to reclaim your Comments, Issues, and Pull Requests.

Verified Commit 75c1a4d7 authored by Thomas Rientjes's avatar Thomas Rientjes
Browse files

Update and refactor existing codebase

parent 2f945bf1
......@@ -335,6 +335,7 @@ interceptor.taintedDomains = {
'ohio.com': true,
'olneydailymail.com': true,
'onlineathens.com': true,
'onwelo.com': true,
'opavote.com': true,
'opendata.cbs.nl': true,
'openweathermap.org': true,
......@@ -347,6 +348,7 @@ interceptor.taintedDomains = {
'pawhuskajournalcapital.com': true,
'pbcommercial.com': true,
'pekintimes.com': true,
'peoplefone.ch': true,
'piekaryslaskie.com.pl': true,
'pjstar.com': true,
'pl.sharkoon.com': true,
......@@ -358,6 +360,7 @@ interceptor.taintedDomains = {
'pratttribune.com': true,
'pressargus.com': true,
'pressmentor.com': true,
'processtypefoundry.com': true,
'progress-index.com': true,
'prosperpressnews.com': true,
'providencejournal.com': true,
......@@ -456,6 +459,7 @@ interceptor.taintedDomains = {
'udacity.com': true,
'uticaod.com': true,
'vanalstyneleader.com': true,
'viaplay.se': true,
'vvdailypress.com': true,
'waltonsun.com': true,
'washingtontimesreporter.com': true,
......
......@@ -77,6 +77,15 @@ helpers.languageIsFullySupported = function (language) {
return languageSupported;
};
helpers.enterOrSpaceKeyPressed = function (event) {
if (!event.isComposing && event.keyCode !== 229) {
return event.keyCode === 13 || event.keyCode === 32;
}
return false;
};
helpers.normalizeDomain = function (domain) {
domain = domain.toLowerCase().trim();
......
......@@ -7,6 +7,7 @@ body {
cursor: default;
font-family: 'Noto Sans', Arial, sans-serif !important;
font-size: 12px;
margin-bottom: 5px;
margin-top: -15px;
padding: 10px !important;
}
......@@ -27,11 +28,18 @@ body {
.notice-default {
background-color: #f1f1f1;
border: 1px solid #d2d2d2;
color: #282828;
}
.notice-warning {
background-color: #ffa500;
color: #fff;
background-color: #ffd90f;
border: 1px solid #d2b115;
color: #463a02;
}
.notice-secondary {
margin-top: 50px;
}
/**
......@@ -77,7 +85,7 @@ body {
*/
.input-checkbox {
margin: 0 4px 0 0;
margin: 0 5px 0 0;
outline: 0;
}
......@@ -86,6 +94,14 @@ body {
max-width: 320px;
}
.text-label {
padding: 0 2px;
}
.input-checkbox:focus + .text-label {
outline: 1px dotted #000;
}
/**
* Icons
*/
......@@ -101,9 +117,11 @@ body {
.button {
-moz-user-select: none;
background-color: #f5f5f5;
border-color: #cfcfcf;
border-radius: 2px;
border: 1px solid #cfcfcf;
color: #5f5f5f;
border-style: solid;
border-width: 1px 1px 2px 1px;
color: #282828;
cursor: pointer;
float: right;
font-size: 12px;
......@@ -118,24 +136,40 @@ body {
background-color: #fff;
}
.button:focus {
background-color: #fff;
border-color: #9a9a9a;
color: #000;
}
.button:active {
background-color: #dedede;
margin-top: 1px;
border-bottom-width: 1px;
}
.button-warning {
background-color: #ea9700;
border: 1px solid #d88c00;
color: #fff;
background-color: #ffef95;
border-color: #ae920d;
color: #1a1500;
}
.button-warning:hover {
background-color: #d88c00;
border-color: #c98200;
background-color: #fffbde;
border-color: #a48b14;
color: #000;
}
.button-warning:focus {
background-color: #fff9d8;
border-color: #91790a;
color: #000;
}
.button-warning:active {
background-color: #c07c00;
border-color: #b47400;
background-color: #d7b002;
border-color: #a48900;
color: #292100;
}
.button-notice {
......@@ -156,7 +190,7 @@ body {
*/
.description-option {
color: #777;
color: #757575;
font-style: italic;
padding-left: 29px;
}
......@@ -171,7 +205,9 @@ body {
}
.badge-warning {
background-color: #ffa500;
background-color: #ffd90f;
border: 1px solid #f0c600;
color: #463a02;
}
.hidden {
......@@ -232,15 +268,11 @@ body[dir="rtl"] .input-text {
color: #f9f9fa;
}
.title-option {
color: #f9f9fa;
}
.description-option {
color: #b1b1b3;
}
.badge-warning {
color: #4b3000;
.input-checkbox:focus + .text-label {
outline: 1px dotted #f9f9fa;
}
}
......@@ -37,8 +37,8 @@
<div class="notice-message">
This feature breaks websites. Do not leave it enabled, unless you are prepared to manually whitelist any affected domains.
</div>
<div class="button button-notice button-warning" id="button-block-missing">
<div class="button button-notice button-warning" id="button-block-missing" tabindex="0">
Disable
</div>
......@@ -53,7 +53,7 @@
<label class="label-checkbox">
<input class="input-checkbox" data-option="showIconBadge" type="checkbox">
<span data-i18n-content="showIconBadgeTitle"></span>
<span class="text-label" data-i18n-content="showIconBadgeTitle"></span>
</label>
......@@ -70,7 +70,7 @@
<label class="label-checkbox">
<input class="input-checkbox" data-option="blockMissing" type="checkbox">
<span data-i18n-content="blockMissingTitle"></span>
<span class="text-label" data-i18n-content="blockMissingTitle"></span>
</label>
......@@ -89,7 +89,7 @@
<label class="label-checkbox">
<input class="input-checkbox" data-option="disablePrefetch" type="checkbox">
<span data-i18n-content="disablePrefetchTitle"></span>
<span class="text-label" data-i18n-content="disablePrefetchTitle"></span>
</label>
......@@ -108,7 +108,7 @@
<label class="label-checkbox">
<input class="input-checkbox" data-option="stripMetadata" type="checkbox">
<span data-i18n-content="stripMetadataTitle"></span>
<span class="text-label" data-i18n-content="stripMetadataTitle"></span>
</label>
......@@ -122,13 +122,13 @@
<section class="option">
<div class="title-option" data-i18n-content="whitelistedDomainsTitle"></div>
<input class="input-text" data-option="whitelistedDomains" type="text">
<label for="input-domains" class="title-option" data-i18n-content="whitelistedDomainsTitle"></label>
<input id="input-domains" class="input-text" data-option="whitelistedDomains" type="text">
<div class="description-option" data-i18n-content="whitelistedDomainsDescription"></div>
</section>
<section class="notice notice-default hidden" id="notice-locale">
<section class="notice notice-default notice-secondary hidden" id="notice-locale">
<div class="notice-body" dir="ltr">
......@@ -138,8 +138,8 @@
Your preferred language is not yet fully supported.
</div>
<a class="button button-notice" href="https://crowdin.com/project/decentraleyes" target="_blank">
<a class="button button-notice" id="button-help-translate" tabindex="0">
Help Translate
</a>
......
......@@ -74,7 +74,7 @@ options._hideBlockMissingNotice = function () {
options._renderLocaleNotice = function () {
let localeNoticeElement = document.getElementById('notice-locale');
localeNoticeElement.setAttribute('class', 'notice notice-default');
localeNoticeElement.setAttribute('class', 'notice notice-default notice-secondary');
};
options._registerOptionChangedEventListeners = function (elements) {
......@@ -88,14 +88,30 @@ options._registerOptionChangedEventListeners = function (elements) {
options._registerMiscellaneousEventListeners = function () {
let blockMissingButtonElement = document.getElementById('button-block-missing');
let blockMissingButtonElement, helpTranslateButtonElement;
blockMissingButtonElement.addEventListener('click', function () {
blockMissingButtonElement = document.getElementById('button-block-missing');
helpTranslateButtonElement = document.getElementById('button-help-translate');
let changeEvent = new Event('change');
blockMissingButtonElement.addEventListener('click', options._onDisableBlockMissing);
helpTranslateButtonElement.addEventListener('click', options._onHelpTranslate);
options._optionElements.blockMissing.checked = false;
options._optionElements.blockMissing.dispatchEvent(changeEvent);
blockMissingButtonElement.addEventListener('keydown', function (event) {
let enterOrSpaceKeyPressed = helpers.enterOrSpaceKeyPressed(event);
if (enterOrSpaceKeyPressed) {
options._onDisableBlockMissing();
}
});
helpTranslateButtonElement.addEventListener('keydown', function (event) {
let enterOrSpaceKeyPressed = helpers.enterOrSpaceKeyPressed(event);
if (enterOrSpaceKeyPressed) {
options._onHelpTranslate();
}
});
};
......@@ -119,15 +135,13 @@ options._getOptionElement = function (optionKey) {
options._getOptionElements = function () {
let optionElements = {
return {
[Setting.SHOW_ICON_BADGE]: options._getOptionElement(Setting.SHOW_ICON_BADGE),
[Setting.BLOCK_MISSING]: options._getOptionElement(Setting.BLOCK_MISSING),
[Setting.DISABLE_PREFETCH]: options._getOptionElement(Setting.DISABLE_PREFETCH),
[Setting.STRIP_METADATA]: options._getOptionElement(Setting.STRIP_METADATA),
[Setting.WHITELISTED_DOMAINS]: options._getOptionElement(Setting.WHITELISTED_DOMAINS)
};
return optionElements;
};
options._configureLinkPrefetching = function (value) {
......@@ -225,6 +239,21 @@ options._onOptionChanged = function ({target}) {
});
};
options._onDisableBlockMissing = function () {
let changeEvent = new Event('change');
options._optionElements.blockMissing.checked = false;
options._optionElements.blockMissing.dispatchEvent(changeEvent);
};
options._onHelpTranslate = function () {
chrome.tabs.create({
'url': 'https://crowdin.com/project/decentraleyes'
});
};
/**
* Initializations
*/
......
......@@ -31,7 +31,7 @@ header {
}
.subpanel {
overflow: hidden;
padding-bottom: 6px;
}
footer {
......@@ -95,7 +95,7 @@ footer {
.list-item {
background-color: #f7f7f7;
border: 1px solid #e4e4e4;
color: #737373;
color: #555;
font-weight: 600;
list-style: none;
margin: 0;
......@@ -108,7 +108,6 @@ footer {
border: 1px solid #e0e0e0;
box-shadow: inset 0 2px 10px #e2e2e2;
list-style: none;
padding-left: 8px;
padding: 0;
}
......@@ -118,7 +117,7 @@ footer {
.sublist-item {
border-bottom: 1px solid #e0e0e0;
color: #737373;
color: #555;
font-weight: 600;
padding: 10px;
}
......@@ -156,14 +155,7 @@ footer {
font-size: 12px;
padding: 5px 22px;
user-select: none;
}
.button:hover {
background-color: #fff;
}
.button:active {
background-color: #dedede;
overflow: hidden;
}
.button-toggle {
......@@ -176,22 +168,44 @@ footer {
color: #339a6f;
}
.button:hover {
background-color: #fff;
}
.button:focus {
background-color: #f9f9f9;
border: 1px solid #bbb;
box-shadow: 0 0 4px #b9b9b9;
outline: 0;
}
.button:active {
background-color: #dedede;
}
/**
* Links
*/
.link-text {
color: #bdbdbd;
color: #6d6d6d;
cursor: pointer;
float: left;
font-size: 13px;
padding-left: 4px;
padding-top: 5px;
line-height: 1;
margin: 6px 0 0 2px;
padding: 1px 2px 4px;
text-decoration: none;
}
.link-text:hover {
color: #777;
color: #555;
text-decoration: underline;
}
.link-text:focus {
color: #555;
outline-color: #555;
text-decoration: underline;
}
......@@ -200,14 +214,15 @@ footer {
*/
.badge {
background-color: #6bb798;
background: #fbfbfb;
border-radius: 10px;
color: #fff;
border: 2px solid #7db69f;
color: #4a7767;
font-family: monospace;
font-size: 13px;
font-weight: 600;
margin-right: 8px;
padding: 3px 15px;
margin-right: 7px;
padding: 0 13px;
}
.counter {
......@@ -218,7 +233,7 @@ footer {
}
.description {
color: #777;
color: #6d6d6d;
font-style: italic;
margin: 0 6px;
text-align: center;
......@@ -229,12 +244,12 @@ footer {
}
.label-version {
color: #6aac91;
color: #457763;
font-size: 9px;
}
.label-domain {
color: #bbb;
color: #6d6d6d;
display: flex;
font-style: italic;
overflow: hidden;
......@@ -243,7 +258,7 @@ footer {
}
.side-note {
color: #a5a5a5;
color: #646464;
font-style: italic;
font-weight: 400;
}
......@@ -305,14 +320,20 @@ footer {
.button {
background-color: #3c3c3c;
border-color: #323232;
color: #bbb;
border-color: #292929;
color: #dadada;
}
.button:hover {
background-color: #434343;
}
.button:focus {
background-color: #434343;
border-color: #292929;
box-shadow: 0 0 4px #323232;
}
.button:active {
background-color: #393939;
}
......@@ -323,7 +344,8 @@ footer {
}
.button-toggle.active {
border-color: #323232;
border-color: #292929;
color: #3dbb87;
}
/**
......@@ -331,11 +353,16 @@ footer {
*/
.link-text {
color: #7d7d7d;
color: #dadada;
}
.link-text:hover {
color: #dadada;
color: #f9f9fa;
}
.link-text:focus {
color: #f9f9fa;
outline-color: #dadada;
}
/**
......@@ -343,15 +370,21 @@ footer {
*/
.badge {
color: #2d5042;
background-color: #323232;
border-color: #4a826c;
color: #f9f9fa;
}
.description {
color: #dadada;
}
.label-version {
color: #93d7bc;
}
.label-domain {
color: #717171;
color: #dadada;
}
.panel:not(:last-child) {
......@@ -359,6 +392,6 @@ footer {
}
.side-note {
color: #888;
color: #dadada;
}
}
......@@ -36,7 +36,7 @@
<div class="subpanel">
<div id="protection-toggle-button" class="button button-toggle active">
<div id="protection-toggle-button" class="button button-toggle active" tabindex="0">
<i class="fai fa-power-off" data-fa-transform="grow-2 down-.5"></i>
</div>
......@@ -62,9 +62,9 @@
<footer>
<span id="testing-utility-link" class="link-text">decentraleyes.org/test</span>
<span id="testing-utility-link" class="link-text" tabindex="0">decentraleyes.org/test</span>
<div id="options-button" class="button" data-i18n-title="optionsTitle">
<div id="options-button" class="button" data-i18n-title="optionsTitle" tabindex="0">
<i class="fai fa-cog" data-fa-transform="grow-2 down-.5"></i>
</div>
......
......@@ -50,6 +50,31 @@ popup._renderNonContextualContents = function () {
testingUtilityLinkElement.addEventListener('mouseup', popup._onTestingUtilityLinkClicked);
optionsButtonElement.addEventListener('mouseup', popup._onOptionsButtonClicked);
testingUtilityLinkElement.addEventListener('keydown', function (event) {
let enterOrSpaceKeyPressed = helpers.enterOrSpaceKeyPressed(event);
if (enterOrSpaceKeyPressed) {
chrome.tabs.create({
'url': 'https://decentraleyes.org/test'
});
window.close();
}
});
optionsButtonElement.addEventListener('keydown', function (event) {
let enterOrSpaceKeyPressed = helpers.enterOrSpaceKeyPressed(event);
if (enterOrSpaceKeyPressed) {
chrome.runtime.openOptionsPage();
return window.close();
}
});
};
popup._renderContextualContents = function () {
......@@ -82,6 +107,15 @@ popup._renderDomainWhitelistPanel = function () {
protectionToggleElement.addEventListener('click', popup._enableProtection);