Bug 490106 - Tooltips for autoconfig server security quality don't wrap, r=philringnalda

mail/base/content/accountCreation.dtd

@@ -38,8 +38,11 @@
 
 <!ENTITY lectureYourProvider.description "&brandShortName; will let you get to your mail, but you should really get your email provider to configure the server with a secure connection.">
 
-<!ENTITY insecureCleartext.description   "Warning! This is an insecure server. Email is sent in clear-text, so your email could be read by attackers, etc. &brandShortName; will let you get to your mail, but you should really get your email provider to configure the server with a secure connection.">
-<!ENTITY insecureSelfsigned.description  "Warning! This is an insecure server. The server uses a certificate that we can't trust, so we can't be sure that someone isn't intercepting the traffic between &brandShortName; and your server. &brandShortName; will let you get to your mail, but you should really get your email provider to configure the server with a trusted certificate.">
+<!ENTITY insecureServer.tooltip.title    "Warning! This is an insecure server.">
+<!ENTITY insecureServer.tooltip.details  "Click circle for more details.">
+
+<!ENTITY insecureCleartext.description   "Email is sent in clear-text, so your email could be read by attackers, etc. &brandShortName; will let you get to your mail, but you should really get your email provider to configure the server with a secure connection.">
+<!ENTITY insecureSelfsigned.description  "The server uses a certificate that we can't trust, so we can't be sure that someone isn't intercepting the traffic between &brandShortName; and your server. &brandShortName; will let you get to your mail, but you should really get your email provider to configure the server with a trusted certificate.">
 <!ENTITY secureServer.description        "Congratulations! This is a secure server.">
 
 <!ENTITY customfields-header.label     "Additional information">

mail/themes/gnomestripe/mail/accountCreation.css

@@ -282,3 +282,19 @@ checkbox.acknowledge_checkbox {
 vbox.settings {
   padding: 1em;
 }
+
+.title {
+  font-weight: bold;
+  padding: 0px 3px;
+}
+
+.details {
+  font-style: italic;
+  padding: 3px;
+}
+
+.popup-panel {
+  padding: 2px 3px;
+  background-color: #ffffc7;
+  max-width: 320px;
+}

mail/themes/pinstripe/mail/accountCreation.css

@@ -307,3 +307,19 @@ checkbox.acknowledge_checkbox {
 vbox.settings {
   padding: 1em;
 }
+
+.title {
+  font-weight: bold;
+  padding: 0px 3px;
+}
+
+.details {
+  font-style: italic;
+  padding: 3px;
+}
+
+.popup-panel {
+  padding: 2px 3px;
+  background-color: #ffffc7;
+  max-width: 320px;
+}

mail/themes/qute/mail/accountCreation.css

@@ -201,3 +201,19 @@ vbox.icon[state='weak'] {
 vbox.settings {
   padding: 1em;
 }
+
+.title {
+  font-weight: bold;
+  padding: 0px 3px;
+}
+
+.details {
+  font-style: italic;
+  padding: 3px;
+}
+
+.popup-panel {
+  padding: 2px 3px;
+  background-color: #ffffc7;
+  max-width: 320px;
+}

mailnews/base/prefs/resources/content/accountcreation/emailWizard.js

@@ -850,17 +850,20 @@ EmailConfigWizard.prototype =
   _setIconAndTooltip : function(id, state, details)
   {
     let icon = getElementById(id);
-    icon.setAttribute('state', state);
+    icon.setAttribute("state", state);
     switch (state)
     {
-      case 'weak':
-        icon.setAttribute('tooltip', 'insecureserver-'+details);
+      case "weak":
+        icon.setAttribute("tooltip", "insecureserver-" + details);
+        icon.setAttribute("popup", "insecureserver-" + details + "-panel");
         break;
-      case 'hidden':
-        icon.removeAttribute('tooltip');
+      case "hidden":
+        icon.removeAttribute("tooltip");
+        icon.removeAttribute("popup");
         break;
-      case 'strong':
-        icon.setAttribute('tooltip', 'secureservertooltip');
+      case "strong":
+        icon.setAttribute("tooltip", "secureservertooltip");
+        icon.setAttribute("popup", "secureserver-panel");
         break;
     }
   },

mailnews/base/prefs/resources/content/accountcreation/emailWizard.xul

@@ -87,22 +87,53 @@
     <key keycode="VK_ESCAPE" oncommand="window.close();"/>
   </keyset>
 
-  <tooltip id="insecureserver-cleartext">
-    <hbox align="bottom">
+  <panel id="insecureserver-cleartext-panel" class="popup-panel">
+    <hbox>
       <image class="insecureLarry"/>
-      <description>&insecureCleartext.description;</description>
+      <vbox flex="1">
+        <description class="title">&insecureServer.tooltip.title;</description>
+        <description class="details">&insecureCleartext.description;</description>
+      </vbox>
+    </hbox>
+  </panel>
+  <panel id="insecureserver-selfsigned-panel" class="popup-panel">
+    <hbox>
+      <image class="insecureLarry"/>
+      <vbox flex="1">
+        <description class="title">&insecureServer.tooltip.title;</description>
+        <description class="details">&insecureSelfsigned.description;</description>
+      </vbox>
+    </hbox>
+  </panel>
+  <panel id="secureserver-panel" class="popup-panel">
+    <hbox>
+      <image class="secureLarry"/>
+      <description class="title">&secureServer.description;</description>
+    </hbox>
+  </panel>
+
+  <tooltip id="insecureserver-cleartext">
+    <hbox>
+      <image class="insecureLarry"/>
+      <vbox>
+        <description class="title">&insecureServer.tooltip.title;</description>
+        <description class="details">&insecureServer.tooltip.details;</description>
+      </vbox>
     </hbox>
   </tooltip>
   <tooltip id="insecureserver-selfsigned">
-    <hbox align="bottom">
+    <hbox>
       <image class="insecureLarry"/>
-      <description>&insecureSelfsigned.description;</description>
+      <vbox>
+        <description class="title">&insecureServer.tooltip.title;</description>
+        <description class="details">&insecureServer.tooltip.details;</description>
+      </vbox>
     </hbox>
   </tooltip>
   <tooltip id="secureservertooltip">
-    <hbox align="bottom">
+    <hbox>
       <image class="secureLarry"/>
-      <description>&secureServer.description;</description>
+      <description class="title">&secureServer.description;</description>
     </hbox>
   </tooltip>