From 5df138042608da8ea33d213257d2aa5a5d515ee5 Mon Sep 17 00:00:00 2001
From: Rob Garrison <wowmotty@gmail.com>
Date: Sat, 13 Oct 2018 17:47:27 -0500
Subject: [PATCH] Rearrange HTML & remove extra JS

---
 popup.html      | 34 +++++++++++++++++-----------------
 popup/popup.css | 41 ++++++++++++++++++++---------------------
 popup/popup.js  | 22 ----------------------
 3 files changed, 37 insertions(+), 60 deletions(-)

diff --git a/popup.html b/popup.html
index d54ba362..675286bd 100644
--- a/popup.html
+++ b/popup.html
@@ -217,26 +217,26 @@
   </div>
 
   <div id="popup-manage-wrapper" class="action-wrapper truegray-alpha-1">
-    <button id="popup-manage-button" class="classicUI-el" i18n-text="openManage" data-href="manage.html" i18n-title="popupManageTooltip"></button>
-    <a id="popup-manage-icon" href="#" class="iconUI-el" data-href="manage.html" i18n-title="popupManageTooltip" tabindex="0">
-      <svg class="svg-icon manager" viewBox="0 0 24 24" stroke="#666" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+    <button id="popup-manage-button" data-href="manage.html" i18n-title="popupManageTooltip">
+      <span class="classicUI-el" i18n-text="openManage"></span>
+      <svg class="iconUI-el svg-icon manager" viewBox="0 0 24 24" stroke="#666" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
         <line x1="4" y1="21" x2="4" y2="14"/><line x1="4" y1="10" x2="4" y2="3"/><line x1="12" y1="21" x2="12" y2="12"/><line x1="12" y1="8" x2="12" y2="3"/><line x1="20" y1="21" x2="20" y2="16"/><line x1="20" y1="12" x2="20" y2="3"/><line x1="1" y1="14" x2="7" y2="14"/><line x1="9" y1="8" x2="15" y2="8"/><line x1="17" y1="16" x2="23" y2="16"/>
       </svg>
-    </a>
+    </button>
   </div>
   <div id="popup-options-wrapper" class="action-wrapper truegray-alpha-1">
-    <button id="popup-options-button" class="classicUI-el" i18n-text="openOptionsPopup"></button>
-    <a id="popup-options-icon" href="#" class="iconUI-el" i18n-title="openOptionsPopup" tabindex="0">
-      <svg class="svg-icon options" viewBox="0 0 16 16">
+    <button id="popup-options-button" i18n-title="openOptionsPopup">
+      <span class="classicUI-el" i18n-text="openOptionsPopup"></span>
+      <svg class="iconUI-el svg-icon options" viewBox="0 0 16 16">
         <path fill-rule="evenodd" d="M8,0C7.6,0,7.3,0,6.9,0.1v2.2C6.1,2.5,5.4,2.8,4.8,3.2L3.2,1.6c-0.6,0.4-1.1,1-1.6,1.6l1.6,1.6C2.8,5.4,2.5,6.1,2.3,6.9H0.1C0,7.3,0,7.6,0,8c0,0.4,0,0.7,0.1,1.1h2.2c0.1,0.8,0.4,1.5,0.9,2.1l-1.6,1.6c0.4,0.6,1,1.1,1.6,1.6l1.6-1.6c0.6,0.4,1.4,0.7,2.1,0.9v2.2C7.3,16,7.6,16,8,16c0.4,0,0.7,0,1.1-0.1v-2.2c0.8-0.1,1.5-0.4,2.1-0.9l1.6,1.6c0.6-0.4,1.1-1,1.6-1.6l-1.6-1.6c0.4-0.6,0.7-1.4,0.9-2.1h2.2C16,8.7,16,8.4,16,8c0-0.4,0-0.7-0.1-1.1h-2.2c-0.1-0.8-0.4-1.5-0.9-2.1l1.6-1.6c-0.4-0.6-1-1.1-1.6-1.6l-1.6,1.6c-0.6-0.4-1.4-0.7-2.1-0.9V0.1C8.7,0,8.4,0,8,0z M8,4.3c2.1,0,3.7,1.7,3.7,3.7c0,0,0,0,0,0c0,2.1-1.7,3.7-3.7,3.7c0,0,0,0,0,0c-2.1,0-3.7-1.7-3.7-3.7c0,0,0,0,0,0C4.3,5.9,5.9,4.3,8,4.3C8,4.3,8,4.3,8,4.3z"/>
       </svg>
