inital implementation of spatial navigation. bug=436084, r=gavin
authorDoug Turner <dougt@meer.net>
Tue, 08 Jul 2008 14:51:45 -0700
changeset 15742 f514587dd532f54a6ec4532b4916f96d38d3e524
parent 15741 a7a2c2589b2ae9c320e7978bb1d858365277cb0b
child 15743 6f6c7d842726b315830651f1158be39956726fcb
push idunknown
push userunknown
push dateunknown
reviewersgavin
bugs436084
milestone1.9.1a1pre
inital implementation of spatial navigation. bug=436084, r=gavin
toolkit/Makefile.in
toolkit/spatial-navigation/Makefile.in
toolkit/spatial-navigation/spatial-navigation.js
toolkit/spatial-navigation/tests/Makefile.in
toolkit/spatial-navigation/tests/chrome/test_snav.xul
--- a/toolkit/Makefile.in
+++ b/toolkit/Makefile.in
@@ -44,16 +44,17 @@ VPATH     = @srcdir@
 include $(DEPTH)/config/autoconf.mk
 
 DIRS	= \
 		content \
 		locales \
 		obsolete \
 		profile \
 		themes \
+		spatial-navigation \
 		$(NULL)
 
 ifneq (,$(filter gtk2,$(MOZ_WIDGET_TOOLKIT)))
 DIRS += system/unixproxy
 endif
 
 ifneq (,$(filter cocoa,$(MOZ_WIDGET_TOOLKIT)))
 DIRS += system/osxproxy
