Permalink
Fetching contributors…
Cannot retrieve contributors at this time
325 lines (299 sloc) 10.4 KB
<html>
<head>
<title>Vimium Options</title>
<script src="lib/utils.js"></script>
<script src="lib/keyboardUtils.js"></script>
<script src="lib/domUtils.js"></script>
<script src="lib/clipboard.js"></script>
<script src="linkHints.js"></script>
<script src="vimiumFrontend.js"></script>
<script src="completionDialog.js"></script>
<script src="bookmarks.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;
}
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">
$ = function(id) { return document.getElementById(id); };
var defaultSettings = chrome.extension.getBackgroundPage().settings.defaults;
var editableFields = ["scrollStepSize", "excludedUrls", "linkHintCharacters", "userDefinedLinkHintCss",
"keyMappings", "filterLinkHints", "previousPatterns", "nextPatterns"];
var canBeEmptyFields = ["excludedUrls", "keyMappings", "userDefinedLinkHintCss"];
var postSaveHooks = {
keyMappings: function (value) {
backgroundPage = chrome.extension.getBackgroundPage();
backgroundPage.clearKeyMappingsAndSetDefaults();
backgroundPage.parseCustomKeyMappings(value);
backgroundPage.refreshCompletionKeysAfterMappingSave();
}
};
function initializeOptions() {
if (settings.isLoaded)
populateOptions();
else
settings.addEventListener("load", populateOptions);
for (var i = 0; i < editableFields.length; i++) {
$(editableFields[i]).addEventListener("keyup", onOptionKeyup, false);
$(editableFields[i]).addEventListener("change", enableSaveButton, false);
$(editableFields[i]).addEventListener("change", onDataLoaded, false);
}
$("advancedOptions").addEventListener("click", openAdvancedOptions, false);
$("showCommands").addEventListener("click", function () {
showHelpDialog(
chrome.extension.getBackgroundPage().helpDialogHtml(true, true, "Command Listing"), frameId);
}, false);
}
function onOptionKeyup(event) {
if (event.target.getAttribute("savedValue") != event.target.value)
enableSaveButton();
}
function onDataLoaded() {
$("linkHintCharacters").readOnly = $("filterLinkHints").checked;
}
function enableSaveButton() { $("saveOptions").removeAttribute("disabled"); }
// Saves options to localStorage.
function saveOptions() {
// If the value is unchanged from the default, delete the preference from localStorage; this gives us
// the freedom to change the defaults in the future.
for (var i = 0; i < editableFields.length; i++) {
var fieldName = editableFields[i];
var field = $(fieldName);
var fieldValue;
if (field.getAttribute("type") == "checkbox") {
fieldValue = field.checked ? "true" : "false";
} else {
fieldValue = field.value.trim();
field.value = fieldValue;
}
// If it's empty and not a field that we allow to be empty, restore to the default value
if (!fieldValue && canBeEmptyFields.indexOf(fieldName) == -1) {
settings.clear(fieldName);
fieldValue = settings.get(fieldName);
} else
settings.set(fieldName, fieldValue);
$(fieldName).value = fieldValue;
$(fieldName).setAttribute("savedValue", fieldValue);
if (postSaveHooks[fieldName]) { postSaveHooks[fieldName](fieldValue); }
}
$("saveOptions").disabled = true;
}
// Restores select box state to saved value from localStorage.
function populateOptions() {
for (var i = 0; i < editableFields.length; i++) {
var val = settings.get(editableFields[i]) || "";
setFieldValue($(editableFields[i]), val);
}
onDataLoaded();
}
function restoreToDefaults() {
for (var i = 0; i < editableFields.length; i++) {
var val = defaultSettings[editableFields[i]] || "";
setFieldValue($(editableFields[i]), val);
}
onDataLoaded();
enableSaveButton();
}
function setFieldValue(field, value) {
if (field.getAttribute('type') == 'checkbox')
field.checked = value == "true";
else
field.value = value;
field.setAttribute("savedValue", value);
}
function openAdvancedOptions(event) {
var elements = document.getElementsByClassName("advancedOption");
for (var i = 0; i < elements.length; i++)
elements[i].style.display = (elements[i].style.display == "table-row") ? "none" : "table-row";
event.preventDefault();
}
</script>
</head>
<body onload="initializeOptions()">
<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 &raquo;</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">Previous Patterns</td>
<td verticalAlign="top">
<div class="help">
<div class="example">
Vimium will match against these patterns to navigate to a 'previous' page.
</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 to navigate to a 'next' page.
</div>
</div>
<input id="nextPatterns" type="text" style="width:320px" />
</td>
</tr>
</table>
<div id="buttonsPanel">
<button id="restoreSettings" onclick="restoreToDefaults()">Restore to Defaults</button>
<button id="saveOptions" disabled="true" onclick="saveOptions()">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>