From 6230dec9d051306201af7cff7b530814e2da5275 Mon Sep 17 00:00:00 2001 From: Stephen Blott Date: Sat, 15 Nov 2014 17:14:30 +0000 Subject: Options; reworked, with fixed footer. Changes: - Added caption "Miscellaneous toggles" to visually separate the link-hints checkbox from the others. - Made the text for the two link-hint character sets the same. - The "Show advanced options" link now spans two columns, so it does not affect its column's width, so the layout doesn't change when the options below the fold are expanded. - Added a fixed footer containing the help text and the save button. - The text of the save button now changes when it is enabled. (I sometimes find it hard to tell whether its been activated or not.) - Control-Enter anywhere on the page saves all options. - Aligned the entire options table left, instead of centered. This is the chrome style. However, it also makes it easier to get the alignment right between main table and the footer. - Change width of main wrapper such that it actually matches the table's width. This aligns the right edge of the bar under the title with the right edge of the second column of the table. --- pages/options.coffee | 29 +++------------ pages/options.html | 102 ++++++++++++++++++++++++++++++++++----------------- 2 files changed, 74 insertions(+), 57 deletions(-) diff --git a/pages/options.coffee b/pages/options.coffee index f5968eb9..aaa4d9b4 100644 --- a/pages/options.coffee +++ b/pages/options.coffee @@ -42,13 +42,7 @@ class Option @saveOptions: -> Option.all.map (option) -> option.save() $("saveOptions").disabled = true - - # Used by text options. saves all options. - activateCtrlEnterListener: (element) -> - element.addEventListener "keyup", (event) -> - if event.ctrlKey and event.keyCode == 13 - element.blur() - Option.saveOptions() + $("saveOptions").innerHTML = "No Changes" # Abstract method; only implemented in sub-classes. # Populate the option's DOM element (@element) with the setting's current value. @@ -66,7 +60,6 @@ class TextOption extends Option constructor: (field,enableSaveButton) -> super(field,enableSaveButton) @element.addEventListener "input", enableSaveButton - @activateCtrlEnterListener @element populateElement: (value) -> @element.value = value readValueFromElement: -> @element.value.trim() @@ -74,7 +67,6 @@ class NonEmptyTextOption extends Option constructor: (field,enableSaveButton) -> super(field,enableSaveButton) @element.addEventListener "input", enableSaveButton - @activateCtrlEnterListener @element populateElement: (value) -> @element.value = value # If the new value is not empty, then return it. Otherwise, restore the default value. @@ -89,7 +81,6 @@ class ExclusionRulesOption extends Option super(args...) $("exclusionAddButton").addEventListener "click", (event) => @appendRule { pattern: "", passKeys: "" } - @maintainExclusionMargin() # Focus the pattern element in the new rule. @element.children[@element.children.length-1].children[0].children[0].focus() # Scroll the new rule into view. @@ -101,7 +92,6 @@ class ExclusionRulesOption extends Option @element.removeChild @element.firstChild for rule in rules @appendRule rule - @maintainExclusionMargin() # Append a row for a new rule. appendRule: (rule) -> @@ -111,7 +101,6 @@ class ExclusionRulesOption extends Option for field in ["pattern", "passKeys"] element = row.querySelector ".#{field}" element.value = rule[field] - @activateCtrlEnterListener element for event in [ "input", "change" ] element.addEventListener event, enableSaveButton @@ -120,7 +109,6 @@ class ExclusionRulesOption extends Option row = event.target.parentNode.parentNode row.parentNode.removeChild row enableSaveButton() - @maintainExclusionMargin() @element.appendChild row @@ -138,20 +126,11 @@ class ExclusionRulesOption extends Option flatten = (rule) -> if rule and rule.pattern then rule.pattern + "\n" + rule.passKeys else "" a.map(flatten).join("\n") == b.map(flatten).join("\n") - # Hack. There has to be a better way than... - # The y-axis scrollbar for "exclusionRules" is only displayed if it is needed. When visible, it appears on - # top of the enclosed content (partially obscuring it). Here, we adjust the margin of the "Remove" button to - # compensate. - maintainExclusionMargin: -> - scrollBox = $("exclusionScrollBox") - margin = if scrollBox.clientHeight < scrollBox.scrollHeight then "16px" else "0px" - for element in scrollBox.getElementsByClassName "exclusionRemoveButton" - element.style["margin-right"] = margin - # # Operations for page elements. enableSaveButton = -> $("saveOptions").removeAttribute "disabled" + $("saveOptions").innerHTML = "Save Changes" # Display either "linkHintNumbers" or "linkHintCharacters", depending upon "filterLinkHints". maintainLinkHintsView = -> @@ -213,3 +192,7 @@ document.addEventListener "DOMContentLoaded", -> maintainLinkHintsView() window.onbeforeunload = -> "You have unsaved changes to options." unless $("saveOptions").disabled + document.addEventListener "keyup", (event) -> + if event.ctrlKey and event.keyCode == 13 + Option.saveOptions() + diff --git a/pages/options.html b/pages/options.html index 4f037ba5..480f14fc 100644 --- a/pages/options.html +++ b/pages/options.html @@ -6,12 +6,14 @@ body { font: 14px "DejaVu Sans", "Arial", sans-serif; color: #303942; - width: 680px; margin: 0 auto; } a, a:visited { color: #15c; } a:active { color: #052577; } - div#wrapper { width: 500px; } + div#wrapper, #footerWrapper { + width: 540px; + margin-left: 35px; + } header { font-size: 18px; font-weight: normal; @@ -141,20 +143,13 @@ font-size: 80%; } /* Make the caption in the settings table as small as possible, to pull the other fields to the right. */ - td:first-child { + .caption { width: 1px; white-space: nowrap; } #buttonsPanel { width: 100%; } #advancedOptions { display: none; } #advancedOptionsLink { line-height: 24px; } - #saveOptions { float: right; } - #saveOptions { margin-right: 0; } - #showHelpDialogMessage { - width: 100%; - color: #979ca0; - font-size: 12px; - } .help { position: absolute; right: -320px; @@ -180,10 +175,6 @@ } /* Boolean options have a tighter form representation than text options. */ td.booleanOption { font-size: 12px; } - footer { - padding: 15px 0; - border-top: 1px solid #eee; - } /* Ids and classes for rendering exclusionRules */ #exclusionScrollBox { overflow: scroll; @@ -193,21 +184,51 @@ border: 1px solid #bfbfbf; border-radius: 2px; color: #444; + width: 100% + } + #exclusionRules { + width: 100%; + } + .exclusionRulePassKeys { + width: 33%; + } + .exclusionRemoveButton { + width: 1px; /* 1px; smaller than the button itself. */ } input.pattern, input.passKeys { + width: 100%; font-family: Consolas, "Liberation Mono", Courier, monospace; font-size: 14px; } - .pattern { - width: 250px; - } - .passKeys { - width: 120px; - } #exclusionAddButton { float: right; - margin-top: 5px; margin-right: 0px; + margin-top: 5px; + } + #footer { + background: #f5f5f5; + position: fixed; + bottom: 0px; + z-index: 10; + } + #footer, #footerTable, #footerTableData { + width: 100%; + } + #endSpace { + /* Leave space for the fixed footer. */ + min-height: 30px; + max-height: 30px; + } + #helpText { + color: #979ca0; + font-size: 12px; + } + #saveOptionsTableData { + float: right; + } + #saveOptions { + white-space: nowrap; + width: 110px; } @@ -237,10 +258,10 @@
@@ -283,8 +304,7 @@ unmapAll - Show advanced options… - + Show advanced options… @@ -306,7 +326,7 @@ unmapAll - Numbers used
for filtered link hints + Numbers used
for link hints
@@ -332,7 +352,7 @@ unmapAll - + Miscellaneous
toggles
@@ -424,14 +444,28 @@ unmapAll +
-
+ +
-
- Type ? to show the Vimium help dialog. -
- Type Ctrl-Enter in text inputs to save all options. -
+ -- cgit v1.2.3 From 865e4b6a3077cb9547952b9c1b04ddb2b15ea952 Mon Sep 17 00:00:00 2001 From: Stephen Blott Date: Tue, 18 Nov 2014 14:39:30 +0000 Subject: Options; Exclusion headers, style fiddles. --- pages/options.coffee | 6 +++--- pages/options.html | 52 +++++++++++++++++++++++++--------------------------- 2 files changed, 28 insertions(+), 30 deletions(-) diff --git a/pages/options.coffee b/pages/options.coffee index aaa4d9b4..6167e719 100644 --- a/pages/options.coffee +++ b/pages/options.coffee @@ -88,8 +88,8 @@ class ExclusionRulesOption extends Option exclusionScrollBox.scrollTop = exclusionScrollBox.scrollHeight populateElement: (rules) -> - while @element.firstChild - @element.removeChild @element.firstChild + # while @element.firstChild.nextSibling + # @element.removeChild @element.firstChild.nextSibling for rule in rules @appendRule rule @@ -114,7 +114,7 @@ class ExclusionRulesOption extends Option readValueFromElement: -> rules = - for element in @element.children + for element in @element.getElementsByClassName "exclusionRuleTemplateInstance" pattern = element.children[0].firstChild.value.trim() passKeys = element.children[1].firstChild.value.trim() { pattern: pattern, passKeys: passKeys } diff --git a/pages/options.html b/pages/options.html index 480f14fc..ce9fe77f 100644 --- a/pages/options.html +++ b/pages/options.html @@ -114,21 +114,11 @@ width: 40px; margin-right: 3px; } - textarea#userDefinedLinkHintCss { + textarea#userDefinedLinkHintCss, textarea#keyMappings, textarea#searchEngines { width: 100%;; min-height: 130px; white-space: nowrap; } - textarea#keyMappings { - width: 100%; - min-height: 135px; - white-space: nowrap; - } - textarea#searchEngines { - width: 100%; - min-height: 135px; - white-space: nowrap; - } input#previousPatterns, input#nextPatterns { width: 100%; } @@ -180,7 +170,8 @@ overflow: scroll; overflow-x: hidden; overflow-y: auto; - height: 170px; + min-height: 135px; + height: 135px; border: 1px solid #bfbfbf; border-radius: 2px; color: #444; @@ -195,11 +186,15 @@ .exclusionRemoveButton { width: 1px; /* 1px; smaller than the button itself. */ } - input.pattern, input.passKeys { + input.pattern, input.passKeys, .exclusionHeaderText { width: 100%; font-family: Consolas, "Liberation Mono", Courier, monospace; font-size: 14px; } + .exclusionHeaderText { + padding-left: 3px; + color: #979ca0; + } #exclusionAddButton { float: right; margin-right: 0px; @@ -207,6 +202,7 @@ } #footer { background: #f5f5f5; + border-top: 1px solid #979ca0; position: fixed; bottom: 0px; z-index: 10; @@ -220,7 +216,6 @@ max-height: 30px; } #helpText { - color: #979ca0; font-size: 12px; } #saveOptionsTableData { @@ -245,24 +240,27 @@
- The left column contains URL patterns. Vimium will be wholly or partially disabled for URLs - matching these patterns. Patterns are Javascript regular expressions. Additionally, the - character "*" matches any zero or more characters. + Wholly or partially disable Vimium. "Patterns" are URL regular expressions; + additionally, "*" matches any zero or more characters.

