mirror of
https://github.com/gorhill/uBlock.git
synced 2024-09-18 17:02:27 +02:00
This addresses colour-blindness issues, using contributed solution https://github.com/chrisaljoudi/uBlock/issues/467#issuecomment-95177219
This commit is contained in:
parent
27de7d4323
commit
78ad7929a6
@ -163,6 +163,10 @@
|
|||||||
"message":"Make use of context menu where appropriate",
|
"message":"Make use of context menu where appropriate",
|
||||||
"description":"English: 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":{
|
"settingsAdvancedUserPrompt":{
|
||||||
"message":"I am an advanced user (<a href='https:\/\/github.com\/gorhill\/uBlock\/wiki\/Advanced-user-features'>Required reading<\/a>)",
|
"message":"I am an advanced user (<a href='https:\/\/github.com\/gorhill\/uBlock\/wiki\/Advanced-user-features'>Required reading<\/a>)",
|
||||||
"description":"English: "
|
"description":"English: "
|
||||||
|
@ -318,6 +318,8 @@ body.dirty #refresh:hover {
|
|||||||
#firewallContainer.minimized > div.isDomain > span:nth-of-type(4) {
|
#firewallContainer.minimized > div.isDomain > span:nth-of-type(4) {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Small coloured label at the left of a row */
|
||||||
#firewallContainer > div.allowed > span:nth-of-type(1):before,
|
#firewallContainer > div.allowed > span:nth-of-type(1):before,
|
||||||
#firewallContainer > div.blocked > 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,
|
#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 {
|
#firewallContainer.minimized > div.isDomain.totalAllowed > span:nth-of-type(1):before {
|
||||||
background-color: rgb(0, 160, 0);
|
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 > div.blocked > span:nth-of-type(1):before,
|
||||||
#firewallContainer.minimized > div.isDomain.totalBlocked > span:nth-of-type(1):before {
|
#firewallContainer.minimized > div.isDomain.totalBlocked > span:nth-of-type(1):before {
|
||||||
background-color: rgb(192, 0, 0);
|
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 > div.allowed.blocked > span:nth-of-type(1):before,
|
||||||
#firewallContainer.minimized > div.isDomain.totalAllowed.totalBlocked > span:nth-of-type(1):before {
|
#firewallContainer.minimized > div.isDomain.totalAllowed.totalBlocked > span:nth-of-type(1):before {
|
||||||
background-color: rgb(192, 160, 0);
|
background-color: rgb(192, 160, 0);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Rule cells */
|
||||||
#firewallContainer > div > span.aRule {
|
#firewallContainer > div > span.aRule {
|
||||||
background-color: rgba(0, 160, 0, 0.3);
|
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 {
|
#firewallContainer > div > span.bRule {
|
||||||
background-color: rgba(192, 0, 0, 0.3);
|
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 {
|
#firewallContainer > div > span.nRule {
|
||||||
background-color: rgba(96, 96, 96, 0.3);
|
background-color: rgba(96, 96, 96, 0.3);
|
||||||
}
|
}
|
||||||
@ -358,9 +376,15 @@ body.dirty #refresh:hover {
|
|||||||
#firewallContainer > div > span.aRule.ownRule {
|
#firewallContainer > div > span.aRule.ownRule {
|
||||||
background-color: rgba(0, 160, 0, 1);
|
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 {
|
#firewallContainer > div > span.bRule.ownRule {
|
||||||
background-color: rgba(192, 0, 0, 1);
|
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 {
|
#firewallContainer > div > span.nRule.ownRule {
|
||||||
background-color: rgba(108, 108, 108, 1);
|
background-color: rgba(108, 108, 108, 1);
|
||||||
}
|
}
|
||||||
@ -384,12 +408,18 @@ body.dirty #refresh:hover {
|
|||||||
#actionSelector > span:nth-of-type(1) {
|
#actionSelector > span:nth-of-type(1) {
|
||||||
background-color: rgb(0, 160, 0);
|
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) {
|
#actionSelector > span:nth-of-type(2) {
|
||||||
background-color: rgb(108, 108, 108);
|
background-color: rgb(108, 108, 108);
|
||||||
}
|
}
|
||||||
#actionSelector > span:nth-of-type(3) {
|
#actionSelector > span:nth-of-type(3) {
|
||||||
background-color: rgb(192, 0, 0);
|
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.aRule #actionSelector > span:nth-of-type(1),
|
||||||
#firewallContainer span.nRule #actionSelector > span:nth-of-type(2),
|
#firewallContainer span.nRule #actionSelector > span:nth-of-type(2),
|
||||||
#firewallContainer span.bRule #actionSelector > span:nth-of-type(3) {
|
#firewallContainer span.bRule #actionSelector > span:nth-of-type(3) {
|
||||||
|
@ -56,6 +56,7 @@ return {
|
|||||||
advancedUserEnabled: false,
|
advancedUserEnabled: false,
|
||||||
autoUpdate: true,
|
autoUpdate: true,
|
||||||
collapseBlocked: true,
|
collapseBlocked: true,
|
||||||
|
colorBlindFriendly: false,
|
||||||
contextMenuEnabled: true,
|
contextMenuEnabled: true,
|
||||||
dynamicFilteringEnabled: false,
|
dynamicFilteringEnabled: false,
|
||||||
experimentalEnabled: false,
|
experimentalEnabled: false,
|
||||||
|
@ -208,6 +208,7 @@ var getStats = function(tabId, tabTitle) {
|
|||||||
advancedUserEnabled: µb.userSettings.advancedUserEnabled,
|
advancedUserEnabled: µb.userSettings.advancedUserEnabled,
|
||||||
appName: vAPI.app.name,
|
appName: vAPI.app.name,
|
||||||
appVersion: vAPI.app.version,
|
appVersion: vAPI.app.version,
|
||||||
|
colorBlindFriendly: µb.userSettings.colorBlindFriendly,
|
||||||
cosmeticFilteringSwitch: false,
|
cosmeticFilteringSwitch: false,
|
||||||
dfEnabled: µb.userSettings.dynamicFilteringEnabled,
|
dfEnabled: µb.userSettings.dynamicFilteringEnabled,
|
||||||
firewallPaneMinimized: µb.userSettings.firewallPaneMinimized,
|
firewallPaneMinimized: µb.userSettings.firewallPaneMinimized,
|
||||||
|
@ -302,7 +302,9 @@ var updateAllFirewallCells = function() {
|
|||||||
var buildAllFirewallRows = function() {
|
var buildAllFirewallRows = function() {
|
||||||
// Do this before removing the rows
|
// Do this before removing the rows
|
||||||
if ( dfHotspots === null ) {
|
if ( dfHotspots === null ) {
|
||||||
dfHotspots = uDom('#actionSelector').on('click', 'span', setFirewallRuleHandler);
|
dfHotspots = uDom('#actionSelector')
|
||||||
|
.toggleClass('colorBlind', popupData.colorBlindFriendly)
|
||||||
|
.on('click', 'span', setFirewallRuleHandler);
|
||||||
}
|
}
|
||||||
dfHotspots.detach();
|
dfHotspots.detach();
|
||||||
|
|
||||||
@ -393,14 +395,14 @@ var renderPopup = function() {
|
|||||||
|
|
||||||
uDom('#appname').text(popupData.appName);
|
uDom('#appname').text(popupData.appName);
|
||||||
uDom('#version').text(popupData.appVersion);
|
uDom('#version').text(popupData.appVersion);
|
||||||
uDom('body').toggleClass('advancedUser', popupData.advancedUserEnabled);
|
uDom('body')
|
||||||
|
.toggleClass('advancedUser', popupData.advancedUserEnabled)
|
||||||
uDom('body').toggleClass(
|
.toggleClass(
|
||||||
'off',
|
'off',
|
||||||
(popupData.pageURL === '') ||
|
(popupData.pageURL === '') ||
|
||||||
(!popupData.netFilteringSwitch) ||
|
(!popupData.netFilteringSwitch) ||
|
||||||
(popupData.pageHostname === 'behind-the-scene' && !popupData.advancedUserEnabled)
|
(popupData.pageHostname === 'behind-the-scene' && !popupData.advancedUserEnabled)
|
||||||
);
|
);
|
||||||
|
|
||||||
// If you think the `=== true` is pointless, you are mistaken
|
// If you think the `=== true` is pointless, you are mistaken
|
||||||
uDom('#gotoLog').toggleClass('enabled', popupData.canRequestLog === true)
|
uDom('#gotoLog').toggleClass('enabled', popupData.canRequestLog === true)
|
||||||
@ -450,7 +452,9 @@ var renderPopup = function() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
uDom('#panes').toggleClass('dfEnabled', dfPaneVisible);
|
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
|
// Build dynamic filtering pane only if in use
|
||||||
if ( dfPaneVisible ) {
|
if ( dfPaneVisible ) {
|
||||||
|
@ -180,6 +180,12 @@ var onUserSettingsReceived = function(details) {
|
|||||||
changeUserSettings('contextMenuEnabled', this.checked);
|
changeUserSettings('contextMenuEnabled', this.checked);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
uDom('#color-blind-friendly')
|
||||||
|
.prop('checked', details.colorBlindFriendly === true)
|
||||||
|
.on('change', function(){
|
||||||
|
changeUserSettings('colorBlindFriendly', this.checked);
|
||||||
|
});
|
||||||
|
|
||||||
uDom('#advanced-user-enabled')
|
uDom('#advanced-user-enabled')
|
||||||
.prop('checked', details.advancedUserEnabled === true)
|
.prop('checked', details.advancedUserEnabled === true)
|
||||||
.on('change', function(){
|
.on('change', function(){
|
||||||
|
@ -14,6 +14,7 @@
|
|||||||
<li><input id="collapse-blocked" type="checkbox"><label data-i18n="settingsCollapseBlockedPrompt" for="collapse-blocked"></label>
|
<li><input id="collapse-blocked" type="checkbox"><label data-i18n="settingsCollapseBlockedPrompt" for="collapse-blocked"></label>
|
||||||
<li><input id="icon-badge" type="checkbox"><label data-i18n="settingsIconBadgePrompt" for="icon-badge"></label>
|
<li><input id="icon-badge" type="checkbox"><label data-i18n="settingsIconBadgePrompt" for="icon-badge"></label>
|
||||||
<li><input id="context-menu-enabled" type="checkbox"><label data-i18n="settingsContextMenuPrompt" for="context-menu-enabled"></label>
|
<li><input id="context-menu-enabled" type="checkbox"><label data-i18n="settingsContextMenuPrompt" for="context-menu-enabled"></label>
|
||||||
|
<li><input id="color-blind-friendly" type="checkbox"><label data-i18n="settingsColorBlindPrompt" for="color-blind-friendly"></label>
|
||||||
<li><input id="advanced-user-enabled" type="checkbox"><label data-i18n="settingsAdvancedUserPrompt" for="advanced-user-enabled"></label>
|
<li><input id="advanced-user-enabled" type="checkbox"><label data-i18n="settingsAdvancedUserPrompt" for="advanced-user-enabled"></label>
|
||||||
<!-- <li><input id="experimental-enabled" type="checkbox" disabled><label data-i18n="settingsExperimentalPrompt" for="experimental-enabled"></label> -->
|
<!-- <li><input id="experimental-enabled" type="checkbox" disabled><label data-i18n="settingsExperimentalPrompt" for="experimental-enabled"></label> -->
|
||||||
</ul>
|
</ul>
|
||||||
|
Loading…
Reference in New Issue
Block a user