From 8fd93fb3e29ca664a81be008987214fda95acce3 Mon Sep 17 00:00:00 2001
From: Shane Tomlinson <stomlinson@mozilla.com>
Date: Mon, 31 Oct 2011 17:52:06 +0000
Subject: [PATCH] Make the tooltip display period based on the amount of text
shown.
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
Min length of 2.5 seconds. The rest is based on a user reading ±200wpm, when the real average reading speed is ~250wpm.
close #508
---
resources/static/dialog/qunit.html | 16 ++++
resources/static/dialog/resources/tooltip.js | 28 +++++--
resources/static/dialog/test/qunit/qunit.js | 1 +
.../test/qunit/resources/tooltip_unit_test.js | 80 +++++++++++++++++++
.../static/dialog/views/authenticate.ejs | 6 +-
5 files changed, 118 insertions(+), 13 deletions(-)
create mode 100644 resources/static/dialog/test/qunit/resources/tooltip_unit_test.js
diff --git a/resources/static/dialog/qunit.html b/resources/static/dialog/qunit.html
index 93eb8cb21..8a9f00c07 100644
--- a/resources/static/dialog/qunit.html
+++ b/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>
diff --git a/resources/static/dialog/resources/tooltip.js b/resources/static/dialog/resources/tooltip.js
index 8625595e4..281e664db 100644
--- a/resources/static/dialog/resources/tooltip.js
+++ b/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);
}
}
diff --git a/resources/static/dialog/test/qunit/qunit.js b/resources/static/dialog/test/qunit/qunit.js
index e97265eb1..55f9a46cf 100644
--- a/resources/static/dialog/test/qunit/qunit.js
+++ b/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")
diff --git a/resources/static/dialog/test/qunit/resources/tooltip_unit_test.js b/resources/static/dialog/test/qunit/resources/tooltip_unit_test.js
new file mode 100644
index 000000000..85dae3a28
--- /dev/null
+++ b/resources/static/dialog/test/qunit/resources/tooltip_unit_test.js
@@ -0,0 +1,80 @@
+/*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();
+ });
+
+});
diff --git a/resources/static/dialog/views/authenticate.ejs b/resources/static/dialog/views/authenticate.ejs
index 4a4edfa17..b2aafa515 100644
--- a/resources/static/dialog/views/authenticate.ejs
+++ b/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>
--
GitLab