Merge branch 'follow' into experimental

4 files changed, 231 insertions, 250 deletions

diff --git a/examples/config/config b/examples/config/config
index ab690e0..bcd6d3e 100644
--- a/examples/config/config
+++ b/examples/config/config
@@ -72,6 +72,7 @@ set download_handler    = sync_spawn @scripts_dir/download.sh
   # add some javascript to the page for other 'js' and 'script' commands to access later.
 @on_event   LOAD_COMMIT    js uzbl = {};
 @on_event   LOAD_COMMIT    script @scripts_dir/formfiller.js
+@on_event   LOAD_COMMIT    script @scripts_dir/follow.js
 
 # Userscripts/per-site-settings. See the script and the example configuration for details
 #@on_event   LOAD_COMMIT    spawn @scripts_dir/per-site-settings.py @data_home/uzbl/per-site-settings
@@ -93,6 +94,9 @@ set download_handler    = sync_spawn @scripts_dir/download.sh
 
 # === Behaviour and appearance ===============================================
 
+# Custom CSS can be defined here, including link follower hint styles
+set stylesheet_uri = file://@data_home/uzbl/style.css
+
 set show_status       = 1
 set status_top        = 0
 set status_background = #303030
@@ -327,7 +331,8 @@ set follow_hint_keys = 0123456789
 #set follow_hint_keys = qwerty
 #set follow_hint_keys = asdfghjkl;
 #set follow_hint_keys = thsnd-rcgmvwb/;789aefijkopquxyz234
-@cbind  fl*  = spawn @scripts_dir/follow.sh "%s"
+@cbind  fl*  = spawn @scripts_dir/follow.sh \@< uzbl.follow("\@follow_hint_keys", "%s", 0) >\@
+@cbind  Fl*  = spawn @scripts_dir/follow.sh \@< uzbl.follow("\@follow_hint_keys", "%s", 1) >\@
 @cbind  gi   = spawn @scripts_dir/go_input.sh
 
 # Form filler binds
diff --git a/examples/data/scripts/follow.js b/examples/data/scripts/follow.js
index d995696..536256b 100644
--- a/examples/data/scripts/follow.js
+++ b/examples/data/scripts/follow.js
@@ -1,219 +1,192 @@
 /* This is the basic linkfollowing script.
- * Its pretty stable, and you configure which keys to use for hinting
  *
- * TODO: Some pages mess around a lot with the zIndex which
- * lets some hints in the background.
- * TODO: Some positions are not calculated correctly (mostly
- * because of uber-fancy-designed-webpages. Basic HTML and CSS
- * works good
- * TODO: Still some links can't be followed/unexpected things
- * happen. Blame some freaky webdesigners ;)
+ * TODO:
+ * Some pages mess around a lot with the zIndex which
+ *  lets some hints in the background.
+ * Some positions are not calculated correctly (mostly
+ *  because of uber-fancy-designed-webpages. Basic HTML and CSS
+ *  works good
+ * Still some links can't be followed/unexpected things
+ *  happen. Blame some freaky webdesigners ;)
  */
 
