Add a vomnibar test harness, for quick styling work.

1 files changed, 22 insertions, 15 deletions

diff --git a/content_scripts/vomnibar.js b/content_scripts/vomnibar.js
index 4f136635..e5e81d32 100644
--- a/content_scripts/vomnibar.js
+++ b/content_scripts/vomnibar.js
@@ -21,6 +21,7 @@ var vomnibar = (function() {
     if (initialQueryValue)
       vomnibarUI.setQuery(initialQueryValue);
     vomnibarUI.show();
+    return vomnibarUI;
   }
 
   /** User interface for fuzzy completion */
@@ -126,18 +127,21 @@ var vomnibar = (function() {
 
       this.completer.filter(query, this.maxResults, function(completions) {
         this.completions = completions;
-
-        // update completion list with the new data
-        this.completionList.innerHTML = completions.map(function(completion) {
-          return "<li>" + completion.html + "</li>";
-        }).join('');
-
-        this.completionList.style.display = this.completions.length > 0 ? "block" : "none";
-        this.updateSelection();
+        this.populateUiWithCompletions(completions);
         if (callback) callback();
       }.proxy(this));
     },
 
+    populateUiWithCompletions: function(completions) {
+      // update completion list with the new data
+      this.completionList.innerHTML = completions.map(function(completion) {
+        return "<li>" + completion.html + "</li>";
+      }).join('');
+
+      this.completionList.style.display = (completions.length > 0) ? "block" : "none";
+      this.updateSelection();
+    },
+
     update: function(force, callback) {
       force = force || false; // explicitely default to asynchronous updating
 
@@ -161,15 +165,16 @@ var vomnibar = (function() {
 
     initDom: function() {
       this.box = utils.createElementFromHtml(
-        '<div id="vomnibar" class="vimiumReset">'+
-          '<div class="input">'+
-            '<span class="prompt">' + utils.escapeHtml(this.prompt) + '</span> '+
-            '<input type="text" class="query"></span></div>'+
-          '<ul></ul></div>');
+        '<div id="vomnibar" class="vimiumReset">' +
+          '<div class="topHalf">' +
+            '<input type="text" />' +
+          '</div>' +
+          '<ul></ul>' +
+        '</div>');
       this.box.style.display = 'none';
       document.body.appendChild(this.box);
 
-      this.input = document.querySelector("#vomnibar .query");
+      this.input = document.querySelector("#vomnibar input");
       this.input.addEventListener("input", function() { this.update(); }.bind(this));
       this.completionList = document.querySelector("#vomnibar ul");
       this.completionList.style.display = "none";
@@ -227,6 +232,8 @@ var vomnibar = (function() {
   return {
     activate: function() { activate("omni", 100); },
     activateWithCurrentUrl: function() { activate("omni", 100, window.location.toString()); },
-    activateTabSelection: function() { activate("tabs", 0); }
+    activateTabSelection: function() { activate("tabs", 0); },
+    /* Used by our vomnibar dev harness. */
+    getUI: function() { return vomnibarUI; }
   }
 })();