Add favicons to vomnibar completions

Favicons are displayed as a background-image style next to urls in
similar style to chrome's history page.
For tabs the icon is fetched from the url specified by chrome tab's
favIconUrl property. Unfortunately extensions to not have access to
chrome://favicons/ to get bookmark favicons but fortunately most sites
serve a favicon from protocol://hostname/favicon.ico
(e.g. http://example.com/favicon.ico) so this url is tried for non-tab
types.

2 files changed, 17 insertions, 1 deletions

diff --git a/background_scripts/completion.coffee b/background_scripts/completion.coffee
index fd41cdc8..a03a3006 100644
--- a/background_scripts/completion.coffee
+++ b/background_scripts/completion.coffee
@@ -26,6 +26,7 @@ class Suggestion
 
   generateHtml: ->
     return @html if @html
+    favIconUrl = @tabFavIconUrl or "#{@getUrlRoot(@url)}/favicon.ico"
     relevancyHtml = if @showRelevancy then "<span class='relevancy'>#{@computeRelevancy()}</span>" else ""
     # NOTE(philc): We're using these vimium-specific class names so we don't collide with the page's CSS.
     @html =
@@ -34,12 +35,19 @@ class Suggestion
          <span class="vimiumReset vomnibarSource">#{@type}</span>
          <span class="vimiumReset vomnibarTitle">#{@highlightTerms(Utils.escapeHtml(@title))}</span>
        </div>
-       <div class="vimiumReset vomnibarBottomHalf">
+       <div class="vimiumReset vomnibarBottomHalf vomnibarIcon"
+            style="background-image: url(#{favIconUrl});">
         <span class="vimiumReset vomnibarUrl">#{@shortenUrl(@highlightTerms(@url))}</span>
         #{relevancyHtml}
       </div>
       """
 
+  # use neat trick to snatch a domain (http://stackoverflow.com/a/8498668)
+  getUrlRoot: (url) ->
+    a = document.createElement 'a'
+    a.href = url
+    a.protocol + "//" + a.hostname
+
   shortenUrl: (url) -> @stripTrailingSlash(url).replace(/^http:\/\//, "")
 
   stripTrailingSlash: (url) ->
@@ -241,6 +249,7 @@ class TabCompleter
       suggestions = results.map (tab) =>
         suggestion = new Suggestion(queryTerms, "tab", tab.url, tab.title, @computeRelevancy)
         suggestion.tabId = tab.id
+        suggestion.tabFavIconUrl = tab.favIconUrl
         suggestion
       onComplete(suggestions)
 
diff --git a/content_scripts/vimium.css b/content_scripts/vimium.css
index ccbcb339..a486c8ef 100644
--- a/content_scripts/vimium.css
+++ b/content_scripts/vimium.css
@@ -349,6 +349,13 @@ body.vimiumFindMode ::selection {
   padding: 2px 0;
 }
 
+#vomnibar li .vomnibarIcon {
+  background-position-y: center;
+  background-size: 16px;
+  background-repeat: no-repeat;
+  padding-left: 20px;
+}
+
 #vomnibar li .vomnibarSource {
   color: #777;
   margin-right: 4px;