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.

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. <ctrl-Enter> 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;
       }
     </style>
 
@@ -237,10 +258,10 @@
                <div id="exclusionScrollBox">
                   <table id="exclusionRules"></table>
                   <template id="exclusionRuleTemplate">
-                    <tr>
+                  <tr>
                        <td><input/ type="text" class="pattern" placeholder="URL pattern"></td>
-                       <td><input/ type="text" class="passKeys" placeholder="Exclude keys"></td>
-                       <td><input/ type="button" class="exclusionRemoveButton" tabindex = "-1" value="&#x2716;"></td>
+                       <td class="exclusionRulePassKeys"><input/ type="text" class="passKeys" placeholder="Exclude keys"></td>
+                       <td class="exclusionRemoveButton"><input/ type="button" tabindex = "-1" value="&#x2716;"></td>
                     </tr>
                   </template>
                </div>
@@ -283,8 +304,7 @@ unmapAll
           </td>
         </tr>
         <tr>
-           <td><a href="#" id="advancedOptionsLink">Show advanced options&hellip;</a></td>
-           <td><button id="saveOptions" disabled="true">Save Options</button></td>
+           <td colspan="2"><a href="#" id="advancedOptionsLink">Show advanced options&hellip;</a></td>
         </tr>
         <tbody id='advancedOptions'>
           <tr>
@@ -306,7 +326,7 @@ unmapAll
             </td>
           </tr>
           <tr>
-            <td class="caption">Numbers used<br/> for filtered link hints</td>
+            <td class="caption">Numbers used<br/> for link hints</td>
             <td verticalAlign="top">
                 <div class="help">
                   <div class="example">
@@ -332,7 +352,7 @@ unmapAll
             </td>
           </tr>
           <tr>
-            <td class="caption"></td>
+            <td class="caption">Miscellaneous<br/>toggles</td>
             <td verticalAlign="top" class="booleanOption">
               <div class="help">
                 <div class="example">
@@ -424,14 +444,28 @@ unmapAll
           </tr>
         </tbody>
       </table>
+    </div>
 
-      <br/>
+    <!-- Some extra space which is hidden underneath the footer. -->
+    <div id="endSpace"/>
 
-      <footer id="showHelpDialogMessage">
-        Type <strong>?</strong> to show the Vimium help dialog.
-        <br/>
-        Type <strong>Ctrl-Enter</strong> in text inputs to save all options.
-      </footer>
+    <div id="footer">
+      <div id="footerWrapper">
+        <table id="footerTable">
+          <tr>
+            <td id="footerTableData">
+              <span id="helpText">
+                Type <strong>?</strong> to show the Vimium help dialog.
+                <br/>
+                Type <strong>Ctrl-Enter</strong> to save <i>all</i> options.
+              </span>
+            </td>
+            <td id="saveOptionsTableData">
+              <button id="saveOptions" disabled="true">No Changes</button>
+            </td>
+          </tr>
+        </table>
+      </div>
     </div>
   </body>
 </html>