Make the numbers used in the filtered link hints configurable.

Closes #380.

2 files changed, 132 insertions, 112 deletions

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…"
+toggleAdvancedOptions = do (advancedMode=false) -> (event) ->
+  if advancedMode
+    $("advancedOptions").style.display = "table-row-group"
+    $("advancedOptionsLink").innerHTML = "Show advanced options…"
   else
-    showOrHideLink.innerHTML = "Show advanced options…"
+    $("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>