Add a vomnibar test harness, for quick styling work.

author: Phil Crosby 2012-05-25 23:47:18 -0700
committer: Phil Crosby 2012-05-25 23:47:18 -0700
commit: 3f81442c312128f1e0e6a5b6bffbbf4ecf49b726 (patch)
tree: c9746477adb5ae2c5ff8c667bc240cf6c1880f18
parent: 770e301a1455a823c30fa9d4bed41c109165949b (diff)
download: vimium-3f81442c312128f1e0e6a5b6bffbbf4ecf49b726.tar.bz2
2 files changed, 82 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; }
   }
 })();
diff --git a/test_harnesses/vomnibar.html b/test_harnesses/vomnibar.html
new file mode 100644
index 00000000..254653d7
--- /dev/null
+++ b/test_harnesses/vomnibar.html
@@ -0,0 +1,60 @@
+<!--
+  This harness is used to show our vomnibar with some sample suggestions. It's a convenient way to restyle
+  the Vomnibar without having to make changes, reload the extension, refresh the page, open it and type
+  something.
+ -->
+<!DOCTYPE html>
+<html>
+<head>
+  <title></title>
+  <script type="text/javascript" src="../lib/utils.js"></script>
+  <script type="text/javascript" src="../lib/keyboard_utils.js"></script>
+  <script type="text/javascript" src="../lib/dom_utils.js"></script>
+  <script src="https://github.com/ooyala/livecss/raw/master/livecss.js"></script>
+  <script type="text/javascript" src="../content_scripts/vomnibar.js"></script>
+  <link rel="stylesheet" type="text/css" href="../vimium.css" />
+  <script>
+    function setup() {
+      window.handlerStack = [];
+      // This itemHtml was obtained just by copying and pasting what was generated when using it in practice.
+      var itemHtml = '<span class="source">history</span> http://<span class="fuzzyMatch">n</span><span class="fuzzyMatch">i</span><span class="fuzzyMatch">n</span><span class="fuzzyMatch">j</span><span class="fuzzyMatch">a</span>words.com/info/about <span class="title">Ninjawords - a really fast dictionary</span>';
+      var results = [{ html: itemHtml }, { html: itemHtml }];
+
+      // Stub out the chrome extension apis needed by the Vomnibar.
+      window.chrome = { };
+      var port = {
+        onMessage: { addListener: function(callback) { } },
+        postMessage: function() { }
+      };
+      window.chrome.extension = {
+        connect: function() { return port; },
+        sendRequest: function() { },
+      };
+
+      vomnibar.activate();
+      var ui = vomnibar.getUI();
+      ui.populateUiWithCompletions(results)
+    };
+
+    document.addEventListener("DOMContentLoaded", setup, false);
+  </script>
+
+  <style type="text/css" media="screen">
+    body {
+      font-size: 19px;
+      width: 800px;
+      margin: 0 auto;
+      color: #333;
+      padding: 20px;
+      background-color: #f0e5bc;
+    }
+  </style>
+
+</head>
+
+<body>
+  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br/><br/>
+
+  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+</body>
+</html>
author	Phil Crosby	2012-05-25 23:47:18 -0700
committer	Phil Crosby	2012-05-25 23:47:18 -0700
commit	3f81442c312128f1e0e6a5b6bffbbf4ecf49b726 (patch)
tree	c9746477adb5ae2c5ff8c667bc240cf6c1880f18
parent	770e301a1455a823c30fa9d4bed41c109165949b (diff)
download	vimium-3f81442c312128f1e0e6a5b6bffbbf4ecf49b726.tar.bz2