From 2feddca69a90320dd19c9e771da34aeb6c67a733 Mon Sep 17 00:00:00 2001
From: Andrew Van Tassel <andrew@andrewvantassel.com>
Date: Sun, 15 Jan 2017 13:38:59 -0700
Subject: [PATCH] Updated styles for Silvermel add-on

---
 chrome/content/mailhops.js                 |  6 +--
 chrome/content/msgNotificationBar.js       | 53 ++++++++++++----------
 chrome/content/msgNotificationBar.xul      | 10 ++--
 chrome/content/preferences.js              |  4 +-
 chrome/content/preferences.xul             |  6 +--
 chrome/skin/classic/msgNotificationBar.css | 10 ++++
 6 files changed, 53 insertions(+), 36 deletions(-)

diff --git a/chrome/content/mailhops.js b/chrome/content/mailhops.js
index db1c4be..8ebbb8c 100644
--- a/chrome/content/mailhops.js
+++ b/chrome/content/mailhops.js
@@ -17,7 +17,7 @@ var mailHops =
       'debug':false,
       'hide_compact':false,
       'bar_color': '#5E7A9B',
-      'font_color': '#FFF',
+      'font_color': '#ffffff',
       'font_size': '14px',
       'country_tag':false,
       'travel_time_junk':false,
@@ -47,7 +47,7 @@ mailHops.init = function() {
         window.openDialog("chrome://mailhops/content/preferences.xul","","chrome, dialog, modal, centerscreen").focus();
       });
 
-  document.getElementById("mailhopsDataPaneRefreshLink").addEventListener("click", function () {
+  document.getElementById("mailhopsDataPaneRefresh").addEventListener("click", function () {
         mailHops.refreshCache();
       });
 
@@ -66,7 +66,7 @@ mailHops.loadPref = function(reload)
   //Display
   mailHops.options.bar_color = mailHops.getCharPref('mail.mailHops.bar_color','#5E7A9B');
 
-  mailHops.options.font_color = mailHops.getCharPref('mail.mailHops.font_color','#FFF');
+  mailHops.options.font_color = mailHops.getCharPref('mail.mailHops.font_color','#ffffff');
 
   mailHops.options.font_size = mailHops.getCharPref('mail.mailHops.font_size','14px');
 
diff --git a/chrome/content/msgNotificationBar.js b/chrome/content/msgNotificationBar.js
index f2a3f9c..a72393b 100644
--- a/chrome/content/msgNotificationBar.js
+++ b/chrome/content/msgNotificationBar.js
@@ -28,40 +28,47 @@ var mailHopsDisplay =
     this.mailhopsDataPaneDNSBL = document.getElementById("mailhopsDataPaneDNSBL");
 
     //wait for message to be selected before showing
-    if(!reload)
-      this.mhBox.style.display = 'none';
+    if(!reload) this.mhBox.style.display = 'none';
 
     //event listner for route click to launch map
     this.mailhopsDataPaneDNSBL.addEventListener("click", function () {
-        if(this.hasAttribute('data-ip'))
-          mailHopsUtils.launchSpamHausURL( this.getAttribute('data-ip') );
-      });
+      if(this.hasAttribute('data-ip'))
+        mailHopsUtils.launchSpamHausURL( this.getAttribute('data-ip') );
+    });
 
     this.resultText.addEventListener("click", function () {
-      if(this.value.indexOf('Rate Limit')!==-1){
+      if(this.value.indexOf('Rate Limit')!==-1)
         window.openDialog("chrome://mailhops/content/preferences.xul","","chrome, dialog, modal, centerscreen").focus();
-      }
       else if(this.hasAttribute('data-route'))
         mailHopsUtils.launchMap( String(this.getAttribute('data-route')), options );
-      });
+    });
 
-      if(!!options.bar_color)
-        this.mhBox.style.background = options.bar_color;
-      else
-        this.mhBox.style.background = '';
+    this.mailhopsResultWeather.addEventListener("click", function () {
+      mailHopsUtils.launchExternalURL(this.getAttribute('href'));
+    });
 
