Move the link hints CSS to the background page, and create a setting for user-definable CSS.

1 files changed, 34 insertions, 2 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) {