The Tor Browser: browser/components/tabview/search.js@fc2d59ddac77 (annotated)

browser/components/tabview/search.js@fc2d59ddac77 (annotated)

browser/components/tabview/search.js

Wed, 31 Dec 2014 07:22:50 +0100

author: Michael Schloh von Bennewitz <michael@schloh.com>
date: Wed, 31 Dec 2014 07:22:50 +0100
branch: TOR_BUG_3246
changeset 4: fc2d59ddac77
permissions: -rw-r--r--

Correct previous dual key logic pending first delivery installment.

 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 /* ******************************
  *
  * This file incorporates work from:
  * Quicksilver Score (qs_score):
  * http://rails-oceania.googlecode.com/svn/lachiecox/qs_score/trunk/qs_score.js
  * This incorporated work is covered by the following copyright and
  * permission notice:
  * Copyright 2008 Lachie Cox
  * Licensed under the MIT license.
  * http://jquery.org/license
  *
  *  ***************************** */
 // **********
 // Title: search.js
 // Implementation for the search functionality of Firefox Panorama.
 // ##########
 // Class: TabUtils
 //
 // A collection of helper functions for dealing with both <TabItem>s and
 // <xul:tab>s without having to worry which one is which.
 let TabUtils = {
   // ----------
   // Function: toString
   // Prints [TabUtils] for debug use.
   toString: function TabUtils_toString() {
     return "[TabUtils]";
   },
   // ---------
   // Function: nameOfTab
   // Given a <TabItem> or a <xul:tab> returns the tab's name.
   nameOf: function TabUtils_nameOf(tab) {
     // We can have two types of tabs: A <TabItem> or a <xul:tab>
     // because we have to deal with both tabs represented inside
     // of active Panoramas as well as for windows in which
     // Panorama has yet to be activated. We uses object sniffing to
     // determine the type of tab and then returns its name.
     return tab.label != undefined ? tab.label : tab.$tabTitle[0].textContent;
   },
   // ---------
   // Function: URLOf
   // Given a <TabItem> or a <xul:tab> returns the URL of tab.
   URLOf: function TabUtils_URLOf(tab) {
     // Convert a <TabItem> to <xul:tab>
     if ("tab" in tab)
       tab = tab.tab;
     return tab.linkedBrowser.currentURI.spec;
   },
   // ---------
   // Function: faviconURLOf
   // Given a <TabItem> or a <xul:tab> returns the URL of tab's favicon.
   faviconURLOf: function TabUtils_faviconURLOf(tab) {
     return tab.image != undefined ? tab.image : tab.$favImage[0].src;
   },
   // ---------
   // Function: focus
   // Given a <TabItem> or a <xul:tab>, focuses it and it's window.
   focus: function TabUtils_focus(tab) {
     // Convert a <TabItem> to a <xul:tab>
     if ("tab" in tab)
       tab = tab.tab;
     tab.ownerDocument.defaultView.gBrowser.selectedTab = tab;
     tab.ownerDocument.defaultView.focus();
   }
 };
 // ##########
 // Class: TabMatcher
 //
 // A class that allows you to iterate over matching and not-matching tabs,
 // given a case-insensitive search term.
 function TabMatcher(term) {
   this.term = term;
 }
 TabMatcher.prototype = {
   // ----------
   // Function: toString
   // Prints [TabMatcher (term)] for debug use.
   toString: function TabMatcher_toString() {
     return "[TabMatcher (" + this.term + ")]";
   },
   // ---------
   // Function: _filterAndSortForMatches
   // Given an array of <TabItem>s and <xul:tab>s returns a new array
   // of tabs whose name matched the search term, sorted by lexical
   // closeness.
   _filterAndSortForMatches: function TabMatcher__filterAndSortForMatches(tabs) {
     let self = this;
     tabs = tabs.filter(function TabMatcher__filterAndSortForMatches_filter(tab) {
       let name = TabUtils.nameOf(tab);
       let url = TabUtils.URLOf(tab);
       return name.match(self.term, "i") || url.match(self.term, "i");
     });
     tabs.sort(function TabMatcher__filterAndSortForMatches_sort(x, y) {
       let yScore = self._scorePatternMatch(self.term, TabUtils.nameOf(y));
       let xScore = self._scorePatternMatch(self.term, TabUtils.nameOf(x));
       return yScore - xScore;
     });
     return tabs;
   },
   // ---------
   // Function: _filterForUnmatches
   // Given an array of <TabItem>s returns an unsorted array of tabs whose name
   // does not match the the search term.
   _filterForUnmatches: function TabMatcher__filterForUnmatches(tabs) {
     let self = this;
     return tabs.filter(function TabMatcher__filterForUnmatches_filter(tab) {
       let name = tab.$tabTitle[0].textContent;
       let url = TabUtils.URLOf(tab);
       return !name.match(self.term, "i") && !url.match(self.term, "i");
     });
   },
   // ---------
   // Function: _getTabsForOtherWindows
   // Returns an array of <TabItem>s and <xul:tabs>s representing tabs
   // from all windows but the current window. <TabItem>s will be returned
   // for windows in which Panorama has been activated at least once, while
   // <xul:tab>s will be returned for windows in which Panorama has never
   // been activated.
   _getTabsForOtherWindows: function TabMatcher__getTabsForOtherWindows() {
     let enumerator = Services.wm.getEnumerator("navigator:browser");
     let allTabs = [];
     while (enumerator.hasMoreElements()) {
       let win = enumerator.getNext();
       // This function gets tabs from other windows, not from the current window
       if (win != gWindow)
         allTabs.push.apply(allTabs, win.gBrowser.tabs);
     }
     return allTabs;
   },
   // ----------
   // Function: matchedTabsFromOtherWindows
   // Returns an array of <TabItem>s and <xul:tab>s that match the search term
   // from all windows but the current window. <TabItem>s will be returned for
   // windows in which Panorama has been activated at least once, while
   // <xul:tab>s will be returned for windows in which Panorama has never
   // been activated.
   // (new TabMatcher("app")).matchedTabsFromOtherWindows();
   matchedTabsFromOtherWindows: function TabMatcher_matchedTabsFromOtherWindows() {
     if (this.term.length < 2)
       return [];
     let tabs = this._getTabsForOtherWindows();
     return this._filterAndSortForMatches(tabs);
   },
   // ----------
   // Function: matched
   // Returns an array of <TabItem>s which match the current search term.
   // If the term is less than 2 characters in length, it returns nothing.
   matched: function TabMatcher_matched() {
     if (this.term.length < 2)
       return [];
     let tabs = TabItems.getItems();
     return this._filterAndSortForMatches(tabs);
   },
   // ----------
   // Function: unmatched
   // Returns all of <TabItem>s that .matched() doesn't return.
   unmatched: function TabMatcher_unmatched() {
     let tabs = TabItems.getItems();
     if (this.term.length < 2)
       return tabs;
     return this._filterForUnmatches(tabs);
   },
   // ----------
   // Function: doSearch
   // Performs the search. Lets you provide three functions.
   // The first is on all matched tabs in the window, the second on all unmatched
   // tabs in the window, and the third on all matched tabs in other windows.
   // The first two functions take two parameters: A <TabItem> and its integer index
   // indicating the absolute rank of the <TabItem> in terms of match to
   // the search term. The last function also takes two paramaters, but can be
   // passed both <TabItem>s and <xul:tab>s and the index is offset by the
   // number of matched tabs inside the window.
   doSearch: function TabMatcher_doSearch(matchFunc, unmatchFunc, otherFunc) {
     let matches = this.matched();
     let unmatched = this.unmatched();
     let otherMatches = this.matchedTabsFromOtherWindows();
     matches.forEach(function(tab, i) {
       matchFunc(tab, i);
     });
     otherMatches.forEach(function(tab,i) {
       otherFunc(tab, i+matches.length);
     });
     unmatched.forEach(function(tab, i) {
       unmatchFunc(tab, i);
     });
   },
   // ----------
   // Function: _scorePatternMatch
   // Given a pattern string, returns a score between 0 and 1 of how well
   // that pattern matches the original string. It mimics the heuristics
   // of the Mac application launcher Quicksilver.
   _scorePatternMatch: function TabMatcher__scorePatternMatch(pattern, matched, offset) {
     offset = offset || 0;
     pattern = pattern.toLowerCase();
     matched = matched.toLowerCase();
     if (pattern.length == 0)
       return 0.9;
     if (pattern.length > matched.length)
       return 0.0;
     for (let i = pattern.length; i > 0; i--) {
       let sub_pattern = pattern.substring(0,i);
       let index = matched.indexOf(sub_pattern);
       if (index < 0)
         continue;
       if (index + pattern.length > matched.length + offset)
         continue;
       let next_string = matched.substring(index+sub_pattern.length);
       let next_pattern = null;
       if (i >= pattern.length)
         next_pattern = '';
       else
         next_pattern = pattern.substring(i);
       let remaining_score = this._scorePatternMatch(next_pattern, next_string, offset + index);
       if (remaining_score > 0) {
         let score = matched.length-next_string.length;
         if (index != 0) {
           let c = matched.charCodeAt(index-1);
           if (c == 32 || c == 9) {
             for (let j = (index - 2); j >= 0; j--) {
               c = matched.charCodeAt(j);
               score -= ((c == 32 || c == 9) ? 1 : 0.15);
             }
           } else {
             score -= index;
           }
         }
         score += remaining_score * next_string.length;
         score /= matched.length;
         return score;
       }
     }
     return 0.0;
   }
 };
 // ##########
 // Class: TabHandlers
 //
 // A object that handles all of the event handlers.
 let TabHandlers = {
   _mouseDownLocation: null,
   // ---------
   // Function: onMatch
   // Adds styles and event listeners to the matched tab items.
   onMatch: function TabHandlers_onMatch(tab, index) {
     tab.addClass("onTop");
     index != 0 ? tab.addClass("notMainMatch") : tab.removeClass("notMainMatch");
     // Remove any existing handlers before adding the new ones.
     // If we don't do this, then we may add more handlers than
     // we remove.
     tab.$canvas
       .unbind("mousedown", TabHandlers._hideHandler)
       .unbind("mouseup", TabHandlers._showHandler);
     tab.$canvas
       .mousedown(TabHandlers._hideHandler)
       .mouseup(TabHandlers._showHandler);
   },
   // ---------
   // Function: onUnmatch
   // Removes styles and event listeners from the unmatched tab items.
   onUnmatch: function TabHandlers_onUnmatch(tab, index) {
     tab.$container.removeClass("onTop");
     tab.removeClass("notMainMatch");
     tab.$canvas
       .unbind("mousedown", TabHandlers._hideHandler)
       .unbind("mouseup", TabHandlers._showHandler);
   },
   // ---------
   // Function: onOther
   // Removes styles and event listeners from the unmatched tabs.
   onOther: function TabHandlers_onOther(tab, index) {
     // Unlike the other on* functions, in this function tab can
     // either be a <TabItem> or a <xul:tab>. In other functions
     // it is always a <TabItem>. Also note that index is offset
     // by the number of matches within the window.
     let item = iQ("<div/>")
       .addClass("inlineMatch")
       .click(function TabHandlers_onOther_click(event) {
         Search.hide(event);
         TabUtils.focus(tab);
       });
     iQ("<img/>")
       .attr("src", TabUtils.faviconURLOf(tab))
       .appendTo(item);
     iQ("<span/>")
       .text(TabUtils.nameOf(tab))
       .appendTo(item);
     index != 0 ? item.addClass("notMainMatch") : item.removeClass("notMainMatch");
     item.appendTo("#results");
     iQ("#otherresults").show();
   },
   // ---------
   // Function: _hideHandler
   // Performs when mouse down on a canvas of tab item.
   _hideHandler: function TabHandlers_hideHandler(event) {
     iQ("#search").fadeOut();
     iQ("#searchshade").fadeOut();
     TabHandlers._mouseDownLocation = {x:event.clientX, y:event.clientY};
   },
   // ---------
   // Function: _showHandler
   // Performs when mouse up on a canvas of tab item.
   _showHandler: function TabHandlers_showHandler(event) {
     // If the user clicks on a tab without moving the mouse then
     // they are zooming into the tab and we need to exit search
     // mode.
     if (TabHandlers._mouseDownLocation.x == event.clientX &&
         TabHandlers._mouseDownLocation.y == event.clientY) {
       Search.hide();
       return;
     }
     iQ("#searchshade").show();
     iQ("#search").show();
     iQ("#searchbox")[0].focus();
     // Marshal the search.
     setTimeout(Search.perform, 0);
   }
 };
 // ##########
 // Class: Search
 //
 // A object that handles the search feature.
 let Search = {
   _initiatedBy: "",
   _blockClick: false,
   _currentHandler: null,
   // ----------
   // Function: toString
   // Prints [Search] for debug use.
   toString: function Search_toString() {
     return "[Search]";
   },
   // ----------
   // Function: init
   // Initializes the searchbox to be focused, and everything else to be hidden,
   // and to have everything have the appropriate event handlers.
   init: function Search_init() {
     let self = this;
     iQ("#search").hide();
     iQ("#searchshade").hide().mousedown(function Search_init_shade_mousedown(event) {
       if (event.target.id != "searchbox" && !self._blockClick)
         self.hide();
     });
     iQ("#searchbox").keyup(function Search_init_box_keyup() {
       self.perform();
     })
     .attr("title", tabviewString("button.searchTabs"));
     iQ("#searchbutton").mousedown(function Search_init_button_mousedown() {
       self._initiatedBy = "buttonclick";
       self.ensureShown();
       self.switchToInMode();
     })
     .attr("title", tabviewString("button.searchTabs"));
     window.addEventListener("focus", function Search_init_window_focus() {
       if (self.isEnabled()) {
         self._blockClick = true;
         setTimeout(function() {
           self._blockClick = false;
         }, 0);
       }
     }, false);
     this.switchToBeforeMode();
   },
   // ----------
   // Function: _beforeSearchKeyHandler
   // Handles all keydown before the search interface is brought up.
   _beforeSearchKeyHandler: function Search__beforeSearchKeyHandler(event) {
     // Only match reasonable text-like characters for quick search.
     if (event.altKey || event.ctrlKey || event.metaKey)
       return;
     if ((event.keyCode > 0 && event.keyCode <= event.DOM_VK_DELETE) ||
         event.keyCode == event.DOM_VK_CONTEXT_MENU ||
         event.keyCode == event.DOM_VK_SLEEP ||
         (event.keyCode >= event.DOM_VK_F1 &&
          event.keyCode <= event.DOM_VK_SCROLL_LOCK) ||
         event.keyCode == event.DOM_VK_META ||
         event.keyCode == 91 || // 91 = left windows key
         event.keyCode == 92 || // 92 = right windows key
         (!event.keyCode && !event.charCode)) {
       return;
     }
     // If we are already in an input field, allow typing as normal.
     if (event.target.nodeName == "INPUT")
       return;
     // / is used to activate the search feature so the key shouldn't be entered
     // into the search box.
     if (event.keyCode == KeyEvent.DOM_VK_SLASH) {
       event.stopPropagation();
       event.preventDefault();
     }
     this.switchToInMode();
     this._initiatedBy = "keydown";
     this.ensureShown(true);
   },
   // ----------
   // Function: _inSearchKeyHandler
   // Handles all keydown while search mode.
   _inSearchKeyHandler: function Search__inSearchKeyHandler(event) {
     let term = iQ("#searchbox").val();
     if ((event.keyCode == event.DOM_VK_ESCAPE) ||
         (event.keyCode == event.DOM_VK_BACK_SPACE && term.length <= 1 &&
          this._initiatedBy == "keydown")) {
       this.hide(event);
       return;
     }
     let matcher = this.createSearchTabMatcher();
     let matches = matcher.matched();
     let others =  matcher.matchedTabsFromOtherWindows();
     if (event.keyCode == event.DOM_VK_RETURN &&
         (matches.length > 0 || others.length > 0)) {
       this.hide(event);
       if (matches.length > 0)
         matches[0].zoomIn();
       else
         TabUtils.focus(others[0]);
     }
   },
   // ----------
   // Function: switchToBeforeMode
   // Make sure the event handlers are appropriate for the before-search mode.
   switchToBeforeMode: function Search_switchToBeforeMode() {
     let self = this;
     if (this._currentHandler)
       iQ(window).unbind("keydown", this._currentHandler);
     this._currentHandler = function Search_switchToBeforeMode_handler(event) {
       self._beforeSearchKeyHandler(event);
     }
     iQ(window).keydown(this._currentHandler);
   },
   // ----------
   // Function: switchToInMode
   // Make sure the event handlers are appropriate for the in-search mode.
   switchToInMode: function Search_switchToInMode() {
     let self = this;
     if (this._currentHandler)
       iQ(window).unbind("keydown", this._currentHandler);
     this._currentHandler = function Search_switchToInMode_handler(event) {
       self._inSearchKeyHandler(event);
     }
     iQ(window).keydown(this._currentHandler);
   },
   createSearchTabMatcher: function Search_createSearchTabMatcher() {
     return new TabMatcher(iQ("#searchbox").val());
   },
   // ----------
   // Function: isEnabled
   // Checks whether search mode is enabled or not.
   isEnabled: function Search_isEnabled() {
     return iQ("#search").css("display") != "none";
   },
   // ----------
   // Function: hide
   // Hides search mode.
   hide: function Search_hide(event) {
     if (!this.isEnabled())
       return;
     iQ("#searchbox").val("");
     iQ("#searchshade").hide();
     iQ("#search").hide();
     iQ("#searchbutton").css({ opacity:.8 });
 #ifdef XP_MACOSX
     UI.setTitlebarColors(true);
 #endif
     this.perform();
     this.switchToBeforeMode();
     if (event) {
       // when hiding the search mode, we need to prevent the keypress handler
       // in UI__setTabViewFrameKeyHandlers to handle the key press again. e.g. Esc
       // which is already handled by the key down in this class.
       if (event.type == "keydown")
         UI.ignoreKeypressForSearch = true;
       event.preventDefault();
       event.stopPropagation();
     }
     // Return focus to the tab window
     UI.blurAll();
     gTabViewFrame.contentWindow.focus();
     let newEvent = document.createEvent("Events");
     newEvent.initEvent("tabviewsearchdisabled", false, false);
     dispatchEvent(newEvent);
   },
   // ----------
   // Function: perform
   // Performs a search.
   perform: function Search_perform() {
     let matcher =  this.createSearchTabMatcher();
     // Remove any previous other-window search results and
     // hide the display area.
     iQ("#results").empty();
     iQ("#otherresults").hide();
     iQ("#otherresults>.label").text(tabviewString("search.otherWindowTabs"));
     matcher.doSearch(TabHandlers.onMatch, TabHandlers.onUnmatch, TabHandlers.onOther);
   },
   // ----------
   // Function: ensureShown
   // Ensures the search feature is displayed.  If not, display it.
   // Parameters:
   //  - a boolean indicates whether this is triggered by a keypress or not
   ensureShown: function Search_ensureShown(activatedByKeypress) {
     let $search = iQ("#search");
     let $searchShade = iQ("#searchshade");
     let $searchbox = iQ("#searchbox");
     iQ("#searchbutton").css({ opacity: 1 });
     // NOTE: when this function is called by keydown handler, next keypress
     // event or composition events of IME will be fired on the focused editor.
     function dispatchTabViewSearchEnabledEvent() {
       let newEvent = document.createEvent("Events");
       newEvent.initEvent("tabviewsearchenabled", false, false);
       dispatchEvent(newEvent);
     };
     if (!this.isEnabled()) {
       $searchShade.show();
       $search.show();
 #ifdef XP_MACOSX
       UI.setTitlebarColors({active: "#717171", inactive: "#EDEDED"});
 #endif
       if (activatedByKeypress) {
         // set the focus so key strokes are entered into the textbox.
         $searchbox[0].focus();
         dispatchTabViewSearchEnabledEvent();
       } else {
         // marshal the focusing, otherwise it ends up with searchbox[0].focus gets
         // called before the search button gets the focus after being pressed.
         setTimeout(function setFocusAndDispatchSearchEnabledEvent() {
           $searchbox[0].focus();
           dispatchTabViewSearchEnabledEvent();
         }, 0);
       }
     }
   }
 };