diff --git a/src/3p-filters.html b/src/3p-filters.html index 40096a31f..eef7728af 100644 --- a/src/3p-filters.html +++ b/src/3p-filters.html @@ -5,6 +5,7 @@ uBlock — Filter lists + @@ -16,18 +17,16 @@
- - - + + +
-
-
-
+
+
 question-circle
-
-
+
 question-circle
@@ -44,25 +43,26 @@
-
- eye-openhometrash-oinfo-circleunlock-altexclamation-triangleclock-ospinnerunlink
-
info-circle
+ diff --git a/src/_locales/en/messages.json b/src/_locales/en/messages.json index 509f35bfa..7f29a81f7 100644 --- a/src/_locales/en/messages.json +++ b/src/_locales/en/messages.json @@ -396,7 +396,7 @@ "description":"English: Parse and enforce Adblock+ element hiding filters." }, "3pParseAllABPHideFiltersInfo":{ - "message":"

This option enables the parsing and enforcing of Adblock Plus-compatible “element hiding” filters<\/a>. These filters are essentially cosmetic, they serve to hide elements in a web page which are deemed to be a visual nuisance, and which can't be blocked by the net request-based filtering engine.<\/p>

Enabling this feature increases uBlock₀'s memory footprint.<\/p>", + "message":"Cosmetic filters serve to hide elements in a web page which are deemed to be a visual nuisance, and which can't be blocked by the network request-based filtering engines.", "description":"Describes the purpose of the 'Parse and enforce cosmetic filters' feature." }, "3pIgnoreGenericCosmeticFilters":{ @@ -404,7 +404,7 @@ "description":"This will cause uBO to ignore all generic cosmetic filters." }, "3pIgnoreGenericCosmeticFiltersInfo":{ - "message":"

Generic cosmetic filters are those cosmetic filters which are meant to apply on all web sites.

Though handled efficiently by uBlock₀, generic cosmetic filters may still contribute measurable memory and CPU overhead on some web pages, especially for large and long-lived ones.

Enabling this option will eliminate the memory and CPU overhead added to web pages as a result of handling generic cosmetic filters, and also lower the memory footprint of uBlock₀ itself.

It is recommended to enable this option on less powerful devices.", + "message":"Generic cosmetic filters are those cosmetic filters which are meant to apply on all web sites. Enabling this option will eliminate the memory and CPU overhead added to web pages as a result of handling generic cosmetic filters.\n\nIt is recommended to enable this option on less powerful devices.", "description":"Describes the purpose of the 'Ignore generic cosmetic filters' feature." }, "3pListsOfBlockedHostsHeader":{ diff --git a/src/about.html b/src/about.html index 18b100e63..df4f542bb 100644 --- a/src/about.html +++ b/src/about.html @@ -6,36 +6,36 @@ uBlock — About +

-

-

Copyright (c) Raymond Hill 2014-present
-   -

- +
+
+
Copyright (c) Raymond Hill 2014-present
+
+
+
+
+
+
+
+
+
+
+
+
GitHub
+
Crowdin
+
+
+
+
Punycode.js by Mathias Bynens
+
Font Awesome by Dave Gandy
+
CodeMirror by Marijn Haverbeke
+
An implementation of Myers' diff algorithm by Arpad Borsos
+
diff --git a/src/cloud-ui.html b/src/cloud-ui.html index ed54676d9..e8f743eef 100644 --- a/src/cloud-ui.html +++ b/src/cloud-ui.html @@ -5,14 +5,12 @@ -
- - - - -
+ + + +

- +cog

diff --git a/src/css/3p-filters.css b/src/css/3p-filters.css index ee593b93b..5559bea67 100644 --- a/src/css/3p-filters.css +++ b/src/css/3p-filters.css @@ -8,31 +8,20 @@ body { margin: 0; padding: 0; } -input[type="checkbox"] { - margin-inline-end: 0.5em; - -webkit-margin-end: 0.5em; - } .root { background-color: white; overflow: auto; padding: 0.5em 0; } -.entry { - align-items: center; - display: flex; - margin: 0.5em 0; - } -.entry > * { - margin-left: 0; - margin-right: 0; - margin-inline-end: 0.5em; - -webkit-margin-end: 0.5em; - } #actions { position: sticky; top: 0; z-index: 10; } +body.updating #buttonUpdate .fa-icon svg { + animation: spin 1s linear infinite; + transform-origin: 50%; + } #listsOfBlockedHostsPrompt { cursor: pointer; } @@ -80,102 +69,121 @@ body.hideUnused #listsOfBlockedHostsPrompt::before, .listEntry > * { margin-left: 0; margin-right: 0; - margin-inline-end: 0.5em; - -webkit-margin-end: 0.5em; unicode-bidi: embed; } -.listEntry > label { - align-items: center; - display: inline-flex; - } .listEntry.toRemove input[type="checkbox"] { visibility: hidden; } .listEntry.toRemove .listname { text-decoration: line-through; } -.listEntry .fa { - color: inherit; +.listEntry .fa, +.listEntry .fa-icon, +.listEntry .counts { + color: #888; display: none; + fill: #888; font-size: 110%; - opacity: 0.5; - vertical-align: baseline; + margin: 0 0.25em; + } +.listEntry .fa:hover, +.listEntry .fa-icon:hover { + color: inherit; + fill: inherit; } .listEntry .content { - display: inline-block; + display: inline-flex; } .listEntry a.towiki { - display: inline-block; - } -.listEntry a.fa:hover { - opacity: 1; + display: inline-flex; } .listEntry.support > a.support { - display: inline-block; + display: inline-flex; } .listEntry .remove { - color: darkred; + color: hsla(0, 100%, 27%, 0.5); cursor: pointer; + fill: hsla(0, 100%, 27%, 0.5); + } +.listEntry .remove:hover { + color: hsla(0, 100%, 27%, 1); + fill: hsla(0, 100%, 27%, 1); } .listEntry.external .remove { - display: inline-block; + display: inline-flex; } .listEntry.mustread a.mustread { - display: inline-block; + color: hsla(240, 100%, 40%, 0.5); + display: inline-flex; + fill: hsla(240, 100%, 40%, 0.5); } .listEntry.mustread a.mustread:hover { - color: mediumblue; + color: hsla(240, 100%, 40%, 1); + fill: hsla(240, 100%, 40%, 1); } .listEntry .counts { - display: none; font-size: smaller; } .listEntry.checked .counts { display: inline; } .dim { - opacity: 0.6; + color: #666; } .listEntry .status { - color: #444; cursor: default; display: none; } .listEntry .status:hover { - opacity: 1; + color: inherit; } .listEntry .unsecure { - color: darkred; + color: hsla(0, 100%, 27%, 0.5); + fill: hsla(0, 100%, 27%, 0.5); + } +.listEntry .unsecure:hover { + color: hsla(0, 100%, 27%, 1); + fill: hsla(0, 100%, 27%, 1); } .listEntry.checked.unsecure .unsecure { - display: inline-block; + display: inline-flex; } .listEntry .failed { - color: darkred; + color: hsla(0, 100%, 27%, 0.5); + fill: hsla(0, 100%, 27%, 0.5); + } +.listEntry .failed:hover { + color: hsla(0, 100%, 27%, 1); + fill: hsla(0, 100%, 27%, 1); } .listEntry.failed .failed { - display: inline-block; + display: inline-flex; } .listEntry .cache { cursor: pointer; } .listEntry.checked.cached:not(.obsolete) .cache { - display: inline-block; + display: inline-flex; } .listEntry .obsolete { - color: hsl(36, 100%, 40%); + color: hsla(36, 100%, 40%, 0.5); + fill: hsla(36, 100%, 40%, 0.5); + } +.listEntry .obsolete:hover { + color: hsla(36, 100%, 40%, 1); + fill: hsla(36, 100%, 40%, 1); } body:not(.updating) .listEntry.checked.obsolete .obsolete { - display: inline-block; + display: inline-flex; } .listEntry .updating { - transform-origin: 50% 46%; + transform-origin: 50%; } body.updating .listEntry.checked.obsolete .updating { - animation: spin 2s linear infinite; - display: inline-block; + animation: spin 1s steps(8) infinite; + display: inline-flex; } -.listEntry.toImport input[type="checkbox"] ~ textarea { +.listEntry.toImport textarea { border: 1px solid #ccc; box-sizing: border-box; display: block; @@ -187,7 +195,7 @@ body.updating .listEntry.checked.obsolete .updating { white-space: pre; width: 100%; } -.listEntry.toImport input[type="checkbox"]:checked ~ textarea { +.listEntry.toImport.checked textarea { visibility: visible; } diff --git a/src/css/about.css b/src/css/about.css new file mode 100644 index 000000000..5236a2561 --- /dev/null +++ b/src/css/about.css @@ -0,0 +1,20 @@ +body { + border: 0; + font: 14px/1.5 sans-serif; + margin: 0; + padding: 0; + } +.entries { + margin: 0.5em 0; + margin-inline-start: 2em; + -webkit-margin-start: 2em; + } +.entry { + margin: 0.5em 0; + } + +@media (pointer: coarse) { + body { + font: 16px/1.5 sans-serif; + } +} diff --git a/src/css/cloud-ui.css b/src/css/cloud-ui.css index 334e58773..ae6a6ae36 100644 --- a/src/css/cloud-ui.css +++ b/src/css/cloud-ui.css @@ -8,7 +8,12 @@ #cloudWidget.hide { display: none; } -#cloudWidget .cloudTools { +#cloudWidget > button { + font-size: 180%; + padding: 0 0.25em; + position: relative; + } +#cloudWidget { align-items: center; display: flex; flex-wrap: nowrap; @@ -16,21 +21,17 @@ #cloudWidget button[disabled] { visibility: hidden; } -#cloudWidget button > span.fa { - font-size: 150%; - } #cloudWidget button.error { color: red; } #cloudPullAndMerge { margin-left: 0.25em; } -#cloudPullAndMerge > span { - position: relative; -} -#cloudPullAndMerge > span > span { +#cloudPullAndMerge > span:nth-of-type(2) { font-size: 50%; position: absolute; + right: 0; + top: 0; } #cloudInfo { color: gray; diff --git a/src/css/codemirror.css b/src/css/codemirror.css index 7ef0b6c6f..532b9a1cd 100644 --- a/src/css/codemirror.css +++ b/src/css/codemirror.css @@ -1,5 +1,6 @@ .codeMirrorContainer { font-size: 12px; + line-height: 1.25; overflow: hidden; position: relative; } diff --git a/src/css/common.css b/src/css/common.css index 976598b4a..7afd08fc9 100644 --- a/src/css/common.css +++ b/src/css/common.css @@ -17,7 +17,7 @@ body { background-color: white; color: black; - font: 14px sans-serif; + font: 14px/1.5 sans-serif; } code { background-color: #eee; @@ -28,39 +28,38 @@ textarea { } /* I designed the button with: http://charliepark.org/bootstrap_buttons/ */ button.custom { - padding: 0.6em 1em; + align-items: flex-end; border: 1px solid transparent; - border-color: #ccc #ccc #bbb #bbb; border-radius: 3px; - background-color: hsl(216, 0%, 75%); - background-image: linear-gradient(#f2f2f2, #dddddd); - background-repeat: repeat-x; - color: #000; - opacity: 0.8; + background-color: #e6e6e6; + display: inline-flex; + padding: 0.6em 1em; + -moz-appearance: none; + -webkit-appearance: none; } button.custom:hover { - opacity: 1.0; + background-color: #d4d4d4; } button.custom.important { - border-color: #ffcc7f #ffcc7f hsl(36, 100%, 73%); - background-color: hsl(36, 100%, 75%); - background-image: linear-gradient(#ffdca8, #ffcc7f); + background-color: #ffddaa; + } +button.custom.important:hover { + background-color: #ffcc80; } button.custom.disabled, button.custom[disabled], button.custom.important.disabled, button.custom.important[disabled] { - border-color: #ddd #ddd hsl(36, 0%, 85%); - background-color: hsl(36, 0%, 72%); - background-image: linear-gradient(#f2f2f2, #dddddd); - color: #666; - opacity: 0.6; + background-color: #eee; + color: #888; pointer-events: none; } -button.custom.iconifiable > .fa { +button.custom.iconifiable > .fa, +button.custom.iconifiable > .fa-icon { padding-right: 0.5em; } -body[dir="rtl"] button.custom.iconifiable > .fa { +body[dir="rtl"] button.custom.iconifiable > .fa, +body[dir="rtl"] button.custom.iconifiable > .fa-icon { padding-left: 0.5em; } .hidden { @@ -69,9 +68,34 @@ body[dir="rtl"] button.custom.iconifiable > .fa { visibility: hidden; width: 0; } - +label { + align-items: center; + display: inline-flex; + } +input[type="checkbox"] { + margin: 0; + margin-inline-start: 0.4em; + -webkit-margin-start: 0.4em; + margin-inline-end: 0.4em; + -webkit-margin-end: 0.4em; + } +.ul { + margin: 0.5em 0; + } +.li { + align-items: center; + display: flex; + margin: 0.5em 0; + } +.liul { + margin: 0.5em 0; + margin-inline-start: 2em; + -webkit-margin-start: 2em; + } @media (max-width: 640px) { - button.custom.iconifiable > .fa { + button.custom.iconifiable > .fa, + button.custom.iconifiable > .fa-icon { + font-size: 120%; padding: 0; } button.custom.iconifiable > [data-i18n] { diff --git a/src/css/dashboard-common.css b/src/css/dashboard-common.css index 32407824a..4f306aa32 100644 --- a/src/css/dashboard-common.css +++ b/src/css/dashboard-common.css @@ -2,6 +2,7 @@ body { background-color: #fff; box-sizing: border-box; color: #20123a; + fill: #20123a; margin: 0; padding: 0; } @@ -26,14 +27,23 @@ h3 { a { text-decoration: none; } -a.info { - color: black; - opacity: 0.3; +.fa.info, +.fa-icon.info { + color: #888; + fill: #888; + font-size: 110%; } -a.info:hover { - opacity: 0.9 +.fa.info:hover, +.fa-icon.info:hover { + color: inherit; + fill: inherit; } -a.info.important { +.fa.info.important, +.fa-icon.info.important { + color: #ffa280; + } +.fa.info.important:hover, +.fa-icon.info.important:hover { color: orangered; } button { @@ -42,45 +52,12 @@ button { input[type="number"] { width: 5em; } -input[type="checkbox"][disabled] + label { - opacity: 0.4; +input[type="checkbox"][disabled] + * { + color: #888; } .para { width: 40em; } -.whatisthis { - margin: 0 0 0 8px; - border: 0; - padding: 0 0 4px 0; - width: 16px; - height: 16px; - background: url('../img/help16.png') no-repeat; - cursor: pointer; - opacity: 0.5; - vertical-align: middle; - } -.whatisthis:hover { - opacity: 1.0; - } -.whatisthis-expandable { - margin: 0.5em 0 1em 1.25em; - padding: 0.5em; - display: none; - border: 1px dotted black; - background-color: #F8F8F8; - font-size: 13px; - white-space: pre-line; - } -.whatisthis-expandable > p { - margin-top: 1em; - margin-bottom: 0; - } -.whatisthis-expandable > p:first-child { - margin-top: 0; - } -.whatisthis-expandable.whatisthis-expanded { - display: block; - } .warn { margin: 0; padding: 5px; diff --git a/src/css/dashboard.css b/src/css/dashboard.css index d59722421..87a382782 100644 --- a/src/css/dashboard.css +++ b/src/css/dashboard.css @@ -21,13 +21,13 @@ html, body { width: 100%; z-index: 10; } -#dashboard-nav > span.logo { +#dashboard-nav .logo { align-items: center; display: inline-flex; padding: 0 0.5em; width: 1.25em; } -#dashboard-nav > span.logo > img { +#dashboard-nav .logo > img { width: 100%; } .tabButton { @@ -83,4 +83,7 @@ body:not(.canUpdateShortcuts) .tabButton[data-pane="shortcuts.html"] { font: 16px/1.5 sans-serif; overflow-x: auto; } + #dashboard-nav .logo { + display: none; + } } diff --git a/src/css/dyna-rules.css b/src/css/dyna-rules.css index 7cdd5ccc5..9d5882431 100644 --- a/src/css/dyna-rules.css +++ b/src/css/dyna-rules.css @@ -43,15 +43,20 @@ body { #commitButton, #diff.editing #exportButton, #diff.editing #importButton { - opacity: 0.25; + background-color: #eee; + color: #aaa; pointer-events: none; } #diff.dirty:not(.editing) #revertButton, -#diff.dirty:not(.editing) #commitButton, -#diff.editing { - opacity: 1; +#diff.dirty:not(.editing) #commitButton { + background-color: #e6e6e6; + color: #20123a; pointer-events: auto; } +#diff.dirty:not(.editing) #revertButton:hover, +#diff.dirty:not(.editing) #commitButton:hover { + background-color: #d4d4d4; + } .codeMirrorContainer { height: 60vh; diff --git a/src/css/fa-icons.css b/src/css/fa-icons.css index 5f5c0817d..a451cd6c2 100644 --- a/src/css/fa-icons.css +++ b/src/css/fa-icons.css @@ -17,9 +17,8 @@ .disabled > .fa-icon, .fa-icon[disabled], [disabled] > .fa-icon { - color: #000; - fill: #000; - opacity: 0.25; + color: #888; + fill: #888; stroke: #888; pointer-events: none; } @@ -47,6 +46,9 @@ .fa-icon > .fa-icon_bar-chart { width: calc(1em * 2048 / 1792); } +.fa-icon > .fa-icon_cloud-download, +.fa-icon > .fa-icon_cloud-upload, +.fa-icon > .fa-icon_cogs, .fa-icon > .fa-icon_eraser, .fa-icon > .fa-icon_film { width: calc(1em * 1920 / 1792); @@ -60,24 +62,32 @@ .fa-icon > .fa-icon_clipboard, .fa-icon > .fa-icon_external-link, .fa-icon > .fa-icon_eye-dropper, +.fa-icon > .fa-icon_eye-open, .fa-icon > .fa-icon_eye-slash, .fa-icon > .fa-icon_files-o, .fa-icon > .fa-icon_list-alt { width: calc(1em * 1792 / 1792); } .fa-icon > .fa-icon_font, -.fa-icon > .fa-icon_search { +.fa-icon > .fa-icon_search, +.fa-icon > .fa-icon_spinner, +.fa-icon > .fa-icon_unlink { width: calc(1em * 1664 / 1792); } .fa-icon > .fa-icon_home { width: calc(1em * 1612 / 1792); } +.fa-icon > .fa-icon_check { + width: calc(1em * 1550 / 1792); + } .fa-icon > .fa-icon_cog, +.fa-icon > .fa-icon_clock-o, .fa-icon > .fa-icon_floppy-o, .fa-icon > .fa-icon_info-circle, .fa-icon > .fa-icon_pause-circle-o, .fa-icon > .fa-icon_play-circle-o, .fa-icon > .fa-icon_power-off, +.fa-icon > .fa-icon_question-circle, .fa-icon > .fa-icon_refresh, .fa-icon > .fa-icon_sliders { width: calc(1em * 1536 / 1792); @@ -85,12 +95,17 @@ .fa-icon > .fa-icon_filter { width: calc(1em * 1410 / 1792); } +.fa-icon > .fa-icon_plus, +.fa-icon > .fa-icon_trash-o { + width: calc(1em * 1408 / 1792); + } .fa-icon > .fa-icon_times { width: calc(1em * 1188 / 1792); } .fa-icon > .fa-icon_angle-up, .fa-icon > .fa-icon_double-angle-up, -.fa-icon > .fa-icon_lock { +.fa-icon > .fa-icon_lock, +.fa-icon > .fa-icon_unlock-alt { width: calc(1em * 1152 / 1792); } .fa-icon > .fa-icon_double-angle-left { diff --git a/src/css/settings.css b/src/css/settings.css index e37383449..8ef31b4a1 100644 --- a/src/css/settings.css +++ b/src/css/settings.css @@ -34,11 +34,11 @@ hr { .entry > input[type="checkbox"] { align-self: center; } -#advanced-user-enabled ~ a.fa { +[href="advanced-settings.html"] { display: none; } -body.advancedUser #advanced-user-enabled ~ a.fa { - display: inline; +body.advancedUser [href="advanced-settings.html"] { + display: inline-flex; } @media (pointer: coarse) { diff --git a/src/dyna-rules.html b/src/dyna-rules.html index ab70007a7..c6a2d58be 100644 --- a/src/dyna-rules.html +++ b/src/dyna-rules.html @@ -8,6 +8,7 @@ + @@ -50,6 +51,7 @@ + diff --git a/src/img/fontawesome/fontawesome-defs.svg b/src/img/fontawesome/fontawesome-defs.svg index aae06408c..3c633784b 100644 --- a/src/img/fontawesome/fontawesome-defs.svg +++ b/src/img/fontawesome/fontawesome-defs.svg @@ -30,30 +30,42 @@ License - https://github.com/FortAwesome/Font-Awesome/tree/a8386aae19e200ddb0f68 + + + + + + - + + + + + + + diff --git a/src/js/cloud-ui.js b/src/js/cloud-ui.js index 25a613b90..5894ea28f 100644 --- a/src/js/cloud-ui.js +++ b/src/js/cloud-ui.js @@ -19,7 +19,7 @@ Home: https://github.com/gorhill/uBlock */ -/* global uDom */ +/* global uDom, faIconsInit */ 'use strict'; @@ -168,6 +168,8 @@ const onInitialize = function(options) { ); } + faIconsInit(widget); + vAPI.i18n.render(widget); widget.classList.remove('hide'); diff --git a/src/js/dashboard-common.js b/src/js/dashboard-common.js index 02dae77b4..ad59fb500 100644 --- a/src/js/dashboard-common.js +++ b/src/js/dashboard-common.js @@ -239,10 +239,3 @@ self.uBlockDashboard.openOrSelectPage = function(url, options = {}) { // Open links in the proper window uDom('a').attr('target', '_blank'); uDom('a[href*="dashboard.html"]').attr('target', '_parent'); -uDom('.whatisthis').on('click', function() { - uDom(this) - .parent() - .descendants('.whatisthis-expandable') - .first() - .toggleClass('whatisthis-expanded'); -}); diff --git a/src/js/settings.js b/src/js/settings.js index 437f61a14..086c46413 100644 --- a/src/js/settings.js +++ b/src/js/settings.js @@ -152,13 +152,13 @@ const onLocalDataReceived = function(details) { } if ( details.cloudStorageSupported === false ) { - uDom('#cloud-storage-enabled').attr('disabled', ''); + uDom('[data-setting-name="cloudStorageEnabled"]').attr('disabled', ''); } if ( details.privacySettingsSupported === false ) { - uDom('#prefetching-disabled').attr('disabled', ''); - uDom('#hyperlink-auditing-disabled').attr('disabled', ''); - uDom('#webrtc-ipaddress-hidden').attr('disabled', ''); + uDom('[data-setting-name="prefetchingDisabled"]').attr('disabled', ''); + uDom('[data-setting-name="hyperlinkAuditingDisabled"]').attr('disabled', ''); + uDom('[data-setting-name="webrtcIPAddressHidden"]').attr('disabled', ''); } }; @@ -178,7 +178,7 @@ const resetUserData = function() { const synchronizeDOM = function() { document.body.classList.toggle( 'advancedUser', - uDom.nodeFromId('advanced-user-enabled').checked === true + uDom.nodeFromSelector('[data-setting-name="advancedUserEnabled"]').checked === true ); }; @@ -233,7 +233,7 @@ const onUserSettingsReceived = function(details) { }); }); - uDom('[data-setting-name="noLargeMedia"] ~ label:first-of-type > input[type="number"]') + uDom('[data-i18n="settingsNoLargeMediaPrompt"] > input[type="number"]') .attr('data-setting-name', 'largeMediaSize') .attr('data-setting-type', 'input'); diff --git a/src/settings.html b/src/settings.html index b3573d55c..0152d9ea7 100644 --- a/src/settings.html +++ b/src/settings.html @@ -5,43 +5,44 @@ uBlock — Settings +

-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
 info-circle
+
 cogs
-
-
-
-
-
+
+
 info-circle
+
 info-circle
+
 info-circle
+
 info-circle
-
-
-
-
-
-
+
+
 info-circle
+
 info-circle
+
 info-circle
+
 info-circle
+
 info-circle
-
+
-
+
- - + +

 

@@ -53,6 +54,7 @@

+