diff --git a/src/css/fa-icons.css b/src/css/fa-icons.css index 05d66da85..eeea6eebb 100644 --- a/src/css/fa-icons.css +++ b/src/css/fa-icons.css @@ -3,7 +3,7 @@ background-color: transparent; border: 0; display: inline-flex; - justify-content: flex-start; + justify-content: center; margin: 0; padding: 0.1em; position: relative; @@ -23,20 +23,15 @@ } .fa-icon > .fa-icon-badge, .fa-icon.disabled > .fa-icon-badge { - display: none; + visibility: hidden; } .fa-icon.fa-icon-badged > .fa-icon-badge { - background-color: rgba(255, 255, 255, 0.7); - border-radius: 3px; - bottom: 1px; + bottom: -20%; display: inline-block; - font-family: sans-serif; - font-size: 40%; + font: 60% sans-serif; + left: calc(100% - 0.2em); position: absolute; - right: 1px; - } -.fa-icon.disabled > .fa-icon-badge { - display: none; + visibility: visible; } .fa-icon > svg { @@ -49,6 +44,8 @@ width: calc(1em * 640 / 512); } .fa-icon > .fa-icon_exclamation-triangle, +.fa-icon > .fa-icon_eye, +.fa-icon > .fa-icon_eye-slash, .fa-icon > .fa-icon_home, .fa-icon > .fa-icon_puzzle-piece, .fa-icon > .fa-icon_reply-all { @@ -59,6 +56,7 @@ .fa-icon > .fa-icon_download, .fa-icon > .fa-icon_eraser, .fa-icon > .fa-icon_eye-dropper, +.fa-icon > .fa-icon_film, .fa-icon > .fa-icon_filter, .fa-icon > .fa-icon_info-circle, .fa-icon > .fa-icon_list-alt, @@ -69,6 +67,7 @@ .fa-icon > .fa-icon_reply, .fa-icon > .fa-icon_search-minus, .fa-icon > .fa-icon_search-plus, +.fa-icon > .fa-icon_sliders-h, .fa-icon > .fa-icon_spinner, .fa-icon > .fa-icon_sync-alt, .fa-icon > .fa-icon_th, @@ -79,6 +78,8 @@ .fa-icon > .fa-icon_angle-double-left, .fa-icon > .fa-icon_arrow-left, .fa-icon > .fa-icon_arrow-right, +.fa-icon > .fa-icon_copy, +.fa-icon > .fa-icon_font, .fa-icon > .fa-icon_lock, .fa-icon > .fa-icon_plus, .fa-icon > .fa-icon_save, @@ -90,7 +91,8 @@ width: calc(1em * 352 / 512); } .fa-icon > .fa-icon_angle-up, -.fa-icon > .fa-icon_angle-double-up { +.fa-icon > .fa-icon_angle-double-up, +.fa-icon > .fa-icon_bolt { width: calc(1em * 320 / 512); } .fa-icon > .fa-icon_ellipsis-v { diff --git a/src/css/popup.css b/src/css/popup.css index 853b8cc0d..86a770511 100644 --- a/src/css/popup.css +++ b/src/css/popup.css @@ -30,16 +30,15 @@ a { outline: 0; } #appinfo { + align-items: flex-end; background-color: #444; border: 0; - color: #bbb; - display: block; - font-size: 85%; - line-height: 1.2; + color: #ccc; + display: flex; + font-size: 80%; + justify-content: center; margin: 0; - padding: calc(0.1em + 1px) 0; - position: relative; - text-align: center; + padding: 1px 0; width: 100%; } #version { @@ -88,29 +87,33 @@ body[dir="rtl"] #panes > div:nth-of-type(2) { padding: 0; } p { - text-align: center; - white-space: nowrap; + display: flex; + justify-content: center; + } +.fa-icon { + font-size: 120%; } .fa { font-size: 120%; } #switch { - margin: 8px 0; + margin: 0.8em 0; } -#switch .fa { - color: #0046ff; +#switch .fa-icon { + fill: #0046ff; cursor: pointer; - font-size: 700%; + font-size: 650%; margin: 0; + padding: 0; } -#switch .fa:hover { +#switch .fa-icon:hover { opacity: 0.9; } -body.off #switch .fa { - color: #ccc; +body.off #switch .fa-icon { + fill: #ccc; } #basicTools { - margin: 0.8em 0 0.4em 0; + margin: 1.5em 0 0.5em 0; } .tool:first-child { margin-left: 0; @@ -118,17 +121,19 @@ body.off #switch .fa { .tool { color: #aaa; cursor: pointer; - visibility: hidden; - margin-left: 0.4em; + fill: #aaa; + margin-left: 0.8em; min-width: 1em; padding: 0 0.2em; unicode-bidi: embed; + visibility: hidden; } .tool.enabled { visibility: visible; } .tool.enabled:hover { color: #444; + fill: #444; } #page-blocked { font-size: 1.25em; @@ -137,37 +142,28 @@ body.off #switch .fa { color: #888; font-size: 85%; margin: 0.8em 0.2em 0.4em 0.2em; - text-align: center; } .statValue { margin: 0; - text-align: center; } #extraTools { background-color: #eee; border: 0; color: #888; + display: flex; + fill: #888; + justify-content: space-evenly; margin: 0.8em 0 0 0; - padding: 4px 0 4px 0.8em; - text-align: center; + padding: 0.2em 0; } #extraTools > span { cursor: pointer; font-size: 1.2em; - margin: 0 0.8em 0 0; + margin: 0 0.9em 0 0; position: relative; } -#extraTools > span > span.badge { - color: #222; - bottom: -2px; - font: x-small sans-serif; - position: absolute; - } -body[dir="ltr"] #extraTools > span > span.badge { - /* left: 100%; */ - } -body[dir="rtl"] #extraTools > span > span.badge { - /* right: 100%; */ +#extraTools > span:first-of-type { + margin-left: 0.9em; } #extraTools > span > span:last-of-type { color: #e00; @@ -187,28 +183,29 @@ body[dir="rtl"] #extraTools > span > span.badge { } #extraTools > span:hover { color: #333; + fill: #333; } #refresh { background-color: #ffe; border: 1px solid #ddc; border-radius: 4px; - color: #888; cursor: pointer; display: none; - font-size: 3.5em; + fill: #888; + font-size: 3em; + justify-content: center; left: 4px; line-height: 1; - padding: 4px 8px; + padding: 0.15em; position: absolute; right: 4px; - text-align: center; } body.dirty #refresh { - display: block; + display: flex; } body.dirty #refresh:hover { - color: black; + fill: #000 } #tooltip { @@ -492,7 +489,7 @@ body.advancedUser #firewallContainer > div > span.noopRule.ownRule { #rulesetTools { background-color: transparent; border: 0; - color: #888; + fill: #888; display: none; left: 4px; padding: 0; @@ -505,11 +502,11 @@ body.advancedUser #firewallContainer > div > span.noopRule.ownRule { border-radius: 4px; cursor: pointer; display: inline-block; - font-size: 1.8em; + font-size: 1.5em; line-height: 1.0; margin: 0; margin-right: 0.1em; - padding: 0.2em 0.4em; + padding: 0.3em 0.5em; text-align: center; width: 1em; } @@ -517,7 +514,7 @@ body.advancedUser #firewallContainer > div > span.noopRule.ownRule { display: block; } #firewallContainer.dirty ~ #rulesetTools > span:hover { - color: black; + fill: black; } diff --git a/src/img/fontawesome/fontawesome-defs.svg b/src/img/fontawesome/fontawesome-defs.svg index bbbf8fd6f..6d17633d5 100644 --- a/src/img/fontawesome/fontawesome-defs.svg +++ b/src/img/fontawesome/fontawesome-defs.svg @@ -9,17 +9,23 @@ License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL + + + + + + @@ -35,6 +41,7 @@ License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL + diff --git a/src/js/fa-icons.js b/src/js/fa-icons.js index 58220ad9b..21576a1ce 100644 --- a/src/js/fa-icons.js +++ b/src/js/fa-icons.js @@ -26,8 +26,13 @@ let faIconsInit = function(root) { const icons = (root || document).querySelectorAll('.fa-icon'); for ( const icon of icons ) { - if ( icon.childElementCount !== 0 ) { continue; } - const name = icon.textContent; + if ( + icon.firstChild === null || + icon.firstChild.nodeType !== 3 + ) { + continue; + } + const name = icon.firstChild.nodeValue; const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); svg.classList.add('fa-icon_' + name); const use = document.createElementNS('http://www.w3.org/2000/svg', 'use'); @@ -35,12 +40,11 @@ let faIconsInit = function(root) { use.setAttribute('href', href); use.setAttribute('xlink:href', href); svg.appendChild(use); - icon.textContent = ''; - icon.appendChild(svg); + icon.replaceChild(svg, icon.firstChild); if ( icon.classList.contains('fa-icon-badged') ) { const badge = document.createElement('span'); badge.className = 'fa-icon-badge'; - icon.appendChild(badge); + icon.insertBefore(badge, icon.firstChild.nextSibling); } } }; diff --git a/src/js/popup.js b/src/js/popup.js index 16badf437..61f6918bf 100644 --- a/src/js/popup.js +++ b/src/js/popup.js @@ -466,17 +466,17 @@ var renderPopup = function() { // Report blocked popup count on badge total = popupData.popupBlockedCount; - uDom.nodeFromSelector('#no-popups > span.badge') + uDom.nodeFromSelector('#no-popups > span.fa-icon-badge') .textContent = total ? total.toLocaleString() : ''; // Report large media count on badge total = popupData.largeMediaCount; - uDom.nodeFromSelector('#no-large-media > span.badge') + uDom.nodeFromSelector('#no-large-media > span.fa-icon-badge') .textContent = total ? total.toLocaleString() : ''; // Report remote font count on badge total = popupData.remoteFontCount; - uDom.nodeFromSelector('#no-remote-fonts > span.badge') + uDom.nodeFromSelector('#no-remote-fonts > span.fa-icon-badge') .textContent = total ? total.toLocaleString() : ''; // https://github.com/chrisaljoudi/uBlock/issues/470 @@ -669,14 +669,14 @@ var onPopupMessage = function(data) { switch ( data.what ) { case 'domSurveyFinalReport': let count = data.affectedElementCount || ''; - uDom.nodeFromSelector('#no-cosmetic-filtering > span.badge') + uDom.nodeFromSelector('#no-cosmetic-filtering > span.fa-icon-badge') .textContent = typeof count === 'number' ? count.toLocaleString() : count; count = data.scriptCount || ''; - uDom.nodeFromSelector('#no-scripting > span.badge') + uDom.nodeFromSelector('#no-scripting > span.fa-icon-badge') .textContent = typeof count === 'number' ? - count.toLocaleString() : + (count < 100 ? count.toLocaleString() : '99+') : count; break; } diff --git a/src/popup.html b/src/popup.html index 0fd128f08..9f0add11e 100644 --- a/src/popup.html +++ b/src/popup.html @@ -5,28 +5,29 @@ + uBlock Origin -    +
   
-

+

power-off

- - - - + bolt + eye-dropper + list-alt + sliders-h

 

 

?

-
+
sync-alt

 

@@ -34,11 +35,11 @@

 

 

- - - - - + copy + film + eye-slash + font + code
@@ -49,7 +50,7 @@
-
+
lockeraser
@@ -60,6 +61,7 @@
+