<html>
<head>
<title>Vimium Options</title>
<link rel="stylesheet" type="text/css" href="options.css">
<script src="content_script_loader.js"></script>
<script type="text/javascript" src="options.js"></script>
</head>
<body>
<div id="wrapper">
<header>Vimium Options</header>
<table id="options">
<tr>
<td class="caption">Excluded URLs<br/>and keys</td>
<td>
<div class="help">
<div class="example">
Wholly or partially disable Vimium. "Patterns" are URL regular expressions;
additionally, "*" matches any zero or more characters.
<br/><br/>
If "Keys" is left empty, then Vimium is wholly disabled.
Otherwise, just the listed keys are disabled (they are passed through).
</div>
</div>
<div>
<div id="exclusionScrollBox">
<!-- Populated from exclusions.html by options.coffee. -->
</div>
<button id="exclusionAddButton">Add Rule</button>
</div>
</td>
</tr>
<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>.
</div>
</div>
<textarea id="keyMappings" type="text"></textarea>
</td>
</tr>
<tr>
<td class="caption">Custom search<br/>engines</td>
<td verticalAlign="top">
<div class="help">
<div class="example">
Add search-engine shortcuts to the Vomnibar. Format:<br/>
<pre>
a: http://a.com/?q=%s
b: http://b.com/?q=%s description
" this is a comment
# this is also a comment</pre>
%s is replaced with the search terms. <br/>
For search completion, see <a href="completion_engines.html" target="_blank">here</a>.
</div>
</div>
<textarea id="searchEngines"></textarea>
</td>
</tr>
<tbody id='advancedOptions'>
<tr>
<td colspan="2"><header>Advanced Options</header></td>
</tr>
<tr>
<td class="caption">Scroll step size</td>
<td>
<div class="help">
<div class="example">
The size for basic movements (usually j/k/h/l).
</div>
</div>
<input id="scrollStepSize" type="number" />px
</td>
</tr>
<tr id="linkHintCharactersContainer">
<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-hint mode.
</div>
</div>
<input id="linkHintCharacters" type="text" />
<div class="nonEmptyTextOption">
</td>
</tr>
<tr id="linkHintNumbersContainer">
<td class="caption">Numbers used<br/> for 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-hint mode.
</div>
</div>
<input id="linkHintNumbers" type="text" />
<div class="nonEmptyTextOption">
</td>
</tr>
<tr>
<td class="caption" verticalAlign="top">Miscellaneous<br/>options</td>
<td verticalAlign="top" class="booleanOption">
<label>
<input id="smoothScroll" type="checkbox"/>
Use smooth scrolling
</label>
</td>
</tr>
<tr>
<td class="caption"></td>
<td verticalAlign="top" class="booleanOption">
<div class="help">
<div class="example">
In link-hint mode, this option lets you select a link by typing its text.
</div>
</div>
<label>
<input id="filterLinkHints" type="checkbox"/>
Use the link's name and numbers for link-hint filtering
</label>
</td>
</tr>
<tr id="waitForEnterForFilteredHintsContainer">
<td class="caption"></td>
<td verticalAlign="top" class="booleanOption">
<div class="help">
<div class="example">
You activate the link with <tt>Enter</tt>, <em>always</em>; so you never accidentally type Vimium
commands.
</div>
</div>
<label>
<input id="waitForEnterForFilteredHints" type="checkbox"/>
Require <tt>Enter</tt> when filtering hints
</label>
</td>
</tr>
<tr>
<td class="caption"></td>
<td verticalAlign="top" class="booleanOption">
<div class="help">
<div class="example">
Prevent pages from focusing an input on load (e.g. Google, Bing, etc.).
</div>
</div>
<label>
<input id="grabBackFocus" type="checkbox"/>
Don't let pages steal the focus on load
</label>
</td>
</tr>
<tr>
<td class="caption"></td>
<td verticalAlign="top" class="booleanOption">
<div class="help">
<div class="example">
When enabled, the HUD will not be displayed in insert mode.
</div>
</div>
<label>
<input id="hideHud" type="checkbox"/>
Hide the Heads Up Display (HUD) in insert mode
</label>
</td>
</tr>
<tr>
<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>
<td class="caption">Previous patterns</td>
<td verticalAlign="top">
<div class="help">
<div class="example">
The "navigate to previous page" command uses these patterns to find the link to follow.
</div>
</div>
<input id="previousPatterns" type="text" />
<div class="nonEmptyTextOption">
</td>
</tr>
<tr>
<td class="caption">Next patterns</td>
<td verticalAlign="top">
<div class="help">
<div class="example">
The "navigate to next page" command uses these patterns to find the link to follow.
</div>
</div>
<input id="nextPatterns" type="text" />
<div class="nonEmptyTextOption">
</td>
</tr>
<tr>
<td class="caption">New tab URL</td>
<td verticalAlign="top">
<div class="help">
<div class="example">
The page to open with the "create new tab" command.
Set this to "<tt>pages/blank.html</tt>" for a blank page (except incognito mode).<br />
</div>
</div>
<input id="newTabUrl" type="text" />
<div class="nonEmptyTextOption">
</td>
</tr>
<tr>
<td class="caption">Home</td>
<td verticalAlign="top">
<div class="help">
<div class="example">
Set which URL is used for all new tabs.
</div>
</div>
<input id="homeUrl" type="text" />
</td>
</tr>
<tr>
<td class="caption">Default search<br/>engine</td>
<td verticalAlign="top">
<div class="help">
<div class="example">
The search engine to use in the Vomnibar <br> (e.g.: "http://duckduckgo.com/?q=").
</div>
</div>
<input id="searchUrl" type="text" />
<div class="nonEmptyTextOption">
</td>
</tr>
<tr>
<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/>
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>
<div class="nonEmptyTextOption">
</td>
</tr>
<!-- Vimium Labs -->
<!--
Disabled. But we leave this code here as a template for the next time we need to introduce "Vimium Labs".
<tr>
<td colspan="2"><header>Vimium Labs</header></td>
</tr>
<tr>
<td class="caption"></td>
<td>
<div class="help">
<div class="example">
</div>
</div>
These features are experimental and may be changed or removed in future releases.
</td>
</tr>
<tr>
<td class="caption">Search weighting</td>
<td>
<div class="help">
<div class="example">
How prominent should suggestions be in the vomnibar?
<tt>0</tt> disables suggestions altogether.
</div>
</div>
<input id="omniSearchWeight" type="number" min="0.0" max="1.0" step="0.05" />(0 to 1)
</td>
</tr>
-->
</tbody>
</table>
</div>
<!-- Some extra space which is hidden underneath the footer. -->
<div id="endSpace"/>
<div id="footer">
<div id="footerWrapper">
<table id="footerTable">
<tr>
<td id="footerTableData">
<span id="helpText">
Type <strong>?</strong> to show the help dialog.
<br/>
Type <strong>Ctrl-Enter</strong> to save <i>all</i> options.
</span>
</td>
<td id="saveOptionsTableData" nowrap>
<button id="advancedOptionsButton"></button>
<button id="saveOptions" disabled="true">No Changes</button>
</td>
</tr>
</table>
</div>
</div>
</body>
</html>