Add a UI on the options page for entering custom CSS for link hints.

1 files changed, 19 insertions, 2 deletions

diff --git a/options.html b/options.html
index d135799a..7d9a1e82 100644
--- a/options.html
+++ b/options.html
@@ -26,6 +26,10 @@
         width:450px;
         min-height:100px;
       }
+      textarea#userDefinedLinkHintCss {
+        width:302px;
+        min-height:100px;
+      }
       #status {
         margin-left:10px;
         font-size:80%;
@@ -40,7 +44,6 @@
         width:455px;
         text-align:right;
         margin-top:18px;
-
         margin-right:-10px;
       }
       .help {
@@ -59,7 +62,8 @@
 
   var defaultSettings = chrome.extension.getBackgroundPage().defaultSettings;
 
-  var editableFields = ["scrollStepSize", "defaultZoomLevel", "excludedUrls", "linkHintCharacters"];
+  var editableFields = ["scrollStepSize", "defaultZoomLevel", "excludedUrls", "linkHintCharacters",
+    "userDefinedLinkHintCss"];
 
   function initializeOptions() {
     populateOptions();
@@ -163,6 +167,19 @@
             <input id="linkHintCharacters" type="text" style="width:150px" />
         </td>
       </tr>
+      <tr class="advancedOption">
+        <td class="caption">CSS for link hints</td>
+        <td verticalAlign="top">
+            <div class="help">
+              <div class="example">
+                The CSS used to style the characters next to each link hint.<br/><br/>
+                Note: these styles are used in addition to and take precedence over Vimium's
+                default styles.
+              </div>
+            </div>
+            <textarea id="userDefinedLinkHintCss" type="text"></textarea>
+        </td>
+      </tr>
     </table>
 
     <div id="buttonsPanel">