From 6046e3e5b068887beeaba9b29deeb26e2f58d15a Mon Sep 17 00:00:00 2001
From: Federico Brigante <bfred-it@users.noreply.github.com>
Date: Mon, 13 Feb 2017 02:02:48 +0900
Subject: [PATCH] Add explicit options icon

---
 icon-options.svg |  1 +
 popup.css        | 37 ++++++++++++++++++-------------------
 popup.js         | 39 ++++++++++++++++++---------------------
 3 files changed, 37 insertions(+), 40 deletions(-)
 create mode 100644 icon-options.svg

diff --git a/icon-options.svg b/icon-options.svg
new file mode 100644
index 0000000..a421a2c
--- /dev/null
+++ b/icon-options.svg
@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill="#888" d="M22.2 14.4l-1.2-.7c-1.3-.8-1.3-2.7 0-3.5l1.2-.7c1-.6 1.3-1.8.7-2.7l-1-1.7c-.6-1-1.8-1.3-2.7-.7l-1.2.7c-1.3.8-3-.2-3-1.7V2c0-1.1-.9-2-2-2h-2C9.9 0 9 .9 9 2v1.3C9 4.8 7.3 5.8 6 5l-1.2-.6c-1-.6-2.2-.2-2.7.7l-1 1.7c-.5 1-.2 2.2.7 2.8l1.2.7c1.3.7 1.3 2.7 0 3.4l-1.2.7c-1 .6-1.3 1.8-.7 2.7l1 1.7c.6 1 1.8 1.3 2.7.7l1.2-.6c1.3-.8 3 .2 3 1.7V22c0 1.1.9 2 2 2h2c1.1 0 2-.9 2-2v-1.3c0-1.5 1.7-2.5 3-1.7l1.2.7c1 .6 2.2.2 2.7-.7l1-1.7c.5-1.1.2-2.3-.7-2.9zM12 16c-2.2 0-4-1.8-4-4s1.8-4 4-4 4 1.8 4 4-1.8 4-4 4z"/></svg>
\ No newline at end of file
diff --git a/popup.css b/popup.css
index 0db6413..7b474da 100644
--- a/popup.css
+++ b/popup.css
@@ -49,8 +49,7 @@ input {
   list-style: none;
 }
 .ext {
-  overflow: hidden;
-  text-overflow: ellipsis;
+  display: flex;
   white-space: nowrap;
   font-size: 1.2em;
   line-height: 1.8;
@@ -68,28 +67,28 @@ input {
 .ext.disabled + .disabled {
   margin-top: 0;
 }
-.ext:hover {
-  background-color: #ecf0f1;
-  cursor: pointer;
-}
-.extIcon {
-  margin-right: 0.3em;
-}
-.extIcon a{
-  cursor: default;
+.extName {
+  flex-grow: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
-.extIcon img {
+.ext img {
   width: 16px;
   height: 16px;
-  cursor: default;
   vertical-align: -3px;
 }
-a .hasOpt {
-  overflow: hidden;
-  transition-duration: 0.8s;
-  transition-property: transform;
+.extIcon {
+  margin-right: 0.3em;
+}
+.extOptions {
+  padding: 0 0.3em;
+  opacity: 0.1;
+}
+.ext > *:hover {
+  background-color: #ecf0f1;
   cursor: pointer;
 }
-.hasOpt:hover {
-  transform: rotate(360deg);
+*:hover + .extOptions,
+.extOptions:hover {
+  opacity: 1;
 }
diff --git a/popup.js b/popup.js
index 340968b..c97308a 100644
--- a/popup.js
+++ b/popup.js
@@ -4,7 +4,7 @@ const getI18N = chrome.i18n.getMessage;
 const searchText = $('#searchext');
 
 // disable the default context menu
-window.oncontextmenu = () => false;
+eul.on('contextmenu', () => false);
 
 searchText.attr('placeholder', getI18N('searchTxt')).focus();
 
@@ -56,9 +56,8 @@ cme.getAll(ets => {
 	$('#pbgjpgbpljobkekbhnnmlikbbfhbhmem').remove();
 });
 
-$('body').on('click', 'li.ext', function (e) {
-	const that = $(this);
-	const extSel = that.find('.extName');
+$('body').on('click', '.extName', function (e) {
+	const extSel = $(this);
 	const eid = extSel.attr('data-id');
 	cme.get(eid, e => {
 		extSel.parent().remove();
@@ -72,17 +71,11 @@ $('body').on('click', 'li.ext', function (e) {
 			});
 		}
 	});
-}).on('click', 'li .extIcon a', function (e) {
-	const that = $(this);
-	const href = that.attr('href');
-	if (href !== '#') {
-		chrome.tabs.create({url: href});
-	}
-}).on('mouseup', 'li.ext', function (e) {
+}).on('click', '.extOptions', e => {
+	chrome.tabs.create({url: e.target.href});
+}).on('mouseup', '.extName', e => {
 	if (e.which == 3) {
-		const that = $(this);
-		const eid = that.find('.extName').attr('data-id');
-		cme.uninstall(eid);
+		cme.uninstall(e.target.dataset.id);
 	}
 });
 
@@ -114,7 +107,7 @@ function getIcon(icons, size = 16) {
 				return false;
 			}
 			selectedIcon = icon.url;
-		})
+		});
 	}
 	return selectedIcon;
 }
@@ -122,13 +115,17 @@ function getIcon(icons, size = 16) {
 function createList(e, enabled) {
 	return `
 		<li class='ext ${enabled ? '' : 'disabled'}' id='${e.id}' data-name="${e.name.toLowerCase()}">
-			<span class='extIcon' title='${e.optionsUrl ? getI18N('openOpt') : ''}'>
-				<a href='${e.optionsUrl ? e.optionsUrl : ''}'><img
-					src='${getIcon(e.icons, 16)}'
-					class='${e.optionsUrl ? 'hasOpt' : ''}'
-				></a>
+			<span class='extName' data-id='${e.id}' title='${getI18N('toggleEnable')}'>
+				<img class='extIcon' src='${getIcon(e.icons, 16)}'>
+				${e.name}
 			</span>
-			<span class='extName' data-id='${e.id}' title='${getI18N('toggleEnable')}'>${e.name}</span>
+			${
+				e.optionsUrl ? `
+					<a class='extOptions' href='${e.optionsUrl}' title='${getI18N('openOpt')}'>
+						<img src="${chrome.extension.getURL('icon-options.svg')}">
+					</a>
+				` : ``
+			}
 		</li>
 	`;
 }