Make the numbers used in the filtered link hints configurable.

Closes #380.

6 files changed, 166 insertions, 142 deletions

diff --git a/background_scripts/settings.coffee b/background_scripts/settings.coffee
index aed509e4..fc78d48f 100644
--- a/background_scripts/settings.coffee
+++ b/background_scripts/settings.coffee
@@ -23,6 +23,7 @@ root.Settings = Settings =
   defaults:
     scrollStepSize: "60"
     linkHintCharacters: "sadfjklewcmpgh"
+    linkHintNumbers: "0123456789"
     filterLinkHints: false
     hideHud: false
     userDefinedLinkHintCss:
diff --git a/content_scripts/link_hints.coffee b/content_scripts/link_hints.coffee
index 5c7f6510..9b381a9c 100644
--- a/content_scripts/link_hints.coffee
+++ b/content_scripts/link_hints.coffee
@@ -281,11 +281,11 @@ alphabetHints =
 
     if (digitsNeeded > 1)
       for i in [0...shortHintCount]
-        hintStrings.push(@numberToHintString(i, digitsNeeded - 1, linkHintCharacters))
+        hintStrings.push(numberToHintString(i, linkHintCharacters, digitsNeeded - 1))
 
     start = shortHintCount * linkHintCharacters.length
     for i in [start...(start + longHintCount)]
-      hintStrings.push(@numberToHintString(i, digitsNeeded, linkHintCharacters))
+      hintStrings.push(numberToHintString(i, linkHintCharacters, digitsNeeded))
 
     @shuffleHints(hintStrings, linkHintCharacters.length)
 
@@ -302,29 +302,6 @@ alphabetHints =
       result = result.concat(bucket)
     result
 
-  #
-  # Converts a number like "8" into a hint string like "JK". This is used to sequentially generate all of the
-  # hint text. The hint string will be "padded with zeroes" to ensure its length is equal to numHintDigits.
-  #
-  numberToHintString: (number, numHintDigits, characterSet) ->
-    base = characterSet.length
-    hintString = []
-    remainder = 0
-    loop
-      remainder = number % base
-      hintString.unshift(characterSet[remainder])
-      number -= remainder
-      number /= Math.floor(base)
-      break unless number > 0
-
-    # Pad the hint string we're returning so that it matches numHintDigits.
-    # Note: the loop body changes hintString.length, so the original length must be cached!
-    hintStringLength = hintString.length
-    for i in [0...(numHintDigits - hintStringLength)] by 1
-      hintString.unshift(characterSet[0])
-
-    hintString.join("")
-
   matchHintsByKey: (hintMarkers, event) ->
     # If a shifted-character is typed, treat it as lowerase for the purposes of matching hints.
     keyChar = KeyboardUtils.getKeyChar(event).toLowerCase()
@@ -360,7 +337,8 @@ filterHints =
           labelText = labelText.substr(0, labelText.length-1)
         @labelMap[forElement] = labelText
 
-  generateHintString: (linkHintNumber) -> (linkHintNumber + 1).toString()
+  generateHintString: (linkHintNumber) ->
+    (numberToHintString linkHintNumber + 1, settings.get "linkHintNumbers").toUpperCase()
 
   generateLinkText: (element) ->
     linkText = ""
@@ -416,7 +394,7 @@ filterHints =
       if (!@hintKeystrokeQueue.pop() && !@linkTextKeystrokeQueue.pop())
         return { linksMatched: [] }
     else if (keyChar)
-      if (/[0-9]/.test(keyChar))
+      if (settings.get("linkHintNumbers").indexOf(keyChar) >= 0)
         @hintKeystrokeQueue.push(keyChar)
       else
         # since we might renumber the hints, the current hintKeyStrokeQueue
@@ -476,5 +454,29 @@ spanWrap = (hintString) ->
     innerHTML.push("<span class='vimiumReset'>" + char + "</span>")
   innerHTML.join("")
 
+#
+# Converts a number like "8" into a hint string like "JK". This is used to sequentially generate all of the
+# hint text. The hint string will be "padded with zeroes" to ensure its length is >= numHintDigits.
+#
+numberToHintString = (number, characterSet, numHintDigits = 0) ->
+  base = characterSet.length
+  hintString = []
+  remainder = 0
+  loop
+    remainder = number % base
+    hintString.unshift(characterSet[remainder])
+    number -= remainder
+    number /= Math.floor(base)
+    break unless number > 0
+
+  # Pad the hint string we're returning so that it matches numHintDigits.
+  # Note: the loop body changes hintString.length, so the original length must be cached!
+  hintStringLength = hintString.length
+  for i in [0...(numHintDigits - hintStringLength)] by 1
+    hintString.unshift(characterSet[0])
+
+  hintString.join("")
+
+
 root = exports ? window
 root.LinkHints = LinkHints
