Merge branch 'flexible_tooltip' into dev

resources/static/dialog/qunit.html

@@ -38,5 +38,21 @@
       <span id="siteinfo" class="error"><span class="website"></span></span>
       <span class=".hint">Hint</span>
     </div>
+
+    <div id="needsTooltip">Tooltip Anchor</div>
+
+    <div id="shortTooltip" class="tooltip" for="needsTooltip">
+      short tooltip
+    </div>
+
+    <div id="longTooltip" class="tooltip" for="needsTooltip">
+      This is a long tooltip.  This should remain on the screen for about 5 seconds.
+    </div>
+
+    <script type="text/html" id="templateTooltip">
+      <div class="tooltip">
+        {{ contents }}
+      </div>
+    </script>
 	</body>
 </html>

resources/static/dialog/resources/tooltip.js

@@ -39,7 +39,8 @@ BrowserID.Tooltip = (function() {
   "use strict";
 
   var ANIMATION_TIME = 250,
-      TOOLTIP_DISPLAY = 2000;
+      TOOLTIP_DISPLAY = 2000,
+      READ_WPM = 200;
 
   function createTooltip(el) {
       var contents = el.html();
@@ -63,14 +64,21 @@ BrowserID.Tooltip = (function() {
   }
 
   function animateTooltip(el, complete) {
+    var contents = el.text().replace(/\s+/, ' ').replace(/^\s+/, '').replace(/\s+$/, '');
+    var words = contents.split(' ').length;
+
+    // The average person can read ± 250 wpm.
+    var wordTimeMS = (words / READ_WPM) * 60 * 1000;
+    var displayTimeMS = Math.max(wordTimeMS, TOOLTIP_DISPLAY);
+
     el.fadeIn(ANIMATION_TIME, function() {
       setTimeout(function() {
         el.fadeOut(ANIMATION_TIME, complete);
-      }, TOOLTIP_DISPLAY);
+      }, displayTimeMS);
     });
   }
 
-  function createAndShowRelatedTooltip(el, relatedTo) {
+  function createAndShowRelatedTooltip(el, relatedTo, complete) {
       // This means create a copy of the tooltip element and position it in 
       // relation to an element.  Right now we are putting the tooltip directly 
       // above the element.  Once the tooltip is no longer needed, remove it 
@@ -81,22 +89,26 @@ BrowserID.Tooltip = (function() {
       positionTooltip(tooltip, target);
 
       animateTooltip(tooltip, function() {
-        tooltip.remove();
-        tooltip = null;
+        console.log("close tooltip");
+        if (tooltip) {
+          tooltip.remove();
+          tooltip = null;
+        }
+        if (complete) complete();
       });
   }
 
-  function showTooltip(el) {
+  function showTooltip(el, complete) {
     el = $(el);
     var messageFor = el.attr("for");
 
     // First, see if we are "for" another element, if we are, create a copy of 
     // the tooltip to attach to the element.
     if(messageFor) {
-      createAndShowRelatedTooltip(el, messageFor);
+      createAndShowRelatedTooltip(el, messageFor, complete);
     }
     else {
-      animateTooltip(el);
+      animateTooltip(el, complete);
     }
   }
 

resources/static/dialog/test/qunit/qunit.js

@@ -21,6 +21,7 @@ steal("/dialog/resources/browserid.js",
   .then("include_unit_test")
   .then("relay/relay_unit_test")
   .then("pages/add_email_address_test")
+  .then("resources/tooltip_unit_test")
   .then("resources/channel_unit_test")
   .then("resources/browser-support_unit_test")
   .then("resources/validation_unit_test")

resources/static/dialog/test/qunit/resources/tooltip_unit_test.js

+/*jshint browser:true, jQuery: true, forin: true, laxbreak:true */                                             
+/*globals BrowserID: true, _:true */
+/* ***** BEGIN LICENSE BLOCK *****
+ * Version: MPL 1.1/GPL 2.0/LGPL 2.1
+ *
+ * The contents of this file are subject to the Mozilla Public License Version
+ * 1.1 (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ * http://www.mozilla.org/MPL/
+ *
+ * Software distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License
+ * for the specific language governing rights and limitations under the
+ * License.
+ *
+ * The Original Code is Mozilla bid.
+ *
+ * The Initial Developer of the Original Code is Mozilla.
+ * Portions created by the Initial Developer are Copyright (C) 2011
+ * the Initial Developer. All Rights Reserved.
+ *
+ * Contributor(s):
+ *
+ * Alternatively, the contents of this file may be used under the terms of
+ * either the GNU General Public License Version 2 or later (the "GPL"), or
+ * the GNU Lesser General Public License Version 2.1 or later (the "LGPL"),
+ * in which case the provisions of the GPL or the LGPL are applicable instead
+ * of those above. If you wish to allow use of your version of this file only
+ * under the terms of either the GPL or the LGPL, and not to allow others to
+ * use your version of this file under the terms of the MPL, indicate your
+ * decision by deleting the provisions above and replace them with the notice
+ * and other provisions required by the GPL or the LGPL. If you do not delete
+ * the provisions above, a recipient may use your version of this file under
+ * the terms of any one of the MPL, the GPL or the LGPL.
+ *
+ * ***** END LICENSE BLOCK ***** */
+steal.plugins("jquery", "funcunit/qunit").then("/dialog/resources/tooltip", function() {
+  "use strict";
+
+  var bid = BrowserID,
+      tooltip = bid.Tooltip
+
+  module("/resources/tooltip", {
+    setup: function() {
+    },
+    teardown: function() {
+    }
+  });
+
+
+  test("show short tooltip, min of 2.5 seconds", function() {
+    var startTime = new Date().getTime();
+
+    tooltip.showTooltip("#shortTooltip", function() {
+      console.log("calling tooltip back");
+      var endTime = new Date().getTime();
+      var diff = endTime - startTime;
+      ok(2000 <= diff && diff <= 3000, diff + " - minimum of 2 seconds, max of 3 seconds");
+
+      start();
+    });
+
+    stop();
+  });
+
+  test("show long tooltip, takes about 5 seconds", function() {
+    var startTime = new Date().getTime();
+
+    tooltip.showTooltip("#longTooltip", function() {
+      var endTime = new Date().getTime();
+      var diff = endTime - startTime;
+      ok(diff >= 4500, diff + " - longer tooltip is on the screen for a bit longer");
+
+      start();
+    });
+
+    stop();
+  });
+
+});

resources/static/dialog/views/authenticate.ejs

@@ -15,11 +15,7 @@
               </div>
 
               <div id="could_not_add" class="tooltip" for="email">
-                We just sent an email to that address!  If you really want to send another, wait a minute or two and try again.
-              </div>
-
-              <div id="cannotStage" class="tooltip" for="email">
-                We just sent an email to that address!  If you really want to send another, wait a minute or two and try again.
+                We just sent an email to that address! If you really want to send another, wait a minute or two and try again.
               </div>
           </li>