Merge pull request #409 from venshi/master

Greater specificity for the linkhints CSS

9 files changed, 351 insertions, 244 deletions

diff --git a/background_page.html b/background_page.html
index 51f9d462..d436c51e 100644
--- a/background_page.html
+++ b/background_page.html
@@ -29,8 +29,11 @@
     linkHintCharacters: "sadfjklewcmpgh",
     filterLinkHints: false,
     userDefinedLinkHintCss:
-      ".vimiumHintMarker {\n\n}\n" +
-      ".vimiumHintMarker > .matchingCharacter {\n\n}",
+      "#vimiumHintMarkerContainer .vimiumHintMarker \n/* linkhint boxes */ " +
+      "{\nbackground-color:yellow;\nborder:1px solid #E3BE23;\n}\n\n" +
+      "#vimiumHintMarkerContainer .vimiumHintMarker span \n/* linkhint text */ " +
+      "{\ncolor: black;\nfont-weight: bold;\nfont-size: 12px;\n}\n\n" +
+      "#vimiumHintMarkerContainer .vimiumHintMarker > .matchingCharacter {\n\n}",
     excludedUrls: "http*://mail.google.com/*\n" +
                   "http*://www.google.com/reader/*\n",
 
@@ -45,31 +48,6 @@
     nextPatterns: "next,more,>,\u2192,\xbb,\u226b,>>",
   };
 
-  // This is the base internal link hints CSS. It's combined with the userDefinedLinkHintCss before
-  // being sent to the frontend.
-  var linkHintCss =
-    '.internalVimiumHintMarker {' +
-      'position:absolute;' +
-      'background-color:yellow;' +
-      'color:black;' +
-      'font-weight:bold;' +
-      'font-size:12px;' +
-      'padding:0 1px;' +
-      'line-height:100%;' +
-      'width:auto;' +
-      'display:block;' +
-      'border:1px solid #E3BE23;' +
-      'z-index:99999999;' +
-      'font-family:"Helvetica Neue", "Helvetica", "Arial", "Sans";' +
-      'top:-1px;' +
-      'left:-1px;' +
-      'white-space:nowrap;' +
-    '}' +
-    '.internalVimiumHintMarker > .matchingCharacter {' +
-      'color:#C79F0B;' +
-    '}';
-
-
   // Port handler mapping
   var portHandlers = {
     keyDown:              handleKeyDown,
@@ -207,12 +185,12 @@
       bindings = (commandsToKey[command] || [""]).join(", ");
       if (showUnboundCommands || commandsToKey[command]) {
         html.push(
-          "<tr class='" + (advancedCommands.indexOf(command) >= 0 ? "advanced" : "") + "'>",
-          "<td>", escapeHtml(bindings), "</td>",
-          "<td>:</td><td>", availableCommands[command].description);
+          "<tr class='vimiumReset " + (advancedCommands.indexOf(command) >= 0 ? "advanced" : "") + "'>",
+          "<td class='vimiumReset'>", escapeHtml(bindings), "</td>",
+          "<td class='vimiumReset'>:</td><td>", availableCommands[command].description);
 
         if (showCommandNames)
-          html.push("<span class='commandName'>(" + command + ")</span>");
+          html.push("<span class='vimiumReset commandName'>(" + command + ")</span>");
 
         html.push("</td></tr>");
       }