diff --git a/content_scripts/vimium_frontend.coffee b/content_scripts/vimium_frontend.coffee
index 044b0a49..e7ced988 100644
--- a/content_scripts/vimium_frontend.coffee
+++ b/content_scripts/vimium_frontend.coffee
@@ -42,9 +42,9 @@ settings =
   port: null
   values: {}
   loadedValues: 0
-  valuesToLoad: ["scrollStepSize", "linkHintCharacters", "filterLinkHints", "hideHud", "previousPatterns",
-      "nextPatterns", "findModeRawQuery", "regexFindMode", "userDefinedLinkHintCss",
-      "helpDialog_showAdvancedCommands"]
+  valuesToLoad: ["scrollStepSize", "linkHintCharacters", "linkHintNumbers", "filterLinkHints", "hideHud",
+    "previousPatterns", "nextPatterns", "findModeRawQuery", "regexFindMode", "userDefinedLinkHintCss",
+    "helpDialog_showAdvancedCommands"]
   isLoaded: false
   eventListeners: {}
 
diff --git a/options/options.coffee b/options/options.coffee
index 640b6632..6dc2c8dd 100644
--- a/options/options.coffee
+++ b/options/options.coffee
@@ -2,7 +2,7 @@ $ = (id) -> document.getElementById id
 
 bgSettings = chrome.extension.getBackgroundPage().Settings
 
-editableFields = [ "scrollStepSize", "excludedUrls", "linkHintCharacters",
+editableFields = [ "scrollStepSize", "excludedUrls", "linkHintCharacters", "linkHintNumbers",
   "userDefinedLinkHintCss", "keyMappings", "filterLinkHints", "previousPatterns",
   "nextPatterns", "hideHud", "regexFindMode", "searchUrl"]
 
@@ -22,7 +22,7 @@ document.addEventListener "DOMContentLoaded", ->
     $(field).addEventListener "change", enableSaveButton, false
     $(field).addEventListener "change", onDataLoaded, false
 
-  $("advancedOptions").addEventListener "click", openAdvancedOptions, false
+  $("advancedOptionsLink").addEventListener "click", toggleAdvancedOptions, false
   $("showCommands").addEventListener "click", (->
     showHelpDialog chrome.extension.getBackgroundPage().helpDialogHtml(true, true, "Command Listing"), frameId
   ), false
@@ -37,7 +37,14 @@ onOptionKeyup = (event) ->
     enableSaveButton()
 
 onDataLoaded = ->
-  $("linkHintCharacters").readOnly = $("filterLinkHints").checked
+  hide = (el) -> el.parentNode.parentNode.style.display = "none"
+  show = (el) -> el.parentNode.parentNode.style.display = "table-row"
+  if $("filterLinkHints").checked
+    hide $("linkHintCharacters")
+    show $("linkHintNumbers")
+  else
+    show $("linkHintCharacters")
+    hide $("linkHintNumbers")
 
 enableSaveButton = ->
   $("saveOptions").removeAttribute "disabled"
@@ -88,13 +95,12 @@ setFieldValue = (field, value) ->
   else
     field.checked = value
 
-openAdvancedOptions = (event) ->
-  elements = document.getElementsByClassName("advancedOption")
-  for element in elements
-    element.style.display = (if (element.style.display is "table-row") then "none" else "table-row")
-  showOrHideLink = $("advancedOptions")
-  if showOrHideLink.innerHTML.match(/^Show/)?
-    showOrHideLink.innerHTML = "Hide advanced options&hellip;"
+toggleAdvancedOptions = do (advancedMode=false) -> (event) ->
+  if advancedMode
+    $("advancedOptions").style.display = "table-row-group"
+    $("advancedOptionsLink").innerHTML = "Show advanced options&hellip;"
   else
-    showOrHideLink.innerHTML = "Show advanced options&hellip;"
+    $("advancedOptions").style.display = "table-row-group"
+    $("advancedOptionsLink").innerHTML = "Hide advanced options"
+  advancedMode = !advancedMode
   event.preventDefault()
diff --git a/options/options.html b/options/options.html
index 0d85ca70..d5f836e7 100644
--- a/options/options.html
+++ b/options/options.html
@@ -8,6 +8,7 @@
     <script src="../lib/clipboard.js"></script>
     <script src="../content_scripts/link_hints.js"></script>
     <script src="../content_scripts/vomnibar.js"></script>
+    <script src="../content_scripts/scroller.js"></script>
     <script src="../content_scripts/vimium_frontend.js"></script>
     <style type="text/css" media="screen">
       body {
@@ -137,7 +138,8 @@
         white-space: nowrap;
       }
       #buttonsPanel { width: 100%; }
-      #advancedOptions { line-height: 24px; }
+      #advancedOptions { display: none; }
+      #advancedOptionsLink { line-height: 24px; }
       #buttonContainer { float: right; }
       #buttonContainer button:last-child {
         margin-right: 0;
@@ -148,7 +150,6 @@
         right: -320px;
         width: 320px;
       }
