3 files changed, 43 insertions, 21 deletions

diff --git a/background_page.html b/background_page.html
index 5d93186a..84f06cf3 100644
--- a/background_page.html
+++ b/background_page.html
@@ -9,9 +9,33 @@
   var defaultSettings = {
     scrollStepSize: 60,
     defaultZoomLevel: 100,
-    linkHintCharacters: "sadfjklewcmp"
+    linkHintCharacters: "sadfjklewcmp",
+    userDefinedLinkHintCss:
+      ".vimiumHintMarker {\n\n}\n" +
+      ".vimiumHintMarker > .matchingCharacter {\n\n}"
   };
 
+  // This is the base internal link hints CSS. It's combined with the userDefinedLinkHintCss before
+  // being sent to the frontend.
+  var linkHintCss =
+    '.internalVimiumHintMarker {' +
+      '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";' +
+    '}' +
+    '.internalVimiumHintMarker > .matchingCharacter {' +
+      'color:#C79F0B;' +
+    '}';
+
+
   // Port handler mapping
   var portHandlers = {
     keyDown:              handleKeyDown,
@@ -24,7 +48,8 @@
   };
 
   var sendRequestHandlers = {
-    getCompletionKeys:    getCompletionKeys
+    getCompletionKeys: getCompletionKeys,
+    getLinkHintCss: getLinkHintCss
   };
 
   // Event handlers
@@ -111,6 +136,13 @@
   }
 
   /*
+   * Returns the core CSS used for link hints, along with any user-provided overrides.
+   */
+  function getLinkHintCss(request) {
+    return { linkHintCss: linkHintCss + (localStorage['userDefinedLinkHintCss'] || "") };
+  }
+
+  /*
    * Used by the content scripts to get settings from the local storage.
    */
   function getSetting(args, port) {
diff --git a/linkHints.js b/linkHints.js
index 864ee23a..420a65b5 100644
--- a/linkHints.js
+++ b/linkHints.js
@@ -4,24 +4,8 @@
  * a link.
  *
  * The characters we use to show link hints are a user-configurable option. By default they're the home row.
+ * The CSS which is used on the link hints is also a configurable option.
  */
-var linkHintsCss =
-  '.vimiumHintMarker {' +
-    '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";' +
-  '}' +
-  '.vimiumHintMarker > span.matchingCharacter {' +
-    'color:#C79F0B;' +
-  '}';
 
 var hintMarkers = [];
 // The characters that were typed in while in "link hints" mode.
@@ -40,7 +24,8 @@ function activateLinkHintsModeToOpenInNewTab() { activateLinkHintsMode(true); }
 
 function activateLinkHintsMode(openInNewTab) {
   if (!linkHintsCssAdded)
-    addCssToPage(linkHintsCss);
+    addCssToPage(linkHintCss); // linkHintCss is declared by vimiumFrontend.js
+  linkHintCssAdded = true;
   linkHintsModeActivated = true;
   shouldOpenLinkHintInNewTab = openInNewTab
   buildLinkHints();
@@ -260,7 +245,7 @@ function deactivateLinkHintsMode() {
 function addMarkerFor(link, linkHintNumber, linkHintDigits) {
   var hintString = numberToHintString(linkHintNumber, linkHintDigits);
   var marker = document.createElement("div");
-  marker.className = "vimiumHintMarker";
+  marker.className = "internalVimiumHintMarker vimiumHintMarker";
   var innerHTML = [];
   // Make each hint character a span, so that we can highlight the typed characters as you type them.
   for (var i = 0; i < hintString.length; i++)
diff --git a/vimiumFrontend.js b/vimiumFrontend.js
index 33814951..8afa93eb 100644
--- a/vimiumFrontend.js
+++ b/vimiumFrontend.js
@@ -22,6 +22,7 @@ var isEnabledForUrl = true;
 // The user's operating system.
 var platform;
 var currentCompletionKeys;
+var linkHintCss;
 
 // TODO(philc): This should be pulled from the extension's storage when the page loads.
 var currentZoomLevel = 100;
@@ -65,6 +66,10 @@ function initializePreDomReady() {
   var getZoomLevelPort = chrome.extension.connect({ name: "getZoomLevel" });
   getZoomLevelPort.postMessage({ domain: window.location.host });
 
+  chrome.extension.sendRequest({handler: "getLinkHintCss"}, function (response) {
+    linkHintCss = response.linkHintCss;
+  });
+
   refreshCompletionKeys();
 
   // Send the key to the key handler in the background page.