From de56cfe351cdae0a359efdda407bf35dcc4d9212 Mon Sep 17 00:00:00 2001 From: Raymond Hill Date: Wed, 26 Dec 2018 09:54:13 -0500 Subject: [PATCH] Revert to Fontawesome 4.7 icons Found out Fonteawesome 5 is a different project than former Fontawesome (of which 4.7 is latest). See https://github.com/uBlockOrigin/uBlock-issues/issues/249#issuecomment-448587658 --- src/cloud-ui.html | 6 +- src/css/fa-icons.css | 74 ++++++++++++++---------- src/css/logger-ui.css | 23 ++++++-- src/css/user-rules.css | 6 +- src/hosts-files.html | 2 +- src/img/fontawesome/fontawesome-defs.svg | 64 ++++++++++---------- src/js/fa-icons.js | 28 +++++---- src/logger-ui.html | 6 +- src/popup.html | 10 ++-- src/user-rules.html | 4 +- 10 files changed, 124 insertions(+), 99 deletions(-) diff --git a/src/cloud-ui.html b/src/cloud-ui.html index ed97d53..8dd5dfa 100644 --- a/src/cloud-ui.html +++ b/src/cloud-ui.html @@ -5,10 +5,10 @@ - + - - + +

cog
diff --git a/src/css/fa-icons.css b/src/css/fa-icons.css index f1ee049..a45c7ff 100644 --- a/src/css/fa-icons.css +++ b/src/css/fa-icons.css @@ -3,10 +3,12 @@ background-color: transparent; border: 0; display: inline-flex; - justify-content: flex-start; + justify-content: center; margin: 0; padding: 0.1em; position: relative; + user-select: none; + -webkit-user-select: none; } .fa-icon > * { pointer-events: none; @@ -44,49 +46,61 @@ width: 1em; } .fa-icon > .fa-icon_cloud-download-alt, -.fa-icon > .fa-icon_cloud-upload-alt { - width: calc(1em * 640 / 512); +.fa-icon > .fa-icon_cloud-upload-alt, +.fa-icon > .fa-icon_eraser { + width: calc(1em * 1920 / 1792); } -.fa-icon > .fa-icon_exclamation-triangle, -.fa-icon > .fa-icon_home, +.fa-icon > .fa-icon_exclamation-triangle { + width: calc(1em * 1794 / 1792); + } +.fa-icon > .fa-icon_list-alt, +.fa-icon > .fa-icon_reply, +.fa-icon > .fa-icon_reply-all, +.fa-icon > .fa-icon_th { + width: calc(1em * 1792 / 1792); + } +.fa-icon > .fa-icon_spinner { + width: calc(1em * 1728 / 1792); + } +.fa-icon > .fa-icon_download, .fa-icon > .fa-icon_puzzle-piece, -.fa-icon > .fa-icon_reply-all { - width: calc(1em * 576 / 512); +.fa-icon > .fa-icon_search-minus, +.fa-icon > .fa-icon_search-plus, +.fa-icon > .fa-icon_unlink { + width: calc(1em * 1664 / 1792); + } +.fa-icon > .fa-icon_home { + width: calc(1em * 1612 / 1792); } .fa-icon > .fa-icon_clock, .fa-icon > .fa-icon_cog, -.fa-icon > .fa-icon_download, -.fa-icon > .fa-icon_eraser, -.fa-icon > .fa-icon_filter, .fa-icon > .fa-icon_info-circle, -.fa-icon > .fa-icon_list-alt, .fa-icon > .fa-icon_power-off, .fa-icon > .fa-icon_question-circle, -.fa-icon > .fa-icon_reply, -.fa-icon > .fa-icon_search-minus, -.fa-icon > .fa-icon_search-plus, -.fa-icon > .fa-icon_spinner, -.fa-icon > .fa-icon_sync-alt, -.fa-icon > .fa-icon_th, -.fa-icon > .fa-icon_th-list, -.fa-icon > .fa-icon_unlink { - width: calc(1em * 512 / 512); +.fa-icon > .fa-icon_refresh { + width: calc(1em * 1536 / 1792); + } +.fa-icon > .fa-icon_arrow-left { + width: calc(1em * 1472 / 1792); + } +.fa-icon > .fa-icon_filter { + width: calc(1em * 1410 / 1792); } -.fa-icon > .fa-icon_arrow-left, -.fa-icon > .fa-icon_arrow-right, -.fa-icon > .fa-icon_lock, .fa-icon > .fa-icon_plus, -.fa-icon > .fa-icon_unlock, -.fa-icon > .fa-icon_trash-alt { - width: calc(1em * 448 / 512); +.fa-icon > .fa-icon_trash-o { + width: calc(1em * 1408 / 1792); } .fa-icon > .fa-icon_times { - width: calc(1em * 352 / 512); + width: calc(1em * 1188 / 1792); + } +.fa-icon > .fa-icon_lock, +.fa-icon > .fa-icon_unlock { + width: calc(1em * 1152 / 1792); } .fa-icon > .fa-icon_angle-up, -.fa-icon > .fa-icon_angle-double-up { - width: calc(1em * 320 / 512); +.fa-icon > .fa-icon_double-angle-up { + width: calc(1em * 998 / 1792); } .fa-icon > .fa-icon_ellipsis-v { - width: calc(1em * 192 / 512); + width: calc(1em * 384 / 1792); } diff --git a/src/css/logger-ui.css b/src/css/logger-ui.css index 504fb9f..a28b3b1 100644 --- a/src/css/logger-ui.css +++ b/src/css/logger-ui.css @@ -116,7 +116,7 @@ input:focus { width: 4.6em; } #content table > colgroup > col:nth-of-type(2) { - width: 30%; + width: 25%; } #content table > colgroup > col:nth-of-type(3) { width: 2.2em; @@ -125,7 +125,7 @@ input:focus { width: 5.4em; } #content table > colgroup > col:nth-of-type(5) { - width: calc(100% - 4.6em - 30% - 2.2em - 5.4em - 1.8em); + width: calc(100% - 4.6em - 25% - 2.2em - 5.4em - 1.8em); } #content table > colgroup > col:nth-of-type(6) { width: 1.8em; @@ -185,11 +185,22 @@ body.compactView #content tr:not(.vExpanded) td { #content table tr[data-tabid="-1"] td:nth-of-type(2):not([colspan]) { position: relative; } -#content table tr[data-tabid="-1"] td:nth-of-type(2):not([colspan])::after { - content: '\2B1A'; +#content table tr td:nth-of-type(3) { + position: relative; + } +/* visual for tabless network requests */ +#content table tr[data-tabid="-1"] td:nth-of-type(3)::before { + border: 5px solid #bbb; + border-bottom: 0; + border-top: 0; + bottom: 0; + content: '\00a0'; + left: 0; position: absolute; - left: 0.2em; -} + right: 0; + top: 0; + width: calc(100% - 10px); + } #content table tr.tab:not(.canMtx) { opacity: 0.3; } diff --git a/src/css/user-rules.css b/src/css/user-rules.css index 4bce53b..8ec0273 100644 --- a/src/css/user-rules.css +++ b/src/css/user-rules.css @@ -42,11 +42,9 @@ html { fill: #888; } -body[dir="ltr"] #revertButton > span:nth-of-type(3), -body[dir="rtl"] #revertButton > span:nth-of-type(2), -body[dir="ltr"] #commitButton > span:nth-of-type(2), +body[dir="ltr"] #revertButton > span:nth-of-type(2), body[dir="rtl"] #commitButton > span:nth-of-type(1) { - display: none; + transform: scale(-1, 1); } #revertButton, #commitButton, diff --git a/src/hosts-files.html b/src/hosts-files.html index 8a623b7..b3aac5e 100644 --- a/src/hosts-files.html +++ b/src/hosts-files.html @@ -51,7 +51,7 @@ ​home​trash-alt​trash-o​info-circle​unlock​​ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/js/fa-icons.js b/src/js/fa-icons.js index b39665a..2f8dfaf 100644 --- a/src/js/fa-icons.js +++ b/src/js/fa-icons.js @@ -23,24 +23,28 @@ /******************************************************************************/ -let faIconsInit = function(root) { - let icons = (root || document).querySelectorAll('.fa-icon'); - for ( let icon of icons ) { - if ( icon.childElementCount !== 0 ) { continue; } - let name = icon.textContent; - let svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); +const faIconsInit = function(root) { + const icons = (root || document).querySelectorAll('.fa-icon'); + for ( const icon of icons ) { + 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); - let use = document.createElementNS('http://www.w3.org/2000/svg', 'use'); - let href = '/img/fontawesome/fontawesome-defs.svg#' + name; + const use = document.createElementNS('http://www.w3.org/2000/svg', 'use'); + const href = '/img/fontawesome/fontawesome-defs.svg#' + name; 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') ) { - let badge = document.createElement('span'); + const badge = document.createElement('span'); badge.className = 'fa-icon-badge'; - icon.appendChild(badge); + icon.insertBefore(badge, icon.firstChild.nextSibling); } } }; diff --git a/src/logger-ui.html b/src/logger-ui.html index 27b6b19..1057a90 100644 --- a/src/logger-ui.html +++ b/src/logger-ui.html @@ -18,11 +18,11 @@
- angle-double-up + double-angle-up times eraser filter @@ -50,7 +50,7 @@  ∗
- sync-alt + refresh
diff --git a/src/popup.html b/src/popup.html index d8c063c..94368f6 100644 --- a/src/popup.html +++ b/src/popup.html @@ -26,7 +26,7 @@ reply
- sync-alt + refresh
reply-all @@ -68,10 +68,10 @@ diff --git a/src/user-rules.html b/src/user-rules.html index 0a58dca..9e5528d 100644 --- a/src/user-rules.html +++ b/src/user-rules.html @@ -29,13 +29,13 @@

- +

- +