modules/hints.js

   1 /**
   2  * (C) Copyright 2007-2008 Jeremy Maitin-Shepard
   3  * (C) Copyright 2009-2010 John J. Foerch
   4  *
   5  * Portions of this file are derived from Vimperator,
   6  * (C) Copyright 2006-2007 Martin Stubenschrott.
   7  *
   8  * Use, modification, and distribution are subject to the terms specified in the
   9  * COPYING file.
  10 **/
  11
  12 in_module(null);
  13
  14 define_variable("active_img_hint_background_color", "#88FF00",
  15     "Color for the active image hint background.");
  16
  17 define_variable("img_hint_background_color", "yellow",
  18     "Color for inactive image hint backgrounds.");
  19
  20 define_variable("active_hint_background_color", "#88FF00",
  21     "Color for the active hint background.");
  22
  23 define_variable("hint_background_color", "yellow",
  24     "Color for the inactive hint.");
  25
  26
  27 /**
  28  * Register hints style sheet
  29  */
  30 const hints_stylesheet = "chrome://conkeror-gui/content/hints.css";
  31 register_user_stylesheet(hints_stylesheet);
  32
  33
  34 function hints_simple_text_match (text, pattern) {
  35     var pos = text.indexOf(pattern);
  36     if (pos == -1)
  37         return false;
  38     return [pos, pos + pattern.length];
  39 }
  40
  41 define_variable('hints_text_match', hints_simple_text_match,
  42     "A function which takes a string and a pattern (another string) "+
  43     "and returns an array of [start, end] indices if the pattern was "+
  44     "found in the string, or false if it was not.");
  45
  46
  47 /**
  48  *   In the hints interaction, a node can be selected either by typing
  49  * the number of its associated hint, or by typing substrings of the
  50  * text content of the node.  In the case of selecting by text
  51  * content, multiple substrings can be given by separating them with
  52  * spaces.
  53  */
  54 function hint_manager (window, xpath_expr, focused_frame, focused_element) {
  55     this.window = window;
  56     this.hints = [];
  57     this.valid_hints = [];
  58     this.xpath_expr = xpath_expr;
  59     this.focused_frame = focused_frame;
  60     this.focused_element = focused_element;
  61     this.last_selected_hint = null;
  62
  63     // Generate
  64     this.generate_hints();
  65 }
  66
  67 hint_manager.prototype = {
  68     current_hint_string: "",
  69     current_hint_number: -1,
  70
  71     /**
  72      * Create an initially hidden hint span element absolutely
  73      * positioned over each element that matches
  74      * hint_xpath_expression.  This is done recursively for all frames
  75      * and iframes.  Information about the resulting hints are also
  76      * stored in the hints array.
  77      */
  78     generate_hints: function () {
  79         var topwin = this.window;
  80         var top_height = topwin.innerHeight;
  81         var top_width = topwin.innerWidth;
  82         var hints = this.hints;
  83         var xpath_expr = this.xpath_expr;
  84         var focused_frame_hint = null, focused_element_hint = null;
  85         var focused_frame = this.focused_frame;
  86         var focused_element = this.focused_element;
  87
  88         function helper (window, offsetX, offsetY) {
  89             var win_height = window.height;
  90             var win_width = window.width;
  91
  92             // Bounds
  93             var minX = offsetX < 0 ? -offsetX : 0;
  94             var minY = offsetY < 0 ? -offsetY : 0;
  95             var maxX = offsetX + win_width > top_width ? top_width - offsetX : top_width;
  96             var maxY = offsetY + win_height > top_height ? top_height - offsetY : top_height;
  97
  98             var scrollX = window.scrollX;
  99             var scrollY = window.scrollY;
 100
 101             var doc = window.document;
 102             var res = doc.evaluate(xpath_expr, doc, xpath_lookup_namespace,
 103                                    Ci.nsIDOMXPathResult.UNORDERED_NODE_ITERATOR_TYPE,
 104                                    null /* existing results */);
 105
 106             var base_node = doc.createElementNS(XHTML_NS, "span");
 107             base_node.className = "__conkeror_hint";
 108
 109             var fragment = doc.createDocumentFragment();
 110             var rect, elem, text, node, show_text;
 111             while (true) {
 112                 try {
 113                     elem = res.iterateNext();
 114                     if (!elem)
 115                         break;
 116                 } catch (e) {
 117                     break; // Iterator may have been invalidated by page load activity
 118                 }
 119                 rect = elem.getBoundingClientRect();
 120                 if (elem instanceof Ci.nsIDOMHTMLAreaElement) {
 121                     rect = { top: rect.top,
 122                              left: rect.left,
 123                              bottom: rect.bottom,
 124                              right: rect.right };
 125                     var coords = elem.getAttribute("coords");
 126                     if (coords) {
 127                         coords = coords.match(/^(-?\d+)\D+(-?\d+)/);
 128                         if (coords.length == 3) {
 129                             rect.left += parseInt(coords[1]);
 130                             rect.top += parseInt(coords[2]);
 131                         }
 132                     }
 133                 }
 134                 if (!rect || rect.left > maxX || rect.right < minX || rect.top > maxY || rect.bottom < minY)
 135                     continue;
 136                 let style = topwin.getComputedStyle(elem, "");
 137                 if (style.display == "none" || style.visibility == "hidden")
 138                     continue;
 139                 if (! (elem instanceof Ci.nsIDOMHTMLAreaElement))
 140                     rect = elem.getClientRects()[0];
 141                 if (!rect)
 142                     continue;
 143                 show_text = false;
 144                 if (elem instanceof Ci.nsIDOMHTMLInputElement || elem instanceof Ci.nsIDOMHTMLTextAreaElement)
 145                     text = elem.value;
 146                 else if (elem instanceof Ci.nsIDOMHTMLSelectElement) {
 147                     if (elem.selectedIndex >= 0)
 148                         text = elem.item(elem.selectedIndex).text;
 149                     else
 150                         text = "";
 151                 } else if (elem instanceof Ci.nsIDOMHTMLFrameElement) {
 152                     text = elem.name ? elem.name : "";
 153                 } else if (/^\s*$/.test(elem.textContent) &&
 154                            elem.childNodes.length == 1 &&
 155                            elem.childNodes.item(0) instanceof Ci.nsIDOMHTMLImageElement) {
 156                     text = elem.childNodes.item(0).alt;
 157                     show_text = true;
 158                 } else
 159                     text = elem.textContent;
 160                 text = text.toLowerCase();
 161
 162                 node = base_node.cloneNode(true);
 163                 node.style.left = (rect.left + scrollX) + "px";
 164                 node.style.top = (rect.top + scrollY) + "px";
 165                 fragment.appendChild(node);
 166
 167                 let hint = { text: text,
 168                              elem: elem,
 169                              hint: node,
 170                              img_hint: null,
 171                              visible: false,
 172                              show_text: show_text };
 173                 if (elem.style) {
 174                     hint.saved_color = elem.style.color;
 175                     hint.saved_bgcolor = elem.style.backgroundColor;
 176                 }
 177                 hints.push(hint);
 178
 179                 if (elem == focused_element)
 180                     focused_element_hint = hint;
 181                 else if ((elem instanceof Ci.nsIDOMHTMLFrameElement ||
 182                           elem instanceof Ci.nsIDOMHTMLIFrameElement) &&
 183                          elem.contentWindow == focused_frame)
 184                     focused_frame_hint = hint;
 185             }
 186             doc.documentElement.appendChild(fragment);
 187
 188             /* Recurse into any IFRAME or FRAME elements */
 189             var frametag = "frame";
 190             while (true) {
 191                 var frames = doc.getElementsByTagName(frametag);
 192                 for (var i = 0, nframes = frames.length; i < nframes; ++i) {
 193                     elem = frames[i];
 194                     rect = elem.getBoundingClientRect();
 195                     if (!rect || rect.left > maxX || rect.right < minX || rect.top > maxY || rect.bottom < minY)
 196                         continue;
 197                     helper(elem.contentWindow, offsetX + rect.left, offsetY + rect.top);
 198                 }
 199                 if (frametag == "frame") frametag = "iframe"; else break;
 200             }
 201         }
 202         helper(topwin, 0, 0);
 203         this.last_selected_hint = focused_element_hint || focused_frame_hint;
 204     },
 205
 206     /* Updates valid_hints and also re-numbers and re-displays all hints. */
 207     update_valid_hints: function () {
 208         this.valid_hints = [];
 209         var active_number = this.current_hint_number;
 210
 211         var tokens = this.current_hint_string.split(" ");
 212         var rect, h, text, img_hint, doc, scrollX, scrollY;
 213         var hints = this.hints;
 214
 215     outer:
 216         for (var i = 0, nhints = hints.length; i < nhints; ++i) {
 217             h = hints[i];
 218             text = h.text;
 219             for (var j = 0, ntokens = tokens.length; j < ntokens; ++j) {
 220                 if (! hints_text_match(text, tokens[j])) {
 221                     if (h.visible) {
 222                         h.visible = false;
 223                         h.hint.style.display = "none";
 224                         if (h.img_hint)
 225                             h.img_hint.style.display = "none";
 226                         if (h.saved_color != null) {
 227                             h.elem.style.backgroundColor = h.saved_bgcolor;
 228                             h.elem.style.color = h.saved_color;
 229                         }
 230                     }
 231                     continue outer;
 232                 }
 233             }
 234
 235             var cur_number = this.valid_hints.length + 1;
 236             h.visible = true;
 237
 238             if (h == this.last_selected_hint && active_number == -1)
 239                 this.current_hint_number = active_number = cur_number;
 240
 241             var img_elem = null;
 242
 243             if (text.length == 0 && h.elem.firstChild &&
 244                 h.elem.firstChild instanceof Ci.nsIDOMHTMLImageElement)
 245                 img_elem = h.elem.firstChild;
 246             else if (h.elem instanceof Ci.nsIDOMHTMLImageElement)
 247                 img_elem = h.elem;
 248
 249             if (img_elem) {
 250                 if (!h.img_hint) {
 251                     rect = img_elem.getBoundingClientRect();
 252                     if (rect) {
 253                         doc = h.elem.ownerDocument;
 254                         scrollX = doc.defaultView.scrollX;
 255                         scrollY = doc.defaultView.scrollY;
 256                         img_hint = doc.createElementNS(XHTML_NS, "span");
 257                         img_hint.className = "__conkeror_img_hint";
 258                         img_hint.style.left = (rect.left + scrollX) + "px";
 259                         img_hint.style.top = (rect.top + scrollY) + "px";
 260                         img_hint.style.width = (rect.right - rect.left) + "px";
 261                         img_hint.style.height = (rect.bottom - rect.top) + "px";
 262                         h.img_hint = img_hint;
 263                         doc.documentElement.appendChild(img_hint);
 264                     } else
 265                         img_elem = null;
 266                 }
 267                 if (img_elem) {
 268                     var bgcolor = (active_number == cur_number) ?
 269                         active_img_hint_background_color : img_hint_background_color;
 270                     h.img_hint.style.backgroundColor = bgcolor;
 271                     h.img_hint.style.display = "inline";
 272                 }
 273             }
 274
 275             if (!h.img_hint && h.elem.style)
 276                 h.elem.style.backgroundColor = (active_number == cur_number) ?
 277                     active_hint_background_color : hint_background_color;
 278
 279             if (h.elem.style)
 280                 h.elem.style.color = "black";
 281
 282             var label = "" + cur_number;
 283             if (h.elem instanceof Ci.nsIDOMHTMLFrameElement) {
 284                 label +=  " " + text;
 285             } else if (h.show_text && !/^\s*$/.test(text)) {
 286                 let substrs = [[0,4]];
 287                 for (j = 0; j < ntokens; ++j) {
 288                     let m = hints_text_match(text, tokens[j]);
 289                     if (m == false) continue;
 290                     splice_range(substrs, m[0], m[1] + 2);
 291                 }
 292                 label += " " + substrs.map(function (x) {
 293                     return text.substring(x[0],Math.min(x[1], text.length));
 294                 }).join("..") + "..";
 295             }
 296             h.hint.textContent = label;
 297             h.hint.style.display = "inline";
 298             this.valid_hints.push(h);
 299         }
 300
 301         if (active_number == -1)
 302             this.select_hint(1);
 303     },
 304
 305     select_hint: function (index) {
 306         var old_index = this.current_hint_number;
 307         if (index == old_index)
 308             return;
 309         var vh = this.valid_hints;
 310         if (old_index >= 1 && old_index <= vh.length) {
 311             var h = vh[old_index - 1];
 312             if (h.img_hint)
 313                 h.img_hint.style.backgroundColor = img_hint_background_color;
 314             if (h.elem.style)
 315                 h.elem.style.backgroundColor = hint_background_color;
 316         }
 317         this.current_hint_number = index;
 318         if (index >= 1 && index <= vh.length) {
 319             var h = vh[index - 1];
 320             if (h.img_hint)
 321                 h.img_hint.style.backgroundColor = active_img_hint_background_color;
 322             if (h.elem.style)
 323                 h.elem.style.backgroundColor = active_hint_background_color;
 324             this.last_selected_hint = h;
 325         }
 326     },
 327
 328     hide_hints: function () {
 329         for (var i = 0, nhints = this.hints.length; i < nhints; ++i) {
 330             var h = this.hints[i];
 331             if (h.visible) {
 332                 h.visible = false;
 333                 if (h.saved_color != null) {
 334                     h.elem.style.color = h.saved_color;
 335                     h.elem.style.backgroundColor = h.saved_bgcolor;
 336                 }
 337                 if (h.img_hint)
 338                     h.img_hint.style.display = "none";
 339                 h.hint.style.display = "none";
 340             }
 341         }
 342     },
 343
 344     remove: function () {
 345         for (var i = 0, nhints = this.hints.length; i < nhints; ++i) {
 346             var h = this.hints[i];
 347             if (h.visible && h.saved_color != null) {
 348                 h.elem.style.color = h.saved_color;
 349                 h.elem.style.backgroundColor = h.saved_bgcolor;
 350             }
 351             if (h.img_hint)
 352                 h.img_hint.parentNode.removeChild(h.img_hint);
 353             h.hint.parentNode.removeChild(h.hint);
 354         }
 355         this.hints = [];
 356         this.valid_hints = [];
 357     }
 358 };
 359
 360 /* Show panel with currently selected URL. */
 361 function hints_url_panel (hints, window) {
 362     var g = new dom_generator(window.document, XUL_NS);
 363
 364     var p = g.element("hbox", "class", "panel url", "flex", "0");
 365     g.element("label", p, "value", "URL:", "class", "url-panel-label");
 366     var url_value = g.element("label", p, "class", "url-panel-value",
 367                               "crop", "end", "flex", "1");
 368     window.minibuffer.insert_before(p);
 369
 370     p.update = function () {
 371         url_value.value = "";
 372         if (hints.manager && hints.manager.last_selected_hint) {
 373             var spec;
 374             try {
 375                 spec = load_spec(hints.manager.last_selected_hint.elem);
 376             } catch (e) {}
 377             if (spec) {
 378                 var uri = load_spec_uri_string(spec);
 379                 if (uri) url_value.value = uri;
 380             }
 381         }
 382     };
 383
 384     p.destroy = function () {
 385         this.parentNode.removeChild(this);
 386     };
 387
 388     return p;
 389 }
 390
 391 define_variable("hints_display_url_panel", false,
 392     "When selecting a hint, the URL can be displayed in a panel above "+
 393     "the minibuffer.  This is useful for confirming that the correct "+
 394     "link is selected and that the URL is not evil.  This option is "+
 395     "most useful when hints_auto_exit_delay is long or disabled.");
 396
 397 /**
 398  * keyword arguments:
 399  *
 400  * $prompt
 401  * $callback
 402  * $abort_callback
 403  */
 404 define_keywords("$keymap", "$auto", "$hint_xpath_expression", "$multiple");
 405 function hints_minibuffer_state (minibuffer, continuation, buffer) {
 406     keywords(arguments, $keymap = hint_keymap, $auto);
 407     basic_minibuffer_state.call(this, minibuffer, $prompt = arguments.$prompt);
 408     if (hints_display_url_panel)
 409         this.url_panel = hints_url_panel(this, buffer.window);
 410     this.original_prompt = arguments.$prompt;
 411     this.continuation = continuation;
 412     this.keymap = arguments.$keymap;
 413     this.auto_exit = arguments.$auto ? true : false;
 414     this.xpath_expr = arguments.$hint_xpath_expression;
 415     this.auto_exit_timer_ID = null;
 416     this.multiple = arguments.$multiple;
 417     this.focused_element = buffer.focused_element;
 418     this.focused_frame = buffer.focused_frame;
 419 }
 420 hints_minibuffer_state.prototype = {
 421     __proto__: basic_minibuffer_state.prototype,
 422     manager: null,
 423     typed_string: "",
 424     typed_number: "",
 425     load: function () {
 426         basic_minibuffer_state.prototype.load.call(this);
 427         if (!this.manager) {
 428             var buf = this.minibuffer.window.buffers.current;
 429             this.manager = new hint_manager(buf.top_frame, this.xpath_expr,
 430                                             this.focused_frame, this.focused_element);
 431         }
 432         this.manager.update_valid_hints();
 433         if (this.url_panel)
 434             this.url_panel.update();
 435     },
 436     clear_auto_exit_timer: function () {
 437         var window = this.minibuffer.window;
 438         if (this.auto_exit_timer_ID != null) {
 439             window.clearTimeout(this.auto_exit_timer_ID);
 440             this.auto_exit_timer_ID = null;
 441         }
 442     },
 443     unload: function () {
 444         this.clear_auto_exit_timer();
 445         this.manager.hide_hints();
 446         basic_minibuffer_state.prototype.unload.call(this);
 447     },
 448     destroy: function () {
 449         this.clear_auto_exit_timer();
 450         this.manager.remove();
 451         if (this.url_panel)
 452             this.url_panel.destroy();
 453         basic_minibuffer_state.prototype.destroy.call(this);
 454     },
 455     update_minibuffer: function (m) {
 456         if (this.typed_number.length > 0)
 457             m.prompt = this.original_prompt + " #" + this.typed_number;
 458         else
 459             m.prompt = this.original_prompt;
 460         if (this.url_panel)
 461             this.url_panel.update();
 462     },
 463
 464     handle_auto_exit: function (m, ambiguous) {
 465         var window = this.minibuffer.window;
 466         var num = this.manager.current_hint_number;
 467         if (!this.auto_exit)
 468             return;
 469         let s = this;
 470         let delay = ambiguous ? hints_ambiguous_auto_exit_delay : hints_auto_exit_delay;
 471         if (delay > 0)
 472             this.auto_exit_timer_ID = window.setTimeout(function () { hints_exit(window, s); },
 473                                                         delay);
 474     },
 475
 476     ran_minibuffer_command: function (m) {
 477         this.handle_input(m);
 478     },
 479
 480     handle_input: function (m) {
 481         m._set_selection();
 482         this.clear_auto_exit_timer();
 483         this.typed_number = "";
 484         this.typed_string = m._input_text;
 485         this.manager.current_hint_string = this.typed_string;
 486         this.manager.current_hint_number = -1;
 487         this.manager.update_valid_hints();
 488         if (this.manager.valid_hints.length == 1)
 489             this.handle_auto_exit(false /* unambiguous */);
 490         else if (this.manager.valid_hints.length > 1)
 491         this.handle_auto_exit(true /* ambiguous */);
 492         this.update_minibuffer(m);
 493     }
 494 };
 495
 496 define_variable("hints_auto_exit_delay", 0,
 497     "Delay (in milliseconds) after the most recent key stroke before a "+
 498     "sole matching element is automatically selected.  When zero, "+
 499     "automatic selection is disabled.  A value of 500 is a good "+
 500     "starting point for an average-speed typist.");
 501
 502 define_variable("hints_ambiguous_auto_exit_delay", 0,
 503     "Delay (in milliseconds) after the most recent key stroke before the "+
 504     "first of an ambiguous match is automatically selected.  If this is "+
 505     "set to 0, automatic selection in ambiguous matches is disabled.");
 506
 507 interactive("hints-handle-number", null,
 508     function (I) {
 509         let s = I.minibuffer.check_state(hints_minibuffer_state);
 510         s.clear_auto_exit_timer();
 511         var ch = String.fromCharCode(I.event.charCode);
 512         var auto_exit_ambiguous = null; // null -> no auto exit; false -> not ambiguous; true -> ambiguous
 513         /* TODO: implement number escaping */
 514         // Number entered
 515         s.typed_number += ch;
 516
 517         s.manager.select_hint(parseInt(s.typed_number));
 518         var num = s.manager.current_hint_number;
 519         if (num > 0 && num <= s.manager.valid_hints.length)
 520             auto_exit_ambiguous = num * 10 > s.manager.valid_hints.length ? false : true;
 521         else if (num == 0) {
 522             if (!s.multiple) {
 523                 hints_exit(I.window, s);
 524                 return;
 525             }
 526             auto_exit_ambiguous = false;
 527         }
 528         if (auto_exit_ambiguous !== null)
 529             s.handle_auto_exit(auto_exit_ambiguous);
 530         s.update_minibuffer(I.minibuffer);
 531     });
 532
 533 function hints_backspace (window, s) {
 534     let m = window.minibuffer;
 535     s.clear_auto_exit_timer();
 536     if (s.typed_number.length > 0) {
 537         s.typed_number = s.typed_number.substring(0, s.typed_number.length - 1);
 538         var num = s.typed_number.length > 0 ? parseInt(s.typed_number) : 1;
 539         s.manager.select_hint(num);
 540     } else if (s.typed_string.length > 0) {
 541         s.typed_string = s.typed_string.substring(0, s.typed_string.length - 1);
 542         m._input_text = s.typed_string;
 543         m._set_selection();
 544         s.manager.current_hint_string = s.typed_string;
 545         s.manager.current_hint_number = -1;
 546         s.manager.update_valid_hints();
 547     }
 548     s.update_minibuffer(m);
 549 }
 550 interactive("hints-backspace", null,
 551     function (I) {
 552         hints_backspace(I.window, I.minibuffer.check_state(hints_minibuffer_state));
 553     });
 554
 555 function hints_next (window, s, count) {
 556     s.clear_auto_exit_timer();
 557     s.typed_number = "";
 558     var cur = s.manager.current_hint_number - 1;
 559     var vh = s.manager.valid_hints;
 560     if (vh.length > 0) {
 561         cur = (cur + count) % vh.length;
 562         if (cur < 0)
 563             cur += vh.length;
 564         s.manager.select_hint(cur + 1);
 565     }
 566     s.update_minibuffer(window);
 567 }
 568 interactive("hints-next", null,
 569     function (I) {
 570         hints_next(I.window, I.minibuffer.check_state(hints_minibuffer_state), I.p);
 571     });
 572
 573 interactive("hints-previous", null,
 574     function (I) {
 575         hints_next(I.window, I.minibuffer.check_state(hints_minibuffer_state), -I.p);
 576     });
 577
 578 function hints_exit (window, s) {
 579     var cur = s.manager.current_hint_number;
 580     var elem = null;
 581     if (cur > 0 && cur <= s.manager.valid_hints.length) {
 582         elem = s.manager.valid_hints[cur - 1].elem;
 583     } else if (cur == 0) {
 584         elem = window.buffers.current.top_frame;
 585     }
 586     if (elem !== null) {
 587         var c = s.continuation;
 588         delete s.continuation;
 589         window.minibuffer.pop_state();
 590         if (c)
 591             c(elem);
 592     }
 593 }
 594
 595 interactive("hints-exit", null,
 596     function (I) {
 597         hints_exit(I.window, I.minibuffer.check_state(hints_minibuffer_state));
 598     });
 599
 600
 601 define_keywords("$buffer");
 602 minibuffer.prototype.read_hinted_element = function () {
 603     keywords(arguments);
 604     var buf = arguments.$buffer;
 605     var s = new hints_minibuffer_state(this, (yield CONTINUATION), buf, forward_keywords(arguments));
 606     this.push_state(s);
 607     var result = yield SUSPEND;
 608     yield co_return(result);
 609 };
 610
 611 provide("hints");