new file mode 100644
--- /dev/null
+++ b/toolkit/spatial-navigation/Makefile.in
@@ -0,0 +1,50 @@
+# ***** 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.org build system.
+#
+# The Initial Developer of the Original Code is Mozilla Corporation
+# Portions created by the Initial Developer are Copyright (C) 2008
+# the Initial Developer. All Rights Reserved.
+#
+# Contributor(s):
+#  Doug Turner <dougt@meer.net>
+#
+# 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 *****
+
+DEPTH		= ../..
+topsrcdir	= @top_srcdir@
+srcdir		= @srcdir@
+VPATH		= @srcdir@
+
+include $(DEPTH)/config/autoconf.mk
+
+EXTRA_JS_MODULES = spatial-navigation.js
+
+ifdef ENABLE_TESTS
+	DIRS += tests
+endif
+
+include $(topsrcdir)/config/rules.mk
new file mode 100644
--- /dev/null
+++ b/toolkit/spatial-navigation/spatial-navigation.js
@@ -0,0 +1,344 @@
+/* ***** 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 Spatial Navigation.
+ *
+ * The Initial Developer of the Original Code is Mozilla Corporation
+ * Portions created by the Initial Developer are Copyright (C) 2008
+ * the Initial Developer. All Rights Reserved.
+ *
+ * Contributor(s):
+ *  Doug Turner <dougt@meer.net>  (Original Author)
+ *
+ * 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 ***** */
+
+/**
+ * 
+ * Import this module through
+ *
+ * Components.utils.import("resource://gre/modules/spatial-navigation.jsm");
+ *
+ * Usage:
+ *
+ *
+ * var snav = new SpatialNavigation(browser_element, optional_callback);
+ *
+ * optional_callback will be called when a new element is focused.
+ *
+ *    function optional_callback(element) {}
+ *
+ */
+
+
+var EXPORTED_SYMBOLS = ["SpatialNavigation"];
+
+function SpatialNavigation (browser, callback)
+{
+  browser.addEventListener("keypress", function (event) { _onInputKeyPress(event, callback) }, true);
+};
+
+SpatialNavigation.prototype = {
+};
+
+
+// Private stuff
+
+const Cc = Components.classes;
+const Ci = Components.interfaces;
+
+function dump(msg)
+{
+    var console = Cc["@mozilla.org/consoleservice;1"].getService(Ci.nsIConsoleService);
+    console.logStringMessage("*** SNAV: " + msg);
+}
+
+var gDirectionalBias = 10;
+var gRectFudge = 1;
+
+function _onInputKeyPress (event, callback) {
+    
+    // If it isn't an arrow key, bail.
+    if (event.keyCode != event.DOM_VK_LEFT  &&
+        event.keyCode != event.DOM_VK_RIGHT &&
+        event.keyCode != event.DOM_VK_UP    &&
+        event.keyCode != event.DOM_VK_DOWN  )
+        return;
+    
+    function snavfilter(node) {
+             
+        if (node instanceof Ci.nsIDOMHTMLLinkElement ||
+            node instanceof Ci.nsIDOMHTMLAnchorElement) {
+            // if a anchor doesn't have a href, don't target it.
+            if (node.href == "")
+                return Ci.nsIDOMNodeFilter.FILTER_SKIP;
+            return  Ci.nsIDOMNodeFilter.FILTER_ACCEPT;
+        }
+        
+        if (node instanceof Ci.nsIDOMHTMLInputElement  ||
+            node instanceof Ci.nsIDOMHTMLSelectElement ||
+            node instanceof Ci.nsIDOMHTMLOptionElement)
+            return Ci.nsIDOMNodeFilter.FILTER_ACCEPT;
+        return Ci.nsIDOMNodeFilter.FILTER_SKIP;
+    }
+    var bestElementToFocus = null;
+    var distanceToBestElement = Infinity;
+    var focusedRect = _inflateRect(event.target.getBoundingClientRect(),
+                                   - gRectFudge);
+    var doc = event.target.ownerDocument;
+    
+    var treeWalker = doc.createTreeWalker(doc, Ci.nsIDOMNodeFilter.SHOW_ELEMENT, snavfilter, false);
+    var nextNode;
+    
+    while ((nextNode = treeWalker.nextNode())) {
+        
+        if (nextNode == event.target)
+            continue;
+        
+        var nextRect = _inflateRect(nextNode.getBoundingClientRect(),
+                                    - gRectFudge);
+        
+        if (! _isRectInDirection(event, focusedRect, nextRect))
+            continue;
+        
+        var distance = _spatialDistance(event, focusedRect, nextRect);
+        
+        if (distance <= distanceToBestElement && distance > 0) {
+            distanceToBestElement = distance;
+            bestElementToFocus = nextNode;
+        }
+    }
+    
+    if (bestElementToFocus != null) {
+        //        dump("focusing element  " + bestElementToFocus.nodeName + " " + bestElementToFocus);
+        // Wishing we could do element.focus()
+        doc.defaultView.QueryInterface(Ci.nsIInterfaceRequestor).getInterface(Ci.nsIDOMWindowUtils).focus(bestElementToFocus);
+
+        if (callback != undefined)
+           callback(bestElementToFocus);
+
+    } else {
+        // couldn't find anything.  just advance and hope.
+        //        dump("advancing focus");
+        var windowMediator = Cc['@mozilla.org/appshell/window-mediator;1'].getService(Ci.nsIWindowMediator);
+        var window = windowMediator.getMostRecentWindow("navigator:browser");
+        window.document.commandDispatcher.advanceFocus();
+
+        if (callback != undefined)
+           callback(null);
+    }
+    
+    event.preventDefault();
+    event.stopPropagation();
+}
+
+function _isRectInDirection(event, focusedRect, anotherRect)
+{
+    if (event.keyCode == event.DOM_VK_LEFT) {  
+        return (anotherRect.left < focusedRect.left);
+    }
+    
+    if (event.keyCode == event.DOM_VK_RIGHT) {
+        return (anotherRect.right > focusedRect.right);
+    }
+    
+    if (event.keyCode == event.DOM_VK_UP) {
+        return (anotherRect.top < focusedRect.top);
+    }
+    
+    if (event.keyCode == event.DOM_VK_DOWN) {
+        return (anotherRect.bottom > focusedRect.bottom);
+    }
+    return false;
+}
+
+function _inflateRect(rect, value)
+{
+    var newRect = new Object();
+    
+    newRect.left   = rect.left - value;
+    newRect.top    = rect.top - value;
+    newRect.right  = rect.right  + value;
+    newRect.bottom = rect.bottom + value;
+    return newRect;
+}
+
+function _containsRect(a, b)
+{
+    return ( (b.left  <= a.right) &&
+             (b.right >= a.left)  &&
+             (b.top  <= a.bottom) &&
+             (b.bottom >= a.top) );
+}
+
+function _spatialDistance(event, a, b)
+{
+    var inlineNavigation = false;
+    var mx, my, nx, ny;
+    
+    if (event.keyCode == event.DOM_VK_LEFT) {
+        
+        //  |---|
+        //  |---|
+        //
+        //  |---|  |---|
+        //  |---|  |---|
+        //
+        //  |---|
+        //  |---|
+        //
+        
+        if (a.top > b.bottom) {
+            // the b rect is above a.
+            mx = a.left;
+            my = a.top;
+            nx = b.right;
+            ny = b.bottom;
+        }
+        else if (a.bottom < b.top) {
+            // the b rect is below a.
+            mx = a.left;
+            my = a.bottom;
+            nx = b.right;
+            ny = b.top;       
+        }
+        else {
+            mx = a.left;
+            my = 0;
+            nx = b.right; 
+            ny = 0;    
+        }
+    } else if (event.keyCode == event.DOM_VK_RIGHT) {
+        
+        //         |---|
+        //         |---|
+        //
+        //  |---|  |---|
+        //  |---|  |---|
+        //
+        //         |---|
+        //         |---|
+        //
+        
+        if (a.top > b.bottom) {
+            // the b rect is above a.
+            mx = a.right;
+            my = a.top;
+            nx = b.left;
+            ny = b.bottom;
+        }
+        else if (a.bottom < b.top) {
+            // the b rect is below a.
+            mx = a.right;
+            my = a.bottom;
+            nx = b.left;
+            ny = b.top;       
+        } else {
+            mx = a.right;
+            my = 0;
+            nx = b.left; 
+            ny = 0;	    
+        }
+    } else if (event.keyCode == event.DOM_VK_UP) {
+        
+        //  |---|  |---|  |---|
+        //  |---|  |---|  |---|
+        //
+        //         |---|
+        //         |---|
+        //
+        
+        if (a.left > b.right) {
+            // the b rect is to the left of a.
+            mx = a.left;
+            my = a.top;
+            nx = b.right;
+            ny = b.bottom;
+        } else if (a.right < b.left) {
+            // the b rect is to the right of a
+            mx = a.right;
+            my = a.top;
+            nx = b.left;
+            ny = b.bottom;       
+        } else {
+            // both b and a share some common x's.
+            mx = 0;
+            my = a.top;
+            nx = 0;
+            ny = b.bottom;
+        }
+    } else if (event.keyCode == event.DOM_VK_DOWN) {
+        
+        //         |---|
+        //         |---|
+        //
+        //  |---|  |---|  |---|
+        //  |---|  |---|  |---|
+        //
+        
+        if (a.left > b.right) {
+            // the b rect is to the left of a.
+            mx = a.left;
+            my = a.bottom;
+            nx = b.right;
+            ny = b.top;
+        } else if (a.right < b.left) {
+            // the b rect is to the right of a
+            mx = a.right;
+            my = a.bottom;
+            nx = b.left;
+            ny = b.top;      
+        } else {
+            // both b and a share some common x's.
+            mx = 0;
+            my = a.bottom;
+            nx = 0;
+            ny = b.top;
+        }
+    }
+    
+    var scopedRect = _inflateRect(a, gRectFudge);
+    
+    if (event.keyCode == event.DOM_VK_LEFT || 
+        event.keyCode == event.DOM_VK_RIGHT) {
+        scopedRect.left = 0;
+        scopedRect.right = Infinity;
+        inlineNavigation = _containsRect(scopedRect, b);
+    }
+    else if (event.keyCode == event.DOM_VK_UP ||
+             event.keyCode == event.DOM_VK_DOWN) {
+        scopedRect.top = 0;
+        scopedRect.bottom = Infinity;
+        inlineNavigation = _containsRect(scopedRect, b);
+    }
+    
+    var d = Math.pow((mx-nx), 2) + Math.pow((my-ny), 2);
+    
+    // prefer elements directly aligned with the focused element
+    if (inlineNavigation)
+        d /= gDirectionalBias;
+    
+    return d;
+}
+
new file mode 100644
--- /dev/null
+++ b/toolkit/spatial-navigation/tests/Makefile.in
@@ -0,0 +1,53 @@
+# ***** 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.org build system.
+#
+# The Initial Developer of the Original Code is Mozilla Corporation
+# Portions created by the Initial Developer are Copyright (C) 2008
+# the Initial Developer. All Rights Reserved.
+#
+# Contributor(s):
+#  Doug Turner <dougt@meer.net>
+#
+# 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 *****
+
+DEPTH		= ../../..
+topsrcdir	= @top_srcdir@
+srcdir		= @srcdir@
+VPATH		= @srcdir@
+relativesrcdir	= toolkit/spatial-navigation/tests
+
+include $(DEPTH)/config/autoconf.mk
+
+MODULE		= test_snav
+
+MOCHI_TESTS = chrome/test_snav.xul \
+              $(NULL)
+
+include $(topsrcdir)/config/rules.mk
+
+libs:: $(MOCHI_TESTS) $(MOCHI_CONTENT)
+	$(INSTALL) $(foreach f,$^,"$f") $(DEPTH)/_tests/testing/mochitest/chrome/$(relativesrcdir)
new file mode 100644
--- /dev/null
+++ b/toolkit/spatial-navigation/tests/chrome/test_snav.xul
@@ -0,0 +1,80 @@
+<?xml version="1.0"?>
+<?xml-stylesheet href="chrome://global/skin" type="text/css"?>
+<?xml-stylesheet href="chrome://mochikit/content/tests/SimpleTest/test.css type="text/css"?>
+
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=436084
+-->
+
+<window title="Mozilla Bug 288254"
+  xmlns:html="http://www.w3.org/1999/xhtml"
+  xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+  onload="onLoad();">
+
+  <script type="application/javascript" src="chrome://mochikit/content/MochiKit/packed.js"></script>
+  <script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"/>
+  <script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/EventUtils.js"></script>      
+
+<body id="some-content" xmlns="http://www.w3.org/1999/xhtml">
+
+<a id="start" href="https://bugzilla.mozilla.org/show_bug.cgi?id=436084">Mozilla Bug 436084</a>
+<table
+ style="text-align: left; width: 100%; margin-left: auto; margin-right: auto;" border="1" cellpadding="2" cellspacing="2">
+  <tbody>
+    <tr>
+      <td style="vertical-align: top; text-align: center;"><a id="1" href="a">test</a></td>
+      <td style="vertical-align: top; text-align: center;"><a id="2" href="a">test</a></td>
+      <td style="vertical-align: top; text-align: center;"><a id="3" href="a">test</a></td>
+    </tr>
+    <tr>
+      <td style="vertical-align: top; text-align: center;"><a id="4" href="a">test</a></td>
+      <td style="vertical-align: top; text-align: center;"><a id="5" href="a">test</a></td>
+      <td style="vertical-align: top; text-align: center;"><a id="6" href="a">test</a></td>
+    </tr>
+    <tr>
+      <td style="vertical-align: top; text-align: center;"><a id="7" href="a">test</a></td>
+      <td style="vertical-align: top; text-align: center;"><a id="8" href="a">test</a></td>
+      <td style="vertical-align: top; text-align: center;"><a id="9" href="a">test</a></td>
+    </tr>
+  </tbody>
+</table>
+</body>
+
+
+<script class="testbody" type="application/javascript">
+<![CDATA[
+Components.utils.import("resource://gre/modules/spatial-navigation.jsm");
+
+function onLoad()
+{
+    var x = document.getElementById("some-content");
+    var snav = new SpatialNavigation(x);
+
+    function moveAndVerify(direction, value)
+    {
+        sendKey(direction, document.activeElement);
+        ok(document.activeElement.getAttribute("id") == value, "Move");
+    }
+    
+    // get to a known place.
+    document.getElementById("start").focus();
+    
+    // from start.
+    moveAndVerify("DOWN", "1");
+    
+    for (var i = 1 ; i < 10 ; i ++) {
+        moveAndVerify("DOWN", "4");
+        moveAndVerify("DOWN", "7");
+        moveAndVerify("RIGHT", "8");
+        moveAndVerify("RIGHT", "9");
+        moveAndVerify("UP", "6");
+        moveAndVerify("UP", "3");
+        moveAndVerify("LEFT", "2");
+        moveAndVerify("LEFT", "1");
+    }
+}
+
+SimpleTest.finish()
+
+]]></script>
+</window>