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.

Apply usability and accessibility improvements

parent 414767e7
......@@ -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);
protectionToggleElement.setAttribute('title', enableProtectionTitle);
protectionToggleElement.addEventListener('keydown', function (event) {
let enterOrSpaceKeyPressed = helpers.enterOrSpaceKeyPressed(event);
if (enterOrSpaceKeyPressed) {
popup._enableProtection();
}
});
} else {
let disableProtectionTitle = chrome.i18n.getMessage('disableProtectionTitle');
......@@ -89,6 +123,15 @@ popup._renderDomainWhitelistPanel = function () {
protectionToggleElement.setAttribute('class', 'button button-toggle active');
protectionToggleElement.addEventListener('click', popup._disableProtection);
protectionToggleElement.setAttribute('title', disableProtectionTitle);
protectionToggleElement.addEventListener('keydown', function (event) {
let enterOrSpaceKeyPressed = helpers.enterOrSpaceKeyPressed(event);
if (enterOrSpaceKeyPressed) {
popup._disableProtection();
}
});
}
websiteContextElement.setAttribute('class', 'panel');
......@@ -156,9 +199,7 @@ popup._determineResourceInjections = function () {
chrome.runtime.sendMessage(message, function (response) {
let groupedInjections = popup._groupResourceInjections(response.value);
popup._resourceInjections = groupedInjections;
popup._resourceInjections = popup._groupResourceInjections(response.value);
resolve();
});
});
......@@ -196,10 +237,13 @@ popup._groupResourceInjections = function (injections) {
for (let index in injections) {
let {source} = injections[index];
if (injections.hasOwnProperty(index)) {
let {source} = injections[index];
groupedInjections[source] = groupedInjections[source] || [];
groupedInjections[source].push(injections[index]);
groupedInjections[source] = groupedInjections[source] || [];
groupedInjections[source].push(injections[index]);
}
}
return groupedInjections;
......@@ -212,15 +256,18 @@ popup._createInjectionOverviewElement = function (groupedInjections) {
for (let source in groupedInjections) {
let injectionGroupHeaderElement, injectionGroupElement, cdn;
if (groupedInjections.hasOwnProperty(source)) {
let injectionGroupHeaderElement, injectionGroupElement, cdn;
cdn = groupedInjections[source];
cdn = groupedInjections[source];
injectionGroupHeaderElement = popup._createInjectionGroupHeaderElement(source, cdn);
injectionGroupElement = popup._createInjectionGroupElement(source, cdn);
injectionGroupHeaderElement = popup._createInjectionGroupHeaderElement(source, cdn);
injectionGroupElement = popup._createInjectionGroupElement(source, cdn);
injectionOverviewElement.appendChild(injectionGroupHeaderElement);
injectionOverviewElement.appendChild(injectionGroupElement);
injectionOverviewElement.appendChild(injectionGroupHeaderElement);
injectionOverviewElement.appendChild(injectionGroupElement);
}
}
return injectionOverviewElement;
......
......@@ -159,14 +159,14 @@ a {
background-color: #fcfcfc;
border-radius: 4px;
border: 1px solid #e6e6e6;
color: #777;
color: #6d6d6d;
font-size: 14px;
margin-bottom: 20px;
padding: 8px 11px;
}
.topic-label {
color: #5a8f79;
color: #4f7e6a;
font-style: normal;
font-weight: bold;
}
......@@ -187,11 +187,11 @@ a {
}
@media screen and (max-width: 550px) {
.btn {
padding: 13px 18px 12px
}
.btn-text {
display: none
}
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment