From cd2149b67ae1dd7467a58c9d1d02877a7709da91 Mon Sep 17 00:00:00 2001
From: Blake Winton <bwinton@latte.ca>
Date: Thu, 2 Jul 2009 20:53:08 -0700
Subject: [PATCH] Bug 490106 - Tooltips for autoconfig server security quality
 don't wrap, r=philringnalda

---
 mail/base/content/accountCreation.dtd         |  7 ++-
 .../gnomestripe/mail/accountCreation.css      | 16 +++++++
 .../themes/pinstripe/mail/accountCreation.css | 16 +++++++
 mail/themes/qute/mail/accountCreation.css     | 16 +++++++
 .../content/accountcreation/emailWizard.js    | 17 ++++---
 .../content/accountcreation/emailWizard.xul   | 45 ++++++++++++++++---
 6 files changed, 101 insertions(+), 16 deletions(-)

diff --git a/mail/base/content/accountCreation.dtd b/mail/base/content/accountCreation.dtd
index 496d3f1b30..25d72bfa76 100644
--- a/mail/base/content/accountCreation.dtd
+++ b/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">
diff --git a/mail/themes/gnomestripe/mail/accountCreation.css b/mail/themes/gnomestripe/mail/accountCreation.css
index f60262a844..4a0f6293a3 100644
--- a/mail/themes/gnomestripe/mail/accountCreation.css
+++ b/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;
+}
diff --git a/mail/themes/pinstripe/mail/accountCreation.css b/mail/themes/pinstripe/mail/accountCreation.css
index a3a54d5bbe..32e3f830d2 100644
--- a/mail/themes/pinstripe/mail/accountCreation.css
+++ b/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;
+}
diff --git a/mail/themes/qute/mail/accountCreation.css b/mail/themes/qute/mail/accountCreation.css
index 9fc6019e79..f29b43b68f 100644
--- a/mail/themes/qute/mail/accountCreation.css
+++ b/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;
+}
diff --git a/mailnews/base/prefs/resources/content/accountcreation/emailWizard.js b/mailnews/base/prefs/resources/content/accountcreation/emailWizard.js
index eef53238c6..047b44cc64 100644
--- a/mailnews/base/prefs/resources/content/accountcreation/emailWizard.js
+++ b/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;
     }
   },
diff --git a/mailnews/base/prefs/resources/content/accountcreation/emailWizard.xul b/mailnews/base/prefs/resources/content/accountcreation/emailWizard.xul
index 3db1887705..4bb1ea064d 100644
--- a/mailnews/base/prefs/resources/content/accountcreation/emailWizard.xul
+++ b/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>