@@ -277,10 +255,10 @@
   }
 
   /*
-   * Returns the core CSS used for link hints, along with any user-provided overrides.
+   * Returns the user-provided CSS overrides.
    */
   function getLinkHintCss(request) {
-    return { linkHintCss: linkHintCss + (localStorage['userDefinedLinkHintCss'] || "") };
+    return { linkHintCss: (localStorage['userDefinedLinkHintCss'] || "") };
   }
 
   /*
diff --git a/completionDialog.js b/completionDialog.js
index f264eb2a..eec089a0 100644
--- a/completionDialog.js
+++ b/completionDialog.js
@@ -14,6 +14,7 @@
         handlerStack.push({ keydown: this.onKeydown });
         render.call(this);
         clearInterval(this._tweenId);
+        this.container.style.display = "block";
         this._tweenId = Tween.fade(this.container, 1.0, 150);
       }
     },
@@ -41,7 +42,6 @@
 
   var initialize = function() {
     var self = this;
-    addCssToPage(completionCSS);
 
     self.currentSelection = 0;
 
@@ -94,27 +94,27 @@
       container.style.display = "";
 
       if (searchString === undefined) {
-        this.container.className = "vimium-dialog";
+        this.container.className = "vimiumReset vimium-dialog";
         createDivInside(container).innerHTML = this.options.initialSearchText || "Begin typing";
       }
       else {
-        this.container.className = "vimium-dialog vimium-completions";
+        this.container.className = "vimiumReset vimium-dialog vimium-completions";
         var searchBar = createDivInside(container);
         searchBar.innerHTML=searchString;
-        searchBar.className="vimium-searchBar";
+        searchBar.className="vimiumReset vimium-searchBar";
 
         searchResults = createDivInside(container);
-        searchResults.className="vimium-searchResults";
+        searchResults.className="vimiumReset vimium-searchResults";
         if (completions.length<=0) {
           var resultDiv = createDivInside(searchResults);
-          resultDiv.className="vimium-noResults";
+          resultDiv.className="vimiumReset vimium-noResults";
           resultDiv.innerHTML="No results found";
         }
         else {
           for (var i = 0; i < completions.length; i++) {
             var resultDiv = createDivInside(searchResults);
             if (i === this.currentSelection) {
-              resultDiv.className="vimium-selected";
+              resultDiv.className="vimiumReset vimium-selected";
             }
             resultDiv.innerHTML=this.options.renderOption(searchString, completions[i]);
           }
@@ -127,6 +127,7 @@
   };
   var createDivInside = function(parent) {
     var element = document.createElement("div");
+    element.className = "vimiumReset";
     parent.appendChild(element);
     return element;
   }
@@ -139,42 +140,6 @@
     }
   }
 
-  var completionCSS = ".vimium-dialog {"+
-    "position:fixed;"+
-    "background-color: #ebebeb;" +
-    "z-index: 99999998;" +
-    "border: 1px solid #b3b3b3;" +
-    "font-size: 12px;" +
-    "text-align:left;"+
-    "color: black;" +
-    "padding:10px;"+
-    "border-radius: 4px;" +
-    "font-family: Lucida Grande, Arial, Sans;" +
-    "}"+
-    ".vimium-completions {"+
-    "width:400px;"+
-    "}"+
-    ".vimium-completions .vimium-searchBar {"+
-    "height: 15px;"+
-    "border-bottom: 1px solid #b3b3b3;"+
-    "}"+
-    ".vimium-completions .vimium-searchResults {"+
-    "}"+
-    ".vimium-completions .vimium-searchResults .vimium-selected{"+
-    "background-color:#aaa;"+
-    "border-radius: 4px;" +
-    "}"+
-    ".vimium-completions div{"+
-    "padding:4px;"+
-    "}"+
-    ".vimium-completions div strong{"+
-    "color: black;" +
-    "font-weight:bold;"+
-    "}"+
-    ".vimium-completions .vimium-noResults{"+
-    "color:#555;"+
-    "}";
-
   window.CompletionDialog = CompletionDialog;
 
 }(window, document))
diff --git a/helpDialog.html b/helpDialog.html
index aa534640..7bd08829 100644
--- a/helpDialog.html
+++ b/helpDialog.html
@@ -2,133 +2,49 @@
   This is shown when typing "?". This HTML is loaded by the background page and then populated with the
   latest keybindings information before displaying.
 -->
-<div id="vimiumHelpDialog">
-  <style>
-    #vimiumHelpDialog * {
-      font-size:11px;
-      line-height:130%;
-      color:black;
-      background-color:transparent;
-    }
-    #vimiumHelpDialog {
-      text-align:left;
-      border:3px solid red;
-      opacity:0.92;
-      background-color:#eee;
-      position:fixed;
-      width:600px;
-      font-family:helvetica, arial, sans;
-      border:2px solid #b3b3b3;
-      border-radius:6px;
-      padding:8px 12px;
-      width:640px;
-      left:50%;
-      /* This needs to be 1/2 width to horizontally center the help dialog */
-      margin-left:-320px;
-      top:50px;
-      -webkit-box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 6px;
-      z-index:99999998;
-      overflow-y: scroll;
-    }
-    #vimiumHelpDialog a { color:blue; }
-    #vimiumTitle, #vimiumTitle * { font-size:20px; }
-    .vimiumColumn {
-      width:50%;
-      float:left;
-    }
-    .vimiumColumn table, .vimiumColumn td, .vimiumColumn tr { padding:0; margin:0; }
-    .vimiumColumn table { width:100%; table-layout:auto; }
-    .vimiumColumn td { vertical-align:top; padding:1px; }
-    #vimiumHelpDialog .vimiumColumn tr > td:first-of-type {
-      text-align:right;
-      font-weight:bold;
-      color:#2f508e;
-      white-space:nowrap;
-    }
-    /* Make the description column as wide as it can be. */
-    #vimiumHelpDialog .vimiumColumn tr > td:nth-of-type(3) { width:100%; }
-    #vimiumHelpDialog .vimiumDivider {
-      height:1px;
-      width:92%;
-      margin:10px auto;
-      background-color:#9a9a9a;
-    }
-    #vimiumHelpDialog .vimiumHelpSectionTitle {
-      font-weight:bold;
-      padding-top:3px;
-    }
-    #vimiumHelpDialog .commandName { font-family:"courier new"; }
-    /* Advanced commands are hidden by default until you show them. */
-    #vimiumHelpDialog .advanced { display: none; }
-    #vimiumHelpDialog .advanced td:nth-of-type(3) { color: #555; }
-    #vimiumHelpDialog .closeButton {
-      position:absolute;
-      right:10px;
-      top:5px;
-      font-family:"courier new";
-      font-weight:bold;
-      color:#555;
-      text-decoration:none;
-      padding-left:10px;
-      font-size:16px;
-    }
-    #vimiumHelpDialog a.optionsPage {
-      position: absolute;
-      right: 60px;
-      top: 8px;
-    }
-    #vimiumHelpDialog .closeButton:hover {
-      color:black;
-      cursor:default;
-      -webkit-user-select:none;
-    }
-    #vimiumHelpDialogFooter { position: relative; }
-    #vimiumHelpDialogFooter * { font-size:10px; }
-    #vimiumHelpDialogFooter .toggleAdvancedCommands {
-      position: absolute;
-      right: 2px;
-      top: -34px;
-    }
-  </style>
-
   <!-- Note that the template placeholders (e.g. "pageNavigation") will be filled in by the background
        page with the up-to-date key bindings when the dialog is shown. -->
