Changed hops layout

CHANGELOG.md

@@ -1,5 +1,13 @@
 # Change Log
 
+## 3.1.3 - 2017-07-22
+
+### Added
+- Secure host icon to hop list
+
+### Changed
+- Moved hop list from drop down to new layout bubble
+
 ## 3.1.2 - 2017-07-18
 
 ### Fixed

chrome/content/mailhops.js

@@ -9,7 +9,7 @@ var mailHops =
   msgURI:	null,
   isLoaded: false,
   options: {
-      'version':'MailHops Plugin 3.1.2',
+      'version':'MailHops Plugin 3.1.3',
       'lan':'en',
       'unit':'mi',
       'api_http':'https://',
@@ -221,7 +221,7 @@ mailHops.getRoute = function(){
         continue;
       //get unique IPs for each Received header
       received_ips = received_ips.filter(function(item, pos) {
-                      return received_ips.indexOf(item) == pos;
+                      return received_ips.indexOf(item) === pos;
                     });
       for( var r=received_ips.length; r >= 0 ; r-- ){
         if(regexIp.test(received_ips[r]) && mailHops.testIP(received_ips[r],rline)){
@@ -234,9 +234,9 @@ mailHops.getRoute = function(){
   }
 
   // parse dates
-  if(firstDate && firstDate.indexOf('(')!==-1)
+  if(firstDate && firstDate.indexOf('(') !==- 1)
     firstDate = firstDate.substring(0,firstDate.indexOf('(')).trim();
-  if(lastDate && lastDate.indexOf('(')!==-1)
+  if(lastDate && lastDate.indexOf('(') !== -1)
     lastDate = lastDate.substring(0,lastDate.indexOf('(')).trim();
   if(firstDate && lastDate){
     try {
@@ -284,6 +284,7 @@ mailHops.testIP = function(ip,header){
 		if(firstchar.match(/\.|\d|\-/)
         || lastchar.match(/\.|\d|\-/)
         || ( firstchar == '?' && lastchar == '?' )
+        || firstchar == ':'
         || lastchar == ';'
         || header.toLowerCase().indexOf(' id '+ip) !== -1
         || parseInt(ip.substring(0,ip.indexOf('.'))) >= 240 //IANA-RESERVED
@@ -291,22 +292,12 @@ mailHops.testIP = function(ip,header){
       //only if there is one instance of this IP
       if(header.indexOf(ip) == header.lastIndexOf(ip))
 			   validIP = false;
-    } else {
+    } else if(header.indexOf('using SSL') !== -1
+        || header.indexOf('using TLS') !== -1
+        || header.indexOf('version=TLSv1/SSLv3') !== -1
+      ){
         //check if this IP was part of a secure transmission
-      if(header.indexOf('using SSL') != -1){
+        mailHops.message.secure.push(ip);
-        if(header.substring(header.indexOf('using SSL')+11,header.indexOf('using SSL')+12) == '.')
-          mailHops.message.secure.push(ip+':'+header.substring(header.indexOf('using SSL'),header.indexOf('using TLS')+14));
-        else
-				  mailHops.message.secure.push(ip+':'+header.substring(header.indexOf('using SSL'),header.indexOf('using TLS')+11));
-      }
-			else if(header.indexOf('using TLS') != -1){
-        if(header.substring(header.indexOf('using TLS')+11,header.indexOf('using TLS')+12) == '.')
-				  mailHops.message.secure.push(ip+':'+header.substring(header.indexOf('using TLS'),header.indexOf('using TLS')+14));
-        else
-          mailHops.message.secure.push(ip+':'+header.substring(header.indexOf('using TLS'),header.indexOf('using TLS')+11));
-      }
-			else if(header.indexOf('version=TLSv1/SSLv3') != -1)
-				mailHops.message.secure.push(ip+':'+'using TLSv1/SSLv3');
 		}
 	} catch(e) {
 		mailHops.LOG('testIP Error: '+JSON.stringify(e));

chrome/content/msgNotificationBar.js

@@ -3,6 +3,7 @@ var mailHopsDisplay =
   resultBox:              null,
   resultText:             null,
   resultDetails:          null,
+  mailhopsDataPaneHops:   null,
   mailhopsDataPaneSPF:    null,
   mailhopsDataPaneDKIM:   null,
   mailhopsDataPaneMailer: null,
@@ -23,6 +24,7 @@ var mailHopsDisplay =
     this.mailhopsUnsubscribe = document.getElementById("mailhopsUnsubscribe");
     this.resultDetails = document.getElementById("mailhopsDataPaneDetails");
     this.mailHopsAccountMessage = document.getElementById("mailHopsAccountMessage");
+    this.mailhopsDataPaneHops = document.getElementById("mailhopsDataPaneHops");
 
     //auth
     this.mailhopsDataPaneSPF = document.getElementById("mailhopsDataPaneSPF");
@@ -55,6 +57,13 @@ var mailHopsDisplay =
       this.style.display = 'none';
     });
 
+    this.mailhopsDataPaneHops.addEventListener("click", function () {
+      if(mailHopsDisplay.resultDetails.style.display !== 'block')
+        mailHopsDisplay.resultDetails.style.display = 'block';
+      else
+        mailHopsDisplay.resultDetails.style.display = 'none';
+    });
+
     this.mailhopsUnsubscribe.addEventListener("click", function () {
       if(this.getAttribute('href'))
         mailHopsUtils.launchExternalURL(this.getAttribute('href'));
@@ -110,7 +119,7 @@ var mailHopsDisplay =
       header_spf=header_spf.replace(/^\s+/,"");
       var headerSPFArr=header_spf.split(' ');
       this.mailhopsDataPaneSPF.setAttribute('value','SPF: '+headerSPFArr[0]);
-      this.mailhopsDataPaneSPF.style.backgroundImage = 'url(chrome://mailhops/content/images/auth/'+headerSPFArr[0]+'.png)';
+      this.mailhopsDataPaneSPF.style.backgroundImage = "url('chrome://mailhops/content/images/auth/"+headerSPFArr[0]+".png')";
       this.mailhopsDataPaneSPF.setAttribute('tooltiptext',header_spf+'\n'+mailHopsUtils.spf(headerSPFArr[0]));
       this.mailhopsDataPaneSPF.style.display='block';
     } else {
@@ -138,7 +147,7 @@ var mailHopsDisplay =
         dkim_result=dkim_result.replace(/^\s+/,"");
         var dkimArr=dkim_result.split(' ');
         this.mailhopsDataPaneDKIM.setAttribute('value','DKIM: '+dkimArr[0].replace('dkim=',''));
-        this.mailhopsDataPaneDKIM.style.backgroundImage = 'url(chrome://mailhops/content/images/auth/'+dkimArr[0].replace('dkim=','')+'.png)';
+        this.mailhopsDataPaneDKIM.style.backgroundImage = "url('chrome://mailhops/content/images/auth/"+dkimArr[0].replace('dkim=','')+".png')";
         this.mailhopsDataPaneDKIM.setAttribute('tooltiptext',dkim_result+'\n'+mailHopsUtils.dkim(dkimArr[0].replace('dkim=','')));
         this.mailhopsDataPaneDKIM.style.display='block';
       } else {
@@ -148,7 +157,7 @@ var mailHopsDisplay =
         spf_result=spf_result.replace(/^\s+/,"");
         var spfArr=spf_result.split(' ');
         this.mailhopsDataPaneSPF.setAttribute('value','SPF: '+spfArr[0].replace('spf=',''));
-        this.mailhopsDataPaneSPF.style.backgroundImage = 'url(chrome://mailhops/content/images/auth/'+spfArr[0].replace('spf=','')+'.png)';
+        this.mailhopsDataPaneSPF.style.backgroundImage = "url('chrome://mailhops/content/images/auth/"+spfArr[0].replace('spf=','')+".png')";
         this.mailhopsDataPaneSPF.setAttribute('tooltiptext',spf_result+'\n'+mailHopsUtils.spf(spfArr[0].replace('spf=','')));
         this.mailhopsDataPaneSPF.style.display='block';
       }
@@ -157,7 +166,7 @@ var mailHopsDisplay =
     }
     //X-Mailer, User-Agent or X-MimeOLE
     if(header_xmailer){
-      this.mailhopsDataPaneMailer.style.backgroundImage = 'url(chrome://mailhops/content/images/email.png)';
+      this.mailhopsDataPaneMailer.style.backgroundImage = "url('chrome://mailhops/content/images/email.png')";
       if(header_xmailer.indexOf('(')!=-1)
         this.mailhopsDataPaneMailer.setAttribute('value',header_xmailer.substring(0,header_xmailer.indexOf('(')));
       else if(header_xmailer.indexOf('[')!=-1)
@@ -167,7 +176,7 @@ var mailHopsDisplay =
       this.mailhopsDataPaneMailer.setAttribute('tooltiptext',header_xmailer);
       this.mailhopsDataPaneMailer.style.display='block';
     } else if(header_useragent){
-      this.mailhopsDataPaneMailer.style.backgroundImage = 'url(chrome://mailhops/content/images/email.png)';
+      this.mailhopsDataPaneMailer.style.backgroundImage = "url('chrome://mailhops/content/images/email.png')";
       if(header_useragent.indexOf('(')!=-1)
         this.mailhopsDataPaneMailer.setAttribute('value',header_useragent.substring(0,header_useragent.indexOf('(')));
       else if(header_useragent.indexOf('[')!=-1)
@@ -177,7 +186,7 @@ var mailHopsDisplay =
       this.mailhopsDataPaneMailer.setAttribute('tooltiptext',header_useragent);
       this.mailhopsDataPaneMailer.style.display='block';
     } else if(header_xmimeole){
-      this.mailhopsDataPaneMailer.style.backgroundImage = 'url(chrome://mailhops/content/images/email.png)';
+      this.mailhopsDataPaneMailer.style.backgroundImage = "url('chrome://mailhops/content/images/email.png')";
 
       if(header_xmimeole.indexOf('(')!=-1)
         header_xmimeole = header_xmimeole.substring(0,header_xmimeole.indexOf('('));
@@ -213,11 +222,11 @@ var mailHopsDisplay =
     this.mailhopsResultWeather.style.display = 'none';
     this.resultText.removeAttribute('data-route');
     this.resultText.style.backgroundImage = '';
-    this.mailHopsAccountMessage.style.display = 'none';
     //remove child details
     while(this.resultDetails.firstChild) {
         this.resultDetails.removeChild(this.resultDetails.firstChild);
     }
+    this.mailHopsAccountMessage.style.display = 'none';
     
     if(no_ips){
       this.resultText.style.backgroundImage = "url('chrome://mailhops/content/images/local.png')";
@@ -264,20 +273,20 @@ var mailHopsDisplay =
               this.resultText.setAttribute('tooltiptext','View Map');
             }
 
-            var menuitem = document.createElement('menuitem');
+            var hop = document.createElement('label');
             var label = '';
 
-            menuitem.setAttribute('class','menuitem-iconic');
-
             if(response.route[i].countryCode)
-              menuitem.setAttribute('image','chrome://mailhops/content/images/flags/'+response.route[i].countryCode.toLowerCase()+'.png');
+              hop.style.backgroundImage = "url('chrome://mailhops/content/images/flags/"+response.route[i].countryCode.toLowerCase()+".png')";
             else if(response.route[i].coords)
-              menuitem.setAttribute('image','chrome://mailhops/content/images/auth/none.png');
+              hop.style.backgroundImage = "url('chrome://mailhops/content/images/auth/none.png')";
             else
-              menuitem.setAttribute('image','chrome://mailhops/content/images/local.png');
+              hop.style.backgroundImage = "url('chrome://mailhops/content/images/local.png')";
 
             if(response.route[i].coords){
 
+              hop.setAttribute('class','bar-link hop');
+
               if(response.route[i].city && response.route[i].state)
                 label='Hop #'+(i+1)+' '+response.route[i].city+', '+response.route[i].state;
               else if(response.route[i].city && response.route[i].countryCode)
@@ -291,35 +300,48 @@ var mailHopsDisplay =
               else
                 label='Hop #'+(i+1);
 
-              menuitem.setAttribute('tooltiptext','Click for WhoIs');
+              hop.setAttribute('data-ip',response.route[i].ip);
-              menuitem.setAttribute('data-ip',response.route[i].ip);
+              hop.setAttribute('tooltiptext','Click for whois');
-              menuitem.addEventListener("click", function () {
+              hop.addEventListener("click", function () {
                   mailHopsUtils.launchWhoIs(this.getAttribute('data-ip'));
                 }
               , false);
           } else {
+            hop.setAttribute('class','hop');
             label='Hop #'+(i+1)+' Private';
           }
 
           label+=' '+response.route[i].ip;
+          hop.setAttribute('value',label);
 
+          //append the hop
+          this.resultDetails.appendChild(hop);
+
+          //append the host
+          label = '';
           if(response.route[i].host)
-              label+=' '+response.route[i].host;
+            label += response.route[i].host;
           if(response.route[i].whois && response.route[i].whois.descr)
-              label+=' '+response.route[i].whois.descr;
+            label += response.route[i].whois.descr;
           if(response.route[i].whois && response.route[i].whois.netname)
-              label+=' '+response.route[i].whois.netname;
+            label += response.route[i].whois.netname;
 
-          menuitem.setAttribute('label',label);
+          if(label !== ''){
+            hop = document.createElement('label');
+            if(message.secure.indexOf(response.route[i].ip) !== -1)
+              hop.style.backgroundImage = "url('chrome://mailhops/content/images/auth/secure.png')";
+            else if(!response.route[i].client)
+              hop.style.backgroundImage = "url('chrome://mailhops/content/images/auth/not_secure.png')";
+            hop.setAttribute('class','host');
+            hop.setAttribute('value',label);
+            this.resultDetails.appendChild(hop);
+          }
 
           //append weather
           if(!weatherRoute && !!response.route[i].weather){
             weatherRoute = response.route[i];
           }
 
-          //append details
-          this.resultDetails.appendChild(menuitem);
-
             //auth & dnsbl
           if(!response.route[i].private && response.route[i].dnsbl && response.route[i].dnsbl.listed){
             this.mailhopsDataPaneDNSBL.setAttribute('value','Blacklisted '+mailHopsUtils.dnsbl(response.route[i].dnsbl.record,true));
@@ -328,7 +350,7 @@ var mailHopsDisplay =
               this.mailhopsDataPaneDNSBL.setAttribute('tooltiptext','Click for more details.\n'+mailHopsUtils.dnsbl(response.route[i].dnsbl.record));
             else
               this.mailhopsDataPaneDNSBL.setAttribute('tooltiptext','Click for more details.');
-            this.mailhopsDataPaneDNSBL.style.backgroundImage = 'url(chrome://mailhops/content/images/auth/bomb.png)';
+            this.mailhopsDataPaneDNSBL.style.backgroundImage = "url('chrome://mailhops/content/images/auth/bomb.png')";
             this.mailhopsDataPaneDNSBL.style.display = 'block';
           }
         }
@@ -339,7 +361,7 @@ var mailHopsDisplay =
       this.mailhopsResultWeather.style.display = 'block';
       this.mailhopsResultWeather.setAttribute('tooltiptext','Weather in '+weatherRoute.city+' '+weatherRoute.state);
       this.mailhopsResultWeather.value = weatherRoute.weather.summary+' '+Math.round(weatherRoute.weather.temp)+'\u00B0';
-      this.mailhopsResultWeather.style.backgroundImage = 'url('+mailHopsUtils.getWeatherIcon(weatherRoute.weather.icon)+')';
+      this.mailhopsResultWeather.style.backgroundImage = "url('"+mailHopsUtils.getWeatherIcon(weatherRoute.weather.icon)+"')";
       if(weatherRoute.coords)
         this.mailhopsResultWeather.setAttribute('href','https://darksky.net/forecast/'+weatherRoute.coords[1]+','+weatherRoute.coords[0]);
       else if(weatherRoute.lat)
@@ -385,7 +407,7 @@ var mailHopsDisplay =
       this.resultText.removeAttribute("data-route");
 
     this.resultText.setAttribute('value', displayText+' ( '+distanceText+' )');
-    this.resultText.style.backgroundImage = 'url('+image+')';
+    this.resultText.style.backgroundImage = "url('"+image+"')";
 
     if(meta && meta.message){
       this.mailHopsAccountMessage.style.display = 'inline';
@@ -399,9 +421,9 @@ var mailHopsDisplay =
   }, //end route
 
   toggleMailHopsBar: function(show){
-    if(show && this.mhBox.style.display=='none')
+    if(show && this.mhBox.style.display == 'none')
-      this.mhBox.style.display='';
+      this.mhBox.style.display = '';
-    else if(!show && this.mhBox.style.display=='')
+    else if(!show && this.mhBox.style.display == '')
-      this.mhBox.style.display='none';
+      this.mhBox.style.display = 'none';
   }
 };

chrome/content/msgNotificationBar.xul

@@ -23,10 +23,10 @@
 
             <label id="mailhopsResultWeather" class="bar-link"></label>
 
-       			<button type="menu" class="msgHeaderView-button msgHeaderView-flat-button" label="&mailhops_hops;">
+            <hbox id="mailhopsHopsBox">
-         				<menupopup id="mailhopsDataPaneDetails">
+       			    <button id="mailhopsDataPaneHops" class="msgHeaderView-button msgHeaderView-flat-button" label="&mailhops_hops;"></button>
-  					    </menupopup>
+                <vbox id="mailhopsDataPaneDetails"></vbox>
-    				</button>
+            </hbox>
 
     				<button id="mailhopsDataPaneRefresh" class="msgHeaderView-button msgHeaderView-flat-button" label="&mailhops_route_nav_refresh_label;"></button>
 

chrome/skin/classic/msgNotificationBar.css

@@ -42,6 +42,11 @@
 	padding: 5px;
 }
 
+#mailhopsResult {
+  position: relative;
+	display: inline-flex;
+}
+
 #mailhopsNoficationBox .bar-link {
 	cursor: pointer;
 	text-decoration: none;
@@ -91,7 +96,6 @@
 }
 
 #mailHopsAccountMessage {
-	z-index:10;
 	border-radius: 10px;
 	display: none;
 	padding: 10px;
@@ -99,3 +103,30 @@
 	color: #777;
 	background-color: #FFF;
 }
+
+#mailhopsDataPaneDetails {
+  border-radius: 10px;
+	display: none;
+	padding: 10px;
+	border: 1px solid #CCC;
+	color: #333;
+	background-color: #FFF;
+  position: absolute;
+	margin-top: 0;
+}
+
+#mailhopsDataPaneDetails .hop {
+  background-repeat: no-repeat;
+  display: block;
+  position: relative;
+  padding-left: 22px;
+}
+
+#mailhopsDataPaneDetails .host {
+  background-repeat: no-repeat;
+  display: block;
+  position: relative;
+  color: #777;
+  padding-left: 22px;
+  margin-left: 22px;
+}

install.rdf

@@ -5,7 +5,7 @@
 	<Description about="urn:mozilla:install-manifest">
 		<em:type>2</em:type>
 		<em:id>thunderbird@mailhops.com</em:id>
-		<em:version>3.1.2</em:version>
+		<em:version>3.1.3</em:version>
 
 		<em:name>MailHops</em:name>
 		<em:description>MailHops maps the route an email took to get to you. Displaying the senders location, weather, user-agent and authentication used.</em:description>