Harden and move CSS declarations out of the code.

Remove CSS from background_page.html and change getLinkHintCss to only return the user's overrides.
Add vimiumReset class to html generated by completionDialog, helpDialog, linkHints and vimiumFrontEnd
Add vimium.css to the manifest and link to it in the tests_harnesses/automated.html and options.html.
Add an id, vimiumLinkHintsContainer, to linkhints div to allow user overrides to have a higher specificity.
Change the default for the user CSS override.

1 files changed, 4 insertions, 65 deletions

diff --git a/vimiumFrontend.js b/vimiumFrontend.js
index 9b93b4dd..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,64 +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;" +
-      "letter-spacing: 0;" +
-      "text-decoration: none;" +
-    "}" +
-    ".vimiumHUD {" +
-      "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
-    ".vimiumHUD span {" +
-      "display: none;" +
-    "}" +
-    ".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);
@@ -853,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) {
@@ -896,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;
   },