-  <a class="optionsPage" href="#">Options</a>
-  <a class="closeButton" href="#">x</a>
-  <div id="vimiumTitle"><span style="color:#2f508e">Vim</span>ium {{title}}</div>
-  <div class="vimiumColumn">
-    <table>
-      <tr><td></td><td></td><td class="vimiumHelpSectionTitle">Navigating the page</td></tr>
+  <div id="vimiumHelpDialog" class="vimiumReset">
+  <a class="vimiumReset optionsPage" href="#">Options</a>
+  <a class="vimiumReset closeButton" href="#">x</a>
+  <div id="vimiumTitle" class="vimiumReset"><span class="vimiumReset" style="color:#2f508e">Vim</span>ium {{title}}</div>
+  <div class="vimiumReset vimiumColumn">
+    <table class="vimiumReset">
+      <tbody class="vimiumReset">
+      <tr class="vimiumReset" ><td class="vimiumReset"></td><td class="vimiumReset" ></td><td class="vimiumReset vimiumHelpSectionTitle">Navigating the page</td></tr>
       {{pageNavigation}}
+      </tbody>
     </table>
   </div>
-  <div class="vimiumColumn">
-    <table>
-      <tr><td></td><td></td><td class="vimiumHelpSectionTitle">Using find</td></tr>
+  <div class="vimiumReset vimiumColumn">
+    <table class="vimiumReset" >
+      <tbody class="vimiumReset">
+      <tr class="vimiumReset" ><td class="vimiumReset" ></td><td class="vimiumReset" ></td><td class="vimiumReset vimiumHelpSectionTitle">Using find</td></tr>
       {{findCommands}}
