Popup related changes

5 files changed, 36 insertions, 58 deletions

diff --git a/src/css/common.css b/src/css/common.css
index 043555a..a8fa93c 100644
--- a/src/css/common.css
+++ b/src/css/common.css
@@ -35,8 +35,13 @@ body:not(.advancedUser) [data-tip]:hover:after {
     top: 110%;
     white-space: pre-line;
     z-index: 20;
-    animation: tooltip 0.8s;
-    -webkit-animation: tooltip 0.8s;
+    pointer-events: none;
+    opacity: 0;
+    }
+[data-tip]:hover::after {
+    opacity: 1;
+    -webkit-transition: opacity 0.2s 0.2s;
+    transition: opacity 0.2s 0.2s;
     }
 body[dir=rtl] [data-tip]:hover:after {
     text-align: right;
@@ -55,17 +60,6 @@ body[dir=rtl] [data-tip][data-tip-anchor="top"]:hover:after {
     right: -500%;
     }
 
-@keyframes tooltip {
-      0% { opacity: 0; }
-     85% { opacity: 0; }
-    100% { opacity: 1; }
-    }
-@-webkit-keyframes tooltip {
-      0% { opacity: 0; }
-     85% { opacity: 0; }
-    100% { opacity: 1; }
-    }
-
 .hiddenFileInput {
     visibility: hidden;
     width: 0;
diff --git a/src/css/popup.css b/src/css/popup.css
index 2d6956d..0303ced 100644
--- a/src/css/popup.css
+++ b/src/css/popup.css
@@ -20,9 +20,20 @@ a {
     color: inherit;
     text-decoration: none;
     }
-*:focus {
+:focus {
     outline: 0;
     }
+#gotoPrefs {
+    display: block;
+    margin: 0;
+    border: 0;
+    padding: 4px;
+    color: white;
+    font-weight: bold;
+    background-color: #444;
+    text-align: center;
+    cursor: pointer;
+    }
 #version {
     font-size: 11px;
     font-weight: normal;
@@ -202,7 +213,7 @@ body.dirty #refresh:hover {
     border-left: 1px solid white;
     color: #444;
     cursor: pointer;
-    text-align: center;    
+    text-align: center;
     width: 15%;
     }
 #dynamicFilteringContainer > div.isDomain > span:nth-of-type(1) {
diff --git a/src/js/element-picker.js b/src/js/element-picker.js
index 16cb525..ff67dc2 100644
--- a/src/js/element-picker.js
+++ b/src/js/element-picker.js
@@ -986,9 +986,6 @@ var startPicker = function(details) {
 
 localMessager.send({ what: 'elementPickerArguments' }, startPicker);
 
-// This triggers the hiding of the popover in Safari
-window.focus();
-
 /******************************************************************************/
 
 // https://www.youtube.com/watch?v=sociXdKnyr8
diff --git a/src/js/popup.js b/src/js/popup.js
index 7143a06..b0ae6ee 100644
--- a/src/js/popup.js
+++ b/src/js/popup.js
@@ -64,7 +64,7 @@ var cachePopupData = function(data) {
 
     if ( typeof data !== 'object' ) {
         return popupData;
-    } 
+    }
     popupData = data;
     scopeToSrcHostnameMap['.'] = popupData.pageHostname || '';
     var hostnameDict = popupData.hostnameDict;
@@ -163,8 +163,8 @@ var addDynamicFilterRow = function(des) {
 
     // Hacky? I couldn't figure a CSS recipe for this problem.
     // I do not want the left pane -- optional and hidden by defaut -- to
-    // dictate the height of the popup. The right pane dictates the height 
-    // of the popup, and the left pane will have a scrollbar if ever its 
+    // dictate the height of the popup. The right pane dictates the height
+    // of the popup, and the left pane will have a scrollbar if ever its
     // height is larger than what is available.
     if ( popupHeight === undefined ) {
         popupHeight = uDom('#panes > div:nth-of-type(1)').nodeAt(0).offsetHeight;
@@ -310,6 +310,7 @@ var renderPopup = function() {
     // Conditions for request log:
     // - `http` or `https` scheme
     uDom('#gotoLog').toggleClass('enabled', isHTTP);
+    uDom('#gotoLog').attr('href', 'devtools.html?tabId=' + popupData.tabId);
 
     // Conditions for element picker:
     // - `http` or `https` scheme
@@ -381,44 +382,19 @@ var toggleNetFilteringSwitch = function(ev) {
 
 /******************************************************************************/
 
-var gotoDashboard = function() {
-    messager.send({
-        what: 'gotoURL',
-        details: {
-            url: 'dashboard.html',
-            select: true,
-            index: -1
-        }
-    });
-};
-
-/******************************************************************************/
-
-var gotoDevTools = function() {
-    messager.send({
-        what: 'gotoURL',
-        details: {
-            url: 'devtools.html?tabId=' + popupData.tabId,
-            select: true,
-            index: -1
-        }
-    });
-};
-
-/******************************************************************************/
-
 var gotoPick = function() {
     messager.send({
         what: 'gotoPick',
         tabId: popupData.tabId
     });
-    window.open('','_self').close();
+
+    vAPI.closePopup();
 };
 
 /******************************************************************************/
 
-var gotoLink = function(ev) {
-    if (!ev.target.href) {
+var gotoURL = function(ev) {
+    if (!this.hasAttribute('href')) {
         return;
     }
 
@@ -427,11 +403,13 @@ var gotoLink = function(ev) {
     messager.send({
         what: 'gotoURL',
         details: {
-            url: ev.target.href,
+            url: this.getAttribute('href'),
             select: true,
             index: -1
         }
     });
+
+    vAPI.closePopup();
 };
 
 /******************************************************************************/
@@ -546,14 +524,14 @@ var reloadTab = function() {
 // from the main extension process to a specific auxiliary extension process:
 //
 // - broadcasting() is not an option given there could be a lot of tabs opened,
-//   and maybe even many frames within these tabs, i.e. unacceptable overhead 
+//   and maybe even many frames within these tabs, i.e. unacceptable overhead
 //   regardless of whether the popup is opened or not.
 //
 // - Modifying the messaging API is not an option, as this would require
 //   revisiting all platform-specific code to support targeted broadcasting,
 //   which who knows could be not so trivial for some platforms.
 //
-// A well done polling is a better anyways IMO, I prefer that data is pulled 
+// A well done polling is a better anyways IMO, I prefer that data is pulled
 // on demand rather than forcing the main process to assume a client may need
 // it and thus having to push it all the time unconditionally.
 
@@ -608,11 +586,9 @@ var getPopupData = function() {
 
 uDom.onLoad(function() {
     getPopupData();
-    uDom('h1,h2,h3,h4').on('click', gotoDashboard);
     uDom('#switch').on('click', toggleNetFilteringSwitch);
-    uDom('#gotoLog').on('click', gotoDevTools);
     uDom('#gotoPick').on('click', gotoPick);
-    uDom('a[href^=http]').on('click', gotoLink);
+    uDom('a[href]').on('click', gotoURL);
     uDom('#dfToggler').on('click', toggleDynamicFiltering);
     uDom('#refresh').on('click', reloadTab);
 });
diff --git a/src/popup.html b/src/popup.html
index 7beae72..568aff9 100644
--- a/src/popup.html
+++ b/src/popup.html
@@ -9,7 +9,7 @@
 </head>
 
 <body>
-<h4 title="popupTipDashboard"><span id="appname"></span><span id="version"></span></h4>
+<a href="dashboard.html" target="_blank" id="gotoPrefs" title="popupTipDashboard"><span id="appname"></span><span id="version"></span></a>
 <div id="panes">
     <div>
         <p id="switch" data-i18n-tip="popupPowerSwitchInfo"><span class="fa">&#xf011;</span></p>
@@ -18,7 +18,7 @@
         <p class="stats">
             <span data-i18n="popupBlockedOnThisPagePrompt"></span>&ensp;
             <span id="gotoPick" class="fa tool" data-i18n-tip="popupTipPicker" data-tip-anchor="top">&#xf1fb;</span>&ensp;
-            <span id="gotoLog" class="fa tool" data-i18n-tip="popupTipLog" data-tip-anchor="top">&#xf06e;</span>
+            <a href="#" target="_blank" id="gotoLog" class="fa tool" data-i18n-tip="popupTipLog" data-tip-anchor="top">&#xf06e;</a>
             </p>
         <p id="page-blocked">?</p>
         <p class="stats" data-i18n="popupBlockedSinceInstallPrompt"></p>