-      if(!!options.font_size)
-        this.mhBox.style.fontSize = options.font_size;
+    this.mailhopsUnsubscribe.addEventListener("click", function () {
+      if(this.getAttribute('href'))
+        mailHopsUtils.launchExternalURL(this.getAttribute('href'));
+    });
 
-      if(!!options.font_color){
-        this.resultText.style.color = options.font_color;
-        this.mailhopsResultWeather.style.color = options.font_color;
-        this.mailhopsUnsubscribe.style.color = options.font_color;
-        this.mailhopsDataPaneSPF.style.color = options.font_color;
-        this.mailhopsDataPaneDKIM.style.color = options.font_color;
-        this.mailhopsDataPaneMailer.style.color = options.font_color;
-        this.mailhopsDataPaneDNSBL.style.color = options.font_color;
-      }
+    if(!!options.bar_color)
+      this.mhBox.style.background = options.bar_color;
+    else
+      this.mhBox.style.background = '';
+
+    if(!!options.font_size)
+      this.mhBox.style.fontSize = options.font_size;
+
+    if(!!options.font_color){
+      this.resultText.style.color = options.font_color;
+      this.mailhopsResultWeather.style.color = options.font_color;
+      this.mailhopsUnsubscribe.style.color = options.font_color;
+      this.mailhopsDataPaneSPF.style.color = options.font_color;
+      this.mailhopsDataPaneDKIM.style.color = options.font_color;
+      this.mailhopsDataPaneMailer.style.color = options.font_color;
+      this.mailhopsDataPaneDNSBL.style.color = options.font_color;
+    }
   },
 
   lists: function( header_unsubscribe ){
diff --git a/chrome/content/msgNotificationBar.xul b/chrome/content/msgNotificationBar.xul
index ad881c8..757f5fd 100644
--- a/chrome/content/msgNotificationBar.xul
+++ b/chrome/content/msgNotificationBar.xul
@@ -17,16 +17,16 @@
 
        		<hbox id="mailhopsResult" flex="1">
 
-       			<label id="mailhopsResultText" class="text-link"></label>
+       			<label id="mailhopsResultText" class="bar-link"></label>
 
-            <label id="mailhopsResultWeather" class="text-link"></label>
+            <label id="mailhopsResultWeather" class="bar-link"></label>
 
        			<button type="menu" class="msgHeaderView-button msgHeaderView-flat-button" label="&mailhops_hops;">
          				<menupopup id="mailhopsDataPaneDetails">
   					    </menupopup>
     				</button>
 
-    				<button id="mailhopsDataPaneRefreshLink" class="msgHeaderView-button msgHeaderView-flat-button" label="&mailhops_route_nav_refresh_label;"></button>
+    				<button id="mailhopsDataPaneRefresh" class="msgHeaderView-button msgHeaderView-flat-button" label="&mailhops_route_nav_refresh_label;"></button>
 
     				<label id="mailhopsDataPaneMailer" class="auth-item" value="" tooltiptext="Mailer"></label>
 
@@ -34,9 +34,9 @@
 
     				<label id="mailhopsDataPaneDKIM" class="auth-item" value="" tooltiptext="DKIM"></label>
 
-    				<label id="mailhopsDataPaneDNSBL" class="text-link auth-item" value="" tooltiptext="DNSBL"></label>
+    				<label id="mailhopsDataPaneDNSBL" class="bar-link auth-item" value="" tooltiptext="DNSBL"></label>
 
-            <label id="mailhopsUnsubscribe" class="text-link unsubscribe" value="&mailhops_unsubscribe;"></label>
+            <label id="mailhopsUnsubscribe" class="bar-link unsubscribe" value="&mailhops_unsubscribe;"></label>
 
        		</hbox>
 		</row>
diff --git a/chrome/content/preferences.js b/chrome/content/preferences.js
index d0c624d..dde5d8a 100644
--- a/chrome/content/preferences.js
+++ b/chrome/content/preferences.js
@@ -35,7 +35,7 @@ var mailHopPreferences = {
 
   	//Display Box styles
   	document.getElementById("mailhop.bar_color").value = pref.getCharPref("mail.mailHops.bar_color",'#5E7A9B');
-    document.getElementById("mailhop.font_color").value = pref.getCharPref("mail.mailHops.font_color",'#FFF');
+    document.getElementById("mailhop.font_color").value = pref.getCharPref("mail.mailHops.font_color",'#ffffff');
     document.getElementById("mailhop.font_size").value = pref.getCharPref("mail.mailHops.font_size",'14px');
 
     //Update styles
@@ -90,7 +90,7 @@ var mailHopPreferences = {
     document.getElementById("mailhops-membership-link").addEventListener("click", function () {
       mailHopsUtils.launchExternalURL(this.getAttribute('data-account-url'));
     });
-    
+
     this.saveAPIKey();
 
     document.getElementById("mailhop.bar_color").addEventListener("input", function () {
diff --git a/chrome/content/preferences.xul b/chrome/content/preferences.xul
index 4129c4f..2d80ae4 100644
--- a/chrome/content/preferences.xul
+++ b/chrome/content/preferences.xul
@@ -519,7 +519,7 @@
 								  </columns>
 								  <rows>
 								    <row>
-											<div width="25px" height="25px" onclick="mailHopPreferences.ResetDisplay(this.style.backgroundColor);" style="cursor: pointer; background-color: #e8e8e8"></div>
+											<div width="25px" height="25px" onclick="mailHopPreferences.ResetDisplay(this.style.backgroundColor);" style="cursor: pointer; background-color: #eeeeee"></div>
 											<div width="25px" height="25px" onclick="mailHopPreferences.ResetDisplay(this.style.backgroundColor);" style="cursor: pointer; background-color: #c9c9c9"></div>
 											<div width="25px" height="25px" onclick="mailHopPreferences.ResetDisplay(this.style.backgroundColor);" style="cursor: pointer; background-color: #afafaf"></div>
 											<div width="25px" height="25px" onclick="mailHopPreferences.ResetDisplay(this.style.backgroundColor);" style="cursor: pointer; background-color: #a9e0f2"></div>
@@ -540,7 +540,7 @@
 							</row>
 							<row>
 								<label value="Font Color"></label>
-								<textbox id="mailhop.font_color" value="#FFF" placeholder="Enter a hex color code"/>
+								<textbox id="mailhop.font_color" value="#ffffff" placeholder="Enter a hex color code"/>
 								<grid class="grid-color">
 								  <columns>
 										<column/>
@@ -560,7 +560,7 @@
 							</row>
 							<row>
 								<span></span>
-								<button onclick="mailHopPreferences.ResetDisplay('#5E7A9B','#FFF','14px');" style="text-align:center;">Reset Display</button>
+								<button onclick="mailHopPreferences.ResetDisplay('#5E7A9B','#ffffff','14px');" style="text-align:center;">Reset Display</button>
 							</row>
 						</rows>
 					</grid>
diff --git a/chrome/skin/classic/msgNotificationBar.css b/chrome/skin/classic/msgNotificationBar.css
index 62f52f3..b96244f 100644
--- a/chrome/skin/classic/msgNotificationBar.css
+++ b/chrome/skin/classic/msgNotificationBar.css
@@ -38,6 +38,16 @@
   font-weight: normal;
   background: #5E7A9B;
 	overflow-x: scroll;
+	padding: 5px;
+}
+
+#mailhopsNoficationBox .bar-link {
+	cursor: pointer;
+	text-decoration: none;
+}
+
+#mailhopsNoficationBox .bar-link:hover {
+	text-decoration: underline;
 }
 
 #mailhopsNoficationBox #mailhopsDataPanePrefsLink {