From 6bc22ab4ba7a5fb47f3cc297c160211ab35b6645 Mon Sep 17 00:00:00 2001
From: Raymond Hill <rhill@raymondhill.net>
Date: Wed, 19 Dec 2018 16:21:23 -0500
Subject: [PATCH] Convert uBO's svg-based icon into a stylable svg symbol-based
 icon

---
 src/css/common.css      | 28 ++++++++++++++++++++++++++++
 src/img/ublock-defs.svg | 27 +++++++++++++++++++++++++++
 src/img/ublock-icon.svg |  4 ----
 src/js/logger-ui.js     | 10 ++++++----
 src/logger-ui.html      |  2 +-
 5 files changed, 62 insertions(+), 9 deletions(-)
 create mode 100644 src/img/ublock-defs.svg
 delete mode 100644 src/img/ublock-icon.svg

diff --git a/src/css/common.css b/src/css/common.css
index a483215d8..c6499ef5a 100644
--- a/src/css/common.css
+++ b/src/css/common.css
@@ -79,3 +79,31 @@ body[dir="rtl"] button.custom.iconifiable > .fa {
         display: none;
         }
     }
+
+.ubo-icon {
+    align-items: center;
+    background-color: transparent;
+    border: 0;
+    display: inline-flex;
+    justify-content: center;
+    margin: 0;
+    padding: 0.1em;
+    position: relative;
+    }
+.ubo-icon > * {
+    pointer-events: none;
+    }
+.ubo-icon.disabled,
+.disabled > .ubo-icon,
+.ubo-icon[disabled],
+[disabled] > .ubo-icon {
+    color: #000;
+    fill: #000;
+    opacity: 0.25;
+    stroke: #888;
+    pointer-events: none;
+    }
+.ubo-icon > svg {
+    height: 1em;
+    width: 1em;
+    }
diff --git a/src/img/ublock-defs.svg b/src/img/ublock-defs.svg
new file mode 100644
index 000000000..dbc59a388
--- /dev/null
+++ b/src/img/ublock-defs.svg
@@ -0,0 +1,27 @@
+<!--
+
+    uBlock Origin - a browser extension to block requests.
+    Copyright (C) 2018-present Raymond Hill
+
+    This program is free software: you can redistribute it and/or modify
+    it under the terms of the GNU General Public License as published by
+    the Free Software Foundation, either version 3 of the License, or
+    (at your option) any later version.
+
+    This program is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU General Public License for more details.
+
+    You should have received a copy of the GNU General Public License
+    along with this program.  If not, see {http://www.gnu.org/licenses/}.
+
+    Home: https://github.com/gorhill/uBlock
+
+-->
+
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display: none;">
+    <defs>
+    <symbol id="ubo-solid" viewBox="0 0 128 128"><path d="M 64,0 C 40,16 32,16 8,16 c 0,80 0,80 56,112 56,-32 56,-32 56,-112 -24,0 -32,0 -56,-16 z m -32,40 8,0 0,24 c 0,7 1,8 8,8 7,0 8,-1 8,-8 l 0,-4 0,-20 8,0 0,4.054688 C 67.350916,41.522675 71.50202,40 76,40 86.998316,40 96,49.001684 96,60 96,70.998316 86.998316,80 76,80 70.442478,80 65.399719,77.696984 61.765625,74.003906 59.318213,78.076852 54.812381,80 48,80 37,80 32,75 32,64 l 0,-24 z m 44,8 c -6.674796,0 -12,5.325204 -12,12 0,6.674796 5.325204,12 12,12 6.674796,0 12,-5.325204 12,-12 0,-6.674796 -5.325204,-12 -12,-12 z"/></symbol>
+    </defs>
+</svg>
diff --git a/src/img/ublock-icon.svg b/src/img/ublock-icon.svg
deleted file mode 100644
index b297a5436..000000000
--- a/src/img/ublock-icon.svg
+++ /dev/null
@@ -1,4 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<svg width="128" height="128" viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg">
-    <path d="M 64,0 C 40,16 32,16 8,16 c 0,80 0,80 56,112 56,-32 56,-32 56,-112 -24,0 -32,0 -56,-16 z m -32,40 8,0 0,24 c 0,7 1,8 8,8 7,0 8,-1 8,-8 l 0,-4 0,-20 8,0 0,4.054688 C 67.350916,41.522675 71.50202,40 76,40 86.998316,40 96,49.001684 96,60 96,70.998316 86.998316,80 76,80 70.442478,80 65.399719,77.696984 61.765625,74.003906 59.318213,78.076852 54.812381,80 48,80 37,80 32,75 32,64 l 0,-24 z m 44,8 c -6.674796,0 -12,5.325204 -12,12 0,6.674796 5.325204,12 12,12 6.674796,0 12,-5.325204 12,-12 0,-6.674796 -5.325204,-12 -12,-12 z"/>
-</svg>
diff --git a/src/js/logger-ui.js b/src/js/logger-ui.js
index 0d9e25ad0..2014635e3 100644
--- a/src/js/logger-ui.js
+++ b/src/js/logger-ui.js
@@ -1729,9 +1729,11 @@ const popupManager = (function() {
         document.addEventListener('tabIdChanged', onTabIdChanged);
 
         setTabId(realTabId);
+        uDom.nodeFromId('showpopup').classList.add('active');
     };
 
     const toggleOff = function() {
+        uDom.nodeFromId('showpopup').classList.remove('active');
         document.removeEventListener('tabIdChanged', onTabIdChanged);
         uDom.nodeFromId('inspectors').classList.remove('popupOn');
         popup.removeEventListener('load', onLoad);
@@ -1743,9 +1745,6 @@ const popupManager = (function() {
     };
 
     const exports = {
-        toggleOn: function() {
-            void (realTabId === 0 ? toggleOn() : toggleOff());
-        },
         toggleOff: function() {
             if ( realTabId !== 0 ) {
                 toggleOff();
@@ -1757,6 +1756,10 @@ const popupManager = (function() {
         get: function() { return realTabId || 0; }
     });
 
+    uDom('#showpopup').on('click', ( ) => {
+        void (realTabId === 0 ? toggleOn() : toggleOff());
+    });
+
     return exports;
 })();
 
@@ -1820,7 +1823,6 @@ readLogBuffer();
 
 uDom('#pageSelector').on('change', pageSelectorChanged);
 uDom('#refresh').on('click', reloadTab);
-uDom('#showpopup').on('click', popupManager.toggleOn);
 
 uDom('#netInspector .vCompactToggler').on('click', toggleVCompactView);
 uDom('#clean').on('click', cleanBuffer);
diff --git a/src/logger-ui.html b/src/logger-ui.html
index 072ecad4e..40c0fc6d0 100644
--- a/src/logger-ui.html
+++ b/src/logger-ui.html
@@ -21,7 +21,7 @@
     </select>
     <span id="refresh" class="button fa-icon disabled needdom" data-i18n-title="loggerReloadTip">refresh</span>
     <span id="showdom" class="button fa-icon disabled needdom" data-i18n-title="loggerDomInspectorTip">code</span>
-    <span id="showpopup" class="button fa-icon disabled needdom" data-i18n-title="loggerPopupPanelTip"><img src="/img/ublock-icon.svg"></span>
+    <span id="showpopup" class="button ubo-icon disabled needdom" data-i18n-title="loggerPopupPanelTip"><svg><use href="/img/ublock-defs.svg#ubo-solid"></use></svg></span>
     <a id="info" class="button fa-icon" href="https://github.com/gorhill/uBlock/wiki/The-logger" target="_blank" data-i18n-title="loggerInfoTip">info-circle</a>
 </div>