-      <tr><td></td><td></td><td class="vimiumHelpSectionTitle">Navigating history</td></tr>
+      <tr class="vimiumReset" ><td class="vimiumReset" ></td><td class="vimiumReset" ></td><td class="vimiumReset vimiumHelpSectionTitle">Navigating history</td></tr>
       {{historyNavigation}}
-      <tr><td></td><td></td><td class="vimiumHelpSectionTitle">Manipulating tabs</td></tr>
+      <tr class="vimiumReset" ><td class="vimiumReset" ></td><td class="vimiumReset" ></td><td class="vimiumReset vimiumHelpSectionTitle">Manipulating tabs</td></tr>
       {{tabManipulation}}
-      <tr><td></td><td></td><td class="vimiumHelpSectionTitle">Miscellaneous</td></tr>
+      <tr class="vimiumReset" ><td class="vimiumReset" ></td><td class="vimiumReset" ></td><td class="vimiumReset vimiumHelpSectionTitle">Miscellaneous</td></tr>
       {{misc}}
+      </tbody>
     </table>
   </div>
 
   <br clear="both"/>
-  <div class="vimiumDivider"></div>
+  <div class="vimiumReset vimiumDivider"></div>
 
-  <div id="vimiumHelpDialogFooter">
-    <a href="#" class="toggleAdvancedCommands">Show advanced commands</a>
+  <div id="vimiumHelpDialogFooter" class="vimiumReset">
+    <a href="#" class="vimiumReset toggleAdvancedCommands">Show advanced commands</a>
 
-    <div class="vimiumColumn">
+    <div class="vimiumReset vimiumColumn">
       Enjoying Vimium?
-      <a href="https://chrome.google.com/extensions/detail/dbepggeogbaibhgnhhndojpepiihcmeb">Leave us
+      <a class="vimiumReset" href="https://chrome.google.com/extensions/detail/dbepggeogbaibhgnhhndojpepiihcmeb">Leave us
           feedback</a>.<br/>
-      Found a bug? <a href="http://github.com/philc/vimium/issues">Report it here</a>.
+      Found a bug? <a class="vimiumReset" href="http://github.com/philc/vimium/issues">Report it here</a>.
     </div>
-    <div class="vimiumColumn" style="text-align:right">
-      <span>Version {{version}}</span><br/>
+    <div class="vimiumReset vimiumColumn" style="text-align:right">
+      <span class="vimiumReset">Version {{version}}</span><br/>
     </div>
   </div>
 