-    </a>
+    </button>
   </div>
   <div id="find-styles-wrapper" class="action-wrapper truegray-alpha-1">
     <div id="find-styles">
-      <a id="find-styles-link" class="classicUI-el" i18n-text="findStyles" i18n-title="findStylesForSite" tabindex="0"></a>
-      <a id="find-styles-icon" href="#" class="iconUI-el" i18n-title="findStylesForSite" tabindex="0">
-        <svg  class="svg-icon search" viewBox="0 0 24 24">
+      <a id="find-styles-link" i18n-title="findStylesForSite" tabindex="0">
+        <span class="classicUI-el" i18n-text="findStyles"></span>
+        <svg  class="iconUI-el svg-icon search" viewBox="0 0 24 24">
           <path d="M18,13v7H4V6h5.02C9.07,5.29,9.24,4.62,9.5,4H2v18h18v-7L18,13z M16.5,18h-11l2.75-3.53l1.96,2.36l2.75-3.54L16.5,18z    M19.3,8.89C19.74,8.19,20,7.38,20,6.5C20,4.01,17.99,2,15.5,2S11,4.01,11,6.5s2.01,4.5,4.49,4.5c0.88,0,1.7-0.26,2.39-0.7   L21,13.42L22.42,12L19.3,8.89z M15.5,9C14.12,9,13,7.88,13,6.5S14.12,4,15.5,4S18,5.12,18,6.5S16.88,9,15.5,9z"/>
         </svg>
       </a>
@@ -265,15 +265,15 @@
     </div>
   </div>
   <div id="popup-wiki-wrapper" class="action-wrapper truegray-alpha-1">
-    <button id="popup-wiki-button" class="classicUI-el" i18n-text="linkStylusWiki" i18n-title="linkGetHelp" data-href="https://github.com/openstyles/stylus/wiki"></button>
-    <a id="popup-wiki-icon" class="iconUI-el" href="#" i18n-title="linkGetHelp" data-href="https://github.com/openstyles/stylus/wiki" tabindex="0">
-      <svg class="svg-icon wiki" viewBox="0 0 24 24">
+    <button id="popup-wiki-button" i18n-title="linkGetHelp" data-href="https://github.com/openstyles/stylus/wiki">
+      <span class="classicUI-el" i18n-text="linkStylusWiki"></span>
+      <svg class="iconUI-el svg-icon wiki" viewBox="0 0 24 24">
         <g fill-rule="evenodd" clip-rule="evenodd">
           <path d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm0 18a8 8 0 1 1 0-16 8 8 0 0 1 0 16z"/>
           <path d="M11.8 6.7a3.4 3.4 0 0 0-3.3 2.2l1.5.8s.3-.8.9-1.2c.5-.4 1.6-.6 2.2.1.7 1-.2 1.6-1.1 2.7-1 1.2-1 3.7-1 3.7h2s.1-2.3 1-3.4c.6-.7 1.5-1.3 1.5-2.5s-1.2-2.4-3.7-2.4zM11 16h2v2h-2z"/>
         </g>
       </svg>
-    </a>
+    </button>
   </div>
   <div id="disable-all-wrapper" class="action-wrapper truegray-alpha-1">
     <div class="main-controls">
@@ -301,8 +301,8 @@
   <div id="write-style-wrapper" class="truegray-alpha-1">
     <div id="write-style">
       <span id="write-style-for" i18n-text="writeStyleFor">