- The right column contains keys which Vimium would would normally handle, but which should - instead be passed through to the underlying web page (for pages matching the - pattern). If left empty, then Vimium will be wholly disabled. + If "Keys" is left empty, then vimium is wholly disabled. + Otherwise, just the listed keys are disabled (they are passed through).
-
+ + + + + +
PatternsKeys
@@ -352,7 +350,7 @@ unmapAll - Miscellaneous
toggles + Miscellaneous
options
-- cgit v1.2.3 From 4b6fed3e7ccadb3220c160f5db2dd2db5f0a1132 Mon Sep 17 00:00:00 2001 From: Stephen Blott Date: Tue, 18 Nov 2014 14:57:14 +0000 Subject: Options; Ctrl-Enter blurs active element. --- pages/options.coffee | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/pages/options.coffee b/pages/options.coffee index 6167e719..44320a0e 100644 --- a/pages/options.coffee +++ b/pages/options.coffee @@ -88,8 +88,6 @@ class ExclusionRulesOption extends Option exclusionScrollBox.scrollTop = exclusionScrollBox.scrollHeight populateElement: (rules) -> - # while @element.firstChild.nextSibling - # @element.removeChild @element.firstChild.nextSibling for rule in rules @appendRule rule @@ -194,5 +192,6 @@ document.addEventListener "DOMContentLoaded", -> document.addEventListener "keyup", (event) -> if event.ctrlKey and event.keyCode == 13 + document.activeElement.blur() if document?.activeElement?.blur Option.saveOptions() -- cgit v1.2.3 From b50bdaabb2ff01b3f7ebb6d124316542a1c0ec08 Mon Sep 17 00:00:00 2001 From: Stephen Blott Date: Sat, 22 Nov 2014 12:11:12 +0000 Subject: Options; use consistent capitalization. --- pages/popup.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pages/popup.html b/pages/popup.html index 691414f2..775d6c07 100644 --- a/pages/popup.html +++ b/pages/popup.html @@ -76,7 +76,7 @@
  • - Type Ctrl-ENTER to save and close. + Type Ctrl-Enter to save and close. Options
