Fixed notification styles

chrome/content/mailhops-2-msgNotificationBar.js

@@ -18,6 +18,7 @@ var mailHopsDisplay =
 
     this.options = options;
     this.mhBox = document.getElementById("mailhopsNoficationBox");
+    this.mhNoteBox = document.getElementById("mailhopsNotification");
     this.resultBox = document.getElementById("mailhopsResult");
     this.resultText = document.getElementById("mailhopsResultText");
     this.mailhopsResultWeather = document.getElementById("mailhopsResultWeather");
@@ -26,6 +27,7 @@ var mailHopsDisplay =
     this.mailHopsAccountMessage = document.getElementById("mailHopsAccountMessage");
     this.mailhopsDataPaneHops = document.getElementById("mailhopsDataPaneHops");
     
+    
     //auth
     this.mailhopsDataPaneSPF = document.getElementById("mailhopsDataPaneSPF");
     this.mailhopsDataPaneDKIM = document.getElementById("mailhopsDataPaneDKIM");
@@ -33,7 +35,8 @@ var mailHopsDisplay =
     this.mailhopsDataPaneDNSBL = document.getElementById("mailhopsDataPaneDNSBL");
 
     //wait for message to be selected before showing
-    if(!reload && this.mhBox) this.mhBox.style.display = 'none';
+    if (!reload && this.mhBox)
+      this.mhBox.style.display = 'none';
 
     //event listner for route click to launch map
     this.mailhopsDataPaneDNSBL.addEventListener("click", function () {
@@ -70,12 +73,12 @@ var mailHopsDisplay =
     });
 
     if(!!options.bar_color)
-      this.mhBox.style.background = options.bar_color;
+      this.mhNoteBox.style.background = options.bar_color;
     else
-      this.mhBox.style.background = '';
+      this.mhNoteBox.style.background = '';
 
     if(!!options.font_size)
-      this.mhBox.style.fontSize = options.font_size;
+      this.mhNoteBox.style.fontSize = options.font_size;
 
     if(!!options.font_color){
       this.resultText.style.color = options.font_color;

chrome/content/mailhops-3.js

@@ -8,7 +8,7 @@ var mailHops = {
   msgURI:	null,
   isLoaded: false,
   options: {
-      'version':'MailHops Plugin 3.7.1',
+      'version':'MailHops Plugin 3.7.3',
       'lan':'en',
       'unit':'mi',
       'api_http':'https://',

chrome/content/msgNotificationBar.xul

@@ -12,8 +12,10 @@
 	<script type="application/x-javascript" src="chrome://mailhops/content/mailhops-3.js"/>
 
 	<hbox id="mail-notification-top">
-		<stack id="mailhopsNoficationBox" collapsed="false" notificationside="top">
+		<stack id="mailhopsNoficationBox" collapsed="false" notificationside="top" class="notificationbox-stack" flex="1">
-			    <image id="mailhopsLogo" src="chrome://mailhops/content/images/mailhops32.png" width="32" height="32" tooltiptext="&mailhops_route_nav_options_label;"/>
+		<notification id="mailhopsNotification" class="animated" value="remoteContent" type="info">
+				<hbox class="messageDetails">
+			    <image id="mailhopsLogo" src="chrome://mailhops/content/images/mailhops32.png" tooltiptext="&mailhops_route_nav_options_label;"/>
 					
           <label id="mailHopsAccountMessage" class="bar-link" value="Join today"></label>
 
@@ -41,6 +43,8 @@
             <label id="mailhopsUnsubscribe" class="bar-link unsubscribe" value="&mailhops_unsubscribe;"></label>
 
        		</hbox>
+				</hbox>
+				</notification>
 		</stack>
 	</hbox>
 

chrome/content/preferences.xul

@@ -32,7 +32,7 @@
 				<groupbox flex="1">
 					<caption label="MailHops &mailhops_tab_member_label;"/>
 					<description>
-						API Key <label id="mailhops-membership-link" class="text-link plain" value="Join MailHops" href="https://mailhops.com"/>
+						API Key <label xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" is="text-link" id="mailhops-membership-link" class="text-link plain" value="Join MailHops" href="https://mailhops.com"/>
 					</description>
 					<hbox align="center">
 						<textbox id="mailhop.api_key" placeholder="Enter your MailHops API Member Key" width="500"/>
@@ -485,7 +485,7 @@
 	    	<groupbox flex="1">
 					<caption label="&mailhops_tab_display_label;"/>
 					<description>
-							Use any <label class="text-link plain" href="https://en.wikipedia.org/wiki/Web_colors" value="HTML color name or Hex code"/>.
+							Use any <label xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" is="text-link" class="text-link plain" href="https://en.wikipedia.org/wiki/Web_colors" value="HTML color name or Hex code"/>.
 					</description>
 
 					<description id="display_preview" style="font-size: 14px; color: #777; background: #FFF;">
@@ -565,7 +565,7 @@
 					</grid>
 
 					<checkbox id="mailhop.hide_compact" label="Hide MailHops Bar when CompactHeaders are collapsed" checked="false"/>
-					<label class="text-link plain" href="https://addons.mozilla.org/en-us/thunderbird/addon/compactheader/" value="CompactHeaders Add-on"/>
+					<label xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" is="text-link" class="text-link plain" href="https://addons.mozilla.org/en-us/thunderbird/addon/compactheader/" value="CompactHeaders Add-on"/>
 
 				</groupbox>
 	    </tabpanel>
@@ -601,7 +601,7 @@
 				<spacer/>
 
 				<description>
-					MailHops API uses <label class="text-link plain" value="DarkSky" href="https://darksky.net"/> to get the weather of the sender, register for an API Key to enable this feature.
+					MailHops API uses <label xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" is="text-link" class="text-link plain" value="DarkSky" href="https://darksky.net"/> to get the weather of the sender, register for an API Key to enable this feature.
 				</description>
 
 				<textbox id="mailhop.fkey" value="" placeholder="Enter your DarkSky API Key"/>

chrome/skin/classic/msgNotificationBar.css

@@ -1,6 +1,6 @@
 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
 
- #mailhopsResultText { padding-left:20px; background-repeat: no-repeat; }
+#mailhopsResultText { padding-left:20px; background-repeat: no-repeat; }
 
 #mailhopsNoficationBox menuitem .menu-iconic-icon { width: 16px; height: 11px; }
 
@@ -36,10 +36,14 @@
   font-size: 14px;
   line-height: 24px;
   font-weight: normal;
-  background: #5E7A9B;
-	display: block;
 	position: relative;
-	padding: 5px;
+	max-height: 50px;
+	width: 100%;
+	margin: auto;
+}
+
+#mailhopsNotification {
+	background: #f7f7f7;
 }
 
 #mailhopsResult {
@@ -111,7 +115,7 @@
 	border: 1px solid #CCC;
 	color: #333;
 	background-color: #FFF;
-  position: absolute;
+  position: fixed;
 	margin-top: 0;
 	z-index: 10000;
 }
@@ -147,3 +151,8 @@
 	background-color: #e5e5e5;
 	border-radius: 10px;
 }
+
+#mailhopsNoficationBox .messageCloseButton, 
+#mailhopsNoficationBox .messageDetails:nth-child(2) {
+	display: none!important;
+}

manifest.json

@@ -2,7 +2,7 @@
   "manifest_version": 2,
   "name": "__MSG_appName__",
   "description": "__MSG_appDesc__",
-  "version": "3.7.1",
+  "version": "3.7.3",
   "author": "Hopsware LLC",
   "developer": {
     "name": "Andrew Van Tassel",