diff --git a/linkHints.js b/linkHints.js
index 0181436b..2c0f6504 100644
--- a/linkHints.js
+++ b/linkHints.js
@@ -54,7 +54,8 @@ var linkHints = {
 
   activateMode: function(openInNewTab, withQueue, copyLinkUrl) {
     if (!this.cssAdded)
-      addCssToPage(linkHintCss); // linkHintCss is declared by vimiumFrontend.js
+      // linkHintCss is declared by vimiumFrontend.js and contains the user supplied css overrides.
+      addCssToPage(linkHintCss); 
     this.linkHintCssAdded = true;
     this.setOpenLinkMode(openInNewTab, withQueue, copyLinkUrl);
     this.buildLinkHints();
@@ -95,7 +96,8 @@ var linkHints = {
     // that if you scroll the page and the link has position=fixed, the marker will not stay fixed.
     // Also note that adding these nodes to document.body all at once is significantly faster than one-by-one.
     this.hintMarkerContainingDiv = document.createElement("div");
-    this.hintMarkerContainingDiv.className = "internalVimiumHintMarker";
+    this.hintMarkerContainingDiv.id = "vimiumHintMarkerContainer";
+    this.hintMarkerContainingDiv.className = "vimiumReset internalVimiumHintMarker";
     for (var i = 0; i < this.hintMarkers.length; i++)
       this.hintMarkerContainingDiv.appendChild(this.hintMarkers[i]);
 
@@ -533,7 +535,7 @@ var hintUtils = {
   spanWrap: function(hintString) {
     var innerHTML = [];
     for (var i = 0; i < hintString.length; i++)
-      innerHTML.push("<span>" + hintString[i].toUpperCase() + "</span>");
+      innerHTML.push("<span class='vimiumReset'>" + hintString[i].toUpperCase() + "</span>");
     return innerHTML.join("");
   },
 
@@ -542,7 +544,7 @@ var hintUtils = {
    */
   createMarkerFor: function(link) {
     var marker = document.createElement("div");
-    marker.className = "internalVimiumHintMarker vimiumHintMarker";
+    marker.className = "vimiumReset internalVimiumHintMarker vimiumHintMarker";
     marker.clickableItem = link.element;
 
     var clientRect = link.rect;
diff --git a/manifest.json b/manifest.json
index 5207e1c5..4b14f444 100644
--- a/manifest.json
+++ b/manifest.json
@@ -25,6 +25,7 @@
              "completionDialog.js",
              "bookmarks.js"
             ],
+      "css": ["vimium.css"],
       "run_at": "document_start",
       "all_frames": true
     }
diff --git a/options.html b/options.html
index 8dfd23e8..3d4033e3 100644
--- a/options.html
+++ b/options.html
@@ -79,6 +79,7 @@
       /* Boolean options have a tighter form representation than text options. */
       td.booleanOption { font-size: 12px; }
     </style>
+  <link rel="stylesheet" type="text/css" href="vimium.css" />
 
   <script type="text/javascript">
   $ = function(id) { return document.getElementById(id); };
diff --git a/test_harnesses/automated.html b/test_harnesses/automated.html
index 764b0d2f..ac9b9d37 100644
--- a/test_harnesses/automated.html
+++ b/test_harnesses/automated.html
@@ -26,6 +26,7 @@
         border-bottom: dashed 1px #999;
       }
     </style>
+    <link rel="stylesheet" type="text/css" href="../vimium.css" />
     <script type="text/javascript" src="../lib/utils.js"></script>
     <script type="text/javascript" src="../lib/keyboardUtils.js"></script>
     <script type="text/javascript" src="../linkHints.js"></script>
@@ -223,6 +224,28 @@
             assert.equal("5: a label", linkHints.hintMarkers[4].textContent.toLowerCase());
           })
 
+        ),
+
+        context("Input focus",
+
+          setup(function() {
+            var testContent =
+              "<input type='text' id='first'/>" +
+              "<input style='display:none;' id='second'/>" +
+              "<input type='password' id='third' value='some value'/>";
+            document.getElementById("test-div").innerHTML = testContent;
+          }),
+
+          tearDown(function() {
+            document.getElementById("test-div").innerHTML = "";
+          }),
+
+          should("focus the right element", function() {
+            focusInput(1);
+            assert.equal('first', document.activeElement.id);
+            focusInput(100);
+            assert.equal('third', document.activeElement.id);
+          })
         )
 
       );
