Added color options for MailHops bar

chrome/content/mailhops.js

@@ -268,7 +268,7 @@ mailHops.testIP = function(ip,header){
         || lastchar.match(/\.|\d|\-/)
         || ( firstchar == '?' && lastchar == '?' )
         || lastchar == ';'
-        || header.toLowerCase().indexOf('id '+ip) !== -1
+        || header.toLowerCase().indexOf(' id '+ip) !== -1
         || parseInt(ip.substring(0,ip.indexOf('.'))) >= 240 //IANA-RESERVED
     ){
       //only if there is one instance of this IP

chrome/content/preferences.js

@@ -99,6 +99,10 @@ var mailHopPreferences = {
     document.getElementById("mailhop.font_size").addEventListener("input", function () {
       self.previewBar.style.fontSize = this.value;
     });
+    document.getElementById("randomColorHue").addEventListener("change", function () {
+      self.RandomColor(this.value);
+    });
+
   },
   savePreferences: function() {
     pref.setCharPref("mail.mailHops.lang", document.getElementById("mailhop.lang").selectedItem.value);
@@ -234,12 +238,31 @@ var mailHopPreferences = {
  	 this.api_host.value='api.mailhops.com';
  },
 
- ResetDisplay: function(){
+ ResetDisplay: function(bar,font,size){
-   document.getElementById("mailhop.bar_color").value = '#5E7A9B';
+   if(bar){
-   document.getElementById("mailhop.font_color").value = '#FFF';
+     if(bar.indexOf('rgb(')===0)
-   document.getElementById("mailhop.font_size").value = '14px';
+      document.getElementById("mailhop.bar_color").value = this.rgb2hex(bar);
+     else
+      document.getElementById("mailhop.bar_color").value = bar;
+   }
+   if(font) {
+     if(font.indexOf('rgb(')===0)
+      document.getElementById("mailhop.font_color").value = this.rgb2hex(font);
+     else
+      document.getElementById("mailhop.font_color").value = font;     
+   }
+   if(size) document.getElementById("mailhop.font_size").value = size;
    this.previewBar.style.background = document.getElementById("mailhop.bar_color").value;
    this.previewBar.style.color = document.getElementById("mailhop.font_color").value;
    this.previewBar.style.fontSize = document.getElementById("mailhop.font_size").value;
+ },
+
+  rgb2hex: function(rgb) {
+      rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
+      function hex(x) {
+          return ("0" + parseInt(x).toString(16)).slice(-2);
+      }
+      return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
   }
-};
+
+ };

chrome/content/preferences.xul

@@ -13,8 +13,6 @@
 	<script type="application/x-javascript" src="chrome://mailhops/content/utils.js"/>
 	<script type="application/x-javascript" src="chrome://mailhops/content/preferences.js"/>
 
-	<!-- <image src="chrome://mailhops/content/images/mailhops-logo.png" width="200"/> -->
-
 	<vbox width="400px">
 
 	<tabbox id="mhTabs" selectedIndex="0">
@@ -490,7 +488,9 @@
 						<image src="chrome://mailhops/content/images/mailhops32.png" width="32" height="32"/>
 						MailHops Bar
 					</description>
+
 					<div height="20"></div>
+
 					<grid>
 					  <columns>
 							<column/>
@@ -499,10 +499,55 @@
 					    <row>
 								<label value="Bar Color"></label>
 								<textbox id="mailhop.bar_color" value="#5E7A9B" placeholder="Enter a hex color code"/>
+								<grid>
+								  <columns>
+										<column/>
+										<column/>
+										<column/>
+										<column/>
+										<column/>
+										<column/>
+										<column/>
+										<column/>
+										<column/>
+										<column/>
+								  </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: #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>
+											<div width="25px" height="25px" onclick="mailHopPreferences.ResetDisplay(this.style.backgroundColor);" style="cursor: pointer; background-color: #5cade0"></div>
+											<div width="25px" height="25px" onclick="mailHopPreferences.ResetDisplay(this.style.backgroundColor);" style="cursor: pointer; background-color: #84e8af"></div>
+											<div width="25px" height="25px" onclick="mailHopPreferences.ResetDisplay(this.style.backgroundColor);" style="cursor: pointer; background-color: #569603"></div>
+											<div width="25px" height="25px" onclick="mailHopPreferences.ResetDisplay(this.style.backgroundColor);" style="cursor: pointer; background-color: #f7e7bb"></div>
+											<div width="25px" height="25px" onclick="mailHopPreferences.ResetDisplay(this.style.backgroundColor);" style="cursor: pointer; background-color: #f2a232"></div>
+											<div width="25px" height="25px" onclick="mailHopPreferences.ResetDisplay(this.style.backgroundColor);" style="cursor: pointer; background-color: #fff1cc"></div>
+											<div width="25px" height="25px" onclick="mailHopPreferences.ResetDisplay(this.style.backgroundColor);" style="cursor: pointer; background-color: #e8f28c"></div>
+											<div width="25px" height="25px" onclick="mailHopPreferences.ResetDisplay(this.style.backgroundColor);" style="cursor: pointer; background-color: #d1994b"></div>
+											<div width="25px" height="25px" onclick="mailHopPreferences.ResetDisplay(this.style.backgroundColor);" style="cursor: pointer; background-color: #754947"></div>
+											<div width="25px" height="25px" onclick="mailHopPreferences.ResetDisplay(this.style.backgroundColor);" style="cursor: pointer; background-color: #e7c0f9"></div>
+											<div width="25px" height="25px" onclick="mailHopPreferences.ResetDisplay(this.style.backgroundColor);" style="cursor: pointer; background-color: #53067c"></div>
+										</row>
+									</rows>
+								</grid>
 							</row>
 							<row>
 								<label value="Font Color"></label>
 								<textbox id="mailhop.font_color" value="#FFF" placeholder="Enter a hex color code"/>
+								<grid>
+								  <columns>
+										<column/>
+										<column/>
+									</columns>
+									<rows>
+										<row>
+											<div width="25px" height="25px" onclick="mailHopPreferences.ResetDisplay(null,this.style.backgroundColor);" style="cursor: pointer; background-color: #ffffff"></div>
+											<div width="25px" height="25px" onclick="mailHopPreferences.ResetDisplay(null,this.style.backgroundColor);" style="cursor: pointer; background-color: #000000"></div>
+										</row>
+									</rows>
+								</grid>
 							</row>
 							<row>
 								<label value="Font Size"></label>
@@ -510,10 +555,11 @@
 							</row>
 							<row>
 								<span></span>
-								<button onclick="mailHopPreferences.ResetDisplay();" style="text-align:center;">Reset Display</button>
+								<button onclick="mailHopPreferences.ResetDisplay('#5E7A9B','#FFF','14px');" style="text-align:center;">Reset Display</button>
 							</row>
 						</rows>
 					</grid>
+
 				</groupbox>
 	    </tabpanel>