-      tr.advancedOption { display: none; }
       input:read-only {
         background-color: #eee;
         color: #666;
@@ -203,130 +204,143 @@
               <textarea id="excludedUrls"></textarea>
           </td>
         </tr>
-        <tr class="advancedOption">
-          <td class="caption">Custom key<br/>mappings</td>
-          <td id="mappingsHelp" verticalAlign="top">
-            <div class="help">
-              <div class="example">
-                <!-- TODO(ilya/philc): Expand this and style it better. -->
-                Enter commands to remap your keys. Available commands:<br/>
-                <pre id="exampleKeyMapping">
+        <tbody id='advancedOptions'>
+          <tr>
+            <td class="caption">Custom key<br/>mappings</td>
+            <td id="mappingsHelp" verticalAlign="top">
+              <div class="help">
+                <div class="example">
+                  <!-- TODO(ilya/philc): Expand this and style it better. -->
+                  Enter commands to remap your keys. Available commands:<br/>
+                  <pre id="exampleKeyMapping">
 map j scrollDown
 unmap j
 unmapAll
 " this is a comment
 # this is also a comment</pre>
-                <a href="#" id="showCommands">Show available commands.</a>
+                  <a href="#" id="showCommands">Show available commands.</a>
+                </div>
               </div>
-            </div>
-            <textarea id="keyMappings" type="text"></textarea>
-          </td>
-        </tr>
-        <tr class="advancedOption">
-          <td class="caption">Characters used<br/> for link hints</td>
-          <td verticalAlign="top">
+              <textarea id="keyMappings" type="text"></textarea>
+            </td>
+          </tr>
+          <tr>
+            <td class="caption">CSS for link hints</td>
+            <td verticalAlign="top">
               <div class="help">
                 <div class="example">
-                  The characters placed next to each link after typing "F" to enter link hinting mode.
+                  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>
-              <input id="linkHintCharacters" type="text" />
-          </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" class="code" type="text"></textarea>
-          </td>
-        </tr>
-        <tr class="advancedOption">
-          <td class="caption"></td>
-          <td verticalAlign="top" class="booleanOption">
-            <div class="help">
-              <div class="example">
-                After typing "F" to enter link hinting mode, this option lets you type the text of a link
-                to select it.
-              </div>
-            </div>
-            <label>
-              <input id="filterLinkHints" type="checkbox"/>
-              Use the link's name and numbers for link hint filtering
-            </label>
-          </td>
-        </tr>
-        <tr class="advancedOption">
-          <td class="caption"></td>
-          <td verticalAlign="top" class="booleanOption">
-            <div class="help">
-              <div class="example">
-                The Heads-Up Display appears when typing into text boxes.
-              </div>
-            </div>
-            <label>
-              <input id="hideHud" type="checkbox"/>
-              Hide the Heads Up Display (HUD)
-            </label>
-          </td>
-        </tr>
-        <tr class="advancedOption">
-          <td class="caption"></td>
-          <td verticalAlign="top" class="booleanOption">
-            <div class="help">
-              <div class="example">
-                Switch back to plain find mode by using the <code>\R</code> escape sequence.
-              </div>
-            </div>
-            <label>
-              <input id="regexFindMode" type="checkbox"/>
-              Treat find queries as regular expressions.
-            </label>
-          </td>
-        </tr>
-        <tr class="advancedOption">
-          <td class="caption">Previous Patterns</td>
-          <td verticalAlign="top">
+              <textarea id="userDefinedLinkHintCss" class="code" type="text"></textarea>
+            </td>
+          </tr>
+          <tr>
+            <td class="caption">Characters used<br/> for link hints</td>
+            <td verticalAlign="top">
+                <div class="help">
+                  <div class="example">
+                    The characters placed next to each link after typing "F" to enter link hinting mode.
+                  </div>
+                </div>
+                <input id="linkHintCharacters" type="text" />
+            </td>
+          </tr>
+          <tr>
+            <td class="caption">Numbers used<br/> for filtered link hints</td>
+            <td verticalAlign="top">
+                <div class="help">
+                  <div class="example">
+                    The numbers placed next to each link after typing "F" to enter link hinting mode.
+                  </div>
+                </div>
+                <input id="linkHintNumbers" type="text" />
+            </td>
+          </tr>
+          <tr>
+            <td class="caption"></td>
+            <td verticalAlign="top" class="booleanOption">
               <div class="help">
                 <div class="example">
-                  Vimium will match against these patterns when using the "navigate to the previous page"
-                  command.
+                  After typing "F" to enter link hinting mode, this option lets you type the text of a link
+                  to select it.
                 </div>
               </div>
-              <input id="previousPatterns" type="text" />
-          </td>
-        </tr>
-        <tr class="advancedOption">
-          <td class="caption">Next Patterns</td>
-          <td verticalAlign="top">
+              <label>
+                <input id="filterLinkHints" type="checkbox"/>
+                Use the link's name and numbers for link hint filtering
+              </label>
+            </td>
+          </tr>
+          <tr>
+            <td class="caption"></td>
+            <td verticalAlign="top" class="booleanOption">
               <div class="help">
                 <div class="example">
-                  Vimium will match against these patterns when using the "navigate to the next page" command.
+                  The Heads-Up Display appears when typing into text boxes.
                 </div>
               </div>
-              <input id="nextPatterns" type="text" />
-          </td>
-        </tr>
-        <tr class="advancedOption">
-          <td class="caption">Search</td>
-          <td verticalAlign="top">
+              <label>
+                <input id="hideHud" type="checkbox"/>
+                Hide the Heads Up Display (HUD)
+              </label>
+            </td>
+          </tr>
+          <tr>
+            <td class="caption"></td>
+            <td verticalAlign="top" class="booleanOption">
               <div class="help">
                 <div class="example">
-                  Set which search engine is used when searching from the Vomnibar (examples: "http://duckduckgo.com/?q=", "http://www.google.com/search?q=").
+                  Switch back to plain find mode by using the <code>\R</code> escape sequence.
                 </div>
               </div>
-              <input id="searchUrl" type="text" />
-          </td>
-        </tr>
+              <label>
+                <input id="regexFindMode" type="checkbox"/>
+                Treat find queries as regular expressions.
+              </label>
+            </td>
+          </tr>
+          <tr>
+            <td class="caption">Previous Patterns</td>
+            <td verticalAlign="top">
+                <div class="help">
+                  <div class="example">
+                    Vimium will match against these patterns when using the "navigate to the previous page"
+                    command.
+                  </div>
+                </div>
+                <input id="previousPatterns" type="text" />
+            </td>
+          </tr>
+          <tr>
+            <td class="caption">Next Patterns</td>
+            <td verticalAlign="top">
+                <div class="help">
+                  <div class="example">
+                    Vimium will match against these patterns when using the "navigate to the next page" command.
+                  </div>
+                </div>
+                <input id="nextPatterns" type="text" />
+            </td>
+          </tr>
+          <tr>
+            <td class="caption">Search</td>
+            <td verticalAlign="top">
+                <div class="help">
+                  <div class="example">
+                    Set which search engine is used when searching from the Vomnibar (examples: "http://duckduckgo.com/?q=", "http://www.google.com/search?q=").
+                  </div>
+                </div>
+                <input id="searchUrl" type="text" />
+            </td>
+          </tr>
+        </tbody>
       </table>
 
       <div id="buttonsPanel">
-        <a href="#" id="advancedOptions">Show advanced options&hellip;</a>
+        <a href="#" id="advancedOptionsLink">Show advanced options&hellip;</a>
         <div id="buttonContainer">
           <button id="restoreSettings">Restore to Defaults</button>
           <button id="saveOptions" disabled="true">Save Options</button>
diff --git a/tests/dom_tests/dom_tests.coffee b/tests/dom_tests/dom_tests.coffee
index 2f1e69b5..04c81068 100644
--- a/tests/dom_tests/dom_tests.coffee
+++ b/tests/dom_tests/dom_tests.coffee
@@ -94,6 +94,7 @@ context "Filtered link hints",
 
   setup ->
     stub settings.values, "filterLinkHints", true
+    stub settings.values, "linkHintNumbers", "0123456789"
 
   context "Text hints",