diff --git a/src/_locales/en/messages.json b/src/_locales/en/messages.json index 82964a283..a8495990b 100644 --- a/src/_locales/en/messages.json +++ b/src/_locales/en/messages.json @@ -163,6 +163,10 @@ "message":"Make use of context menu where appropriate", "description":"English: Make use of context menu where appropriate" }, + "settingsColorBlindPrompt":{ + "message":"Color-blind friendly", + "description":"English: Color-blind friendly" + }, "settingsAdvancedUserPrompt":{ "message":"I am an advanced user (Required reading<\/a>)", "description":"English: " diff --git a/src/css/popup.css b/src/css/popup.css index 1ffcd666b..4ff2c7d0b 100644 --- a/src/css/popup.css +++ b/src/css/popup.css @@ -318,6 +318,8 @@ body.dirty #refresh:hover { #firewallContainer.minimized > div.isDomain > span:nth-of-type(4) { display: inline-block; } + +/* Small coloured label at the left of a row */ #firewallContainer > div.allowed > span:nth-of-type(1):before, #firewallContainer > div.blocked > span:nth-of-type(1):before, #firewallContainer.minimized > div.isDomain.totalAllowed > span:nth-of-type(1):before, @@ -335,20 +337,36 @@ body.dirty #refresh:hover { #firewallContainer.minimized > div.isDomain.totalAllowed > span:nth-of-type(1):before { background-color: rgb(0, 160, 0); } +#firewallContainer.colorBlind > div.allowed > span:nth-of-type(1):before, +#firewallContainer.colorBlind.minimized > div.isDomain.totalAllowed > span:nth-of-type(1):before { + background-color: rgb(255, 194, 57); + } #firewallContainer > div.blocked > span:nth-of-type(1):before, #firewallContainer.minimized > div.isDomain.totalBlocked > span:nth-of-type(1):before { background-color: rgb(192, 0, 0); } +#firewallContainer.colorBlind > div.blocked > span:nth-of-type(1):before, +#firewallContainer.colorBlind.minimized > div.isDomain.totalBlocked > span:nth-of-type(1):before { + background-color: rgb(0, 19, 110); + } #firewallContainer > div.allowed.blocked > span:nth-of-type(1):before, #firewallContainer.minimized > div.isDomain.totalAllowed.totalBlocked > span:nth-of-type(1):before { background-color: rgb(192, 160, 0); } + +/* Rule cells */ #firewallContainer > div > span.aRule { background-color: rgba(0, 160, 0, 0.3); } +#firewallContainer.colorBlind > div > span.aRule { + background-color: rgba(255, 194, 57, 0.4); + } #firewallContainer > div > span.bRule { background-color: rgba(192, 0, 0, 0.3); } +#firewallContainer.colorBlind > div > span.bRule { + background-color: rgba(0, 19, 110, 0.4); + } #firewallContainer > div > span.nRule { background-color: rgba(96, 96, 96, 0.3); } @@ -358,9 +376,15 @@ body.dirty #refresh:hover { #firewallContainer > div > span.aRule.ownRule { background-color: rgba(0, 160, 0, 1); } +#firewallContainer.colorBlind > div > span.aRule.ownRule { + background-color: rgba(255, 194, 57, 1); + } #firewallContainer > div > span.bRule.ownRule { background-color: rgba(192, 0, 0, 1); } +#firewallContainer.colorBlind > div > span.bRule.ownRule { + background-color: rgba(0, 19, 110, 1); + } #firewallContainer > div > span.nRule.ownRule { background-color: rgba(108, 108, 108, 1); } @@ -384,12 +408,18 @@ body.dirty #refresh:hover { #actionSelector > span:nth-of-type(1) { background-color: rgb(0, 160, 0); } +#actionSelector.colorBlind > span:nth-of-type(1) { + background-color: rgb(255, 194, 57); + } #actionSelector > span:nth-of-type(2) { background-color: rgb(108, 108, 108); } #actionSelector > span:nth-of-type(3) { background-color: rgb(192, 0, 0); } +#actionSelector.colorBlind > span:nth-of-type(3) { + background-color: rgb(0, 19, 110); + } #firewallContainer span.aRule #actionSelector > span:nth-of-type(1), #firewallContainer span.nRule #actionSelector > span:nth-of-type(2), #firewallContainer span.bRule #actionSelector > span:nth-of-type(3) { diff --git a/src/js/background.js b/src/js/background.js index 1a3c920fa..a93a8915b 100644 --- a/src/js/background.js +++ b/src/js/background.js @@ -56,6 +56,7 @@ return { advancedUserEnabled: false, autoUpdate: true, collapseBlocked: true, + colorBlindFriendly: false, contextMenuEnabled: true, dynamicFilteringEnabled: false, experimentalEnabled: false, diff --git a/src/js/messaging.js b/src/js/messaging.js index 370f0ecc3..3e2c93b17 100644 --- a/src/js/messaging.js +++ b/src/js/messaging.js @@ -208,6 +208,7 @@ var getStats = function(tabId, tabTitle) { advancedUserEnabled: µb.userSettings.advancedUserEnabled, appName: vAPI.app.name, appVersion: vAPI.app.version, + colorBlindFriendly: µb.userSettings.colorBlindFriendly, cosmeticFilteringSwitch: false, dfEnabled: µb.userSettings.dynamicFilteringEnabled, firewallPaneMinimized: µb.userSettings.firewallPaneMinimized, diff --git a/src/js/popup.js b/src/js/popup.js index a008ccc94..b5a65062c 100644 --- a/src/js/popup.js +++ b/src/js/popup.js @@ -302,7 +302,9 @@ var updateAllFirewallCells = function() { var buildAllFirewallRows = function() { // Do this before removing the rows if ( dfHotspots === null ) { - dfHotspots = uDom('#actionSelector').on('click', 'span', setFirewallRuleHandler); + dfHotspots = uDom('#actionSelector') + .toggleClass('colorBlind', popupData.colorBlindFriendly) + .on('click', 'span', setFirewallRuleHandler); } dfHotspots.detach(); @@ -393,14 +395,14 @@ var renderPopup = function() { uDom('#appname').text(popupData.appName); uDom('#version').text(popupData.appVersion); - uDom('body').toggleClass('advancedUser', popupData.advancedUserEnabled); - - uDom('body').toggleClass( - 'off', - (popupData.pageURL === '') || - (!popupData.netFilteringSwitch) || - (popupData.pageHostname === 'behind-the-scene' && !popupData.advancedUserEnabled) - ); + uDom('body') + .toggleClass('advancedUser', popupData.advancedUserEnabled) + .toggleClass( + 'off', + (popupData.pageURL === '') || + (!popupData.netFilteringSwitch) || + (popupData.pageHostname === 'behind-the-scene' && !popupData.advancedUserEnabled) + ); // If you think the `=== true` is pointless, you are mistaken uDom('#gotoLog').toggleClass('enabled', popupData.canRequestLog === true) @@ -450,7 +452,9 @@ var renderPopup = function() { } uDom('#panes').toggleClass('dfEnabled', dfPaneVisible); - uDom('#firewallContainer').toggleClass('minimized', popupData.firewallPaneMinimized); + uDom('#firewallContainer') + .toggleClass('minimized', popupData.firewallPaneMinimized) + .toggleClass('colorBlind', popupData.colorBlindFriendly); // Build dynamic filtering pane only if in use if ( dfPaneVisible ) { diff --git a/src/js/settings.js b/src/js/settings.js index cd6b57f8f..6a9359dcc 100644 --- a/src/js/settings.js +++ b/src/js/settings.js @@ -180,6 +180,12 @@ var onUserSettingsReceived = function(details) { changeUserSettings('contextMenuEnabled', this.checked); }); + uDom('#color-blind-friendly') + .prop('checked', details.colorBlindFriendly === true) + .on('change', function(){ + changeUserSettings('colorBlindFriendly', this.checked); + }); + uDom('#advanced-user-enabled') .prop('checked', details.advancedUserEnabled === true) .on('change', function(){ diff --git a/src/settings.html b/src/settings.html index 2de424253..9c9f6f8a6 100644 --- a/src/settings.html +++ b/src/settings.html @@ -14,6 +14,7 @@
  • +