-- cgit v1.2.3 From b8c69e64038f20278d56022d69b49f3e80c701b6 Mon Sep 17 00:00:00 2001 From: Stephen Blott Date: Sat, 22 Nov 2014 12:34:19 +0000 Subject: Options; add help text for scrollStepSize. No help is really needed. However, the gap where the help text should be looks ugly. --- pages/options.html | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/pages/options.html b/pages/options.html index ce9fe77f..88e4845b 100644 --- a/pages/options.html +++ b/pages/options.html @@ -308,6 +308,11 @@ unmapAll Scroll step size +
+
+ The size for basic movements (usually j/k/h/l). +
+
px -- cgit v1.2.3 From 1958a77f82b44fcb863424cfa488257f18be3820 Mon Sep 17 00:00:00 2001 From: Stephen Blott Date: Sat, 29 Nov 2014 10:19:03 +0000 Subject: Options; restyle exclusion rules. --- pages/options.html | 27 +++++++++++++++++++++++---- 1 file changed, 23 insertions(+), 4 deletions(-) diff --git a/pages/options.html b/pages/options.html index 88e4845b..ab99c226 100644 --- a/pages/options.html +++ b/pages/options.html @@ -170,13 +170,23 @@ overflow: scroll; overflow-x: hidden; overflow-y: auto; - min-height: 135px; - height: 135px; - border: 1px solid #bfbfbf; + max-height: 135px; border-radius: 2px; color: #444; width: 100% } + #exclusionScrollBox::-webkit-scrollbar { + width: 12px; + } + #exclusionScrollBox::-webkit-scrollbar-track { + -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); + border-radius: 2px; + } + + #exclusionScrollBox::-webkit-scrollbar-thumb { + border-radius: 2px; + -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); + } #exclusionRules { width: 100%; } @@ -186,6 +196,14 @@ .exclusionRemoveButton { width: 1px; /* 1px; smaller than the button itself. */ } + .exclusionRemoveButtonButton { + border: none; + background-color: #fff; + color: #979ca0; + } + .exclusionRemoveButtonButton:hover { + color: #444; + } input.pattern, input.passKeys, .exclusionHeaderText { width: 100%; font-family: Consolas, "Liberation Mono", Courier, monospace; @@ -259,7 +277,8 @@ - + +
-- cgit v1.2.3 From 2b06bebef4837f515ce1a85b0b8efa0af6f5d125 Mon Sep 17 00:00:00 2001 From: Stephen Blott Date: Sat, 29 Nov 2014 12:07:21 +0000 Subject: Options; release focus on clicking advanced. When the show/hide advanced options link is clicked, it gains the focus, and the URL is displayed by chrome in the bottom-left corder of the window. This partially obscures the footer, so we immediately blur the link. Also, same for the "show help" link. --- pages/options.coffee | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/pages/options.coffee b/pages/options.coffee index 44320a0e..674f0b98 100644 --- a/pages/options.coffee +++ b/pages/options.coffee @@ -152,9 +152,13 @@ toggleAdvancedOptions = $("advancedOptionsLink").innerHTML = "Hide advanced options" advancedMode = !advancedMode event.preventDefault() + # Prevent the "advanced options" link from retaining the focus. + document.activeElement.blur() activateHelpDialog = -> showHelpDialog chrome.extension.getBackgroundPage().helpDialogHtml(true, true, "Command Listing"), frameId + # Prevent the "show help" link from retaining the focus. + document.activeElement.blur() # # Initialization. -- cgit v1.2.3 From c6f78f1a9191eeb781c3718ac10a8b06408c3441 Mon Sep 17 00:00:00 2001 From: Stephen Blott Date: Sat, 29 Nov 2014 12:20:11 +0000 Subject: Options; Reintroduce min-height for exclusion rules. We need to keep *some* minimum height to avoid the help texts colliding. --- pages/options.html | 1 + 1 file changed, 1 insertion(+) diff --git a/pages/options.html b/pages/options.html index ab99c226..68b615e3 100644 --- a/pages/options.html +++ b/pages/options.html @@ -171,6 +171,7 @@ overflow-x: hidden; overflow-y: auto; max-height: 135px; + min-height: 75px; border-radius: 2px; color: #444; width: 100% -- cgit v1.2.3