-//Just some shortcuts and globals
-var uzblid = 'uzbl_link_hint';
-var uzbldivid = uzblid + '_div_container';
-var doc = document;
-var win = window;
-var links = document.links;
-var forms = document.forms;
-//Make onlick-links "clickable"
-try {
-    HTMLElement.prototype.click = function() {
-        if (typeof this.onclick == 'function') {
-            this.onclick({
-                type: 'click'
-            });
-        }
-    };
-} catch(e) {}
-//Catch the ESC keypress to stop linkfollowing
-function keyPressHandler(e) {
-    var kC = window.event ? event.keyCode: e.keyCode;
-    var Esc = window.event ? 27 : e.DOM_VK_ESCAPE;
-    if (kC == Esc) {
-        removeAllHints();
-    }
+// Globals
+uzbldivid = 'uzbl_link_hints';
+
+uzbl.follow = function() {
+    // Export
+    charset   = arguments[0];
+    newwindow = arguments[2];
+
+    var keypress = arguments[1];
+    return arguments.callee.followLinks(keypress);
+}
+
+uzbl.follow.isFrame = function(el) {
+    return (el.tagName == "FRAME" || el.tagName == "IFRAME");
+}
+
+// find the document that the given element belongs to
+uzbl.follow.getDocument = function(el) {
+    if (this.isFrame(el))
+        return el.contentDocument;
+
+    var doc = el;
+    while (doc.parentNode !== null)
+        doc = doc.parentNode;
+    return doc;
+}
+
+// find all documents in the display, searching frames recursively
+uzbl.follow.documents = function() {
+    return this.windows().map(function(w) { return w.document; }).filter(function(d) { return d != null; });
+}
+
+// find all windows in the display, searching for frames recursively
+uzbl.follow.windows = function(w) {
+    w = (typeof w == 'undefined') ? window.top : w;
+
+    var wins = [w];
+    var frames = w.frames;
+    for(var i = 0; i < frames.length; i++)
+        wins = wins.concat(uzbl.follow.windows(frames[i]));
+    return wins;
+}
+
+// search all frames for elements matching the given CSS selector
+uzbl.follow.query = function(selector) {
+    var res = [];
+    this.documents().forEach(function (doc) {
+        var set = doc.body.querySelectorAll(selector);
+        // convert the NodeList to an Array
+        set = Array.prototype.slice.call(set);
+        res = res.concat(set);
+    });
+    return res;
 }
-//Calculate element position to draw the hint
-//Pretty accurate but on fails in some very fancy cases
-function elementPosition(el) {
-    var up = el.offsetTop;
-    var left = el.offsetLeft;
-    var width = el.offsetWidth;
+
+// Calculate element position to draw the hint
+uzbl.follow.elementPosition = function(el) {
+    // el.getBoundingClientRect is another way to do this, but when a link is
+    // line-wrapped we want our hint at the left end of the link, not its
+    // bounding rectangle
+    var up     = el.offsetTop;
+    var left   = el.offsetLeft;
+    var width  = el.offsetWidth;
     var height = el.offsetHeight;
+
     while (el.offsetParent) {
         el = el.offsetParent;
         up += el.offsetTop;
         left += el.offsetLeft;
     }
+
     return [up, left, width, height];
 }
-//Calculate if an element is visible
-function isVisible(el) {
-    if (el == doc) {
-        return true;
-    }
-    if (!el) {
-        return false;
-    }
-    if (!el.parentNode) {
-        return false;
-    }
-    if (el.style) {
-        if (el.style.display == 'none') {
-            return false;
-        }
-        if (el.style.visibility == 'hidden') {
-            return false;
-        }
-    }
-    return isVisible(el.parentNode);
-}
-//Calculate if an element is on the viewport.
-function elementInViewport(el) {
-    offset = elementPosition(el);
-    var up = offset[0];
-    var left = offset[1];
-    var width = offset[2];
+
+// Calculate if an element is on the viewport.
+uzbl.follow.elementInViewport = function(el) {
+    offset = uzbl.follow.elementPosition(el);
+    var up     = offset[0];
+    var left   = offset[1];
+    var width  = offset[2];
     var height = offset[3];
-    return up < window.pageYOffset + window.innerHeight && left < window.pageXOffset + window.innerWidth && (up + height) > window.pageYOffset && (left + width) > window.pageXOffset;
+    return  up   < window.pageYOffset + window.innerHeight &&
+            left < window.pageXOffset + window.innerWidth &&
+            (up + height)  > window.pageYOffset &&
+            (left + width) > window.pageXOffset;
 }
-//Removes all hints/leftovers that might be generated
-//by this script.
-function removeAllHints() {
+
+// Removes all hints/leftovers that might be generated
+// by this script.
+uzbl.follow.removeAllHints = function(doc) {
     var elements = doc.getElementById(uzbldivid);
-    if (elements) {
-        elements.parentNode.removeChild(elements);
-    }
+    if (elements) elements.parentNode.removeChild(elements);
 }
-//Generate a hint for an element with the given label
-//Here you can play around with the style of the hints!
-function generateHint(el, label) {
-    var pos = elementPosition(el);
-    var hint = doc.createElement('div');
-    hint.setAttribute('name', uzblid);
+
+// Generate a hint for an element with the given label
+// Here you can play around with the style of the hints!
+uzbl.follow.generateHint = function(doc, el, label, top, left) {
+    var hint = doc.createElement('span');
     hint.innerText = label;
-    hint.style.display = 'inline';
-    hint.style.backgroundColor = '#B9FF00';
-    hint.style.border = '2px solid #4A6600';
-    hint.style.color = 'black';
-    hint.style.fontSize = '9px';
-    hint.style.fontWeight = 'bold';
-    hint.style.lineHeight = '9px';
-    hint.style.margin = '0px';
-    hint.style.width = 'auto'; // fix broken rendering on w3schools.com
-    hint.style.padding = '1px';
     hint.style.position = 'absolute';
-    hint.style.zIndex = '1000';
-    // hint.style.textTransform = 'uppercase';
-    hint.style.left = pos[1] + 'px';
-    hint.style.top = pos[0] + 'px';
-    // var img = el.getElementsByTagName('img');
-    // if (img.length > 0) {
-    //     hint.style.top = pos[1] + img[0].height / 2 - 6 + 'px';
-    // }
-    hint.style.textDecoration = 'none';
-    // hint.style.webkitBorderRadius = '6px'; // slow
-    // Play around with this, pretty funny things to do :)
-    // hint.style.webkitTransform = 'scale(1) rotate(0deg) translate(-6px,-5px)';
+    hint.style.top  = top  + 'px';
+    hint.style.left = left + 'px';
     return hint;
 }
 
-// Here we choose what to do with an element that the user has selected.
-// Form elements get selected and/or focussed, and links and buttons are
-// clicked. This function returns "XXXRESET_MODEXXX" to indicate that uzbl
-// should be reset to command mode with an empty keycmd, or
-// "XXX_EMIT_FORM_ACTIVEXXX" to indicate that uzbl should be set to insert mode.
-function clickElem(item) {
-    removeAllHints();
-    if (item) {
-        var name = item.tagName;
-        if (name == 'BUTTON') {
-            item.click();
-            return "XXXRESET_MODEXXX";
-        } else if (name == 'INPUT') {
-            var type = item.type.toUpperCase();
-            if (type == 'TEXT' || type == 'SEARCH' || type == 'PASSWORD') {
-                item.focus();
-                item.select();
-                return "XXXEMIT_FORM_ACTIVEXXX";
-            } else {
-                item.click();
-                return "XXXRESET_MODEXXX";
-            }
-        } else if (name == 'TEXTAREA' || name == 'SELECT') {
+// Here we choose what to do with an element if we
+// want to "follow" it. On form elements we "select"
+// or pass the focus, on links we try to perform a click,
+// but at least set the href of the link. (needs some improvements)
+uzbl.follow.clickElem = function(item) {
+    if(!item) return;
+    var name = item.tagName;
+
+    if (name == 'INPUT') {
+        var type = item.getAttribute('type').toUpperCase();
+        if (type == 'TEXT' || type == 'FILE' || type == 'PASSWORD') {
             item.focus();
             item.select();
             return "XXXEMIT_FORM_ACTIVEXXX";
-        } else {
-            item.click();
-            window.location = item.href;
-            return "XXXRESET_MODEXXX";
         }
+        // otherwise fall through to a simulated mouseclick.
+    } else if (name == 'TEXTAREA' || name == 'SELECT') {
+        item.focus();
+        item.select();
+        return "XXXEMIT_FORM_ACTIVEXXX";
     }
+
+    // simulate a mouseclick to activate the element
+    var mouseEvent = document.createEvent("MouseEvent");
+    mouseEvent.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
+    item.dispatchEvent(mouseEvent);
+    return "XXXRESET_MODEXXX";
 }
-//Returns a list of all links (in this version
-//just the elements itself, but in other versions, we
-//add the label here.
-function addLinks() {
-    res = [[], []];
-    for (var l = 0; l < links.length; l++) {
-        var li = links[l];
-        if (isVisible(li) && elementInViewport(li)) {
-            res[0].push(li);
-        }
-    }
-    return res;
-}
-//Same as above, just for the form elements
-function addFormElems() {
-    res = [[], []];
-    for (var f = 0; f < forms.length; f++) {
-        for (var e = 0; e < forms[f].elements.length; e++) {
-            var el = forms[f].elements[e];
-            if (el && ['INPUT', 'TEXTAREA', 'SELECT', 'BUTTON'].indexOf(el.tagName) + 1 && isVisible(el) && elementInViewport(el)) {
-                res[0].push(el);
-            }
-        }
-    }
-    return res;
-}
-//Draw all hints for all elements passed. "len" is for
-//the number of chars we should use to avoid collisions
-function reDrawHints(elems, chars) {
-    removeAllHints();
-    var hintdiv = doc.createElement('div');
-    hintdiv.setAttribute('id', uzbldivid);
-    for (var i = 0; i < elems[0].length; i++) {
-        if (elems[0][i]) {
-            var label = elems[1][i].substring(chars);
-            var h = generateHint(elems[0][i], label);
-            hintdiv.appendChild(h);
-        }
-    }
-    if (document.body) {
-        document.body.appendChild(hintdiv);
-    }
+
+// Draw all hints for all elements passed.
+uzbl.follow.reDrawHints = function(elems, chars) {
+    var elements  = elems.map(function(pair) { return pair[0] });
+    var labels    = elems.map(function(pair) { return pair[1].substring(chars) });
+    // we have to calculate element positions before we modify the DOM
+    // otherwise the elementPosition call slows way down.
+    var positions = elements.map(uzbl.follow.elementPosition);
+
+    this.documents().forEach(function(doc) {
+        uzbl.follow.removeAllHints(doc);
+        if (!doc.body) return;
+        doc.hintdiv = doc.createElement('div');
+        doc.hintdiv.id = uzbldivid;
+        if(newwindow) doc.hintdiv.className = "new-window";
+        doc.body.appendChild(doc.hintdiv);
+    });
+
+    elements.forEach(function(el, i) {
+        var label = labels[i];
+        var pos   = positions[i];
+        var doc   = uzbl.follow.getDocument(el);
+        var h = uzbl.follow.generateHint(doc, el, label, pos[0], pos[1]);
+        doc.hintdiv.appendChild(h);
+    });
 }
+
 // pass: number of keys
 // returns: key length
-function labelLength(n) {
+uzbl.follow.labelLength = function(n) {
     var oldn = n;
     var keylen = 0;
-    if(n < 2) {
-        return 1;
-    }
-    n -= 1; // our highest key will be n-1
+    if(n < 2) return 1;
+    n -= 1; // Our highest key will be n-1
     while(n) {
         keylen += 1;
         n = Math.floor(n / charset.length);
     }
     return keylen;
 }
+
 // pass: number
 // returns: label
-function intToLabel(n) {
+uzbl.follow.intToLabel = function(n) {
     var label = '';
     do {
         label = charset.charAt(n % charset.length) + label;
@@ -221,55 +194,68 @@ function intToLabel(n) {
     } while(n);
     return label;
 }
+
 // pass: label
 // returns: number
-function labelToInt(label) {
+uzbl.follow.labelToInt = function(label) {
     var n = 0;
-    var i;
-    for(i = 0; i < label.length; ++i) {
+    for(var i = 0; i < label.length; ++i) {
         n *= charset.length;
         n += charset.indexOf(label[i]);
     }
     return n;
 }
-//Put it all together
-function followLinks(follow) {
-    // if(follow.charAt(0) == 'l') {
-    //     follow = follow.substr(1);
-    //     charset = 'thsnlrcgfdbmwvz-/';
-    // }
+
+// Put it all together
+uzbl.follow.followLinks = function(follow) {
     var s = follow.split('');
-    var linknr = labelToInt(follow);
-    if (document.body) document.body.setAttribute('onkeyup', 'keyPressHandler(event)');
-    var linkelems = addLinks();
-    var formelems = addFormElems();
-    var elems = [linkelems[0].concat(formelems[0]), linkelems[1].concat(formelems[1])];
-    var len = labelLength(elems[0].length);
-    var oldDiv = doc.getElementById(uzbldivid);
-    var leftover = [[], []];
-    if (s.length == len && linknr < elems[0].length && linknr >= 0) {
-        return clickElem(elems[0][linknr]);
-    } else {
-        for (var j = 0; j < elems[0].length; j++) {
-            var b = true;
-            var label = intToLabel(j);
-            var n = label.length;
-            for (n; n < len; n++) {
-                label = charset.charAt(0) + label;
-            }
-            for (var k = 0; k < s.length; k++) {
-                b = b && label.charAt(k) == s[k];
-            }
-            if (b) {
-                leftover[0].push(elems[0][j]);
-                leftover[1].push(label);
-            }
+    var linknr = this.labelToInt(follow);
+
+    var followable  = 'a, area, textarea, select, input:not([type=hidden]), button';
+    var uri         = 'a, area, frame, iframe';
+    //var focusable   = 'a, area, textarea, select, input:not([type=hidden]), button, frame, iframe, applet, object';
+    //var desc        = '*[title], img[alt], applet[alt], area[alt], input[alt]';
+    //var image       = 'img, input[type=image]';
+
+    if(newwindow)
+        var res = this.query(uri);
+    else
+        var res = this.query(followable);
+
+    var elems = res.filter(uzbl.follow.elementInViewport);
+    var len = this.labelLength(elems.length);
+
+    if (s.length == len && linknr < elems.length && linknr >= 0) {
+        // an element has been selected!
+        var el = elems[linknr];
+
+        // clear all of our hints
+        this.documents().forEach(uzbl.follow.removeAllHints);
+
+        if (newwindow) {
+            // we're opening a new window using the URL attached to this element
+            var uri = el.src || el.href;
+            if(uri.match(/javascript:/)) return;
+            window.open(uri);
+            return "XXXRESET_MODEXXX"
         }
-        reDrawHints(leftover, s.length);
+
+        // we're just going to click the element
+        return this.clickElem(el);
     }
-}
 
-//Parse input: first argument is follow keys, second is user input.
-var args = '%s'.split(' ');
-var charset = args[0];
-followLinks(args[1]);
+    var leftover = [];
+    for (var j = 0; j < elems.length; j++) {
+        var b = true;
+        var label = this.intToLabel(j);
+        var n = label.length;
+        for (n; n < len; n++)
+            label = charset.charAt(0) + label;
+        for (var k = 0; k < s.length; k++)
+            b = b && label.charAt(k) == s[k];
+        if (b)
+            leftover.push([elems[j], label]);
+    }
+
+    this.reDrawHints(leftover, s.length);
+}
diff --git a/examples/data/scripts/follow.sh b/examples/data/scripts/follow.sh
index d7fe117..1f8947d 100755
--- a/examples/data/scripts/follow.sh
+++ b/examples/data/scripts/follow.sh
@@ -1,21 +1,11 @@
 #!/bin/sh
+# This scripts acts on the return value of followLinks in follow.js 
 
-# This script is just a wrapper around follow.js that lets us change uzbl's mode
-# after a link is selected.
-
-# if socat is installed then we can change Uzbl's input mode once a link is
-# selected; otherwise we just select a link.
-if ! which socat >/dev/null 2>&1; then
-  echo 'script @scripts_dir/follow.js "@{follow_hint_keys} '$1'"' > "$UZBL_FIFO"
-  exit
-fi
-
-result=$(echo 'script @scripts_dir/follow.js "@{follow_hint_keys} '$1'"' | socat - unix-connect:"$UZBL_SOCKET")
-case $result in
-  *XXXEMIT_FORM_ACTIVEXXX*)
+case "$1" in
+  XXXEMIT_FORM_ACTIVEXXX)
     # a form element was selected
-    echo 'event FORM_ACTIVE' > "$UZBL_FIFO" ;;
-  *XXXRESET_MODEXXX*)
+    printf 'event FORM_ACTIVE\nevent KEYCMD_CLEAR\n' > "$UZBL_FIFO" ;;
+  XXXRESET_MODEXXX)
     # a link was selected, reset uzbl's input mode
     printf 'set mode=\nevent KEYCMD_CLEAR\n' > "$UZBL_FIFO" ;;
 esac
diff --git a/examples/data/style.css b/examples/data/style.css
index f9b111e..ff055d1 100644
--- a/examples/data/style.css
+++ b/examples/data/style.css
@@ -1,25 +1,25 @@
-.uzbl_highlight { background-color: yellow;}
-.uzbl_h_first   { background-color: lightgreen;}
+#uzbl_link_hints > span {
+    z-index:            1000   !important;
 
-.uzbl_follow    { border-style:     dotted;
-                  border-width:     thin;
+    background-color:   #aaff00           !important;
+    border:             2px solid #556600 !important;
+    margin:             0                 !important;
+    padding:            1px               !important;
+
+    color:              black  !important;
+    font-size:          9px    !important;
+    line-height:        9px    !important;
+    font-weight:        bold   !important;
+    font-variant:       normal !important;
+    text-decoration:    none   !important;
+
+    -webkit-transform:  translate(-5px,-5px);
+    /* opacity:            0.7; */
 }
 
-#uzbl_hint > div    {
-	display:                        inline;
-	border:                         2px solid #4a6600;
-	background-color:               #b9ff00;
-	color:                          black;
-	font-size:                      9px;
-	font-weight:                    bold;
-	line-height:                    9px;
-	margin:                         0px;
-	padding:                        0px;
-	position:                       absolute;
-	z-index:                        1000;
-	-webkit-border-radius:          6px;
-	text-decoration:                none;
-	-wekit-transform:               scale(1) rotate(0deg) translate(-6px,-5px);
+/* we can have different colours for different types of hints! */
+#uzbl_link_hints.new-window > span {
+    background-color: #ffff00 !important;
 }
 
 /* vim:set et ts=4: */