diff options
Diffstat (limited to 'options/options.html')
| -rw-r--r-- | options/options.html | 227 |
1 files changed, 227 insertions, 0 deletions
diff --git a/options/options.html b/options/options.html new file mode 100644 index 00000000..93a402fb --- /dev/null +++ b/options/options.html @@ -0,0 +1,227 @@ +<html> + <head> + <title>Vimium Options</title> + <script src="../lib/utils.js"></script> + <script src="../lib/keyboard_utils.js"></script> + <script src="../lib/dom_utils.js"></script> + <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/vimium_frontend.js"></script> + <style type="text/css" media="screen"> + body { + font-family:"helvetica neue", "helvetica", "arial", "sans"; + width:640px; + margin:10px auto; + } + a, a:visited { color:blue; } + #optionsTableWrapper { + width:490px; + border:1px solid red; + } + .example { + font-size: 12px; + color:#555; + margin-left:20px; + } + .caption { + margin-right:10px; + min-width: 130px; + } + td { + padding:5px 0; + padding-bottom: 8px; + } + td#mappingsHelp { + padding:20px 0; + } + textarea#excludedUrls { + width:490px; + min-height:100px; + } + textarea#userDefinedLinkHintCss { + width:342px; + min-height:100px; + } + textarea#keyMappings { + width:342px; + min-height:100px; + } + #status { + margin-left:10px; + font-size:80%; + } + /* Make the caption in the settings table as small as possible, to pull the other fields to the right. */ + td:nth-child(1) { + width:1px; + white-space:nowrap; + } + #buttonsPanel { + /* This should match the width of #excludedUrls + 5px of padding to move the buttons to the right. */ + width:495px; + text-align:right; + margin-top:18px; + margin-right:-10px; + } + #showHelpDialogMessage { + width:495px; + font-size:15px; + } + .help { + position:absolute; + right:-280px; + width:280px; + } + tr.advancedOption { + display:none; + } + input:read-only { + background-color: #eee; + color: #666; + } + /* Boolean options have a tighter form representation than text options. */ + td.booleanOption { font-size: 12px; } + </style> + <link rel="stylesheet" type="text/css" href="../vimium.css" /> + + <script type="text/javascript" src="options.js"></script> + + </head> + + <body> + <h1>Vimium - Options</h1> + <table style="position:relative"> + <tr> + <td class="caption">Scroll step size</td> + <td> + <input id="scrollStepSize" type="text" style="width:50px" />px + </td> + </tr> + <tr> + <td colspan="3"> + Excluded URLs<br/> + <div class="help"> + <div class="example"> + e.g. http*://mail.google.com/*<br/> + This will disable Vimium on Gmail.<br/><br/> + Enter one URL per line.<br/> + </div> + </div> + <textarea id="excludedUrls"></textarea> + </td> + </tr> + <tr> + <td colspan="3"> + <a href="#" id="advancedOptions">Advanced options »</a> + </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/> + <div style="margin-left:10px;margin-top:5px"> + map j scrollDown<br/> + unmap j<br/> + unmapAll<br/> + " this is a comment<br/> + # this is also a comment<br/> + </div> + <a href="#" id="showCommands">Show available commands.</a> + </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"> + <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" 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> + <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">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" style="width:320px" /> + </td> + </tr> + <tr class="advancedOption"> + <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" style="width:320px" /> + </td> + </tr> + </table> + + <div id="buttonsPanel"> + <button id="restoreSettings">Restore to Defaults</button> + <button id="saveOptions" disabled="true">Save Options</button> + </div> + + <br/> + + <div id="showHelpDialogMessage"> + To view all available shortcuts, type <span style="font-weight:bold">?</span> to show the Vimium help dialog. + </div> + </body> +</html> |