-        <div id="popup-write-style-icon"  i18n-title="writeStyleForInfo">
-		  <svg class="svg-icon write-style iconUI-el" viewBox="0 0 1024 1024">
+        <div id="popup-write-style-icon" i18n-title="writeStyleForInfo">
+          <svg class="svg-icon write-style iconUI-el" viewBox="0 0 1024 1024">
             <path d="M 920,920 H 104 V 104 l 344,0 V 0 H 0 V 1024 H 1024 V 576 H 920 Z"/>
             <path d="M1088 448M256 593.152 256 768l179.712 0L1024 182.784l-180.352-179.456L256 593.152zM843.008 276.352l-407.296 407.296L345.152 593.152l407.296-407.296L843.008 276.352zM933.504 185.856l-45.248 45.248-90.496-90.496 45.248-45.248L933.504 185.856z"/>
           </svg>
diff --git a/popup/popup.css b/popup/popup.css
index ff685797..3d6b90c5 100644
--- a/popup/popup.css
+++ b/popup/popup.css
@@ -196,26 +196,20 @@ body:not(.disabled) .toggle-all-on {
   opacity: 1 !important;
 }
 
-#popup-manage-icon,
-#popup-options-icon,
-#popup-wiki-icon,
-#disable-all-icon,
-#popup-confirm-icon {
+.iconUI button {
+  cursor: pointer;
+}
+
+.iconUI button .svg-icon {
   display: inline-flex;
-  height: 30px;
-  width: 30px;
+  height: 20px;
+  width: 20px;
   align-items: center;
   justify-content: center;
 }
 
-#popup-wiki-icon .svg-icon,
-#find-styles-icon .svg-icon {
-  height: 20px;
-  width: 20px;
-}
-
-#find-inline-icon {
-  display: inline-flex;
+.iconUI button:hover .svg-icon {
+  fill: var(--black);
 }
 
 #popup-confirm-icon {
@@ -223,12 +217,6 @@ body:not(.disabled) .toggle-all-on {
   margin: -5px 0;
 }
 
-#popup-options-icon .svg-icon,
-#popup-confirm-icon .svg-icon {
-  height: 18px;
-  width: 18px;
-}
-
 #disable-all-icon .svg-icon {
   height: 20px;
   width: 20px;
@@ -270,6 +258,8 @@ a[target="_blank"] .svg-icon.config {
 #find-styles-link,
 #write-style-for {
   font-size: 0;
+  display: inline-flex;
+  align-items: center;
 }
 
 #write-style-wrapper {
@@ -416,6 +406,15 @@ a:hover .svg-icon.toggled-off path:nth-child(3) {
   padding: 0;
 }
 
+.iconUI button {
+  border: 0;
+  background: none;
+}
+.iconUI button:hover {
+  background: none;
+
+}
+
 body.disabled .style-name {
   text-decoration: line-through;
 }
diff --git a/popup/popup.js b/popup/popup.js
index 221afa91..6d5ad757 100644
--- a/popup/popup.js
+++ b/popup/popup.js
@@ -93,14 +93,6 @@ function initPopup() {
     document.body.classList.toggle('disabled', this.checked);
   };
 
-  $('#disable-all-icon').onclick = () => {
-    $('#disableAll').click();
-  };
-
-  $('#find-styles-icon').onclick = () => {
-    $('#find-styles-link').click();
-  };
-
   setupLivePrefs();
 
   Object.assign($('#popup-manage-button'), {
@@ -109,12 +101,6 @@ function initPopup() {
     oncontextmenu: handleEvent.openManager,
   });
 
-  Object.assign($('#popup-manage-icon'), {
-    onclick: handleEvent.openManager,
-    onmouseup: handleEvent.openManager,
-    oncontextmenu: handleEvent.openManager,
-  });
-
   $('#find-external-icon').onclick = event => {
     event.preventDefault();
     $('input.toggle-inline').click()
@@ -130,16 +116,8 @@ function initPopup() {
     window.close();
   };
 
-  $('#popup-options-icon').onclick = event => {
-    event.preventDefault();
-    chrome.runtime.openOptionsPage();
-    window.close();
-  };
-
   $('#popup-wiki-button').onclick = handleEvent.openURLandHide;
 
-  $('#popup-wiki-icon').onclick = handleEvent.openURLandHide;
-
   if (!tabURL) {
     document.body.classList.add('blocked');
     document.body.insertBefore(template.unavailableInfo, document.body.firstChild);