diff options
Diffstat (limited to 'options.html')
| -rw-r--r-- | options.html | 87 |
1 files changed, 67 insertions, 20 deletions
diff --git a/options.html b/options.html index 627560f8..8dfd23e8 100644 --- a/options.html +++ b/options.html @@ -1,6 +1,7 @@ <html> <head> <title>Vimium Options</title> + <script src="lib/utils.js"></script> <script src="lib/keyboardUtils.js"></script> <script src="linkHints.js"></script> <script src="lib/clipboard.js"></script> @@ -17,12 +18,13 @@ border:1px solid red; } .example { - font-size:80%; + font-size: 12px; color:#555; margin-left:20px; } .caption { margin-right:10px; + min-width: 130px; } td { padding:5px 0; @@ -70,15 +72,20 @@ 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> <script type="text/javascript"> $ = function(id) { return document.getElementById(id); }; var defaultSettings = chrome.extension.getBackgroundPage().defaultSettings; - var editableFields = ["scrollStepSize", "defaultZoomLevel", "excludedUrls", "linkHintCharacters", - "userDefinedLinkHintCss", "keyMappings", "previousPatterns", "nextPatterns"]; + var editableFields = ["scrollStepSize", "excludedUrls", "linkHintCharacters", "userDefinedLinkHintCss", + "keyMappings", "filterLinkHints", "previousPatterns", "nextPatterns"]; var canBeEmptyFields = ["excludedUrls", "keyMappings", "userDefinedLinkHintCss"]; @@ -93,8 +100,13 @@ function initializeOptions() { populateOptions(); - for (var i = 0; i < editableFields.length; i++) + + 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( @@ -107,6 +119,10 @@ enableSaveButton(); } + function onDataLoaded() { + $("linkHintCharacters").readOnly = $("filterLinkHints").checked; + } + function enableSaveButton() { $("saveOptions").removeAttribute("disabled"); } // Saves options to localStorage. @@ -115,7 +131,16 @@ // the freedom to change the defaults in the future. for (var i = 0; i < editableFields.length; i++) { var fieldName = editableFields[i]; - var fieldValue = $(fieldName).value.trim(); + var field = $(fieldName); + + var fieldValue; + if (field.getAttribute("type") == "checkbox") { + fieldValue = field.checked ? "true" : "false"; + } else { + fieldValue = field.value.trim(); + field.value = fieldValue; + } + var defaultFieldValue = (defaultSettings[fieldName] != null) ? defaultSettings[fieldName].toString() : ""; @@ -142,20 +167,33 @@ for (var i = 0; i < editableFields.length; i++) { // If it's null or undefined, let's go to the default. We want to allow empty strings in certain cases. if (localStorage[editableFields[i]] != "" && !localStorage[editableFields[i]]) { - $(editableFields[i]).value = defaultSettings[editableFields[i]] || ""; + var val = defaultSettings[editableFields[i]] || ""; } else { - $(editableFields[i]).value = localStorage[editableFields[i]]; + var val = localStorage[editableFields[i]]; } - $(editableFields[i]).setAttribute("savedValue", $(editableFields[i]).value); + setFieldValue($(editableFields[i]), val); } + onDataLoaded(); } function restoreToDefaults() { - for (var i = 0; i < editableFields.length; i++) - $(editableFields[i]).value = defaultSettings[editableFields[i]] || ""; + 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++) @@ -176,12 +214,6 @@ </td> </tr> <tr> - <td><span class="caption">Default zoom level</span></td> - <td> - <input id="defaultZoomLevel" type="text" value="100" style="width:50px" />% - </td> - </tr> - <tr> <td colspan="3"> Excluded URLs<br/> <div class="help"> @@ -200,7 +232,7 @@ </td> </tr> <tr class="advancedOption"> - <td class="caption">Key mappings</td> + <td class="caption">Custom key<br/>mappings</td> <td id="mappingsHelp" verticalAlign="top"> <div class="help"> <div class="example"> @@ -244,11 +276,26 @@ </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"> - The Patterns split by ','. + Vimium will match against these patterns to navigate to a 'previous' page. </div> </div> <input id="previousPatterns" type="text" style="width:320px" /> @@ -259,7 +306,7 @@ <td verticalAlign="top"> <div class="help"> <div class="example"> - The Patterns split by ','. + Vimium will match against these patterns to navigate to a 'next' page. </div> </div> <input id="nextPatterns" type="text" style="width:320px" /> |