diff --git a/vimium.css b/vimium.css
new file mode 100644
index 00000000..376fe331
--- /dev/null
+++ b/vimium.css
@@ -0,0 +1,272 @@
+/* All of these declarations contain more specifiers than nesscesary to increase their specificity and help to
+   ensure they override broad CSS declarations by the website vimium overlays. */
+.vimiumReset,
+div.vimiumReset,
+span.vimiumReset,
+table.vimiumReset,
+a.vimiumReset,
+a:visited.vimiumReset,
+a:link.vimiumReset,
+a:hover.vimiumReset,
+td.vimiumReset,
+tr.vimiumReset {
+  background: none;
+  border: none;
+  border: none;
+  bottom: auto;
+  box-shadow: none;
+  color: black;
+  cursor: auto;
+  display: inline;
+  float: none;
+  font-family : "Helvetica Neue", "Helvetica", "Arial", "Sans";
+  font-size: 12px;
+  font-style: normal;
+  font-variant: normal;
+  font-weight: normal;
+  height: auto;
+  left: auto;
+  letter-spacing: 0;
+  line-height: 100%;
+  margin: 0;
+  max-height: none;
+  max-width: none;
+  min-height: 0;
+  min-width: 0;
+  opacity: 1;
+  padding: 0;
+  position: static;
+  right: auto;
+  text-align: left;
+  text-decoration: none;
+  text-indent: 0;
+  text-shadow: none;
+  text-transform: none;
+  top: auto;
+  vertical-align: baseline;
+  white-space: normal;
+  width: auto;
+  z-index: 99999999;
+}
+
+/* Linkhints CSS */
+div.internalVimiumHintMarker {
+  position: absolute;
+  background-color: yellow;
+  border: 1px solid #E3BE23;
+  display: block;
+  top: -1px;
+  left: -1px;
+  padding: 0 1px;
+  box-shadow: rgba(0, 0, 0, 0.3) 2px 2px;
+}
+
+div.internalVimiumHintMarker span {
+  font-weight: bold;
+}
+
+div.internalVimiumHintMarker > .matchingCharacter {
+  color: #C79F0B;
+}
+
+/* Help Dialog CSS */
+
+div#vimiumHelpDialog {
+  border:3px solid red;
+  opacity:0.92;
+  background-color:#eee;
+  position:fixed;
+  border:2px solid #b3b3b3;
+  border-radius:6px;
+  padding:8px 12px;
+  width:640px;
+  left:50%;
+  /* This needs to be 1/2 width to horizontally center the help dialog */
+  margin-left:-320px;
+  top:50px;
+  -webkit-box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 6px;
+  overflow-y: scroll;
+  z-index:99999998;
+}
+  
+div#vimiumHelpDialog a { color:blue; }
+div#vimiumTitle, div#vimiumTitle span,  div#vimiumTitle * { font-size:20px; }
+#vimiumTitle {
+  display: block;
+  line-height: 130%;
+}
+div.vimiumColumn {
+  width:50%;
+  float:left;
+  font-size: 11px;
+  line-height: 130%;
+}
+
+div.vimiumColumn tr {
+    display: table-row;
+}
+
+div.vimiumColumn td {
+    display: table-cell;
+    font-size: 11px;
+    line-height: 130%;
+}
+div.vimiumColumn table, div.vimiumColumn td, div.vimiumColumn tr { padding:0; margin:0; }
+div.vimiumColumn table { width:100%; table-layout:auto; }
+div.vimiumColumn td { vertical-align:top; padding:1px; }
+div#vimiumHelpDialog div.vimiumColumn tr > td:first-of-type {
+  text-align:right;
+  font-weight:bold;
+  color:#2f508e;
+  white-space:nowrap;
+}
+/* Make the description column as wide as it can be. */
+div#vimiumHelpDialog div.vimiumColumn tr > td:nth-of-type(3) { width:100%; }
+div#vimiumHelpDialog div.vimiumDivider {
+  display: block;
+  height:1px;
+  width:92%;
+  margin:10px auto;
+  background-color:#9a9a9a;
+}
+div#vimiumHelpDialog td.vimiumHelpSectionTitle {
+  font-weight:bold;
+  padding-top:3px;
+}
+div#vimiumHelpDialog div.commandName { font-family:"courier new"; }
+/* Advanced commands are hidden by default until you show them. */
+div#vimiumHelpDialog div.advanced { display: none; }
+div#vimiumHelpDialog div.advanced td:nth-of-type(3) { color: #555; }
+div#vimiumHelpDialog a.closeButton {
+  position:absolute;
+  right:10px;
+  top:5px;
+  font-family:"courier new";
+  font-weight:bold;
+  color:#555;
+  text-decoration:none;
+  padding-left:10px;
+  font-size:16px;
+}
+div#vimiumHelpDialog a {
+  text-decoration: underline;
+}
+
+div#vimiumHelpDialog .optionsPage {
+  position: absolute;
+  display: block;
+  font-size: 11px;
+  line-height: 130%;
+  right: 60px;
+  top: 8px;
+}
+div#vimiumHelpDialog a.closeButton:hover {
+  color:black;
+  cursor:default;
+  -webkit-user-select:none;
+}
+div#vimiumHelpDialogFooter { 
+  display: block;
+  position: relative;
+}
+div#vimiumHelpDialogFooter * { font-size:10px; }
+div#vimiumHelpDialogFooter .toggleAdvancedCommands {
+  position: absolute;
+  right: 2px;
+  top: -34px;
+}
+
+/* Vimium HUD CSS */
+
+div.vimiumHUD { 
+  display: block;
+  position: fixed; 
+  top: auto; 
+  left: auto; 
+  bottom: 0px; 
+  color: black; 
+  height: 13px; 
+  min-height: 13px; 
+  width: auto; 
+  max-width: 400px; 
+  min-width: 150px; 
+  text-align: left; 
+  background-color: #ebebeb; 
+  padding: 3px 3px 2px 3px; 
+  margin: 0;  
+  border: 1px solid #b3b3b3; 
+  border-radius: 4px 4px 0 0; 
+  font-family: "Lucida Grande", "Arial", "Sans"; 
+  // One less than vimium's hint markers, so link hints can be shown e.g. for the panel's close button.
+  z-index: 99999998; 
+  text-shadow: 0px 1px 2px #FFF; 
+  line-height: 1.0; 
+  opacity: 0; 
+} 
+// Hide the span between search box letters
+div.vimiumHUD span { 
+  display: none; 
+} 
+div.vimiumHUD a:link, div.vimiumHUD a:hover { 
+  background: transparent; 
+  color: blue; 
+  text-decoration: underline; 
+} 
+div.vimiumHUD a:link.close-button { 
+  float:right; 
+  font-family:courier new; 
+  font-weight:bold; 
+  color:#9C9A9A; 
+  text-decoration:none; 
+  padding-left:10px; 
+  margin-top:-1px; 
+  font-size:14px; 
+} 
+div.vimiumHUD a.close-button:hover { 
+  color:#333333; 
+  cursor:default; 
+  -webkit-user-select:none; 
+}
+
+/* Bookmarks completion dialog CSS */
+
+div.vimium-dialog {
+  background-color: #ebebeb; 
+  display: block;
+  position:fixed;
+  z-index: 99999998; 
+  border: 1px solid #b3b3b3; 
+  padding:10px;
+  border-radius: 4px; 
+}
+
+div.vimium-completions {
+  width:400px;
+}
+
+div.vimium-completions .vimium-searchBar {
+  display: block;
+  height: 15px;
+  border-bottom: 1px solid #b3b3b3;
+}
+
+div.vimium-completions div.vimium-searchResults div {
+  display: block;
+}
+
+div.vimium-completions div.vimium-searchResults div.vimium-selected{
+  background-color:#aaa;
+  border-radius: 4px; 
+}
+
+div.vimium-completions div{
+  padding:4px;
+}
+
+div.vimium-completions div strong{
+  font-weight:bold;
+}
+
+div.vimium-completions div.vimium-noResults{
+  color:#555;
+};
diff --git a/vimiumFrontend.js b/vimiumFrontend.js
index 4ab01d2a..8d924ac7 100644
--- a/vimiumFrontend.js
+++ b/vimiumFrontend.js
@@ -744,6 +744,7 @@ function showHelpDialog(html, fid) {
   isShowingHelpDialog = true;
   var container = document.createElement("div");
   container.id = "vimiumHelpDialogContainer";
+  container.className = "vimiumReset";
 
   document.body.appendChild(container);
 
@@ -779,54 +780,6 @@ HUD = {
   // This HUD is styled to precisely mimick the chrome HUD on Mac. Use the "has_popup_and_link_hud.html"
   // test harness to tweak these styles to match Chrome's. One limitation of our HUD display is that
   // it doesn't sit on top of horizontal scrollbars like Chrome's HUD does.
-  _hudCss:
-    ".vimiumHUD, .vimiumHUD * {" +
-      "line-height: 100%;" +
-      "font-size: 11px;" +
-      "font-weight: normal;" +
-    "}" +
-    ".vimiumHUD {" +
-      "position: fixed;" +
-      "bottom: 0px;" +
-      "color: black;" +
-      "height: 13px;" +
-      "width: auto;" +
-      "max-width: 400px;" +
-      "min-width: 150px;" +
-      "text-align: left;" +
-      "background-color: #ebebeb;" +
-      "padding: 3px 3px 2px 3px;" +
-      "border: 1px solid #b3b3b3;" +
-      "border-radius: 4px 4px 0 0;" +
-      "font-family: Lucida Grande, Arial, Sans;" +
-      // One less than vimium's hint markers, so link hints can be shown e.g. for the panel's close button.
-      "z-index: 99999998;" +
-      "text-shadow: 0px 1px 2px #FFF;" +
-      "line-height: 1.0;" +
-      "opacity: 0;" +
-    "}" +
-    ".vimiumHUD a, .vimiumHUD a:hover {" +
-      "background: transparent;" +
-      "color: blue;" +
-      "text-decoration: underline;" +
-    "}" +
-    ".vimiumHUD a.close-button {" +
-      "float:right;" +
-      "font-family:courier new;" +
-      "font-weight:bold;" +
-      "color:#9C9A9A;" +
-      "text-decoration:none;" +
-      "padding-left:10px;" +
-      "margin-top:-1px;" +
-      "font-size:14px;" +
-    "}" +
-    ".vimiumHUD a.close-button:hover {" +
-      "color:#333333;" +
-      "cursor:default;" +
-      "-webkit-user-select:none;" +
-    "}",
-
-  _cssHasBeenAdded: false,
 
   showForDuration: function(text, duration) {
     HUD.show(text);
@@ -843,8 +796,8 @@ HUD = {
 
   showUpgradeNotification: function(version) {
     HUD.upgradeNotificationElement().innerHTML = "Vimium has been updated to " +
-      "<a href='https://chrome.google.com/extensions/detail/dbepggeogbaibhgnhhndojpepiihcmeb'>" +
-      version + "</a>.<a class='close-button' href='#'>x</a>";
+      "<a class='vimiumReset' href='https://chrome.google.com/extensions/detail/dbepggeogbaibhgnhhndojpepiihcmeb'>" +
+      version + "</a>.<a class='vimiumReset close-button' href='#'>x</a>";
     var links = HUD.upgradeNotificationElement().getElementsByTagName("a");
     links[0].addEventListener("click", HUD.onUpdateLinkClicked, false);
     links[1].addEventListener("click", function(event) {
@@ -886,12 +839,8 @@ HUD = {
   },
 
   createHudElement: function() {
-    if (!HUD._cssHasBeenAdded) {
-      addCssToPage(HUD._hudCss);
-      HUD._cssHasBeenAdded = true;
-    }
     var element = document.createElement("div");
-    element.className = "vimiumHUD";
+    element.className = "vimiumReset vimiumHUD";
     document.body.appendChild(element);
     return element;
   },